petit déjeuner : html5 et css3, les interfaces de demain

LESINTERFACESDE DEMAIN

QUI SUIS-JE ?Adrien Denat

Développeur front-end chez Makina CorpusPassionné de multimédia et d'UI design

- @grsmto grsmto.com

1. Introduction : Retour sur l'évolution des interfaces web2. État actuel3. Et après ?4. Liens et références

INTRO :ÉVOLUTION DESINTERFACES

"...that strange new zone between medium and message. Thatzone we call the interface." — Steven Johnson, 1997

SUR LE WEB, AVANT 2000

PagesHyperliensFormulairesGIF !

Les bases de navigation et d'interaction sont posées.

Pourquoi les interfaces évoluent ?

Pourquoi ne pas se contenter de l'expérience acquise par lesutilisateurs ?

"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

LES INTERFACES WEB ENTANT QU'ART

123KLANTEAMCHMAN

VECTORLOUNGE...

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

LES ENJEUXUtilisation naturelle de l'interface Multi-support Expérience utilisateur unique

AUJOURD'HUI

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.

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)

2D ET 3D : DEUX MONDES

2D : HTML5/CSSParallaxScrolling websites...

3D : WEBGL/FLASHjeuxdémos/expés

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 ?

Si on peut faire des cubes, donc...?

Les possibilités offertes par CSS3 ouvrent de nouveauxhorizons

C'EST SYMPA LA 3D, MAISC'EST COMPLIQUÉ !

CSS3 vulgarise la 3D et la rend simpleDes éditeurs 3D directement dans le navigateur

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

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

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

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/

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