[wpms_breadcrumb reverse="0"]
Formation numérique

Maîtriser HTML5, CSS3, Javascript et Ajax

Reference : HTCSJS1
5 jours - 2 390 €  € HT Télécharger la fiche
Prochaines sessions
    Maîtriser HTML5, CSS3, Javascript et Ajax
    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 pédagogiques

    Cours dispensé en mode présentiel avec une alternance d’apports théoriques et méthodologiques, et de mises en situations pratiques

    Public visé

    Développeurs et chefs de projets Web.

    Inscription

    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