Formation numérique
Maîtriser HTML5, CSS3, Javascript et Ajax
Reference : HTCSJS1

5
jours - 2 390 € € HT Télécharger la fiche
Prochaines sessions

Objectifs
- Utiliser dès maintenant les nouveautés du web, en restant rétro-compatible
- Tirer partie des nouveautés et ainsi alléger les besoins en JavaScript
- Faire de la vidéo, du son et des animations, sans Flash
- Faire du graphisme avancé et certaines images, sans Photoshop
- Créer des mises en page avec les CSS Grid
- Améliorer son référencement dans les moteurs de recherche
- Adapter l’affichage des versions mobile / tablette (responsive design)
- Proposer des services géolocalisés
- Faciliter la communication entre le serveur et le navigateur
- Proposer des applications hors ligne (mobile, tablette).
Pré requis
- Des connaissances générales du web et des bases en HTML, CSS et JavaScript sont nécessaires pour suivre ce cours.
Modalités et délais d’accès
Bulletin d'inscription à retourner complété
Public visé
Pré-inscription
Développeurs et chefs de projets Web.
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