Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013

1,157 views
1,035 views

Published on

Présentation réalisée par MBA Multimedia dans le cadres d'un Expresso de Rennes Atalante, sur les techniques HTML5 et les transformations CSS3D avec, comme exemple, le projet W3D pour illustrer le web 3D. Présentation effectuée par Julien Le Thuaut, ingénieur R&D de la société MBA Multimédia, agence rennaise de communication numérique.
La présentation aborde les points suivants :
- Description des innovations HTML5/CSS3 en termes de visualisation, transition, animation et transformation 3D
- Exemples techniques et illustrations sur des cas concrets
- Les cas d’utilisation en IHM Web (UI/UX)
- Les problématiques de support (navigateur, matériel…)
- Les outils, ressources, sites intéressants…

Les Expressos de Rennes Atalante sont des rendez-vous bimestriels que propose la technopole dans le cadre de La Cantine numérique rennaise. Ouverts à tous, leur objectif est d’échanger sur des sujets d’actualités relatifs aux nouvelles technologies et à leurs usages.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,157
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013

  1. 1. HTML5 / CSS3 Les transformations CSS 3D Expresso Rennes Atalante - La Cantine Numérique Rennaise / 17 sept. 2013
  2. 2. Julien LE THUAUT Ingénieur R&D - MBA Multimedia HTML5, CSS3, W3C, 3D, WebGL, Jquery, PHP, Java, GI T Responsive Design, UI/UX, Ergonomie des IHM Wordpress, Bootstrap, Foundation @JulienLeThuaut jlethuaut http://www.mba-multimedia.com/
  3. 3. Sommaire de la présentation Sujets abordés HTML5 / CSS3 Transformations, animations, transitions, support des navigateurs Les transformations 3D Scène 3D, perspective, propriétés CSS utilisées, effets simples L’interactivité jQuery, évènements, interaction utilisateur, effets évolués/combinés Le projet R&D collaboratif W3D Comment utiliser et améliorer ces techniques pour améliorer l’expérience du Web Aller plus loin… WebGL, Canvas, Three.js, ressources et liens utiles
  4. 4. #1 - HTML5 / CSS3 Transformations, animations, transitions, support des navigateurs
  5. 5. HTML5 #1 – HTML5 / CSS3 HTML5  HTML + CSS + JS Nouveau doctype Nouvelles balises Nouveaux attributs Suppression d’attributs et d’éléments obsolètes Nouvelles API • Graphics, 3D • Semantics (microdatas, microformats…) • Offline & Storage • Device access • Connectivity (Web sockets…) • Multimedia • Performance & intégration
  6. 6. CSS3 #1 – HTML5 / CSS3 Spécifications CSS3 également découpées en plusieurs modules. Améliorations diverses apportées aux précédentes versions. Beaucoup de nouvelles propriétés et possibilités ! • Nouveaux sélecteurs et sélecteurs plus précis • @media-queries • Webfonts • Gestion de l’opacité • Couleurs (luminance, saturation…) • Bordures (arrondies, images…) • Dégradés • Ombres • Flex box • Colonnes + transitions / transformations / animations
  7. 7. Les transitions #1 – HTML5 / CSS3 Entre 2 valeurs d’une propriété CSS, effectuer une transition douce lors du changement. http://dev.w3.org/csswg/css-transitions/ Déclenchement/application du changement : Evènement JavaScript ou pseudo-classes CSS (:hover, :active, :focus) Possibilité d’agir sur plusieurs composantes de transition : • Propriété CSS concernée • Durée • Timing/interpolation (ex. accélération, linéaire…) • Délai de déclenchement Attention : Pas applicable à n’importe quelle propriété CSS (couleurs, positions, dimensions) Démo #1
  8. 8. Les animations #1 – HTML5 / CSS3 Animer les pages Web ou des éléments de page sans Flash ni javascript http://www.w3.org/TR/css3-animations/ Animation : effet permettant un passage graduel d’un style à l’autre pour un élément Plusieurs propriétés peuvent être concernées @keyframes : Etats de l’animation, timing défini précisément Les différentes composantes de transition : • Nom de l’animation (@keyframes) • Durée • Timing/interpolation • Délai de déclenchement • Nombre d’itérations • Sens de l’animation • Etat Démo #2
  9. 9. Les transformations #1 – HTML5 / CSS3 Fonctions de manipulation graphique d’éléments HTML sur les axes X et Y http://www.w3.org/TR/css3-2d-transforms/ Ensemble de fonctions disponibles pour effectuer ces transformations simples : • Translation • Rotation • Changement d’échelle • Inclinaison Possibilité de combiner des transformations (Attention à l’ordre) Transformations complexes réalisables (matrices de transformations) Démo #3
  10. 10. Support des navigateurs #1 – HTML5 / CSS3 Plutôt bon, y-compris sur les navigateurs mobiles, mais toujours de mauvais élèves  Attention, problématiques matérielles ! Carte graphique, GPU (accélération matérielle…) A connaitre : HTML5please, CanIUse • http://caniuse.com/transforms3d • http://html5please.com/
  11. 11. Support des navigateurs #1 – HTML5 / CSS3 Beaucoup de bibliothèques existantes : • polyfills • fallbacks Ne jamais baser une fonctionnalité importante ou critique sur ces effets si on ne peut pas en fournir un comportement dégradé ! Les vendor prefixes parfois nécessaires pour les propriétés non supportées en standard (risques des différences de comportement) : • -webkit- • -moz- • -ie- • -o-
  12. 12. #2 - Les transformations 3D Scène 3D, perspective, propriétés CSS utilisées, effets simples
  13. 13. Les transformations sur l’axe Z #2 – Les transformations 3D Fonctions de manipulation graphique d’éléments HTML sur les axes X et Y et Z http://www.w3.org/TR/css3-3d-transforms/ Ensemble de fonctions/propriétés supplémentaires pour effectuer des transformations en utilisant l’axe Z de profondeur (Possibilité de créer des plan en 3D) : • perspective • Translation 3D • Changement d’échelle 3D • Rotation 3D Démo #4
  14. 14. Créer sa scène 3D #2 – Les transformations 3D 1. Créer un plan (= conteneur de scène, portant la perspective) 2. Créer un objet 3D (ex. cube) 3. Définir les composantes de l’objet (ex. faces du cube) 4. Appliquer les transformations nécessaires Démo #5
  15. 15. Remarques diverses #2 – Les transformations 3D Même pour les transformations 2D, utiliser ces fonctions 3D !  Accélération matérielle (GPU) meilleures perfs que moteur de rendu logiciel du navigateur Attention à l’ordre des transformations  RotateX + RotateY <> RotateY + RotateX Attribut preserve3D pas géré correctement par iE10  (imbrications d’éléments 3D) Backface-visibility à régler pour éviter les effets de scintillement LIMITES • Lourd à mettre en place sans librairie, très déclaratif… • Scènes et objets complexes difficiles à créer/maintenir • Pas de gestion de caméras/source de lumières
  16. 16. #3 - L’interactivité jQuery, évènements, interaction utilisateur, effets évolués/combinés
  17. 17. Utiliser Javascript #3 – L’interactivité Utiliser javascript pour gérer l’interaction entre la scène et l’utilisateur : • Clics (courts, longs, doubles…) • Actions tactiles (touch, tap, swipe…) • Mouvements de souris (over, enter, leave…) Utiliser également le matériel si possible : • Camera • GPS • Orientation Beaucoup de librairies jQuery existantes pour aider le développeur dans les tests de support, et dans la gestion évènementielle… On peut donc utiliser jQuery pour effectuer des transformations sur la scène, l’objet 3D ou les composantes d’un objet (Menus, effets IHM de présentation,…) Demo #6
  18. 18. #4 – Le projet R&D collaboratif W3D Mieux voir, ressentir et interagir avec la 3D dans un navigateur Web
  19. 19. Un projet collaboratif #4 – Le projet W3D Début du projet jan. 2011 Fin des travaux juin 2013 4 partenaires au sein du consortium W3D http://w3d.mba-multimedia.com/ BUT : Développer de nouveaux principes et outils pour créer des sites web en 3D relief (contenant et contenu)
  20. 20. Les axes de recherches #4 – Le projet W3D Vision 3D : Comment mieux voir le relief dans une page Web (sans matériel) ou donner l’illusion de relief via des effets de pseudo 3D Ressenti 3D : Comment mieux ressentir le relief par des effets pseudo-haptiques Interaction 3D : Comment mieux interagir avec du contenu et une interface en 3D Parallaxe, scrolling-parallax, motion-parallax, Curseurs 2D, Curseurs 3D, Elastic images, API de communication Unity/HTML5, Dynamic cursors, transparences, flous, ombres…
  21. 21. Exemples appliqués au Web (Vœux 2013 / Memory) #4 – Le projet W3D Utilisation combinée des fonctionnalités et effets CSS3D Utilisation et création de plugins jQuery Veille et tests sur les nouveautés CSS (ex. CSS Filter effects) Démos http://2013.mba-multimedia.com/ http://3dmemory.mba-multimedia.com/
  22. 22. Autres travaux #4 – Le projet W3D Travail sur l’intégration d’animations Unity dans des pages Web Création d’une API de communication HTML5<>Unity Création d’un prototype regroupant tous les effets utilisés, créés lors du projet (Config 3D) Démo
  23. 23. Techniques d’interaction / feedback #4 – Le projet W3D Travaux sur les curseurs 3D, curseurs dynamiques et portage sur le Web Mise en œuvre du concept d’images élastiques
  24. 24. #5 - Aller plus loin… WebGL, Canvas, Three.js, CSS Filters, ressources et liens utiles
  25. 25. Les autres possibilités #5 – Aller plus loin Beaucoup de possibilités, perspectives pour aller plus loin dans la 3D sur le Web • WebGL : http://www.chromeexperiments.com/webgl/ • CSS Filter effects : • Fonctions d’images (ex. images dynamiques créées à partir d’éléments HTML…) • CSS & SVG masks (ex. rognage selon une forme…) • Exclusions de formes • advanced filters (CSS Shaders, flous, ombres, grayscale…)
  26. 26. Questions / Réponses Quelques liens utiles pour se lancer : http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/ http://debray-jerome.developpez.com/articles/les-transformations-3d-en-css3/ http://desandro.github.io/3dtransforms/ http://fr.clever-age.com/veille/blog/introduction-aux-transformations-css.html http://www.webdesignertrends.com/2011/11/css-3-experiences-avec-3d-transform/ http://gafish.fr/nouveautes-css3/ http://slides.html5rocks.com MBA Multimedia – contact@mba-multimedia.fr

×