Mon Rapport i293

Titre

Mon Site Web

Sujet

Implémentation d'un site web statique en HTML5/CSS3 avec le sujet de votre choix.

Matériel et logiciels à disposition

• Un PC ETML
• Accès à Internet
• Visual Studio Code
• Navigateur Internet (Chrome, Firefox, Edge)
• Outils de conception de maquette (wireframe) — Figma ou Canva

Prérequis

Aucun

Cahier des charges

Gestion de projet

Journal de travail (pas demandé)

Objectif du projet

Ce projet vise à consolider les connaissances de mise en œuvre des langages HTML et CSS, ainsi que l'analyse et la conception d'un site web.
Au final, le site web réalisé devra être exploitable et livrable. Dès lors, on attend un rendu professionnel et un soin particulier dans la documentation du projet.

Maquette / Design

• Maquette / wireframe avec Figma ou Canva
• L'interface du site devra être sobre et professionnelle.
• Le site doit être disponible pour un ordinateur de bureau et un smartphone (responsive design).
• Le site doit prendre en compte des notions de qualité web (min. 10 règles OpQuast).
• Lien des règles

Fonctionnalités

Le site web aura au minimum 4 pages :

• Page d'accueil : bannière, section texte/paragraphes, section avec min. 3 images
• Page contenu libre : vidéos, enregistrements sonores, photos
• Page de contact : formulaire de contact
• Page auteur : photo + textes, accessible uniquement depuis le pied de page

Caractéristiques communes à toutes les pages :

• En-tête avec menu de navigation (pages 1, 2, 3) et logo cliquable pour retourner à l'accueil
• Pied de page avec liens vers les pages 3 et 4, et un copyright
• Titre sous la forme : Titre de la page – Nom du site

Travail à réaliser

• Maquette de chaque page validée par l'enseignant avant le développement
• Site réalisé en HTML et CSS selon les maquettes
• Déploiement sur l'infrastructure ETML

Livrables

• Document PDF : introduction, URL du site, maquettes, liste des 10 règles OpQuast, conclusion
• URL du site opérationnel sur l'hébergement ETML
• Code source complet du site web

Introduction sur le sujet

J'ai choisi ce thème car c'est une des boissons que je bois le plus. C'est une marque connue internationalement et ils font des exploits toujours plus fous. En plus, ça me permet de mieux comprendre l'HTML et le CSS et de vous faire explorer Red Bull.

Mon site présente plusieurs points sur Red Bull :

• Un accueil qui présente le slogan
• Un accueil qui renvoie vers une de leurs pubs
• Un accueil qui montre la première et la dernière Red Bull
• Une page boisson qui présente la majorité des boissons sorties
• Une page histoire qui montre et explique les grandes phases de Red Bull
• Une page histoire qui montre chronologiquement les moments clés
• Une page histoire qui montre des chiffres importants sur Red Bull
• Une page records du monde qui montre les grands exploits
• Une page records du monde qui explique les grands exploits
• Une page contact qui permet de réellement me contacter
• Une page auteur qui explique qui je suis
• Une page auteur qui montre les réseaux sociaux
• Une page auteur qui montre certains projets

Site Web

https://cin1d-agashae.w3.pm2etml.ch/accueil.html

10 règles OpQuast

227 – Structure hiérarchique des titres Oui, avec par exemple des balises h1 et h3 utilisées correctement.

177 – Contraste suffisant des contenus Oui, les contenus sont bien contrastés par rapport à leur arrière-plan.

97 – Titre identifiant le site Oui, le titre de chaque page permet d'identifier le site (ex. Titre de la page – Nom du site).

67 – Étiquettes de formulaire Oui, chaque champ du formulaire est associé à une étiquette <label> dans le code source.

150 – Retour à l'accueil depuis toutes les pages Oui, toutes les pages ont un logo cliquable en haut à gauche qui redirige vers l'accueil.

181 – Taille suffisante des éléments cliquables Oui, les éléments cliquables sont suffisamment grands. Même sur iPhone SE

93 – Types de champs appropriés Oui, les champs de type mail, URL, téléphone, etc. utilisent le type HTML approprié.

119 – Vidéos déclenchées par l'utilisateur Oui, l'utilisateur doit cliquer sur le bouton pour lancer la vidéo dans un nouvel onglet.

226 – Encodage UTF-8 Oui, chaque page contient la balise <meta charset="UTF-8">.

Figma

Voir les maquettes sur Figma

Autoévaluation