Programme de Formation Webmaster Intermédiaire : jQuery, Bootstrap, Accessibilité

Découvrir jQuery

Présentation de jQuery : objectifs, alternatives...

Cas d'utilisation, exemples de sites

Principes spécifiques et astuces

Cohabitation avec d'autres frameworks

Atelier : Mise en place de jQuery (développement/production) - gestion des conflits avec les autres frameworks ($ / jQuery)Maîtriser les fonctionnalités de base

Fonctions essentielles et chaînage

Sélecteurs CSS3 étendus

Parcours, manipulation de l'arbre DOM et filtres

Atelier : Manipulation de pages web avec jQuery : éléments, styles, ...Comprendre les callbacks

Principe

Contrôle du contexte d'exécution des callbacks

Fonctions existantes

Atelier : Multiples cas d'utilisation des callbacks, consommationConstruire des interfaces utilisateurs grâce à jQuery

Comportement des liens

Association d'évènements et déclenchement

Effets d’animations

Atelier : Panorama des évènements gérés par jQuery, association d'effetsRéaliser des requêtes AJAX avec jQuery

Communication asynchrone/synchrone

Mise en oeuvre d'AJAX

Fonctions jQuery disponibles

Interface des objets Deferred et Promise

Chargement de pages et injection de code

Intégration complète d'AJAX et de l'UI

Compatibilité avec les autres frameworks

Atelier : Requêtes AJAX et parsing XML avec jQueryUtiliser et déveloper des plugins

Principe de fonctionnement

Panorama des plugins existants (jQuery UI, autres...)

Widgets : sliders, infobulles, drag’n’drop...

Création d'un plugin personnalisé jQuery

Atelier : Intégration/utilisation de plugins existants (slider, datePicket, ...) - Création d'un pluginDécouvrir Bootstrap

Bootstrap : présentation, apports, exemples

Bootstrap et le Responsive Web Design (RWD)

Cohabitation de Bootstrap avec les autres frameworks javascript : jQuery, ExtJS,...

Grille Bootstrap, templates de base et layouts

Composants et classes CSS

Mécanisme de RWD (classes CSS / device)

Documentation, liens utiles

Rappels HTML5/CSS

Bases de jQuery

Atelier : Inclure Bootstrap dans un projet, une première grille flexibleMaîtriser les classes CSS de base

Typographie et liens

Tableaux : lignes, bordures, survol, RWD

Eléments de formulaires, contrôles supportés

Boutons : options, tailles, état

Images et icônes : éviter les débordements

Atelier : Utilisation de classes bootstrap dans des pages webUtiliser les composants Bootstrap

Barres de navigation : tabs, pills, justified nav

Menus déroulants : formulaires, boutons, positionnement

Breadcrumb (fil d'arianne)

Pagination

Badges

Alertes

Barres de progression : labels, animations

Media object

List group

Atelier : Multiples exemples d'intégration de composants BootstrapManipuler Bootstrap en Javascript

Mise en place de transitions

Fenêtres modales : types, tailles

Gestion des menus déroulants

Tabulations

Sliders

Auto-complétion

Personnalisation de Bootstrap

Gestion des claviers virtuels

Désactivation du responsive sur certaines pages

Gestion du zoom

Atelier : Intégration d'interractions et de transitionsManipuler Bootstrap avec Less

Présentation de Less

Utilisation en mode interprété / compilé

Variables: déclaration et appel

Variables: interpolation et lazy loading

Héritage de règles

Manipulation avancée

Mixin: principes de base, espace de nommage

Mixin paramétrique

Mixin en tant que fonction

Gardien: structures conditionnelles et itératives

Inclusions d'autres feuilles Less

Atelier : Modification multiple des composants Bootstrap avec Less Comprendre l'accessibilité

Les problématiques et contraintes

Les normes WCAG 2.0, RGAA et AccessiWeb 2.2

Rendre des pages accessibles

Les éléments obligatoires pour une page (doctype, langue, etc)

Les attributs des balises (images, liens, multimedias, etc)

Structurer et présenter les informations (Titre, liste, citation, etc)

Les styles et les couleurs

Les formulaires

Faciliter la navigation

Rendre accessible les éléments consultatifs (document en téléchargement)

Atelier: Mettre en place une page valide pour l'accessibilitéUtiliser des éditeurs

Les éditeurs WYSIWYG et l’accessibilité

L’intégration d’outil CMS et l’accessibilité

Atelier: Intégrer un WYSIWYG et tester l'accessibilité Valider l'accessibilité d'un site

Comprendre le principe de la validation automatique

Utiliser les outils de validation

Les niveaux de validations

Atelier: Tester la validité d'un site

Programme de Formation Webmaster Intermédiaire : HTML5/CSS3

Introduction

Histoire du HTML

Versions

Structure d'un document

Les bases d'un document HTML

Le Doctype

Les balises html, head, body

Les commentaires

Structures des balises et des attributs

Différences entre les balises inline et block

Les balises de contenu

Les titres (h1, h2, h3, etc)

Les paragraphes

Mise en gras et en italique

Les liens hypertexte

Les listes (ordonnées et non ordonnées)

Les tableaux

Atelier : Structurer une page htmlLes Médias

Les images et format d'image

Les attributs essentiels (src, alt, etc)

Intégrer des sons et vidéos

Autre médias

Atelier : Intégrer plusieurs médias sur une page htmlLe CSS

Présentation et définition

Attacher une css à une page html

Les selecteurs (balise, id, class)

Les pseudo-selecteurs

Les propriétés et valeurs

Les commentaires

Atelier : Attacher une feuille css à une page htmlLes propriétés

Les propriétés de texte (police, taille, alignement)

Les couleurs hexadecimale, rgb, rgba et nommées

Les propriétés d'arrière plan

Les marges intérieurs et extérieur (margin, padding)

Les bordures

Les dimensions

Les listes

Atelier : Styliser une page existanteLe positionnement de bloc

Positionnement absolu ou relatif

Bloc flottant et fixe

Les blocs flexibles

Les grilles

Atelier : Positionner différents blocs sur une pageLes Formulaires

Les balises de formulaire

Les attributs action et method

Les différents champs de formulaire

Les différentes formes du champs input

Les attributs pour les champs de formulaire (placeholder, required, etc)

Valider un formulaire

Atelier : Créer un formulaire d'inscriptionRédiger du contenu accessible

Découvrir les normes (WAI, WCAG)

Connaître les critères essentiels : textes alternatifs, liens, menus, navigation

Critères de choix des couleurs

Savoir adapter le code HTML et CSS

Structurer un formulaire, erreur à éviter

Atelier : Rendre une page accessibleLes animations

Les animations et transitions

Durée des animations

Les fonctions de transition

Les Keyframes

Atelier : Créer une animationAutres propriétés CSS3

Les transformations

Les ombres de texte et de bloc

Les bordures arrondies

Les colonnes

La propriété box-sizing

Programme de Formation Webmaster Intermédiaire : Responsive Web Design (RWD)

Introduction

Histoires du web

Comprendre le Responsive

Construire un site web adaptatif

Responsive Web Design (RWD) : définition, composantes

Contraintes ergonomiques et fonctionnelles

Viewport : notion, meta, valeurs

Unités relatives (%, em) vs. absolues (px)

Créer une grille d'affichage flexible

Tailles d'écran, résolution optimale

Modes portrait et paysage

Expression des tailles en pourcentage (%), em

Tailles minimales, maximales

Blocs, approche contenu/contenant

Principe des box, layout avec CSS3

Taille des fonts : fixer une base pour les tailles, conversions em

Eviter les débordements

Atelier : Multiples exemples de grilles flexiblesUtiliser des médias flexibles

Images flexibles : images de fond, adaptation HTML5

Marges et espaces flexibles

Vidéos adaptées

Support des propriétés CSS par les anciens navigateurs

Atelier : Eviter le débordements d'images/vidéosEcrire des CSS3 Media Queries

Adaptation de l'affichage en fonction de la résolution

Types de médias

Choix des règles conditionnelles : orientation, device-width

Medias queries internes, externes

Gestion des menus et sliders

Atelier : Création de site responsive pure css avec des media-queriesFrameworks RWD

Panorama des frameworks existants

Bootstrap

960 grid

Optimisation des ressources graphiques

Atelier : Construction d'un site adaptatif avec BootstrapPassage de la certification (si prévue dans le financement)

Programme de Formation Webmaster Intermédiaire : HTML5/CSS3 + Responsive Web Design (RWD)

Introduction

Histoire du HTML

Versions

Structure d'un document

Les bases d'un document HTML

Le Doctype

Les balises html, head, body

Les commentaires

Structures des balises et des attributs

Différences entre les balises inline et block

Les balises de contenu

Les titres (h1, h2, h3, etc)

Les paragraphes

Mise en gras et en italique

Les liens hypertexte

Les listes (ordonnées et non ordonnées)

Les tableaux

Atelier : Structurer une page htmlLes Médias

Les images et format d'image

Les attributs essentiels (src, alt, etc)

Intégrer des sons et des vidéos

Autres médias

Atelier : Intégrer plusieurs médias sur une page htmlLe CSS

Présentation et définition

Attacher une css à une page html

Les sélecteurs (balise, id, class)

Les pseudo-classes

Les propriétés et valeurs

Les commentaires

Atelier : Attacher une feuille css à une page htmlLes propriétés

Les propriétés de texte (police, taille, alignement)

Les couleurs hexadecimale, rgb, rgba et nommées

Les propriétés d'arrière plan

Les marges intérieurs et extérieur (margin, padding)

Les bordures

Les dimensions

Les listes

Atelier : Styliser une page existanteLe positionnement de bloc

Positionnement absolu ou relatif

Bloc flottant et fixe

Les blocs flexibles

Les grilles

Atelier : Positionner différents blocs sur une pageLes Formulaires

Les balises de formulaire

Les attributs action et method

Les différents champs de formulaire

Les différentes formes du champs input

Les attributs pour les champs de formulaire (placeholder, required, etc)

Valider un formulaire

Atelier : Créer un formulaire d'inscriptionRédiger du contenu accessible

Découvrir les normes (WAI, WCAG)

Connaître les critères essentiels : textes alternatifs, liens, menus, navigation

Critères de choix des couleurs

Savoir adapter le code HTML et CSS

Structurer un formulaire, erreur à éviter

Atelier : Rendre une page accessibleLes animations

Les animations et transitions

Durée des animations

Les fonctions de transition

Les Keyframes

Atelier : Créer une animationAutres propriétés CSS3

Les transformations

Les ombres de texte et de bloc

Les bordures arrondies

Les colonnes

La propriété box-sizing

Construire un site web adaptatif

Responsive Web Design (RWD) : définition, composantes

Contraintes ergonomiques et fonctionnelles

Viewport : notion, meta, valeurs

Unités relatives (%, em) vs. absolues (px)

Créer une grille d'affichage flexible

Tailles d'écran, résolution optimale

Modes portrait et paysage

Expression des tailles en pourcentage (%), em

Tailles minimales, maximales

Blocs, approche contenu/contenant

Principe des box, layout avec CSS3

Taille des fonts : fixer une base pour les tailles, conversions em

Eviter les débordements

Atelier : Multiples exemples de grilles flexiblesUtiliser des médias flexibles

Images flexibles : images de fond, adaptation HTML5

Marges et espaces flexibles

Vidéos adaptées

Support des propriétés CSS par les anciens navigateurs

Atelier : Eviter le débordements d'images/vidéosEcrire des CSS3 Media Queries

Adaptation de l'affichage en fonction de la résolution

Types de médias

Choix des règles conditionnelles : orientation, device-width

Medias queries internes, externes

Gestion des menus et sliders

Atelier : Création de site responsive pure css avec des media-queriesFrameworks RWD

Panorama des frameworks existants

Bootstrap

960 grid

Optimisation des ressources graphiques

Atelier : Construction d'un site adaptatif avec BootstrapPassage de la certification (si prévue dans le financement)

Programme de Formation Découverte des frameworks CSS : Bootstrap et Tailwind

Rappels sur le responsive web design et CSS

Viewport et Media queries

Block, inline et autres display

Grid et Flex

Le nesting

Atelier : Création d'une page complexe en CSS3Utiliser Boostrap, les Structures et Breakpoints

Composition Bootstrap : container, row et col

Les breakpoints

Composition HTML et bootstrap

Les Positions

Atelier : Modification de page et agencement responsive sur différent formatUtiliser les composents Bootstrap

Formulaires

Images

Card

Navbars

Atelier : Création de formulaire et réarrangement de la pagePersonnaliser avec SCSS

Présentation du SCSS

Créations des variables SCSS

Mixins

@include

Atelier : Révision et customisation des couleurs et dimensions standards de BootstrapManipuler des classes Bootstrap avec Javascript

Intégrer Bootstrap en JS

Prendre en charge et modification des composant en JS

Atelier : Ajout et manipulation d'élément Bootstrap en JSInstaller et Utiliser Tailwind

Présentation de Tailwind

Intégration via NPM

Inclusion dans un projet

Atelier : Création d'un projet one-page en TailwindCréer des interfaces avec Tailwind

Syntaxe de Tailwind

Intégration HTML

Boostrap VS Tailwind

Atelier : Création d'interface utilisateur riche et responsive avec TailwindCréer une architecture modulaire de Tailwind

Création de module

l'outil @apply

L'extraction sous Tailwind

Atelier : Création de carte complexe sous la forme de moduleUtiliser Tailwind UI et ses composants

Bibliothèque de composant Tailwind

Composants de présentation

Composants de navigation

Composants de formulaire

Atelier : Ajout d'élément sur le projet one-pageUtiliser Tailwind UI avec Javascript

Tailwind et les frameworks js

Intégration de tailwind en JS

Atelier : Création d'un jeu FizzBuzz en mise en page avec Tailwin

Programme de Formation Figma : Initiation

Comprendre les bases de l’UI Design

Présentation de l'interface utilisateur (UI)

La place de l’UI au sein de l’UX

Le rôle de l’UI Designer

Installer Figma

Créer un compte

Les différentes formules Figma

Les fichiers, équipes et projets d’équipes

Gérer et organiser ses projets avec la version gratuite

Comprendre la suite Figma

Faire le tour d’horizon des outils Figma : Design, Figjam, Slides, Buzz, Sites et Make

Comprendre les liens entre les outils

Lier les outils au travers de l’utilisation de la communauté Figma

Prendre en main Figma Design

Comprendre l’interface Design et ses outils

Comprendre l’interface Prototype et ses outils

Comprendre le principe des pages

Découvrir le panneau Layers et Assets

Découvrir les outils essentiels de Figma Design

Comprendre l’outil essentiel des Frames

Utiliser et paramétrer les grilles de mise en page

Utiliser les repères

Naviguer dans la zone de travail

Créer des formes de bases

Créer des courbes avec la plume

Transformer une forme standard en tracé

Ajouter ou soustraire des formes

Gérer la couleur

Créer et éditer du texte

Transformer la boîte de texte

Redimensionner avec l’outil Scale

Manipuler les objets

Importer une ou plusieurs images

Déplacer des images

Créer un masque sur une image

Ajouter des effets

Copier des tracés vectoriels depuis Illustrator

Répéter des éléments et les aligner

Créer et organiser des styles

Comprendre le principe des styles pour automatiser nos actions

Créer des styles de texte, les appliquer et les modifier

Créer des styles de couleurs ou d’effets

Créer des styles de grilles de mise en page

Créer des groupes de style avec le renommage

Atelier : Créer une illustration sur FigmaTravailler avec l’Autolayout

Comprendre la différence entre frame simple et frame avec option Autolayout

Activer l’autolayout sur des éléments d’interface

Découvrir les paramètres et fonctionnement de l’autolayout

Paramétrer un autolayout

Travailler avec les composants

Créer et modifier des composants

Découvrir les propriétés possibles sur les composants

Ajouter et appliquer des propriétés aux composants

Comprendre le lien entre Composant principal et Instances

Animer ses composants

Atelier : Réaliser de premiers éléments d’interface avec les outils Autolayout et composantsUtiliser les plugins

Choisir et installer un plugin

Découvrir les plugins indispensables

Utiliser les plugins dans ses projets

Atelier : Création d’une onepagePremiers outils indispensables du prototypage

Maîtriser les contraintes des éléments d’interface

Gérer les défilements verticaux et horizontaux

Comprendre les comportements scroll, fixed et sticky

Définir les comportements scroll, fixed et sticky d’un élément d’interface

Atelier : Création d’un ou plusieurs écrans d’une application mobile Podcasts