OttinTimothe_4_25102020

Contexte

Projet réalisé par OTTIN Timothé.

Ceci est le projet numéro 4 de la formation développeur web d'OpenClassrooms. Le projet consistait à vérifier les bonnes pratiques en SEO et d'accessibilité au web (WCAG) d'un projet déjà existant et de l'améliorer si besoin.

Le projet contient deux versions, une donnée par OpenClassrooms qui contient pleins d'erreurs (P4_SEO_BAD) et une version corrigée et améliorée (OttinTimothe_4_25102020).

Vous êtes actuellement sur la version améliorée.

Vous trouverez l'autre version ici: P4_SEO_BAD.

Le site se devait d'être responsive et valider les validateurs W3C et au moins le niveau AA de ACchecker.

Je n'avais absolument aucune connaissance, ni conscience des besoins en accessibilité pour le web avant ce projet. Il est évident que maintenant ce sera toujours un point sur lequel je serais vigilant. Il est très important de permettre un web inclusif.

Ce projet fut réalisé en quasi-totale autonomie. Je possédais l'aide d'un mentor OpenClassrooms une fois par semaine.

Ce projet fut évalué par un mentor évaluateur OpenClassrooms qui validais si le projet était conforme aux attentes lors d'une soutenance.

Installation

• Cloner les 2 repo dans un dossier
• Ouvrez le "index.html" de chacun dans votre navigateur
• Comparez les 2 versions (WCAG, optimisation, SEO)

Ou

• Rendez-vous sur La Chouette Agence (bonne version)
• Et sur La Chouette Agence (mauvaise version)

Scénario

Vous travaillez pour La chouette agence, une grande agence de web design basée à Lyon. L’activité de l’entreprise a bien démarré mais aujourd’hui, elle est en perte de vitesse. Eh oui, la concurrence est rude. La fondatrice de l’entreprise, Sophie, cherche une solution pour faire repartir l’activité. En tapant “Entreprise web design Lyon” sur Internet, elle s’aperçoit que le site de l’agence apparaît seulement en deuxième page des moteurs de recherche. Par chance, un de vos collègues, Martin, lui a dit que vous étiez un spécialiste en référencement.

Sophie vous invite dans une réunion pour préciser le périmètre de la mission. Voici le compte-rendu de cette réunion.

De : Sophie V 

À : Moi

Objet : Compte-rendu - réunion de lancement “Amélioration du référencement"

Bonjour,

Pour faire suite à notre réunion de tout à l’heure, voici un compte-rendu de ce qui a été décidé.

Pour rappel, notre site n’apparaît qu’en deuxième page des moteurs de recherche. Pour cela, je souhaiterais que notre référencement soit amélioré.

Voici les points sur lesquels tu devras travailler :

• Analyse de l’état actuel de SEO du site fourni. J’aimerais que tu indiques les parties du site qui ne sont pas optimisées pour le SEO et/ou qui ne sont pas à jour en termes d’accessibilité, et que tu justifies tes choix. Pense à ajouter la bonne pratique à mettre en place pour chaque partie du site qui n’est pas optimisée, en citant tes sources. Tu trouveras ci-joint un modèle pour réaliser ton analyse. Une fois ce modèle complété, j’aimerais que tu sélectionnes 10 recommandations pour améliorer le site. Je te laisse cocher ces 10 recommandations choisies dans la colonne “Action recommandée”. Il faudra bien garder en tête que le but est que notre site soit mieux classé lorsqu’on tape “Entreprise webdesign Lyon” dans les moteurs de recherche. Martin voudrait qu’il y en ait au moins une sur la vitesse et la taille du site et une sur l’accessibilité. Actuellement, certains de nos utilisateurs rencontrent des problèmes d’accessibilité sur notre site, c’est un point sur lequel on veut s’améliorer. Tu devras donc ajouter les éléments nécessaires. La liste de ce que tu devras implémenter se trouve à cette adresse.
• Amélioration du SEO du site. Il faudra ensuite optimiser notre site en appliquant tes 10 recommandations à son contenu et à son code source. Tu devras pour cela fournir le code source complet de la version améliorée du site. Le site doit passer le W3C pour HTML et CSS.
• Comparaison des résultats. La vitesse de chargement des pages du site a un impact sur notre classement dans les résultats de recherche. Dans tes différentes recommandations, j’aimerais que tu prennes des mesures pour accélérer la vitesse de chargement, et que tu me démontres que cela fonctionne, grâce à des captures d’écran comparatives entre la version du site actuelle et celle que tu auras optimisée, fourni dans un rapport d’optimisation. Ce rapport devra inclure les comparaisons pour les 10 recommandations.

Tu l’imagines, tous ces éléments devront être codés en HTML et CSS. Fais également attention à ce que le site soit toujours adapté à toutes les tailles d’écran après tes modifications.

Voilà, je crois que j’ai fait le tour ! N’hésite pas si tu as la moindre question.

Tu trouveras en pièce jointe une maquette de notre site en son état actuel.

Sophie

Sophie Vasseur - Fondatrice de la chouette agence

Avec toutes ces informations en tête, vous vous mettez au travail immédiatement !

Soutenance

La soutenance, d'une durée de 30 minutes, se déroule en 3 étapes :

• Dans un premier temps, votre évaluateur jouera le rôle de Sophie. Vous lui présenterez vos rapports et expliquerez vos choix. (15 minutes)
• Dans un second temps, vous répondrez aux questions de votre client. (10 minutes)
• Enfin, votre évaluateur reprendra pleinement son rôle d'évaluateur pour un échange Questions/Réponses. (5 minutes)

Compétences évaluées

• Optimiser la taille et la vitesse d’un site web
• Écrire un code HTML et CSS maintenable
• Réaliser une recherche des bonnes pratiques en développement web
• Optimiser le référencement d'un site web
• Assurer l'accessibilité d'un site web

License

MIT