Formation html3 css3

Formation webhtml5 / css3Thierry GAYET - [email protected]

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

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

Multi-colonnes

Bordures

Gradients

Webfonts

Manipulation de texte

Animations & transitions

Flexible box model

Nouveaux selecteurs

Media Queries

JavaScript

Geolocation

WebWorkers

WebSockets

Orientation

Notification

sessionStorage & localStorage

Web SQL database & IndexedDB

HTML 5 + JavaScript

Canvas 2D

Intgration audio et vido

Mode offline

Gestion de l'historique

Edition de contenu

Drag & Drop

Custom data attribute

CSS 3 + JavaScript

Selectors

Classlist

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

A Venir

Contacts API

Webcam (Capture API)

Device Orientation API

Calendar API

Speech input

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 protected] 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

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:

Rendu :

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 :

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

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

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

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:

function showPosition(position) {x.innerHTML="Latitude: " + position.coords.latitude + "
Longitude: " + position.coords.longitude; }

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 = '

' + output.join('') + '

';}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 = '

' + output.join('') + '

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 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

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

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

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

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

L'iframe pourra traiter le message via la callback suivante:

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

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)

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 )

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

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:

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

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

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

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 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

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

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

Second item

Third item

Changed

First item

Second item

Changed

Third item

$(li:odd).prepend(Changed).css({background:red});

jQuery

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

Determiner si une checkbox est coche

if ($(#total).attr(checked)) {//Traitement si coche}else {//Traitement si non coche}

jQuery

Intercepter le bouton submit dun formulaire :

$(document).ready(function() { $(#ok).submit(function() {if ($(#login).val() == ) {alert (Entrer un login);return false; }})});

jQuery

Effacer le contenu dun champs de texte lorsquil a le focus

$(#nom).focus(function() {var field = $(this); field.val();});

jQuery

Tester le clic sur nimporte quel bouton radio :

$(:radio).click(function() {//do stuff});

Donner le focus au premier lment dun formulaire:

$(nom).focus;

jQuery

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); });

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

dataType

global

ifModified

processData

success

timeout

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

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 :

Formation html3 css3

Technology

Transcript of Formation html3 css3