View
1.442
Download
0
Category
Preview:
Citation preview
Formation webhtml5 / css3Thierry GAYET - Thierry.Gayet@gmail.fr
TIMING DE LA FORMATION
Timing journalier :Matin :
09h00-10h30 : premire partie10h30-10h45 : pause10h45-13h00 : seconde partiePause djeuner
Aprs-midi :
14h00-15h30 : troisime partie15h30-15h45 : pause15h45-17h00 : quatrime partieQuestions libres.
merci de signaler toute contrainte de temps sur cette priode ds le dbut
PLAN DE LA FORMATION
Historique du web & standards
Nouveaux lments & attributs
Le formulaires web forms
Les microformats (microdata)
Audio & vido
Dessin avec canvas
Golocalisation
Interraction avec les fichiers
Drap & drop
Push de donnes
Web messaging
Web sockets
Web storage
Web sql
Web workers
Application hors ligne
Exemples de CSS3
Jquery par l'exemple
Historique
Historique
Pour mieux comprendre la transition que le Web vit en ce moment, voici un bref historique de ce changement de cap. 1998: En prnant les avantages du XML, le W3C dcide de ne plus continuer le dveloppement du HTML (qui en est la version 4.01) et labore une premire spcification du XHTML (v 1.0). Cette version est un amalgame de la syntaxe du HTML et des normes et standards XML.Ce fut une bonne dcision, car le XML tant strict sur ses normes, a met de lavant le souci dun code bien structur et dune uniformit entre les sites Web. 2006: 8 ans aprs cette dcision, le W3C la remet en question et commence penser que le XML (et le XHTML) nest peut tre pas la voie du futur en conception Web. Il dcide donc de travailler sur une nouvelle spcification du HTML tout en continuant lvolution du XHTML (v2.0). Plusieurs groupes (Mozilla, Opera, Google, ) viennent travailler conjointement avec le W3C sur le HTML 5.Fait noter : certains individus nont jamais arrt de travailler sur le HTML depuis 1998.Pour en savoir plus sur la priode 1998-2006, vous pouvez lire sur le groupe WHATWG (www.whatwg.org). 2009: Le W3C arrte compltement de travailler sur le XHTML v2.0 et toutes les ressources sont rediriges vers le HTML 5. La philosophie est dsormais : puret du design, par-dessus lidologie dtre rtro-compatible Adieu le XHTML ! Les navigateurs restent compatibles avec le XHTML, mais lemphase est maintenant sur limplmentation des spcifications du HTML 5.Actuellement, il y a 2 spcifications du HTML 5 qui sont dveloppes en parallle : la version du WHATWG
la version du W3C
Les deux groupes travaillent relativement conjointement, mais ils divergent sur certains points. Si vous devez choisir une spcification, je vous conseille celle du W3C, qui est moins exprimentale.Les spcifications du HTML 5 voluent constamment. Ceci explique mme pourquoi WHATWG a mme dcid de supprimer le 5 de HTML 5. Les navigateurs doivent donc toujours regarder les changements aux spcifications pour se mettre jour.
Historique
Quelques dates retenir:1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
1999 HTML 4.01
2000 XHTML 1
2002 Tableless design
2004 WHATWG
2005 AJAX
2007 XHTML 2 boud
2007 Le W3C rcupre les travaux du WHATWG
2009 Arrt des travaux sur XHTML 2
2010 HTML 5 + JavaScript API + CSS 3
HISTORIQUE
Liens:http://www.zdnet.fr/actualites/html5-petite-histoire-et-promesses-d-une-evolution-majeure-du-web-volet-1-39754600.htm
http://www.weblife.fr/wp-content/uploads/2012/07/html5-histoire-604x4813.jpg
NOUVEAUX ELEMENTS
& ATTRIBUTS
HTML 5
&
Nouvelles balises
Balises vidos et audio
Nouveaux champs de formulaire
Nouveaux attributs notamment autofocus, placeholder
Certaines balises et attributs dprcis : frame, frameset, big, font, center, acronym, ...
Intgration de SVG
MicroData
...
LES NOUVEAUX ELEMENTS
Nouvelles balises :
/
/
Et dautres
CSS 3
Multi-colonnes
Bordures
Gradients
Webfonts
Manipulation de texte
Animations & transitions
Flexible box model
Nouveaux selecteurs
Media Queries
...
LES NOUVEAUX ELEMENTS
JavaScript
Geolocation
WebWorkers
WebSockets
Orientation
Notification
sessionStorage & localStorage
Web SQL database & IndexedDB
...
LES NOUVEAUX ELEMENTS
HTML 5 + JavaScript
Canvas 2D
Intgration audio et vido
Mode offline
Gestion de l'historique
Edition de contenu
Drag & Drop
Custom data attribute
...
LES NOUVEAUX ELEMENTS
CSS 3 + JavaScript
Selectors
Classlist
LES NOUVEAUX ELEMENTS
WebGL
Avant Chrome 9, lancer chrome avec --enable-webgl
Sous Firefox 4, about:config puis enable for all sites
Exemple depuis Learning WebGL
Body Browser de Google
LES NOUVEAUX ELEMENTS
A Venir
Contacts API
Webcam (Capture API)
Device Orientation API
Calendar API
Speech input
...
LES NOUVEAUX ELEMENTS
LES FORMULAIRES
WEB FORMS
Nouveaux types d'entres dans HTML5
Ce que nous connaissons aujourd'hui comme tant HTML5 Forms ou HTML5 Web Forms a dmarr sous le nom de Web Forms 2.0, une spcification pr-HTML5 cre par un groupe appel WHATWG (Web Hypertext Applications Technology Working Group).
La majeure partie du travail initial du WHATWG est devenue le point de dpart ce que nous appelons maintenant HTML5 et l'effort Web Forms 2.0 fait prsent partie de la spcification HTML5 officielle, que vous pouvez consulter l'adresse suivante : bit.ly/njrWvZ.
Une partie non ngligeable de la spcification est consacre de nouveaux types et attributs de contenu pour l'lment d'entre, que vous trouverez l'adresse suivante :
Comme je l'ai mentionn prcdemment, la spcification introduit 13 nouveaux types d'entres utiliser dans des formulaires : recherche, tl., url, e-mail, dateheure, date, mois, semaine, heure, dateheure-locale, numro, plage, couleur.
L'utilisation de ces nouveaux types est simple. Imaginons que je veuille insrer un nouveau champ d'e-mail sur un formulaire de commande. Comme vous pouvez le voir sur la Figure 1, j'ai modifi la page de commande du site Web de modle Ptisserie WebMatrix en lui ajoutant des champs, dont e-mail.
LES WEBFORMS
La balise en HTML4 possde les proprits suivante:
TypeDescriptiontextA free-form text field, nominally free of line breaks.passwordA free-form text field for sensitive information, nominally free of line breaks.checkboxA set of zero or more values from a predefined list.radioAn enumerated value.submitA free form of button initiates form submission.fileAn arbitrary file with a MIME type and optionally a file name.imageA coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submission.hiddenAn arbitrary string that is not normally displayed to the user.selectAn enumerated value, much like the radio type.textareaA free-form text field, nominally with no line break restrictions.buttonA free form of button which can initiates any event related to button.
Exemple de formulaire:
first name:
last name:
email:
Male
Female
LES WEBFORMS
La balise en HTML5 a volu en incluant de nouvelles proprits:
TypeDescriptiondatetimeA date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.datetime-localA date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.dateA date (year, month, day) encoded according to ISO 8601.monthA date consisting of a year and a month encoded according to ISO 8601.weekA date consisting of a year and a week number encoded according to ISO 8601.timeA time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.numberThis accepts only numerical value. The step attribute specifies the precision, defaulting to 1.rangeThe range type is used for input fields that should contain a value from a range of numbers.emailThis accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@eurogiciel.fr format.urlThis accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.eurogiciel.fr format or in http://example.com format.
Exemple de formulaire:
First name:
Last name:
E-mail:
LES WEBFORMS
Quelques exemplesde formulaires:
Customer name: Pizza Size Small Medium Large
Customer name: Pizza Size Small Medium Large Pizza Toppings Bacon Extra Cheese Onion Mushroom
LES WEBFORMS
Customer name: Telephone: E-mail address: Pizza Size Small Medium Large Pizza Toppings Bacon Extra Cheese Onion Mushroom Preferred delivery time: Delivery instructions:
LES WEBFORMS
Customer name: Telephone: E-mail address: Pizza Size Small Medium Large Pizza Toppings Bacon Extra Cheese Onion Mushroom Preferred delivery time: Delivery instructions: Submit order
LES WEBFORMS
Display Black on White White on Black Use grayscale Enhance contrast
Use Club Card Name on card: Card number: Expiry date:
LES WEBFORMS
Use Club Card Name on card: My card has numbers on it Card number: My card has letters on it Card code:
LES WEBFORMS
LES WEBFORMS
Liens:http://diveintohtml5.info/forms.html
http://msdn.microsoft.com/fr-fr/magazine/hh547102.aspx
http://smashinghub.com/html5-web-forms-tutorials.htm
http://miketaylr.com/code/input-type-attr.html
http://miketaylr.com/code/html5-forms-ui-support.html
http://miketaylr.com/code/html5-textarea-attribute-support.html
http://www.whatwg.org/specs/web-apps/current-work/#the-textarea-element
http://www.w3schools.com/html/html5_form_attributes.asp
http://www.standardista.com/html5/html5-web-forms/
http://miketaylr.com/pres/html5/forms2.html
http://estelle.github.io/forms/#slide1
LES MICROFORMATS
& MICRODATA
Le microformat propose une syntaxe qui sapparente du HTML classique et sapplique bien en dehors de la norme HTML5 puisquil est compatible avec HTML4, ou XHTML1.0 par exemple. Il utilise lattribut class et certaines valeurs bien prcises dans le but de baliser un contenu afin quil soit interprt comme une donne bien spcifique.
Voici un exemple de code un peu plus parlant :
Juiz Smart Mobile Admin Note de : 90 sur 100 base sur 35 votes.
Comme vous pouvez le constater, les microformats nutilisent pas dattribut ou de syntaxe trop complexe, seulement des valeurs de classe bien prcises.
Vous trouverez un bon nombre de donnes et doutils sur le site microformats.org qui a propos une tentative de codification des pratiques courantes. Microformats.org a ainsi pu runir un certain nombre de profils XMPD que vous trouverez directement sur le wiki microformats. En plus de simples valeurs de classe, microformat cest galement lutilisation de lattribut rel, cest le format hCard, le format hCalendar, etc...
LES MICROFORMATS
Les microdonnes:
Les microdonnes sont reprsentes par larrive de nouveaux attributs en HTML5.
Il est alors possible de donner la rfrence du document utilis pour baliser linformation directement au sein de llment porteur de ces informations.
Il faut attirer l'attention sur larrive dun document qui tend devenir une nouvelle rfrence pour structurer des donnes : issu dun consortium entre Google, Bing, Yahoo et Yandex, cette rfrence est nomme schema.org. Ce sont dailleurs les schmas proposs par schema.org.
LES MICROFORMATS
Nouveaux attributs:
Il nen existe pas normment:
itemscope : il permet de crer un item dont le type peut-tre prcis grce lattribut suivant,
itemtype : coupl itemscope, il accueille une URL vers la rfrence du schma (ex : http://schema.org/Review) qui devra respecter les valeurs de ce schma,
itemprop : il est porteur dune valeur permettant de prciser la nature dune donne au sein dun schma spcifi prcdemment.
itemref : il permet de faire le lien complmentaire entre deux donnes sans descendance.
itemid : lorsque litem possde une rfrence globale unique, comme par exemple un lidentifiant dun livre (urn:isbn:0-xxx-xxxxx-x). Il est attribu en mme temps que lattribut itemscope.
Ces attributs peuvent tre transports par nimporte quel lment (souvent des span pour injecter une donne sans mise en forme particulire), bien que certaines exceptions, videntes, existent.
Exemple dune simple revue:
Juiz Smart Mobile Admin Note de : 90 sur 100 base sur 35
votes.
Rendu :
Juiz Smart Mobile Admin Note de : 90 sur 100 base sur 35 votes.
LES MICROFORMATS
Exemple dune notation imbrique dans une revue:
Aussi appele Embedded Items, limbrication de diffrents types de schma peut intervenir dans le cas de notre exemple de revue. En effet, notre exemple prcdent manque quelque peu de prcision, puisque schema.org prvoit galement un type de schma pour les valuations: Juiz Smart Mobile Admin Note de : 90 sur 100base sur 35 votes. Ce plugin propos pour optimiser l'interface d'administration de[]
Rendu :
Juiz Smart Mobile AdminNote de : 90 sur 100 base sur 35 votes.Ce plugin propos pour optimiser linterface dadministration de[]
LES MICROFORMATS
Cration dune fiche film:
Je prends volontairement ce dernier exemple pour vous prsenter une technique qui permet dassocier des informations sans quelles soient forcment imbriques. En effet il arrive que la mise en page dun site web ou lvolution de ses informations ne permette pas dimbriquer les items comme nous lavons vu juste avant.
La fiche film est divise en deux mais ses informations sont runies sous le mme item grce la proprit itemref qui fait rfrence llment aside#more-info travers son identifiant more-info.
LES MICROFORMATS
Cet attribut permet de prsenter un mme item dcoup en plusieur lments travers la page. Si les informations de notre item Movie avaient t dissmines dans dautres lments de la page, il aurait t possible de les cibler grce la valeur de leur attribut id de la sorte :
Je ne vous ai pas encore expliqu la prsence des lments meta dans la page. Ceux-ci permettent dinsrer une information qui a souvent besoin dun formatage prcis qui est peu intelligible par une personne non aguerrie.
Prenons lexemple de linformation duration qui reprsente la dure. Cette information doit tre formate en respectant le format ISO 8601 qui dfinit un format de date ou de temps.Dans notre fiche, il aurait t possible dcrire :
PT91M
Mais vous imaginez bien ici que PT91M est quelque peu drangeant pour dfinir une dure dune heure et demi. Cest pourquoi, par convention et si ce nen est pas encore une il faudrait que a le devienne linformation scrit dans un lment meta et ct de linformation intelligible.
LES MICROFORMATS
Le code HTML correspondant cette mise en page pourrait ressembler cela :
Nom du film de la fiche Trailer : Nom du film de la fiche Courte description de la vido Contenu principal de ma fiche film Ralisateur Emily Atef Acteurs Maria-Victoria Dragus Roeland Wiesnekker Wolfram Koch
LES MICROFORMATS
Christine Citti Nathalie BoutefeuDistributeur Les Films du Losange Musique par John Smith Ratio d'image 2.35 Langues Franais Allemand Anne de production 2011 Date de sortie 25 avril 2012 Genre Drame Dure 91 min
LES MICROFORMATS
LES MICROFORMATS
Liens:http://microformats.org/wiki/html5
http://html5doctor.com/microformats/
http://speckyboy.com/2011/01/24/beginners-study-guide-to-html5-microformats/
http://www.alsacreations.com/tuto/lire/1224-microformats-html5-microdata.html
AUDIO & VIDEO
L'lment , cousin de offre en HTML5 une solution simple, native pour les navigateurs pour l'intgration d'une vido dans une page web. Elle permet galement de proposer une alternative l'utilisation de Flash pour les plate-formes ne le supportant pas (iOS par exemple avec iPhone, iPod, iPad...).
La syntaxe de base de la balise video est extrmement simple :
Ici la description alternative
L'attribut src dfinit bien entendu l'adresse du fichier vido, tout comme pour la balise img lorsqu'il s'agit d'une image. Si vous indiquez les dimensions avec les attributs height et width, c'est encore mieux, et si tout va bien, un lment devrait s'afficher dans le navigateur... pour peu que celui-ci supporte le format de vido indiqu dans la source.
AUDIO & VIDEO
On peut galement proposer plusieurs sources dans plusieurs formats diffrents en indiquant les types MIME grce l'attribut type :
Ici l'alternative la vido : un lien de tlchargement, un message, etc.
Les navigateurs ne pouvant pas lire le MP4/H.264 ni la version WebM nativement (comme Firefox 3.6 par exemple) prendront la version au format Ogg Theora. Cela vous oblige nanmoins encoder le fichier avec diffrents codecs.
Particularit de la syntaxe XHTML : il faut ajouter controls="controls" (et pas juste controls comme vous pourrez le voir sur le premier exemple) pour afficher les possibilits de contrle de la vido. Ceci est valable pour tous les attributs (autoplay, etc.).
AUDIO & VIDEO
Attributs:
L'attribut controls donne accs aux contrles de lecture (boutons de navigation, volume, etc, selon les possibilits du navigateur), ou les masque s'il est omis.
L'attribut preload="auto" permet de de spcifier au navigateur de dbuter le tlchargement de la vido tout de suite, en anticipant sur le fait que l'utilisateur lira la vido. Attention, cette option est manier avec prudence (il est prfrable que ce soit la seule raison d'tre de la page). Note : il s'agit de l'ancien attribut autobuffer qu'il vous faudra laisser pour Firefox 3.5 et 3.6.
L'attribut autoplay="true" comme son nom l'indique, permet de lancer la lecture automatiquement. Cela peut galement tre problmatique avec une connexion faible bande passante ou sur un terminal mobile. De manire gnrale, vitez d'imposer vos choix l'utilisateur... et sa connexion internet.
L'attribut poster="image.jpg" permet d'indiquer une image afficher par dfaut dans l'espace rserv par la vido, avant que la lecture de celle-ci ne soit lance.
L'attribut loop indique que la lecture doit s'effectuer en boucle.
Prrequis:
Pensez galement prciser les types MIME dans un fichier .htaccess pour tre sr qu'ils soient corrects, les trois lignes suivantes suffisent s'assurer la tranquilit :
AddTypevideo/ogg.ogvAddTypevideo/mp4.mp4AddTypevideo/webm.webm
AUDIO & VIDEO
Formats:
Plusieurs formats tiennent le devant de la scne : WebM, MP4 et Ogg Theora. Mme si le but de ce tutoriel est de proposer une solution d'intgration de la balise video compatible sur le plus de navigateurs possible (et pas de discuter du choix des formats dans un interminable dbat), faisons quand mme une prsentation rapide.
H.264/MP4:
H.264 est support par le Moving Picture Experts Group. C'est un format non-libre (soumis brevets) et non-gratuit. Toutefois, il est gratuit dans certaines utilisations (la diffusion gratuite de vidos par des sites Web par exemple).
Les fichiers MP4 utilisant H.264 sont lisibles nativement sur les navigateurs Apple (Safari, Safari Mobile) ainsi que sur Google Chrome.
AUDIO & VIDEO
OGG/Theora:
Theora est un format de compression vido open-source, sans brevets. Ceci donne le droit tous d'utiliser Theora ( des fins non commerciales tout comme des fins commerciales) sans devoir payer de redevance au consortium MPEG.
OGG/Theora est lisible sur Firefox, Opra, et Google Chrome.
AUDIO & VIDEO
AUDIO & VIDEO
WebM/VP8:
WebM est un format multimdia ouvert qui a t lanc par Google (aprs rachat de la socit On2 Technologies). L'utilisation est en libre et gratuite.
Comme on peut le constater, il y a une grande disparit dans le support des codecs, chacun dfendant ses intrts pour le meilleur ou pour le pire (commerciaux ou libres).
AUDIO & VIDEO
Liens:http://diveintohtml5.info/video.html
http://fr.wikipedia.org/wiki/Theora
http://www.videojs.com/
CANVAS
Introduit l'origine par Apple pour tre utilis dans WebKit pour des logiciels comme Dashboard et le navigateur Safari, canvas a t par la suite adopt par les navigateurs utilisant Gecko (notamment Mozilla Firefox) et Opera, avant d'tre standardis par le groupe de travail WHATWG. Novell a dvelopp une extension activant les XForms dans Internet Explorer1 offrant ainsi une prise en charge des fonctionnalits de canvas.
Texte alternatif pour les navigateurs ne supportant pas Canvas.
partir de ce moment, tout se passe du ct de JavaScript, qui va se servir de cet lment HTML pour accder la surface de dessin. Pour ceci, deux fonctions sont appeles :
getElementById() qui va permettre d'aller chercher et cibler l'lment identifi par son attribut id unique (ici mon_canvas),puis la mthode getContext() de l'lment ainsi rcupr pour savoir dans quel contexte de dessin (2D ou 3D) le script va pouvoir agir, et de quelles fonctions il pourra disposer. Le contexte sera l'lment central de gestion de Canvas.
var c = document.getElementById("mon_canvas");var ctx = c.getContext("2d");
// Dessine un rectangle rougectx.fillStyle = 'red';ctx.fillRect(30, 30, 50, 50);
Canvas
Tous les exemples suivants dans ce tutoriel feront appel cette structure (lment Canvas + lment script + appel getElementById + getContext) qui ne sera pas reprcise chaque fois.
Aprs cette tape prliminaire de mise en place, il faut se plonger dans l'ensemble des mthodes de dessin 2D.
Celles-ci vont toutes exploiter le mme systme de coordonnes :
Le point de rfrence (0,0) est situ en haut gauche;
L'axe horizontal (x) est dfini par la premire coordonne;
L'axe vertical (y) est dfini par la seconde coordonne;
Ces valeurs correspondent la grille entourant les pixels, et non pas aux pixels eux-mmes.
Par exemple le point de coordonnes (4,2) sera situ 4 pixels droite du coin suprieur gauche, et 2 pixels en-dessous.
Canvas
Si l'on trace un polygone entre les 3 points prsents sur ce schma, on obtiendra un triangle.
Pour commencer, voici un exemple simple qui dessine deux rectangles ayant une intersection, l'un d'entre-eux possdant une transparence alpha :
function draw() {var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";ctx.fillRect (10, 10, 55, 50);ctx.fillStyle = "rgba(0, 0, 200, 0.5)";ctx.fillRect (30, 30, 55, 50);}
La fonction draw rcupre l'lment canvas, et ensuite son contexte 2d. L'objet ctx peut ensuite tre utilis pour dessiner rellement vers le canevas. L'exemple remplit simplement les deux rectangles, en positionnant fillStyle deux couleurs diffrentes l'aide des spcifications de couleur CSS et d'un appel fillRect. Le second appel fillStyle utilise rgba() pour spcifier une valeur alpha parmi les informations de couleur.
Les appels fillRect, strokeRect et clearRect affichent un rectangle plein, surlign ou vide. Pour afficher des formes plus complexes, on utilise des chemins.
Canvas
La fonction beginPath commence un nouveau chemin, et moveTo, lineTo, arcTo, arc et des mthodes similaires sont utilises pour ajouter des segments au chemin. Le chemin peut tre ferm l'aide de closePath. Une fois que le chemin est cr, vous pouvez utiliser fill ou stroke pour afficher celui-ci sur le canevas.
function draw() {var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");ctx.fillStyle = "red";ctx.beginPath();ctx.moveTo(30, 30);ctx.lineTo(150, 150);ctx.bezierCurveTo(60, 70, 60, 70, 70, 150);ctx.lineTo(30, 30);ctx.fill();}
L'appel fill() ou stroke() provoque l'utilisation du chemin. Pour tre rempli ou dessin nouveau, le chemin devra tre recr.
Canvas
Canvas
Canvas
Liens:http://www.html5canvastutorials.com/
http://www.lafermeduweb.net/tutorial/l-element-html-5-canvas-p23.html
http://en.wikipedia.org/wiki/Canvas_element
http://www.w3schools.com/html/html5_canvas.asp
http://www.whatwg.org/specs/web-apps/current-work/#dynamic
https://developer.mozilla.org/fr/docs/Web/HTML/Canvas?redirectlocale=fr&redirectslug=HTML%2FCanvas
http://modern-carpentry.com/workshop/html5/waveform/
http://www.crazyws.fr/dev/20-canvas-html5-pour-vous-inspirer-8IK3U.html
Golocalisation
Une des nouveauts introduites par HTML5 est la golocalisation utilisable via une API d'un navigateur.
Cela permet aux pages web d'interroger le navigateur sur la position gographique de l'utilisateur.
L'API de base permet d'obtenir les coordonnes en latitude et en longitude ainsi que l'altitude.
Celles-ci peuvent alors tre exploites par le biais d'une carte (de type Google Map).
Dtection du support:
if (navigator.geolocation) { //le navigateur supporte la golocalisation //suite du code ici} else { alert('Votre navigateur ne supporte pas la golocalisation HTML5');}
Golocalisation
Dtail de la mthode getCurrentPosition():
PropertyDescription
coords.latitudeThe latitude as a decimal numbercoords.longitudeThe longitude as a decimal numbercoords.accuracyThe accuracy of positioncoords.altitudeThe altitude in meters above the mean sea levelcoords.altitudeAccuracyThe altitude accuracy of positioncoords.headingThe heading as degrees clockwise from Northcoords.speedThe speed in meters per secondtimestampThe date/time of the response
Golocalisation
Exemple de code pour un client:
var x = document.getElementById("demoLoc");
function getLocation(){if (navigator.geolocation){navigator.geolocation.getCurrentPosition(showPosition);} else{x.innerHTML="Geolocation is not supported by this browser.";}}
function
showPosition(position){x.innerHTML="Latitude:"+position.coords.latitude
+ "
Longitude: " + position.coords.longitude; }
Golocalisation
Gestion des erreurs:
function showError(error){switch(error.code) {case error.PERMISSION_DENIED:x.innerHTML="User denied the request for Geolocation."break;case error.POSITION_UNAVAILABLE:x.innerHTML="Location information is unavailable."break;case error.TIMEOUT:x.innerHTML="The request to get user location timed out."break;case error.UNKNOWN_ERROR:x.innerHTML="An unknown error occurred."break;}}
Code d'erreurs:
Permission denied: l'utilisateur n'est pas autoris pour utiliser la golocalisation
Position unavailable: golocalisation impossible
Timeout: timeout pour aller jusqu'au bout de la golocalisation
Golocalisation
Example d'affichage de la position sur une carte:
function showPosition(position){var latlon = position.coords.latitude+","+position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="";}
Golocalisation
Autre mthodes:
watchPosition() : retourne la position courante ainsi que le mouvement via une icne (voiture).
clearWatch() : arrte la mthode watchPosition
Example d'utilisation de la mthode watchPosition:
var x = document.getElementById("demo");function getLocation(){if (navigator.geolocation){navigator.geolocation.watchPosition(showPosition);} else {x.innerHTML="Geolocation is not supported by this browser.";} }
function showPosition(position) {x.innerHTML="Latitude: " +
position.coords.latitude + "
Longitude: " + position.coords.longitude; }
Golocalisation
Golocalisation
Liens:http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_map_script
http://dev.w3.org/geo/api/spec-source.html
http://www.html5-css3.fr/html5/tutoriel-geolocalisation-html5
http://debray-jerome.developpez.com/articles/l-api-geolocalisation-en-html5/
http://html5demos.com/geo
http://html5professor.com/tutoriels-6.html
Grer les fichiers
L'API offerte aux navigateur web pour grer les fichiers permet:
De grer une liste de fichiers (1:n) slectionnable depuis la balise
Gestion de fichiers raw de type binaires avec autorisations d'accs d'une zone d'octets
Une interface dtaillant le nom du(des) fichier(s), leur type et leur URL
Une interface permettant de lire un fichier
Une gestion d'exception permettant la gestion des exceptions
Grer les fichiers
Vrifier le support disponible:
if (window.File && window.FileReader && window.FileList && window.Blob) {// Accs possible} else {alert('The File APIs are not fully supported in this browser.');}
Cration d'un handle sur un fichier:
// Rcupre le path + nom du fichiervar file = document.forms['uploadData']['fileChooser'].files[0]; // Autre moyen de rcuprer le path + nom du fichier// var file = document.forms['uploadData']['fileChooser'].files.item(0); if (file) // ou if (file != undefined){
// Traitements sur le fichier . . .
}
Grer les fichiers
Soit le code HTML suivant:
Voici un exemple de code grant les fichiers:
function handleFileSelect(evt) {var files = evt.target.files;
// files is a FileList of File objects. List some properties.var output = [];for (var i = 0, f; f = files[i]; i++) {output.push('', escape(f.name), ' (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ',f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a','');}document.getElementById('list').innerHTML = '
';}document.getElementById('files').addEventListener('change', handleFileSelect, false);
Grer les fichiers
Cration d'un handle sur un fichier:
// Rcupre le path + nom du fichiervar file = document.forms['uploadData']['fileChooser'].files[0]; // Autre moyen de rcuprer le path + nom du fichier// var file = document.forms['uploadData']['fileChooser'].files.item(0); if (file) // ou if (file != undefined){
// Traitements sur le fichier . . .
}
Soit le code HTML suivant:
Drop files here
Voici un exemple de code grant les fichiersdpos en drag/drop:
function handleFileSelect(evt) {evt.stopPropagation();evt.preventDefault();
var files = evt.dataTransfer.files;var output = [];for (var i = 0, f; f = files[i]; i++) {output.push('', escape(f.name), ' (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', ''); }document.getElementById('list').innerHTML = '
';}
Grer les fichiers
(...)
function handleDragOver(evt) {evt.stopPropagation();evt.preventDefault();evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.}
// Setup the dnd listeners.var dropZone = document.getElementById('drop_zone');dropZone.addEventListener('dragover', handleDragOver, false);dropZone.addEventListener('drop', handleFileSelect, false);
Grer les fichiers
A aprtir du code html& csssuivant:
.thumb {height: 75px;border: 1px solid #000;margin: 10px 5px 0 0;}
Le code JS permettant de lire le fichier est le suivant:
function handleFileSelect(evt) {var files = evt.target.files; // FileList objectfor (var i = 0, f; f = files[i]; i++) { if (!f.type.match('image.*')) { continue; }
var reader = new FileReader();
Grer les fichiers
(...)
reader.onload = (function(theFile) { return function(e) { var span = document.createElement('span'); span.innerHTML = [''].join(''); document.getElementById('list').insertBefore(span, null); }; })(f);
reader.readAsDataURL(f); } }
document.getElementById('files').addEventListener('change', handleFileSelect, false);
Grer les fichiers
A partir du code html suivant:
#byte_content { margin: 5px 0; max-height: 100px; overflow-y: auto; overflow-x: hidden; } #byte_range { margin-top: 5px; }
Read bytes: 1-56-157-8entire file
Grer les fichiers
Le code Javascript permettant de tlcharger un fichier binaire est le suivant:
function readBlob(opt_startByte, opt_stopByte) {var files = document.getElementById('files').files;if (!files.length) {alert('Please select a file!');return;}
var file = files[0];var start = parseInt(opt_startByte) || 0;var stop = parseInt(opt_stopByte) || file.size - 1;var reader = new FileReader();
reader.onloadend = function(evt) {if (evt.target.readyState == FileReader.DONE) { // DONE == 2 document.getElementById('byte_content').textContent = evt.target.result; document.getElementById('byte_range').textContent = ['Read bytes: ', start + 1, ' - ', stop + 1, ' of ', file.size, ' byte file'].join('');}};var blob = file.slice(start, stop + 1);reader.readAsBinaryString(blob);}
Grer les fichiers
(...)document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {if (evt.target.tagName.toLowerCase() == 'button') {var startByte = evt.target.getAttribute('data-startbyte');var endByte = evt.target.getAttribute('data-endbyte');readBlob(startByte, endByte);}}, false);
Grer les fichiers
A partir du code html suivant:
#progress_bar {margin: 10px 0;padding: 3px;border: 1px solid #000;font-size: 14px;clear: both;opacity: 0;-moz-transition: opacity 1s linear;-o-transition: opacity 1s linear;-webkit-transition: opacity 1s linear;}
#progress_bar.loading {opacity: 1.0;}
#progress_bar .percent {background-color: #99ccff;height: auto;width: 0;}
Grer les fichiers
Cancel read0%
Le code Javascript permettant de monitorer la progression de la lecture d'un fichier est le suivant:
var reader;var progress = document.querySelector('.percent');
function abortRead() { reader.abort(); }
function errorHandler(evt) {switch(evt.target.error.code) { case evt.target.error.NOT_FOUND_ERR: alert('File Not Found!'); break; case evt.target.error.NOT_READABLE_ERR: alert('File is not readable'); break; case evt.target.error.ABORT_ERR: break; // noop default: alert('An error occurred reading this file.');}; }
Grer les fichiers
(...)
function updateProgress(evt) {// evt is an ProgressEvent.if (evt.lengthComputable) {var percentLoaded = Math.round((evt.loaded / evt.total) * 100);// Increase the progress bar length.if (percentLoaded < 100) { progress.style.width = percentLoaded + '%'; progress.textContent = percentLoaded + '%'; } }}
function handleFileSelect(evt) {// Reset progress indicator on new file selection.progress.style.width = '0%';progress.textContent = '0%';reader = new FileReader();reader.onerror = errorHandler;reader.onprogress = updateProgress;reader.onabort = function(e) {alert('File read cancelled'); };reader.onloadstart = function(e) {document.getElementById('progress_bar').className = 'loading';};
Grer les fichiers
(...)
reader.onload = function(e) { // Ensure that the progress bar displays 100% at the end.progress.style.width = '100%'; progress.textContent = '100%'; setTimeout("document.getElementById('progress_bar').className='';", 2000);}
// Read in the image file as a binary string.reader.readAsBinaryString(evt.target.files[0]);}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
Grer les fichiers
Autre exemple:
var file = document.getElementById('file').files[0];if (file){// create an identical copy of file// the two calls below are equivalent var fileClone = file.slice(); var fileClone2 = file.slice(0, file.size); var fileChunkFromEnd = file.slice(-(Math.round(file.size/2)));var fileChunkFromStart = file.slice(0, Math.round(file.size/2)); // slice file from beginning till 150 bytes before endvar fileNoMetadata = file.slice(0, -150, "application/experimental"); }
Grer les fichiers
Cration d'un objet blob (Binary Large Object):
var a = new Blob();
// Creation d'un tableau de 10.24 octetsvar buffer = new ArrayBuffer(1024);var shorts = new Uint16Array(buffer, 512, 128);var bytes = new Uint8Array(buffer, shorts.byteOffset + shorts.byteLength);var b = new Blob([toNativeLineEndings("foobarbazetcetc" + "birdiebirdieboo")], {type: "text/plain;charset=UTF-8"});var c = new Blob([b, shorts]);var a = new Blob([b, c, bytes]);var d = new Blob([buffer, b, c, bytes]);
Grer les fichiers
Grer les fichiers
Liens:http://www.html5rocks.com/en/tutorials/file/dndfiles/
http://en.wikipedia.org/wiki/File_select
http://www.html5rocks.com/en/tutorials/file/filesystem/?redirect_from_locale=fr
http://dailyjs.com/2009/11/30/html5-file-api/
http://dret.typepad.com/dretblog/2010/04/html5-file-writer-api.html
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
http://dev.w3.org/2006/webapi/FileAPI/
http://www.filosophy.org/post/27/a_state_of_limbo_the_html5_file_api_filereader_and_blobs/
Drag & drop
Crer un lment pouvant tre dplac :
Pour rendre un lment dplaable, il suffit de lui ajouter l'attribut draggable true:
L'attribut draggable positionn True permet donc d'activer le drag & drop vis vis de l'image avec l'id drag1.
Drag & drop
Crer un lment conteneur pouvant reevoir un lment dplacer:
Pour dfinir un conteneur, il faut dfinir 2 callbacks sur les vnements ondrop et ondragover:
Il faudra dfinir dans le HEAD de la page un style pour le div:
#div1 { width:350px;height:70px;padding:10px;border:1px solid #aaaaaa; }
Les dimensions sont compatible avec les dimensions de l'image pouvant tre dplacer dans le div.
Drag & drop
Exemple d'implmentation des callbacks de gestion des venements ondrop et ondragover:
function allowDrop(ev){ev.preventDefault();}
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev){ev.preventDefault();var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}
Drag & drop
Drag & drop
Liens:http://html5demos.com/drag
http://html5demo.braincracking.org/demo/dragNDrop.php
http://www.startyourdev.com/codes/code-drag-drop.php
http://chez-syl.fr/2012/03/drag-and-drop-html5-jquery/
http://www.html5rocks.com/en/tutorials/dnd/basics/
Push de donnes
Une des raisons pour lesquels les SSE ont t maintenus dans l'ombre, c'est que des API comme les Web Sockets fournissaient dj un protocole riche et bi-directionnel en duplex intgral.
Avoir un canal bidirectionnel est plus attrayant pour des choses comme des jeux, des applications de messagerie, et pour le cas o vous avez besoin proximit de mises jour en temps rel dans les deux sens.
Toutefois, dans certains scnarios de donnes n'a pas besoin d'tre envoy par le client. Vous devez simplement mises jour de certaines mesures du serveur.
Quelques exemples seraient tat des mises jour amis, cours de la Bourse, les fils de nouvelles, ou d'autres mcanismes d'incitation automatise de donnes (par exemple, mettre jour une base de donnes SQL Web ct client ou un magasin d'objets IndexedDB).
Si vous avez besoin d'envoyer des donnes un serveur, l'objet XMLHttpRequest est utile.
Push server
PUSHmono-directionnel
Les SSE sont envoys via du HTTP1.1 traditionnel.
Cela signifie qu'ils n'ont pas besoin d'un protocole spcifique ou la mise en uvre de serveur pour obtenir de travail.
Les Web Sockets d'autre part, ncessitent des connexions en duplex intgral et des serveurs de sockets Web ddis pour grer ce protocole.
En outre, les Server-Sent Events ont une varit de caractristiques qui manque aux Web sockets tel que:
la reconnexion automatique;
les vnements associs un ID;
la possibilit d'envoyer des vnements arbitraires
Push server
Exemple d'enregistrement sur un fluxd'vnements serveur:
Cela revient instancier un objet EventSource avec l'url du flux:
if (!!window.EventSource) {var source = new EventSource('stream.php');} else {// Result to xhr polling}
Push server
Ensuite, il faut dclarer un handle de message pour chaque vnement:
source.addEventListener('message', function(e) {console.log(e.data);}, false);source.addEventListener('open', function(e) {// Connection was opened.}, false);source.addEventListener('error', function(e) {if (e.readyState == EventSource.CLOSED) { // Connection was closed. }}, false);
Push server
Il est possible que le serveur envoie des donnes complexessous format json:
data: {\ndata: "msg": "hello world",\ndata: "id": 12345\ndata: }\n\n
Pour ce faire, un handle de message sera rajout et le message sera pars pour reformer l'objet au format de type json:
source.addEventListener('message', function(e) {var data = JSON.parse(e.data);console.log(data.id, data.msg);}, false);
Le JSON (JavaScript Object Notation) peut et doit tre vu comme une structure de Donnes, ou le rsultat d'une srialiation d'objet.
Push server
Pour des messages plus complexes:
data: {"msg": "First message"}\n\nevent: userlogon\ndata: {"username": "John123"}\n\nevent: update\ndata: {"username": "John123", "emotion": "happy"}\n\n
Le traitement sera le suivant:
source.addEventListener('message', function(e) {var data = JSON.parse(e.data);console.log(data.msg);}, false);
source.addEventListener('userlogon', function(e) {var data = JSON.parse(e.data);console.log('User login:' + data.username);}, false);
source.addEventListener('update', function(e) {var data = JSON.parse(e.data);console.log(data.username + ' is now ' + data.emotion);}, false);
Push server
Cot serveur une implmentation en PHP est la suivante :
Push server
Autre implmentation en Node.js:
var http = require('http');var sys = require('sys');var fs = require('fs');
http.createServer(function(req, res) {//debugHeaders(req);
if (req.headers.accept && req.headers.accept == 'text/event-stream') { if (req.url == '/events') { sendSSE(req, res);} else { res.writeHead(404); res.end(); } } else {res.writeHead(200, {'Content-Type': 'text/html'});res.write(fs.readFileSync(__dirname + '/sse-node.html'));res.end();}}).listen(8000);
Push server
function sendSSE(req, res) {res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' });
var id = (new Date()).toLocaleTimeString();
// Sends a SSE every 5 seconds on a single connection.setInterval(function() {constructSSE(res, id, (new Date()).toLocaleTimeString());}, 5000);
constructSSE(res, id, (new Date()).toLocaleTimeString());}
Push server
Le fichier sse-node.html aura le contenu suivant:
var source = new EventSource('/events');source.onmessage =
function(e) {document.body.innerHTML += e.data + '
';};
Push server
Web socket (WS) vs vnements (SSE pour Server-Sent Events) envoy depuis le serveur:
Advantages de SSE oppos aux Web sockets:
Tranport via http au lieu d'un protocole ddi;
Peut tre quand mme utilis via un backport sur des navigateurs ne disposant pas du support;
Support intgr incluant des re-connexions et event-id
Portocol simple
Advantages des Web sockets oppos aux SSE :
Communication temps relle et bi-directionnelle
Support natif de plusieurs navigateur web
Utilisation idale des SSE :
Alimentation de donnes en continue;
Mise jour des donnes twitter, fb, chat, ;
Notification serveur->browser
Push server
SSE
WEB SOCKETS
Push server
Liens:http://fr.wikipedia.org/wiki/Server_push
http://html5hacks.com/blog/2013/04/21/push-notifications-to-the-browser-with-server-sent-events/
http://pusher.com/tutorials/html5_realtime_push_notifications
http://www.w3schools.com/html/html5_serversentevents.asp
http://html5-realtime-push-notifications.eu01.aws.af.cm/examples/
https://github.com/pusher/html5-realtime-push-notifications
http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/
https://github.com/ehynds/jquery-notify
http://www.erichynds.com/blog/a-jquery-ui-growl-ubuntu-notification-widget
http://www.erichynds.com/examples/jquery-notify/index.htm
http://dev.w3.org/html5/eventsource/
Web messaging
Web messaging
Architecture:
Html5 page
Iframe XXX
(message)
Soit une page web contenant une iframe, on rcupre son handle de la faon suivante:
var o = document.getElementsByTagName('iframe')[0];
Ensuite on peut lui envoyer un message:
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');
Web messaging
Web messaging
L'iframe pourra traiter le message via la callback suivante:
window.addEventListener('message', receiver, false);function receiver(e) { if (e.origin == 'http://example.com') { if (e.data == 'Hello world') { e.source.postMessage('Hello', e.origin); } else { console.log(e.data); } }}
Web messaging
Liens:http://www.w3.org/TR/webmessaging/
http://en.wikipedia.org/wiki/Web_Messaging
http://dev.opera.com/articles/view/window-postmessage-messagechannel/
http://msdn.microsoft.com/fr-fr/library/ie/hh781494(v=vs.85).aspx
http://fr.slideshare.net/miketaylr/html5-web-messaging-7970364
http://fr.slideshare.net/miketaylr/html5-web-messaging-7970364
Web sockets
Web sockets
Architecture:
Connexion persistante
serveur
client
database
La connexion client/serveur:- permet une communication temps rel pour des applications genre chat, cours de bourse, ;- permet aux serveurs d'envoyer des vnements;- ouvert l'initiative du client et reste ouvert par la suite;- le serveur doit supporter un certain nombre de sockets (1 par client)
data
Web sockets
Exemple d'application pour un mini-chat:
db users
Web sockets
http://bloga.jp/ws/jq/js/jquery.ws-0.3-noenc-pre.js
send
var wsoj = $.ws.conn(
{
url : "ws://example.com/mytest",
onopen : function(e)
{
$("#board").prepend("conected");},
onmessage : function(msg,wsoj)
{
$("#board").prepend(msg)
},
onclose : function(e)
{
$("#board").prepend("closed");
}
});$("#send").click(function()
{
$(wsoj).wssend($("#msg").val())
});
Exemple d'implmentation d'un client:
Web sockets
Langages pour le serveur:Java (ex: jWebsocket, )
PHP (ex: phpwebsocket, spoutserver )
Ruby
Python (ex: pywebsocket, )
C# (ex: Nugget)
Javascript (ex: node.js, )
Web sockets
Exemple de serveur:
from mod_pywebsocket import msgutilimport threadimport getoptimport osimport sysimport time
_GOODBYE_MESSAGE = 'Goodbye'file = '/somewhere/test'
class tail(): last_mtime = None def __init__(self, filename, delay, sock): self.filename = filename self.delay = delay self.sock = sock
def run(self): while True: time.sleep(self.delay) stat = os.stat(self.filename) if stat.st_mtime != self.last_mtime: self.last_mtime = stat.st_mtime self.read() def read(self): try: length = 0 f = open(self.filename, 'r') for line in f: length += 1 f.seek(0) cnt = 0 for line in f: cnt += 1 if cnt == length: msgutil.send_message(self.sock, line[:-1])
f.close except Exception: if(f): f.close
def web_socket_do_extra_handshake(request): pass # Always accept.
def web_socket_transfer_data(request): attr = () thread.start_new_thread(tail(file, 0.5, request).run, attr) while True: try: line = msgutil.receive_message(request) f = open(file, 'a') f.write(line+"") os.fsync(f.fileno()) f.flush() f.close if line == _GOODBYE_MESSAGE: Return
except Exception: return
Web sockets
(suite)
Ncessite le module python: http://code.google.com/p/pywebsocket/
Web sockets
Liens:http://fr.wikipedia.org/wiki/Websocket
http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-06
http://svn.whatwg.org/webapps/complete.html#websocket
http://www.ape-project.org/
https://github.com/disconnect/apache-websocket
http://jwebsocket.org/
http://code.google.com/p/pywebsocket/
http://blog.kaazing.com/2010/02/17/html5-web-sockets-and-pipelining/?q=blog%2F
http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol-68
http://archive.plugins.jquery.com/project/ws
http://martinsikora.com/nodejs-and-websocket-simple-chat-tutorial
http://dev.w3.org/html5/websockets/
Web storage
Web storage
Cookies limits quelques ko contre quelques Mo pour les storages
Ajout de deux interfaces/objetsde stockage:
Stockage de session sessionStorage:
L'interface sessionStorage mmorise les donnes sur la dure d'une session de navigation, et sa porte est limite la fentre ou l'onglet actif. Lors de sa fermeture, les donnes sont effaces. Contrairement au cookies, il n'y a pas d'interfrence. Chaque stockage de session est limit un domaine
Stockage local localStorage:L'interface localStorage mmorise les donnes sans limite de dure de vie. Contrairement sessionStorage, elles ne sont pas effaces lors de la fermeture d'un onglet ou du navigateur. La porte de localStorage est de facto plus large:il est possible de l'exploiter travers plusieurs onglets ouverts pour le mme domaine ou plusieurs fentres ; partir du moment o il s'agit bien sr du mme Navigateur.
Il n'y a pas de partage des donnes Web Storage entre les diffrents navigateurs qui peuvent tre installs sur une mme machine.
Web storage
Usages et prcautionsLe stockage de donnes dans le navigateur web se prte diffrentes applications, particulirement lorsqu'il s'agit d'excuter des traitements sans faire intervenir le serveur, ou lorsqu'il faut mmoriser facilement de petites quantits de donnes pour l'utilisateur pour les faire persister durant sa navigation. Parmi ces avantages : stocker rapidement des donnes en cache sans faire intervenir le serveur (par exemple via AJAX),
augmenter la performance ressentie et faciliter les dveloppements,
se passer des cookies et du trafic HTTP supplmentaire qu'ils reprsentent (un cookie est envoy chaque requte effectue sur un domaine),
exploiter un espace allou plus important que la limite impose par les cookies (fixe 4 Ko),
retrouver des donnes immdiatement la reconnexion ou les mmoriser pour viter la perte s'il y a dconnexion.
Attention : les donnes ne sont pas cryptes, accessibles facilement tout utilisateur ayant accs au navigateur, et modifiables de la mme faon. Il ne faut donc pas y placer d'informations sensibles.Pour ces raisons et d'autres, certains navigateurs exigent de consulter la page appelant le stockage via un domaine, (c'est--dire avec une url en http://, que ce soit localhost ou bien un nom de domaine complet) et non pas en fichier local (adresse file://). Sinon, une exception de scurit peut tre dclenche. Ceci peut sembler logique car les donnes sont en thorie attaches un domaine.
Web storage
Hormis les spcificits concernant la persistance des donnes, les mthodes d'accs sont communes :setItem(cl,valeur): stocke une paire cl/valeur
getItem(cl): retourne la valeur associe une cl
removeItem(cl): supprime la paire cl/valeur en indiquant le nom de la cl
key(index): retourne la cl stocke l'index spcifi
clear(): efface toutes les paires
Pour agrmenter le tout, la proprit.lengthrenvoie le nombre de paires stockes.Laconsole Javascriptdes navigateurs est un outil essentiel pour tester et vrifier le bon fonctionnement de Web Storage.
Accs aux donnes:
Note : Les exemples suivants se basent sursessionStoragemais fonctionneront de la mme faon aveclocalStorage.
Web storage
Stockage:sessionStorage.setItem("couleur","vert")
Le premier argument desetItemest la cl (toujours de typeString). Elle prcise l'endroit o sont stockes les donnes afin de pouvoir les y retrouver ultrieurement.Rcupration:var couleur = sessionStorage.getItem("couleur");
Grce la cl initialement cre avecsetItemil est possible de rcuprer facilement les donnes. Ces dernires sont renvoyes sous la forme d'une chane de caractre.Suppression:sessionStorage.removeItem("couleur");
Nous supprimons l'lment de session "couleur".Suppression totale:sessionStorage.clear();
Suppression complte de toutes les valeurs de session.
Accs direct:
Dans la plupart des situations, les variables seront accessibles directement en tant que membres de l'interface.
sessionStorage.couleur = "vert";console.log(sessionStorage.couleur);
Web storage
Opera :
Chrome:
IE :
Web storage
Une premire application peut tre la mmorisation de champs de formulaire, pour stocker les donnes entres par l'utilisateur. Bien que ceci soit applicable toute variable manipule en JavaScript.Pour ceci, l'vnementchangesurest sollicit pour stocker la valeur courante de l'lment danssessionStorage.message:
Notez que cette faon de faire est trs compacte mais n'est pas des plus esthtiques car le code JavaScript se retrouve "mlang" au contenu HTML de la page.
Ce script doit tre plac en fin de document:
// Dtection du support du storage if(typeof sessionStorage!='undefined') { // Vrifie si la variable message a t stoque dans les sessionStorage: if('message' in sessionStorage) { $('textarea#message').text() = sessionStorage.getItem('message'); }} else { console.log("sessionStorage n'est pas support");}
http://www.codegateway.com/2012/03/get-textarea-value-in-jquery.html
Exemple n 1:
Un deuxime exemple trs simple mettre en place est celui d'un compteur de visites.Vous avez vu cette page foisLe principe est :aller interroger la cl visites dans localStorage ds le chargement du document
effectuer toutes les vrifications ncessaires (est-ce qu'il y a dj quelque chose stock cet emplacement, peut-on convertir cette chane de texte en nombre entier)
incrmenter le compteur
le stocker nouveau au mme emplacement pour le conserver
afficher la valeur un emplacement dans la page
if(typeof localStorage!='undefined') {
// Rcupration de la valeur dans web storage
var nbvisites = localStorage.getItem('visites');
// Vrification de la prsence du compteur
if(nbvisites!=null) {
// Si oui, on convertit en nombre entier la chane de texte qui fut
stocke
nbvisites = parseInt(nbvisites);
} else {
nbvisites = 1;
}
// Incrmentation
nbvisites++;
Exemple n 2:
Web storage
// Stockage nouveau en attendant la prochaine visite...
localStorage.setItem('visites',nbvisites);
// Affichage dans la page
document.getElementById('visites').innerHTML = nbvisites;
} else {
alert("localStorage n'est pas support");
}
Pour l'affichage, cet exemple se sert de l'identifiant id et de
la fonction getElementById() pour le cibler, afin d'accder sa
proprit innerHTML, c'est--dire son contenu HTML interne,
modifiable.
Attention : cette information restera spcifique et locale au
visiteur, ne sera pas change avec le serveur (hors utilisation
d'Ajax par exemple), et donc ne pourra tre exploite pour tablir des
statistiques gnrales.
Web storage
Web storage
Utilisation de JSON:Web Storage est bien pratique pour stocker de simples chanes de texte. Lorsqu'il s'agit de manipuler des donnes plus complexes, entre autres des objets JavaScript, il faut leslinariserau pralable en chanes de texte puisque Web Storage n'accepte que ce type de donnes. Le formatJSON(JavaScript Object Notation) est la solution de prdilection. Deux mthodes quipent les navigateurs modernes :JSON.stringify()qui prend en paramtre un objet et renvoie une chane de texte linarise, et son inverseJSON.parse()qui reforme un objet partir de la chane linarise. Des frameworks populaires tels quejQuerysont quips de fonctions similaires (parseJSON) pour les anciens navigateurs qui ne seraient pas quips en natifs de telles mthodes de conversion.Stockage:var monobjet = { propriete1 : "valeur1", propriete2 : "valeur2"};var monobjet_json = JSON.stringify(monobjet);sessionStorage.setItem("objet",monobjet_json);
Lecture:
var monobjet_json = sessionStorage.getItem("objet");var monobjet = JSON.parse(monobjet_json);// Affichage dans la consoleconsole.log(monobjet);
Dans le cadre de la lisibilit de cette dmonstration, cet exemple de code ne fait appel que modestement JSON, il serait possible de l'exploiter de faon beaucoup plus complexe et volue en fonction de la quantit de donnes stocker et de leur provenance.
Aller plus loin:L'API prvoit aussi des vnementsstoragepour tre notifi chaque changement opr dans l'espace allou. Ceux-ci ne sont pas encore trs rpandus.Pour mettre en place des stockages plus volus, pour des donnes binaires ou bien du point de vue de la structure et des oprations de recherche, tri et maintenance, deux approches coexistent :WebSQLdont la spcification est au point mort et qui ne sera pas maintenu long terme ni intgr Firefox et Internet Explorer, mais qui a t implment par WebKit et Opera. Cette tentative faisait entrer le langage SQL ct client, ce qui tait comprhensible pour les dveloppeurs utilisant dj les bases ct serveur (MySQL, etc) mais n'est pas conforme l'esprit des diffrents standards du web : cela ncessiterait de spcifier totalement SQL ou un sous-ensemble tel que SQLite ce qui n'est pas le rle du W3C.IndexedDB(Indexed Database) revt une approche totalement oriente vers JavaScript, sans SQL, avec de la manipulation d'objets. Elle est cependant encore peu rpandue (IE10 avec prfixe, Chrome et Firefox avec prfixe) ; et demande une phase d'apprentissage supplmentaire mme pour les dveloppeurs dj aguerris avec SQL.
Web storage
Prise en charge:
Pour les versions d'Internet Explorer antrieures IE8, il existe une interface nomme userDataqui alloue 1 Mo par domaine et qui fonctionne sensiblement de la mme manire. Pour l'exploiter, il faudra cependant adapter les fonctions au cas par cas, ou bien passer par un framework unifiant toutes les mthodes d'appel en fonction du stockage disponible.
Web sockets
Liens:http://dev.opera.com/articles/view/web-storage/
https://developers.google.com/web-toolkit/doc/latest/DevGuideHtml5Storage?hl=fr-FR
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Storage?redirectlocale=en-US&redirectslug=DOM%2FStorage#Description
http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx#_dom
http://theburningmonk.com/2010/12/having-fun-with-html5-local-storage-and-session-storage/
http://diveintohtml5.info/detect.html
Web sql
Web sql
Ouverture d'une base de donnes:
html5rocks.webdb.db = null;
html5rocks.webdb.open = function() { var dbSize = 5 * 1024 * 1024; // 5MB html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);}
html5rocks.webdb.onError = function(tx, e)
{console.log("There has been an error: " + e.message);}
html5rocks.webdb.onSuccess = function(tx, r) { // re-render the data. // loadTodoItems is defined in Step 4a html5rocks.webdb.getAllTodoItems(loadTodoItems);}
Web sql
Creation d'une table:
html5rocks.webdb.createTable = function() { // Rcupration du handle de la database var db = html5rocks.webdb.db;
db.transaction(function(tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS " + "todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []); });}
Web sql
Ajout d'une donnedans une table:
html5rocks.webdb.addTodo = function(todoText) { // Rcupration du handle de la database var db = html5rocks.webdb.db;
db.transaction(function(tx) { var addedOn = new Date(); tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)", [todoText, addedOn], html5rocks.webdb.onSuccess, html5rocks.webdb.onError); });}
Web sql
Slection d'une donne dans une table:
html5rocks.webdb.getAllTodoItems = function(renderFunc) { // Rcupration du handle de la database var db = html5rocks.webdb.db;
db.transaction(function(tx) { tx.executeSql("SELECT * FROM todo", [], renderFunc, html5rocks.webdb.onError); });}
Web sql
Mise en forme des donnes issue de la base de donnes:
function loadTodoItems(tx, rs) { var rowOutput = ""; var todoItems = document.getElementById("todoItems"); for (var i=0; i < rs.rows.length; i++) { rowOutput += renderTodo(rs.rows.item(i)); } todoItems.innerHTML = rowOutput;}
function renderTodo(row) { return "" + row.todo + " [Delete]";}
Web sql
Suppression d'une donnes dans une table:
html5rocks.webdb.deleteTodo = function(id) { // Rcupration du handle de la database var db = html5rocks.webdb.db;
db.transaction(function(tx) { tx.executeSql("DELETE FROM todo WHERE ID=?", [id], html5rocks.webdb.onSuccess, html5rocks.webdb.onError); });}
Web sql
Initialisation :
....function init() { html5rocks.webdb.open(); html5rocks.webdb.createTable(); html5rocks.webdb.getAllTodoItems(loadTodoItems);}
Web sql
Liens:http://www.w3.org/TR/webdatabase/
http://www.w3.org/TR/IndexedDB/
http://html5sql.com/index.html
Web worker
Web worker
Vrification du support:
if(typeof(Worker)!=="undefined") { // Yes! Web worker support! // Some code..... } else { // Sorry! No Web Worker support.. }
Web worker
Cration d'un worker fichierworkers.js :
var i=0;
function timedCount(){i=i+1;postMessage(i);setTimeout("timedCount()",500);}
timedCount();
Web worker
Cration d'un worker objet :
if (typeof(w)=="undefined"){ w = new Worker("demo_workers.js");}
Il est possible de dclarer un handle de messages associ au worker:
w.onmessage=function(event){document.getElementById("result").innerHTML = event.data;};
Web worker
Arrt d'un worker :
w.terminate();
Exemple complet:
Count numbers:
Start Worker
Stop Worker
var w;
function startWorker(){If (typeof(Worker) !== "undefined"){ if(typeof(w)=="undefined") { w = new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; };} else {document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";}}
function stopWorker(){ w.terminate();}
Web worker
Liens:https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers
http://www.siteduzero.com/informatique/tutoriels/html5-web-workers-le-monde-parallele-du-javascript
http://blogs.msdn.com/b/davrous/archive/2011/07/08/introduction-aux-web-workers-d-html5-le-multithreading-version-javascript.aspx
http://www.w3schools.com/html/html5_webworkers.asp
Application offline
App. offline
Lapplication cache repose principalement sur lutilisation dun
fichier manifest
ajouter aux pages HTML de votre site.
Tout dabord, crons donc une structure basique de page web :
#main{ width:900px; margin:auto; } Ceci est mon application offline
App. offline
Afin dutiliser le cache dapplication, il va falloir dclarer un fichier manifest.
Ce fichier se dclare dans la balise html comme ceci :
Une fois dclar, il faut bien sr crer le fichier manifest en question. Appelons le ntresite.manifest.
Dans ce fichier, qui commence obligatoirement par la ligne CACHE MANIFEST, nous allons dclarer les fichiers qui doivent tre mis en cache :
CACHE MANIFEST # Version 0.1 index.htmlearth-folder.png
App. offline
On peut galement y ajouter des commentaires. Chaque ligne de commentaire doit commencer par #. Il est important de versionner son fichier manifest via un commentaire, afin que le navigateur dtecte par la suite les changements dans le fichier.
Notons quil est possible dutiliser des URL absolues (http://www.mon-url.com/absolue/fichier.html).
Il est possible dajouter diffrentes sections notre fichier manifest :
CACHE, il sagit de la section par dfaut qui liste les fichiers mettre en cache.
NETWORK, qui liste les fichiers qui ncessitent obligatoirement une connexion internet.
FALLBACK, qui liste les fichiers qui, au cas o ils ne soient pas accessibles en ligne, doivent renvoyer vers dautres fichiers.
Lexemple suivant reprsente un site web classique dont la page daccueil, le CSS et les images sont mises en cache. Si lutilisateur se connecte la page daccueil en tant hors ligne, la page offline.html lui est prsente au lieu dindex.html. Il est donc inform quil est dconnect. Par consquent il ne pourra pas accder aux autres pages du site, puisque la section NETWORK spcifie via une toile *, que tous les autres fichiers requirent une connexion internet.
CACHE MANIFEST # v0.1 CACHE:index.htmlcss/style.cssimg/logo.png FALLBACK:/ /offline.html NETWORK:*
App. offline
Le .htaccess:
Nous arrivons maintenant au passage (un peu) dlicat. Il va falloir dclarer le MIME-type du fichier manifest.
Ceci se fait par lintermdiaire du fichier de configuration de serveur. Dans la grande majorit des cas vous utiliserezun fichier .htaccess pour les projets PHP.
Crez donc un fichier .htaccess dans le rpertoire de votre application et ajoutez-y simplement la ligne :
AddType text/cache-manifest manifest
Dans cette ligne, on dclare que tous les fichiers se terminant par manifest ont pour MIME-type text/cache-manifest.
App. offline
Test de lapplication hors ligne:
Afin de pouvoir tester localement notre application, nous allons devoir passer par Apache (et oui, faites chauffer vos WAMP / MAMP / LAMP !).
Plaons notre application dans le dossier de votre serveur (www pour WAMP) et rendez-vous sur ladresse http://localhost/
Si tout se passe bien, votre page saffiche.
Maintenant stoppez les services de WAMP, puis rafrachissez la page.
Alors quune page classique aurait naturellement fait afficher une belle erreur 404 Votre page est toujours l !
Ouvrez maintenant la console de votre navigateur si celui-ci en possde une (pour Chrome, elle se trouve dans Outils, Outils de dveloppement, onglet Console).
On peut y voir ceci :
Creating Application Cache with manifest http://localhost/le-chemin-vers-votre-manifestApplication Cache Checking eventApplication Cache Downloading eventApplication Cache Progress event (0 of 3)... (1 of 3)... (2 of 3)... (3 of 3)Application Cache Cached event
On y voit en effet tous les vnements qui ont lieu lorsque votre navigateur met jour son AppCache. Les plus coriaces dentre vous souhaiterons pouvoir intercepter ces vnements pour pouvoir effectuer des traitements au moment du dclenchement de ces vnements.
Ces vnements seront dtaills dans la partie aller plus loin de ce tutoriel.
App. offline
Mise jour du manifest:
Attention soyez bien attentif prsent ! La phrase suivante a de quoi perturber : une fois votre application dans lAppCache grce au fichier manifest, cest cette version offline qui a la priorit sur la version en ligne ! Pourquoi ?
Tout simplement parce que vous lui avez justement dit de le stocker dans le cache ! Cest exactement commelorsque votre navigateur garde en mmoire une image ou un CSS sur un site, afin de ne pas avoir le tlcharger nouveau. Seulement, cest un peu plus perturbant lorsquil est question dun fichier HTML, je le reconnais Et donc, comment fait-on pour mettre jour le cache avec la version en ligne ?
LApplication Cache sera mis jour si :
Lutilisateur vide son cache manuellement.
Le fichier manifest change.
Le cache est mis jour avec du code Javascript.
Voil pourquoi il tait important dinsrer un numro de version dans un commentaire ! Il suffit de changer ce numro de version pour obliger lAppCache du client se mettre jour. Si vous effectuez peu de mises jour (dans le cas dun site vitrine par exemple) cest la meilleure solution. Par contre, si vous avez besoin que le client soit en permanence jour, on prfrera la version Javascript. Et encore une fois, cest dans la section Aller plus loin que a se passe !
App. offline
Aller plus loin avec le manifest:
La solution peut tre de crer un service gnrant le manifest en changeant, dune part, de version chaque nouvel article publi et, dautre part, en listant les URLs des derniers articles dans le cache explicite. Le chargement prendra plus de temps mais le lecteur pourra consulter larticle hors-ligne sans plus deffort.
Attention, les pages implicites qui dclarent le manifest sans tre listes dans ce dernier y sont ajoutes et seront tlcharges elles aussi lors de la mise jour du cache.Soyez prudent quand vous activez le manifest et ne multipliez pas les pages. Dans le cas du blog par exemple les pages affichant les articles ne doivent pas utiliser le manifest. Le lecteur ne souhaite certainement pas tlcharger lensemble des articles quil a dj lu chaque nouvel article.
Cette solution minimaliste peut convenir certains, mais elle nest pas applicable pour un site dont le contenu change beaucoup ou pour un site fort trafic tant lutilisation du cache est mauvaise.
Pour optimiser lutilisation du cache, il faut le considrer comme la vue statique de lapplication qui voluera au gr des changements dinterface et non au gr du contenu. Le contenu dynamique devra tre servi par des requtes asynchrones. Pour la mise en cache et le fonctionnement il faudra utiliser les nouvelles API JavaSript : LocalStorage et document.onLine. De cette manire, le manifest redeviendra un fichier statique voluant au gr des versions de lapplication.
Pour garantir lindexation du contenu par les moteurs de recherche et assurer la compatibilit avec danciens navigateurs, prvoyez toujours un mode dgrad sans manifest ni contenu asynchrone.
App. offline
Notes de scurit:
Notez que le cache est maintenu par nom de domaine. Il nexiste quune seule instance du mme manifest pour un serveur. Pour les serveurs hbergeant plusieurs applications, lutilisation dhte virtuel est plus que conseille.
Le cache ne doit jamais contenir de donnes confidentielles. Les pages de login et tous services de scurit doivent tre exclus du cache. Ne les listez jamais dans le manifest sauf pour les exclure et surtout nintgrez pas le manifest dans ces pages.
Informez lutilisateur sur les dangers de ce service et surtout laissez le choisir dactiver ou non le fonctionnement hors ligne. En effet si le navigateur lui-mme nest pas protg, toute personne y ayant accs pourra consulter le cache. Pour limiter le problme vous pouvez activer le service en stockant un cookie sur le navigateur si lutilisateur active le mode hors ligne. Ainsi le lecteur devra rpter lopration pour tous les navigateurs sur lesquels il souhaite consulter le site.
En dehors de ces rgles de scurit basiques, toutes les rgles de scurit inhrentes aux sites web sappliquent.
App. offline
LAPI Javascript HTML5 possde un objet window.applicationCache. Cet objet permet de :
connatre les tats du cache
attacher des traitements aux vnements
faire une mise jour du cache
changer le cache actuel
Voici la classe ApplicationCache telle quelle est donne par le WHATWG :
interface ApplicationCache { // update status const unsigned short UNCACHED = 0; const unsigned short IDLE = 1; const unsigned short CHECKING = 2; const unsigned short DOWNLOADING = 3; const unsigned short UPDATEREADY = 4; const unsigned short OBSOLETE = 5; readonly attribute unsigned short status; // updates void update(); void swapCache(); // events attribute Function onchecking; attribute Function onerror; attribute Function onnoupdate; attribute Function ondownloading; attribute Function onprogress; attribute Function onupdateready; attribute Function oncached; attribute Function onobsolete;};ApplicationCache implements EventTarget;
App. offline
Ainsi on peut tester le statut actuel :
if (webappCache.status == window.applicationCache.UPDATEREADY)
Ou avec un switch :
switch (appCache.status) { case appCache.UNCACHED: // UNCACHED == 0 return 'UNCACHED'; break; case appCache.IDLE: // IDLE == 1 return 'IDLE'; break;
Mais il est prfrable de passer par la gestion dvnements pour dtecter lorsque lApplication Cache change de statut :
var webappCache = window.applicationCache; webappCache.addEventListener("updateready", updateCache, false);webappCache.update(); function updateCache() {webappCache.swapCache();alert("Une nouvelle version est disponible.\nVeuillez rafrachir la page pour mettre jour.");}
App. offline
La mthode update() force le lancement du processus de mise jour du cache.
addEventListener(updateready, updateCache, false) lancera la fonction updateCache ds que le statut de lAppCache passera en updateready.
swapCache() permet dchanger lancien cache avec le nouveau cache, ce qui finalise lopration.
Si vous souhaitez trouver de plus amples informations sur le sujet, je vous invite vous rendre sur la page Application Cache du WHATWG, o sont lists tous les status que peut prendre applicationcache.status, et tous les vnements associs.
Dernire petite remarque, il est possible de tester si lutilisateur est connect internet ou non avec la proprit :
navigator.onLine
Et voil ! Vous avez tous les outils en main pour raliser de superbes applications web ! Il y a fort parier que ces applications deviendront le standard sur les smartphones dici quelques annes, puisquelles fonctionnent aussi bien sur iPhone quAndroid.
Coupl avec une balise canvas, on pourra par exemple jouer des jeux vidos en 3D dans le navigateur, qui seront compatibles avec tous les mobiles ! Pas besoin de sembter dvelopper plusieurs versions pour chaque OS mobile, du HTML/CSS et Javascript suffisent !
App. offline
Voici le code source de la page en question :
#main{ width:900px; margin:auto; } Cette page est accessible hors ligne Elle possde une icone d'application pour les smartphones.
App. offline
Le fichier site.manifest :
CACHE MANIFEST # Version 0.4 exemple-application-cache-manifest-html5.htmlearth-folder.png
Le .htaccess :
AddType text/cache-manifest manifest
App. offline
Liens:http://blog.xebia.fr/2010/12/02/application-hors-ligne-avec-html5-le-manifest/
http://diveintohtml5.info/offline.html
http://html5demo.braincracking.org/demo/onLine.php
Framework JS
Framework JS
Une famille nombreuse:
JS client:
http://prototypejs.org/
http://script.aculo.us/
http://mootools.net/
http://www.sencha.com/products/touch
http://www.sencha.com/products/extjs
http://www.sencha.com/products/gxt
http://yuilibrary.com/
http://dojotoolkit.org/
http://www.angularjs.org/
http://meteor.com/
http://jquery.com/
http://jquerytools.org/
http://jqueryui.com/
http://jquerymobile.com/
http://jqtjs.com/
http://www.jqmobi.com/
http://www.bbc.co.uk/glow/
http://www.midorijs.com/
https://developers.google.com/web-toolkit/?hl=fr
JS server:
http://nodejs.org/
Comparatifs:
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
http://en.wikipedia.org/wiki/List_of_JavaScript_libraries
jQuery
jQuery
La naissance de JavaScript:
1995 : Brendan Eich dveloppe pour Netscape Communications Corporation, un langage de script, appel Mocha, puis LiveScript et finalement JavaScript
Javascript est intgr dans le navigateur Netscape 2. Succs immdiat.
Javascript n'est pas java!! D'un point de vue des proprits, Javascript est plus proche du langage python que du java.
La guerre des navigateurs:
Netscape et Microsoft (avec JScript dans Internet Explorer) ont dvelopp leur propre variante de JavaScript avec des fonctionnalits supplmentaires et incompatibles, notamment dans la manipulation du DOM (modle objet du navigateur WEB)
1997 : Adoption du standard ECMAScript.
Les spcifications sont rdiges dans le document Standard
ECMA-262.
jQuery
Dfinitionde jQuery:
Une bibliothque javascript open-source et cross-browser
Elle permet de traverser et manipuler trs facilement l'arbre DOM des pages web l'aide d'une syntaxe fortement similaire celle d'XPath.
JQuery permet par exemple de changer/ajouter une classe CSS, crer des animations, modifier des attributs, etc.
Grer les vnements javascript
Faire des requtes AJAX simplement
jQuery
Ce que jQuery nest pas :
Un substitut pour apprendre JavaScript
jQuery est trs puissant et trs pratique, mais vous devez nanmoins connaitre les bases de Javascript, notamment la partie objet du langage.
Voir des livres comme :
Object Oriented Javascript de Stoyan Stefanov oujQuery, novice to ninja (google est votre ami)
Une rponse tout
Utilisez jQuery uniquement lorsque cest ncessaire. On commence toujours par HTML+CSS avant de chercher des plugins jQuery magiques.
De nombreuses UI sont pures html+CSS
jQuery
Une simple bibliothque importer:
Disponible sur le site de Jquery: http://jquery.com/
Ou directement sur Google code:
jQuery
La fonction jQuery() :
jQuery repose sur une seule fonction : jQuery() ou $()
Cest une fonction JavaScript
Elle accepte des paramtres
Elle retourne un objet
$ : Syntaxe issue de Prototype
jQuery
Selecteur magique : $('anything'):
$ accepte un slecteur CSS en argument
$ accepte des ID :
$('#nomID') retourne un lment document.getElementById$ accepte des classes :
$('.nomClasse') retourne tous les lments qui correspondent cette classe$ accepte plusieurs slecteurs
$('.article, .nouvelles, .edito')
jQuery
$(anything):
$ accepte des slecteurs spcifiques :
$(':radio'), $(':header'), $(':first-child')
des slecteurs en forme de filtres :
$(':checked'), $(':odd'), $(':visible')
plus fort: $(':contains(du texte)')
des attributs:
$('a[href]'), $('a[href^=http://'), $('img[src$=.png]'
jQuery
Rappel sur le DOM :
Le Document Object Model (DOM) est une convention cross-platform et independente du langage pour representier and interagir avec des objets dans des documents en HTML, XHTML ou XML.
jQuery
Exemple de manipulation du DOM:
Bonjour
disparition
jQuery
Jquery, un objet:
les mthodes s'appliquent gnralement tous les lments slectionns$('.classe').hide();
$('.classe').show();
de nombreuses mthodes utilitairesparcourir le DOM: .parent(), .next(), .children(), .parents()
ajouter ou retirer des classes CSS: addClass, removeClass
manipuler: append, wrap, prepend
Intrt fondamental: la plupart des mthodes de l'objet retournent l'objet lui-mmeon peut chaner les appels !
$('anything').parent().find('still anything').show();
Cette proprit est extrmement puissante !
jQuery
Nombreux exemples interactifs:
Les selecteurs jQuery sont illustrs par de nombreux tutoriaux interactifs, par exemple :
http://www.w3schools.com/jquery/jquery_examples.asp
http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery
jQuery
jQuery example dutilisation 1:
Changed First item
Second item
Changed Third item
First item
Third item
Changed
First item
Changed
Third item
$(li:odd).prepend(Changed).css({background:red});
jQuery
jQuery example dutilisation 2:
Some text
More text
Some text
More text Goodbye cruel world.
Some text
More text
Goodbye cruel world.
$(div:hidden).find(.foo).empty().text(Changed).end().show();
Some text
More text Changed
Some text
More text
Changed
Some text
More text Changed
jQuery
jQuery example dutilisation 3:
Determiner si une checkbox est coche
if ($(#total).attr(checked)) {//Traitement si coche}else {//Traitement si non coche}
jQuery
jQuery example dutilisation 4:
Intercepter le bouton submit dun formulaire :
$(document).ready(function() { $(#ok).submit(function() {if ($(#login).val() == ) {alert (Entrer un login);return false; }})});
jQuery
jQuery example dutilisation 5:
Effacer le contenu dun champs de texte lorsquil a le focus
$(#nom).focus(function() {var field = $(this); field.val();});
jQuery
jQuery example dutilisation 6:
Tester le clic sur nimporte quel bouton radio :
$(:radio).click(function() {//do stuff});
Donner le focus au premier lment dun formulaire:
$(nom).focus;
jQuery
jQuery example dutilisation 7:
Select All Select None
Select All Select None
$(span.none).click( function(){ $(this).siblings(:checkbox).removeAttr(checked); });
$(span.all).click( function(){ $(this).siblings(:checkbox).attr(checked,checked); });
$(span).click( function(){ if($(this).text()==Select All)) $(this).siblings(:checkbox).attr(checked,checked); else if ($(this).attr(class)==none) $(this).siblings(:checkbox).removeAttr(checked); });
OU
jQuery
Ajax :
JQuery possde toute une panoplie de fonctions permettant de simplifier les requtes Ajax
La plus simple :
$('#maDiv').load('page.html');
Plus complexe :
$.get('test.html',function(data) {faire quelque chose);
Gnrale :
$.ajax({
url: 'document.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){alert('Erreur chargement'); },
success: function(xml){faire quelque chose}
});
jQuery
jQuery AJAX Exemple :
AJAX Demo
var cnt = 0;
$(function(){
$.ajaxSettings({ error:function(){alert(Communication error!);} }); $(:button).click(function(){ var input = {in:$(:textbox).val(),count:cnt}; $.getJSON(ajax.php,input,function(json){
cnt = json.cnt; $(.cnt).text(cnt) $(.msg).text(json.out); });
});
});
Input: Output # :
jQuery
jQuery AJAX Fonctions :
$.func(url[,params][,callback])$.get
$.getJSON
$.getIfModified
$.getScript
$.post
$(selector), inject HTMLload
loadIfModified
$(selector), ajaxSetup altsajaxComplete
ajaxError
ajaxSend
ajaxStart
ajaxStop
ajaxSuccess
$.ajax, $.ajaxSetupasync
beforeSend
complete
contentType
data
dataType
error
global
ifModified
processData
success
timeout
type
url
jQuery
Inconvnients dAJAX / XML:
XML est dlicat parser en Javascript/jQuery:
$.ajax({ type: "GET", url: "courses.xml",dataType: "xml",complete : function(data, status) { var products = data.responseXML;var html = ""; $(products).find('product').each(function(){ var id = $(this).attr('id');var name = $(this).find('name').text();var price =$(this).find('price').text();html += "#"+id+" - "+name+" : "+price+""; }); $("#cousesList").html(html); }});
jQuery
Inconvnients dAJAX / Scurit:
pour des raisons de scurit, les navigateurs interdisent de faire
du cross-domain avec XMLHttpRequest dont le rsultat serait du XML
(et donc du HTML)
.mais pas pour des scripts Javascript !
Do lide de dfinir un modle de donnes sous la forme dobjet Javascript
JSON
Voir : http://www.jsonpexamples.com/
jQuery
JSON (JavaScript Object Notation):
format de donnes textuel, gnrique, driv de la notation des objets de JavaScript
Permet de reprsenter de l'information structure.
dcrit par la RFC 4627 de lIETF.
Exemple :
{ "Image": {"Width": 800,"Height": 600,"Title": "Vue du 15me tage","Thumbnail": { "Url": "http://www.example.com/481989943","Height": 125,"Width": "100" },"IDs": [116, 943, 234, 38793] } }
jQuery
Les avantages de JSON:
Type de donnes gnrique et abstrait pouvant
tre reprsent dans n'importe quel langage de programmation
reprsenter n'importe quelle donne concrte.
simple mettre uvre tout en tant complet.
peu verbeux, lisible aussi bien par un humain que par une machine
facile apprendre, syntaxe rduite
types de donnes sont connus et simples dcrire
indpendant du langage de programmation (bien qu'utilisant une notation JavaScript)
Le type MIME application/json est utilis pour le transmettre par le protocole HTTP (notamment en Ajax)
Standard dans les web services .Net, Java EE, etc.
jQuery
Les avantages de JSON:
Vis--vis de JavaScript, un document JSON reprsente un objet, d'o
son nom. Il est donc plus facile interprter qu'un XML.
var donnees = eval('('+donnees_json+')');
Le site json.org fournit une liste de parseurs pour d'autres langages
Il peut aussi tre utilis pour :
la srialisation et dserialisation d'objets ;
lencodage de documents ;
jQuery
jQuery et JSON:
jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] )
Exemple :
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=besancon&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); });
jQuery
jQuery UI:
http://jqueryui.com/
Un ensemble de composants graphiques tlchargeable l'adresse http://jqueryui.com/download
un noyau (Core)
des comportements (interactions):
draggable : pour glisser-dplacer un lment
http://jqueryui.com/demos/draggable/
droppable : pour dposer un lment
http://jqueryui.com/demos/droppable/
resizable : pour redimensionner un lment
http://jqueryui.com/demos/resizable/
selectable : pour slectionner des lments la souris
http://jqueryui.com/demos/selectable/
sortable : pour trier des lmentshttp://jqueryui.com/demos/selectable/
jQuery
jQuery UI:
des widgets:
accordon http://jqueryui.com/demos/accordion/
calendrier http://jqueryui.com/demos/datepicker/
bote de dialogue http://jqueryui.com/demos/dialog/
barre de progression http://jqueryui.com/demos/progressbar/
curseur http://jqueryui.com/demos/slider/
onglets http://jqueryui.com/demos/tabs/
des effets
http://jqueryui.com/demos/effect/
Clignotement, disparition, apparition, clatement, transition
Une collection de thmes
http://jqueryui.com/themeroller/
jQuery
jQuery Plugins:
On peut tendre facilement jQuery en utilisant des plugins
Les mthodes ajoutes sont au mme niveau que les mthodes natives
Ils conservent les mmes smantiques que les mthodes natives: retourner l'objet jQuery, appliquer la mthode tous les lments reprsents
Des centaines plugins existent d'ores et dj, de qualit variable; certains mis en avant par l'quipe de dveloppement
http://plugins.jquery.com/
des menus :
Recommended