Formation Préparation à la certification Développeur HTML 5 avec JavaScript et CSS 3

Jour 1

Introduction

Définir HTML 5

Balisage HTML5

Une visite des principaux éléments HTML5

Les éléments ,  et 

Les formulaires web

Beaucoup plus de nouveaux éléments avec HTML5

Une vue d'ensemble des API HTML5 et les technologies de soutien

Géolocalisation en action

Web workers

Le Web Storage

Les animations CSS

Les transitions CSS

Les transformations CSS 2D et 3D

CSS3, les arrières plans, les frontières, les couleurs RGBA, les dégradés, les ombres portées, et des coins arrondis

@ polices Web font-face

HTML5 est dans un état de transition

Qui est en utilisant HTML5 aujourd’hui ?

Identifier les sites HTML5 

Principes de base de HTML, XHTML et CSS

Langages du Web

Page structure basée sur HTML

Les détails de la syntaxe XHTML

Doctype permet au navigateur web savoir à quoi vous attendre

Le W3C et la page de validation

La structure HTML

Mise en place des images en HTML

Le rôle du CSS

Du style d'une rubrique

Comprendre les styles de classe et l'élément

Trois façons d'utiliser le style

Feuilles interne vs. Feuilles externe

Création d'une feuille de style externe

Ce qui rend les styles en cascade

Mise en forme de textes avec CSS

L'importance de la typographie sur le Web

Les défis de la police sur le Web

Définition d'une famille de polices

Dimensionner le texte avec CSS

Les pixels et les points ne sont pas les meilleurs choix

Utiliser une combinaison de pour cent et la mesure em

L'utilisation des marges pour modifier l'espace entre votre texte

Paragraphe pour réglage de la hauteur de ligne

Transformation de texte avec CSS

Utilisation des listes HTML

Listes HTML avec Styles

Jour 2

Comprendre la mise en page avec CSS.

Introduction à la mise en page CSS

Travailler avec un fichier de réinitialisation CSS

Une brève histoire des techniques de mise en page sur le web

Un aperçu de la page des options de mise en page

La compréhension de l'élément

: la création d'une disposition de deux colonnes à largeur fixe

Comprendre la propriété CSS float

Création de colonnes avec la propriété float

Travailler avec la propriété claire

Création d'une navigation basée sur une liste en utilisant des flotteurs

Ajout de styles de texte

L'effet des marges et le remplissage de votre mise en page à largeur fixe

Un examen de l'utilisation de marges et le remplissage des mises en page

Styling de votre pied de page avec une image d'arrière-plan 

Atelier et cas pratique.

Jour 3

Savoir intéragir avec l'utilisateur.

Création de formulaires HTML 5

Les formulaires mis à jour

Le fonctionnement des formulaires

Les composants d'un formulaire

L'ajout de nouveaux types d'entrée HTML5 et les attributs

Création d'un formulaire de commande

Fournir une solution de repli pour les navigateurs qui ne prennent pas en charge HTML5 

Principes de base de HTML, XHTML et CSS

Langages du Web

Page structure basée sur HTML

Les détails de la syntaxe XHTML

Doctype permet au navigateur web savoir à quoi vous attendre

Le W3C et la page de validation

La structure HTML

Mise en place des images en HTML

Le rôle du CSS

Du style d'une rubrique

Comprendre les styles de classe et l'élément

Trois façons d'utiliser le style

Feuilles interne vs. Feuilles externe

Création d'une feuille de style externe

Ce qui rend les styles en cascade

Introduction à JavaScript et jQuery

Interactivité sur le web

Adobe Flash

JavaScript

Bases JavaScript

Placer votre JavaScript dans un document externe

Le modèle objet de document

Framework JavaScript

Cacher un élément avec JQuery

Ajout d'un événement pour déclencher l'événement show

Utilisation des éléments audio et vidéo

Ajout d'une vidéo

Ajout du support pour d'autres navigateurs

Contrôle d'une vidéo avec JavaScript

Ajout d'audio

Atelier et cas pratique.

Jour 4

Maitriser le CSS avancé.

Travailler avec les dessins

Comprendre l'élément canvas

Les avantages de l'élément canvas

Dessin de rectangles

Tracer des lignes et des cercles

Dessin avec des courbes

Ajout d'un texte

L'utilisation de couleurs, des styles et des dégradés

Ajout d'images

L'utilisation des transformations

Création d'une boucle de dessin 

CSS 3

Comprendre le rôle de CSS3

Ajout de plusieurs images d'arrière-plan

Travailler avec la transparence et l'opacité CSS3

En utilisant des gradients CSS3

CSS3 gradients de potentiel pour l'avenir

transformation CSS3, des transitions et des animations

Utilisation des polices web

En utilisant @ font-face pour spécifier une police web

L'utilisation d'un service Web pour générer plusieurs polices

CSS 3 médias Queries et avenir de CSS 3

Le rôle des médias queries CSS3

Utilisation de médias queries CSS3 pour fournir une mise en page mobile optimisé

Développements à venir dans CSS3

La mise en page multi-colonnes CSS3

Le module de mise en boîte souple CSS3

Le module de mise en page du modèle CSS3

Ajout position sur la base du modèle CSS

Jour 5

Stockage hors connexion dans HTML 5

Types de stockage HTML5

Méthodes localStorage

Exemple localStorage

Mettre tout ensemble

Stockage de données avancées

La mise en cache des applications

Le cache, le fichier manifeste

Mise à jour du cache

L'objet applicationCache

Amener tout ensemble 

HTML 5 Géolocalisation

Comprendre Géolocalisation

Obtenir l'emplacement de l'utilisateur

Affichage de l'emplacement de l'utilisateur avec Google Maps

Navigateurs manquant HTML5 Géolocalisation

Création d'un HTML5 Géolocalisation et mashup Google Maps

Ajout de marqueurs de carte Google à votre page Géolocalisation

HTML 5 Drag & Drop

Glissez et déposez sur le Web

Glisser-déposer Cross-navigateur

Transfert de données avec une opération de glisser-déposer 

Atelier et cas pratique.