etat de l'art Nicolas Hoizey, Directeur technique, Formateur Clever Institut

Formation HTML5 et CSS3 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

€1,520 HT (prix conseillé)

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. 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, ainsi qu'aux débutants qui veulent débuter leurs développements directement avec les bonnes pratiques.

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

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

Objectifs pédagogiques

A l’issue de cette formation, les stagiaires seront en mesure de
  • Appréhender les apports de HTML5 et CSS 3 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.

Plan de cours

PROGRAMME DE LA 1ERE JOURNEE DE FORMATION
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
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
HTML5 / 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
PROGRAMME DE LA 2NDE JOURNEE DE FORMATION
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
HTML5 : 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 HTML5
  • Cartes Google Maps
    • Utiliser le GPS en HTML5
    • Intégrer une carte Google Maps dans l'application
  • Utiliser le multitouch dans les applications
Responsive web design
  • 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
PROGRAMME DE LA 3EME JOURNEE DE FORMATION
CSS3 : Introduction
  • Avancement du travail de spécification
  • Les préfixes vendeurs
  • Cascade et compatibilité navigateur
CSS3 : Les sélecteurs
  • Rappel sur les selecteurs CSS2
  • Les nouveaux selecteurs CSS3
  • Les nouvelles pseudo-class CSS3 : :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 : Media Queries
  •     Reconnaître les capacités d’un ordinateur
  •     Différence entre media queries et 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é

Prochaines sessions

picto Du mercredi 05/06 au vendredi 07/06 2013 Paris €1,520 fleche S’inscrire à la session du lundi 12/02 au mardi 13/02
picto Du mercredi 18/09 au vendredi 20/09 2013 Paris €1,520 fleche S’inscrire à la session du lundi 12/02 au mardi 13/02
picto Du mercredi 18/12 au vendredi 20/12 2013 Paris €1,520 fleche S’inscrire à la session du lundi 12/02 au mardi 13/02
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

Cher(e) visiteur(euse),
Je vous remercie pour l'intérêt porté à nos formations. La pré-inscription à une session de formation, pour vous ou l'un des vos collaborateurs, se fait via le formulaire d'inscription de notre site.

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. La facture sera émise à l'issue de la formation.

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