Agenda FLASH ou HTML5

driftsaultInternet και Εφαρμογές Web

25 Ιουν 2012 (πριν από 5 χρόνια και 1 μήνα)

333 εμφανίσεις

Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
Agenda
FLASH ou HTML5!
Quelles technos choisir
et pour quel prix ?



Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
HTML5 : Les technos

Ce nʼest pas : 


CSS

JAVASCRIPT

SVG

PNG


http://www.w3.org/TR/html5/
#
Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
HTML5 : Les technos

Cʼest :


Un ensemble de balises 

Des API#


http://www.w3.org/TR/html5/
#
Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
HTML5 : Un buzzword pour les réunir tous

Clients

Décideurs

Marketing

Créatifs

Développeurs

Ergonomes 

…

#
HTML 

+ CSS

+ JAVASCRIPT

+ AJAX

+ SVG#
HTML5

Applications
riches#
Creative commons - LeJoe

Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
HTML5 == FLASH ? NON.

NISSAN JUKE :
goo.gl/
JKiCi
#
Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
HTML5 == FLASH ? NON.

NUMANTHIA :
http://goo.gl/HeOYx
#
Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
DEMONSTRATIONS
#
Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
HTML5 et ses limites

Pas toujours possible de faire à lʼidentique#
Nécessite des adaptations graphiques#
De 2 à 3 fois plus cher quʼun équivalent Flash#
Les outils Flash sont maîtrisés et fiables#


#
Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
HTML5 et ses limites : Cross-Compatibilité

Fallback : Ici du Flash pour afficher de la
vidéo sur IE 6/7/8 > 2 développements
#
Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
HTML5 et ses limites : Performances

VISIONS OF BEAUTIES :

http://goo.gl/dV5K0
#
IE6/IE7/IE8 :

40% de dév. en plus

Impossibilités de dév.

Moteur JS à genoux

Implémentation CSS trop faible


iPad : Moteur JS à genoux
mais accélération 3D via CSS

#
Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
HTML5 et ses limites : Solutions

Google Chrome Frame

IE Frame ?


Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
HTML5 et ses limites : IE6 (et IE7 voire IE8)

LA CHINE :#
Un problème pour les sites
internationaux#
34% dʼutilisateurs dans un
pays de 1 350 millions
dʼinternautes !


http://www.ie6countdown.com/
#
#
Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
HTML5 : Des outils d’animation

Enfin des IDE HTML/CSS/JS
pour animer du contenu : 

- 12 ans de retard sur Flash

- Optimisé iTruc (Bouh!)

- Un nouvel horizon#
#
Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
HTML5 : Les avantages

Interopérabilité #
Cross-Device : 

Mobile, Browser Web Tv, Browser Console#
Javascript un langage puissant : 

NodeJS, jQuery, Javascript MVC, Unity3D, AVES-Engine, Backbone …#
SEO / Accessibilité / ARIA#
SANS PLUG-IN !#
Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
Conclusion

Réfléchir en amont des projets avec les différents
profils pour définir les technos utilisées en fonction
des contraintes dʼaccessibilité, de référencement,
de coûts et de cible#
Définir les apports de chaque technologie et ne pas
être catégorique, HTML5 et Flash sont
complémentaires#
Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
Des questions ?

Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
Agenda
MERCI !

Flash ou HTML5 : Quelles technos choisir pour quel prix ? !
Paris Web 2011 | Adrien Leygues!
Adrien Leygues
http://www.bootleygues.net/

http://twitter.com/Voulf

aleygues@yahoo.fr
Icônes :
http://www.wefunction.com/