Formation html5 & css3, création de pages web

• Concevoir et développer des applications Web en HTMLet CSS3
• Mettre en place et valider la structure HTML des pages Web
• Habiller des pages Web en CSS afin de les rendre plus attractives
• Rendre responsive design les pages Web d'un site
• Créer des images et des animations vectorielles

• Connaissances de base en HTML et CSS.

Introduction

• Les DTD et la syntaxe XML (structuration, commentaires).
• La structure d'un document HTML : images, feuilles de style CSS, JavaScript.
• La sémantique HTML : titres, paragraphes, liens, tableaux, formulaires...
• Le modèle de document (DOM). Le protocole HTTP.
• Optimisation du chemin critique de rendu (Critical Render Path).
• Topographie des concepts et apports du HTML5.
• Outils de développement HTML5.
• Test de compatibilité, méthode de détection HTML5.

Démonstration

• Découvertes des possibilités du HTML5 et des outils de développement.

Nouvelle structuration

• Les éléments traditionnels structurant un document HTML (doctype, html, head, body, meta...).
• Les éléments de structure <nav>, <section>, <article>, <aside>, <header> et <footer>.
• Les catégories de contenus : Metadata, Flow, Sectioning, Heading, Phrasing, Embedded et Interactive content.
• Intérêt des balises structurantes pour le référencement.
• Imbrication et type de contenu.

Travaux pratiques

• Mise en place et validation de la structure d'un document HTML5.

Les nouvelles balises HTML

• Les balises et attributs obsolètes.
• Les balises : <mark>, <meter>, <time>, <figure>, <picture>...
• Les extensions de balises HTML existantes.
• Les attributs : a, fieldset, iframe, area, button...
• Les microformats. Présentation et avantages sur le référencement.
• Les nouveaux champs et attributs de formulaires : range, autofocus, placeholder, menu...
• Les dessins : Canvas versus SVG.
• Les formats multimédias. Codecs et API Multimédia.
• Gestion vidéo et audio avec les nouvelles balises <audio> et <video> HTML5.

Travaux pratiques

• Création de templates HTML5. Positionnement d'éléments en absolu. Réalisation d'un lecteur multimédia.

Les sélecteurs CSS3

• Rappel sur la syntaxe : les sélecteurs, les règles.
• Sélecteurs de répétition nth-child(even), de cible target, de frère antérieur ~, d'enfant unique only-child.
• Media Queries pour le chargement conditionnel des CSS selon la résolution ou l'orientation du terminal.

Travaux pratiques

• Intégration de CSS 3 aux applications Web. Sélection d'éléments d'une page HTML5.

Les couleurs et la mise en forme du texte

• Rappel sur les déclarations RGB et RGBA.
• Les modèles HSL et HSLA.
• La propriété opacity.
• Support des polices distantes @font-face.
• Mise en forme du texte.
• Création d'un système d'icônes.
• Gestion des débordements par text-overflow.
• Gestion des enchaînements par wrap-option, white-space-treatment...
• Effets de couleur et d'ombre sur texte text-fill-color, text-shadow...
• Les modes multicolonnes avec column-count, column-width...

Travaux pratiques

• Application de couleurs. Mise en forme de textes. Gestion multicolonne.

La mise en forme des boîtes et des fonds

• Les ombres avec box-shadow.
• Les coins arrondis avec border-radius...
• La gestion des fonds multiples.
• Les gradients de fond (-webkit-gradient).
• Les fonds ajustés aux conteneurs.
• Les transformations : translations, rotations, homothéties.
• Les animations : les animations, les transitions.

Travaux pratiques

• Appliquer des ombres et des arrondis. Animations et effets de transition.

Grid Layout

• Le principe de Grilles "Grid".
• Réaliser une mise en page par bloc.
• Positionnement de chacun des blocs sur la page.
• Changement de la disposition et de la taille des blocs parents en fonction de la taille de l'écran de l'internaute.

Travaux pratiques

• Mise en page modulaire et adaptée en responsive design.

Flexbox

• La fin des floats.
• Répartitions des sous-blocs dans le bloc parent.
• Ordre d'affichage des blocs.
• Occupation de l'espace mis à disposition par les parents.
• Centrer un bloc en hauteur en 2 lignes de code.
• Changement de la disposition et de la taille de ces blocs en fonction de la taille de l'écran de l'internaute.

Travaux pratiques

• Mise en page modulaire et adaptée en responsive design

Choisir un Framework CSS

• L'offre communautaire. (Bootstrap, Material Design, Foundation).
• Critère communs et concepts partagés.
• Les Framework spécialisés composants.
• Les Framework spécialisés mobiles.

Travaux pratiques

• Initiation à différents framework CSS.

SVG, image vectorielle et responsive

• La syntaxe SVG.
• Support et intégration des images SVG dans le documents.
• SVG et polices de caractères.
• Optimisation de SVG.
• Animation des graphiques SVG.
• Bibliothèque pour la création de graphiques SVG (SVG.js, Velocity, Raphael...).

Travaux pratiques

• Travailler avec des fichiers image. Création d'une animation vectorielle.

Développeurs et chefs de projets Web

• Le délai d'accès moyent pour cette formation est de 2 Semaines
• Merci d’utiliser le formulaire de contact ou nous joindre par téléphone ou mail pour l’organisation de votre formation.

• Accueil des apprenants dans une salle dédiée à la formation.
• Documents supports de formation projetés.
• Exposés théoriques
• Etude de cas concrets
• Quiz en salle
• Mise à disposition en ligne de documents supports à la suite de la formation.

• Feuilles de présence.
• Questions orales ou écrites (QCM).
• Mises en situation.
• Formulaires d'évaluation de la formation.
• Certificat de réalisation de l’action de formation.

Pour suivre cette formation à distance vous aurez besoin

• D'un Mac ou d'un PC
• Une Connexion internet stable
• Un Navigateur Web récent
• De Teams ou de Zoom
• Du logiciel enseigné ou à utiliser installé
  
  

Dans nos locaux nous mettrons à votre disposition tout le nécessaire.

Dans vos locaux nous conviendrons du nécessaire à mettre en place pour le bon déroulé de cette formation.

Suivi et accompagnement pédagogique :

Notre équipe pédagogique sera à vos côtés tout au long de votre parcours pour assurer le suivi de l'exécution et l'évaluation de la formation.

Entretien préalable :

Avant le début de la formation, notre conseiller en formation organise un entretien avec vous afin de cerner précisément vos attentes et vos objectifs.

Horaires et rythme :

Les horaires et le rythme de la formation sont adaptables à vos disponibilités, ou peuvent être fixés en accord avec notre équipe pédagogique.

Exercices pratiques et mises en situation :

Si nécessaire, la formation inclut des exercices pratiques et/ou des mises en situation pour renforcer l'apprentissage.

Supports et attestation de formation :

À l'issue de la formation, vous aurez accès en ligne à des documents et supports pédagogiques. Un certificat de réalisation de la formation vous sera également remis.

Évaluation et satisfaction :

Nous vous inviterons à remplir un questionnaire de satisfaction à chaud, en fin de formation, et un autre à froid, trois mois après la formation. Pour certaines formations, vous recevrez également un questionnaire d'auto-évaluation en fin de formation et, le cas échéant, pourrez passer une certification (en conditions d'examen ou en télésurveillance post-formation).

Accès à la plateforme de certification :

Pour les formations certifiantes, un accès à la plateforme de certification sera mis à votre disposition.