[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 et délais d’accès

    Bulletin d'inscription à retourner complété

    Public visé

    Développeurs et chefs de projets Web.

    Pré-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