Projet 6 du parcours "Développeur d'application - JavaScript React", qui consiste à créer un site accessible pour une plateforme de photographes.
FishEye est un site web qui permet aux photographes indépendants de présenter leurs meilleurs travaux. Ils ont récemment levé des fonds et aimeraient mettre à jour leur site web pour le faire passer d'un site statique à un site dynamique.
Notre équipe est chargé de fournir un prototype fonctionnel d'un nouveau site qui pourra être présenté à FishEye lors de notre prochaine réunion avec les clients. Je serais chargé de fournir tout le HTML, le CSS et le JavaScript nécessaires au prototype, ainsi qu'être accessible pour tous.
- Page d'accueil :
- Liste de tous les photographes avec leur nom, leur slogan, leur localisation, leur prix/heure et une image miniature de leur choix.
- Lorsque l'utilisateur clique sur la vignette d'un photographe, il est amené à sa page.
- Page des photographes (le contenu de la page sera généré de manière dynamique en fonction du photographe) :
- Affiche une galerie des travaux du photographe.
- Les photographes peuvent montrer à la fois des photos et des vidéos.
- Dans le cas des vidéos, montrer une image miniature dans la galerie.
- Chaque média comprend un titre et un nombre de likes.
- Lorsque l'utilisateur clique sur l'icône "Like", le nombre de likes affiché est incrémenté.
- Le nombre de likes total d’un photographe doit correspondre à la somme des likes de chacun de ses médias.aw
- Les médias peuvent être triés par popularité ou par titre.
- Lorsque l'utilisateur clique sur un média, celui-ci doit s’ouvrir dans une lightbox :
- Lorsque la lightbox est affichée, il y a une croix dans le coin pour fermer la fenêtre.
- Des boutons de navigation permettent de passer d'un élément média à l'autre dans la lightbox (les utilisateurs peuvent cliquer sur ces boutons pour naviguer).
- Les touches fléchées du clavier permettent également de naviguer entre les médias dans la lightbox.
- Afficher un bouton pour contacter le photographe.
- Le formulaire de contact est une modale qui s'affiche par-dessus le reste.
- Il comprend des champs pour les noms, l'adresse électronique et le message.
- Plus tard, le bouton de contact enverra un message au photographe. Pour l'instant, seulement afficher le contenu des trois champs dans les logs de la console.
- Utilisez des éléments HTML "sémantiques" qui décrivent leur intention autant que possible, au lieu de mettre des éléments et partout.
- Lorsque vous devez créer un élément personnalisé, ajoutez des attributs ARIA pour décrire ce qu'il fait.
- Les images doivent présenter un attribut “alt”. Utilisez le titre des photos pour remplir cet attribut, et le nom du photographe dans le cas d’une photo de profil de photographe.
- Le code devrait passer les tests AChecker sans “known issue”, afin de s'assurer de sa conformité aux WCAG).
- Toute la gestion des événements doit être configurée (utilisez KeyboardEvent.key ou KeyboardEvent.code.).
- Utilisez un lecteur d'écran gratuit pour vous faire une idée de ce que représente l'utilisation du site pour une personne malvoyante.
- Le code est séparé en différents fichiers (HTML, CSS, JavaScript).
- ESLint est utilisé (avec les paramètres par défaut) pour garantir que le code est robuste. Ceci est particulièrement facile à intégrer avec l'IDE VSCode.
- Une version moderne (ES6 ou supérieure) de JavaScript est utilisée et les fonctionnalités obsolètes ne sont pas utilisées.
- Le code est lisible. Il faudra s'assurer que les variables et fonctions ont un nom qui ont un sens, et commenter le code lorsque le nom n'indique pas explicitement ce qu'il se passe
assets/
, contient toutes les images utilisées
default/
, contient une image défaut de profil utilisateuricons/
, contient les icônes svg utiliséesimages/
, contient les images utilisées dans l'applicationavatar/
, contients les avatars des photographesgallery/
, contient les images des photographes à des formats différentsmedium/
, medias (images et vidéos) des photographes pour un affichage dans la lightboxsmall/
, medias (images et vidéos) des photographes à un petit format pour affichage en gallery
logo.png
, logo de FishEye (nom)
favicon
, icon du logo de FishEye
css/
, contient les fichiers css où sont définit les styles de l'application
photographer.css
, style de la page des photographestyle.css
, style de la page index
data/
, contient les données en JSON pour l'application
sass/
, contient les fichiers sass sous le modèle 7-1, ensuite compilé en css
Base/
, contients les fondations du site.Componants/
, contient blocs BEM indépendant réutilisableLayout/
, contient les blocs BEM réutilisablePages/
, contient les blocs de code qui ne s’appliquent qu’à une seule pageutils/
, contient les animations et mixins créées
scripts/
, contient les fichiers JavaScript
factories/
, contient les fichiers JS nécessaire à l'usinage de création des données JSONpages/
, contient les fichiers JSindex.js
etphotographer.js
nécessaire à la création des pages de l'applicationutils/
, contient les différents composants JS utilisés dans les pages de l'applications
index.html
, page d'index du site contenant la liste des photographes
photographer.html
, page des photographes
package.json
& package-lock.json
, fichiers utilisés par npm pour gérer les dépendances
.gitignore
, fichier qui permet de définir les fichiers à ignorer dans la liste des fichiers modifiés à "push"
.eslintrc.js
, fichier de ESLint (outil d'analyse de code statique) permettant de le configurer
README.md
, fichier de présentation et d'explication du projet que vous lisez actuellement
- Gérer les évènements d'un site avec JavaScript
- Assurer l'accessibilité d'un site web
- Ecrire du code JavaScript maintenable
- Développer une application web modulaire avec des design patterns