HTML5... La révolution maintenant!
Upcoming SlideShare
Loading in...5
×
 

HTML5... La révolution maintenant!

on

  • 1,691 views

Alain duval @mix_it 2011

Alain duval @mix_it 2011

Statistics

Views

Total Views
1,691
Views on SlideShare
818
Embed Views
873

Actions

Likes
0
Downloads
12
Comments
0

2 Embeds 873

http://blog.mix-it.fr 871
http://ranksit.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5... La révolution maintenant! HTML5... La révolution maintenant! Presentation Transcript

  • La révolution HTML5DUVAL Alain Twitter : @aduval93Directeur Technique Objectif Blog : http://www.objectif-informatique.fr/weblogEmail : aduval@objectif-informatique.frBEURTHERET Cédric Twitter : @cbe317Responsable Java Objectif Blog : http://www.objectif-informatique.fr/weblogEmail : cbeurtheret@objectif-informatique.fr
  • Agenda Genèse & Principes fondateurs Nouveautés Révolution! Retour d’expérience projet
  • Présentation de la société OBJECTIF × Spécialiste de l’ingénierie projet JAVA EE × 60 collaborateurs × Grand Compte Banque / Assurance × Sponsor Paris Jug × Offre Android, Gwt, Software Factory, Performance On recrute × Des gens comme vous!
  • GenèseMainframe Html1 Html4 Xml Ajax Reprise Des travaux Client / Serveur HTML Css 1960 1990 1993 1996 1998 2004 2009
  • Principes fondateurs 1 - Simplicitéhttp://t2.gstatic.com/images?q=tbn:ANd9GcToNcLrfcgw4qq6cY1NB_6bTvRupJD6IGIfcB3NY5WjvFlMLrGo
  • Principes fondateurs 2 - Compatibilitéhttp://www.masternewmedia.org/browser-compatibility-testing-guide-the-best-tools-and-services/
  • Principes fondateurs 3 - Utilitéhttp://t2.gstatic.com/images?q=tbn:ANd9GcToNcLrfcgw4qq6cY1NB_6bTvRupJD6IGIfcB3NY5WjvFlMLrGo
  • Révolution ?« tout changement ou innovation qui bouleverse lordre établi de façon radicale dans un domaine quelconque » (wikipedia)
  • HTML 5 ? Sémantique+CSS 3+ API Javascript+ WebGL+ SVG= HTML 5
  • Sémantique: Déclaration simplifiée <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd <!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8">
  • Sémantique: Structure standard
  • Sémantique: Nouveaux sélecteurs querySelector & querySelectorAll Retourne des le (les) élement(s) matchant avec une règle type CSSdocument.querySelector(#myheader)//returns the element with ID=myheaderdocument.querySelector(#myform input[type="radio"]:checked)//selects the checked radio button within "#myform"
  • Formulaires
  • Formulaires Nouveaux inputs <input id="email" name="email" type="email" placeholder="example@domain.com" required /> Nouveaux attributs <input type="range" min="1" max="99" name="slider1"> Value: <output id="age" onformchange="this.value = form.slider1.value"></output> Mécanisme de validation client validateData(document.querySelector("#email")) function validateData (elt) { var valCheck = elt.validity; if (valCheck.valid==true) … }
  • Storage Valeur en SessionStorage × Persistance: Durée de vie de la fenêtre/onglet × Visibilité: Limitée à la fenêtre/onglet de création Valeur en LocalStorage × Persistance: Durée de vie du navigateur × Visibilité: Toutes les fenêtres & onglets Valeur en DBStorage (WebSqlDb ou IndexedDb) × Persistance: Jusqu’à suppression explicite × Visibilité: Toutes les fenêtres & onglets
  • Storage Session Storage: Get / Set de valeur window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’); window.sessionStorage.getItem(‘myFirstKey’); Db Storage: Création base db = openDatabase("maBaseDeDonnees", "1.0", "Ex de bdd avec HTML5", 200000); Db Storage: Exécution ordre SQL db.transaction(function (tx) { tx.executeSql(CREATE TABLE IF NOT EXISTS foo (id unique, text)); tx.executeSql(INSERT INTO foo (id, text) VALUES (1, "synergies")); tx.executeSql(INSERT INTO foo (id, text) VALUES (?, ?), [id, userValue]) });
  • Geolocation
  • Geolocation navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError); function updateLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var accuracy = position.coords.accuracy; … // Afficher une map Google } function handleLocationError(error) { switch(error.code){ … }
  • Cross Window Messaging
  • Cross Window Messaging Appelant window.postMessage(“Hello, world”, “portal.example.com”); Appelé window.addEventListener(“message”, messageHandler, true); function messageHandler(e) { if(checkWhiteList(e.origin)) { processMessage(e.data); } else { // ignore messages from unrecognized origins } }
  • Web Workers
  • Web Workers Lancement de tâche de fond worker = new Worker("echoWorker.js"); Communication avec le worker worker.postMessage(‘test’); c Fin du worker worker.terminate();
  • Audio & Vidéo
  • Audio & Vidéo <audio id="audio" src="../public/sound.mp3" controls></audio> <video id="video" width="400" height="200" src="http://slides.html5rocks.com/src/chrome_japa n.webm" controls="controls" ></video>
  • Canvas
  • Mais aussi… Web sockets Speech Input Mode déconnecté Microdata Device API File API
  • Révolutionnaire! Browser as a platform http://www.barbafan.de/html5video?video=tron http://www.somethinghitme.com/projects/canvasinvaders/
  • Révolutionnaire! HTML5 = Le java « mobile » × Write Once, Run everywhere OpenAppMkt = Market HTML5 Mobile
  • Pourquoi faut il y aller ? 1 - C’est un standard ouvert… … qui va faire mal à
  • Pourquoi faut il y aller ? 2 – HTML5 vise un maximum d’intéropérabilité
  • Pourquoi faut il y aller ? 3 – Le monde pousse sur HTML 5
  • Adoption IE 9 FIREFOX 4 SAFARI 5 CHROME 10 OPERA 11Eléments HTML5CanvasSVGApplications déconnectées NonStockage localBase de données locale NonWeb workers NonGéolocalisationCross Window MessagingWeb sockets NonServer Sent Events Non NonDrag-Drop NonCodec Vidéo H264, WebM WebM, Ogg Mpeg, H264 H264, Ogg WebM, Ogg Theora Theora, WebM TheoraCodec Audio Mp3, AAC, Pcm, Ogg Pcm, Mp3, Pcm, Mp3, Pcm, Ogg WebM Vorbis, WebM AAC AAC, Ogg Vorbis, WebM Vorbis, WebM http://www.html5test.com/
  • Des projets avec HTML5 ? … OUI  Application de gestion de la relation client à usage des commerciaux  Application nomade devant supporter le mode déconnecté  Architecture 3 niveaux avec réplication de données  Web Worker + Local Storage + Cross Window Messaging Tablet PC InternetTablet PC Network 3G Edge Tablet PC AS/400 TOMCAT DB2/400 SQL SERVER CHROME GWT 2 + HTML 5
  • Bilan projet Pré requis HTML5: Maîtrise du navigateur Bénéfices × Mode déconnecté × Performance (- de roundtrip avec le serveur, synchronisation en // avec le web worker) × Modularité du code Attention! × Sécurité des données (cryptage)
  • Ressources http://dev.w3.org/html5/spec/Overview.html http://www.html5rocks.com http://html5doctor.com http://html5test.com http://html5demos.com http://www.chromeexperiments.com/ Pro HTML 5 Programming (P. Lubbers) HTML 5 Up & Running (M. Pilgrim)
  • Questions