Formation Développeur Web HTML 5, CSS 3 et JavaScript HTML 5, CSS 3, Responsive - Création de pages Web

Formation éligible au financement CPF, Afdas, AKTO, Atlas

Partager cette formation Télécharger au format pdf Ajouter à mes favoris

La formation HTML 5 et CSS 3 - Création de pages Web vous apprendra à créer des pages web basées sur HTML5 et CSS3.
Cette formation HTML 5 et CSS 3 pourra être ponctuée par la certification ENI-CIT5HTM. La certification ENI-CIT5HTM vous permet de valoriser vos compétences pour construire des pages web statiques avec un langage de balises et à les mettre en forme avec une feuille de style.
La certification ENI-CIT5HTM est un label qualité attestant officiellement de votre expertise et répondant aux demandes actuelles du marché.

Objectifs de formation

A l'issue de cette formation, vous serez capable de :

• Décrire la structuration d'une page HTML 5
• Ajouter des styles CSS aux éléments d'une page
• Utiliser les blocs et les tableaux
• Créer des formulaires avec Web Forms 2
• Tester les nouveautés HTML 5 et CSS 3
• Exploiter les "media queries" pour s'adapter aux tailles d'écran
• Expliquer la philosophie des framemorks HTML / CSS pour le développement responsive.

Compétences attestées par la certification

• Créer une page Web à l'aide des balises du HTML5 afin de rendre sa lecture accessible à tous types d'utilisateurs, y compris ceux en situation de handicap
• Mettre en forme une page Web et ses éléments HTML5 afin de respecter la maquette graphique définie par l'entreprise en utilisant les règles de mise en forme et de positionnement du CSS3
• Adapter l'affichage d'une page Web aux différents supports (ordinateur, smartphone, tablette...) en utilisant les règles de "media queries" pour optimiser sa lecture sur différents appareils
• Concevoir et développer des formulaires (formulaire d'inscription, formulaire de paiement...) utilisables par tout type d'utilisateurs, y compris ceux en situation de handicap pour recueillir des informations (textes, fichiers...) au moyen de balises adéquates du HTML5 et en respectant les recommandations de sécurité fournies par les instances officielles (OWASP, ANSII...)
• Animer avec du contenu dynamique (vidéo, audio, animation...), une page Web en vue de sa consultation par tout type d'utilisateurs, y compris ceux en situation de handicap, en utilisant les balises avancées du HTML5 et les propriétés du CSS3 pour améliorer l'expérience utilisateur.

Lien pour visualiser la fiche RS : https://www.francecompetences.fr/recherche/rs/6245/

Modalités, méthodes et moyens pédagogiques

Formation délivrée en présentiel ou distanciel* (blended-learning, e-learning, classe virtuelle, présentiel à distance).

Le formateur alterne entre méthode** démonstrative, interrogative et active (via des travaux pratiques et/ou des mises en situation).

Variables suivant les formations, les moyens pédagogiques mis en oeuvre sont :

• Ordinateurs Mac ou PC (sauf pour certains cours de l'offre Management), connexion internet fibre, tableau blanc ou paperboard, vidéoprojecteur ou écran tactile interactif (pour le distanciel)
• Environnements de formation installés sur les postes de travail ou en ligne
• Supports de cours et exercices

En cas de formation intra sur site externe à M2i, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires (équipements informatiques...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué.

* nous consulter pour la faisabilité en distanciel

** ratio variable selon le cours suivi

Prérequis

Aucun.

Public concerné

Webmasters, concepteurs Web, développeurs et chefs de projets techniques.

Programme

Jour 1 - Matin

Les terminaux

• Types de terminaux (mobile, tablette, tv, liseuse...) et leur résolution
• Périphériques, OS, navigateurs
• Le marché mobile et parts de marché
• Standards HTML, HTML 5, CSS 3 (API, sélecteurs...)

Structure d'une page

• Tags principaux
• Simplification avec HTML 5
• Les éléments et leurs placements

Exemple de travaux pratiques (à titre indicatif)

• Création d'une page Web simple

Balises structurantes

• Blocs div et span
• Listes
• Tableaux
• iFrames

Exemples de travaux pratiques (à titre indicatif)

• Création d'un menu à partir d'une liste à puces
• Création d'un tableau de contacts
• Affichage d'un fichier PDF dans une page Web

Jour 1 - Après-midi

Web Forms 2

• Champs de saisie
• Listes déroulantes
• Bouton Radio
• Champ Date
• Placeholder
• Slider
• Validation automatique

Exemples de travaux pratiques (à titre indicatif)

• Création et validation d'un formulaire de saisie d'informations d'un contact

HTML 5

• Balises sémantiques
• Audio et vidéo

Exemples de travaux pratiques (à titre indicatif)

• Affichage d'un élément audio et vidéo
• Structuration d'une page Web avec les éléments
• Header
• Nav
• Section
• Article
• Footer

Jour 2 - Matin

Styles CSS

• Syntaxe des sélecteurs CSS
• Pseudo-sélecteurs
• Principales propriétés CSS
• Règles CSS
• Frameworks CSS

Exemples de travaux pratiques (à titre indicatif)

• Analyse du site Zen Garden
• Mise en forme avec CSS
• Mise en forme d'un tableau et d'un formulaire avec Bootstrap

Structure des éléments

• Le modèle de boîte
• Eléments "block" et "inline"
• La propriété display
• Padding, marges et bordures

Exemple de travaux pratiques (à titre indicatif)

• Mise en forme d'une page Web avec les propriétés CSS : padding et margin

Positionnement

• Positionnement
• Dans le flux
• Absolu et relatif
• Fixé
• Flottant

Exemples de travaux pratiques (à titre indicatif)

• Utilisation des propriétés CSS position
• Left
• Top
• Float
• Clear

Jour 2 - Après-midi

CSS 3

• Nouveaux sélecteurs
• Fonts, couleurs et bordures
• Positionnement en colonnes
• Présentation des "media queries"

Exemples de travaux pratiques (à titre indicatif)

• Utilisation des propriétés CSS
• Les ombrages
• Les dégradés de couleurs
• Les angles arrondis
• Les Flex Box
• Mise en forme selon le type de média

Jour 3 - Matin

Présentation des "media queries"

• Adaptation des CSS aux caractéristiques du terminal
• Règles conditionnelles (orientation, device-width...)
• JavaScript et les anciens navigateurs
• Réglage complémentaire de rendu visuel (viewport)

Exemple de travaux pratiques (à titre indicatif)

• Utilisation des "media queries" pour s'adapter à différents hardwares

Principes de grilles fluides, fixes

• Conception classique versus conception selon une grille
• Importance des blocs, approche contenu / contenant
• Unités de mesure (%, em, px), mode Retina
• Eviter les débordements et les points de rupture
• Principe des box, layout avec CSS 3

Exemple de travaux pratiques (à titre indicatif)

• Test de différents types de grille

Jour 3 - Après-midi

Frameworks et librairies responsives

• Détecter les ressources avec "Modernizr"
• Librairies de substitution (less, CSS 3 PIE...)
• Frameworks CSS 960 Grid, HTML 5 Boilerplate, Bootstrap, Foundation, Skeleton, 320

Exemples de travaux pratiques (à titre indicatif)

• Installation de Bootstrap et test de différentes grilles selon des tailles d'écrans différentes

Les fondamentaux de l'accessibilité numérique

• Le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) : définition d'un site Web "accessible"
• Les outils dédiés
• Bonnes pratiques de construction HTML des pages
• La sémantique des éléments
• Les attributs fondamentaux pour l'accessibilité

Exemple de travaux pratiques (à titre indicatif)

• Adaptation des pages réalisées pour les rendre accessibles

Certification (en option, hors inscription via le CPF)

• Prévoir l'achat de la certification en supplément (ne concerne pas les inscriptions via le CPF pour lesquelles la certification est incluse)
• L'examen (en français) sera passé le dernier jour, à l'issue de la formation et s'effectuera en ligne
• La durée moyenne est de 1h00

Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

Modalités d’évaluation des acquis

• En cours de formation, par des études de cas ou des travaux pratiques
• Et, en fin de formation, par un questionnaire d'auto-évaluation et/ou une certification (proposée en option)

Accessibilité de la formation

Le groupe M2i s'engage pour faciliter l'accessibilité de ses formations. Les détails de l'accueil des personnes en situation de handicap sont consultables sur la page Accueil et Handicap.

Modalités et délais d’accès à la formation

Les formations M2i sont disponibles selon les modalités proposées sur la page programme. Les inscriptions sont possibles jusqu'à 48 heures ouvrées avant le début de la formation. Dans le cas d'une formation financée par le CPF, ce délai est porté à 11 jours ouvrés.

Partager cette formation Télécharger au format pdf Ajouter à mes favoris