Formation Maitriser HTML5, CSS3 ,JavaScript et Ajax

Présentation des technologies (HTML5)

HTML5, standards et (rétro-)compatibilitéNavigateurs et outils de travail
HTML5 vs Flash
Applications HTML5 vs applications natives
Sémantique,référencement et accessibilité en HTML5
DOCTYPE, encodage, règles de syntaxe
Les nouvelles balises sémantiques
Relations, micro-formats et micro-données

HTML5 Forms (Web Forms)

Vue d’ensemble des formulaires nouvelle génération
Les nouveaux éléments (progress, meter, datalist, keygen, output)
Nouveaux types de champs (tel, url, email, search, number, etc.)
Nouveaux attributs (autofocus, placeholder, form, required, etc.)
Validation par le navigateur (required, pattern, formnovalidate)
Suggestions automatiques
Exemple récapitulatif

JavaScript nouvelle génération

Mode strict et chargement asynchroneDOM Level 3 : agir sur la pageGestion dynamique des événementsDebug et détection du support du HTML5JSON et initiation au modèle objetInitiation à jQuery

Vidéo et audio

Codecs et formats (H264/MP4, OGG/theora, WebM/VP8)
Compatibilité et navigateurs
Les outils de conversion (rapide)
Savoir utiliser les services existants (dailymotion, youtube,viemo)
Les balises (video,audio)
Proposer plusieurs sources dans plusieurs formats
Pré-requis (type MIME et .htaccess)
Les attributs (controls, preload, autoplay, poster)
Test de téléchargement d’une vidéo selon plusieurs formats depuis plusieurs navigateurs
Traitements en Javascript

Les nouveaux sélecteurs CSS3

Les pseudo-classes et pseudo-éléments
Les sélecteurs d’attributs (^, $, *)
Exemple d’application de style « intelligente » combinant les nouveautés

Mise en page et box model

Les positionnements (absolu, fixe, naturel)
Mise en page avec float
Mise en page avec Flex (box-sizing, border box, etc.)
Système de grid
Disposition en colonnes
Régions et exclusions
Limites et apports des frameworks (bootstrap, etc.)

Graphisme avancé

Polices de caractères personnalisées
Couleurs avancées et dégradés
Ombres et opacité
Bordures et arrière-plans avancés

Responsive design

Problèmes techniques posés par l’hétérogénéité (PC, téléphone, tablette)
Solutions apportées par le Responsive Design
Pré-requis pour faire du responsive Design
Media-queries : s'adapter à la résolution d'écran et à l'orientation
Viewport
Déterminer la valeur d’une propriété CSS (calc)
Positionnement colonnes, tailles fluides et media queries

Compatibilité des navigateurs avec HTML5/CSS3

Etat des lieux
La détection des capacités des navigateurs
Recommandations

Les outils et les méthodes du développeur WEB

Quels outils pour développer et debugguer ?
Les outils pour améliorer ma productivité et ma rapidité de codage
Les outils d’une bonne veille technique
Les méthodes de codage moderne pour un code maintenable
Les tendances à venir

JAX nouvelle génération

XMLHttpRequest 2Fichiers joints et progressionRequêtes cross-domain

Historique et navigation

AJAX avec historiqueNavigation par ancresCommunication entre onglets

Géolocalisation

Obtenir et suivre la position de l'utilisateur

Images : canvas et SVG

Images vectoriellesCréation dynamique d'images en JavaScript

Stockage local et contenu hors ligne

Attributs data- personnaliséslocalStorage et sessionStoragemanifest.indexedDB : base de données locale

Communication serveur nouvelle génération

SPDY : le HTTP accéléréServer-sent eventsWebsockets : communication permanenteInitiation à node.js

Performances et optimsation

Webworkers: scripts simultanés et partagésPage Visibility APIBattery APINavigation Timing API