Rappels HTML5, CSS3 et JavaScript
- Le XHTML, le HTML5 et les balises HTML.
- Doctype, viewport, mode quirks.
- Comprendre l'arborescence des différents fichiers : page web, feuilles de style, JavaScript.
- Méthodes de création dynamique d'objets.
- Propagation des événements : capturing, bubbling.
- Gestion des événements : passage de paramètres, this, event.
- Langage CSS 2.1 et 3 : sélecteurs, propriétés et valeurs.
- Structurer les feuilles de style et le rendu graphique.
Faciliter les développements CSS
- Les préprocesseurs SASS et LESS.
- Langages SASS et LESS.
- Variables, interpolation, imbrication des sélecteurs, fichiers partiels.
- Mixins, placeholders, maps, fonctions et boucles.
- Mise en page adaptative, grid layout et flexbox.
- Bootstrap 4 : utilisation et personnalisation.
- Responsive web design, media queries.
Travaux pratiques
Conception d’une feuille de style CSS pour une page responsive design.
HTML/CSS/JavaScript : programmer des interfaces utilisateur avancées
- Manipulation du DOM et ajout dynamique d'éléments.
- Gestion et validation de formulaires, bonnes pratiques.
- Composants, boîtes de dialogue modales, indicateur de scrolling.
- Déplacement vertical doux, date picker universel, slider circulaire.
- Boutons réseaux sociaux et formulaire de connexion avec les réseaux sociaux.
- Effets sur le texte : cutout, ombrage multiple/animé, text clipping.
- Tableaux dynamiques, barres de navigation évoluées.
- Fixed sidebar, fixed menu, effet accordéon, onglets.
Travaux pratiques
Conception d’un jeu en HTML5/CSS3/JavaScript.
Graphiques et animations pour des ergonomies fluides
- Différents formats d'images : GIF, JPG, PNG, SVG.
- Optimisation et réduction du poids.
- Affichage full-screen.
- Fusion de couleurs.
- Effet parallaxe en CSS, transitions, animations et keyframes.
- Effet de loupe, Zoom dans une galerie d'images, carrousel et slideshow.
- Responsive image grid.
- Filtres sur images, spinner/loader et clipping d'images.
Travaux pratiques
Création de diaporamas photos en mode carrousel et slideshow.
Audio et vidéo, 3D et cartographie
- Intégration d'une carte pour visualiser l'emplacement de la société.
- L’API Canvas pour gestion graphique avancée.
- Intégration de vidéos et d'audios dans une page web.
- La 3D avec Three.JS.
- Création et intégration du logo de la société sur les pages.
- Cartographie avec Leaflet et OpenStreetMap.
- Caméra, renderer, géométrie, texture et scène.
Travaux pratiques
Conception d’un logo de société en 3D.
Interfaçage de services web
- Les API utiles pour le développeur : randomuser.me, unsplash.it, placehold.it, googlefonts.
- Principe des services web, API REST.
- La bibliothèque AXIOS.
- L'API REST JSONPlaceHolder.
Travaux pratiques
Consommation de services web via des APIs REST.