HTML5 CSS3 Responsive, création de pages web

3 j (21 heures) Ref : HTM5

Public

Développeurs, concepteurs web, chefs de projets…

Pré-requis

Niveau : Avoir des connaissances internet standard. Une expérience pratique du web est souhaitable.
Techniques (formations en classe virtuelle) : Vous devez disposer d’un ordinateur connecté à internet, d’un
micro et d’une caméra

Moyens pédagogiques

Modalité : Formation présentielle ou Formation distancielle (classe virtuelle) - Inter / Intra - Groupes de 4 à 12
stagiaires
Méthodes : Présentation des concepts, discussion technique, démonstrations, exercices et TP
Matériel :
Présentiel : Un poste informatique par stagiaire connecté à internet, à une imprimante en réseau et au réseau
informatique,
Les salles sont équipées d’un tableau interactif ou d’un vidéoprojecteur et d’un paperboard
Distanciel : Aelion met à disposition de chaque stagiaire
- Un PC équipé des outils et logiciels nécessaires à la formation auquel vous accédez via un outil de prise en
main à distance
- Un accès à un outil de classe virtuelle (Meet)
Support de formation : Un support de formation sera remis à chaque stagiaire en fin de formation : plateforme
collaborative intégrant le code source des exercices réalisés en formation, webographie, mémos

Modalités de suivi et d'évaluation

Questionnaire d’évaluation des pré-requis, suivi des connaissances tout au long de la formation, Evaluation
des acquis en fin de formation
Questionnaire d’évaluation de la satisfaction en fin de stage, feuille de présence émargée par demi-journée
par les stagiaires et le formateur, Attestation de fin de formation

L’orientation web des applications actuelles a conduit à l’émergence d’un nouveau standard, plus adapté
aux besoins et usages que la norme précédente. Enrichissement du jeu de balises, améliorations
sémantiques, nouvelles fonctionnalités externes : le HTML5 apporte un nouveau souffle à un langage
vieillissant, et le repositionne au centre du développement Web. Au-delà des évolutions de langage, c’est
une nouvelle approche du développement des IHM mais aussi des modèles de communication qu’il est
nécessaire d’acquérir pour tout concepteur d’application web moderne. A l’issue de la formation, vous
serez capable de créer des applications web dynamiques et responsives, en utilisant conjointement les
nouvelles possibilités du langage HTML5 et des feuilles de style CSS3.

Action collective OPCO ATLAS - Inscription CampusAtlas

Objectifs
HTML5 CSS3 Responsive, création de pages web

Concevoir et développer des applications Web en HTML5 et CSS3

Mettre en place et valider la structure HTML 5 des pages Web
Habiller des pages Web en CSS 3 afin de les rendre plus attractives
Produire des pages compatibles avec les différents navigateurs internet
Rendre responsive design les pages Web d'un site
Créer des images et des animations vectorielles

Programme détaillé

S1 – CONCEVOIR ET DEVELOPPER DES APPLICATIONS WEB EN HTML5 ET CSS3

A l’issue de cette séquence, vous êtes capable d’expliquer le fonctionnement des sites web ou
applications web. Vous savez identifier le rôle des langages HTML, CSS et JS. Vous comprenez la vision
de HTML5 (triptyque HTML, CSS, JS). Vous savez créer une page HTML et utiliser des éléments et
balises de base (DOCTYPE, titres, textes, images, liens, tableaux, formulaires).
Fonctionnement d’un site internet ou d’une application web
Principes et nouveautés de HTML5
Environnement de développement
Utiliser HTML5 avec CSS3 et Javascript

S2 – METTRE EN PLACE ET VALIDER LA STRUCTURE HTML 5 DES PAGES WEB

A l’issue de cette séquence, vous êtes capable de structurer une page HTML avec les balises de
structure adéquates. Vous savez que le respect des bonnes pratiques HTML (comme la structure des
pages, l’emploi de certaines balises ou attributs) permet de favoriser la validation des pages ou
l’accessibilité.
Les balises HTML5 et balises de structure
Les validateurs HTML (normes W3C)
Les normes d’accessibilité (normes WCAG, RGAA)

S3 – HABILLER DES PAGES WEB EN CSS 3 AFIN DE LES RENDRE PLUS ATTRACTIVES

A l’issue de cette séquence, vous êtes capable de charger et utiliser des styles sur une page HTML.
Le design et les CSS3
- Les transformations
- Les animations
- Les dégradés et effets de bordures
- Pseudo-classes et pseudo-éléments
- Les polices
- Le Responsive-Design et les média-queries
- Les Framework CSS avec LESS ou SASS

S4 – PRODUIRE DES PAGES COMPATIBLES AVEC LES DIFFERENTS NAVIGATEURS

INTERNET

www.aelion.fr | [email protected] | 05 61 49 42 60 Page 2

HTML5 CSS3 Responsive, création de pages web

A l’issue de cette séquence, vous êtes capable d’identifier les contraintes de rétrocompatibilité. Vous
savez identifier différentes méthodes pour y remédier. Vous savez utiliser l’une d'entre elles.
Tableaux de compatibilité navigateurs HTM5, CSS3
Outils de détections (par exemple Modrnizer)
Rétrocompatibilité et limites avec les polyfills
Rétrocompatibilité avec les outils de compilation CSS

S5 – RENDRE RESPONSIVE DESIGN LES PAGES WEB D'UN SITE

A l’issue de cette séquence, vous êtes capable d’identifier les résolutions d’écrans principales. Vous
savez appliquer les médias-queries pour cibler une résolution spécifique. Vous savez tester le responsive.
Les médias queries CSS et le flex
Les librairies de grilles
Les outils pour le responsive
- Outils développeurs intégrés au navigateur et vue responsive
- Emulation de navigateurs ou périphériques (local ou cloud)
- Tests automatisés et captures d’écrans
- Créer des images et des animations vectorielles

S6 – CREER DES IMAGES ET DES ANIMATIONS VECTORIELLES

A l’issue de cette séquence, vous êtes capable d’identifier le principe du rendu vectoriel en HTML. Vous
savez utiliser des images ou animations vectorielles en HTML.
Images matricielles vs. Images vectorielles
Polices d’icones
Dessins CSS (formes géométriques simples) et animations
SVG et animations
Canvas et animations

www.aelion.fr | [email protected] | 05 61 49 42 60 Page 3