html5/css3d - expresso rennes atalante - 17 sept. 2013
DESCRIPTION
Présentation pour MBA Multimedia des technos HTML5 et CSS3D à la Cantine Numérique Rennaise dans le cadre des Expressos Rennes AtalanteTRANSCRIPT
HTML5 / CSS3Les transformations CSS 3D
Expresso Rennes Atalante - La Cantine Numérique Rennaise / 17 sept. 2013
Julien LE THUAUTIngénieur R&D - MBA Multimedia
HTML5, CSS3, W3C, 3D, WebGL, Jquery, PHP, Java, GITResponsive Design, UI/UX, Ergonomie des IHMWordpress, Bootstrap, Foundation
@JulienLeThuautjlethuaut
http://www.mba-multimedia.com/
Sommaire de la présentationSujets abordés
HTML5 / CSS3 Transformations, animations, transitions, support des navigateurs
Les transformations 3DScè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 W3DComment 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
#1 - HTML5 / CSS3Transformations, animations, transitions, support des navigateurs
HTML5#1 – HTML5 / CSS3
HTML5 HTML + CSS + JS
Nouveau doctypeNouvelles balisesNouveaux 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
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
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 quellepropriété CSS (couleurs, positions, dimensions)
Démo #1
Les animations#1 – HTML5 / CSS3
Animer les pages Web ou des éléments de page sans Flash ni javascripthttp://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
Les transformations#1 – HTML5 / CSS3
Fonctions de manipulation graphique d’éléments HTML sur les axes X et Yhttp://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
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/
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-
#2 - Les transformations 3DScène 3D, perspective, propriétés CSS utilisées, effets simples
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 Zhttp://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
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
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
#3 - L’interactivitéjQuery, évènements, interaction utilisateur, effets évolués/combinés
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
#4 – Le projet R&D collaboratif W3DMieux voir, ressentir et interagir avec la 3D dans un navigateur Web
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)
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…
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/
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
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
#5 - Aller plus loin…WebGL, Canvas, Three.js, CSS Filters, ressources et liens utiles
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…)
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 – [email protected]