SlideShare une entreprise Scribd logo
1  sur  29
Télécharger pour lire hors ligne
NormANDY JUGHTML5 en projet La révolution maintenant! Alain Duval (@aduval93) Cédric Beurtheret(@cbe317) 14 Décembre 2010
Qui sommes nous ? OBJECTIF, spécialiste de l’ingénierie projet JAVA EE Alain Duval, Directeur Technique Cédric Beurtheret, Expert JAVA EE Normandy Jug - 14/12/2010
HTML5 genèse Une longue attente depuis 1998 (HTML 4) … Une spécification qui a démarrée en 2004… & qui ne sera finale que dans plusieurs années (2012 ?) Un triple effort (W3C, IETF, WHATWG) Une vision basée sur la compatibilité, l’utilité, & l’intéropérabilité End of party for plugins … and javascript  code to enforce the rules! Une révolution dixit les grands acteurs du WEB & JAVA Un support grandissant de la plupart des navigateurs Pourquoi attendre encore ? HTML 5, c’est maintenant! Normandy Jug - 14/12/2010
Nouveautés HTML 5 ,[object Object]
http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf
Dépréciation<applet>, <frame>, <font>, <center>… ,[object Object],<!DOCTYPE html> <metacharset="utf-8"> querySelector & querySelectorAll Structuration sémantique du contenu Simple & intuitif Facilité de parsing Normandy Jug - 14/12/2010
HTML 5 Forms Nouveaux type de champs de saisie… number, tel, url, email Date & ColorPicket Slider … apport des navigateurs Nouveaux attributs  PlaceHolder, AutoComplete, AutoFocus… Gestion de la validation (attributs & API) Ne peut pas remplacer complètement la validation serveur! Réel effort de compatibilité Si le browser ne supporte pas les nouveaux types, ils sont dégradées en type TEXT Normandy Jug - 14/12/2010
HTML 5 Samples Normandy Jug - 14/12/2010
Multimédia ,[object Object]
Permet de dessiner en JAVASCRIPT  (image, animation, graphes…) & d’être mis en forme en CSS
Dessin 2D, 3D
Affranchissement à terme des plugins (Flash, VML, Silverligt)
Support natif du SVG
Balises <audio> & <video>
Standardisation de la lecture de flux  multimédias (sans plugin)
Codecs audios: AAC, MP3,  OGG VORBIS
Codecs videos: H264, VPM &OGG THEORANormandy Jug - 14/12/2010
Multimédia Normandy Jug - 14/12/2010
API JS 12/10/2010 -  9 ,[object Object]
Pour le déplacement d’objet du bureau vers le navigateur
Try GMAIL attachments…
Geolocalisation
Récupération d’une coordonnée géographique
Autorisation nécessaire
Précision dépendante du provider (GPS, WIFI, Réseau IP…)
Web Socket
Moyen le + efficace pour établir une communication full duplex entre client / serveur (Bascule du protocole HTTP vers protocole WEB SOCKET)
Implémentation serveur nécessaire & pas encore standard
Offline Web

Contenu connexe

Tendances

DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8Aurelien Navarre
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirYves Van Goethem
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Tugdual Grall
 
R2DOCX : R + WORD
R2DOCX : R + WORDR2DOCX : R + WORD
R2DOCX : R + WORDCdiscount
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapBassem ABCHA
 
Presentation langage go_19022015
Presentation langage go_19022015Presentation langage go_19022015
Presentation langage go_19022015Stéphane Legrand
 
Pratique de la programmation en go
Pratique de la programmation en goPratique de la programmation en go
Pratique de la programmation en gokader15
 
201211 drupagora hostingdrupal
201211 drupagora hostingdrupal201211 drupagora hostingdrupal
201211 drupagora hostingdrupalOxalide
 
Les blocs Drupal de drop.org à Drupal 8
Les blocs Drupal de drop.org à Drupal 8Les blocs Drupal de drop.org à Drupal 8
Les blocs Drupal de drop.org à Drupal 8OSInet
 
Configuration Management avec Drupal 8
Configuration Management avec Drupal 8Configuration Management avec Drupal 8
Configuration Management avec Drupal 8Aurelien Navarre
 
MongoDB day Paris 2012
MongoDB day Paris 2012MongoDB day Paris 2012
MongoDB day Paris 2012FastConnect
 
Gwt jetty et sources de données
Gwt   jetty et sources de donnéesGwt   jetty et sources de données
Gwt jetty et sources de donnéesFranck SIMON
 

Tendances (19)

DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
DrupalCamp Nantes 2016 - Migrer un site Drupal 6 ou Drupal 7 vers Drupal 8
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
Tp java ee.pptx
Tp java ee.pptxTp java ee.pptx
Tp java ee.pptx
 
Fichier XML et PHP5
Fichier XML et PHP5Fichier XML et PHP5
Fichier XML et PHP5
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
 
MVC / Frameworks PHP
MVC / Frameworks PHPMVC / Frameworks PHP
MVC / Frameworks PHP
 
L'avenir de LAMP
L'avenir de LAMPL'avenir de LAMP
L'avenir de LAMP
 
R2DOCX : R + WORD
R2DOCX : R + WORDR2DOCX : R + WORD
R2DOCX : R + WORD
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
Presentation langage go_19022015
Presentation langage go_19022015Presentation langage go_19022015
Presentation langage go_19022015
 
Pratique de la programmation en go
Pratique de la programmation en goPratique de la programmation en go
Pratique de la programmation en go
 
201211 drupagora hostingdrupal
201211 drupagora hostingdrupal201211 drupagora hostingdrupal
201211 drupagora hostingdrupal
 
Apprenez le jQuery
Apprenez le jQueryApprenez le jQuery
Apprenez le jQuery
 
Les blocs Drupal de drop.org à Drupal 8
Les blocs Drupal de drop.org à Drupal 8Les blocs Drupal de drop.org à Drupal 8
Les blocs Drupal de drop.org à Drupal 8
 
Configuration Management avec Drupal 8
Configuration Management avec Drupal 8Configuration Management avec Drupal 8
Configuration Management avec Drupal 8
 
MongoDB day Paris 2012
MongoDB day Paris 2012MongoDB day Paris 2012
MongoDB day Paris 2012
 
R Devtools
R DevtoolsR Devtools
R Devtools
 
Android ORMLite
Android   ORMLiteAndroid   ORMLite
Android ORMLite
 
Gwt jetty et sources de données
Gwt   jetty et sources de donnéesGwt   jetty et sources de données
Gwt jetty et sources de données
 

En vedette

Bloggen & Recht auf der re-publica09
Bloggen & Recht auf der re-publica09Bloggen & Recht auf der re-publica09
Bloggen & Recht auf der re-publica09Henning Krieg
 
Guide de présentation Philanthropie Québec
Guide de présentation Philanthropie QuébecGuide de présentation Philanthropie Québec
Guide de présentation Philanthropie QuébecPhilanthropie-qc
 
Social Media für Unternehmen
Social Media für UnternehmenSocial Media für Unternehmen
Social Media für UnternehmenJan Winters
 
Frances power familia8
Frances power  familia8Frances power  familia8
Frances power familia8lucasxu
 
Christopher Gilbert Artwork
Christopher Gilbert ArtworkChristopher Gilbert Artwork
Christopher Gilbert ArtworkOscar revoltoso
 
Favorade productpraesentation
Favorade productpraesentationFavorade productpraesentation
Favorade productpraesentationClemens Bartlome
 
Iconographie partielle de l'archerie au louvre
Iconographie partielle de l'archerie au louvreIconographie partielle de l'archerie au louvre
Iconographie partielle de l'archerie au louvreHervé Biran
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenJakob
 
បារមីភាគ១
បារមីភាគ១បារមីភាគ១
បារមីភាគ១Vantha Kago
 
Conclusion enquete rse pour clicc 04 04 13 v10 07 04 13
Conclusion enquete rse pour clicc 04 04 13  v10 07 04 13Conclusion enquete rse pour clicc 04 04 13  v10 07 04 13
Conclusion enquete rse pour clicc 04 04 13 v10 07 04 13servantpro
 
Workshop "Saisonrückblick - Social Media Recht" auf der re:publica 2013
Workshop "Saisonrückblick - Social Media Recht" auf der re:publica 2013Workshop "Saisonrückblick - Social Media Recht" auf der re:publica 2013
Workshop "Saisonrückblick - Social Media Recht" auf der re:publica 2013Henning Krieg
 
6.0 modif repertoire destination vsftpd
6.0 modif repertoire destination vsftpd6.0 modif repertoire destination vsftpd
6.0 modif repertoire destination vsftpdOsi Pallière
 
Enseignement de la priere islam
Enseignement de la priere islamEnseignement de la priere islam
Enseignement de la priere islamCasgordy Radjabu
 
Predigtpräsentation, 2008 02 03, Discovery Of Genesis
Predigtpräsentation, 2008 02 03, Discovery Of GenesisPredigtpräsentation, 2008 02 03, Discovery Of Genesis
Predigtpräsentation, 2008 02 03, Discovery Of Genesiswusternberg
 

En vedette (20)

2011 01 06 14-15 christian calabró
2011 01 06 14-15 christian calabró2011 01 06 14-15 christian calabró
2011 01 06 14-15 christian calabró
 
Bloggen & Recht auf der re-publica09
Bloggen & Recht auf der re-publica09Bloggen & Recht auf der re-publica09
Bloggen & Recht auf der re-publica09
 
DRAGON BALL Z
DRAGON BALL ZDRAGON BALL Z
DRAGON BALL Z
 
Guide de présentation Philanthropie Québec
Guide de présentation Philanthropie QuébecGuide de présentation Philanthropie Québec
Guide de présentation Philanthropie Québec
 
Social Media für Unternehmen
Social Media für UnternehmenSocial Media für Unternehmen
Social Media für Unternehmen
 
Frances power familia8
Frances power  familia8Frances power  familia8
Frances power familia8
 
Christopher Gilbert Artwork
Christopher Gilbert ArtworkChristopher Gilbert Artwork
Christopher Gilbert Artwork
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Favorade productpraesentation
Favorade productpraesentationFavorade productpraesentation
Favorade productpraesentation
 
Iconographie partielle de l'archerie au louvre
Iconographie partielle de l'archerie au louvreIconographie partielle de l'archerie au louvre
Iconographie partielle de l'archerie au louvre
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
 
បារមីភាគ១
បារមីភាគ១បារមីភាគ១
បារមីភាគ១
 
Conclusion enquete rse pour clicc 04 04 13 v10 07 04 13
Conclusion enquete rse pour clicc 04 04 13  v10 07 04 13Conclusion enquete rse pour clicc 04 04 13  v10 07 04 13
Conclusion enquete rse pour clicc 04 04 13 v10 07 04 13
 
2011 10 05 11-15 stefan flück
2011 10 05 11-15 stefan flück2011 10 05 11-15 stefan flück
2011 10 05 11-15 stefan flück
 
Workshop "Saisonrückblick - Social Media Recht" auf der re:publica 2013
Workshop "Saisonrückblick - Social Media Recht" auf der re:publica 2013Workshop "Saisonrückblick - Social Media Recht" auf der re:publica 2013
Workshop "Saisonrückblick - Social Media Recht" auf der re:publica 2013
 
Derliebe Gott2
Derliebe Gott2Derliebe Gott2
Derliebe Gott2
 
6.0 modif repertoire destination vsftpd
6.0 modif repertoire destination vsftpd6.0 modif repertoire destination vsftpd
6.0 modif repertoire destination vsftpd
 
Enseignement de la priere islam
Enseignement de la priere islamEnseignement de la priere islam
Enseignement de la priere islam
 
Predigtpräsentation, 2008 02 03, Discovery Of Genesis
Predigtpräsentation, 2008 02 03, Discovery Of GenesisPredigtpräsentation, 2008 02 03, Discovery Of Genesis
Predigtpräsentation, 2008 02 03, Discovery Of Genesis
 
Panorama sr7
Panorama sr7Panorama sr7
Panorama sr7
 

Similaire à HTML5 en projet

HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans DrupalAdyax
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applicationsgoldoraf
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?GreenIvory
 
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesGaëtan LAVENU
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantHugo Hamon
 
Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Xavier NOPRE
 
Présentation CoreOS
Présentation CoreOSPrésentation CoreOS
Présentation CoreOSgcatt
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflineDNG Consulting
 
Nosql, hadoop, map reduce, hbase, sqoop, voldemort, cassandra -intro
Nosql, hadoop, map reduce, hbase, sqoop, voldemort, cassandra -introNosql, hadoop, map reduce, hbase, sqoop, voldemort, cassandra -intro
Nosql, hadoop, map reduce, hbase, sqoop, voldemort, cassandra -introOlivier Mallassi
 
Démocratisation des images de relevé mobile sur le Web
Démocratisation des images de relevé mobile sur le WebDémocratisation des images de relevé mobile sur le Web
Démocratisation des images de relevé mobile sur le WebACSG - Section Montréal
 
Les nouveautés d'HTML 5
Les nouveautés d'HTML 5Les nouveautés d'HTML 5
Les nouveautés d'HTML 5StrasWeb
 
Java dans Windows Azure: l'exemple de Jonas
Java dans Windows Azure: l'exemple de JonasJava dans Windows Azure: l'exemple de Jonas
Java dans Windows Azure: l'exemple de JonasMicrosoft
 

Similaire à HTML5 en projet (20)

HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 
iTunes Stats
iTunes StatsiTunes Stats
iTunes Stats
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013
 
Vert.x 3
Vert.x 3Vert.x 3
Vert.x 3
 
Présentation CoreOS
Présentation CoreOSPrésentation CoreOS
Présentation CoreOS
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'Offline
 
Nosql, hadoop, map reduce, hbase, sqoop, voldemort, cassandra -intro
Nosql, hadoop, map reduce, hbase, sqoop, voldemort, cassandra -introNosql, hadoop, map reduce, hbase, sqoop, voldemort, cassandra -intro
Nosql, hadoop, map reduce, hbase, sqoop, voldemort, cassandra -intro
 
12-Factor
12-Factor12-Factor
12-Factor
 
CV_Bilel CHAOUADI
CV_Bilel CHAOUADICV_Bilel CHAOUADI
CV_Bilel CHAOUADI
 
Démocratisation des images de relevé mobile sur le Web
Démocratisation des images de relevé mobile sur le WebDémocratisation des images de relevé mobile sur le Web
Démocratisation des images de relevé mobile sur le Web
 
Les nouveautés d'HTML 5
Les nouveautés d'HTML 5Les nouveautés d'HTML 5
Les nouveautés d'HTML 5
 
Java dans Windows Azure: l'exemple de Jonas
Java dans Windows Azure: l'exemple de JonasJava dans Windows Azure: l'exemple de Jonas
Java dans Windows Azure: l'exemple de Jonas
 
Vert.x
Vert.xVert.x
Vert.x
 

Plus de Normandy JUG

Découvrez les bases de l’ergonomie web : donnez à vos utilisateurs le meilleu...
Découvrez les bases de l’ergonomie web : donnez à vos utilisateurs le meilleu...Découvrez les bases de l’ergonomie web : donnez à vos utilisateurs le meilleu...
Découvrez les bases de l’ergonomie web : donnez à vos utilisateurs le meilleu...Normandy JUG
 
Codeurs En Seine - Lean startup - Matthieu Garde-Lebreton
Codeurs En Seine - Lean startup - Matthieu Garde-LebretonCodeurs En Seine - Lean startup - Matthieu Garde-Lebreton
Codeurs En Seine - Lean startup - Matthieu Garde-LebretonNormandy JUG
 
What makes groovy groovy codeurs en seine - 2013 - light size
What makes groovy groovy   codeurs en seine - 2013 - light sizeWhat makes groovy groovy   codeurs en seine - 2013 - light size
What makes groovy groovy codeurs en seine - 2013 - light sizeNormandy JUG
 
[Codeurs en seine] management & monitoring cloud
[Codeurs en seine] management & monitoring cloud[Codeurs en seine] management & monitoring cloud
[Codeurs en seine] management & monitoring cloudNormandy JUG
 
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...Normandy JUG
 
Capacity Planning : Pratiques et outils pour regarder la foudre tomber sans p...
Capacity Planning : Pratiques et outils pour regarder la foudre tomber sans p...Capacity Planning : Pratiques et outils pour regarder la foudre tomber sans p...
Capacity Planning : Pratiques et outils pour regarder la foudre tomber sans p...Normandy JUG
 
Gatling : Faites tomber la foudre sur votre serveur ! (Stéphane Landelle)
Gatling : Faites tomber la foudre sur votre serveur ! (Stéphane Landelle)Gatling : Faites tomber la foudre sur votre serveur ! (Stéphane Landelle)
Gatling : Faites tomber la foudre sur votre serveur ! (Stéphane Landelle)Normandy JUG
 
Soirée Ceylon avec Stéphane Epardaud
Soirée Ceylon avec Stéphane EpardaudSoirée Ceylon avec Stéphane Epardaud
Soirée Ceylon avec Stéphane EpardaudNormandy JUG
 
Soirée Guava et Lombok avec Thierry Leriche
Soirée Guava et Lombok avec Thierry LericheSoirée Guava et Lombok avec Thierry Leriche
Soirée Guava et Lombok avec Thierry LericheNormandy JUG
 
Couche Base par Tugdual Grall
Couche Base par Tugdual GrallCouche Base par Tugdual Grall
Couche Base par Tugdual GrallNormandy JUG
 
Apache, osgi and karaf par Guillaume Nodet
Apache, osgi and karaf par Guillaume NodetApache, osgi and karaf par Guillaume Nodet
Apache, osgi and karaf par Guillaume NodetNormandy JUG
 
Mockito - Design + tests par Brice Duteil
Mockito - Design + tests par Brice DuteilMockito - Design + tests par Brice Duteil
Mockito - Design + tests par Brice DuteilNormandy JUG
 
Annotations Java par Olivier Croisier
Annotations Java par Olivier CroisierAnnotations Java par Olivier Croisier
Annotations Java par Olivier CroisierNormandy JUG
 
Spring Batch 17-05-2011
Spring Batch 17-05-2011Spring Batch 17-05-2011
Spring Batch 17-05-2011Normandy JUG
 
ATR2011 - Planning poker
ATR2011 - Planning pokerATR2011 - Planning poker
ATR2011 - Planning pokerNormandy JUG
 
ATR2011 - Scrum dans les tranchées Normandes
ATR2011 - Scrum dans les tranchées NormandesATR2011 - Scrum dans les tranchées Normandes
ATR2011 - Scrum dans les tranchées NormandesNormandy JUG
 
Hibernate vs le_cloud_computing
Hibernate vs le_cloud_computingHibernate vs le_cloud_computing
Hibernate vs le_cloud_computingNormandy JUG
 
Soirée BPM - Introduction Logica
Soirée BPM - Introduction LogicaSoirée BPM - Introduction Logica
Soirée BPM - Introduction LogicaNormandy JUG
 

Plus de Normandy JUG (20)

Découvrez les bases de l’ergonomie web : donnez à vos utilisateurs le meilleu...
Découvrez les bases de l’ergonomie web : donnez à vos utilisateurs le meilleu...Découvrez les bases de l’ergonomie web : donnez à vos utilisateurs le meilleu...
Découvrez les bases de l’ergonomie web : donnez à vos utilisateurs le meilleu...
 
Codeurs En Seine - Lean startup - Matthieu Garde-Lebreton
Codeurs En Seine - Lean startup - Matthieu Garde-LebretonCodeurs En Seine - Lean startup - Matthieu Garde-Lebreton
Codeurs En Seine - Lean startup - Matthieu Garde-Lebreton
 
What makes groovy groovy codeurs en seine - 2013 - light size
What makes groovy groovy   codeurs en seine - 2013 - light sizeWhat makes groovy groovy   codeurs en seine - 2013 - light size
What makes groovy groovy codeurs en seine - 2013 - light size
 
[Codeurs en seine] management & monitoring cloud
[Codeurs en seine] management & monitoring cloud[Codeurs en seine] management & monitoring cloud
[Codeurs en seine] management & monitoring cloud
 
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
 
Capacity Planning : Pratiques et outils pour regarder la foudre tomber sans p...
Capacity Planning : Pratiques et outils pour regarder la foudre tomber sans p...Capacity Planning : Pratiques et outils pour regarder la foudre tomber sans p...
Capacity Planning : Pratiques et outils pour regarder la foudre tomber sans p...
 
Gatling : Faites tomber la foudre sur votre serveur ! (Stéphane Landelle)
Gatling : Faites tomber la foudre sur votre serveur ! (Stéphane Landelle)Gatling : Faites tomber la foudre sur votre serveur ! (Stéphane Landelle)
Gatling : Faites tomber la foudre sur votre serveur ! (Stéphane Landelle)
 
Soirée Ceylon avec Stéphane Epardaud
Soirée Ceylon avec Stéphane EpardaudSoirée Ceylon avec Stéphane Epardaud
Soirée Ceylon avec Stéphane Epardaud
 
Soirée Guava et Lombok avec Thierry Leriche
Soirée Guava et Lombok avec Thierry LericheSoirée Guava et Lombok avec Thierry Leriche
Soirée Guava et Lombok avec Thierry Leriche
 
Couche Base par Tugdual Grall
Couche Base par Tugdual GrallCouche Base par Tugdual Grall
Couche Base par Tugdual Grall
 
Java7 normandyjug
Java7 normandyjugJava7 normandyjug
Java7 normandyjug
 
Apache, osgi and karaf par Guillaume Nodet
Apache, osgi and karaf par Guillaume NodetApache, osgi and karaf par Guillaume Nodet
Apache, osgi and karaf par Guillaume Nodet
 
Mockito - Design + tests par Brice Duteil
Mockito - Design + tests par Brice DuteilMockito - Design + tests par Brice Duteil
Mockito - Design + tests par Brice Duteil
 
Annotations Java par Olivier Croisier
Annotations Java par Olivier CroisierAnnotations Java par Olivier Croisier
Annotations Java par Olivier Croisier
 
Spring Batch 17-05-2011
Spring Batch 17-05-2011Spring Batch 17-05-2011
Spring Batch 17-05-2011
 
ATR2011 - Planning poker
ATR2011 - Planning pokerATR2011 - Planning poker
ATR2011 - Planning poker
 
ATR2011 - Scrum dans les tranchées Normandes
ATR2011 - Scrum dans les tranchées NormandesATR2011 - Scrum dans les tranchées Normandes
ATR2011 - Scrum dans les tranchées Normandes
 
Hibernate vs le_cloud_computing
Hibernate vs le_cloud_computingHibernate vs le_cloud_computing
Hibernate vs le_cloud_computing
 
Git
GitGit
Git
 
Soirée BPM - Introduction Logica
Soirée BPM - Introduction LogicaSoirée BPM - Introduction Logica
Soirée BPM - Introduction Logica
 

HTML5 en projet

  • 1. NormANDY JUGHTML5 en projet La révolution maintenant! Alain Duval (@aduval93) Cédric Beurtheret(@cbe317) 14 Décembre 2010
  • 2. Qui sommes nous ? OBJECTIF, spécialiste de l’ingénierie projet JAVA EE Alain Duval, Directeur Technique Cédric Beurtheret, Expert JAVA EE Normandy Jug - 14/12/2010
  • 3. HTML5 genèse Une longue attente depuis 1998 (HTML 4) … Une spécification qui a démarrée en 2004… & qui ne sera finale que dans plusieurs années (2012 ?) Un triple effort (W3C, IETF, WHATWG) Une vision basée sur la compatibilité, l’utilité, & l’intéropérabilité End of party for plugins … and javascript  code to enforce the rules! Une révolution dixit les grands acteurs du WEB & JAVA Un support grandissant de la plupart des navigateurs Pourquoi attendre encore ? HTML 5, c’est maintenant! Normandy Jug - 14/12/2010
  • 4.
  • 6.
  • 7. HTML 5 Forms Nouveaux type de champs de saisie… number, tel, url, email Date & ColorPicket Slider … apport des navigateurs Nouveaux attributs PlaceHolder, AutoComplete, AutoFocus… Gestion de la validation (attributs & API) Ne peut pas remplacer complètement la validation serveur! Réel effort de compatibilité Si le browser ne supporte pas les nouveaux types, ils sont dégradées en type TEXT Normandy Jug - 14/12/2010
  • 8. HTML 5 Samples Normandy Jug - 14/12/2010
  • 9.
  • 10. Permet de dessiner en JAVASCRIPT (image, animation, graphes…) & d’être mis en forme en CSS
  • 12. Affranchissement à terme des plugins (Flash, VML, Silverligt)
  • 15. Standardisation de la lecture de flux multimédias (sans plugin)
  • 16. Codecs audios: AAC, MP3, OGG VORBIS
  • 17. Codecs videos: H264, VPM &OGG THEORANormandy Jug - 14/12/2010
  • 18. Multimédia Normandy Jug - 14/12/2010
  • 19.
  • 20. Pour le déplacement d’objet du bureau vers le navigateur
  • 25. Précision dépendante du provider (GPS, WIFI, Réseau IP…)
  • 27. Moyen le + efficace pour établir une communication full duplex entre client / serveur (Bascule du protocole HTTP vers protocole WEB SOCKET)
  • 28. Implémentation serveur nécessaire & pas encore standard
  • 30. Cache d’application pour le stochage HTML, CSS, JS
  • 32.
  • 33.
  • 35. WEB STORAGENormandy Jug - 14/12/2010
  • 36.
  • 37. Application nomade devant supporter le mode déconnecté
  • 38. Architecture 3 niveaux avec réplication de donnéesInternet 3G Edge Network Tablet PC Tablet PC Tablet PC AS/400 DB2/400 TOMCAT SQL SERVER CHROME GWT 2 + HTML 5 (WebWorkers, Cross Window Messaging, Web Storage) Normandy Jug - 14/12/2010
  • 39. Démo Jug Web Storage + Cross Windows Messaging + Web Workers in action… Normandy Jug - 14/12/2010
  • 40. Web Workers API pour lancer des scripts JS en tâche de fond Dans notre contexte projet, utilisé pour effectuer des tâches de synchronisation de données à intervalle régulier Bénéfices Parallélisation des tâches Evite de faire une multitude de timer Normandy Jug - 14/12/2010
  • 41. Web Workers (code) Code exécuté pour créer et lancer un Worker worker = new Worker('worker_twitter.js'); worker.onmessage = function(event) { trace('Workerrecieved : ' + event.data); // event.data contient le message envoyé par le Worker : // - soit une String // - soit un objet. ... }; worker.onerror = function(event) { // event.data contient le 'erreur throwevent.data }; // On démarre le worker. worker.postMessage({'user' : user, 'count' : count}); Normandy Jug - 14/12/2010
  • 42. Web Workers (code) Code du Worker onmessage = function(event) { //Reçoit le message de démarrage ... }; functionsend(obj) { // Envoi un objet ou une String à l’appelant postMessage(obj); } Normandy Jug - 14/12/2010
  • 43.
  • 44. Une des solutions au problème du SameOrigin Policy
  • 45. Dans notre contexte projet, utilisé pour transmettre un contexte applicatif entre les fenêtres
  • 46. principe de portail : séparation menu/habilitation des modules fonctionnels)
  • 49. Sécurité des échanges: le message contient le domaine de l’émetteur, le récepteur peut réagir en conséquenceNormandy Jug - 14/12/2010
  • 50. Cross Window Messaging (code) Code dans la fenêtre principale // Création de la fenêtre secondaire (ici une windows, //mais ça aurait pu être une iframe var consoleWindows = window.open( "http://localhost:90/demo_jug/debug.html", "Debug", "menubar=no,location=no,resizable=yes,scrollbars=yes,status=yes"); function trace(info) { // Envoi un message à la fenêtre secondaire. if (consoleWindows != 'undefined') { consoleWindows.postMessage(info, "*"); } } Normandy Jug - 14/12/2010
  • 51. Cross Window Messaging (code) Code dans la fenêtre secondaire // Reception du message // Pour répondre à la fenêtre principale, il faut utiliser // e.sender.postMessage() window.addEventListener("message", function(e){ document.getElementById("debug").innerHTML = document.getElementById("debug").innerHTML + "<br/>" + e.data; }, false); Normandy Jug - 14/12/2010
  • 52.
  • 54. SessionStorage: Volatile (durée de la session client)
  • 55. LocalStorage: Persistant mais limité en taille (HashMap)
  • 56. WebDatabase: Basée sur SQLLite ou IndexDb
  • 57. Dans notre contexte projet, réplica de la base relationnelle de niveau 2, réduite à 1 utilisateur
  • 59. Gestion du mode déconnecté
  • 60. Moins de roundtrip sur le serveur pour l’échange de contexte entre modules applicatifs
  • 61. Plus la limite de taille des cookies (4k par domaine)
  • 63. Sécurité à prendre en compte (hachage de données)
  • 64. Usage de l’API asynchrone pour les accès aux données (moins pénalisant)Normandy Jug - 14/12/2010
  • 65. Web Storage (code) var db = null; try { if (window.openDatabase) { db = openDatabase("Twitter", "1.0", "TwitterFeed", 200000); } } catch(err) { } Normandy Jug - 14/12/2010
  • 66. Web Storage (code) //Create table functioninit() { db.transaction(function(tx) { tx.executeSql( "CREATE TABLE IF NOT EXISTS status (id REAL UNIQUE, usertimeline TEXT, username TEXT, creationdate TEXT, text TEXT, avatar TEXT)", [], function(result) { //Par exemple lire le contenu de la table }, function(tx, error) { //Traiter l'erreur } ); }); } Normandy Jug - 14/12/2010
  • 67. Web Storage (code) //Read functionread() { db.transaction(function(tx) { tx.executeSql("SELECT id, usertimeline, username, creationdate, text, avatar FROM statuswhereusertimeline = ? ORDER BY id DESC", [usertimeline], function(tx, result) { //Utiliser les données lues }, function(tx, error) { //Erreur return; } ); }); } Normandy Jug - 14/12/2010
  • 68. Web Storage (code) //insert function(arStatus, callback) { var status = arStatus.pop(); var sql = "INSERT INTO status (id, usertimeline, username, text, creationdate, avatar) VALUES (?,?,?,?,?,?)"; db.transaction(function (tx) { tx.executeSql( sql, status, function(tx, result){ //Continuer }, function(tx, error){ //Erreur } ); } ); } Normandy Jug - 14/12/2010
  • 69. Support navigateurs Normandy Jug - 14/12/2010
  • 70. Support navigateurs * Si le codec est installé sur la machine Normandy Jug - 14/12/2010
  • 71. HTML5 maintenant! Pourquoi se priver de ces fonctions dès lors que l’on maîtrise le navigateur. Si on ne maîtrise pas le navigateur: Option 1: Degradegracefully (avec du code en +) Option 2: Code JS pour émuler les fonctions HTML5 Lecteur « SublimVideo » Librairie JavascriptKaazing pour les WebSockets (flash) Librairie Jstorage pour le stockage des données Modernizr (librairie de détection des fonctionnalités supportées) HTML5 Boilerplate => rassemble l’ensembles des librairies d’émulation, et de bonnes pratiques HTML5 … Normandy Jug - 14/12/2010
  • 72. Ressources http://dev.w3.org/html5/spec/Overview.html http://diveintohtml5.org http://www.html5rocks.com http://html5doctor.com http://html5test.com http://html5boilerplate.com http://html5demos.com Pro HTML 5 Programming (P. Lubbers) HTML 5 Up & Running (M. Pilgrim) Normandy Jug - 14/12/2010
  • 73. Questions ? Normandy Jug - 14/12/2010