Click here to load reader

Petit Déjeuner : HTML5 et CSS3, les interfaces de demain

  • View
    1.924

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Text of Petit Déjeuner : HTML5 et CSS3, les interfaces de demain

  • 1. LES INTERFACES DEDEMAIN
  • 2. QUISUIS-JE? Adrien Denat Dveloppeur front-end chez Makina Corpus Passionn de multimdia et d'UI design [email protected] grsmto.com
  • 3. 1. Introduction : Retour sur l'volution des interfaces web 2. tat actuel 3. Et aprs ? 4. Liens et rfrences
  • 4. INTRO: VOLUTIONDES INTERFACES
  • 5. "...that strange new zone between medium and message. That zone we call the interface." Steven Johnson, 1997
  • 6. SURLEWEB,AVANT2000 Pages Hyperliens Formulaires GIF ! Les bases de navigation et d'interaction sont poses.
  • 7. Pourquoi les interfaces voluent ? Pourquoi ne pas se contenter de l'exprience acquise par les utilisateurs ?
  • 8. "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
  • 9. LESINTERFACESWEBEN TANTQU'ART 123KLAN TEAMCHMAN VECTORLOUNGE ...
  • 10. L'VOLUTION TECHNOLOGIQUE Le web influenc par le natif Les nouvelles possibilits techniques ncessitent de nouvelles interfaces pour tre exploites L'adoption des technologies par l'utilisateur pousse aller plus loin
  • 11. LESENJEUX Utilisation naturelle de l'interface Multi-support Exprience utilisateur unique
  • 12. AUJOURD'HUI
  • 13. CTNATIF Windows 8 (Metro) iOS7 L'apparition de la profondeur dans les interfaces rcentes tel que iOS7, dmocratise l'utilisation d'une nouvelle dimension et mne penser que la 3D est un des lments cl des interfaces du futur.
  • 14. SURLEWEB: LEDOMESTVIVANT Les sont physiques
    chaque lment du DOM peut avoir ses propres proprits et tre trait comme on le veut La maturit de JavaScript offre de nouvelles possibilits Et canvas ? canvas peut s'intgrer au DOM (tant bien que mal)
  • 15. 2DET3D:DEUXMONDES 2D:HTML5/CSS Parallax Scrolling websites ... 3D:WEBGL/FLASH jeux dmos/exps
  • 16. ETAPRS? (DEMO TIME) On a vu que les interfaces taient influences par l'volution technologique et les exprimentations artistiques. Alors que nous propose le web d'aujourd'hui avec HTML5 et CSS3 ?
  • 17. Si on peut faire des cubes, donc...? Les possibilits offertes par CSS3 ouvrent de nouveaux horizons
  • 18. C'ESTSYMPALA3D,MAIS C'ESTCOMPLIQU! CSS3 vulgarise la 3D et la rend simple Des diteurs 3D directement dans le navigateur
  • 19. POURLESJEUXOK,MAIS POURLESINTERFACES UTILISATEURS? Augmenter l'exprience utilisateur sur le web Amliorer l'exprience de lecture d'un article
  • 20. LIENSRFRENCES DITEURS3DVISUELS ThreeJS Editor : CSS3-3D : WebGL diteur avanc : INTGRERLA3DAUDOM(VIA CANVAS) http://mrdoob.github.io/three.js/editor/ http://tridiv.com/ http://idflood.github.io/ThreeNodes.js/public/index.html http://famo.us/ Mlange canvas/css Contourner les limitations de WebGL pour l'intgrer dans une page web Utiliser WebGL pour ajouter de la 3D dans une page web
  • 21. 3DNATURELLEINTGREUNE PAGEWEB:UTILISATIONCASRELS Comme bannire anim : Comme Illustration dun 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/ CSS3SHADERS "Vrai" site ralis avec les css3 custom filters (ncssite lactivation des Shaders dans Chrome) https://github.com/adobe- webplatform/custom-filters-demo-travel-app
  • 22. RFRENCESUIDESIGN INSPIRATIONSURLUXDESIGN Tutoriel et inspiration : http://tympanus.net/codrops/ http://littlebigdetails.com http://useyourinterface.com/ http://sixux.com/ http://hoverstat.es/
  • 23. JSLIBRARIES Transit : Lib JS pour animer en CSS Animations avancs (JS) http://ricostacruz.com/jquery.transit/ http://www.greensock.com/gsap-js/ ThreeJS : Moteur WebGL WWW.MAKINA-CORPUS.COM