Développement d'application avec HTML5 - CSS3

Les navigateurs modernes prennent aujourd’hui en compte la norme HTML5, révolutionnant ainsi les possibilités du développement Web. Cette formation va vous apporter les clés pour maîtriser l’ensemble de ces facettes technologiques et concevoir les applications web de demain.

Objectifs :

  • Démystifier HTML5 pour démarrer ses projets sur de bonnes bases.
  • Cette formation couvre les facettes les plus innovantes d’HTML5 et de CSS3. A l’issue de celle-ci, vous serez en mesure d’appréhender tout le potentiel de ces technologies pour construire les applications Web de demain.
  • Ce programme sera l’occasion pour les participants de découvrir et de mettre en pratique les avancées significatives dans les domaines du balisage, de la sémantique, de l’ergonomie et du multimédia. Il abordera également les aspects API et, plus particulièrement, la faculté d’HTML5 d’accéder aux capteurs et au stockage local, de fonctionner hors ligne et de surmonter les barrières de communication d’HTTP pour un web en temps réel.
Publics
Développeurs Web, Architectes Web.
 
Taille du groupe : ≤10 pers.
Durée

3 jours.


50% de pratique,
50% de cours.
Pré-requis

Notions de base sur les environnements de développement web. HTML / CSS / JavaScript.

Contenu pédagogique :

Introduction – Préambule HTML5

  • Définition d’HTML5
  • Terrain de jeu - Quand choisir HTML5 ?
  • Détection des capacités navigateur : best practices
  • Compatibilité, polyfills ou comment utiliser HTML5 avec des navigateurs d’ancienne génération ?

Markup – Nouveautés du balisage

  • Doctype
  • Nouvelles balises, nouveaux champs/attributs, drag'n drop, validation client, placeholder...
  • Confection d’un StarterKit

Ergonomie avec CSS3

  • Rappel sur les feuilles de style : principe et héritage
  • Nouveautés CSS3
  • Sélecteurs, block, box, colonne, arrondis, bordure, ombre, police web,...
  • Transition, Animation : de l’animation sans code
  • Déformation 3D : donner de la perspective à vos contenus
  • Media-Query & Mobilité : prendre en compte les spécificités des écrans des terminaux
  • Responsive design : adaptation du layout de page aux résolutions d’écrans
  • Limites de la technologie, best practices

Préambule – POO en Javascript

  • Rappel / Perfectionnement
  • Fondamentaux de la programmation en Javascript
  • Best practices
  • Débogage

Multimédia – Balise et API

  • Audio et Vidéo
  • Format, Codec
  • Pilotage de la vidéo par API
  • Plein écran / page visibility

Multimédia

  • API 2D - Canvas et SVG
  • Bitmap vs Vectoriel
  • Création de graphismes [canvas]
    • Fonctions basiques
    • Manipulation d’images
  • Animation et transition [canvas]
    • Donner vie aux graphismes

Accès aux capteurs

  • Connectivité réseau
  • Caméra / microphone
  • Univers des équipements nomades et tactiles
    • Géolocalisation, Accéléromètre, Batterie / Vibreur...

Stockage local et offline

  • Notions de cache HTML5
  • Stockage local
    • Key/Value
    • IndexedDB
    • WebSQL Database
    • File API & Quota
  • Application hors ligne
  • Comment ça marche, comment fait-on ?
  • Détection hors ligne, Cache manifest
  • Mise à jour d'application, synchronisation, pilotage par API

Communication

  • Ajax avec XHR2 (XMLHttpRequest 2)
    • Lever les contraintes du cross-domaine
    • Données binaires : utiliser les Blob
    • Comprendre FormData
    • Uploader des fichiers en Ajax avec une barre de progression
    • Sécurité
  • Messages cross-document
    • Envoyer des messages à des documents
    • Gérer le cross-origin
  • SSE et notifications
    • Du serveur vers le client : push
    • Alerter l’utilisateur avec les notifications
  • WebSockets
    • Client , Serveur

Debriefing

  • Retour sur les polyfills et la compatibilité
  • Outils de productivité et frameworks HTML5 desktop & tactiles
    • Microsoft Expression Blend, Adobe Muse…
    • Eclipse…
    • jQuery Mobile, Sencha Touch…
  • Perspectives / Conclusions / Débat