Programme de Formation Webmaster : Création de site Web Approfondissement

Insérer un formulaire

Comprendre le fonctionnement d'un formulaire web

Connaître les balises HTML pour créer un formulaire

Appliquer un style aux éléments du formulaire

Atelier : Créer un formulaire de contact sur une page web Ré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, erreurs à éviter

Atelier : Rendre une page accessible Mettre en ligne son site web

Passer par un hébergeur : nom de domaine et espace d'hébergement

Identifier l'offre d'hébergement adaptée à ses besoins

Vérifier la mise en place du certificat SSL

Se connecter en FTP à son espace d'hébergement

Comprendre les enjeux du référencement web

Atelier : Mettre en ligne le site web réalisé Concevoir un site via un CMS

Comprendre ce qu'est un CMS

Connaître les principaux CMS pour faire un blog, site vitrine, site e-commerce, etc.

Connaître les pré-requis pour installer un CMS

Gérer son site web avec WordPress

Installer son site WordPress

Bien paramétrer un site WordPress

Créer ses contenus : pages et articles

Choisir un thème

Atelier : Commencer à créer un nouveau site avec WordPress

Programme de Formation Webmaster : Création de site Web Initiation + Approfondissement

Comprendre le fonctionnement du web

Connaître le vocabulaire : HTTP, FTP, URL, etc.

Savoir identifier les principaux langages web : HTML, CSS, JS et PHP

Comprendre le fonctionnement client/serveur

Connaître l'évolution des sites web dans le temps

Créer sa première page web

Comprendre le principe du HTML : balises et attributs

Connaître les deux familles de balise : avec et sans contenu

Insérer les balises essentielles : doctype, head, body, etc.

Intégrer du contenu dans une page en HTML

Insérer du contenu texte : titre ou paragraphe

Ajouter du contenu média : image, vidéo et audio

Créer des liens hypertextes

Atelier : Créer une page en HTMLStyliser son contenu avec le CSS

Comprendre le principe du CSS : sélecteurs et propriétés

Connaître les principaux sélecteurs : balise, class et identifiant

Définir la fonte : police, taille, graisse et inclinaison

Insérer une bordure et un arrière-plan

Atelier : Appliquer un style CSS à un document HTMLIntégrer une mise en page en HTML et CSS

Connaître les bonnes pratiques de mise en page web

Utiliser les balises HTML de mise en page : div, header, main, etc.

Utiliser les propriétés CSS de mise en page : taille, positionnement et marges

Construire un site web adaptatif

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

Viewport : notion, meta, valeurs

Adaptation de l'affichage en fonction de la résolution : les medias queries

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

Atelier : Adapter l’affichage d’une page web en fonction du supportInsérer un formulaire

Comprendre le fonctionnement d'un formulaire web

Connaître les balises HTML pour créer un formulaire

Appliquer un style aux éléments du formulaire

Atelier : Créer un formulaire de contact sur une page webRé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, erreurs à éviter

Atelier : Rendre une page accessibleMettre en ligne son site web

Passer par un hébergeur : nom de domaine et espace d'hébergement

Identifier l'offre d'hébergement adaptée à ses besoins

Vérifier la mise en place du certificat SSL

Se connecter en FTP à son espace d'hébergement

Comprendre les enjeux du référencement web

Atelier : Mettre en ligne le site web réaliséConcevoir un site via un CMS

Comprendre ce qu'est un CMS

Connaître les principaux CMS pour faire un blog, site vitrine, site e-commerce, etc.

Connaître les pré-requis pour installer un CMS

Gérer son site web avec WordPress

Installer son site WordPress

Bien paramétrer un site WordPress

Créer ses contenus : pages et articles

Choisir un thème

Atelier : Commencer à créer un nouveau site avec WordPress

Programme de Formation Compétences numériques et création de contenus web référencés, accessibles et conformes RGPD

Construire un environnement numérique

L'historique du web

Connaître le modèle client-serveur

Les outils d'accès au web

Savoir reconnaître une adresse web sécurisée

Connaître les principaux moteurs de recherche

Mener une recherche et une veille d'information

Comprendre le fonctionnement d'un moteur de recherche

Identifier les types de résultat d'une recherche : gratuit vs publicité

Différentes techniques de recherche

Savoir identifier la source d'une information

Télécharger un document en ligne

Créer un contenu web : programmer

Les balises en HTML

Visualiser le rendu d'une page web

Insérer un contenu texte

Créer des liens entre des pages

Atelier : Créer des pages web sur une thématique choisieDévelopper des documents multimédia

Connaître les formats d'image

Identifier les principales caractéristiques d'une image

Optimiser une image pour le web

Utiliser des banques d'image

Identifier la source d'une image

Atelier : Alimenter ses pages web avec du contenu médiaFormater un contenu web

Appliquer une mise en forme

Les différents codes couleurs à utiliser

Dimensionner et positionner un contenu

Atelier : Styliser ses pages webMettre en ligne un contenu web

Connaître les pré-requis

Enregistrer son nom de domaine

Réserver un espace d'hébergement

Se connecter à un serveur web

Atelier : Mettre en ligne ses pages webS'insérer dans le monde numérique : rendre visible un contenu web

Travailler le SEO d'un site

Créer des liens externes

Utiliser les réseaux sociaux

Surveiller son e-réputation

Atelier : Optimiser pour les moteurs de recherche ses pages webRendre conforme un contenu web

Comprendre les problématiques de l'accessibilité web

Les bonnes pratiques en matière d'ergonomie

Prendre en compte le RGPD

Comprendre les politiques d'utilisation et de confidentialité

Connaître les licences Creative Commons

Atelier : Améliorer l'accessibilité de ses pages webConclusion

Résumé des principales thématiques abordées

Rester informé avec les outils de veille (blog, réseaux sociaux, etc.)

Questions/Réponses

Atelier : Mises en situation diverses

Programme de Formation UI Design

Définir l'UI Design

Présentation de l'Interface Utilisateur (UI)

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

Les éléments de l'UX-UI

Le rôle de l'UI Designer

Comprendre l'interaction avec une interface

Les différents types d'interface

L'interaction selon les interfaces

L'évolution de l'IXD

Quid du “goût” en UI ?

Le goût

Le nombre d'or et la suite de Fibonacci

La règle des Tiers

Quid du “mauvais goût” ?

Atelier : Voir et formuler un besoin

Atelier : Formuler de premières idées à partir d'une carte d'empathie

Atelier : Atelier d’idéation basé sur la refonte d’un site web

Atelier : Réflexion projet fil rouge UIRéfléchir et penser une interface

Les 10 principes de Nielsen

La psychologie cognitive

Les grilles de mise en page

Adaptative ? Responsive ? Mobile first ?

L'affordance

Développer une interface

Le six-to-one

Le crazy 8

Le design studio

Le maquettage

Prototyper avec Figma

Manipuler Figma

Les plugins Figma

Atelier : Projet fil rouge - Mise en place des premiers éléments UI sur FigmaBonnes pratiques et notions d'accessibilité

Les guidelines

Les polices

Les couleurs

Focus : La psychologie des couleurs

L'iconographie

L'accessibilité

Les critères de Bastien et Scapin

La ligne de flottaison

Les gestes de navigation

Exemples de standards

Multiples de 8

Boutons

Grilles de mise en page web

Grilles de mise en page mobile

Grilles de mise en page tablette

Types d'éléments d'interface

Lexique

Déroulé des différents types d'éléments d'interface + exemples

Vocabulaire complémentaire

Atelier : Projet fil rouge - Figma Wireframe basse fidélité puis prototype graphiqueDesign system

Qu'est-ce qu'un Design system ?

Exemples d'éléments à fournir

Étapes que je conseille

Réaliser un audit UI / UX

Qu'est-ce qu'un audit UI / UX ?

Connaître sa cible

Focus : Les personas

Définir les objectifs de l'audit

Etablir un plan d'action

Réaliser l'audit

Atelier : Audit d'un produit - service - systèmeAu-delà de la conception

Les logiciels de prototypage

Mettre en avant ses projets UI

Réaliser et maintenir sa veille

Les challenges UI

Atelier : Projet fil rouge - Figma Faire évoluer son wireframe en prototype interactifNotions complémentaires

Concevoir une application mobile

Le design persuasif

Le design éthique

Programme de Formation Webmaster : Création de site Web Initiation

Comprendre le fonctionnement du web

Connaître le vocabulaire : HTTP, FTP, URL, etc.

Savoir identifier les principaux langages web : HTML, CSS, JS et PHP

Comprendre le fonctionnement client/serveur

Connaître l'évolution des sites web dans le temps

Créer sa première page web

Comprendre le principe du HTML : balises et attributs

Connaître les deux familles de balise : avec et sans contenu

Insérer les balises essentielles : doctype, head, body, etc.

Intégrer du contenu dans une page en HTML

Insérer du contenu texte : titre ou paragraphe

Ajouter du contenu média : image, vidéo et audio

Créer des liens hypertextes

Atelier : Créer une page en HTML Styliser son contenu avec le CSS

Comprendre le principe du CSS : sélecteurs et propriétés

Connaître les principaux sélecteurs : balise, class et identifiant

Définir la fonte : police, taille, graisse et inclinaison

Insérer une bordure et un arrière-plan

Atelier : Appliquer un style CSS à un document HTML Intégrer une mise en page en HTML et CSS

Connaître les bonnes pratiques de mise en page web

Utiliser les balises HTML de mise en page : div, header, main, etc.

Utiliser les propriétés CSS de mise en page : taille, positionnement et marges

Construire un site web adaptatif

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

Viewport : notion, meta, valeurs

Adaptation de l'affichage en fonction de la résolution : les medias queries

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

Atelier : Adapter l’affichage d’une page web en fonction du support