theme solutions nhoizey_by_tranchedevie_275x27

Développement web avec HTML5 et CSS3 Réf : PE00061

Par Nicolas Hoizey 12345

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 :
Nantes, Paris

€1,320 HT (prix conseillé)

Partage :

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

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

Description

HTML5 et CSS3 sont les dernières versions des langages de conception de sites internet et mobiles, à la pointe des technologies du web (interfaces riches, multi-plateformes, géolocalisation, respect W3C, Etc.). Cette formation présente l'ensemble des nouveautés apportées par HTML5 conjointement aux avancées spectaculaires de CSS3, avec mise en application de chaque thématique abordée.

En fin de stage, les participants se verront offrir un support mail individuel, assuré par le formateur pour une durée de 2 semaines,  pour toute question en rapport avec le cours.

Objectifs pédagogiques

A l’issue de cette formation, les stagiaires seront en mesure de :
  • Saisir les apports de HTML5 et CSS 3 face aux enjeux du web d'aujourd'hui,
  • Créer des pages en HTML5 et utiliser les nouvelles balises,
  • Mettre en page et en forme avec CSS 3.

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).

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
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

Témoignages

image par défaut

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

image par défaut

Formation excellente
Yves Robert, Resp développement

image par défaut

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

image par défaut

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

image par défaut

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

avatar

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

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

avatar

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

image

Cher(e) visiteur(euse),

La pré-inscription à une session de formation se fait  directement sur notre site. Vous pouvez au préalable nous demander un devis.

Cette inscription en 4 étapes comprend la saisie de

  • vos coordonnées,
  • votre entreprise,
  • les noms des participants au stage,
  • les éléments nécéssaires à la facturation.
Vous pouvez, à tout moment, sauvegarder votre inscription en cours et la reprendre plus tard.

Une fois votre inscription validée, vous recevez un récapitulatif de votre commande par mail.

La Convention de Formation Professionnelle Continue simplifiée sera envoyée par mai dans les 72H max. A noter que l'inscription est considérée comme définitive qu'après signature de cette convention.

Dès réception par nos services, de la convention signée, la convocation de stage est envoyée par mail aux stagiaires qui se voient ouvrir un compte sur notre site internet, leur permettant de préparer leur formation (accès, communication de leurs attentes, etc.). La facture sera émise à l'issue de la formation.

Pour toute information complémentaire, 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 « Développement internet et mobile »  – Voir toutes les formations