Cahier des charges projet HTML/CSS
- Introduction
1.1 Présentation du Projet
Le projet vise à créer un site web éducatif de 4 pages pour expliquer simplement le métier de développeur web à un public non technique. Le site sera développé exclusivement en HTML et CSS et comportera des explications et des exemples des technologies clés du développement web telles que PHP, JavaScript, HTML et CSS.
1.2 Objectifs du Projet
L'objectif principal est de rendre les concepts du développement web accessibles aux débutants. Chaque technologie (PHP, JavaScript, HTML, CSS) sera expliquée de manière simple et accompagnée d'exemples concrets pour illustrer son utilisation.
- Structure du Site
2.1 Page d'Accueil
Titre et Introduction : Présentation générale du site et de son objectif. Illustrations : Images représentant des développeurs et des éléments du développement web. Liens : Liens vers les sections principales du site, y compris les technologies individuelles.
2.2 HTML Expliqué
• Texte Explicatif : Explication simple de HTML avec des exemples de balises couramment utilisées. • Illustrations : Schémas illustrant la structure des éléments HTML. • Exemples : Exemples de pages HTML basiques.
2.3 CSS Expliqué
• Texte Explicatif : Explication simple de CSS avec des exemples de sélecteurs et de propriétés. • Illustrations : Diagrammes montrant comment le CSS stylise les éléments HTML. • Exemples : Exemples de styles CSS appliqués à des éléments HTML.
2.4 JavaScript
• Texte Explicatif : Explication simple de JavaScript et PHP avec des exemples de syntaxe et d'utilisation. • Illustrations : Diagrammes montrant l'intégration de JavaScript et PHP dans les pages HTML. • Exemples : Exemples de scripts JavaScript interactifs et de scripts PHP côté serveur.
2.5 Nous Contacter
• Formulaire de Contact : Une page dédiée avec un formulaire de contact simple permettant aux visiteurs de poser des questions ou de donner leur avis. • Champ de Message : Un espace où les visiteurs peuvent rédiger leurs commentaires ou leurs requêtes. • Bouton d'Envoi : Un bouton "Envoyer" permettant aux utilisateurs d'envoyer leurs messages. • Réponse Automatisée : Une réponse automatisée sera générée pour confirmer la réception du message et indiquer le délai de réponse prévu. • Coordonnées : En plus du formulaire, les coordonnées de l'entreprise, y compris l'adresse email et le numéro de téléphone, seront affichées pour permettre un contact direct.
- Design et Expérience Utilisateur
3.1 Design Visuel
• Palette de Couleurs : Utilisation de couleurs apaisantes et attrayantes pour faciliter la lecture. • Typographie : Utilisation de polices lisible et simple pour une lecture fluide.
3.2 Facilité d'Utilisation
• Navigation : Menu de navigation clair et intuitif pour accéder rapidement aux sections spécifiques. • Interactivité : Effets de survol et de clic pour les liens et les boutons.
- Contraintes Techniques
• Langages : Utilisation exclusive de HTML et CSS pour le développement du site. Les exemples et les explications des technologies PHP et JavaScript seront intégrés mais ne nécessiteront pas d'interactivité avancée. • Compatibilité : Le site doit être compatible avec les principaux navigateurs tels que Chrome, Firefox et Safari, ainsi qu'être responsive pour une expérience utilisateur optimale sur les appareils mobiles (Samsung et Xiaomi, pas d'iPhone).