O.Curé [1 ] Web 2

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