Formation HTML5, CSS3 et nouvelles API JavaScript Réf : PE00061

Par Nicolas Hoizey

Utilisez les nouvelles possibilités offertes par HTML5 et CSS3, pour concevoir simplement des pages web riches et cross-plateformes.

Durée :
3 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ébuter leurs développements directement avec les bonnes pratiques.

Objectifs pédagogiques

A l’issue de cette formation HTML5 et CSS3, les stagiaires seront en mesure de :
  • Appréhender les apports de HTML5 et CSS3 face aux enjeux du web et du mobile d'aujourd'hui,
  • Créer des pages en HTML5 et utiliser les nouvelles balises,
  • Mettre en page et en forme avec CSS 3,
  • Utiliser les nouvelles API JavaScript,
  • Gérer le responsive web design.


Public

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

Pré-requis

Avoir une connaissance préalable de HTML et CSS.

Type

Stage pratique

Méthode pédagogique

Nombreux travaux pratiques permettant d'illustrer et valider les concepts vus dans la formation (environ 40% de pratique).

Plan de cours

Histoire et contexte
Rappel sur les évolutions de HTML et CSS depuis 15 ans
Le processus de normalisation : le W3C et le WHATWG
HTML5 : une nouvelle vision du langage
CSS3 : la maturation de CSS2
JavaScript : de nombreuses nouvelles API

HTML5 : Créer un document
Généralité sur la syntaxe HTML
Le nouveau Doctype
Langage et encodage de caractère
Le support navigateur
Exercice : Créer un gabarit de base réutilisable pour tous les projets

HTML5 : Structurer un document
Évolution de l’imbrication des balises : disparition des notions de “inline” et “block”
Les nouvelles balises : header, footer, structure, aside, nav, hgroup, etc.
Les balises obsolètes : center, font, frame, acronym, etc.
Exercice : Structurer une page avec les nouvelles balises

HTML 5 / CSS3 : Les formulaires
Les nouveaux champs de formulaire
Structurer un formulaire
Les nouvelles pseudo-class CSS pour les formulaires : :valid, :invalid, :checked, etc.
Exercice : Créer un formulaire de contact et le mettre en forme

HTML 5 / CSS3 : Accessibilité
Accessibilité des éléments dynamiques avec ARIA

HTML5 : Le multimedia
La balise video
La balise audio
Les balises object, embed et svg
Les fichiers multimedia : conteneur (MP4, OGG, WEBM) et codec (.h264, Vorbis, Theora, VP8, etc.)
Exercice : Inclure une video dans une page et créer une interface de contrôle personnalisée

HTML5 : Dessiner
La balise canvas
SVG
Différence et cas d’usage de ces 2 technologies
Les filtres SVG
WebGL
Exercice : Créer un graphique avec Raphaël JS, les données étant dans une table HTML

Les nouvelles API Javascript
Extension du DOM : getElementByClassName, querySelector, contenteditable
Les WebWorkers
Drag n’ Drop
Gestion des fichiers
Gestion de l’historique
Communication bi directionnelle asynchrone avec WebSocket
Stockage de données côté client : Web Storage (sessionStorage et localStorage) et IndexedDB
Fonctionnement déconnecté avec appcache
Géolocalisation
Device API et Web API
Exercice : Créer une “todo list” avec IndexedDB, fonctionnant sans connexion

L'apport de HTML5 à vos développements pour mobile
Bases de données côté client
Stockage permanent et stockage dans la session
Utilisation d'une base de données en HTML 5
Cartes Google Maps
Utiliser le GPS en HTML 5
Intégrer une carte Google Maps dans l'application
Utiliser le multitouch dans les applications

CSS3 : Introduction
Avancement du travail de spécification
Les préfixes vendeurs
Cascade et compatibilité navigateur

CSS3 : Les sélecteurs
Rappel sur les selecteurs CSS 2
Les nouveaux selecteurs CSS 3
Les nouvelles pseudo-class CSS 3 : :last-child, :nth-child, :nth-of-type, :not
Exercice : Mettre en évidence les liens ouvrant une autre page, en indiquant aussi la langue du lien

Les nouveaux modes de positionnement
la fonction calc() et la propriété box-sizing
Mise en forme tabulaire
Mise en page multi-colonnes
Le modèle de boite flexible
Les gabarits de mise en page CSS
La mise en page en grille CSS
Exercice : Mettre en forme un gabarit de blog

CSS3 : Responsive Web Design et Media Queries
Introduction
Les bonnes pratiques du Responsive Web Design
Adaptabilité des pages et web application
Frameworks et librairies : iUi, Less, FitVids, Modernizr, Angular, etc
Adaptabilité du contenu et du contenant
Le viewport
Exercice : Créer une page dont la mise en page s’adapte aux navigateurs mobiles

CSS3 : Se passer d’images
Les couleurs
Les polices de caractères
Coins arrondis
Ombres portés
Dégradé de couleurs
Bordures en images
Fonds multiples
Transformations 2D
Transformations 3D
Génération de contenu
Exercice : Mettre en forme un système de “tooltip”

CSS3 : Animation
Les transitions
Les animations
Exercice : Créer un menu de navigation animé

Synthèse des bonnes pratiques

Prochaines sessions

picto Du mercredi 10/12 au vendredi 12/12 2014 Paris €1,520 fleche S’inscrire à la session du lundi 10/12 au mardi 12/12
picto Du lundi 05/01 au mercredi 07/01 2015 Paris €1,520 fleche S’inscrire à la session du lundi 05/01 au mardi 07/01
picto Du lundi 02/03 au mercredi 04/03 2015 Paris €1,520 fleche S’inscrire à la session du lundi 02/03 au mardi 04/03
picto Du lundi 18/05 au mercredi 20/05 2015 Paris €1,520 fleche S’inscrire à la session du lundi 18/05 au mardi 20/05
picto Du lundi 15/06 au mercredi 17/06 2015 Paris €1,520 fleche S’inscrire à la session du lundi 15/06 au mardi 17/06
picto Du lundi 24/08 au mercredi 26/08 2015 Paris €1,520 fleche S’inscrire à la session du lundi 24/08 au mardi 26/08
picto Du lundi 05/10 au mercredi 07/10 2015 Paris €1,520 fleche S’inscrire à la session du lundi 05/10 au mardi 07/10
picto Du lundi 14/12 au mercredi 16/12 2015 Paris €1,520 fleche S’inscrire à la session du lundi 14/12 au mardi 16/12
Proposer une session.

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