Programme de Formation Chef de projet Web : Conduite de projet Web

Comprendre les contours d’un projet

Définition d’un projet web

Acteurs du projet

Les dimensions d’un projet

Facteurs de risques

Les phases d’un projet web

Devenir Chef de projet web

Son rôle et ses missions

Les qualités et compétences requises

Manager un projet : planifier, suivre et animer

Les méthodes de gestion de projet

Comprendre les technologies

Les différents types de site

Hébergement web : nom de domaine, type de serveur, certificat SSL...

Les langages web : HTML5/CSS3, JavaScript, Ajax...

Les standards du web : front vs back, responsive web design, accessibilité...

Définir son environnement de développement : PHP, JS, Java, Python...

Faut-il passer par un CMS ? Un framework ?

Choisir son CMS : WordPress, Drupal, Prestashop...

Choisir son framework : Symfony, Laravel, Angular...

Phase d’initialisation ou d’avant-projet

Etudier l’existant

Définir la cible : créer le(s) persona(s)

Recueillir les besoins et attentes

Définir des objectifs SMART

Présenter l’environnement du projet technique, technologique, concurrentiel

Evaluer le budget et le planning

Atelier pratique : Réaliser une fiche projetDéfinir la stratégie

Définir le contenu éditorial : SEO

Créer une arborescence

Lister les fonctionnalités à mettre en place

Réfléchir à l'ergonomie

Appliquer une charte graphique

Paramétrer l'environnement technique de travail

Anticiper les campagnes webmarketing

Définir les interactions avec les réseaux sociaux

Installer un gestionnaire de balises

Atelier pratique : compléter la fiche projet avec la stratégie SEO et SEA, créer une arborescencePhase de planification

Composer son équipe : méthode RACI

Etablir un plan de communication interne

Créer un macro-planning : phases du projet, jalons, dates limites, …

Utiliser le diagramme de Gantt pour gérer la planification

Les outils de gestion de projet

Définir les risques du projet

Anticiper la gestion des risques

Atelier pratique : créer un diagramme de Gantt et manipuler des outils de suiviRédiger le cahier des charges

Quelles informations sont nécessaires ?

Structurer le cahier des charges

Définir les livrables finaux et intermédiaires

Définir un cahier des spécifications

Créer un PAQ (Plan d'assurance qualité)

Atelier pratique : rédiger les grandes rubriques d'un cahier des chargesPhase d’exécution

Formaliser le contenu du projet

Fournir les livrables

Gestion des délais et suivi des écarts

Les réunions d’avancement

Définir le plan de tests efficace : cahier de recette

Anticiper la gestion des problèmes

Mise à jour du cahier des charges

Phase de contrôle

Analyser l’efficacité du projet : respect du planning, des ressources prévues…

Recettage

Tests et corrections sur serveurs de production

Effectuer des tests de montées en charge

Résoudre les éventuels problèmes

Phase de déploiement

Corriger les écarts

Confirmer la validation formelle des livrables

PV de recette

Mise à jour du cahier des charges

Mise en production (en ligne)

Dresser un bilan de projet : recueillir les leçons apprises, les forces et faiblesses

Définir des axes d’améliorations

Anticiper la maintenance du site

Phase de suivi (maintenance)

Effectuer les corrections après mise en production

Outils de gestion des anomalies (suivi de bugs)

Gérer le renouvellement du serveur et des noms de domaines

Promotion du site : référencement, publicité, promotion hors ligne

Effectuer de nouvelles campagnes de promotion (SEO/SEM/SMO)

Réaliser des newsletters

Mettre en place un suivi des performances du site (KPIs)

Conclusion

Questions / réponses

Programme de Formation Ergonomie de sites Web

Comprendre l'ergonomie des sites Web

Les enjeux de l’ergonomie web

Définitions générales : ergonomie, ligne de flottaison, format, supports mobiles.

Loi de Gestalt et Fitts

Principes de base

Affordance

Utilisabilité, persona

Accessibilité

UX/UI

Atelier pratique : définir un wireframe avec les éléments standards d’une page d’accueil de site e-commerceComprendre les systèmes de navigation

Barre de navigation

Menu : classique, vertical, horizontal, dynamique

Liens hypertextes

Typographie

Formulaires

Moteur de recherche

Autres systèmes de navigation

Outils d'aide à la navigation

Zone privée - Zone membre

Fil d'Ariane

Plan du site

Erreurs fréquentes

Textes et images

Choix des couleurs

Lisibilité du contenu

Conseils de Nielsen

Atelier pratique : comparer l'ergonomie de 3 sites de mairiesDécouvrir les interfaces riches et l'interactivité

Les technologies : Javascript, Ajax, XML, RSS

Intérêt des interfaces riches

Présentation de multiples outils : slider, zoom, effets divers

Présentation de l'interactivité : chat, rappel immédiat, forum

Découvrir les outils pour créer son ergonomie

Supports standards : éditeur/logiciel de présentation

Outils spécifiques pour la création d'ergonomie

Atelier pratique : repenser la page d'accueil d'un site web en version mobileGérer les difficultés de sites volumineux

Accès direct : l'importance de la page d'accueil

Accès pages intérieures : erreurs à éviter

Gestion de la navigation : arborescence, menu secondaire

Gestion de la pagination

Gestion du multimédia

Importance du moteur de recherche et recherche avancée

Gestion des risques liés à la perte d'internaute

Gestion des risques liés au référencement

Comprendre les spécificités des sites catalogues et e-commerce

Quelques exemples types de sites catalogues

Page de présentation de produit

Tunnel de conversion

Étude de cas & audit ergonomique

Relecture heuristique avec une grille

Identification des points bloquants

Focus : navigation, contenu, interactivité, accessibilité

Conception UX : zoning, wireframe, CTA, tunnel de conversion

Atelier pratique : étude de casConclusion

Questions / réponses

Programme de Formation Accessibilité Avancé : Développer et coder des applications mobiles accessibles

>>> Formation éligible ACN Accessibilité Numérique Atlas - Nous consulter

Programme de Formation Accessibilité Avancé : Tester l'accessibilité de sites et d'applications

Introduction à l’audit d’accessibilité

Rappel des enjeux légaux et normatifs (WCAG, RGAA, EN 301 549)

Présentation du processus d’audit : périmètre, échantillon, planification

Définition des rôles et responsabilités dans un audit (développeur, référent accessibilité, auditeur)

Atelier fil rouge : définir le périmètre et l’échantillon d’un audit sur un site réel

Documents et méthodologie du RGAA

Découverte des documents de référence et grilles de test

Structure et logique des critères RGAA

Notions de taux de conformité, exemptions et dérogations

Rédaction de la déclaration de conformité RGAA

Atelier fil rouge : étude d’une déclaration de conformité existante et analyse critique

Outils de test et techniques de productivité

Panorama des outils manuels et automatiques (ANDI, HeadingsMap, Wave, Axe DevTools, Stylus, Pa11y)

Mise en place d’un environnement d’audit (Firefox + extensions)

Automatisation partielle des tests et intégration dans un workflow de développement

Atelier fil rouge : mise en place d’une batterie d’outils d’audit sur un projet web

Tests manuels et critères RGAA

Méthodologie de test par thématique : images, cadres, couleurs, multimédia, tableaux, liens, scripts, formulaires, navigation, présentation et structuration de l’information

Analyse des cas d’usage fréquents et pièges courants

Atelier fil rouge : réalisation d’un audit complet d’une page web selon plusieurs critères du RGAA

Accessibilité et technologies d’assistance

Présentation des lecteurs d’écran et outils d’assistance (NVDA, VoiceOver, JAWS)

Rôle des attributs ARIA : nom, rôle, valeur, bonnes pratiques d’utilisation

Évaluation des interactions clavier et vocales

Atelier fil rouge : test d’un composant dynamique au clavier et à la synthèse vocale

Analyse approfondie de cas pratiques

Audit de sites réels (exemples clients, applications web, formulaires dynamiques)

Analyse de conformité et propositions d’amélioration

Présentation et rédaction du rapport d’audit

Atelier fil rouge : production d’un mini-rapport de conformité pour un site choisi par le groupe

Industrialisation et suivi de la conformité

Intégration des tests d’accessibilité dans la chaîne CI/CD

Mise en place d’une politique de suivi de conformité et de veille

Organisation d’audits récurrents et formation continue des équipes

Atelier fil rouge : création d’un plan de contrôle qualité accessibilité intégré au projet

Programme de Formation Accessibilité Avancé : Développer et coder des applications mobiles accessibles + Tester l'accessibilité de sites et d'applications

Découvrir le référentiel d’accessibilité RGAA-APPS

Concept et principes

Référentiel technique

Ensemble des critères et contraintes à prendre en compte

Niveaux : A, AA, AAA

Atelier : Analyse du référentiel RGAA-APPSConnaître les fonctionnalités d’assistance disponibles

Assistant vocaux (SIRI, GOOGLE)

Paramètres d’accessibilité interne

Synthèse vocale et lecteur Vocaux

Atelier : Création d’une application simple utilisant la reconnaissance vocale.Implémenter des applications mobiles accessibles

Différentes approches de développement : natif, hybride, web mobile

Xcode pour accessibilité

Interface Builder

protocole UIAccessibility

Tailles de polices de caractères dynamiques

isAccessibilityElement

accessibilityLabel

accessibilityTraits : Bouton, Image, champ recherche, lien, etc.

Ordre de lecture et ordre de navigation

UIAccessibilityContainer

shouldGroupAccessibilityChildren

Utilisation des fonctions de détection des réglages utilisateurs UIAccessibilityIsVoiceOverRunning

Outils et méthodes de test

Accessibilité avec des frameworks (PhoneGap, Xamarin,...)

Atelier : création d’une application mobile complète accessible (choix d’un type de développement : natif/hybride)Introduction à l’audit d’accessibilité

Rappel des enjeux légaux et normatifs (WCAG, RGAA, EN 301 549)

Présentation du processus d’audit : périmètre, échantillon, planification

Définition des rôles et responsabilités dans un audit (développeur, référent accessibilité, auditeur)

Atelier fil rouge : définir le périmètre et l’échantillon d’un audit sur un site réel

Documents et méthodologie du RGAA

Découverte des documents de référence et grilles de test

Structure et logique des critères RGAA

Notions de taux de conformité, exemptions et dérogations

Rédaction de la déclaration de conformité RGAA

Atelier fil rouge : étude d’une déclaration de conformité existante et analyse critique

Outils de test et techniques de productivité

Panorama des outils manuels et automatiques (ANDI, HeadingsMap, Wave, Axe DevTools, Stylus, Pa11y)

Mise en place d’un environnement d’audit (Firefox + extensions)

Automatisation partielle des tests et intégration dans un workflow de développement

Atelier fil rouge : mise en place d’une batterie d’outils d’audit sur un projet web

Tests manuels et critères RGAA

Méthodologie de test par thématique : images, cadres, couleurs, multimédia, tableaux, liens, scripts, formulaires, navigation, présentation et structuration de l’information

Analyse des cas d’usage fréquents et pièges courants

Atelier fil rouge : réalisation d’un audit complet d’une page web selon plusieurs critères du RGAA

Accessibilité et technologies d’assistance

Présentation des lecteurs d’écran et outils d’assistance (NVDA, VoiceOver, JAWS)

Rôle des attributs ARIA : nom, rôle, valeur, bonnes pratiques d’utilisation

Évaluation des interactions clavier et vocales

Atelier fil rouge : test d’un composant dynamique au clavier et à la synthèse vocale

Analyse approfondie de cas pratiques

Audit de sites réels (exemples clients, applications web, formulaires dynamiques)

Analyse de conformité et propositions d’amélioration

Présentation et rédaction du rapport d’audit

Atelier fil rouge : production d’un mini-rapport de conformité pour un site choisi par le groupe

Industrialisation et suivi de la conformité

Intégration des tests d’accessibilité dans la chaîne CI/CD

Mise en place d’une politique de suivi de conformité et de veille

Organisation d’audits récurrents et formation continue des équipes

Atelier fil rouge : création d’un plan de contrôle qualité accessibilité intégré au projet

Programme de Formation Accessibilité : Fondamentaux Découvrir l'accessibilitéL'Initiative d'Accès au Web (Web Accessibility Initiative - WAI)

Règles pour l'accessibilité des contenus Web (WCAG)

Référentiels disponibles : RGAA, AccessiWeb,...

Historique et évolution de la prise en compte de l’accessibilité

Atelier : Comprendre les enjeux de l'accessibilité avec des vidéos montrant des utilisateurs en situation d'handicap utilisant le Web

(expérience simulée de handicap visuel dans la navigation web , navigation sans la souris,...)Apprendre le cadre légalRessources et documents officiels

Référentiel général d'accessibilité pour les administrations (RGAA)

Référentiel AccessiWeb

Découvrir les critères et les thématiques

Déclaration de conformité

Comprendre l’évolution du cadre légal et des normes

Atelier : Étudier les référentiels d'accessibilité - Comprendre le contenu d'une déclaration de conformité.Mettre en œuvre l'accessibilité webAppréhender l’ergonomie pour l’accessibilité : navigation, images, couleurs, textes,...

Organisation de la démarche, gestion de projet

Assistants vocaux et lecteurs d’écran

Simulation de situations

Comprendre l’importance des tests

Découvrir des outils d’évaluation de l’accessibilité

Atelier : Utiliser les assistants vocaux et la synthèse vocale, essayer la simulation d'handicap visuel - utilisation d’outils de diagnostics simple - Exemple de site avant et après mise en conformité pour l’accessibilité.Intégrer l'accessibilité dans un projet digitalCycles de développement d’une application web : cascade, V, spirale

L’accessibilité numérique dans un projet agile

Rappels des règles d’accessibilités et des référentiels disponibles : RGAA, AccessiWeb,...

Présentation de la déclaration de conformité

Atelier : Analyse de la structure d’une déclaration de conformité.Prendre en compte l’accessibilité dans la gestion de projetsPrésentation des actions à mener à chaque étape de conception d’un projet web.

Étapes importantes pour un changement de méthodes

Management d’équipe, choix des personnes

Comment faire une planification

Gérer les freins au changement et trouver les solutions

Savoir évaluer le coût financier et humain

Erreur à éviter

Outils et ressources

Mettre en place des documents de maintenance

Atelier : Bonnes pratiques de prise en compte de l’accessibilité dans un projet digtal.Rédiger des pages web accessiblesConnaître les critères principaux et leur intérêt et impact :

Texte alternative, Liens

Menu, navigation

Structure et présentation, Couleurs

Atelier : Rédaction d’un contenu accessible.Tester les pages webÉvaluer l’accessibilité d’une application web

Génération de rapports de tests.

Atelier : Présentation d’outils de tests et automatisation (pa11y, Selenium).Comprendre les enjeux d’un contenu accessibleTirer profit de l’accessibilité

Comprendre l’importance de l’accessibilité pour le SEO

Présentation des évolutions à prendre en compteCréer une maquette d’un site accessibleCréer une bonne structure pour un site web

Savoir adapter une présentation et faire le bon choix

Déterminer l’ergonomie à mettre en place (UI, UX)

Outils de wireframing

Atelier : Conception d’une maquette de site web avec choix des couleurs

(logiciel de création au choix du stagiaire)Rédiger du contenu accessibleConnaître les critères essentiels : textes alternatifs, liens, menus, navigation

Critères de choix des couleurs

Savoir adapter le code HTML et CSS, bonnes pratiques et changement d’habitude

Structurer un formulaire, erreur à éviter

Comprendre le fonctionnement de la synthèse vocale, quand et comment l’utiliser

Gérer le contenu multimédia pour l’accessibilité

Atelier : rédaction de contenu et analyse des problématiques courantes/solutions : Contact et web-chat, texte et audio.Passage de la certification (si prévue dans le financement)