HTML5, CSS3, JavaScript

Objectifs

• Créer des pages en HTML5 et utiliser les nouvelles balises


• Mettre en page et en forme avec CSS3


• Utiliser les nouvelles API JavaScript


• Gérer la mobilité et maîtriser le responsive web design

Programme de la formation

Rappel sur les évolutions de HTML et CSS depuis 20 ans

Processus de normalisation : le W3C et le WHATWG

Apports de HTML5, CSS3 et JavaScript
Fondamentaux HTML

Syntaxe HTML

Nouveau Doctype

Encodage des caractères

Support navigateur

Créer un template de base réutilisable pour tous les projets
HTML5 : Structurer un document

Évolution de l'imbrication des balises : disparition des notions de inline et block

Nouvelles balises : header, footer, structure, aside, nav, hgroup, etc.

Balises obsolètes : center, font, frame, acronym, etc.

Structurer une page avec les nouvelles balises
Formulaires HTML

Les nouveaux champs de formulaire et leur structure

Les nouvelles pseudo-class CSS

Créer un formulaire de contact type

Accessibilité des éléments dynamique
Multimédia

Balise video, Balise audio, ShadowDom, Balises object, embed et svg

Conteneur

Inclure une vidéo dans une page et créer une interface de contrôle personnalisée
Graphique et dessin

Balise canvas

SVG et ses filtres

WebGL

Créer un graphique
API JavaScript

Extension du DOM : getElementByClassName, querySelector, contenteditable

WebWorkers

Drag n' Drop

Gestion des fichiers et de l'historique

Communication bi-directionnelle asynchrone (WebSocket)

Stockage de données (côté client)

Web Storage et IndexedDB

appcache : fonctionnement déconnecté

Géolocalisation

Device API et Web API

Créer une liste d'articles fonctionnant sans connexion
Mobilité avec HTML5

Stockage permanent et stockage dans la session

Utilisation d'une base de données en HTML 5

Cartes (Google & Bing Maps)

Utiliser la localisation en HTML 5

Intégrer une carte Maps

Utiliser le multitouch
CSS3 : Introduction & selector

Préfixes

Cascade et compatibilité

Sélecteurs CSS3

Nouvelles pseudo-class CSS3
Mise en forme

Fonction calc() et propriété box-sizing

Mise en forme tabulaire et multi-colonnes

Modèle de boite flexible

Modèles de mise en page CSS

Mise en page en grille CSS

Mise en forme d'un modèle de site vitrine
Responsive web design

Bonnes pratiques du Responsive Web Design

Adaptabilité des pages et web application

Framework et librairies

Adaptabilité du contenu et du contenant

Viewport

Créer une page adaptive
Habillage CSS3

Couleurs, polices de caractères

Transformations 2D et 3D

Tooltips
Animations CSS & JavaScript

Transitions, Animations, Menu de navigation animé

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique