Formation HTML5, CSS3 et JavaScript Réf : PE061

Par Nicolas Hoizey

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.

Durée :
5 jours
Lieux :
Paris

Partage :

  • Twitter
  • Facebook
  • E-mail
  • Linkedin
  • Viadeo

Soyez alertés par e-mail des nouvelles sessions : Poser une alerte,

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

A l’issue de cette formation, les stagiaires seront en mesure de :
  • 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

Développeurs et intégrateurs web,
Graphistes, web designers,
Webmaster.

Pré-requis

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

Type

Stage pratique

Méthode pédagogique

Alternance de présentation magistrale (50%) et de travaux pratiques sur machine individuelle (50%).

Plan de cours

 

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

 

Prochaines sessions

Témoignages

Très bonne formation, complète et actualisée. De nombre exemples et modèles. Formateur à jour et au courant des nouveautés. Manque un peu d'exercice pratique
Christophe Peronnet, Ingénieur étude

Formation excellente
Yves Robert, Resp développement

Formateur compétent. et clair. Bon rythme de la formation
Gilles Karmazyn, Ingénieur développement

Bonne formation mais me manquaient les pré-requis CSS
Thierry Lartigues, dvpeur

Parfait, mais formation à faire sur 3 jours plutôt que 2 car un peu court pour avoir le temps de faire des exercices
Annie Imbaud, Chef de projet internet

Lionel Cabon, Directeur Clever Institut

Suite aux retours des stagiaires, cette nouvelle formation se déroulera à partir du 1er janvier 2012, sur 3 jours au lieu de 2, afin de pouvoir développer la partie pratique de ce stage.
Lionel Cabon, Directeur Clever Institut

Mansour Yassine, Ingénieur Spécialste Applicatif

Formation à recommander.
Mansour Yassine, Ingénieur Spécialste Applicatif

Alexandre Girard, Ingénieur d'application

Formation riche, timing idéal pour une bonne mémorisation (3J). Je la recommande.
Alexandre Girard, Ingénieur d'application

Cette formation m'a permis de combler des lacunes, découvrir de nouvelles techniques et d'en perfectionner d'autres. Le formateur est tres disponible et à l'écoute. Il s'adapte à nos attentes quotidiennes pour les TP.
Mélina Batissou

Très satisfait par la qualité du contenu de ce stage HTML5. Formateur parfait.
Thomas B.

Cette formation sur HTML5 a répondu parfaitement à mes attentes. 1 jour de plus aurait été bien mais propose globalement l'ouverture et les bases nécessaires à l’acquisition d'une connaissance plus large.
Jean-Christophe A.

Cher(e) visiteur(euse),
Nous vous remercions pour l'intérêt porté à nos formations. La pré-inscription à une session de formation se fait via le formulaire d'inscription de la page formation.

La Convention de Formation Professionnelle Continue simplifiée vous sera envoyée par mail dans les 72H max. Votre inscription est considérée comme définitive, une fois cette convention signée par votre entreprise ou OPCA. La facture sera émise à l'issue de la formation, comme mentionnée dans nos conditions générales de vente.

A noter que les demandeurs d'emploi peuvent bénéficier d'une remise de 20% sur le prix public.

Pour toute information complémentaire ou demande de devis, n'hésitez pas à nous contacter au 01 53 34 66 10 ou à nous solliciter par mail.

A très bientôt dans l'un de nos centres de formation.
L'équipe Clever-Institut.

Les autres formations « Technologies front-end »  – Voir toutes les formations