John Doe est un examen de PAO + intégration de maquette web que j’ai eu à faire lors de ma formation d’Infographiste multimédia.
L’intégration de la maquette est visible au clic sur l’image.
Le sujet :
John Doe est un photographe indépendant qui souhaite un site Web lui permettant de montrer ses réalisations. Photo Reporter à l’international, il voudrait aussi pouvoir publier des articles de blogs traitant des différents pays qu’il a visités, illustrés par ses photographies. Souhaitant un site simple et épuré mettant en valeur ses photographies, un travail préalable de maquettage a été réalisé. Vous devrez réaliser l’intégration de la page d’accueil de cette maquette en traitant les 3 parties listées ci-dessous.
– PARTIE 1- PAO :
a- Recadrez et optimisez pour le Web, 4 images au choix du dossier «photos» qui défileront dans le slide (960×400).
Recadrez et optimisez pour le Web, 3 autres images du dossier «photos» qui s’inséreront en dessous (300×160).
Les photos devant être mises en valeur, le recadrage doit être le plus élégant possible.
b- Réalisez le logo du site : John Doe Photographie
Ce logo sera optimisé pour le web et intégré ultérieurement à la maquette. Vous devez assurer une cohérence graphique avec le reste du site mais n’êtes pas attaché à la couleur dominante rouge de la maquette.
– PARTIE 2- Intégration HTML5/CSS3 :
Intégrez la maquette de la page d’accueil fournie.
La page sera réalisée en HTML5/CSS3 et optimisée pour le référencement naturel.
Cette page doit s’afficher correctement sur les navigateurs modernes.
Les liens ne seront pas actifs mais l’effet survol sera visible. Les images préparées précédemment seront intégrées.
Le rendu final doit être identique au modèle cependant vous pouvez changer la couleur dominante rouge (fond menu, liens…) pour harmoniser le site avec votre logo.
– PARTIE 3- jQuery :
Faites fonctionner le slide d’entête grâce à un développement libre jQuery de votre choix trouvé sur internet.
Le passage d’une image à l’autre se fera avec un effet de défilement automatique au bout de 3 secondes et au clic sur un point de navigation.