On les utilise habituellement pour structurer et "designer" une page web mais HTML5 et CSS3 sont capables d'aller beaucoup plus loin : ils peuvent offrir aux utilisateurs de nouvelles expériences de navigations et permettront bientôt de révolutionner la vision actuelle d'un site web. HTML5 apporte de nombreuses fonctionnalités dont le web s'imprègne peu à peu. Les interfaces web évoluent rapidement, se transforment et s'adaptent à tout type de supports.
http://makina-corpus.com/blog/societe/petit-dejeuner-le-26-septembre-sur-html5-css3
10. L'ÉVOLUTION
TECHNOLOGIQUE
Le web influencé par le natif
Les nouvelles possibilités techniques nécessitent de
nouvelles interfaces pour être exploitées
L'adoption des technologies par l'utilisateur pousse à aller
plus loin
13. CÔTÉ NATIF
Windows 8 (Metro)
iOS7
L'apparition de la profondeur dans les interfaces récentes tel que iOS7, démocratise l'utilisation
d'une nouvelle dimension et mène à penser que la 3D est un des éléments clé des interfaces du
futur.
14. SUR LE WEB :
LE DOM EST VIVANT
Les sont physiques<div>
chaque élément du DOM peut avoir ses propres propriétés et
être traité comme on le veut
La maturité de JavaScript offre de nouvelles possibilités
Et canvas ?
canvas peut s'intégrer au DOM (tant bien que mal)
16. ET APRÈS ?
(DEMO TIME)
On a vu que les interfaces étaient influencées par l'évolution technologique et les expérimentations
artistiques. Alors que nous propose le web d'aujourd'hui avec HTML5 et CSS3 ?
17. Si on peut faire des cubes, donc...?
Les possibilités offertes par CSS3 ouvrent de nouveaux
horizons
20. LIENS RÉFÉRENCES
ÉDITEURS 3D VISUELS
ThreeJS Editor :
CSS3-3D :
WebGL éditeur avancé
:
INTÉGRER LA 3D AU DOM (VIA
CANVAS)
http://mrdoob.github.io/three.js/editor/
http://tridiv.com/
http://idflood.github.io/ThreeNodes.js/public/index.html
http://famo.us/
Mélange canvas/css
Contourner les limitations de WebGL pour l'intégrer dans une page web
Utiliser WebGL pour ajouter de la 3D dans une page web
21. 3D “NATURELLE” INTÉGRÉE À UNE
PAGE WEB : UTILISATION CAS RÉELS
Comme bannière animé :
Comme Illustration d’un article de blog :
http://html5hub.com/using-webgl-to-add-3d-effects-to-
your-website/#i.jcptr3ewneydq2
http://acko.net/blog/zero-to-sixty-in-one-
second/
CSS3 SHADERS
"Vrai" site réalisé avec les css3 custom filters
(nécéssite l’activation des Shaders
dans Chrome)
https://github.com/adobe-
webplatform/custom-filters-demo-travel-app