Maîtriser HTML5, CSS3, Javascript et Ajax

Programmes de Maîtriser 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 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.)

CSS Grid

• Limites des tableaux et apports des CSS Grid
  
• Positionnement explicite et implicite des objets sur une grille CSS
  
• Alignement des boîtes avec les grilles CSS
  
• Utiliser les lignes ou les zones de la grille ?
  
• Complémentarité Flexbox et Grid
  
• Compatibilité avec les anciens navigateurs

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
  
• Disposition adaptative des grilles CSS (grid-template-areas)

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