AELION : 02. HTML5, CSS3, Responsive – Création de pages web

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

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)

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

PRODUIRE DES PAGES COMPATIBLES AVEC LES DIFFERENTS NAVIGATEURS INTERNET

• 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

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

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