O.Curé [1 ] Web 2

odecalmΛογισμικό & κατασκευή λογ/κού

2 Ιουλ 2012 (πριν από 5 χρόνια και 6 μήνες)

462 εμφανίσεις

O.Curé [
1
]
Web 2.0
O.Curé [
2
]
Contact

Olivier Curé

ocure@univ-mlv.fr

http://www.univ-mlv.fr/~ocure

Copernic 4B060
O.Curé [
3
]
Objectifs du cours

Développement de sites pour le Web
2.0

HTML, CSS, DOM, javascript et jQuery

Mashup

Introduction aux technologies du
Semantic Web (Web 3.0)

RDF, RDFS et OWL
O.Curé [
4
]
Organisation du cours

6 cours de 2 heures (Olivier Curé)

6 TD de 2 heures (Valentin Bourgoin)
O.Curé [
5
]
Le Web

Quelques informations sur le Web et
son évolution
O.Curé [
6
]
Ordre de grandeur

Ordre de grandeur :

1Mo : 1 gros roman

200à 500Mo : ce que mémorise un
être humain dans sa vie.

900Mo : information contenue dans le génome d'une cellule humaine.

1To : estimation de la taille d'un HD en 2007. Toutes les conversations d'un
être humain dans sa vie au format MP3.

20To : bibliothèque du congrès à Washington (que le texte), 20 millions
d'ouvrages.

200To : archives du net en 2003 12 milliards de pages.

3Po : Bibliothèque du congrès scannerisée (textes + images).

100Eo : total du flux d'information dans le cerveau humain durant sa vie
(Von Neumann).

Eo (Exa), Zo (Zetta) et Yo (Yotta).
O.Curé [
7
]
Internet / Web

En 2007:

500 million d'adresses IP

1.17 milliard d'utilisateurs

18% de la population

109 million de sites Web

29.7 milliard de pages web

7.2 milliard de recherches/mois (3.9 pour
Google)
O.Curé [
8
]
Des chiffres

En 2006:

161 Eo (10
8
To) d'information ont été créés ou
répliqués dans le monde

C'est plus que durant les 5000 dernières
années

International Data Corporation (IDC) estime
une croissance 6X d'ici 2010 (soit 988Eo/an)

Le volume de l'information technique double
tous les 2 ans. Elle doublera toutes les 72 heures
en 2010.
O.Curé [
9
]
Encore des chiffres

2011: +de 500million d'utilisateurs sur Facebook:
équivalent du 3ème plus gros pays au monde

En 2009 : Myspace, environ 185million
d'utilisateurs

En moyenne, une page MySpace est visitée 30 fois
par jour pour accéder à

Des images (plus de 1 milliard)

De la musique (plus de 25 million)

Des vidéos (60To)

Sur 6000 serveurs web et 250 serveurs de BD
O.Curé [
10
]
Encore..

Facebook:

1.8 milliard de photos

31 million d'utilisateurs

10
5
nouveaux utilisateurs par jour

1800 applications

YouTube

1.7 milliard de vidéos téléchargés/mois

1 million de streams/jour

20 heures de vidéo d'upload par minute

Flickr (juin 2009)

3.6 milliard d'images
O.Curé [
11
]
Pour finir

eBay dispose de 2 entrepôts de
données (data warehouse):

Un de plus de 2Po

SGBD parallèle (Teradata)

Un autre de plus de 6.5Po

50To de nouvelles données par jour

SGBD parallèle (Greenplum)

96 noeuds

Compression de données à 70%
O.Curé [
12
]
Quelques chiffres

« Mobile devices in America are generating something like
600
billion geo-spatially tagged transactions per day.
Every
call, text message, email and data transfer handled by your
mobile device creates a transaction with your space-time
coordinate (to roughly
60 meters accuracy
if there are three
cell towers in range), whether you have GPS or not. Got a
Blackberry? Every few minutes, it sends a heartbeat, creating
a transaction whether you are using the phone or not. If the
device is GPS-enabled and you’re using a location-based
service your location is accurate to somewhere between 10
and 30 meters.
Using Wi-Fi? It is accurate below 10
meters
. ».


Jeff Jonas (http://jeffjonas.typepad.com/)
O.Curé [
13
]
Quelques questions

Dans quoi stocke-t-on toutes ces
informations ?

Comment pose-t-on des questions ?

Comment développer un site web de ce
type ?
O.Curé [
14
]
Dans quoi stocke-t-on
toutes ces informations ?

Dans des bases de données

Une base de données (
database
) est un
ensemble structuré et cohérent de
données enregistrées avec le minimum
de redondance pour satisfaire
simultanément plusieurs utilisateurs de
manière sélective et dans un temps
opportun.
O.Curé [
15
]
Système de gestion de
base de données (SGBD)

Un ensemble de logiciels permettant la création et la
maintenance de bases de données.

Un SGBD (
database Management System -DBMS)
 
doit
permettre :

la description, l'organisation et la gestion des données sur
les mémoires secondaires.

la recherche, la sélection et la modification des données.

la manipulation des représentations abstraites des données,
indépendamment de leur organisation et de leur
implantation sur les supports physiques.
O.Curé [
16
]
Caractéristiques des SGBD

Structure (types et comportements des données).

Persistence des données (mémoire secondaire).

Accès aux données (langage déclaratif pour les requ
êtes,
langage procédural de programmation).

Performance (accès et stockage des données).

Partage ( accès concurrentiel et transactions)

Volume important de données

Sécurité et reprise sur pannes
O.Curé [
17
]
Modèle de données

Une BD exploite un modèle de
données. Il existe de plusieurs types.

Un modèle de données est un
ensemble de concepts permettant de
décrire la structure d'une base de
données : types de données, relations,
des contraintes, des opérations
(langage de définition et de
manipulation des données) et la
sémantique.
O.Curé [
18
]
Quelques modèles de
données

Evolution dans le temps :

système de fichiers (50s)

modèle hiérarchique( 60s) :IMS

modèle réseau (70s): Codasyl, IDMS

modèle relationnel (80s): Oracle, Sybase,DB2,..

modèle orienté objet (90s): Versant, Gemstone, O2

modèle objet-relationnel (90s) : Oracle, DB2,
SQLServer, PostgreSQL

modèle semi-structuré (hétérogénéité, XML).

Le modèle relationnel est le plus populaire
aujourd'hui mais de nombreuses variantes émergent
actuellement (principalement du domaine du Web:
mouvement NoSQL.
O.Curé [
19
]
Comment pose-t-on des
questions ?

A l'aide d'un langage de requêtes.

Ils diffèrent suivant le modèle de données

Un langage de requêtes doit prendre en
compte 2 aspects:

L'expressivité (la complexité des questions
que l'on peut poser)

La difficulté du calcul de la réponse par
l'ordinateur

En simplifiant, plus le langage est expressif
plus le calcul sera long.
O.Curé [
20
]
Comment développer un
site web de ce type ?

Emergence du web : 1992

3 générations de sites Web : statique,
dynamique et « intelligente ».

1ère génération : statique – 100% HTML

Les autres générations exploitent l'architecture
client-serveur.

HTTP + CGI

HTTP + template + scripting

Serveur de présentation
O.Curé [
21
]
Architectures du web

Web / Data
Processing
Technologies
Server-side
processing
Client-side
processing
Client-side
scripts
Compiled programs
on client workstation
Compiled
programs
Hybrid
Technologies
Server-Side
scripts
PERL
Active Server Pages
Cold Fusion
Java applets
JavaScript
VBScript
CGI Programs
Java Servlets
ASP.NET
Java Server Pages
ASP.NET
INTEGRATING WEB SITES AND DATABASES, By Mike
MORRISON, Joline MORRISON, and Anthony KEYS. Communications
of the ACM September 2002 / vol 45, N°9
O.Curé [
22
]
HTTP + CGI

CGI = Common Gateway Interface

Repose sur l'exécution de programmes
sur le serveur en lui passant des
arguments à travers l'URL.

Limites :

Montée en charge importante est difficile

Peu robuste.

Code source peu maintenable et lourd.

Exemples : Perl, Tcl, shells, etc..
O.Curé [
23
]
HTTP + modèle + langage
script serveur

Un modèle (template) est une page HTML
contenant du code, écrit dans un langage script,
exécuté du c
ôté serveur.

Propose une séparation entre le code applicatif
et la page HTML. Le serveur est chargé de la
génération du code HTML.

Limites :

Caractère propriétaire des balises.

Réutilisabilité et structuration.

Ex : PHP et coldfusion
O.Curé [
24
]
Serveur de présentation

Proche de la solution précédente mais avec une
couche d'architecture plus globale et inclusion
de composants.

Deux grandes solutions sont disponibles :

ASP.net (Active Server Pages)

ASP était la 1ère solution sur le marché.

Possibilité de développer dans de
nombreux langages (VB, C#, etc..).

J2EE : Servlets, JSP (Java Server Pages) et java
beans.

Indépendant de la plate-forme.
O.Curé [
25
]
Serveur d'applications

Objectif : fournir une mise en oeuvre logique
applicative sous la forme de composants. Ces
derniers doivent
être persistants et particulier à
des transactions, de manière distribuée.

Ce middleware offre des fonctions techniques
comme : l'équilibrage de charge, la tolérance
aux pannes, la gestion de cache, service de
nommage et de localisation => fonctions vitales
dans le cadre d'applications Internet fortement
centralisées.
O.Curé [
26
]
J2EE

Architecture Java reposant sur l'orienté objet (héritage,
encapsulation et polymorphisme).

Servlets, JSP, JavaBeans, JSTL (JavaServer Tag Libraries) =>
profite du modèle MVC (Modèle Vue Contr
ôleur).

Gestion des transactions (JTA).

Gestion des BD (JDBC).

Gestion des messages (JMS, JavaMail).

Gestion des objets distribués (RMI-IIOP).

Gestion de renommage des services (JNDI).

Solutions : BEA logic, Websphere, Enhydra, Jboss, Geronimo.
O.Curé [
27
]
Le Web

Le Web révolutionne l'accès à l'information.

Des millions de sites, des milliards de pages et des
technologies diverses : statique/dynamique,
internet/ intranet/extranet .

HTML est un support pour l'information distribuée à
destination des
êtres humains mais n'est pas adapté
pour les applications, pourtant ce besoin devient
incontournable.
O.Curé [
28
]
Constat du Web
HTML (HyperText Markup Language) est un langage permettant
de présenter l'information à l'écran (navigateur).
Pas d'échange de données
Pas de traitement de données en dehors de l'affichage
HTML est le support du Web actuel, un Web syntaxique.
Problèmes engendrés :
Moteur de recherche
e-commerce
Publication de services
O.Curé [
29
]
Web 2.0

Le Web 2.0 a été initiée par l'apparition de l'Ajax et
d'autres solutions RIA (Rich Internet Application).

Enrichir l'expérience de l'utilisateur:

Obtenir le même type de comportement qu'avec
une application standard (desktop)

Une application Web non Web2:

Impose une approche « clic, attendre et
rafraîchir » pour les interactions avec
l'utilisateur

Modèle de communication
synchrone
:
l'utilisateur doit attendre la réponse
O.Curé [
30
]
Contraintes des appli Web

Interruption des opérations de l'utilisateur

L'utilisateur ne peut réaliser des opérations lorsqu'il attend
une réponse

Perte du contexte pendant le rafraichissement

Perte d'info sur l'écran

Perte de la position (scrolling)

Pas d'instantanéité du retour des actions de l'utilisateur

Attente pour obtenir la prochaine page

Contrainte d'HTML

Limite des éléments graphiques

Motivation des techno Rich Internet Application (RIA)
O.Curé [
31
]
Technologies RIA

Applet (Java)

Macromedia Flash/AIR

Java Web start

DHTML

Ajax

Silverlight (plateforme Microsoft)

JavaFX (plateforme Java)
O.Curé [
32
]
Applet

Positifs:

Utilisation des API java

Utilisation de data streaming, manipulation graphique,
threading and GUI avancée

Négatifs:

Temps de chargement du code

Une application mal conçue peut faire planter le navigateur
O.Curé [
33
]
Macromedia Flash

Programmation avec ActionScript

Exemple d'implémentation: Flex, Lazlo (open source)

Positifs:

Affichage de de graphique vectoriel

Négatifs:

Navigateur a besoin d'un plug-in

ActionScript est propriétaire
O.Curé [
34
]
Java Web Start

Une application desktop exécutéesur le net

Positifs:

Expérience type desktop

Levier sur les techno Java

Opérations déconnectées possibles

Signature digitale des appli

Déploiement incrémentale

Négatifs:

Les vieux systèmes JRE ne fonctionnent pas.

Le premier temps de chargement peut être long
O.Curé [
35
]
DHTML

Dynamic HTML

DHTML = Javascript + DOM + CSS

Utilisé pour la création d'application interactives

Communication non asynchrone

Rafraichissement complet de la page est nécessaire

Raison de son succès relatif
O.Curé [
36
]
AJAX

DHTML avec communicationAsynchrone au travers de
XMLHttpRequest

Positifs:

Une bonne alternative RIA

Plusieurs boites à outils existent

Pas de plug-in nécessaire

Négatifs

Toujours des incompatibilités entre navigateurs

Difficulté à maintenir et debugger le code javascript
O.Curé [
37
]
Quelques exemples
d'applications basées AJAX

Google Maps

Les données de la carte sont demandées et
téléchargées de manière asynchrone en tâche de
fond

Les autres parties de la page ne sont pas
modifiées donc pas de perte du contexte
opérationnel

Google Suggest (fin 2004): permettre la saisie des
premières lettres du mot recherché, d'afficher les
recherches les plus courantes.

Yahoo Maps

Gmail
O.Curé [
38
]
Autres utilisations d'AJAX

Auto complétion

Adresse email, nom, ville peuvent être auto
complètés lors de la saisie de l'utilisateur

Validation des données d'un formulaire en temps
réel

Identifiant, codes postaux, etc.

Simplification de la logique de validation (côté
serveur et client)

Rafraîchissement des données

GUI avancées et ses contrôles (arbre, menu, barre
de progression, etc.)
O.Curé [
39
]
1.DOM
Document Object Model
O.Curé [
40
]
Introduction DOM

W3C

Document Object Model ou Modèle d'Objets
représentant un Document

Objectif: permettre aux scripts et aux programmes
d'accéder dynamiquement au contenu, à la
structure et à la présentation des documents HTML
ou XML et de les mettre à jour.

C'est un interface de programmation pour les
documents HTML et XML.

Chaque document est modélisé par le DOM sous la
forme d'un arbre d'objets.
O.Curé [
41
]
Introduction DOM (suite)

Hétérogénéité:

La recommandation propose une interface
utilisable dans la plupart des
environnements et des applications,
indépendamment du langage de
programmation et de la plate-forme
supportant l'application.
O.Curé [
42
]
Normalisation

3 niveaux:

Niveau 1 (1998): spécification des objets permettant de
définir le contenu et la structure d'un document. 2 parties:

DOM Core pour les interfaces de base du DOM et leurs
applications aux documents XML

DOM HTML spécifie les interfaces applicables aux
documents HTML

Niveau 2 (2000) complète le niveau 1 en spécifiant le
modèle d'objets pour les feuilles de styles CSS, un modèle
de gestion des événements et support des namespaces.

Niveau 3 (2004) ajoute le support de Xpath, une interface
de sérialization pour XML.
O.Curé [
43
]
Exemple document XML
<catalog>

<book id="101">

<title>XML in a Nutshell</title>

<author>Elliotte Rusty Harold, W.
Scott Means</author>

<price>39.95</price>

</book>

<book id="121">

<title>Who Moved My Cheese</title>

<author>Spencer, M.D. Johnson,
Kenneth H. Blanchard</author>

<price>19.95</price>

</book>
</catalog>
O.Curé [
44
]
DOM et Ajax

Avec Ajax, particulièrement son
exploitation sur une page Web, exploite
largement le DOM.

On distingue 2 étapes:

trouver l'élément avec lequel on veut
travailler

Modifier le contenu de l'élément ou le
réorganiser
O.Curé [
45
]
Trouver un élément

document.getElementById()

Retourne un élément DOM

Paramètre: une chaîne de caractères

Trouve un élément d'une page. L'id doit être
unique.

document.getElementsByTagName()

element.getElementsByTagName()

Argument: une chaîne

Retourne une collection d'éléments

Trouve tous les éléments d'une page (ex H1,...)
O.Curé [
46
]
Trouver un élément (suite)

element.childNodes

Pas d'argument, retourne une collection
d'éléments DOM

Trouve l'enfant immédiat d'un élément

element.parentNode

Pas d'argument, retourne un élément DOM

Trouve le parent direct

element.nextSibling / previousSibling

Pas d'argument, retourne un élément DOM

Permet un parcours de noeuds
O.Curé [
47
]
Trouver un élément (fin)

Avec jQuery en utilisant un sélecteur

$()

Argument: une chaîne de caractères

Retourne un objet jQuery couvrant un tableau
d'éléments

Exemple:

$(''div'') : sélectionne tous les noeuds
correspondant à une type d'élément

$(''#maListe''): sélection par un ID unique

$(''ul#'maListe li.new''): sélecteur complexe
CSS
O.Curé [
48
]
Modifier le DOM

document.createElement()

Arg: nom d'un élément, retourne un
élément

document.createTextNode()

element.innerHTML

element.appendChild()

element.removeChild()

element.insertBefore()
O.Curé [
49
]
Modifier DOM avec jQuery
(suite)

$.html()

$.append(), $.prependTo(),
$.insertBefore(), $.insertAfter()

Insère du contenu dans un noeud

$.remove(): supprime tous les éléments
d'une page

$.empty(): vide tous les éléments d'un
ensemble