Programme de Formation React Native

Introduction

VirtualDOM, JSX, One Way Data Flow.

Atelier : Mise en place d'un environnement de travailDécouvrir les bonnes pratiques de développement

prop-types et defaultProps

De flow à TypeScript

Tests unitaires et fonctionnels.

Atelier : Améliorer l'application grâce au typage et aux tests automatisés.Techniques et design patterns avancés

Le pattern des Higher Order Components (HOC)

Le rendu dans des éléments DOM distants avec les Portals.

Injection de dépendances avec les Context.

Techniques avancées de la méthode render : Fragments et render props.

Atelier : Mise en oeuvre des « Context » et des «Portals »Redux avancé

Rappels Redux : les entités, la syntaxe et l'intégration avec React.

Simplifier et optimiser la création de formulaires avec Redux Form.

Améliorer l'expérience utilisateur grâce à Redux

Persist et au stockage local du state.

Créer un Middleware Redux Custom.

La bibliothèque Redux-Saga

Atelier : Conversion d'un formulaire à Redux Form et sauvegarde de la navigation.Optimiser les performances

Optimiser le cycle de vie des composants

Utiliser l'immutabilité pour accélérer et simplifier les traitements.

Les composants purs.

Atelier : Intégration d'une librairie d'immutabilité dans l'application Redux.Animations et transitions

Animer les composants "à la main" à l'aide d'animations et transitions CSS.

Simplifier le travail avec react-transition-group.

Comparatif et exemples de mise en oeuvre.

Atelier : Ajout de transition des différents écrans.Internationalisation

Internationalisation versus localisation : différences et scénarios d'utilisation.

Les principales librairies d'internationalisation.

Intégration dans React et Redux.

Atelier : Gestion des langues dans l'applicationTechnologies autour de React et React Native

Du REST au GraphQL

Créer une application « server-side » avec Next.js

Le CSS avec « styled-components »

Les concurrents de React Native : Ionic, Xamarin

Programme de Formation React.js + Flux

Introduction

Développement d'applications web

Panorama des librairies disponibles

React.js : présentation, composantes

Rappels HTML5, JavaScript, JSX, le DOM

Atelier : Mise en place d'un projet REACT JS

ECMASCRIPT

Spécification ECMAScript et implémentations (JavaScript, JScript)

Transpilation ES6 => ES5 avec Babel

Programmation Orientée Objet :

Evolution de la programmation orientée prototype

Classes : membres d'instances et membres de classe

Agrégation d'objets (mixins)

Héritage

Arrow functions

Design patterns

Définition de modules

Système natif de gestion des modules, chargement

Gestion des dépendances

Approche MVC et Virtual DOM

Architecture de REACT

Vues (V) : fonctionnement, implémentation

Implémentation des vues : affichages, saisies, actions, binding et filtres

Composants REACT JS

Définir un composant Créer un premier composant

Utiliser les propriétés

Etats des composants

Style CSS pour un composant

Gestion des évènements

Relation entre composants : créer et appliquer les références, ajouter des enfants aux éléments, interaction avec les propriétés.

Cycle de vie d’un composant

Comprendre les cycles

Monter un composant

Ajouter des méthodes à un composant et des propriétés par défaut

Fixer des types de propriété

Navigation REACT JS

Mise en place du Routing (React-router)

Rendu d’une route

Liens via les Router

Organiser les routes

Passage de paramètres liens, redirections

REACTJS et FLUX

Prise en main FLUX

Les stores unique, Usage reducers et les actions

Implémenter le pattern

Flux dans un projet

Atelier : créer une SPA : single page applicationConclusion

Bonnes pratiques REACT JS (state, prop types, render, composition, hoc)

Astuces

Programme de Formation Initiation à la Gestion de Projet Web

Comprendre les contours d’un projet web

Définition d’un projet web

Acteurs du projet : rôles et responsabilités

Les dimensions d’un projet web

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

Le référentiel du pilotage d’un projet : délais, coût, qualité

Les méthodes de gestion de projet

Distinguer les rôles d'un chef de projet interne et externe

Techniques et outils de planification et de suivi

Comprendre les technologies

Les différents types de site

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

Les langages web : HTML5/CSS3, JavaScript, PHP, etc.

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

Choisir un CMS ou un framework

Initier le projet web

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

Ateliers pratiques :

Simuler la première rencontre d'un projet web

Établir les personas, les besoins et attentes, et les objectifs du projet

Analyser un site existantRédiger le cahier des charges

Contenu essentiel du cahier des charges

Structurer le cahier des charges

Définir les livrables finaux et intermédiaires

Atelier pratique : Rédiger les grandes rubriques d'un cahier des chargesIntroduction et enjeux de l'ergonomie web

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

Accessibilité

UX/UI : différences et complémentarité

Comprendre les systèmes de navigation

Barre de navigation, menu, liens hypertextes, typographie, formulaires, moteur de recherche

Autres systèmes de navigation : outils d'aide, zone privée, fil d'Ariane, plan du site

Bonnes pratiques pour une navigation intuitive

Atelier pratique : Définir un wireframe de page d’accueil de site e-commerceTests utilisateurs

Enjeux des tests utilisateurs

Méthodes et types de tests

Outils : Hotjar, UserTesting, etc.

Atelier pratique : Créer une grille d'audit ergonomique de site webConclusion

Questions / réponses

Programme de Formation React.js + Redux

Introduction

Panorama des librairies disponibles

Rappels HTML5 et JavaScript

React.js : présentation, historique des versions

Installer l'environnement de développement (NodeJS/npm/yarn)

Présentation de la commande create-react-app

Atelier : Créer et démarrer un projet ReactJSDécouvrir ECMAScript

Spécification ECMAScript et implémentations

La Syntaxe Objet :

Evolution de la programmation orientée prototype

Syntaxe de classes : membres d'instances et membres de classe

Agrégation d'objets (mixins)

Héritage

Les fonctions fléchées

Design patterns

Définition de modules

Système natif de gestion des modules, chargement

Gestion des dépendances

Créer un projet React

Organisation d'un projet React

Architecture du projet

Personnaliser la configuration du projet

Comprendre le rendu d'un projet

Le Mode Strict

Concevoir des Composants

Définir un composant

Les composants fonction et classe

Utiliser les propriétés

Etats des composants

Le style (CSS/SASS) et les assets

Gestion des évènements

Relation entre composants

Utiliser la composition

Atelier : Créer plusieurs composantsMettre en forme du contenu avec JSX

Présentation de JSX

Les éléments React avec et sans JSX

Le DOM virtuel

Les expressions et les attributs

Se protéger des attaques par injection (XSS)

Les conditions et les boucles

Les fragments

Atelier : Afficher, boucler et conditionner des jeux de donnéesComprendre le cycle de vie d’un composant

Comprendre les cycles

Monter un composant

Ajouter des méthodes à un composant et des propriétés par défaut

Fixer des types de propriété

Atelier : Charger des données depuis une APIUtiliser le cycle de vie dans un composant fonctionnel: Les Hooks

Présentation des Hooks

Liste des hooks disponibles

Les hooks d'états et d'effet

Les bonnes pratiques et pièges à éviter

Les hooks personnalisés

Atelier : Créer et manipuler une todolistNaviguer dans un projet React

Mise en place du Routing (React-router)

Rendu d’une route

Liens via les Router

Organiser les routes

Passage de paramètres liens, redirections

Atelier : Mettre en place la navigationCommuniquer depuis une application: Les Formulaires

Rappel des comportements en HTML et JavaScript

Les formulaires avec React

Les composants contrôlés et non contrôlés

Récupérer et mettre à jour des données

Valider et filtrer les données

Présentation des frameworks disponibles (React Hook Form, Formik)

Atelier : Créer un formulaire d'inscriptionUtiliser Redux dans un projet

Présentation de redux

Les avantages apportés par les Store

Créer et configurer un Store

Les Actions et Les Reducers

Utiliser les Action Creators

La fonction connect()

Les Hooks Redux (useStore, useSelector, useDispatch)

Atelier : Mettre en place une authentification

Programme de Formation Chef de projet Web : Conduite de projet Web + Ergonomie de Sites 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 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

Atelier pratique : élaborer la trame d'un cahier de recettesPhase de déploiement (mise en ligne)

Corriger les écarts

Confirmer la validation formelle des livrables

PV de recette

Mise à jour du cahier des charges

Mise en production

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

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)

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 Site Web : l'essentiel pour les décideurs

Internet

Le marché en France

Tendances de marché

La transformation digitale

Les nouvelles compétences du web pour l’entreprise

Différents types de site

Comment choisir

Son hébergement

Son Nom de domaine

Atelier : stratégie et achat nom de domaine Le Projet web

Méthode Agile

Méthode Classique

La création site

CMS : contenu, e-commerce, forum

Framework

Fonctionnalité

Atelier : comment décrire une fonctionnalité Langages du web

HTML

CSS

JavaScript

PHP

Autres langages Ergonomie, UX Accessibilité

Création graphique

Temps de chargement

Responsive design, AMP Cahier des charges

Définir Objectif et stratégie

Définir Les besoins

Zoning Wireframe

Les outils de Wireframe

Comment choisir son prestataire

Aspects juridiques : mentions légales, CGV, CNIL …

Atelier : préparation à la création de son cahier des charges Les leviers webmarketing

Les bases du référencement

Référencement naturel SEO

Achat de mots clés Google Adwords SEA

Les réseaux sociaux

Qui sont-ils ? BtoC, BtoB

Les derniers chiffres

Comment communiquer ?

Emailing

Affiliation, marketplace

Audit et benchmark

Analytics : analyser votre audience

Introduction au Tag Manager

Atelier : mettre en place Google Analytics sur son site