Formation html5 CSS3 offerte par ippon 2014

7 519 vues

Publié le

Participez à notre prochaine formation : http://www.ippon.fr/formation/html5-css3

Le couple HTML5/CSS3 est le standard du web tant attendu : interopérabilité accentuée, formulaires enrichis, esthétisme et animations des pages, médias évolués ou encore stockage de données en local. Tout est enfin disponible pour réaliser des applications clientes riches pour tous les types de périphériques depuis les ordinateurs jusqu'aux smartphones. Un panel complet des possibilités sera présenté par le biais de modules, chaque module ayant une partie théorique pour assimiler les concepts et des TPs associés pour les mettre en pratique. A l'issue de cette formation le stagiaire aura une vue exhaustive des enjeux et des nouvelles capacités de HTML5/CSS3, et sera autonome pour initier des applications Web desktop et mobiles.

Participez à notre prochaine formation : http://www.ippon.fr/formation/html5-css3

0 commentaire
10 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
7 519
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 176
Actions
Partages
0
Téléchargements
875
Commentaires
0
J’aime
10
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Formation html5 CSS3 offerte par ippon 2014

  1. 1. Formation HTML5 / CSS3
  2. 2. Ippon Technologies © 2014 Licence Cette formation vous est fournie sous licence Creative Commons AttributionNonCommercial- NoDerivatives 4.0 International (CC BY-NC-ND 4.0) Vous êtes libres de : ● Copier, distribuer et communiquer le matériel par tous moyens et sous tous formats Selon les conditions suivantes : ● Attribution : Vous devez créditer l'Oeuvre, intégrer un lien vers la licence et indiquer si des modifications ont été effectuées à l'Oeuvre. Vous devez indiquer ces informations par tous les moyens possibles mais vous ne pouvez pas suggérer que l'Offrant vous soutient ou soutient la façon dont vous avez utilisé son Oeuvre. ● Pas d’Utilisation Commerciale: Vous n'êtes pas autoriser à faire un usage commercial de cette Oeuvre, tout ou partie du matériel la composant. ● Pas de modifications: Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir du matériel composant l'Oeuvre originale, vous n'êtes pas autorisé à distribuer ou mettre à disposition l'Oeuvre modifiée. http://creativecommons.org/licenses/by-nc-nd/4.0/deed.fr
  3. 3. Ippon Technologies © 2014 Ippon Formation en bref Pourquoi Ippon Technologies publie ses supports de formation ? Car Ippon participe à la communauté Java et Web et soutien le modèle open-source Le support théorique représente 40% du temps de formation, l'intérêt est dans les Travaux Pratiques et l'expert Ippon qui assure le cours. Nos TP sont dispensés lors des sessions de formations que nous proposons.
  4. 4. Ippon Technologies © 2014 Pour nous contacter Pour nous contacter et participer à nos formations : - Technique : formation@ippon.fr - Commercial : nzago@ippon.fr Toutes les informations et les dates de formations sont sur notre site internet et notre blog : - http://www.ippon.fr/formation - http://blog.ippon.fr
  5. 5. Ippon Technologies © 2014 Sommaire ● HTML5 depuis HTML en passant par XHTML ● HTML5 nouveaux éléments et attributs ● Les formulaires “Web form” ● HTML5 multimédia et dessin ● HTML5 avec CSS3 ● CSS3 les sélecteurs ● CSS3 les transformations, transitions et animations ● CSS3 avec les préprocesseurs ● HTML5 Web API ● Librairie Modernizr
  6. 6. Ippon Technologies © 2014 HTML5 depuis HTML en passant par XHTML
  7. 7. Ippon Technologies © 2014 Sommaire 1. Évolutions du langage 2. Syntaxe et DOCTYPE 3. Prise en charge par les navigateurs 4. Sensibilisation au cas du mobile 5. HTML5 pour faire quoi ?
  8. 8. Ippon Technologies © 2014 1. Évolutions du langage Naissance de l’HTML ● HTML (Hyper Text Markup Language) invention de “Sir” Tim Berners-Lee en 1991, s’appuyant sur SGML (Standard Generalized Markup Language) ● HTML 1 n’a jamais existé ● HTML 2 : premières spécifications par IETF (Internet Engineering Task Force) ● Pour la normalisation IETF remplacée par W3C (World Wide Web Consortium) ● Plusieurs vagues de révisions puis spécifications HTML 4.01 en 1999 par W3C
  9. 9. Ippon Technologies © 2014 1. Évolutions du langage Naissance de l’XHTML ● XHTML 1.0 (X signifiant “eXtensible”) par W3C, aucun nouvel élément par rapport à HTML 4.01 mais beaucoup plus strict au niveau de la syntaxe s’ inspirant du XML (eXtensible Markup Language) ● XHTML 1.1, du pur XML qui ne pouvait pas être traité par un type MIME text/html. Les navigateurs alors du moment ne peuvent plus l’interpréter ! ● Spécifications XHTML 2 en cours, pour faire table rase, incompatible avec l’ existant du Web
  10. 10. Ippon Technologies © 2014 1. Évolutions du langage Le clash XHTML / HTML ● Rébellion au sein du W3C (théorie Vs pragmatisme), création d’un nouveau groupe de travail WHATWG (Web Hypertext Application Technology Working Group) ● W3C travaille sur la norme XHTML 2, tandis que WHATWG travaille sur une norme HTML5 ...
  11. 11. Ippon Technologies © 2014 1. Évolutions du langage Le compromis HTML5 ● La mayonnaise XHTML 2 ne prend pas, en 2006 W3C décide de travailler sur une nouvelle norme HTML 5, qui va s’appuyer sur HTML5 du WHATWG (qui eux même vont continuer leur travail) ! ● Fin 2009, tous sous la bannière HTML5 mais avec un processus différent WHATWG (“Commit-Then-Review”) et W3C (“Review-Then-Commit”) ● 17 décembre 2012 le W3C publie la “Release Candidate” HTML5
  12. 12. Ippon Technologies © 2014 2. Syntaxe et DOCTYPE Laxiste le HTML5 ? ● Balises en majuscules ou en minuscules ? ● Balise auto-fermante ou non ? ● Guillemets simples ou doubles ? ● Tout est permis, c’est à vous de décider ; soyez juste cohérent avec vous même
  13. 13. Ippon Technologies © 2014 2. Syntaxe et DOCTYPE Le “tampon” HTML5, ça n’existe pas ● Contrairement à XHTML 2, le mot d’ordre de HTML5 est de garder la compatibilité avec l’existant (HTML 4.01 et XHTML 1.0) ● Paradoxe HTML5 : la spécification doit être puissante et en même temps elle doit être compatible avec les existants (qui n’ont rien de carrés) ● Vous faîtes du HTML 4.01, du XHTML 1.0 et du HTML5 (sans le savoir)
  14. 14. Ippon Technologies © 2014 2. Syntaxe et DOCTYPE Quelle grammaire utilisons nous au juste ? ● Doctype HTML 4.01 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> ● Doctype XHTML 1.0 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> ● Doctype HTML5 <!DOCTYPE html>
  15. 15. Ippon Technologies © 2014 3. Prise en charge par les navigateurs Les navigateurs ... comme toujours ● La vérité, on s’en fiche des DOCTYPE. Ce sont les navigateurs qui supportent les fonctionnalités pas les DOCTYPE ● Si un élément ou un attribut de votre document HTML est devenu obsolète, ce n’ est pas (si) grave ; puisqu’il est censé être supporté par les navigateurs “modernes”. ● Les nouveautés HTML5 sont elles supportées ? caniuse.com votre nouvel meilleur ami ● Vous devez utiliser les possibilités du HTML5 sans jamais oublier votre périmètre de compatibilité navigateurs
  16. 16. Ippon Technologies © 2014 3. Prise en charge par les navigateurs “Vieux” navigateurs Vs navigateurs “modernes” ● Définitions assez floues, mais en général on désigne de “vieux” tout navigateur qui ne supporte pas HTML5, CSS3 ou ne dispose pas d’un moteur JavaScript performant ● Mais comme on l’a vu le “tampon” HTML5 n’existe pas, donc difficile à dire, c’est souvent une affaire de communication / marketing ; le cas IE9 est sujet à débat par exemple ● Il est préférable d’avoir une approche “Amélioration progressive” plutôt qu’une approche “Dégradation gracieuse” et on enrichira les fonctionnalités au cas par cas en fonction des possibilités du navigateur ou avec la mise en place de “polyfills”
  17. 17. Ippon Technologies © 2014 4. Sensibilisation au cas du mobile Et le Web mobile dans tout ça ? ● Explosion des terminaux mobiles (smartphones, tablettes) ● Fourchage des documents HTML Vs “Responsive Web Design” ● Explosion combinatoire des terminaux (et très hétérogènes) pouvant lire un document HTML ● En fait sensibilisation au cas de l’avenir du Web en général, le mobile étant juste la réalité du moment
  18. 18. Ippon Technologies © 2014 5. HTML5 pour faire quoi ? Le futur du Web ● Donner du sens à la structure et au contenu des documents, afin de mieux les indexer / référencer avec les nouveaux éléments et attributs ● Offrir des nouvelles possibilités sur les formulaires avec les “Web forms” ● Favoriser les médias dessin, audio et vidéo sans recourir à des plugins / solutions propriétaires ● Améliorer la présentation des documents avec CSS3 ● Gérer le mode du Web “offline” ● Favoriser les futures extensions possibles avec les Web API
  19. 19. Ippon Technologies © 2014 HTML5 nouveaux éléments et attributs
  20. 20. Ippon Technologies © 2014 Sommaire 1. Recomposition d’une structure de page HTML 2. Recomposition d’une hiérarchie de page HTML 3. Les nouveaux attributs data-* 4. Les éléments obsolètes ou réaménagés 5. Les autres nouveautés
  21. 21. Ippon Technologies © 2014 Recomposition d’une structure de page HTML La sémantique de structuration ● Éléments permettant de structurer un document HTML tout en permettant à celui-ci d’avoir un sens ● Nouveaux éléments : <section>, <article>, <nav>, <aside>, <header> et <footer> ● Ils se calquent sur les propriétés de <div> avec un affichage par bloc (excepté pour certains anciens navigateurs cf. caniuse)
  22. 22. Ippon Technologies © 2014 Recomposition d’une structure de page HTML Les éléments de structuration ● <section> : Déclare un conteneur mais avec une valeur sémantique : un regroupement thématique générique ● <article> : Déclare une section de contenu qui peut être indépendante du reste de la page ● <nav> : Déclare une section de navigation majeure ● <aside> : Déclare une section annexe qui est potentiellement liée au reste du contenu de la page ● <header> : Déclare une section d’entête / d’introduction ● <footer> : Déclare une section de pied de page
  23. 23. Ippon Technologies © 2014 Recomposition d’une structure de page HTML Quel est l’intérêt ? ● Pour les développeurs : lisibilité du code ● Mais surtout pour le SEO : indexation des pages facilitées, meilleur référencement ● /! Certaines sections ne sont pas uniques, par exemple on peut très bien insérer un <header> dans un <article>
  24. 24. Ippon Technologies © 2014 Recomposition d’une hiérarchie de page HTML Rappels sur les éléments h1 ... h6 ● Déclare un titre selon des niveaux (de 1 à 6) ● Valeur sémantique de titre, pas juste pour la mise en forme ● Il faut éviter de sauter des niveaux
  25. 25. Ippon Technologies © 2014 Recomposition d’une hiérarchie de page HTML Ce qui change ● On peut avoir des sous niveaux à l’intérieur des sections ● Élément <hgroup> déclare une entête de section au même titre que <header>, mais ne devant regrouper que des titres. Il sert à masquer les titres de niveau inférieur dans l’algorithme d’”outline”
  26. 26. Ippon Technologies © 2014 Recomposition d’une hiérarchie de page HTML Quel est l’intérêt ? ● Pour les développeurs : lisibilité du code ● Mais surtout pour le SEO : indexation des pages facilitées, meilleur référencement
  27. 27. Ippon Technologies © 2014 Les nouveaux attributs data-* Comment étendre / enrichir HTML5 ● Nouvelle nomenclature des attributs data-* ● Ajout d’une metadonnée sous la forme d’une chaîne de caractères ● Metadonnée non visible dans le navigateur
  28. 28. Ippon Technologies © 2014 Les nouveaux attributs data-* Quel est l’intérêt ? ● Solution élégante car la méta donnée est associée à l’élément en question tout en conservant un code valide ● Solution propre car on ne détourne pas l’utilisation d’un autre attribut ● Solution souple car son formalisme n’est pas rigide (comme une DTD XHTML) : un caractère et pas de majuscules ● Solution puissante car on peut en déclarer plusieurs par éléments
  29. 29. Ippon Technologies © 2014 Les éléments obsolètes ou réaménagés Les éléments de présentation ● Les éléments <font>, <big>, <center>, <strike> ne doivent plus être utilisés ; les propriétés CSS doivent jouer leur rôle ● L’élément <small> représente désormais “small print” ; à utiliser pour les mentions spécifiques ou légales ● L’élément <b> représente désormais une mise en valeur différente, mieux vaut préférer <strong> si nécessité de donner une valeur sémantique d’importance ● L’élément <i> représente désormais un changement de ton
  30. 30. Ippon Technologies © 2014 Les éléments obsolètes ou réaménagés Les éléments de structure ● Les éléments <frame>, <frameset>, <noframes> ne doivent plus être utilisés
  31. 31. Ippon Technologies © 2014 Les éléments obsolètes ou réaménagés Les éléments sémantiques ● L'élément <acronym> perturbait les rédacteurs ; celui-ci se lit comme un mot contrairement à une abréviation <abbr> désormais seul ce dernier doit être utilisé
  32. 32. Ippon Technologies © 2014 Les autres nouveautés Sémantique toujours ● Ajout de l’attribut <mark> qui déclare un surlignage sur un texte pour attirer l’ attention ● Ajout de l’élément <time> qui déclare une heure ou une date. Possède les attributs datetime (standardiser l’affichage), pubdate (permet de lier la date à l’ élément article qui le contient ou au document entier s’il n’y en a pas)
  33. 33. Ippon Technologies © 2014 Les autres nouveautés Cas pratiques ● Ajouts des attributs media, type et download dans l’élément <a> ● Ajout de l’élément <wbr> (word break) qui déclare la possibilité de couper un mot si celui s’avère trop long (en cas de coupure, il n’y a pas de césure ou de trait d’union)
  34. 34. Ippon Technologies © 2014 Les autres nouveautés Chargement asynchrone des scripts ● L’élément <script> possède un nouvel attribut async qui lui permet d’exécuter de manière asynchrone les scripts (à utiliser uniquement si l’attribut src est renseigné). Cela signifie que le navigateur exécute le script dès qu’il est disponible, donc possiblement avant l’évènement load ● Les scripts peuvent être interprétés dans le désordre et non par rapport à l’ordre dans lequel ils apparaissent dans le code de la page
  35. 35. Ippon Technologies © 2014 Les autres nouveautés Le reste ● Les “Web form” ● Les éléments multimédia ● Et tant d’autres, consulter http://www.w3.org/TR/html5-diff/
  36. 36. Ippon Technologies © 2014 Les formulaires “Web form”
  37. 37. Ippon Technologies © 2014 Sommaire ● Nouveaux types d’input ● Nouveaux attributs ● Nouveaux éléments de formulaire ● Un peu de CSS ● Upload multiple de fichiers, exemple du “drag and drop”
  38. 38. Ippon Technologies © 2014 Nouveaux types d’input ● Pour les expressions récurrentes ● Pour les dates ● Autres
  39. 39. Ippon Technologies © 2014 Pour les expressions récurrentes ● L’attribut tel, pour saisir un numéro de téléphone ● L’attribut url, pour saisir une URL ● L’attribut email, pour saisir un email ● L’attribut number, pour saisir les valeurs numériques <input type="url" name="website"/>
  40. 40. Ippon Technologies © 2014 Pour les dates ● L’attribut date, pour saisir une date (calendrier grégorien) ● L’attribut time, pour saisir une heure précise ● L’attribut datetime, pour saisir une date et une heure sous un fuseau horaire précisé ● L’attribut datetime-local, comme datetime sans préciser le fuseau horaire (celui de l’utilisateur par défaut) ● L’attribut month, pour saisir un mois dans une année précise ● L’attribut week, pour saisir une semaine dans une année précise
  41. 41. Ippon Technologies © 2014 Mais encore ● L’attribut search, pour saisir comme un champ de type text mais avec une apparence différente, laissée libre aux navigateurs pour l’implémenter ● L’attribut range, pour saisir les valeurs numériques mais de manière imprécise, généralement utilisé pour simplifier l’IHM aux utilisateurs (volume sonore d’une vidéo par exemple) ● L’attribut color, pour saisir la sélection d’une couleur (hexadécimal uniquement)
  42. 42. Ippon Technologies © 2014 ● L’attribut placeholder pour afficher un texte indicatif sur la saisie à effectuer ● L’attribut autofocus pour donner le focus directement sur un champ au chargement du document HTML ● L’attribut autocomplete pour indiquer si le navigateur peut agir sur l'auto- complétion du champ ● L’attribut required pour indiquer que la saisie est obligatoire ● L’attribut multiple pour indiquer que plusieurs saisies sont possibles dans un même champ (sélection de plusieurs fichiers pour un upload, ou séparation par des virgules pour un champ texte par exemple) Nouveaux attributs
  43. 43. Ippon Technologies © 2014 ● L’élément output pour afficher un résultat suite à un calcul (utilisé pour la sémantique et la mise en page) ● L’élément keygen pour générer une paire de clés cryptées ● L’élément progress pour représenter une barre de progression ● L’élément meter pour représenter un état d’avancement autre que par le biais numérique (utilisé pour la sécurité d’un mot de passe par exemple) Nouveaux éléments de formulaire
  44. 44. Ippon Technologies © 2014 ● L’utilisation des types de champ input peut permettre avec l’aide de CSS de faciliter la compréhension d’un formulaire ● Il est possible d’effectuer des changements de style CSS en fonction de l’état d’ un champ input avec le sélecteur de pseudo classes “d’état d’élément d’ interface” :invalid Un peu de CSS
  45. 45. Ippon Technologies © 2014 ● Ne fait pas partie du scope initial Web Forms 2.0, mais intéressant d’associer ces fonctionnalités aux formulaires ● Les attributs draggable et dropzone combinés pour la fonctionnalité de “drag and drop” ● L’attribut draggable déclare que votre élément peut se déplacer sur votre page ● L’attribut dropzone déclare que votre élément est un conteneur potentiel Les attributs draggable et dropzone
  46. 46. Ippon Technologies © 2014 ● L’événement dragstart indique que l’élément draggable débute son déplacement ● L’événement drag indique que l’élément draggable est en cours de déplacement ● L’événement dragend indique que l’élément draggable finit son déplacement Les événements associés (1)
  47. 47. Ippon Technologies © 2014 ● L’événement dragenter indique qu’un élément draggable entre dans le périmètre d’un élément dropzone ● L’événement dragover indique qu’un élément draggable survole le périmètre d’un élément dropzone ● L’événement dragleave indique qu’un élément draggable quitte le périmètre d’un élément dropzone ● L’événement drop indique que l’élément dropzone reçoit un élément draggable Les événements associés (2)
  48. 48. Ippon Technologies © 2014 ● L’événement drag est déclenché continuellement lorsque l’élément draggable est déplacé (même sans mouvement de curseur) ● L’événement dragover est lui aussi déclenché continuellement... ce comportement pose problème car il empêche l’événement drop d’être perçu, il faut donc le désactiver ● Le comportement des événements peut être variable selon les navigateurs Les notions à connaître sur les événements
  49. 49. Ippon Technologies © 2014 ● Pour porter des données de l’élement draggable vers l’élément dropzone ● Affectation des données au moment de l’événement dragstart avec la métode setData() ● Récupération des données au de l’événement drop avec la méthode getData() ● /! Impossible de récupérer les données du DataTransfer pour les dragenter, dragover, etc ; il faut utiliser le local storage pour ces cas là L’interface DataTransfer
  50. 50. Ippon Technologies © 2014 HTML5 multimédia et dessin
  51. 51. Ippon Technologies © 2014 Sommaire ● Les éléments audio et vidéo ● Les types de formats et codecs ● Canvas ● SVG ● Canvas VS SVG
  52. 52. Ippon Technologies © 2014 Les éléments audio et vidéo Petit rappel ● Anciennement, des plugins propriétaires dans les navigateurs pour publier des vidéos, de l’audio et des jeux ○ Flash ○ Silverlight ● Technologies puissantes mais non ouvertes et non standardisées par la communauté, donc non pérennes ● HTML5 pour faire la même chose mais de façon native dans les navigateurs ○ Élément audio ○ Élément video ○ Canvas ○ SVG
  53. 53. Ippon Technologies © 2014 Audio & vidéo : les éléments ● Le nouvel élément audio permet au navigateur de lire nativement un son audio, c’est simple d’utilisation <audio src=”audio.mp3”></audio> ● Le nouvel élément video permet au navigateur de lire nativement une vidéo, c’ est également simple d’utilisation <video src=”video.ogv”></video>
  54. 54. Ippon Technologies © 2014 Audio & vidéo : les attributs ● Les 2 éléments possèdent quelques attributs booléens ○ autoplay : pour lancer automatiquement la lecture ○ loop : pour avoir une lecture en boucle ○ controls : pour afficher des contrôles natifs au navigateurs ● Un attribut booléen ne prend pas de valeur Exemple : autoplay / autoplay=”true” ● Les 2 éléments possèdent un attribut preload pour précharger le media, attribut qui peut avoir plusieurs valeurs ○ auto : charge la totalité du media ○ meta : charge uniquement les méta-informations ○ none : pour ne pas précharger
  55. 55. Ippon Technologies © 2014 Vidéo : attribut spécifique ● L’élément video possède un attribut spécifique poster afin d’afficher une image de substitution avant la lecture d’une vidéo <video src=”video.ogv” poster=”poster.jpg”></video>
  56. 56. Ippon Technologies © 2014 Audio et vidéo, des Media Element ● Les éléments audio et video implémente l’interface HTML Media Element ce qui vous permet d’accéder à des propriétés (modification ou lecture seule) ou de gérer certains événements
  57. 57. Ippon Technologies © 2014 Media Element : les propriétés ● Propriétés en modification ○ currentTime : position courante de lecture ○ paused : booléen pour indiquer si la lecture est en pause ○ volume : volume audio (0 à 1.0) ○ muted : booléen pour indiquer si mode silencieux ○ etc. ● Propriétés en lecture seule ○ duration : durée totale ○ ended : booléen pour indiquer si la lecture est terminée ○ networkState : valeurs pour indiquer l’accès au média ○ readyState : valeurs pour indiquer l’état du média ○ etc. ● Les valeurs des propriétés en temps sont en secondes
  58. 58. Ippon Technologies © 2014 Media Element : les événements ● Les événements permettent d'interagir avec le lecteur ○ play() : lance la lecture ○ pause() : met en pause la lecture ○ load() : réinitialise l’élément et l’algorithme de sélection de ressource ○ canPlayType() : détecte les capacités de lecture du navigateur
  59. 59. Ippon Technologies © 2014 Les types de formats et codecs Une simplicité relative ● Les formats audio et vidéo sont nombreux et les navigateurs n’ont pas toutes les mêmes capacités ● Pour palier les incertitudes de compatibilité il est possible de préciser plusieurs fichiers source avec le nouvel élément source en précisant le type MIME <audio> <source src=”audio.mp3” type=”audio/mp3”> <source src=”audio.aac” type=”audio/mp4”> Pas de fichier audio disponible :( </audio>
  60. 60. Ippon Technologies © 2014 Cas plus complexes ● Il est également possible de préciser les codecs <source src=”video.ogv” type=”audio/ogv; codecs=theora, vorbis”> ● Il est également possible de différencier avec l’attribut media <source src=”video.ogv” type=”audio/3gpp” media=”handled”> ● Si le navigateur ne supporte rien il est toujours possible de le détecter via canPlayType() et de faire appel aux anciennes technologies propriétaires
  61. 61. Ippon Technologies © 2014 L’élément Canvas ● Le nouvel élément canvas introduit avec HTML5 permet de créer des dessins / images de manière dynamique ● Il convient de spécifier ses dimensions en le déclarant ● Le contenu qui est déclaré dans l’élément ne sera visible que par les navigateurs ne supportant pas l’élément <canvas id =”cnvs” width=”400” height =”300”> Votre navigateur ne supporte pas canvas :( </canvas> ● Il existe plusieurs polyfills pour paliers quelques manques pour certains navigateurs
  62. 62. Ippon Technologies © 2014 L’utilisation canvas ● Un élément canvas s’utilise via son API, on y accède en JavaScript en récupérant un contexte var canvas = document.getElementById('cnvs'); var ctx = canvas.getContext('2d');
  63. 63. Ippon Technologies © 2014 L’utilisation canvas ● Avec le contexte on peut alors accéder aux propriétés fondamentales ○ fillStyle : définit le style de remplissage ○ lineWidth : définit l’épaisseur du trait ○ etc. ● Et aux fonctions fondamentales ○ fillRect() : dessine un rectangle plein ○ lineTo() : dessine une ligne ○ drawImage() : dessine une image ○ etc. ctx.fillStyle = 'blue'; ctx.lineWidth = 5; ctx.fillRect(10, 10, 380, 200);
  64. 64. Ippon Technologies © 2014 Les options du “crayon” ● Couleurs prédéfinies , spécifiques (hexadécimal ou RGBA) ○ ctx.fillStyle = 'yellow'; ○ ctx.fillStyle = '#FFFF00' // aka yellow; ○ ctx.strokeStyle = 'rgba(0, 0, 200, 0.5)'; ● 1 type de remplissage “fill” (plein) ○ ctx.fillRect(90, 210, 180, 120); ● 1 type de remplissage “stroke” (contours) ○ ctx.strokeRect(90, 210, 180, 120); ● Épaisseur du trait ○ ctx.lineWidth = 40;
  65. 65. Ippon Technologies © 2014 ● Créer un dégradé linéaire avec la fonction createLinearGradient(xA, yA, xB, yB) avec A point de départ et B point d’arrivée var gradient = ctx.createLinearGradient(100, 200, 400, 300); gradient.addColorStop(0, 'green'); gradient.addColorStop(0.5, 'yellow'); gradient.addColorStop(1, 'red'); ctx.fillStyle = gradient; ctx.fillRect(100, 200, 300, 100); Le dégradé linéaire
  66. 66. Ippon Technologies © 2014 ● Créer un dégradé radial avec la fonction createRadialGradient(xA, yA, rA, xB, yB, rB) avec r la longueur du rayon du point var gradient= ctx.createRadialGradient (200, 250, 50, 200, 250, 100); gradient.addColorStop(0, 'green'); gradient.addColorStop(0.5, 'yellow'); gradient.addColorStop(1, 'red'); ctx.fillStyle = gradient; ctx.fillRect(100, 200, 300, 100); Le dégradé radial
  67. 67. Ippon Technologies © 2014 ● La forme du crayon au extrémités d’un tracé avec la propriété lineCap qui peut prendre les valeurs butt (par défaut), round ou square ● La forme du crayon aux jointures d’un tracé avec la propriété lineJoin qui peut prendre les valeurs miter (par défaut), round ou bevel Les options avancées du “crayon”
  68. 68. Ippon Technologies © 2014 ● Un tracé correspond à un chemin, on explicite le début de l’enregistrement du chemin avec la fonction beginPath() ● Un tracé peut être terminé avec la fonction closePath() ● Les méthodes moveTo() et lineTo() permettent de définir le tracé ctx.beginPath(); ctx.moveTo(100, 200); ctx.lineTo(200, 300); ctx.lineTo(100, 300); // OPTIONNEL ctx.closePath(); ctx.stroke(); Les tracés
  69. 69. Ippon Technologies © 2014 Les tracés complexes ● Les fonctionnalités rectangulaires sans “Path” ○ fillRect(x, y, width, height) : remplit un rectangle ○ strokeRect(x, y, width, height) : entoure un rectangle ○ clearRect(x, y, width, height) : efface un rectangle ● Les fonctionnalités rectangulaires avec “Path” ctx.beginPath(); ctx.rect(50, 50, 100, 50); ctx.stroke(); // marche avec fill() aussi ● Les fonctionnalités pour tracer des arcs ○ arc(...) et arcTo(...) ctx.arc(300, 70, 35, 0, Math.PI*2, true); ● Les fonctionnalités “vectorielles” ○ bezierCurveTo(...) ○ quadraticCurveTo(...)
  70. 70. Ippon Technologies © 2014 Les transformations ● Les transformations s’appliquent sur le contexte dans son ensemble mais n’ affecteront que les futures actions sur le canvas ● Réduction ou agrandissement ○ scale (x, y) : x et y coefficients appliqués horizontalement et verticalement ● Rotation ○ rotate (angle) ● Translation ○ translate (x, y) : translation de x et y ● Transformation matricielle ○ transform(...) et setTransform(...)
  71. 71. Ippon Technologies © 2014 La mémoire du contexte ● Il est assez fréquent de modifier le contexte pour diverses raisons, il est possible d’enregistrer l’état d’un contexte ○ save() : pour mémoriser un état de contexte ○ restore() : pour récupérer un état de contexte ● Il est possible de mémoriser plusieurs états, la mémorisation fonctionnant comme une pile ctx.fillStyle = 'white'; ctx.save(); ctx.fillStyle = 'red'; ctx.save(); ctx.fillStyle = 'blue'; ctx.fillRect(...); // blue ctx.restore(); ctx.restore(); ctx.fillRect(...); // white // red not available ... :(
  72. 72. Ippon Technologies © 2014 Les images ● Possibilité d’importer des images dans un canvas ○ drawImage(img, x, y) : importer une image avec ses dimensions ○ drawImage(img, x, y, width, height) : importer une image en la redimensionnant ○ drawImage(img, imgx, imgy, imgwidth, imgheight, cnvsx, cnvsy, cnvswidth, cnvsheight) : importer une zone de l’image en la redimensionnant ; utilisée pour les sprites ● Il est obligatoire de charger dynamiquement le contenu à partir de l’objet Image de JavaScript var imageLoaded = new Image(); imageLoaded.onload = function() { ctx.drawImage(imageLoaded, 100, 300, 200, 200); } imageLoaded.src = 'ippon_400x400.png';
  73. 73. Ippon Technologies © 2014 Les patterns d’images ● Possibilité de créer un motif à partir d’une image avec la fonction createPattern(img, option) avec les options repeat, repeat-x, repeat-y, no-repeat var pattern = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pattern;
  74. 74. Ippon Technologies © 2014 ● Possibilité de créer, lire, modifier et injecter des pixels d’une image ○ createImageData(width, height) : pour créer une image ○ getImageData(x, y, width, height) : récupérer une image d’une certaine taille à partir d’un point ○ putImageData(imgData, x, y) : injecter une image ○ La propriété data permet d’accéder aux tableaux de valeur des pixels selon le formalisme RVBA Les images pixel par pixel
  75. 75. Ippon Technologies © 2014 ● Possibilité d’écrire du texte ○ fillText(txt, x, y, maxw) : écrit un texte avec maxw pour largeur maximale (optionnel) ○ strokeText(txt, x, y, maxw) : entoure un texte avec maxw pour largeur maximale (optionnel) ● Mesurer la taille d’un texte ○ measureText(txt) : détermine l’espace nécessaire pour un texte ; ctx. measureText(txt).width; ● Propriétés du texte ○ font : police ; ctx.font = '20pt Georgia'; ○ textAlign : alignement horizontal, options : start (défaut), end, left, center, right ○ textBaseline : alignement vertical, options : alphabetic (défaut), top, hanging, middle, ideographic, bottom Le texte
  76. 76. Ippon Technologies © 2014 Les effets ● Propriétés d’ombrage sur le contexte ○ shadowBlur : valeur du flou de l’ombrage ○ shadowColor : couleur de l’ombrage ● Propriété de transparence sur le contexte ○ globalAlpha : opacité du contexte ● Propriété de compositions sur le contexte ○ globalCompositionOperation : types de composition, options : source-over (défaut), source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, darker, copy, xor ● Fonction de masque sur le contexte ○ clip() : mémorise le chemin actuel pour se servir de masque ○ Possibilité de fusionner plusieurs masques
  77. 77. Ippon Technologies © 2014 ● Le canvas peut écouter les événements de la souris ○ Fonctions classiques onmousedown, onmousemove, onmouseup cns.onmouseup = function(e) { ctx.strokeStyle = 'black'; ctx.fillRect(e.offsetX, e.offsetY, 4, 4); } ● Le body peut écouter les événements du clavier et on interagit ensuite avec le canvas ○ Fonctions classiques onkeypress, onkeyup, onkeydown et propriété keyCode de l’événement document.body.onkeypress = function(e) { ctx.strokeStyle = 'black'; if (String.fromCharCode(e.keyCode) === 'a') ctx.fillRect(e.offsetX, e.offsetY, 4, 4); } Les événements souris et claviers
  78. 78. Ippon Technologies © 2014 Animation du canvas ● Créer des animations complexes se définit via la boucle infinie draw > clear > draw > clear > draw > ... ● Utilisation “basique” avec la fonction setInterval() pour itérer à intervalle de temps régulier ● Utilisation “avancée” avec requestAnimationFrame() pour moins gaspiller les temps morts entre les intervalles et ainsi y gagner en performance
  79. 79. Ippon Technologies © 2014 Canvas from scratch ? ● Le canvas possède des propriétés et des fonctionnalités basiques, mais qui combinées entre elles permettent de faire énormément de choses ● Cela demande de coder énormément de choses également ● Il existe beaucoup de librairies pour se simplifier la vie : ○ KineticJS : Éprouvée et polyvalente ○ Paper.js : Du vectoriel dans le canvas ○ Processing.js : Très simple d’accès car s’appuyant sur le langage Processing (destiné aux non développeurs) ○ three.js : Pour faire de la 3D avec de la 2D (du moins sans WebGL si l’on souhaite) ● Le canvas permet la connexion avec WebGL (qui se base sur le standard 3D OpenGL), loin d’être amplement supporté étant donné la compatibilité tardive
  80. 80. Ippon Technologies © 2014 L’élément SVG ● Format d’images vectorielles, contrairement aux images traditionnelles qui sont réalisées avec des pixels ● L’élément svg permet au navigateur de déclarer une image vectorielle <svg> <circle cx="200" cy="100" r="100"></circle> </svg> ● Une image vectorielle ça peut aller loin ...
  81. 81. Ippon Technologies © 2014 Décrire un élément SVG ● Le contenu d’un élément SVG est décrit en XML, avec divers éléments ○ circle : pour créer un cercle ○ rect : pour créer un rectangle ○ line : pour créer une ligne ○ etc ; cf. https://developer.mozilla.org/fr/docs/SVG/Element ● La description d’une image vectorielle peut s’avérer vite “verbeuse” ● Un élément SVG est généralement contenu dans un fichier (zippé) plutôt que dans les sources directement ● Une image vectorielle est généralement créée avec des logiciels adaptés (Inkscape, Illustrator, Sketch, GIMP, etc.)
  82. 82. Ippon Technologies © 2014 Pourquoi un élément SVG ? ● Le navigateur interprète “à chaud” les formes vectorielles, l’image s’affiche alors dans les meilleures conditions (dimensions, résolutions) ● Il est également possible de lire ou modifier le contenu, et donc se le ré- approprier facilement ○ Appliquer un style CSS ○ Apporter du dynamisme et des interactions via JavaScript ○ Apporter des filtres et des effets
  83. 83. Ippon Technologies © 2014 SVG from scratch ? ● Idem pas la peine de repartir de zéro ● Il existe beaucoup de librairies pour se simplifier : ○ D3.js : Top pour la “data-visualization” ○ Raphaël : Librairie polyvalente, qui simplifie l’utilisation des images vectorielles ○ Snap.svg : Le successeur de Raphaël
  84. 84. Ippon Technologies © 2014 Canvas VS SVG : comment choisir ? ● En fonction des images souhaitées ● En fonction des compatibilités navigateurs ○ Attention SVG : > IE8 & > Android 2.3 ● En fonction de la scalabilité des images ● En fonction des interactions / animations
  85. 85. Ippon Technologies © 2014 HTML5 avec CSS3
  86. 86. Ippon Technologies © 2014 Sommaire ● De CSS2 à CSS3 ● Les implémentations selon les navigateurs ● Gestion media avec les media queries ● Propriétés de texte ● Les décorations ● Les modes de positionnement
  87. 87. Ippon Technologies © 2014 De CSS2 à CSS3 ● 1997 : Début du travail sur les spécifications du CSS2 ● 1999 : Début du travail sur les spécifications du … CSS3 ● CSS2 introduit de très nombreuses propriétés, notamment de positionnement ● CSS3 propose une approche “modulaire” dans la façon du travail : spécifications divisées en modules, par ex le module “Animations”, le module “Bordures”, etc.
  88. 88. Ippon Technologies © 2014 Les implémentations selon les navigateurs Les préfixes propriétaires ● CSS3 est toujours en cours de rédaction : implémentation progressive dans les navigateurs ● Pour commencer à implémenter les nouvelles propriétés sans attendre la spécification finale, les moteurs de rendu utilisent des préfixes propriétaires ● Un moteur de rendu pouvant être utilisé par plusieurs navigateurs ● En fait on devrait dire les implémentations selon les moteurs de rendu
  89. 89. Ippon Technologies © 2014 ● -webkit- pour Webkit (moteur de rendu), utilisé par Safari mais aussi Chrome, Android, etc. ● -moz- pour Mozilla, moteur de rendu Gecko utilisé par Firefox, Thunderbird, etc. ● -o- pour Opera, moteur de rendu Presto utilisé par Opera, Nintendo DS Browser, etc. (anciennement vrai les nouvelles versions utilisent -webkit-) ● -ms- pour Microsoft, moteur de rendu Trident, utilisé par Internet Explorer Les préfixes à connaître
  90. 90. Ippon Technologies © 2014 ● Les préfixes c’est pas l’extase, mais ça sera quand même toujours plus propre que les hacks CSS utilisés dans le passé ● Dans la pratique on utilise tous les préfixes propriétaires ● On ajoute toujours la propriété réelle en plus des propriétaires ; lorsque la propriété passe en Release Candidate, les navigateurs remplacent leurs propriétés respectives par la vraie propriété section .trainings { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } Les préfixes, une fausse bonne idée ?
  91. 91. Ippon Technologies © 2014 CSS2 et les media ● Gestion “basique” de CSS2 pour les différents medias ● Un media c’est un écran, un support papier (pour l’impression), une plage braille, une TV, etc. ● On peut déclarer une feuille de style par media souhaité, ou bien ajouter la règle @media dans une feuille CSS pour ajouter un style propre à un media Gestion media avec les media queries
  92. 92. Ippon Technologies © 2014 ● Le problème, il n’y a pas de gestion fine pour les différents supports au sein d’un même media, les écrans par exemple ● Désormais, avec tous les terminaux possédant un écran (smartphone, tablette, PC, TV, etc.), on a des écrans allant de 2.5” à 27” et plus… ● On ne peut plus proposer le même rendu, soit on fourche notre rendu, soit celui- ci doit s’adapter (Responsive Web Design) L’avènement des nouveaux terminaux
  93. 93. Ippon Technologies © 2014 ● Le Responsive Web Design est une approche qui permet à votre rendu de s’ adapter en fonction des capacités du media sur lequel vous voulez l’afficher ● Cela peut être sur les capacités de votre écran mais aussi sur celles de votre réseau par exemple ● CSS3 peut s’approprier certaines capacités avec les media queries, mais pas toutes (pas le réseau par exemple) Responsive Web Design ?
  94. 94. Ippon Technologies © 2014 ● Distinction plus fine des capacités des medias ● Les distinctions : color, color-index, aspect-ratio, ratio, device- aspect-ratio, device-height, device-width, grid, height, monochrome, orientation, resolution, scan, width ● On peut ajouter les préfixes min- et max- lorsque les valeurs des capacités sont numériques ● On peut combiner les opérateurs logiques and, only et not Les media queries
  95. 95. Ippon Technologies © 2014 ● La propriété box-sizing délimite la taille d’une boîte ● La taille peut être définie par rapport au contenu via la propriété content-box (valeur par défaut) ● La taille peut être définie par rapport à sa marge intérieure via la propriété padding-box ● La taille peut être définie par rapport à sa marge intérieure et sa bordure via la propriété border-box ● Cette propriété s’avère très utile lorsque l’on veut respecter une largeur en positionnant plusieurs éléments côte à côte sans se soucier des marges intérieures et des bordures Propriété box-sizing
  96. 96. Ippon Technologies © 2014 Propriétés de texte Un peu d’originalité ● CSS introduit la possibilité de définir ses propres polices à partir d’un fichier de polices ● Pour déclarer la police, il faut utiliser la règle @font-face ● Pour utiliser cette police, il suffit ensuite de la référencer via la propriété “font- family”, tout comme les font-family “classiques”
  97. 97. Ippon Technologies © 2014 Propriétés de texte Faites de l’ombre à votre texte ● On peut maintenant ajouter très simplement une ombre à un texte avec la propriété text-shadow
  98. 98. Ippon Technologies © 2014 Propriétés de texte Ne pas dépasser ● CSS3 introduit la possibilité de “casser” les mots pour qu’ils soient affichés sur plusieurs lignes plutôt que de sortir de l’élément parent : word-wrap: break-word; ● On peut également gérer les “cassures” de manière plus globale avec la propriété “word-break”, qui permet par exemple de couper n’importe quel mot au milieu dès qu’il arrive en fin de div : word-break: break-all; ● Ou à l’inverse, pour être sûr qu’aucun ne soit coupé : word-break: keep-all; ● Une autre propriété permet de gérer les débordements pour les remplacer, par exemple, par “...” : text-overflow: ellipsis;
  99. 99. Ippon Technologies © 2014 Propriétés de texte Comme dans les journaux ● La propriété column-count permet désormais de diviser un élément en plusieurs colonnes, à la façon d’un journal ● L’avantage est la répartition fluide des textes entre les différentes colonnes ● On peut aérer les colonnes avec la propriété column-gap ● On peut séparer les colonnes par des indicateurs visuels (ligne par exemple) avec la propriété column-rule
  100. 100. Ippon Technologies © 2014 Les décorations Simplifiez-vous la vie ! ● Plus besoin de composer avec de multiples images pour créer des ombres, des dégradés, des coins arrondis ou des arrière-plans multiples ● En combinant plusieurs effets on peut obtenir des choses dignes de “Photoshop” ● Le faire en CSS plutôt que de passer par des images améliore le chargement de la page et assure une meilleure maintenabilité ● Faire attention aux compatibilités navigateurs...
  101. 101. Ippon Technologies © 2014 Les décorations Les ombres ● La propriété box-shadow permet de créer une ombre sur un bloc box-shadow: h-pos v-pos (blur) (spread) (color) (inset); ○ Décalage horizontal et/ou vertical de l’ombre ○ Dureté de l’ombre ○ Taille de l’ombre ○ Couleur de l’ombre ○ Ombrage intérieur ou extérieur section .note { -moz-box-shadow: -2px 2px 4px #c0c0c0; -webkit-box-shadow: -2px 2px 4px #c0c0c0; box-shadow: -2px 2px 4px #c0c0c0; }
  102. 102. Ippon Technologies © 2014 Les décorations Les arrondis ● La propriété border-radius permet de créer des bords arrondis sur un bloc ● A tel point que l’on peut transformer un carré en un rond !
  103. 103. Ippon Technologies © 2014 Les décorations Les dégradés (1) ● Les fonctions linear-gradient et radial-gradient créent des images qui représentent des dégradés ● Ces images sont sans dimensions intrinsèques, cela signifie qu’elles s’adaptent aux éléments auxquelles elles sont appliquées ● Les dégradés peuvent être utilisés partout où une image peut être déclarée: background, background-image, border-image, list-style-image ● La fonction linear-gradient est utilisée pour réaliser un dégradé linéaire ● La fonction radial-gradient est utilisée pour réaliser un dégradé radial
  104. 104. Ippon Technologies © 2014 Les décorations Les dégradés (2) ● Dans un dégradé, possibilité d’ajouter X couleurs, avec chacune une “position” et une opacité : très puissant mais très vite complexe à lire également ● Syntaxes hétérogènes selon les navigateurs ● Favoriser les outils de génération tous prêts, par exemple : http://www.colorzilla. com/gradient-editor/
  105. 105. Ippon Technologies © 2014 Les décorations Les arrières plans multiples ● Possibilité d’appliquer plusieurs images d’arrière-plan à un même élément en déclarant X images pour un background ● On peut déclarer les propriétés background-size, background-position, background-repeat, background-origin de manière distincte pour chaque image composant le background, ou de manière commune ● A utiliser à bon escient puisque les “shadow” et les “border” permettent de mettre en valeur certains arrières plans ● Cela permet le “défilement parallaxe”, technique permettant de créer une illusion de profondeur en faisant défiler les images de l’arrière plan plus lentement que les images du premier plan
  106. 106. Ippon Technologies © 2014 Les modes de positionnement Ce que l’on a déjà vu ● Les media queries avec des points de rupture et leurs associations avec la propriété float pour redéfinir le positionnement “à chaud” des éléments dans une page ● Le positionnement des flux de textes comme dans les journaux avec la propriété column-count
  107. 107. Ippon Technologies © 2014 Les modes de positionnement Flexbox, la nouveauté ● Jusque là, les principaux type de positionnement étaient block, inline, inline- block et table ● Nouveau type de positionnement : flex pour un bloc “flexible” ● Les éléments contenus dans un bloc typé flex, peuvent avoir un comportement adaptatif si la taille de celui-ci a été atteinte, plusieurs comportements peuvent être déclarés avec la propriété flex-wrap ● La flexibilité du bloc peut être horizontale flex-direction: row ou verticale flex- direction: column ● Pas encore totalement supporté partout !
  108. 108. Ippon Technologies © 2014 CSS3 les sélecteurs
  109. 109. Ippon Technologies © 2014 Sommaire ● Parcourir le DOM ● Sélecteurs d’attributs ● Sélecteurs de pseudo classes ● Combinateur d’adjacence indirecte
  110. 110. Ippon Technologies © 2014 Parcourir le DOM Encore plus de sélecteurs ● Pour appliquer un style à un élément il existe plusieurs manières de le sélectionner : par élément, par attribut, par affiliation, par action, par état ● Le choix de la sélection s’effectue selon les attentes du style que l’on veut appliquer, mais aussi par “la portée” de la sélection : générique ou spécifique ● Beaucoup de sélecteurs en CSS2 existaient avant CSS3, ils sont toujours d’ actualité ● CSS3 vient enrichir le panel de sélecteurs possibles, pour d’offrir de nouvelles possibilités de style, mais aussi pour en faciliter la maintenabilité
  111. 111. Ippon Technologies © 2014 Sélecteurs d’attributs Affiner la recherche de l’attribut ● Possibilité en CSS2 de sélectionner un attribut ayant une valeur précise, par exemple input[type=”button”] ● CSS3 permet d’affiner les possibilités de recherche sur la valeur de l’attribut ● Attribut commençant par : [attribute^=theValue] ● Attribut finissant par : [attribute$=theValue] ● Attribut contenant : [attribute*=theValue]
  112. 112. Ippon Technologies © 2014 Sélecteurs de pseudo classes Le panel des pseudo classes ● Possibilité en CSS2 de sélectionner un élément en fonction de sa pseudo-classe “action Usager”, par exemple a:hover ● CSS3 permet d’affiner les possibilités de recherche avec les pseudo classes “structurelles”, “d’état d’élément d’interface”, “de contenu”, “de négation” et “: target”
  113. 113. Ippon Technologies © 2014 Sélecteurs de pseudo classes Sélecteurs de pseudo classes “structurelles” (1) ● Ils permettent de sélectionner plus précisément des éléments enfants ● Sélectionner le n-ième enfant de son parent avec E:nth-child(n) ● Sélectionner le n-ième enfant de son parent en commençant par la fin avec E: nth-last-child(n) ● Les indexes commencent à 0
  114. 114. Ippon Technologies © 2014 Sélecteurs de pseudo classes Sélecteurs de pseudo classes “structurelles” (2) ● Sélectionner le premier enfant de son parent en avec E:first-child ● Sélectionner le dernier enfant de son parent en avec E:last-child ● Sélectionner le seul enfant de son parent en avec E:only-child ● Sélectionner un élément qui n’a aucun enfant avec E:empty
  115. 115. Ippon Technologies © 2014 Sélecteurs de pseudo classes Sélecteurs de pseudo classes “structurelles” (3) ● Possibilité de sélectionner par type également sans se soucier de l’élément parent ● En remplaçant “child” par “of-type”, on retrouve les mêmes correspondances pour sélectionner par type : E:nth-of-type(n), E:nth-last-of-type(n), E:first-of-type, E:last-of-type, E:only-of-type
  116. 116. Ippon Technologies © 2014 Sélecteurs de pseudo classes Sélecteurs de pseudo classes “structurelles” (4) ● Sélectionner un élément qui n’a aucun enfant avec E:empty ● Sélectionner l’élément racine du document E:root
  117. 117. Ippon Technologies © 2014 Sélecteurs de pseudo classes Sélecteurs de pseudo classes “d’état” ● Possibilité de sélectionner un élément en fonction de son état dans l’interface ● Les champs peuvent être activés E:enabled ou désactivés E:disabled ● Les case à cocher et les boutons radio peuvent être cochés E:checked ou indéterminés E:indeterminate ● Il existe également les sélecteurs de pseudo éléments “fragments d’éléments d’ interface”. La partie d'un élément qui est actuellement sélectionnée/mise en exergue par l'usager E::selection. Par exemple, la sélection d’un texte.
  118. 118. Ippon Technologies © 2014 Sélecteurs de pseudo classes Sélecteurs de pseudo classes “de contenu” ● Possibilité de sélectionner un élément dont le contenu textuel concaténé contient une sous-chaîne E:contains("theValue")
  119. 119. Ippon Technologies © 2014 Sélecteurs de pseudo classes Sélecteurs de pseudo classes “de négation” ● Possibilité de sélectionner un élément qui n’est pas concerné par un sélecteur E:not(“selector”)
  120. 120. Ippon Technologies © 2014 Sélecteurs de pseudo classes Sélecteurs de pseudo classes “:target” ● Possibilité de sélectionner un élément qui est la cible de l'URL d'origine contenant lui-même un fragment identifiant. Par exemple si l’URL courante est http://foo.com/#thisSection, la pseudo-classe “:target” permettra de sélectionner l’élément ayant pour id “thisSection”
  121. 121. Ippon Technologies © 2014 Combinateur d’adjacence indirecte Qui est présent ? ● Possibilité en CSS2 de sélectionner un élément F qui est immédiatement précédé par un élément E : E + F ● Possibilité en CSS3 de sélectionner un élément F qui est précédé par un élément E : E ~ F ● Cela signifie l’élément F est il précédé d’un élément E ? Si oui ont-ils bien le même parent ? Si c’est le cas alors l’élément F est sélectionné.
  122. 122. Ippon Technologies © 2014 CSS3 les transformations, transitions et animations
  123. 123. Ippon Technologies © 2014 Sommaire 1. Pourquoi privilégier les effets CSS3 plutôt que les effets en JS 2. Les transformations graphiques 3. Les transitions 4. Les animations
  124. 124. Ippon Technologies © 2014 Pourquoi privilégier les effets CSS3 plutôt que les effets en JS Éviter de lier le rendu au Javascript ● Le rendu final ne sera effectué qu’une fois les scripts chargés ● Avec CSS3, tous les styles sont au même endroit : plus facile à maintenir ● Le rendu est indépendant du JS
  125. 125. Ippon Technologies © 2014 Pourquoi privilégier les effets CSS3 plutôt que les effets en JS Légèreté et rapidité ● Les scripts JavaScript sont allégés ● On évite une requête serveur pour récupérer le JavaScript qui gère le rendu ● Le rendu CSS3 sera plus rapide que le rendu JavaScript
  126. 126. Ippon Technologies © 2014 Les transformations graphiques Origine et flux ● Par défaut, l’origine de la transformation est le point central (50%, 50%) de l’ élément à transformer ● Pour le changer, utiliser la propriété transform-origin ● Attention ! Il n’y a plus de notion de flux lorsqu’on utilise les transformations
  127. 127. Ippon Technologies © 2014 Les transformations graphiques La rotation ● Possible d’effectuer une rotation sur les éléments dans toutes les directions, aussi bien en 2D qu’en 3D ● Utilisation de la fonction transform : rotate() en 2D ● Utilisation des fonctions transform : rotateX(), transform : rotateY(), transform : rotateZ() ou transform : rotate3d() en 3D ● Attention à l’axe de rotation. Par défaut l’élément pivote par rapport à son centre. Pour changer cet axe, on utilise la propriété transform-origin
  128. 128. Ippon Technologies © 2014 Les transformations graphiques La translation ● Possible d’effectuer une translation pour les éléments dans toutes les directions, aussi bien en 2D qu’en 3D ● Utilisation de la fonction transform : translate() en 2D ● Utilisation des fonctions transform : translateX(), transform : translateY(), transform : translateZ() ou transform : translate3d() en 3D ● Attention ! La fonction translate() ne doit pas être utilisée comme méthode de positionnement des éléments mais plutôt pour les transitions ou animations. Elle ne remplace pas donc le positionnement CSS “classique”
  129. 129. Ippon Technologies © 2014 Les transformations graphiques Le zoom ● Possible d’effectuer un zoom pour les éléments dans toutes les directions, aussi bien en 2D qu’en 3D ● Utilisation de la fonction transform : scale() en 2D ● Utilisation des fonctions transform : scaleX(), transform : scaleY(), transform : scaleZ() ou transform : scale3d() en 3D ● Attention à la perte de qualité visuelle sur un agrandissement (élément texte en particulier)
  130. 130. Ippon Technologies © 2014 Les transformations graphiques La distorsion ● Possibilité d’effectuer une distorsion (décalage de l’axe X et de l’axe Y) de l'élément ● Utilisation de la fonction transform : skew() ● Utilisation des fonctions transform : skewX(), transform : skewY()
  131. 131. Ippon Technologies © 2014 Les transformations graphiques Un peu de mathématiques ● Possibilité d’appliquer des transformations mathématiques, avec l’aide de matrices ● Utilisation de la fonction transform : matrix() ● Même propriété entre la 2D et la 3D mais avec plus de paramètres transform:matrix(0.866,0.5,-0.5,0.866,0,0); transform:matrix(0.866,0.5,-0.5,0.866,0,0, 0, -0.5, 0.866, 0.866, 0, ...);
  132. 132. Ippon Technologies © 2014 Les transformations graphiques Combinez le tout ● Les différentes fonctions peuvent être chaînées transform: translate(20px, 20px) rotate(50deg) skew(20deg, 30deg); ● Attention à l'ordre de déclaration des fonctions. Un translate() puis un scale() n'a pas le même effet qu'un scale() puis un translate() ! ● A utiliser à bon escient
  133. 133. Ippon Technologies © 2014 Les transitions Une question d’états ● Transition : passage d’un état 1 à un état 2 ● Il faut un événement qui va faire passer de l’état 1 à l’état 2 ● Exemple : passage d’un bouton d’un état “normal” à l’état “hover” (au passage de la souris)
  134. 134. Ippon Technologies © 2014 Les transitions Comment définir une transition ? ● Définir (ou pas) l’état normal de l’élément ● Ajouter la transition désirée en cas de changement d’état, sur l’état “normal” ● Définir les changements subis lors du deuxième état ● A noter : l’élément effectuera la transition inverse lorsqu’il perdra son état 2 (par exemple notre div retrouvera sa forme initiale si la souris n’est plus sur lui)
  135. 135. Ippon Technologies © 2014 Les animations Une keyframe = une définition d’animation ● Pour définir une animation, il faut utiliser la règle @keyframes ● Il faut ensuite lui spécifier un nom ● A l’intérieur de cette règle il faut définir l’animation réelle : c’est-à-dire définir quelles sont les transformations que va subir l’élément, état par état. ● On peut bien sûr combiner plusieurs propriétés au sein d’une même animation
  136. 136. Ippon Technologies © 2014 Les animations Et pour la voir ? ● On utilise la nouvelle propriété animation en lui spécifiant le nom et la durée ● On peut régler le délai avant le démarrage de l’animation avec la propriété animation-delay ● On peut aussi régler le statut initial de l’animation : en pause, en cours ● On peut gérer le nombre de cycles que fera l’animation, 1, 5, infini…
  137. 137. Ippon Technologies © 2014 CSS3 avec les préprocesseurs
  138. 138. Ippon Technologies © 2014 Sommaire ● À la découverte des préprocesseurs CSS ● Les principaux préprocesseurs CSS ● Liste des fonctionnalités
  139. 139. Ippon Technologies © 2014 À la découverte des préprocesseurs CSS C’est quoi un préprocesseur CSS ? ● Pas un nouveau langage, mais plutôt un métalangage (du code pour produire du code) ● Ça ne vient pas remplacer CSS, ça vient produire du CSS ● Pas un standard W3C ● Nouvelles syntaxes, dérivées fortement de celle de CSS ● C’est avant tout un outil
  140. 140. Ippon Technologies © 2014 À la découverte des préprocesseurs CSS A quoi ça sert un préprocesseur CSS ? ● A rendre plus dynamique le langage CSS qui est très statique (pas de variables, pas de boucles, pas d’héritage, pas de fonctions) ● Étendre les possibilités de l’intégration ; sans pour autant être du CSS et donc passer par une nouvelle normalisation W3C ● A factoriser du code et donc le rendre plus lisible et maintenable ● Produire un CSS valide sans passer par une interprétation du navigateur, c’est lors du “préprocessing” que la la validation s’effectue
  141. 141. Ippon Technologies © 2014 Les principaux préprocesseurs CSS SASS ● Préprocesseur développé en Ruby (nécessite une machine virtuelle Ruby) ● Fichiers .sass ● Axé développeur, car plutôt basé sur les lignes de commande et plus dur d’ installation ● Le site officiel : http://sass-lang.com ● Utilisé par “Zurb Foundation” mais également par “Twitter Bootstrap” désormais
  142. 142. Ippon Technologies © 2014 Les principaux préprocesseurs CSS LESS ● Préprocesseur développé en JavaScript ● Peut s’utiliser côté client (via less.js) ou côté serveur (module node.js) ● Fichiers .less ● Axé intégrateur, car simplicité d’installation (du moins côté client) et d’utilisation ● Le site officiel : http://lesscss.org ● Utilisé par “Twitter Bootstrap”
  143. 143. Ippon Technologies © 2014 Les principaux préprocesseurs CSS Les autres ● Stylus : préprocesseur libre et gratuit qui est un module node.js ● Compass : pas un préprocesseur mais un framework SASS ● Google Closure Stylesheets : préprocesseur codé par les équipes Google en Java, le plus complexe, à utiliser pour la performance. Très peu utilisé dans les communautés.
  144. 144. Ippon Technologies © 2014 Liste des fonctionnalités Facilite la lecture des sources ● Découpage facile en plusieurs fichiers ayant chacun un rôle bien précis ● Possibilité de créer des règles imbriquées ● Utilisation des commentaires dans le fichier source mais pas dans la réalisation
  145. 145. Ippon Technologies © 2014 Liste des fonctionnalités Assure la maintenabilité CSS ● Déclaration de variables ● Utilisation de fonctions ● Notion d’héritage ● Création de mixins
  146. 146. Ippon Technologies © 2014 HTML5 Web API
  147. 147. Ippon Technologies © 2014 Sommaire ● Présentation Web API ● Géolocalisation ● Web Storage
  148. 148. Ippon Technologies © 2014 Présentation Web API Introduction ● HTML5 définit un nombre assez important de nouvelles API ● Leur pertinence est variable en fonction du type de projet concerné (toutes ne sont pas utiles dans tous les projets) ● La formation illustre 3 API assez fréquemment utilisées : ○ Géolocalisation ○ Canvas ○ Web Storage (stockage local des données)
  149. 149. Ippon Technologies © 2014 Présentation Web API Autres API, nombreuses et inégalement implémentées ● Video et Audio : capacités multimédia ● Offline Web app : applications déconnectées ● Drag & Drop ● Web SQL Database et IndexedDB : bases de données ● Selectors : méthodes de sélection DOM ● Web Workers : JavaScript en (multi)tâches ● ...
  150. 150. Ippon Technologies © 2014 Géolocalisation Présentation ● Permet de récupérer les coordonnées complètes du client : latitude, longitude, altitude (et notion de temps) ● Sur les terminaux disposant d'un module GPS, la précision sera souvent meilleure que pour les autres, où la localisation par l'IP ou par triangulation (wifi, GSM) sera utilisée ● C'est l'objet navigator qui sera porteur de l'information if (navigator.geolocation) { // API est disponible }
  151. 151. Ippon Technologies © 2014 Géolocalisation Récupération des coordonnées (théorie) ● L'exploitation de cette API ne peut se faire qu'après approbation de l'utilisateur ● Deux méthodes sont proposées : ○ getCurrentPosition() : récupère ponctuellement la position ○ watchPosition() : suit la position ● Les deux fonctions vont faire appel à des fonctions de callback que le développeur spécifiera ● Les deux fonctions permettent aussi de définir une fonction de callback pour la gestion des erreurs : TIMEOUT, POSITION_UNAVAILABLE, PERMISSION_DENIED, UNKNOWN_ERROR ● Enfin, il est aussi possible de définir certaines options (troisième paramètre de la fonction)
  152. 152. Ippon Technologies © 2014 Géolocalisation Récupération des coordonnées (pratique) navigator.geolocation.getCurrentPosition( successCallback, errorCallback, { maximumAge:600000, // utilisation du cache ou non timeout:0, // timeout enableHighAccuracy:true // précision accrue (GPS) } );
  153. 153. Ippon Technologies © 2014 Géolocalisation Avec Modernizr ● Penser à utiliser Modernizr pour tester le support et à défaut proposer une implémentation alternative (polyfill) Modernizr.load({ test: Modernizr.geolocation, yep : 'geolocation.js', nope: 'geolocation-polyfill.js' }); ● Il existe une multitude de polyfills pour les API HTML5 : https://github. com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#geo-location
  154. 154. Ippon Technologies © 2014 Présentation ● Nouvelle technique pour stocker localement des données ● Remplace avantageusement les cookies ou les connexions aux bases de données distantes (en Ajax par exemple) ● Capacité allant de 5 à 10 Mo en général (cela dépend des navigateurs) ● Les données sont stockées sous forme clef-valeur ● Le stockage est réalisé par domaine (isolation) ● L’interface Storage possède deux interfaces “filles” : ○ sessionStorage sera limitée à la durée de la session ○ localStorage permet un stockage sans limite de durée ● Les 2 interfaces “hérite” des mêmes méthodes d’accès Web Storage
  155. 155. Ippon Technologies © 2014 Les méthodes d’accès ● setItem(clef, valeur) : stocke une valeur ● getItem(clef) : récupère une valeur ● removeItem(clef) : supprime une valeur ● clear() : supprime tout (pour le domaine donné) ● key(index) : récupère la clef d'indice 'index' ● Et une propriété length qui indique le nombre de paires clef/valeur Web Storage
  156. 156. Ippon Technologies © 2014 Web Storage Avec Modernizr ● Penser à utiliser Modernizr pour tester le support et à défaut proposer une implémentation alternative (polyfill) Modernizr.load({ test: Modernizr.localstorage, // ou sessionstorage yep : 'localStorage.js', nope: 'localStorage-polyfill.js' }); ● Il existe une multitude de polyfills : https://github. com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#web-storage- localstorage-and-sessionstorage
  157. 157. Ippon Technologies © 2014 A retenir ● Très simple d’utilisation ● Le format chaînes de caractères nécessite de faire des transformations (JSON. stringify(), image en base64, etc.) ● Ça reste très limité au niveau de l’espace disponible, si vous avez vraiment besoin de place : IndexedDB Web Storage
  158. 158. Ippon Technologies © 2014 Librairie Modernizr
  159. 159. Ippon Technologies © 2014 Sommaire ● Présentation Modernizr ● Modernizr pour CSS ● Modernizr pour JavaScript ● Le compagnon yepnope
  160. 160. Ippon Technologies © 2014 Présentation Modernizr Introduction ● L'univers des navigateurs web est très fragmenté ● Plusieurs acteurs, plusieurs versions, plusieurs OS ● Les possibilités sont donc variables (HTML5, CSS3, API JavaScript) ● Afin qu'une application puisse tirer pleinement profit de la plate-forme sur laquelle elle s'exécute, elle doit connaître ses possibilités ● Des solutions permettent cette détection, Modernizr en est une ● Modernizr supporte la quasi totalité des navigateurs
  161. 161. Ippon Technologies © 2014 Présentation Modernizr Son fonctionnement ● Pour utiliser Modernizr, il suffit de l'ajouter aux ressources de type script de la page ● Modernizr ne s'appuie pas sur la technique du « User Agent Sniffing » car trop imprécise ● Il teste directement la capacité à faire du navigateur et va proposer 2 mises en oeuvre ● Une mise en oeuvre CSS, qui s'appuiera sur des classes pour adapter le comportement de la page aux capacités CSS ● Une mise en oeuvre JavaScript, avec un test conditionnel qui permettra d'adapter le code JavaScript aux capacités offertes, notamment avec les polyfills
  162. 162. Ippon Technologies © 2014 Présentation Modernizr Les polyfills ● Un « polyfill » (ou polyfiller) est un morceau de code JavaScript qui va émuler une fonctionnalité non supportée par un navigateur de telle sorte que le développeur puisse l'utiliser ● Exemple classique : ajout du support de canvas dans Internet Explorer en s'appuyant sur Silverlight ou à défaut sur du VML ● Il existe presque un polyfill (souvent plusieurs) pour chaque fonctionnalité HTML5 : https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser- Polyfills
  163. 163. Ippon Technologies © 2014 Modernizr pour CSS Modernizr pour CSS (théorie) ● Lors du premier chargement de la page, la librairie exécute sa série de détection de fonctionnalités et utilise les résultats pour ajouter des attributs de classe à l’ élément <html> <html class=”js opacity cssgradients no-csscolumns ...” ● Ajout d'une classe « no-js » à l'élément html permet de prévoir un comportement spécifique si le JavaScript n'est pas disponible ● Le script Modernizr doit être défini dans l'élément head et après les définitions de style
  164. 164. Ippon Technologies © 2014 Modernizr pour CSS Modernizr pour CSS (pratique) <html class="js boxshadow cssgradients no-csscolumns ..."> <style type=”text/css”> .csscolumns { /* pour les navigateurs supportant multi-column */} .no-csscolumns { /* pour les navigateurs NE supportant PAS multi-column */} </style> <script src="modernizr.js"></script>
  165. 165. Ippon Technologies © 2014 Modernizr pour JavaScript Mise en oeuvre JavaScript (théorie) ● Modernizr propose de construire une dépendance JavaScript sur mesure en ne sélectionnant QUE les fonctionnalités que l'on souhaite tester ● L'objet Modernizr expose les capacités détectées, facilitant l'écriture du code JavaScript ● La documentation sur les capacités détectables www.modernizr.com/docs ● Des plug-ins sont disponibles pour étendre encore plus le champ des tests (dart, vibration, notification, cors, ...) ● Il est également possible de faire appel au “media queries” via Modernizr Modernizr.mq(‘only screen and (max-width: 480px)’);
  166. 166. Ippon Technologies © 2014 Mise en application Mise en oeuvre JavaScript (pratique) if (Modernizr.localstorage) { // script si local storage disponible } else { // script si local storage NON disponible }
  167. 167. Ippon Technologies © 2014 Le compagnon yepnope Présentation ● Le code JavaScript présenté précédemment n'est pas optimal ● Quelle que soit l'aptitude du navigateur, le code pour les deux scénarios (apte ou non) est chargé dans la page : pas optimal en volume, ni en lisibilité ● L'idéal serait de ne charger QUE le script correspondant ● yepnope.js est un chargeur de scripts utilisé en interne dans Modernizr et qui permet un chargement spécifique
  168. 168. Ippon Technologies © 2014 Le compagnon yepnope Mise en oeuvre (théorie) ● yepnope va permettre de ne charger que les scripts nécessaires adaptés aux capacités du navigateur ● Le code n'embarquera plus explicitement les tests if ● Les valeurs pour 'yep' et 'nope' sont des tableaux : plusieurs ressources, aussi bien CSS que JS, peuvent être chargées ● Modernizr.load admet aussi bien une chaîne, un objet ou un tableau d'objets ● Le test peut porter sur plusieurs aptitudes : l'expression sera évaluée pour déterminer le booléen correspondant
  169. 169. Ippon Technologies © 2014 Le compagnon yepnope Mise en oeuvre (pratique) Modernizr.load({ // le test sur le support du navigateur test: Modernizr.geolocation, // chargements (yep/nope) yep: "geolocation.js", nope: "geolocation-polyfill.js", // appelée à la toute fin complete: function() {console.info("done");} });
  170. 170. Ippon Technologies - 43, avenue de la grande Armée 75116 Paris 01 46 42 48 48 - contact@ippon.fr - www.ippon.fr - blog.ippon.fr - www.ipponusa.com - www.ippon-hosting.com

×