HTML5, CSS3 et JavaScript

Utilisez les nouvelles possibilités offertes par HTML5, CSS3 et les dernières API JavaScript pour concevoir simplement des pages Web riches et cross platform

  • Filière :

    Développement logiciel

  • Sous-filière :

    Technos Web (PHP, JS...)

  • Référence

    HTJS01

  • Durée

    5 jours (35 h)

  • Prix par personne HT

    2 300 € HT

Description

Cette formation présente, par la pratique, l’ensemble des nouveautés apportées par HTML5, conjointement aux avancées spectaculaires de CSS3 et des nouvelles API JavaScript. Elle s’adresse aux développeurs et intégrateurs qui veulent mettre à jour leurs connaissances pour concevoir et développer des sites Web avancés, mais aussi aux débutants qui veulent démarrer leurs développements directement avec les bonnes pratiques.

Objectifs pédagogiques

  • Appréhender les apports de HTML5 et CSS3
  • Créer des pages en HTML5 et utiliser les nouvelles balises,
  • Utiliser les nouvelles API JavaScript pour enrichir l’interactivité,
  • Gérer le responsive web design,
  • Faire de la vidéo, du son et des animations, sans Flash,
  • Faire du graphisme avancé et certaines images, sans Photoshop,
  • Améliorer son référencement dans les moteurs de recherche.

Public cible

Développeurs et intégrateurs web, Graphistes, web designers, Webmasters

Pré-requis

Avoir une connaissance préalable de HTML, CSS et JavaScript

Modalités d’évaluation

L’évaluation des acquis se fait tout au long de la session au travers d’ateliers de mise en pratique des notions et concepts abordés pendant la formation.

Méthodes pédagogiques

50 % théorie / 50% pratique

Programme de la formation

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

Qualité

Cette formation est accessible aux personnes en situation de handicap, nous contacter en cas de besoin d’informations complémentaires.

pictogramme commentaire Avis et témoignage

Voir tous les avis

Programme mis à jour le