HTML5, CSS3 et JavaScript

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 asynchrone
• DOM Level 3 : agir sur la page
• Gestion dynamique des évènements
• Debug et détection du support du HTML5
• JSON et initiation au modèle objet
• Initiation à 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 la productivité et la rapidité de codage
• Les outils d’une bonne veille technique
• Les méthodes de codage moderne pour un code maintenable
• Les tendances à venir

AJAX nouvelle génération

• XMLHttpRequest 2
• Fichiers joints et progression
• Requêtes cross-domain

Historique et navigation

• AJAX avec historique
• Navigation par ancres
• Communication entre onglets

Géolocalisation

• Obtenir et suivre la position de l’utilisateur

Images : canvas et SVG

• Images vectorielles
• Création dynamique d’images en JavaScript

Stockage local et contenu hors ligne

• Attributs data- personnalisés
• localStorage et sessionStorage
• manifest.
• indexedDB : base de données locale

Communication serveur nouvelle génération

• SPDY : le HTTP accéléré
• Server-sent events
• Websockets : communication permanente
• Initiation à node.js

Performances et optimisation

• Webworkers: scripts simultanés et partagés
• Page Visibility API
• Battery API
• Navigation Timing AP