HTML 5

3 097 vues

Publié le

Ce document décrit par détails les nouveautés du HTML5 talque les nouvelles balises, le sémantique, les API, ainsi que la nouveauté du CSS3 et le responsive web design.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 097
Sur SlideShare
0
Issues des intégrations
0
Intégrations
662
Actions
Partages
0
Téléchargements
1
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Le XHTML est compatible avec les anciennes versions du HTML et accompagne le passage aux technologies modulaires et extensibles du XML.
  • Semantics & Markup
    Better semantic tags
    Markup for applications (*)
    Descriptive link relations (*)
    Microdata (*)
    ARIA attributes (*)
    New form types
    Graphics
    Canvas 2D
    Canvas 3D (Web GL)(*)
    inline SVG (*)
    Multimedia
    Audio + Video
    Track Element
    FullScreen API
    Offline / Storage :
    Web Storage
    Web SQL Database
    Application Cache
    Quota API (*)
    File / Hardware Access
    Native Drag & Drop
    Desktop Drag-In (File API) (*)
    Desktop Drag-Out (*)
    FileSystem APIs (*)
    Geolocation
    Speech Input (*)
    Realtime / Communication
    Web Workers
    WebSocket (*)
    Notifications (*)
    CSS3
    CSS Selectors
    Webfonts
    Text wrapping (*)
    Columns
    Text stroke
    Color Opacity
    Hue/saturation/luminance (HSL) color (*)
    Rounded corners
    Gradients background
    Shadows
    Background size / multiple
    Border image
    Flexible Box (*)
    Transitions
    Transforms
    Animations
  • Un des changements majeurs de l’HTML 5 réside dans la simplification de la structure du document HTML.
  • Le Web sémantique désigne un ensemble de technologies visant à rendre le contenu des ressources du World Wide Web accessible et utilisable par les programmes et agents logiciels, grâce à un système de métadonnées formelles, utilisant notamment la famille de langages développés par le W3C.
  • Permet de définir une zone dans lequel il va être possible de dessiner, d’animer, d’interagir… Les possibilités sont infinies. Cela permet d’imaginer des jeux en HTML, ce qui n’était possible avant que via un plugin externe comme Flash. Un tuto orienté interaction : http://inserthtml.developpez.com/tutoriels/javascript/interactivite-avec-balise-html5-canvas/ Un autre orienté dessin 2D : http://www.alsacreations.com/tuto/lire/1484-introduction.html Et un site dédié uniquement à des exemples de réalisation : http://www.canvasdemos.com/
  • Permet de stocker localement des données. C’est le cookie du futur en quelque sorte, avec un accès facilité et une plus grosse capacité de stockage.
    Un tuto : http://html5professor.com/tutoriels-17.html Mise à jour du 1er mars : Attention, une faille vient d’être découverte dans cette API qui permet potentiellement de remplir le disque dur d’un internaute
  • Prefetch: Une relation prefetch va déclencher le pré-chargement du fichier mentionné par le lien (attribut href), afin de le placer en cache.
    Un tuto : http://davidwalsh.name/html5-prefetch
  • Un tuto très complet : http://www.siteduzero.com/informatique/tutoriels/html5-web-workers-le-monde-parallele-du-javascript Un deuxième pour la route : http://anders.janmyr.com/2013/02/web-workers.html
  • Un tuto : http://www.html5rocks.com/en/tutorials/websockets/basics/
  • Un tuto : http://www.html5rocks.com/en/tutorials/eventsource/basics/
  • Deux tutos : http://www.html5rocks.com/en/tutorials/notifications/quick/ et http://www.jquery4u.com/html5-2/html5-desktop-notifications/
  • http://cubic-bezier.com
  • Bienvenue à l’époque animation en mode gif !
  • animation-name : le nom de l’animation à utiliser.
    animation-duration : le temps total de l’animation.
    animation-timing-function : la méthode d’interpolation (accélération, décélération). Voici quelques valeurs possibles : linear, ease, ease-in, ease-out, ease-in-out, steps (nombre, start | end), cubic-bezier( p1, p2, p3, p4)
    animation-iteration-count : le nombre de répétition de l’animation. La valeur infinite permet de jouer une animation en continu.
    animation-direction : permet de jouer une animation en sens inverse (en fonction du cycle).
    animation-play-state : mettre en pause l’animation. En cours d’étude de suppression par le W3C.
    animation-delay : le temps avant que l’animation ne démarre.
    animation-fill-mode : conserver l’état de l’animation avant le début où après la fin de celle-ci.
    Il existe aussi la propriété raccourcie animation.
  • Commençons par notre code HTML, que je vais proposer uniquement sous forme de quelques paragraphes avec un label et un input dans chacun d’eux.
  • Commençons par notre code HTML, que je vais proposer uniquement sous forme de quelques paragraphes avec un label et un input dans chacun d’eux.
  • Commençons par notre code HTML, que je vais proposer uniquement sous forme de quelques paragraphes avec un label et un input dans chacun d’eux.
  • Commençons par notre code HTML, que je vais proposer uniquement sous forme de quelques paragraphes avec un label et un input dans chacun d’eux.
  • une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs.
    - Lorsqu'une media query est vraie, la feuille de style ou les règles correspondantes sont appliquées selon les règles 
  • une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs.
    - Lorsqu'une media query est vraie, la feuille de style ou les règles correspondantes sont appliquées selon les règles 
  • HTML 5

    1. 1. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Préparer et animer par Mahmoud N’bet
    2. 2. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Présentation Les nouvelles balise sémantiques Nouvelles APIs HTML5 Les nouveaux sélecteurs et pseudo-formats Les nouvelles propriétés Les animations Les bonnes pratiques Présentation Les medias queries Mise en page flexible les images flexibles
    3. 3. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Introduction à HTML5 • HTML5 est la nouvelle version du standard HTML. Il apporte non seulement l'utilisation de média riches (vidéo, audio, SVG, etc.) mais aussi des fonctionnalités permettant le développement d'applications web bien plus attractives et interactives.
    4. 4. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com
    5. 5. © Proxym-IT http://twitter.com/proxymit Les nouveautés de HTML5 Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Sémantique Éléments Graphique Multimédia Offline / Storage File / Hardware Access Realtime / Communication CSS3 18/11/2014
    6. 6. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com
    7. 7. © Proxym-IT http://twitter.com/proxymit HTML4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd"> XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Le Doctype (avant tous) • Le doctype est le préambule d’une page HTML, il spécifie le type de document. XHTM5 <!DOCTYPE html> Cela permet au navigateur ne supportant pas encore HTML5 de passer en mode standard et ainsi d'ignorer les balises inconnues.
    8. 8. © Proxym-IT http://twitter.com/proxymit XHTML <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> <title>Titre de la page</title> <link rel="stylesheet" type="text/css" href="demo.css" /> Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Une structure simplifiée <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> </head> <body> … <script type="text/javascript" src="js/script.js"></script> </body> </html> HTM5 <!DOCTYPE html> <html lang ="fr" > <head> <meta charset="utf-8" /> <title>Titre de la page</title> <link rel="stylesheet" type="text/css" href="css/layout.css" > </head> <body> … <script type="text/javascript" src="js/script.js"></script> </body> </html> Déclarer l'encodage de caractères
    9. 9. © Proxym-IT http://twitter.com/proxymit Les nouvelles balise sémantiques • Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui constituent la page web : Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com • <main> : layout • <header> : en-tête ; • <footer> : pied de page ; • <nav> : liens principaux de navigation ; • <section> : section de page ; • <aside> : informations complémentaires ; • <article> : article indépendant. Le code JavaScript HTML5shiv permet de faire en sorte que ces balises soient reconnues pour les versions d'Internet Explorer antérieures à IE9.
    10. 10. © Proxym-IT http://twitter.com/proxymit Les nouvelles balise sémantiques • <hgroup> : Groupe des entêtes éléments. • <details> : précise les détails supplémentaires qui peuvent être masqués ou affichés sur demande. • <summary> : Définit une position visible d'un élément <details> • <figure> : définit des images, des diagrammes, des photos, du code, etc… • <figcaption> : légende pour la balise <figure>. • <output> : représente le résultat d’un calcul Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com
    11. 11. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les nouvelles balise sémantiques • Pour la balise <form> – autocomplete : auto complétion. – novalidate : si présent le formulaire n’est pas validé lorsqu’il est soumis. • Pour la balise <input> – autocomplete : auto complétion. – placeholder : Un conseil pour aider les utilisateurs à remplir le champ de saisie. – required : Indique que la valeur du champ de saisie est nécessaire pour soumettre le formulaire. step : Indique l’intervalle entre les valeurs. – autofocus : Définit le focus lors du chargement de la page. – form : Spécifie à quel formulaire le champ appartient. – formaction : Remplace l'attribut "action" du formulaire. – formenctype : Remplace l'attribut "enctype" du formulaire. Indique comment la forme-données doit être encodé avant d’être envoyé au serveur. – formmethod : Remplace l’attribut "method" du formulaire. – formnovalidate : Remplace l'attribut "novalidate" du formulaire. S'il est présent le champ de saisie ne devrait pas être validé lors de son envoi. – formtarget : Remplace l'attribut "target" du formulaire. Indique la fenêtre cible utilisée lorsque le formulaire est soumis. – multiple : Si présent, l’utilisateur peut entrer plusieurs valeurs. – pattern : Définit un motif. • Nouveaux types Pour la balise <input> – datetime; datetime-local; date; month; week; time; tel; number; range; email; url; search; color
    12. 12. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com L’attributs data-* • HTML5 permet d'associer des données directement dans un élément HTML à l'aide des attributs data-* Syntaxe <element data-attr="valeur" > </element> <img src="mamoto.jpg" alt="Une moto rouge" data-auteur="Simon" data-lieu="Strasbourg" data-materiel=" EOS" data-gps="48.582967,7.74828"> Exemple L'intérêt principal de cet attribut est de simplifier le stockage des données dans le document directement dans un élément. Par exemple, dans une galerie d'images on peut stocker : le nom de l'auteur, le lieu... dans l'image elle-même, puis afficher ces informations suivant notre besoin.
    13. 13. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Compatibilité CHROME FF SAFARI IE OPERA IOS ANDROID <Header> élément YES YES YES 9+ YES 6.0+ 4.4+ <main> élément YES YES YES NO YES 7.0+ 4.4+ <nav> élément YES YES YES 9+ YES 6.0+ 4.4+ Field types : date YES NO NO NO YES YES YES Field types : color YES NO NO NO YES NO YES datalist YES YES NO 10+ YES NO NO <progress> élément YES YES YES 10+ YES 7.0+ 4.4+ <meter> élément YES YES YES NO YES NO 4.4+ Form validation YES YES YES 10+ YES YES YES
    14. 14. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com
    15. 15. © Proxym-IT http://twitter.com/proxymit Syntaxe minimale pour les lecteur des fichiers vidéo et audio: Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Multimédia : vidéo / audio • Une des grandes nouveauté de HTML5 est la prise en charge sans plugin, de la lecture des flux audio et vidéo. <video src="media/movie.mp4" controls> </video> <audio src="media/file-audio.ogg" controls> </audio> <video width="320" height="240" controls autoplay loop > <source src="media/movie.mp4" type="video/mp4"> <source src="media/movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> Exemple de code plus complet
    16. 16. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Multimédia : vidéo / audio <video width="320" height="240" controls autoplay loop > <source src="media/movie.mp4" type="video/mp4"> <source src="media/movie.ogg" type="video/ogg"> <track label="English subtitles" kind="subtitles" srclang="en" src="video-subtitles-en.vtt" default /> Your browser does not support the video tag. </video> Exemple de code plus complet
    17. 17. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Fullscreen Permet de passer le navigateur en mode plein écran. Cela peut avoir une utilité notamment dans le cadre de jeux HTML5, des photos ou des vidéos.
    18. 18. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Compatibilité CHROME FF SAFARI IE OPERA IOS ANDROID video YES YES YES 9+ YES YES YES audio YES YES YES 9+ YES YES YES FullScreen YES YES Prefixed 11+ Prefixed NO 4.4+
    19. 19. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com
    20. 20. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Native Drag & Drop • c’est le fait de pouvoir glisser-déposer un élément vers – ou à la place – d’un autre. • C’est ce que nous propose l’API Drag and Drop d’HTML5, vous pouvez intégrer ce mécanisme en utilisant des simples instructions javaScript pur. – ondragstart : sélectionner un élément déplaçable – ondrag : faire glisser l'élément vers une zone de réception – ondrop : relâcher l'élément dans la zone de réception <img src="image.png" ondragstart="DragHandler(this, event)" alt="my image" /> <div ondrop="DropHandler(this, event)" ondragenter="return false" ondragover="return false"> ... </div>
    21. 21. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com La géolocalisationavec HTML 5 • Une des nouvelles fonctionnalités intéressantes de HTML5. elle permet d’avoir des renseignements sur la position de l’utilisateur peu importe la plateforme sur laquelle l’application s’exécute. Nous avons uniquement besoin d’exécuter du code Javascript. function getLocation() { if (navigator.geolocation) navigator.geolocation.getCurrentPosition(showPosition); else x.innerHTML="Geolocation is not supported by this browser."; } function showPosition(position) { x.innerHTML= "Latitude:"+ position.coords.latitude +", Longitude:"+ position.coords.longitude; } getCurrentPosition(successCallback, errorCallback) : récupère les coordonnées. Dans de nombreux cas, on aimerait mettre à jour la position de l’utilisateur si celui-ci se déplace. watchPosition(successCallback, errorCallback) : récupère les coordonnées en suivant le déplacement de l’utilisateur
    22. 22. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Compatibilité CHROME FF SAFARI IE OPERA IOS ANDROID Drag & Drop YES YES YES 10+ YES NO NO Géo-location YES YES YES 9+ YES YES YES
    23. 23. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com
    24. 24. © Proxym-IT http://twitter.com/proxymit Aperçu du résultat Exemple de création d’un simple rectangle rouge 30 Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Graphique : Le canvas • HTML5 offre aujourd’hui la possibilité de dessiner, de traiter des images en allant jusqu’à la possibilité de créer un jeu complet grâce au nouvel élément <canvas> La syntaxe HTML pour la création d’un canvas 2D <canvas id=”dessin" width="600" heiht="400"> Votre navigateur ne support pas canvas ! </canvas> <script> var dessin = document.getElementById(‘dessin’); var forme = dessin.getContext(‘2d’); forme.fillStyle = " red " ; forme.fillRect(20, 30, 100, 50); </script> 20 50 100
    25. 25. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Compatibilité CHROME FF SAFARI IE OPERA IOS ANDROID Canvas 2D YES YES YES 9+ YES YES YES SVG YES YES YES 9+ YES 4.2+ YES
    26. 26. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com
    27. 27. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Web Storage • Local Storage et Session Storage sont de nouvelles technologies HTML5 qui permettent de stocker localement des données, contrairement aux sessions "normales" qui sauvegardent les données dans le serveur. <script type="text/javascript"> if(typeof(Storage) !== "undefined"){ // edit Store localStorage.setItem("name", saisie); // load Store localStorage.getItem("name"); } </script> sessionStorage.setItem("name", saisie); .setItem(); .getItem(); .removeItem(); .clear(); De même pour les session Storage
    28. 28. © Proxym-IT http://twitter.com/proxymit L’application web offline HTML5 «Lemanifest» • Les applications offline utilisent “l’application cache” du navigateur, qui permet : – D’utiliser une application web ou de naviguer sur un site entier sans connexion internet. – D’améliorer la vitesse de chargement des pages puisque les fichiers sont présents en local. – De réduire la charge du serveur, puisqu’en effet, il n’enverra que les fichiers qui auront changé depuis le Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com dernier passage de l’utilisateur <!DOCTYPE html> <html manifest="site.manifest" > <head> … </head> <body> <div id="main"> <h1>Ceci est mon application offline</h1> <img src="earth-folder.png" /> </div> </body> </html> - L’application cache repose principalement sur l’utilisation d’un fichier “manifest” à ajouter aux pages HTML de votre site. - Ce fichier se déclare dans la balise html comme ceci. CACHE MANIFEST # Version 0.1 CACHE: index.html earth-folder.png FALLBACK: / /offline.html NETWORK: * ce fichier commence obligatoirement par la ligne “CACHE MANIFEST”, nous allons déclarer les fichiers qui doivent être mis en cache. Il est possible d’ajouter différentes sections à notre fichier manifest : CACHE, il s’agit de la section par défaut qui liste les fichiers à mettre en cache. NETWORK, qui liste les fichiers qui nécessitent obligatoirement une connexion internet. FALLBACK, qui liste les fichiers qui, au cas où ils ne soient pas accessibles en ligne, doivent renvoyer vers d’autres fichiers.
    29. 29. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Link Prefetching • Permet de pré-charger la page indiqué par le lien. Ainsi, quand l’internaute clique sur le lien, la page est immédiatement affichée car elle a déjà été chargée en tâche de fond. A utiliser malgré tout avec parcimonie. <link rel="prefetch" href="http://www.mondomaine.com/page.html">
    30. 30. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Le WebSQL • L'API Web SQL permet de créer une base de donnée, ajouter une table, etc. enfin bref d'avoir une base de données utilisable via le navigateur. Le navigateur fournissant la gestion de base de données, elle peut être accessible en mode "offline" (en mode déconnecté). Ouvrir une connexion var db; if(window.openDatabase){ db = openDatabase('ma_base', '1.0', 'database', 2000000, function(db){ db.changeVersion('','1.0',function(t){t.executeSql('CREATE TABLE tab1 (id, name)'); }, error); }); } Exemple de requête SQL db.readTransaction(function (t) { t.executeSql'('SELECT title, author FROM docs WHERE id=?', [id], function (t, data) { for(var i = 0; i < data.rows.length; i++){ document.getElementById('log').innerHTML = data.rows.item(i).title + ' ' + data.rows.item(i).author; } }); });
    31. 31. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com IndexedDB • Méthode de stockage des donnéescôté client dans le navigateur del'utilisateur. Permet d'effectuerdes requêtes sur une base de donnéesindexée.
    32. 32. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Compatibilité CHROME FF SAFARI IE OPERA IOS ANDROID Local Storage YES YES YES 8+ YES YES YES Session Storage YES YES YES 8+ YES YES YES Application Cache YES YES YES 10+ YES YES YES Web SQL YES NO YES NO YES YES 4.4+ IndexedDB YES YES NO 10+ YES NO 4.4+
    33. 33. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com
    34. 34. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Web Workers et Web Messaging • Nos sites internet sont de plus en plus lourds, nos applications web de plus en plus complexes. Comme tout traitement important, il est indispensable de paralléliser les traitements afin d'accélérer nos applications. • Le web-workers est un des nouvelles fonctionnalités ajoutées au JavaScript qui permet la possibilité d'exécuter du code en parallèle en JavaScript. • Il permet de faire du mutli-threading et d’exécuter des scripts en arrière plan « en vue de gérer des tâches de calcul complexes, sans bloquer l'interface utilisateur ». Ils vont pouvoir communiquer avec le programme principal via les Web Messaging..
    35. 35. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Web-workers: Exemple • Notre mission est d’exécuter un script qui peut prendre beaucoup de temps. • de manière "so HTML4", le script se fait arrêter par le navigateur au bout de quelques secondes… • Voyons maintenant comment s’exécuter dans un Worker. self.onmessage = function(e) { var sum=0; for (var i= 1; i < 1000; i++){ for (var j=1; j<1000; j++){ for (var k=1;k<1000;k++){ sum += k+j+i; } } } self.postMessage(sum); }; <script type="text/javascript"> function calc(){ var worker = new Worker('task.js'); worker.addEventListener( 'message', function(event){alert(event.data);}, false); worker.postMessage(""); } </script>
    36. 36. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Web Sockets • Permet une connexion bi-directionnelle entre le client et le serveur. Cela permet de déclarer une connexion qui peut rester ouverte, et où les informations circulent sans entêtes (gain de Ko). Les Websockets vont être amenés à terme à remplacer Ajax en permettant de vraies application temps réel.
    37. 37. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Server-sent events • Server-sent events est une technologie grâce à laquelle un navigateur reçoit des mises à jour automatiques à partir d'un serveur via une connexion HTTP. L'API EventSource server-sent events est normalisée dans le cadre de HTML5 par le W3C.
    38. 38. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Notifications bureau • Permet d’afficher des notifications de bureau à l’utilisateur (une fois qu’il a accepté d’en recevoir pour un site donné).
    39. 39. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Compatibilité CHROME FF SAFARI IE OPERA IOS ANDROID Web Workers YES YES YES 10+ YES 4.2+ 4.4+ Web Sockets YES YES YES 10+ YES 6.0+ 4.4+ Server-Sent Events YES YES YES NO YES YES 4.4+ Web Notifications YES YES YES NO NO NO NO
    40. 40. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com
    41. 41. © Proxym-IT http://twitter.com/proxymit Préfixe des propriétés CSS des différents Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com navigateurs • Les nouvelles propriétés CSS3 mettent du temps à être normalisées. • Grâce aux « préfixes », les navigateurs peuvent supporter des fonctionnalités CSS particulières sans attendre la publication définitive d'une nouvelle version du standard. • Elles se distinguent par un préfixe propre à chaque navigateur : – -webkit- Chrome, Safari, Android… – -khtml- Konqueror – -moz- Mozilla – -ms- Internet Explorer – -o- Opera
    42. 42. © Proxym-IT http://twitter.com/proxymit Les nouveaux sélecteurs de CSS3 • A ~ B : Ce sélecteur sélectionne TOUS les éléments qui suivent directement ou Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com indirectement un élément, au sein du même parent. • A[attribut*="leu"] : une balise avec un attribut et une valeur qui contient au moins une occurrence de « leu » (l'attribut doit cette fois contenir dans sa valeur le mot « leu », [ peu importe sa position ]). • A[attribut^="va"] : une balise avec un attribut et une valeur qui commence par « va ». • A[attribut$="eur"] : une balise avec un attribut et une valeur qui se termine par « eur ». • A[attribut~="val"] : une balise, un attribut avec des valeurs séparés par des espace, l’une d’elle doit être « val ». • A[attribut|="val"] : une balise avec un attribut et une valeur exacte « val » ou commence par « val » suivi de « - » (Principalement pour les sous-code de langues. type « Fr-FR »).
    43. 43. © Proxym-IT http://twitter.com/proxymit Les nouveaux pseudo-formats de CSS3 • :root: Représente l’élément HTML • :lang: Représenter un sélecteur pour un élément selon sa langue si elle est spécifié. (html:lang(fr- Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com FR) div{…}). • :nth-child(N): L’argument N peut être un nombre ou une expression de nombre sous la forme an+b • :first-child, last-child: Sélectionner respectivement le premier et le dernier enfant de l’élément parent. • :target: Sélectionner l’élément dont l’identifient est le fragment présenter dans l’URL (L’URL se termine par #...). • :not(): permet de retirer un élément, ou l’état d’un élément, du sélecteur. • :empty(): cibler un élément sans enfant. • :enabled, disabled: Représente un élément de l’interface usager (ex: input) qui est dans l’état enabled ou disabled. • :valid, invalid: cibler les éléments de formulaire respectant la valeur attendue et l’inverse. • :checked: élément « radio » ou « checkbox » choisi. • ::first-line, ::first-letter : cibler respectivement la première ligne formaté et lettre d’un élément. • ::before et ::after : peuvent être utilisés pour inséré du contenu généré avant ou après le contenu d’un élément. • ::selection : Changer la couleur de background et le texte des parties sélectionnés.
    44. 44. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com CSS3 SelectorTests CHROME FF SAFARI IE OPERA IOS ANDROID A ~ B YES YES YES 9+ YES A[att^="val"] YES YES YES 9+ YES A[att$="val"] YES YES YES 9+ YES A[att*="val"] YES YES YES 9+ YES A:last-child YES YES YES 9+ YES A:target YES YES YES 9+ YES A:checked YES YES YES 9+ YES A:not() YES YES YES 9+ YES A::selection YES Prefixed YES 9+ YES
    45. 45. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Le multiple background • Images de background séparés par un virgule « , » • Les navigateur qui ne supportent pas vont ignoré la règle, donc mettre une déclaration simple avant. • La première image dans la liste est la plus près de l’utilisateur. Syntaxe Section{ background-image: url("image1"), url("image2"); background-position: x y, x y; background-repeat: no-repeat, repeat-y; }
    46. 46. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Background clip • Spécifie la zone de peinture de fond de background – Border-box : à l’intérieur du bordure (propriété par défaut) – Padding-box: à l’intérieur du padding – Content-box: à l’intérieur du contenu Syntaxe Section{ background-clip: border-box | padding-box | content-box; }
    47. 47. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Background size • Spécifie la taille de l’image de background – Deux paramètres : définissent respectivement les deux tailles du largeur et du hauteur. – cover : Échelle de l'image d'arrière-plan pour être aussi grand que possible de sorte que la zone de fond est complètement recouverte par l'image de fond. – contain : Échelle de l'image de la plus grande taille tels que les deux sa largeur et sa hauteur peut s'adapter à l'intérieur de la zone de contenu – round : répéter une tuile horizontalement et verticalement de l’image sans écrêtage, mais l'image peut être redimensionnée – space : répéter une tuile horizontalement et verticalement de l’image sans écrêtage ou redimensionnée de l’image Syntaxe Section{ background-size: 80px 60px | 20% auto | cover | contain | initial | auto | round | space ; }
    48. 48. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Background dégradé • De nouvelles propriétés permettent de réaliser et gérer des arrière-plans de teintes dégradées. Il s'agit de « linear-gradient » pour les dégradés linéaires et « radial-gradient » pour les dégradés radiaux. Syntaxe linear-gradient Section{ background : linear-gradient(x y [angle], couleur1 [x1], couleur2 [x2], … , couleurN [xN]) } x et/ou y définissent la direction du dégradé. Exp: to right, to left bottom, top center Syntaxe radial-gradient Section{ background : radial-gradient(forme at x y, couleur1, couleur2, ..., couleurN) } form : « circle » ou « ellipse »
    49. 49. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Border-radius • Cette propriété nous permet facilement de créer des bordures avec des coins arrondis. Cette propriété s’utilise de la façon suivante : Syntaxe Section{ border-radius: 20px; border-radius: 5px 10px; border-radius: 5px 10px 20px; border-radius: 5px 10px 5px 20px; } Il existe plusieurs façons d’utiliser cette règle, à la manière des marges internes et externes (padding et margin) : une, deux, trois ou quatre valeurs Comme on peut définir les propriétés de la façon suicvante : border-top-left-radius : Définit le coin supérieur gauche d’une boîte. border-top-right-radius : Définit le coin supérieur droit d’une boîte. border-bottom-right-radius : Définit le coin inférieur droit d’une boîte. border-bottom-left-radius : Définit le coin inférieur gauche d’une boîte.
    50. 50. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Allez plus loin avec Border-radius • Jusqu’à présent, nous avons travaillé uniquement avec des coins arrondis définis par des cercles. Les propriétés border-radius peuvent aussi créer des coins définis par des ellipses. Afin de définir le style du coin supérieur gauche à l’aide d’un ellipses, on ajoute la propreté suivante border-top-left-radius: 50px 25px; Pour toutes les propriétés border-radius individuelles, la première valeur correspond au rayon horizontal de l’ellipse qui définit le coin et la seconde valeur correspond au rayon vertical. Vous pouvez également utiliser la propriété border-radius comme une propriété raccourcie, pour définir tous les coins arrondis elliptiques en une seule fois. Cette propriété s’utilise de la façon suivante : border-top-left-radius: ulx urx lrx llx / uly ury lry lly;
    51. 51. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Le border-images • Cette propriété permet de définir une image de background comme bordure à la place d’un style. • Les côtés et les coins sont pris de l’image spécifié, dont les parties seront découpé, redimensionné et tendu au besoin. Cette propriété s’utilise de la façon suivante : selector{ border-width: 18px; border-image: url("images/border.png") 30 30 30 30 [mode d’affichage]; } L’image fournit sera découpé en 9 partie selon une grille 3x3. De même la bordure d’une boite, afin de placer chaque tranche dans les zones qui correspond. A D C B A B C D
    52. 52. © Proxym-IT http://« stretch »: Étiré pour couvrir la zone. twitter.com/proxymit selector{ Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com border-width: 18px; border-image: url("images/border.png") 30 30 30 30 stretch ; } « repeat »: Tuilé et répété pour couvrir la zone. selector{ border-width: 18px; border-image: url("images/border.png") 30 30 30 30 repeat; } « round »: Tuilé et répété pour couvrir la zone. Si la zone n’est pas couverte avec un nombre complet des tuiles, les images sont redimensionnés afin qu’il la couvre selector{ border-width: 18px; border-image: url("images/border.png") 30 round; } « space »: Tuilé et répété pour couvrir la zone. Si la zone n’est pas couverte avec un nombre complet des tuiles, les images se distribuent l’espace afin qu’il la couvere. Plusieurs autres formes, on peut les construire avec un seule image en jouant sur les valeur de cette propriété.
    53. 53. © Proxym-IT http://twitter.com/proxymit Ombres sur les boites : Box-shadow Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Cette propriété s’utilise de la façon suivante : selector{ box-shadow: hoff voff bd sd color [inset]; } Plusieurs options vous sont proposées pour les adapter. Ici, hoff indique le décalage horizontal, voff fait état du décalage vertical, bd marque la distance de l’effet de flou, sd indique la diffusion, color précise la couleur de l’ombre et inset qui est utilisé, indique que l’ombre est une ombre intérieure plutôt qu’une ombre extérieure. On peut ajouter un effet de 3D, en ajoutant un deuxième ombre.
    54. 54. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Text-shadow La propriété text-shadow permet de définir les ombres des textes. Cette propriété s’utilise de la façon suivante : selector{ text-shadow: 1px 1px 2px #666; } Décalage verticale Décalage horizontale Rayon de dégradé Couleur de l’ombre Avec possibilité de mettre plusieurs ombre…
    55. 55. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com CSS3 multiple colomnlayout • Mise en page avec colonnes (pas de float). • Système de colonnes en définissant : – Nombre de colonnes – Largeur des colonnes • Le contenu peut continuer d’une colonnes à une autre. selector{ column-count : 3 ; column-width : 100px ; column-rule : 1px solid green; column-gap : 40px; }
    56. 56. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com CSS3 propriétés Tests CHROME FF SAFARI IE OPERA IOS ANDROID multiple bauground YES YES YES 9+ YES Background clip YES YES YES 9+ YES Background size YES YES YES 9+ YES Background dégradé YES YES YES 10+ YES Border-radius YES YES YES 9+ YES Border image YES YES YES 11+ YES Box-shadow YES YES YES 9+ YES Text-shadow YES YES YES 10+ YES colomn layout YES YES YES 10+ YES
    57. 57. © Proxym-IT http://twitter.com/proxymit Il est également possible d'effectuer des transformations combinées en espaçant les fonctions d'un simple caractère blanc. Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com CSS3 : transformations 2D • La propriété CSS transform permet de manipuler un élément HTML sur les axes X et Y grâce à des fonctions diverses de transformation graphique. Il est donc possible de modifier l'apparence d'un élément grâce à un ensemble fonctions 2D : – Translation (translate) – Mise à l'échelle (scale) – Rotation (rotate) – Inclinaison (skew) – Matrice de transformation (matrix) La syntaxe est simple d'emploi. transform: function(value); transform : function1(value1) function2(value2) function3(value3);
    58. 58. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com La propriété transform-origin • Pour pouvoir appliquer des transformations, nous avons besoin de savoir quel est le point d'origine (d'ancrage) de la transformation. La propriété transform-origin définit ce point d'origine. • Il est possible de changer cette valeur en utilisant un mot-clef de position (top, right, bottom, left) suivi d'une valeur chiffrée dont l'unité peut varier (px, %, etc.) Syntaxe. transform-origin: 50% 50%; transform-origin: top 0 left 0;
    59. 59. © Proxym-IT http://twitter.com/proxymit Les fonctions de la propriété transform La fonction translate : Elle permet d'effectuer une translation (un déplacement) de l'élément sur les axes X et Y. Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com transform: translate(x,y); Ces fonctions permettent de réaliser une translation sur l'axe X ou Y. transform: translateX(value) translateY(value); La fonction scale: Cette fonction permet d'agir sur l'échelle (les dimensions) de l'élément. La valeur initiale est 1, tandis que les valeurs supérieures à 1 créent un effet d'agrandissement, et les valeurs inférieures créent un effet de réduction. transform: scale(x,y); transform: scaleX(value) scaleY(value); La fonction rotate: Il s'agit d'une des plus simples fonctions à comprendre. Comme son nom l'indique, elle permet d'effectuer une rotation de l'élément ciblé transform: rotate(5deg);
    60. 60. © Proxym-IT http://twitter.com/proxymit Les fonctions de la propriété transform Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com La fonction skew: Cette fonction permet d'obliquer la forme d'un élément. transform: skew(10deg, 15deg); transform: skewX(10deg) skewY(15deg); La fonction matrix: Cette fonction permet de réunir en une seule déclaration toutes les fonctions précédentes que nous avons vu ensemble sous la forme d'une matrice div { transform-origin: 0 0; transform: rotate(15deg) translateX(230px) scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px); } Équivaut à la matrice suivante div { transform-origin: 0 0; transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px); }
    61. 61. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com CSS3 : les transitions • Le principe de base d'une transition CSS3 est de permettre une transition entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché. • La propriété se décompose en plusieurs autres propriétés, décrite ici : – transition-property : la(les) propriété(s) CSS à modifier. – transition-duration : le temps total de la transition ( en secondes, millisecondes). – transition-timing-function : la méthode d’accélération entre l’état initial et final d’une transition. – transition-delay : le temps avant que la transition se démarre. transition-property:width, background; transition-duration:1s; transition-timing-function:linear; transition-delay:2s; div{ width : 100px; background : red; transition : width linear 2s, background ease 3s; } div:hover{ width: 150px; background :green; }
    62. 62. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com transition-timing-function • De base, les navigateurs fournissent quelques fonctions de transitions par défaut. Celles-ci sont: – ease : Rapide sur le début et ralenti sur la fin. – linear : La vitesse est constante sur toute la durée de l'animation. – ease-in : Lent sur le début et accélère de plus en plus vers la fin. – ease-out : Rapide sur le début et décélère sur la fin. – ease-in-out : Le départ et la fin sont lents.
    63. 63. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com La fonction cubic-bezier() • La fonction cubic-bezier() permet un contrôle poussé de la courbe d’accélération. Quatre points p1, p2, p3, p4 sont nécessaires pour définir une courbe de Bézier. #elem { transition: 1s cubic-bezier(0.5, 1, 0.5, 0.8); } #elem { transition: 1s cubic-bezier(0.5, 2, 0.5, 0.8); } Vous trouvez plusieurs application en ligne qui permet de générer facilement les paramétres de la fonction cubic-bezier(). http://cubic-bezier.com
    64. 64. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com La fonction steps() • La fonction steps() permet de jouer une animation en "escalier" (image par image). #elem { transition: 1s steps(3, start); } #elem { transition: 1s steps(3, end); } De base, les navigateurs fournissent deux fonctions prédéfinis: • step-start: L'élément prendra la valeur finale de sa transition dès le déclenchement de la transition. Autrement dit, il n'y aura pas de transition visible. steps(1, start). • step-end: L'élément prendra la valeur finale de sa transition à la fin de la durée prévue par celle-ci. Autrement dit, on aura l'impression qu'un délai a eu lieu. steps(1, end).
    65. 65. © Proxym-IT http://twitter.com/proxymit Il faut pour cela utiliser @keyframes, lui donner un nom, puis gérer les "étapes" en pourcentage à l’intérieur de cette déclaration. Les mots-clés from et to correspondent respectivement à 0 et 100% Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com CSS3 : les animations • Les Animations permettent de modifier les valeurs de propriétés CSS plusieurs fois dans le temps. div{ animation: nomAnim 5s linear 2s; } @keyframes nomAnim{ from { color:blue; … … } 35% { color:green; … … } to { color:red; … … } } animation-name : le nom de l’animation à utiliser. animation-duration : le temps total de l’animation. animation-timing-function : la méthode d’interpolation (accélération, décélération). Voici quelques valeurs possibles : linear, ease, ease-in … animation-iteration-count : le nombre de répétition de l’animation. animation-direction : permet de jouer une animation en sens inverse animation-play-state : mettre en pause l’animation. En cours d’étude de suppression par le W3C. animation-delay : le temps avant que l’animation ne démarre. animation-fill-mode : conserver l’état de l’animation avant le début où après la fin de celle-ci. Il existe aussi la propriété raccourcie animation
    66. 66. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com CSS3 propriétés Tests CHROME FF SAFARI IE OPERA IOS ANDROID CSS Transforms 2D YES YES YES 9+ YES 2.1+ CSS Transforms 3D YES YES YES 10+ YES CSS Transitions YES YES YES 10+ YES CSS3 Animations Prefixed YES Prefixed 10+ YES
    67. 67. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Les filtres SVG Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com @font-face web fonts La transparence de couleur avec RGBa Text stroke Textwrapping
    68. 68. © Proxym-IT http://twitter.com/proxymit Styler les différents états Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les bonnes pratiques • Personnaliser l’aspect de boutons radio et checkbox en CSS. <form … > <div> <input type="checkbox" id="test1"> <label for="test1">Rouge</label> </div> <div> <input type="checkbox" id="test2" checked="checked"> <label for="test2">Jaune</label> </div> <div> <input type="checkbox" id="test3" disabled="disabled"> <label for="test3">Vert</label> </div> </form> [type="checkbox"] { display: none; } [type="checkbox"] + label { } [type="checkbox"]:checked + label { } [type="checkbox"]:checked + label:before { } [type="checkbox"]:disabled + label { } [type="checkbox"]:disabled:checked + label { }
    69. 69. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les bonnes pratiques • Automatiser la présentation classique des champs requis précédés ou suivis d’une petite étoile. <div> <label for="email" class="required">Email</label> <input type=« text" id="email" required > </div> input[required]::after { content: "*"; position: absolute; top:0; right:0; width: 15px; height: 15px; background: #DDD; } Label.required::after { content: " *"; color: #CA1111; vertical-align : top; }
    70. 70. © Proxym-IT http://twitter.com/proxymit Animation du conteneur Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les bonnes pratiques • Créer un slideshow automatique et contrôlable en CSS3. <div id= "slider" > <ul> <li> SLIDE 1 </li> <li> SLIDE 2 </li> <li> SLIDE 3 </li> <li> SLIDE 4 </li> </ul> <a href="#slid_1"></a> <a href="#slid_2"></a> <a href="#slid_3"></a> <a href="#slid_4"></a> </div> #slider { animation: slider 32s infinite; } @keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left: -300% } } Contrôle du contenu à l’aide des flèches « suivant » et « précédent » ou bien d’une « pagination » #slid_1:target ~ #slider { left: 0px; } #slid_1:target ~ #slider { left: -100px; } #slid_1:target ~ #slider { left: -200px; } #slid_1:target ~ #slider { left: -300px; }
    71. 71. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les bonnes pratiques • Effet de feuilles superposées. <blockquote> <p>C'est en forgeant qu'on devient forgeron</p> </blockquote> blockquote { … } blockquote, blockquote:after, blockquote:before { background: #fff; box-shadow: 0 0 4px rgba(0,0,0,0.4); } blockquote:after { transform: rotate(-0.6deg); } blockquote:before { transform: rotate(-1.2deg); right: 5px; left: -5px; }
    72. 72. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Le responsive design • Plus qu’une simple tendance, le responsive design est un ensemble d’outils et de technologies visant à réorganiser les éléments d’une page web en fonction des paramètres de l’appareil. • Le RWD repose sur 3 composants fondamentaux : les media queries (CSS3), les grilles fluides et les images flexibles.
    73. 73. © Proxym-IT http://twitter.com/proxymit Il y a deux façons de les utiliser : 1. en écrivant la règle directement dans le fichier .css 2. en chargeant une feuille de style .css différente en fonction de la règle. Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les medias queries • Les « medias queries » permettent de remplacer certains comportement CSS par d’autres en fonction des conditions d’affichage d’une page html selon le contexte (min/max , width, height, color, orientation, ect…) <!-- Media Query CSS dans une feuille de style --> <style> @media screen and (max-width: 600px) { … } </style> <!-- Media Query CSS dans un élément link --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
    74. 74. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Les règles disponibles L’idée des « media queries » est d’ajouter aux css standards des redéfinitions (ou d’autres règles) au cas ou certains cas de figure sont rencontrés. On peut détecter : • device-width , device-height : la taille de l’écran exprimée en pixel • color : le nombre de couleurs (monochrome, milliers de couleurs) • orientation : L’orientation et le ratio (portrait ou paysage, ou encore 4/3 ou 16/9) • device-width , device-height : largeur et hauteur du périphérique. • media : type d'écran de sortie. Quelques-unes des valeurs possibles : – screen : écran « classique » ; – handheld : périphérique mobile ; – print : impression ; – tv : télévision ; – projection : projecteur ; – all : tous les types d'écran. Les règles peuvent être combinées à l'aide des mots suivants : - only : « uniquement » ; - and : « et » ; - not : « non ».
    75. 75. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Définissions les frontières /* Landscape phones to portrait tablet */ @media screen and (max-width:767px){ /* Styles */ } /* Portrait tablet to landscape and desktop */ @media screen and (min-width:768px) and (max-width:979px){ /* Styles */ } /* Large desktop */ @media screen and (min-width:1200px){ /* Styles */ } Les résolution les plus populaire peuvent être en 6 points de rupture majeurs
    76. 76. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Une mise en page flexible • Utiliser une mise en page fluide est la meilleure façon d’être paré à toute les taille d’écran. • Oubliez les problèmes de calcules de dimension ingérables avec « box-sizing ». – J’ai un div de 67% avec un padding de 15px et une bordure de 3px… Avant : – Width final = 67% + 2*15px + 2*3px – Width total de la page > 100% Après : *{ – Width final = 67% box-sizing: border-box; }
    77. 77. © Proxym-IT http://twitter.com/proxymit img{ width:100%; max-width:100%; } Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com les images flexibles • Il s'agit de proposer des images dont la taille et la disposition s'ajustent automatiquement en fonction de la taille de l'écran. Attention, il faut prendre en compte la taille en pixels de l'image ainsi que le poids. • Un seul style est requis pour rendre vos images fluides. – Ajuster simplement le width : – N'oubliez pas MIN & MAX • l’attribut src d’une images ne peut pas être manipulé par un media query. – Background-image – Afficher /cacher le parent Pourquoi ne pas afficher/cacher l’image elle-même?  La majorité des navigateurs mobiles ne chargeront pas les images qui sont dans un parent en display:none;
    78. 78. © Proxym-IT http://twitter.com/proxymit Utiliser @viewportpour le responsive • De nombreux navigateurs mobiles simulent une vue desktop, affichant les pages en pleine résolution dans un tout petit écran. • Une puissante fonctionnalité, Le méta tag « viewport » dicte au navigateur quel comportement il doit adopter pour afficher une page. width: device-width; zoom: 1; Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com // en CSS @viewport { } <!– en HTML --> <meta name="viewport" conetent="width=device-width" >
    79. 79. © Proxym-IT http://twitter.com/proxymit Utiliser @viewportpour le responsive Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Sans viewport Avec viewport
    80. 80. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com Exemples CHROME FF SAFARI IE OPERA Mobile – Tablette – Desktop Compatibilité des Media Queries avec les navigateurs. Responsive Design YES YES YES 9+ YES
    81. 81. © Proxym-IT http://twitter.com/proxymit Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90 http://www.proxym-it.com

    ×