![Page 1: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/1.jpg)
LESINTERFACESDE DEMAIN
![Page 2: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/2.jpg)
QUI SUIS-JE ?Adrien Denat
Développeur front-end chez Makina CorpusPassionné de multimédia et d'UI design
- @grsmto grsmto.com
![Page 3: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/3.jpg)
1. Introduction : Retour sur l'évolution des interfaces web2. État actuel3. Et après ?4. Liens et références
![Page 4: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/4.jpg)
INTRO :ÉVOLUTION DESINTERFACES
![Page 5: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/5.jpg)
"...that strange new zone between medium and message. Thatzone we call the interface." — Steven Johnson, 1997
![Page 6: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/6.jpg)
SUR LE WEB, AVANT 2000
PagesHyperliensFormulairesGIF !
Les bases de navigation et d'interaction sont posées.
![Page 7: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/7.jpg)
Pourquoi les interfaces évoluent ?
Pourquoi ne pas se contenter de l'expérience acquise par lesutilisateurs ?
![Page 8: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/8.jpg)
"We will come to think of interface design as a kind of art form—perhaps the art form of the next century."
— Steven Johnson, 1997
![Page 9: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/9.jpg)
LES INTERFACES WEB ENTANT QU'ART
123KLANTEAMCHMAN
VECTORLOUNGE...
![Page 10: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/10.jpg)
L'ÉVOLUTIONTECHNOLOGIQUE
Le web influencé par le natif Les nouvelles possibilités techniques nécessitent denouvelles interfaces pour être exploitées L'adoption des technologies par l'utilisateur pousse à allerplus loin
![Page 11: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/11.jpg)
LES ENJEUXUtilisation naturelle de l'interface Multi-support Expérience utilisateur unique
![Page 12: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/12.jpg)
AUJOURD'HUI
![Page 13: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/13.jpg)
CÔTÉ NATIFWindows 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.
![Page 14: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/14.jpg)
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)
![Page 15: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/15.jpg)
2D ET 3D : DEUX MONDES
2D : HTML5/CSSParallaxScrolling websites...
3D : WEBGL/FLASHjeuxdémos/expés
![Page 16: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/16.jpg)
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 ?
![Page 17: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/17.jpg)
Si on peut faire des cubes, donc...?
Les possibilités offertes par CSS3 ouvrent de nouveauxhorizons
![Page 18: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/18.jpg)
C'EST SYMPA LA 3D, MAISC'EST COMPLIQUÉ !
CSS3 vulgarise la 3D et la rend simpleDes éditeurs 3D directement dans le navigateur
![Page 19: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/19.jpg)
POUR LES JEUX OK, MAISPOUR LES INTERFACES
UTILISATEURS ?Augmenter l'expérience utilisateur sur le web
Améliorer l'expérience de lecture d'un article
![Page 20: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/20.jpg)
LIENS RÉFÉRENCES
ÉDITEURS 3D VISUELSThreeJS Editor :
CSS3-3D :
WebGL éditeur avancé
:
INTÉGRER LA 3D AU DOM (VIACANVAS)
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
![Page 21: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/21.jpg)
3D “NATURELLE” INTÉGRÉE À UNEPAGE 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
![Page 22: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/22.jpg)
RÉFÉRENCES UI DESIGN
INSPIRATION SUR L’UX DESIGN
Tutoriel et inspiration : http://tympanus.net/codrops/
http://littlebigdetails.com
http://useyourinterface.com/
http://sixux.com/
http://hoverstat.es/
![Page 23: Petit Déjeuner : HTML5 et CSS3, les interfaces de demain](https://reader033.vdocuments.pub/reader033/viewer/2022051609/545c9f8cb1af9f280a8b4804/html5/thumbnails/23.jpg)
JS LIBRARIES
Transit : Lib JS pour animer en CSS
Animations avancés (JS)
http://ricostacruz.com/jquery.transit/
http://www.greensock.com/gsap-js/
ThreeJS : Moteur WebGL
WWW.MAKINA-CORPUS.COM