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

http://validator.nu/

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

http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html

6


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).


Un cas particulier : Internet Explorer <9

8

Nouveautés avec HTML5

9


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> :


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


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

http://www.whatwg.org/specs/web-apps/current-work/multipage/interaction.html#contenteditable

Il faudra penser à vérifier les paramètres du navigateur.

12


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


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


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


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


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


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


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.

http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/Default.html


28

Gérer d’autres langues :

Tous les navigateurs implémentant la balise <track> pourrontsupporté le format WebVTT.


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%


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


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.


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/

http://schema-creator.org/

37http://www.w3.org/

http://developers.whatwg.org/http://www.whatwg.org/

Liens utiles

http://www.w3schools.com/

http://www.w3.org/

http://developers.whatwg.org/

http://www.whatwg.org/

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/

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


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.

http://border-radius.com/

44


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

http://www.display-inline.fr/projects/css-gradient/#direction=bottom-right&startType=hex&startValue=aaeeff&endType=hex&endValue=3399cc

http://www.display-inline.fr/projects/css-gradient/#direction=bottom-right&startType=hex&startValue=aaeeff&endType=hex&endValue=3399cc

45


@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)

http://www.dafont.com/fr/top.php

http://www.fontsquirrel.com/fontface/generator

46


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


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


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, ..)


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.


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

http://www.w3.org/TR/css3-transitions/#properties-from-css-

51


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


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

http://css3.bradshawenterprises.com/transitions/

http://css3.bradshawenterprises.com/transitions/

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.


http://www.debray-jerome.fr/outils/Generateur-de-multi-colonnes-en-css3.html

55

Exemple


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


Le combinateur d’adjacence directe

Permet d’ajouter un style à tous les éléments qui suivent un élémentparticulier.

Exemple

58


: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


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 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


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


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


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


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

http://gs.statcounter.com/

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

http://mobile.lemonde.fr/

http://www.lemonde.fr/

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.


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).


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


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


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

https://creative.adobe.com/fr/products/inspect

85

http://mediaqueri.es/

http://ucsd.edu/

http://www.arrowfinco.com/

Demo


Demo


http://ucsd.edu/

http://www.arrowfinco.com/


86

http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0

Parts de marché des navigateurs web

Browser Statistics

http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0

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

http://www.normansblog.de/demos/browser-support-checklist-css3/

http://caniuse.com/

http://www.my-debugbar.com/wiki/IETester/HomePage

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

Technology

Formation html5 css3 java script