Pour cette mission, j’ai conçu un site web pour Nathalie Mota, une photographe professionnelle spécialisée dans le domaine de l’événementiel.
Ce site constitue sa vitrine principale, lui permettant non seulement de se faire connaître mais aussi de partager ses collections de photos avec ses clients. Ces derniers ont alors la possibilité d’acheter les droits des photos, de les faire imprimer ou de commander des versions en haute définition.
Elle m’a transmis plusieurs documents par e-mail pour m’aider dans cette tâche.
Bonjour,
J’espère que vous allez bien.
Je vous envoie en pièce jointe le matériel dont vous aurez besoin pour créer mon nouveau site :
- les maquettes du site qu’un ami graphiste a réalisées, et qui devront être respectées en modes desktop et mobile ;
- les spécifications fonctionnelles du site pour préciser les comportements attendus ;
- la feuille de calcul listant les infos sur les images à insérer ;
- le dossier ZIP contenant les images liées à ces contenus.
Une fois le travail terminé, pourriez-vous m’envoyer l’archive du site (fichiers et base de données) prête à être intégrée sur motaphoto.com au format ZIP, ainsi qu’un fichier TXT ou PDF contenant un lien vers le repository GitHub qui met à disposition le thème personnalisé du site ?
Une dernière chose, j’ai lu que les sites peuvent être plus « écologiques » grâce aux principes du Green code.
Après discussion avec un ami développeur, il a suggéré de :
- Réduire la taille de mes images, qui sont particulièrement volumineuses,
- et veiller à ce que les interactions avec l’API de WordPress ne soient faites que lorsque cela est nécessaire.
Pouvez-vous intégrer ces deux points dans votre travail ?
Merci beaucoup et bonne journée,
Nathalie.
Spécifications fonctionnelles
- Interface de Saisie : Une interface utilisateur simple et intuitive pour l’ajout de photos.
- Catégorisation des Photos : La capacité de classer les photos selon plusieurs critères tels que la date, la catégorie, et le format pour une récupération aisée.
- Affichage Plein Écran : Une fonctionnalité permettant de visionner les photos en plein écran pour une meilleure appréciation visuelle.
Il est important de noter qu’un blog pourrait être envisagé ultérieurement.
Structure du Menu
Le menu sera composé du logo de l’entreprise à gauche et de trois liens à droite :
- Accueil : Redirection vers la page principale.
- À propos : Lien vers une page que je compléterai ultérieurement via l’éditeur WordPress. Cette page ne contiendra initialement que l’en-tête et le pied de page.
- Contact : Ouverture d’une modale de contact avec les champs suivants : nom, e-mail, référence photo (facultatif), et message.
Page d’Accueil
- Hero : Une bannière présentant une photo choisie aléatoirement parmi le catalogue.
- Catalogue Photos : Possibilité de filtrer les photos par catégories (Réception, Mariage, Concert, Télévision) et formats (paysage, portrait), ainsi que de les trier par date. Les filtres doivent s’actualiser dynamiquement sans rechargement de page grâce à l’API WordPress.
- Affichage et Interaction : Les photos s’afficheront en format carré avec des icônes de visualisation et plein écran au survol. Un bouton “Charger plus” permettra d’afficher davantage de photos sans rechargement de la page.
Lightbox
Affichage de la photo en format original sur un fond noir transparent à 80 %.
Page d’Informations d’une Photo
Divisée en trois sections pour présenter les détails de la photo, la photo elle-même en format natif, et un bloc pour les interactions, y compris un lien de contact direct et la navigation entre les photos.
Photos Apparentées
Affichage de photos similaires basé sur la catégorie, avec les mêmes interactions que sur la page d’accueil.
Footer
Inclusion de liens vers les mentions légales, la politique de vie privée (RGPD), et une mention “Tous droits réservés”.
Cette structure vise à offrir une expérience utilisateur fluide tout en facilitant la gestion et la navigation des contenus photographiques sur le site.
- Date: février 12, 2024
- Categories: Formation WordPressWordPress
- technologies: WORDPRESS
- PHP
- JAVASCRIPT
- CSS3
- maquette: LINK
- github: LINK
- hebergement: O2SWITCH
- url: motaphoto.jeremyteurterie.com