Upload
arrow-group
View
288
Download
6
Embed Size (px)
Citation preview
© 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émentsgénériques comme span ou div qui ont un rôle totalement neutre.
Plusieurs balises ont été introduites avecHTML5 :
<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 lesattributs id les plus fréquemment attribués aux grands découpages de pagesHTML. 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 enJavaScript. Un script (nommé html5shim ou html5shiv) est prévu à ceteffet 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 cesversions 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> estemployée pour mettreen avant une partied'un contenu
La balise <details> définit les détails supplémentaires que l’utilisateurpeut 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éfinirdes illustrations, des diagrammes, des schémas, des tableaux, …
La balise <time> :
L’information n’attends pas et Googleindexe toujours plus vite … Si vouséditez un blog ou un site dont vousdatez les articles, vous aurez surementremarqué que, suite à son indexationdans Google, sous le titre de votrepage et juste avant le début de sadescription, 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 manipulerle 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 auxformulaires. De nouveaux types de champs sont en effet apparusavec cette version.
Les Formulaires
Type=date
Type=color
Type=email
Clavier de saisie email sur iPhone
Sachez que certains navigateurs, comme lesnavigateurs 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 à saisirune adresse absolue (commençant généralementpar http://)
Clavier de saisie d’URL sur iPhone
Le type range permet de sélectionner un nombreavec un curseur (aussi appelé slider)
Vous pouvez personnaliser le fonctionnement duchamp 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 detéléphone Le champ s'affichera en général
avec des petites flèches pour changerla valeur.
Type=url
16
placeholder est un attribut qui permet de renseigner un texte indicatifpar défaut dans un champ de formulaire. C'est une valeur qui s'effacedès que l'utilisateur active le champ de formulaire
Le placeholder n'est qu'un
indice supplémentaire, il ne doitpas être indispensable.
L'attribut required permet de rendre obligatoire le remplissage d'unchamp 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 rapidementde ses erreurs et de les corriger étape par étape grâce aux indicationsfournies 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 lecurseur dans l'un des champs de votreformulaire avec l'attribut autofocus. Dèsque le visiteur chargera la page, lecurseur se placera dans ce champ.
Sélectionnerautomatiquement un champ
18
Les Formulaires
Mis à « off », « autocomplete » désactive la complétion automatiquedes 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 dechoix à 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 champde 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 courantaujourd'hui de regarder des vidéos sur des sites web. Cependant,aucune balise HTML ne permettait jusqu'ici de gérer la vidéo. Ilfallait à la place utiliser un plugin, comme Flash.
Mais utiliser un plugin a de nombreux défauts : on ne peut pastoujours contrôler son fonctionnement et en plus il y a parfois desfailles de sécurité.
C'est pour cela que « The World WideWeb Consortium (W3C) » a introduitdeux nouvelles balises en HTML5 :<video> et <audio>
22
HTML5 supports Multimedia
Playing Video
L’objectif de W3C d’introduire une nouvelle balise <video> était depouvoir standardiser la lecture d’une vidéo sur le web sans lerecours d’utiliser un Plugin.
Malheureusement, l’objectif a été contourné par l’absence d’accordsur le format vidéo qui devrait être utilisé dans les navigateursWeb.
Chaque navigateur pourra déciderdu format supporté
Chaque développeur sera doncobligé de préciser le type deformat à supporter pour chaquenavigateur
23
HTML5 supports Multimedia
Video Formats
Un Codec gratuit et libre de droits. Il est bien reconnu sous Linuxmais, sous Windows, il faut installer des programmes pour pouvoirle 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é parGoogle
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 pourdémarrer et arrêter la vidéo, pourafficher et définir l'emplacementdu curseur vidéo et pourmaximiser et restaurer la taille dela 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 esten 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> rendu25
HTML5 supports Multimedia
La balise <source> :
La balise <source> permet de spécifier la source de la vidéo. Auminimum on aura besoin de définir l’attribut « src ».
Il faudra fournir de nombreuses sources afinque le navigateur pourra choisir le codec leplus approprié (ex: Miro Video Converter).
Dans l’exemple ci-dessous, la même vidéo« movie » a été générée avec trois formatsdifférents (avec Firefogg) afin que le filmpourra être lu dans n’importe quel navigateur.
26
HTML5 supports Multimedia
WebVTT (Video Text Tracks) :
Le W3C a mis au point une nouvellenorme, appelée WebVTT (Web VideoText Tracks), qui offre la possibilitéd'afficher des sous-titres au niveau dela vidéo.
27
HTML5 Video Caption Maker
Le lecteur vidéo HTML5 a besoin de fichiers de pistecorrectement construits, ce qui peut être compliqués’ils sont créés «à la main». La version dedémonstration HTML5 Video Caption Maker est unoutil simple mais efficace permettant de créer desfichiers au format WebVTT.
HTML5 supports Multimedia
28
Gérer d’autres langues :
Tous les navigateurs implémentant la balise <track> pourrontsupporté 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 depouvoir standardiser la lecture d’une audio sur le web sans lerecours d’utiliser un Plugin.
Malheureusement, l’objectif a été contourné par l’absence d’accordsur le format audio qui devrait être utilisé dans les navigateursWeb.
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 desplus compatibles, ce qui fait qu'il esttoujours très utilisé.
Supporté par :
AAC
Utilisé majoritairement par Apple suriTunes, c'est un format de bonne qualité.Les iPod, iPhone et autres iPad savent leslire sans problème.
Supporté par :
OGG
Le format Ogg Vorbis est très répandu dansle monde du logiciel libre, notamment sousLinux. Ce format a l'avantage d'être libre.
Supporté par :
WAV (format non compressé) : évitez autant que possible del'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 êtrelu dans n’importe quel navigateur.
33
34
La norme Microdata
Bien que les microformats existent depuis 5 ou 6 ans, ce n’est qu’avecl’arrivée de HTML5 que la profession et les outils sont suffisammentmû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 quis’apparente à du HTML classique et s’applique bien en dehors de lanorme 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 dusché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 avecun autre, qui fournirait des informations plus détaillées.
Sortie avec HTML5, Les microdonnées (Microdata en anglais) sontreprésentées par l’arrivée de nouveaux attributs en HTML5. Il est alorspossible de donner la référence du document directement au sein del’é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érencenommée schema.org. Il s’agit d’un site mettant à disposition une listes devocabulaire 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 connuplusieurs versions depuis. La version qui sert de base au codageactuel, la "2.1" a été officiellement adoptée en 2007 et n’est toujourspas implémentée partout.
CSS3 n’est pas encore adopté partout mais plusieurs navigateurstirent vers l’avant cette norme de description CSS. Il existe plusieurssites qui référencent la compatibilité de chaque navigateur avecchaque 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’utilisationdes 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+, Safari5.1+, Opera 10.5+, Opera Mobile 11+.
Pour rendre la déclaration compatible avec de
vieilles versions, on devra préfixé plusieurs fois laproprié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, ondevra déclarer plusieurs fois le box shadow en le précédent depré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 ouplusieurs angles d'un élément en indiquant la valeur de l'arrondisouhaité.
Vous pouvez utiliser le site
http://border-radius.com/ pour un résultatinstantanée de la fonctionnalité border-radius et une génération automatique ducode.
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 lesdé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 oula 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 decaractè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) nesuivent pas les mêmes standards. Pour faire face à tous ceux-ci, ilfaut pas moins de 4 fichiers (On pourra utiliser le générateurFontSquirrel 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 desdifférents formats soit du plus léger au plus lourd.
47
Nouveautés avec CSS3
L’écriture RGBa introduit la notion detransparence dans les valeurs associées àune couleur. Elle permet de jouer sur leseffets d’opacité entre les différentescouches d’éléments HTML.
RGBa:
Contrairement à ce que l'on peut croire, le principe de la transparenceRGBa est radicalement différent de la propriété opacity. En effet,opacity s'applique à l'élément dans son intégralité (ainsi qu'à tous sesdescendants) tandis que RGBa est une valeur qui s'applique à uneproprié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 communepermet d’obtenir les mêmes résultatsen jouant sur la teinte, la saturationet la luminosité.
49
Le principe de base d'une transition CSS3 est de permettre une transitiondouce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSSlorsqu'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 unetransition en CSS 3 sont transition-property et transition-duration. Ilexiste 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 ellevaut 0).
Transition-duration
Exemple
51
Nouveautés avec CSS3
Pour calculer les valeurs intermédiaires, le navigateur procède à uneinterpolation. La fonction calculant la valeur de cette interpolationinfluence directement la fluidité de l'animation.
Transition-timing-function
Certaines animations sont plusrapides sur le début et ralentissentsur la fin, d'autres sont constantesdans 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éesuite à l'événement. La propriété transition-delay permet d'adapter cecomportement 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. Lasyntaxe est la suivante :
Il est possible de préciser plusieurs transitions à l'aide de la propriété enséparant les déclarations par des virgules
53
DEMO
54
Le CSS3 présente un nouveau module connu, à juste titre, en tant quemise en page en multi-colonnes. Il permet de spécifier en combien decolonnes 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 multiplescolonnes en CSS3, permettant de définir :
Actuellement, un préfixe propre au navigateur est également nécessairepour définir comment il doit afficher la propriété.
Il faut savoir qu’un générateur demulti-colonnes performant existe quivous 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émentparticulier.
Exemple
58
Les sélecteurs CSS3
:nth-child(expression : Ce sélecteur permet de cibler tous les élémentsen 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 pasreprésenté par l'expression donnéeen argument.
Les pseudo-classes
Correspond aux éléments dont le contenutextuel contient la sous-chaîne donnée enargument.
: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èreligne du texte de l'élément.
Applique la règle de style à la premièrelettre du texte de l'élément.
Applique la règle de style à la sélectiondu texte de l'élément faite parl'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 maispermet de sauvegarder les données voulues dans une "base dedonné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 depersistance des données.
On peut enregistrer des données même quand la connexioninternet est coupé (le storage étant dans le navigateur).
On peut gérer des données par session (si vous avez 2 fenêtressur 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 adire leur taille (4 ko pour les cookies et jusqu'à 10Mo pour le storage!). 62
63
Web Storage
63
L'interface sessionStorge mémoriseles données sur la durée d'unesession de navigation, et saportée est limitée à la fenêtre oul'onglet actif. Lors de sa fermeture,les données sont effacées.
L'interface localStorage mémorise les données sans limite dedurée de vie. Contrairement à sessionStorage, elles ne sont paseffacées lors de la fermeture d'un onglet ou du navigateur. La portéede localStorage est de facto plus large : il est possible de l'exploiter àtravers plusieurs onglets ouverts pour le même domaine ou plusieursfenêtres ; à partir du moment où il s'agit bien sûr du mêmenavigateur.
HTML
LocalStorage sessionStorage
Web Storage met à disposition deux interfaces nomméessessionStorage et localStorage dont la seule différence concerne lapersistance des données.
64
Web Storage
Demo
65
HTML5 et la Géolocalisation
Une des nouvelles fonctionnalités intéressantes que HTML 5fournit est la capacité de géo-localiser l’utilisateur peu importe laplateforme sur laquelle l’application s’exécute.
HTML 5 fournit deux fonctionnalités de géo-localisation : soitobtenir la position actuelle ou effectuer un suivi de la position dansle 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 lecallback 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 à indiquercertaines 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 pluspré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 parl’utilisateur
68
HTML5 et la Géolocalisation
Suivre les déplacements
Dans de nombreux cas, on aimerait mettre à jour la position del’utilisateur si celui-ci se déplace. Avec HTML5, il suffit simplement deremplacer la méthode getCurrentPosition() par watchPosition()
Comme on veut permettre à l’utilisateur d’arrêter le suivi de sesdé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 éloquentesconcernant l'évolution du mobile par rapport aux ordinateurs debureau
Evolution de l’usage
Mobile Vs Desktop
72
Vous avez un site ou vous prévoyez d'en faire un ? Vous vous demandezcertainement "Comment je peux faire en sorte que mon site soitadapté aux mobiles ?".
Site dédié, application ou responsive ?
Un site dédié : Un projet de site dédié consiste à concevoir deuxou plusieurs entités différentes selon le dispositif visé : un siteprincipal, un site pour smartphones, un site pour tablettes, etc
Une application native : Une application native est un produitdé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 sitesweb qui permet une consultation optimale facilitant la lecture et lanavigation à travers une large gamme d'appareils (moniteursd'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 contenusen regard du périphérique utilisé
o Possibilité de cibler et de s'adapter à des fonctionnalités variées(notamment le touch)
Version mobilemobile.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 estune approche de conception Webqui vise à l'élaboration de sitesoffrant une expérience de lectureet de navigation optimales pourl'utilisateur quelle que soit sagamme d'appareil (téléphonesmobiles, tablettes, ordinateur debureau).
Introduction
Qu’est ce que le Responsive Web Design
Une expérience utilisateur "Responsive" réussie implique unminimum de redimensionnement (zoom), de recadrage, et dedéfilements multidirectionnels de pages.
Le responsive web design se base sur les Media Queries pourfaire en sorte que le design s'adapte à toutes les résolutionsd'é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, ycompris Internet Explorer à partir de la version 9 (IE9).
o En écrivant la règle directementdans le fichier .css
Il y a deux façons de les utiliser :
o En chargeant une feuille destyle .css différente en fonctiondu 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 etles 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 vonts'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 entreparenthèse : " (orientation:landscape) "
NB : Les propriétés sont précédées d'un opérateur logique etpeuvent ê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 fautobligatoirement utiliser un media et une propriété ou une proprieteet 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 connaissentpas les media queries mais sont capables d'interpréter le début de larègle (ils savent lire @media screen par exemple). Ils vont donc lire lespropriétés CSS qui suivent même s'ils ne sont pas concernés par larè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 vieuxnavigateurs.
L'utilisation de not inverse les conditions.Si la requête renvoi vrai (true) alors je n'interprète pas ce qui estentre accolade ("{}"), Si la requête renvoi faux (false) alorsj'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 LukeWroblewski en 2011 dans son livre Mobile First
Adobe a développé une application incontournable « Edget Inspect cc» quipermet d’afficher , en temps réel, l’ensemble de modifications apportés sur unepage 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 lesdifférentes versions de chaque navigateur
Il existe sous Windows unprogramme appelé IETester. Ilpermet de vérifier le rendu de sonsite sous différentes versionsd'Internet Explorer
normansblog.decaniuse.com
88
89
Questions
2ème Session
Offline Web Application
Workers et Messaging
WebSocket
SVGGrille fixe
Transformation 3D
Canvas
Grille fluide
Drag’n’Drop
Timers
Web SQL Database
WAI-ARIA
Initializr
modernizr