Présentation pour MBA Multimedia des technos HTML5 et CSS3D à la Cantine Numérique Rennaise dans le cadre des Expressos Rennes Atalante

1. HTML5 / CSS3
Les transformations CSS 3D
Expresso Rennes Atalante - La Cantine Numérique Rennaise / 17 sept. 2013

2. Julien LE THUAUT
Ingénieur R&D - MBA Multimedia
HTML5, CSS3, W3C, 3D, WebGL, Jquery, PHP, Java,
GIT
Responsive Design, UI/UX, Ergonomie des IHM
Wordpress, Bootstrap, Foundation
@JulienLeThuaut
jlethuaut
http://www.mba-multimedia.com/

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. #1 - HTML5 / CSS3
Transformations, animations, transitions, support des navigateurs

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. 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. 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. 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. 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. 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. 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. #2 - Les transformations 3D
Scène 3D, perspective, propriétés CSS utilisées, effets simples

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. 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. 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. #3 - L’interactivité
jQuery, évènements, interaction utilisateur, effets évolués/combinés

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. #4 – Le projet R&D collaboratif W3D
Mieux voir, ressentir et interagir avec la 3D dans un navigateur Web

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. 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. 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. 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. 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. #5 - Aller plus loin…
WebGL, Canvas, Three.js, CSS Filters, ressources et liens utiles

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. 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