A l'issue de cette formation, vous serez capable de :

• Définir les concepts et les technologies du Web
• Concevoir des pages et des sites Web par des méthodologies centrées utilisateurs
• Mettre en oeuvre les outils d'édition présent dans WebFlow en Low Code / No code
• Optimiser les images pour le Web
• Décrire les principes de l'optimisation pour le référencement (SEO)
• Publier vos sites Web sur Internet.

Jour 1 - Matin

Contexte

• Révision des technologies du Web
• WebFlow face à ses conccurents

Conception de site Web

• Concept de Zoning
• Notion de Responsive
• Notion d'ergonomie
• Notion d'UX, UI et IxD
• Notion de base du SEO

Démarrer avec WebFlow

• Création d'un compte
• Vérification de l'email

Exemples de travaux pratiques (à titre indicatif)

• Analyse comparative de WebFlow et d'autres outils de création de sites Web
• Rédaction d'un brief créatif pour un site Web en appliquant les principes d'UX / UI

Jour 1 - Après-midi

Comprendre l'interface de WebFlow

• Tableau de bord
• Réglages du projet
• Editeur
• Outils
• Eléments
• Pages
• Collection
• Assets
• Types d'écran
• Zones de pages
• Eléments de pages
• Sélection de pages
• Organisation des pages
• Visualiser
• Historique des annulations
• Validation
• Exporter le code
• Etat de publication
• Réglages d'éléments
• Etat de visibilité d'éléments
• Notion de Grid
• Détection des éléments via X-Ray

Créer son premier site Web

• Outils de wireframe
• Designer la homepage
• Designer les pages
• Différents types d'éléments
• Conception de template de page

Exemples de travaux pratiques (à titre indicatif)

• Prise en main de l'interface WebFlow
• Création des wireframes et de la structure de pages d'un site Web

Jour 2 - Matin

Eléments d'une page

• Structure de page
• Basics
• Typographie et sémantique
• Contenu dynamique
• Média
• Formulaire

Animations et effets parallax

• Ajout d'effet d'apparition en CSS
• Ajout d'effet de parallax pour les images

Formulaire

• Créer un formulaire
• Paramétrage pour l'envoi d'email
• Paramétrage pour le stockage en base de données
• Outils complémentaires pour questionnaires longs et sondages

Exemples de travaux pratiques (à titre indicatif)

• Intégration de contenus (texte, images, vidéos...) dans les pages du site
• Création d'un formulaire de contact fonctionnel
• Ajout d'animations et effets visuels pour dynamiser les pages

Jour 2 - Après-midi

Optimisation des pages pour le référencement (SEO)

• Comment "pense" Google
• Structuration et sémantique des contenus textes
• Impact du choix des mots dans le menu principal
• Qualification des données pour les images
• Outils d'analyse de performance de sites Web
• Outils pour trouver les tendances de mots-clés
• Copywriting spécifique SEO

Optimisation des images pour le Web

• Pourquoi optimiser les images ?
• Les formats du Web
• Comparatifs des différents formats
• Photoshop pour le Web
• Outils supplémentaires à Photoshop

Exemples de travaux pratiques (à titre indicatif)

• Optimisation du contenu (textes, images) pour un meilleur référencement
• Réduction du poids des images sans perte de qualité visuelle

Jour 3 - Matin

Analytiques

• Outils d'analyse de la fréquentation
• Intégration des scripts Google Analytics

Performance

• Outils d'analyse de la performance d'affichage
• Optimisation du code et du cache

Publier un site

• Prévisualiser les pages
• Optimisation des éléments selon le device
• Publication sur les serveurs de WebFlow
• Publication sur un nom de domaine personnalisé
• Test du site sur différents navigateurs Web
• Test du site sur différents devices

Exemples de travaux pratiques (à titre indicatif)

• Mise en place d'outils d'analytique et analyse des premières données
• Publication du site sur un hébergement WebFlow et/ou un nom de domaine personnalisé

Jour 3 - Après-midi

Optimiser la sécurité

• Enjeux du certificat SSL
• Fragilité du langage JavaScript
• Test de fiabilité de la page
• Sécurisation minimale

Exemples de travaux pratiques (à titre indicatif)

• Sécurisation du site avec un certificat SSL
• Tests de performance et correction des éventuels problèmes