Formation html5 css3 java script

Formation html5 css3 java script
© Tous les droits sont résérvés Présenté Par : Mohamed ELLOUZE
22 I- Introduction II- Les bases de HTML5 III- Travailler en HTML5 avec les nouvelles balises et propriétés IV- La mise en forme avec CSS3 V- Les nouveaux API du HTML5 VI- Responsive Web Design VII- Conclusion Sommaire
HTML5
HTML5 - Structure de base Structure de base d’une page HTML5  Pour XHTML 1.0, il fallait écrire : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">  Avec HTML 5, il suffit de mettre une balise doctype courte <!DOCTYPE html>.  Utiliser le site http://validator.nu pour valider le contenu de votre page web 4
 Les éléments de section (section, article, nav, aside, header, footer) possèdent une valeur sémantique particulière contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre.  Plusieurs balises ont été introduites avec HTML5 : <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. Structure et sémantique  Pour définir ses nouvelles balises, des statistiques ont été élaborées sur les attributs id les plus fréquemment attribués aux grands découpages de pages HTML. http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html 5
6 Structure et sémantique Exemple d’utilisation des nouvelles balises HTML5
7  Une technique alternative consiste à déclarer ces éléments au préalable en JavaScript. Un script (nommé html5shim ou html5shiv) est prévu à cet effet et mis à disposition à cette adresse :  Pour les versions antérieures à Internet Explorer 9, ces nouveaux éléments ne sont pas reconnus par l'analyseur syntaxique. Étant muni d'un commentaire conditionnel, il ne sera chargé que pour ces versions spécifiques (Internet Explorer 6 à 8 inclus). Structure et sémantique Un cas particulier : Internet Explorer <9
8 Nouveautés avec HTML5
9 Nouveautés avec HTML5 La balise <details> : La balise <mark>:  La balise <mark> est employée pour mettre en avant une partie d'un contenu  La balise <details> définit les détails supplémentaires que l’utilisateur peut afficher ou masquer à la demande.
10 La balise <figure> : Nouveautés avec HTML5  L'élément <figure> s'utilise avec l'élément <figcaption> pour définir des illustrations, des diagrammes, des schémas, des tableaux, … La balise <time> :  L’information n’attends pas et Google indexe toujours plus vite … Si vous éditez un blog ou un site dont vous datez les articles, vous aurez surement remarqué que, suite à son indexation dans Google, sous le titre de votre page et juste avant le début de sa description, dans la page des résultats, apparait la date de publication
11 Nouveautés avec HTML5 L’attribut contenteditable : contentEditable  true : l'élément est éditable.  false : l'élément n'est pas éditable.  inherit : prend la valeur de l'élément parent.  L'attribut contentEditable indique que l'élément est une zone éditable. L'utilisateur peut en changer le contenu et ainsi manipuler le balisage. NB: Pour plus de détail vous pouvez aller sur le site WHATWG
 Il faudra penser à vérifier les paramètres du navigateur. 12 Nouveautés avec HTML5 L’attribut spellcheck :  Permet de savoir si l'orthographe de l'élément doit être vérifiée.
Web Forms 2.0
14  HTML5 apporte de nombreuses fonctionnalités nouvelles relatives aux formulaires. De nouveaux types de champs sont en effet apparus avec cette version. Les Formulaires  T y p e = d a t e  T y p e = c o l o r  T y p e = e m a i l Clavier de saisie email sur iPhone  Sachez que certains navigateurs, comme les navigateurs mobiles sur iPhone et Android, affichent un clavier adapté à la saisie d'e-mail
15 Les Formulaires  Type=url  Type=range Clavier de saisie de numéro de téléphone sur iPhone  Avec le type url, on peut demander à saisir une adresse absolue (commençant généralement par http://) Clavier de saisie d’URL sur iPhone Le type range permet de sélectionner un nombre avec un curseur (aussi appelé slider) Vous pouvez personnaliser le fonctionnement du champ avec les attributs suivants :  min : valeur minimale autorisée.  max : valeur maximale autorisée.  step : c'est le « pas » de déplacement.  Type=tel  Ce champ est dédié à la saisie de numéros de téléphone Le champ s'affichera en général avec des petites flèches pour changer la valeur.  Type=url
16  placeholder est un attribut qui permet de renseigner un texte indicatif par défaut dans un champ de formulaire. C'est une valeur qui s'efface dès que l'utilisateur active le champ de formulaire  Le placeholder n'est qu'un indice supplémentaire, il ne doit pas être indispensable.  L'attribut required permet de rendre obligatoire le remplissage d'un champ et bloquer la validation du formulaire si l'un des champs (concernés par cet attribut) n'a pas été renseigné. Les Formulaires L’attribut Placeholder : L’attribut required : Ou bien
17 Les Formulaires  L’attribut Pattern permet à l'utilisateur d'être informé très rapidement de ses erreurs et de les corriger étape par étape grâce aux indications fournies par les infobulles situées sous chacun des champs invalides. L’attribut Pattern : Ce champ attend une valeur numérique d'au moins 16 chiffres  L'attribut pattern peut être placé uniquement sur l'élément <input> ayant pour types text, search, password, url, tel, email. L’attribut autofocus:  Vous pouvez placer automatiquement le curseur dans l'un des champs de votre formulaire avec l'attribut autofocus. Dès que le visiteur chargera la page, le curseur se placera dans ce champ. Sélectionner automatiquement un champ
18 Les Formulaires  Mis à « off », « autocomplete » désactive la complétion automatique des champs basée sur l’historique de saisie. L’attribut autocomplete:  N’oubliez pas de verifier les paramètres de votre navigateur  <datalist> est un élément de formulaire permettant de lier une liste de choix à un élément input. Il est voué à fournir des fonctionnalités d'auto- complétion ou d'auto-suggestion, dans un formulaire classique ou un champ de recherche L’élément <datalist> :
19 Les Formulaires http://scriptol.fr/html5/formulaire.php https://miketaylr.com/code/input-type-attr.html  Vérifier la compatibilité de votre navigateur grâce au site miketaylr.com  Tester directement sur scriptol.fr les nouvelles widgets HTML5
Vidéo & Audio
HTML5 supports Multimedia Introduction  Depuis l'arrivée de Youtube et Dailymotion, il est devenu courant aujourd'hui de regarder des vidéos sur des sites web. Cependant, aucune balise HTML ne permettait jusqu'ici de gérer la vidéo. Il fallait à la place utiliser un plugin, comme Flash.  Mais utiliser un plugin a de nombreux défauts : on ne peut pas toujours contrôler son fonctionnement et en plus il y a parfois des failles de sécurité.  C'est pour cela que « The World Wide Web Consortium (W3C) » a introduit deux nouvelles balises en HTML5 : <video> et <audio> 22
HTML5 supports Multimedia Playing Video  L’objectif de W3C d’introduire une nouvelle balise <video> était de pouvoir standardiser la lecture d’une vidéo sur le web sans le recours d’utiliser un Plugin.  Malheureusement, l’objectif a été contourné par l’absence d’accord sur le format vidéo qui devrait être utilisé dans les navigateurs Web.  Chaque navigateur pourra décider du format supporté  Chaque développeur sera donc obligé de préciser le type de format à supporter pour chaque navigateur 23
HTML5 supports Multimedia Video Formats  Un Codec gratuit et libre de droits. Il est bien reconnu sous Linux mais, sous Windows, il faut installer des programmes pour pouvoir le lire.  L'un des plus puissants et des plus utilisés aujourd'hui  Un autre codec gratuit et libre de droits, plus récent. Proposé par Google Ogg/Theora (.ogv extension) : Supporté par : Supporté par : Supporté par : WebM/VP8 (.webm extension) : MPEG-4/H.264 (.mp4 extension) : 23
HTML5 supports Multimedia Implémentation de la balise <video>  La balise <video> est utilisée pour lire une vidéo.  L’attribut « controls » permet de fournir des contrôles pour démarrer et arrêter la vidéo, pour afficher et définir l'emplacement du curseur vidéo et pour maximiser et restaurer la taille de la vidéo sur l'écran. 24
HTML5 supports Multimedia Configuring the <video> element :  La balise <video> pourra être configurée. Voici la liste des attributs :  autoplay : Indique que la vidéo sera joué dès le chargement  controls : Indique que les boutons de contrôles (pause, play,..) seront affichés  height : Indique la hauteur en pixels de l’élément <video> rendu  loop : Indique que la vidéo sera rejoué dès qu’elle atteint la fin  muted : Indique que l’audio est muet  poster : permet de spécifier l’image à afficher quand la vidéo est en mode arrêt.  preload : spécifie comment la vidéo doit être chargé (auto, metadata,none)  src : spécifie l’URL de la vidéo  width : Indique la largeur en pixels de l’élément <video> rendu 25
HTML5 supports Multimedia La balise <source> :  La balise <source> permet de spécifier la source de la vidéo. Au minimum on aura besoin de définir l’attribut « src ».  Il faudra fournir de nombreuses sources afin que le navigateur pourra choisir le codec le plus approprié (ex: Miro Video Converter).  Dans l’exemple ci-dessous, la même vidéo « movie » a été générée avec trois formats différents (avec Firefogg) afin que le film pourra être lu dans n’importe quel navigateur. 26
HTML5 supports Multimedia WebVTT (Video Text Tracks) :  Le W3C a mis au point une nouvelle norme, appelée WebVTT (Web Video Text Tracks), qui offre la possibilité d'afficher des sous-titres au niveau de la vidéo. 27 HTML5 Video Caption Maker  Le lecteur vidéo HTML5 a besoin de fichiers de piste correctement construits, ce qui peut être compliqué s’ils sont créés «à la main». La version de démonstration HTML5 Video Caption Maker est un outil simple mais efficace permettant de créer des fichiers au format WebVTT.
HTML5 supports Multimedia 28 Gérer d’autres langues :  Tous les navigateurs implémentant la balise <track> pourront supporté le format WebVTT.
HTML5 supports Multimedia WebVTT – Mise en Forme: Compatible uniquement pour Chrome, Safari, iOS7 et Opera 16+. 29  vertical: lr | rl  line: XX%  align: start | middle | end  position: XX%  size: XX%
HTML5 supports Multimedia Playing Audio :  L’objectif de W3C d’introduire une nouvelle balise <audio> était de pouvoir standardiser la lecture d’une audio sur le web sans le recours d’utiliser un Plugin.  Malheureusement, l’objectif a été contourné par l’absence d’accord sur le format audio qui devrait être utilisé dans les navigateurs Web.  Chaque navigateur pourra décider du format supporté  Chaque développeur sera donc obligé de préciser le type de format à supporter pour chaque navigateur 30
HTML5 supports Multimedia Audio – Les différents Formats : 31 MP3  C'est l'un des plus vieux, mais aussi l'un des plus compatibles, ce qui fait qu'il est toujours très utilisé. Supporté par : AAC  Utilisé majoritairement par Apple sur iTunes, c'est un format de bonne qualité. Les iPod, iPhone et autres iPad savent les lire sans problème. Supporté par : OGG  Le format Ogg Vorbis est très répandu dans le monde du logiciel libre, notamment sous Linux. Ce format a l'avantage d'être libre. Supporté par : WAV (format non compressé) : évitez autant que possible de l'utiliser car il est très volumineux.
HTML5 supports Multimedia Implémentation de la baslise <audio> :  La balise <audio> est reconnue par tous les navigateurs récents, y compris Internet Explorer à partir de la version 9 (IE9). 32  Dans l’exemple ci-dessous, la même audio « kittycat » a été générée avec trois formats différents afin que la chanson pourra être lu dans n’importe quel navigateur.
33
34 La norme Microdata  Bien que les microformats existent depuis 5 ou 6 ans, ce n’est qu’avec l’arrivée de HTML5 que la profession et les outils sont suffisamment mûres pour commencer à les exploiter réellement. L’origine : Les microformats  Les microformats sont une manière d'attacher un sens supplémentaire à l'information publiée sur une page web. Ils proposent une syntaxe qui s’apparente à du HTML classique et s’applique bien en dehors de la norme HTML5 puisqu’il est compatible avec HTML4, ou XHTML1.0  Ils utilisent l’attribut class et certaines valeurs bien précises afin qu’il soit interprété comme une donnée bien spécifique.
35 Fraicheur avec HTML5 : Microdata  itemscope : crée un nouvel item  itemtype : couplé à itemscope, il accueille une URL vers la référence du schéma (ex : “http://schema.org/Review”)  itemid : définit un identifiant unique pour l'item  itemprop : indique la nature du contenu  itemref : permet de créer une référence, c'est-à-dire lier un item avec un autre, qui fournirait des informations plus détaillées.  Sortie avec HTML5, Les microdonnées (Microdata en anglais) sont représentées par l’arrivée de nouveaux attributs en HTML5. Il est alors possible de donner la référence du document directement au sein de l’élément porteur de ces informations.  Microdata ajoute 5 attributs utilisables sur la plupart des éléments HTML :  Google, Bing et Yahoo se sont alliés pour créer une nouvelle référence nommée schema.org. Il s’agit d’un site mettant à disposition une listes de vocabulaire pouvant être utilisé au sein des Microdatas. La norme Microdata
36 La norme Microdata Exemple : NB: vous pouvez créer vos Microdata à partir du site : http://schema-creator.org/
37http://www.w3.org/ http://developers.whatwg.org/http://www.whatwg.org/ Liens utiles http://www.w3schools.com/
CSS3
Introduction Historique  Le langage CSS a été mis en place au milieu des années 90’ et a connu plusieurs versions depuis. La version qui sert de base au codage actuel, la "2.1" a été officiellement adoptée en 2007 et n’est toujours pas implémentée partout.  CSS3 n’est pas encore adopté partout mais plusieurs navigateurs tirent vers l’avant cette norme de description CSS. Il existe plusieurs sites qui référencent la compatibilité de chaque navigateur avec chaque fonctionnalité. http://fmbip.com/litmus/http://www.normansblog.de/demos /browser-support-checklist-css3/
Les moteurs de rendu webkit Trident Geckowebkit Presto  Tous les navigateurs ne font pas appel au même moteur de rendu.
Les préfixes  Du faite de la non prise en charge commune par les navigateurs, beaucoup de fabricants de moteur de rendu sont arrivées à l’utilisation des préfixes.  -moz- pour Firefox  -webkit- pour Chrome, Safari, iPhone, Android  -o- pour Opera  -ms- pour Internet Explorer  Seuls les navigateurs modernes, reconnaissent les nouvelles propriété CSS3. Il s'agit d'Internet Explorer 9+, Firefox 4+, Chrome 10+, Safari 5.1+, Opera 10.5+, Opera Mobile 11+.  Pour rendre la déclaration compatible avec de vieilles versions, on devra préfixé plusieurs fois la propriété par :
42 Nouveautés avec CSS3 Box shadow  La déclaration "box-shadow", comme son nom le laisse entendre, permet de mettre une ombre portée à un élément de type block.  Pour des raisons de compatibilité avec les versions antérieurs, on devra déclarer plusieurs fois le box shadow en le précédent de préfixes - moz- et -webkit- décalage horizontal vers la droite décalage vertical vers le bas Étandue du dégradé
43 Nouveautés avec CSS3 Border Radius :  border-radius permet de manière très intuitive d'arrondir un ou plusieurs angles d'un élément en indiquant la valeur de l'arrondi souhaité.  Vous pouvez utiliser le site http://border-radius.com/ pour un résultat instantanée de la fonctionnalité border- radius et une génération automatique du code.
44 Nouveautés avec CSS3  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. Gradient 1- Linear Gradient 2- Radial Gradient  x et/ou y définissent la direction du dégradé. Exemple : "to right" ou "to left bottom"  couleur : le nom, la valeur hexadécimal ou la valeur RGBa  Forme : circle, ellipse  x et/ou y point d'origine du dégradé radial,  couleur : nom, valeur hexadecimal, RGBa
45 Nouveautés avec CSS3 @font-face  Grâce à @font-face on peut à présent utiliser des polices de caractère exotiques et laisser cours à son inventivité.  Obtenir tous les formats nécessaires - Récupérer votre police de caractère (ex:Candlescript.otf sur daFont)  Les navigateurs ou nouveau médias (tablette, smartphone) ne suivent pas les mêmes standards. Pour faire face à tous ceux-ci, il faut pas moins de 4 fichiers (On pourra utiliser le générateur FontSquirrel pour fournir tous les formats nécessaires )  TrueType (Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+)  EOT (Internet Explorer 4+)  WOFF (Firefox 3.6+, Internet Explorer 9+, Chrome 5+)  SVG (iPad and iPhone)
46 Nouveautés avec CSS3  Pour des raisons de performance il faudra que l'ordre de déclaration des différents formats soit du plus léger au plus lourd.
47 Nouveautés avec CSS3  L’écriture RGBa introduit la notion de transparence dans les valeurs associées à une couleur. Elle permet de jouer sur les effets d’opacité entre les différentes couches d’éléments HTML. RGBa:  Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity. En effet, opacity s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement. Opacity:
48 Nouveautés avec CSS3  La propriété text-shadow permet de créer des ombres sur un texte. Text shadow HSL(A)  La notation HSL (Hue, Saturation, Lightness) un peu moins commune permet d’obtenir les mêmes résultats en jouant sur la teinte, la saturation et la luminosité.
49  Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché (:hover, :focus, :active, ..) Nouveautés avec CSS3 Transition  Les deux propriétés minimales nécessaires pour rendre fonctionnelle une transition en CSS 3 sont transition-property et transition-duration. Il existe d'autres propriétés CSS spécifiques aux transitions : transition- timing-function, transition-delay
50  Permet de définir quelles propriétés seront affectées par les transitions. Nouveautés avec CSS3 Transition-property valeur Explication all (valeur par défaut) toutes les propriétés animables seront animés property Le nom d’une propriété parmi celles-ci none Aucune propriété ne sera animé  Cette propriété permet de préciser la durée de la transition (par défaut elle vaut 0). Transition-duration Exemple
51 Nouveautés avec CSS3  Pour calculer les valeurs intermédiaires, le navigateur procède à une interpolation. La fonction calculant la valeur de cette interpolation influence directement la fluidité de l'animation. Transition-timing-function  Certaines animations sont plus rapides sur le début et ralentissent sur la fin, d'autres sont constantes dans leur vitesse (linéaires).  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èlere sur la fin.  ease-in-out : Le départ et la fin sont lents.  Les fonctions prédéfinies sont les suivantes :
52 Nouveautés avec CSS3  La transition commence, par défaut, dès que la propriété est changée suite à l'événement. La propriété transition-delay permet d'adapter ce comportement en retardant ou en avançant le début de la transition. Transition-delay La notation raccourcie transition  Il existe une notation raccourcie pour déclarer les transitions. La syntaxe est la suivante :  Il est possible de préciser plusieurs transitions à l'aide de la propriété en séparant les déclarations par des virgules
53 DEMO
54  Le CSS3 présente un nouveau module connu, à juste titre, en tant que mise en page en multi-colonnes. Il permet de spécifier en combien de colonnes le texte doit être divisé et comment celles-ci doivent apparaître. Les multiples colonnes  column-count : Nombre de colonnes  column-width : Largeur de chaque colonne  column-gap : l’espace entre chaque colonne  column-rule : une bordure entre chaque d’elles  Il y a quatre propriétés qui se rapportent à la mise en page de multiples colonnes en CSS3, permettant de définir :  Actuellement, un préfixe propre au navigateur est également nécessaire pour définir comment il doit afficher la propriété.  Il faut savoir qu’un générateur de multi-colonnes performant existe qui vous simplifiera encore la tâche. Nouveautés avec CSS3
55 Exemple Nouveautés avec CSS3
56 Les sélecteurs CSS3 Les sélecteurs d’attributs  Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" commence exactement par la valeur "stringValue".  Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" finit exactement par la valeur "stringValue".  Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" comporte au moins une fois la valeur "stringValue". [attr^="stringValue"] [attr$="stringValue"] [attr*="stringValue"] Exemple
57 Les sélecteurs CSS3 Le combinateur d’adjacence directe  Permet d’ajouter un style à tous les éléments qui suivent un élément particulier. Exemple
58 Les sélecteurs CSS3  :nth-child(expression : Ce sélecteur permet de cibler tous les éléments en se basant sur leur position dans la liste des enfants de leur parent. Exemple Les pseudo-classes  expression peut être un nombre, une expression numérique ou un mot clé tel que "odd" ou "even".  Je vous invite également à regarder :nth-last-child(expression), :last-child, :first-child, :nth-of-type(expression), :first-of-type, :only-child, …
59 Les sélecteurs CSS3  Correspond aux éléments cochés d'un formulaire.  Représente un élement qui n'est pas représenté par l'expression donnée en argument. Les pseudo-classes  Correspond aux éléments dont le contenu textuel contient la sous-chaîne donnée en argument. :checked :contains(value) :empty  Correspond aux éléments n'ayant pas d'enfant. :not([expression])
60 Les sélecteurs CSS3 Les pseudo-éléments ::first-line  Applique la règle de style à la première ligne du texte de l'élément.  Applique la règle de style à la première lettre du texte de l'élément.  Applique la règle de style à la sélection du texte de l'élément faite par l'utilisateur.  Génère un contenu avant ou après un contenu d'un élément. ::first-letter ::selection ::before et ::after
Les API JavaScript
Web Storage  Cette fonctionnalité est similaire au cookies de session HTTP mais permet de sauvegarder les données voulues dans une "base de données" coté client (c'est a dire au niveau du navigateur).  La fonctionnalité Storage est une nouveauté HTML5, Ce procédé va permettre de simplifier le processus de sauvegarde et de persistance des données.  On peut enregistrer des données même quand la connexion internet est coupé (le storage étant dans le navigateur).  On peut gérer des données par session (si vous avez 2 fenêtres sur le même site, une action sur le sessionStorage sera répercuté sur l'autre).  On peut gérer des données par page (localStorage) Intérêt du storage NB : Le storage a pour but de répondre à une des limites des cookies, c'est a dire leur taille (4 ko pour les cookies et jusqu'à 10Mo pour le storage!). 62
63 Web Storage 63  L'interface sessionStorge mémorise les données sur la durée d'une session de navigation, et sa portée est limitée à la fenêtre ou l'onglet actif. Lors de sa fermeture, les données sont effacées.  L'interface localStorage mémorise les données sans limite de durée de vie. Contrairement à sessionStorage, elles ne sont pas effacées lors de la fermeture d'un onglet ou du navigateur. La portée de localStorage est de facto plus large : il est possible de l'exploiter à travers plusieurs onglets ouverts pour le même domaine ou plusieurs fenêtres ; à partir du moment où il s'agit bien sûr du même navigateur. HTML LocalStorage sessionStorage  Web Storage met à disposition deux interfaces nommées sessionStorage et localStorage dont la seule différence concerne la persistance des données.
64 Web Storage Demo
65 HTML5 et la Géolocalisation  Une des nouvelles fonctionnalités intéressantes que HTML 5 fournit est la capacité de géo-localiser l’utilisateur peu importe la plateforme sur laquelle l’application s’exécute.  HTML 5 fournit deux fonctionnalités de géo-localisation : soit obtenir la position actuelle ou effectuer un suivi de la position dans le cas où la personne se déplace (watch). Récupérer les coordonnées
66 HTML5 et la Géolocalisation  La méthode getCurrentPosition() peut prendre un second paramètre le callback d’erreur. Il sera appelée dans les cas où:  L’utilisateur refuse l’autorisation d’accès à sa position  L’emplacement de l’utilisateur n’ait pas pu être déterminé  Le service de géolocalisation ne réponde pas assez vite
67 HTML5 et la Géolocalisation  Enfin, le 3ème paramètre de getCurrentPosition() sert à indiquer certaines options particulières, écrites de la forme suivante : {nom:valeur, nom:valeur, …}. On peut ainsi spécifier :  L’utilisation du GPS pour obtenir des coordonnées beaucoup plus précises  Un Timeout si l’on a besoin d’une réponse avant un certain délai  La durée de vie maximale d’une coordonnée envoyée par l’utilisateur
68 HTML5 et la Géolocalisation Suivre les déplacements  Dans de nombreux cas, on aimerait mettre à jour la position de l’utilisateur si celui-ci se déplace. Avec HTML5, il suffit simplement de remplacer la méthode getCurrentPosition() par watchPosition()  Comme on veut permettre à l’utilisateur d’arrêter le suivi de ses déplacements, on ajoute un simple lien effectuant un appel à clearWatch().
69 Demo HTML5 et la Géolocalisation
Responsive Web Design 70
71 Le site http://gs.statcounter.com/ montre des courbes éloquentes concernant l'évolution du mobile par rapport aux ordinateurs de bureau Evolution de l’usage Mobile Vs Desktop
72 Vous avez un site ou vous prévoyez d'en faire un ? Vous vous demandez certainement "Comment je peux faire en sorte que mon site soit adapté aux mobiles ?". Site dédié, application ou responsive ?  Un site dédié : Un projet de site dédié consiste à concevoir deux ou plusieurs entités différentes selon le dispositif visé : un site principal, un site pour smartphones, un site pour tablettes, etc  Une application native : Une application native est un produit développé spécifiquement dans divers "langages" (iOS, Android, WindowsPhone) et qui se télécharge et se référence au sein d'un "Store" (AppStore, Google Play, Windows store).  Une version Responsive : une notion de conception de sites web qui permet une consultation optimale facilitant la lecture et la navigation à travers une large gamme d'appareils (moniteurs d'ordinateur, smartphones, tablettes, TV, etc.)
73 Un site dédié : une fausse bonne idée ? Exemple o Possibilité d'affiner précisément la structure du site et ses contenus en regard du périphérique utilisé o Possibilité de cibler et de s'adapter à des fonctionnalités variées (notamment le touch) Version mobile mobile.lemonde.fr Version ordinateur (Desktop) •www.lemonde.fr Avantages Inconvénients o Contenu dupliqué o La maintenance de plusieurs versions de site
74 Web mobile vs native apps - Simplicité de mise en œuvre (technologies et langages habituels) - Directement multiplatefore (aucune spécifité d’OS) - Déploiement simplifié (distribution unique) - Google peut pointer dessus (utilisation classique des moteurs) - Contrôle complet d’un site (simple modification,suppression,..) - Un site web peut être applicatif (intéraction avec des données dynamiques) - Utilisation des applications (carnet d’adresse, téléphone) - Meilleures gestion des périphériques (caméra, microphone,…) - Pas de connexion web (nature embarqué du contenu) - Réception de données en continu (de données Push) - Meilleure immersion d’interface (ergonomie, performances, densité de pixels) Comparatifs non exhaustifs web site native app
75  Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, ordinateur de bureau). Introduction Qu’est ce que le Responsive Web Design  Une expérience utilisateur "Responsive" réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages.  Le responsive web design se base sur les Media Queries pour faire en sorte que le design s'adapte à toutes les résolutions d'écran.
76 Responsive Web Design Une version Responsive  Des coûts inférieurs aux techniques citées précédemment  Une maintenance de projet facilitée (un seul css, un seul html,..)  Une mise à jour transparente et un déploiment multi-plateformes  Prévoir des tests nombreux et variés tout au long du projet  Il est difficile de contourner les limites ergonomiques des navigateurs web s'adapter à tout type d'appareil de manière transparente pour l'utilisateur Avantages Inconvénients
77 Les Medias Queries  Les Media Queries sont apparues avec les spécifications CSS3.  Les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même. Présentation NB : Les media queries fonctionnent sur tous les navigateurs récents, y compris Internet Explorer à partir de la version 9 (IE9). o En écrivant la règle directement dans le fichier .css Il y a deux façons de les utiliser : o En chargeant une feuille de style .css différente en fonction du péréfirique utilisé
78 o color : gestion de la couleur (en bits/pixel) o height : hauteur de la zone d'affichage (fenêtre) o width : largeur de la zone d'affichage (fenêtre) o device-height : hauteur du périphérique o device-width : largeur du périphérique o orientation : orientation du périphérique (portrait ou paysage) o media : type d'écran de sortie. Voici les plus utilizes :  screen : pour principalement les moniteurs couleurs  handheld : périphérique mobile  print : écran en mode apercu avant impression  tv : pour les appareils de type télévision  projection : pour les presentations en projection  all : convient pour tous les types d'écran Les règles disponibles Utilisation des Medias Queries  Voici les principales règles permettant de construire des Medias Queries : NB : On peut rajouter le préfixe min- ou max- devant la plupart de ces règles
 La Media Queries est composé de plusieurs éléments : le media et les propriétés, le tout est lié avec des opérateurs logiques. Utilisation des Medias Queries  Le média, c'est lui qui va définit le support affichage pour lequel vont s'appliquer des propriétés css spécifiques.  Une propriété, c'est par exemple une largeur de la zone d'affichage, une orientation du périphérique,... Une propriété s'écrit toujours entre parenthèse : " (orientation:landscape) " NB : Les propriétés sont précédées d'un opérateur logique et peuvent être cumulées. 79 1- Support d'affichage 2- Les propriétés
80 Les opérateurs logiques sont and , only, not , "," (virgule). Utilisation des Medias Queries 3- Les opérateurs logiques 1- L’opérateur logique « and »  Lorsque on utilise des requêtes séparées par and, il faut obligatoirement utiliser un media et une propriété ou une propriete et une propriété. NB : Si le media est homis, alors le navigateur considère qui est à all
81 Utilisation des Medias Queries 2- L’opérateur logique « only » 3- L’opérateur logique « not »  Les anciens navigateurs, notamment IE6, IE7 et IE8, ne connaissent pas les media queries mais sont capables d'interpréter le début de la règle (ils savent lire @media screen par exemple). Ils vont donc lire les propriétés CSS qui suivent même s'ils ne sont pas concernés par la règle ! Pour éviter cela, une astuce consiste à utiliser le mot- clé only que ces vieilles versions ne connaissent pas : « @media only screen » ne provoquera pas de bug sur les vieux navigateurs.  L'utilisation de not inverse les conditions. Si la requête renvoi vrai (true) alors je n'interprète pas ce qui est entre accolade ("{}"), Si la requête renvoi faux (false) alors j'interprète ce qui est entre accolade ("{}")
82 4- L’opérateur logique « virgule »  Lorsque vous utilisez des requêtes séparées par des virgules, alors chaque requête entre les virgules est analysée individuellement et si une des requêtes est valide alors j'interprète ce qui est entre accolade ("{}")  Les périphériques mobiles ne dépassant pas 480 px de large, on pourra viser uniquement les navigateurs mobiles avec cette media query : Exemple de Medias Queries pour cibler les smartphones Utilisation des Medias Queries
83 Mobile first « Prendre en compte les contraintes du mobile pour se concentrer sur l’essentiel du service que nous concevons. »  Une approche Mobile First consiste à répondre à de nombreuses contraintes et donc faire des choix pour se centrer sur l’essentiel.  Cette approche incite les webdesigners à commencer par proposer la version mobile et par la suite developer la version desktop. Ainsi, les navigateurs mobiles, qui sont moins puissants, récupèreront les règles CSS destinées au mobile et ignoreront les autres destinées au desktop.  Mobile First est une approche qui a été proposée par Luke Wroblewski en 2011 dans son livre Mobile First
Adobe a développé une application incontournable « Edget Inspect cc» qui permet d’afficher , en temps réel, l’ensemble de modifications apportés sur une page web sur différents terminaux mobiles. https://creative.adobe.com/fr/products/inspect 1- Télécharger Edge Inspect sur votre ordinateur 2- Installer l’extension pour navigateur Google Chrome 3- Installer le client mobile sur vos appareils Adobe Edge Inspect cc Installation : Pour plus de détail : Comment tester son site sur différents terminaux mobiles
85 http://mediaqueri.es/ http://ucsd.edu/ http://www.arrowfinco.com/ Demo http://mediaqueri.es/ Demo
86 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0 Parts de marché des navigateurs web Browser Statistics
Différences entre navigateurs Comprendre les différences entre navigateurs  Des sites comme normansblog.de et caniuse.com tiennent notamment à jour une liste des fonctionnalités HTML et CSS prises en charge par les différentes versions de chaque navigateur  Il existe sous Windows un programme appelé IETester. Il permet de vérifier le rendu de son site sous différentes versions d'Internet Explorer normansblog.decaniuse.com
88
89 Questions
2ème Session Offline Web Application Workers et Messaging WebSocket SVG Grille fixe Transformation 3D Canvas Grille fluide Drag’n’Drop Timers Web SQL Database WAI-ARIA Initializr modernizr

Check these out next

Formation html5 css3 java script

Recommandé

Contenu connexe

Présentations pour vous(20)

En vedette(17)

Similaire à Formation html5 css3 java script(20)

Plus de Arrow Group(7)

Dernier(20)

Formation html5 css3 java script

Notes de l'éditeur