📰 Débuter la création d'un site internet

TP1 — Faire un portfolio / CV

Pour commencer ce cours, vous allez réaliser un CV ou un portfolio depuis sa conception jusqu'à sa publication sur internet.

Vous allez devoir avant le 13 janvier me rendre sur Teams un lien pointant vers votre CV en ligne ainsi que les wireframes qui on servit à sa conception et un document contenant les réponses aux questions de ce TP.

Ce CV devra contenir au minimum :

• Des titres
• Des paragraphes
• Une photo
• Une liste à puce

Qu'est-ce qu'un site web ?

Un site web est un ensemble de pages web accessibles au public, reliées entre elles par des liens et partageant un même nom de domaine. Les sites web peuvent être créés et mis à jour par un individu, un groupe, une entreprise ou une organisation pour servir divers objectifs.

Ensemble, tous les sites Web accessibles au public constituent le World Wide Web.

Qu'est-ce qu'un nom de domaine ?

Le dictionnaire définit le nom de domaine comme suit :

Une série de chaînes alphanumériques séparées par des points, comme www.async-agency.com, servant d'adresse pour une connexion à un réseau informatique et identifiant le propriétaire de l'adresse.

À l'origine, les sites web étaient classés en fonction de leur domaine de premier niveau. Les trois dernières lettres d'un nom de domaine indiquaient le type d'entreprise du site. En voici quelques exemples :

• Sites web des agences gouvernementales = .gov
• Sites Web des établissements d'enseignement = .edu
• Sites web d'organisations à but non lucratif = .org
• Sites Web commerciaux = .com
• Sites d'information = .info

Les sites web sont hébergés sur des serveurs et nécessitent un navigateur web tel que Chrome, Firefox ou Safari pour être visités.

On peut accéder à un site web directement en saisissant son adresse URL ou en le recherchant sur un moteur de recherche tel que Google ou DuckDuckGo.

Architecture Client / Serveur ?

Ce qu'on appelle « clients » se sont généralement des PC sur lesquels sont installées des applications logicielles qui demandent et reçoivent des informations sur des réseaux, comme des navigateurs internet par exemple. Les smartphones à travers leurs navigateurs web font office de clients.

Les serveurs quant à eux, stockent des fichiers et des bases de données, y compris des applications complexes ou des sites web. Les serveurs sont généralement équipés de processeurs plus puissants, de plus de mémoire ainsi que de disques durs plus grands que les clients.

Le modèle client-serveur s’organise comme tel : Les clients du réseau envoient des messages à un serveur pour lui adresser des demandes. Les serveurs répondent aux clients en traitant chaque demande et en renvoyant les résultats. Un serveur prend en charge de nombreux clients et plusieurs serveurs peuvent être mis en réseau pour gérer les charges de traitement accrues lorsque le nombre de clients augmente.

Même si techniquement un serveur est "simplement le PC de quelqu'un d'autre", un ordinateur client et un ordinateur serveur sont deux unités matérielles distinctes, chacune étant adaptée à un objectif précis. Par exemple, un client Web fonctionne mieux avec un grand écran, tandis qu'un serveur Web n'a pas besoin d'écran et peut être situé n'importe où dans le monde.

Qu'est-ce qu'un fichier ?

Un fichier est un conteneur qui sert à stocker des informations. Les fichiers utilisés dans les ordinateurs ont des caractéristiques similaires à celles des documents papier utilisés dans les bibliothèques et les bureaux. Il existe des types de fichiers différents, tels que les fichiers texte, les fichiers de données, les fichiers de répertoire (des zips), les fichiers binaires (des exécutables) et les fichiers graphiques (des photos), et ces différents types de fichiers stockent différents types d'informations. Dans un système d'exploitation informatique, les fichiers peuvent être stockés sur des lecteurs optiques, des disques durs ou d'autres types de dispositifs de stockage.

Qu'est-ce qu'un langage de programmation ?

Un langage de programmation est un vocabulaire et un ensemble de règles grammaticales permettant d'ordonner à un ordinateur ou à un dispositif informatique d'effectuer des tâches spécifiques. Le terme "langage de programmation" fait généralement référence aux langages de haut niveau, tels que JavaScript, PHP, C#, Java, Swift, etc.

Chaque langage de programmation possède un ensemble unique de mots-clés et une syntaxe spéciale pour organiser les instructions du programme.

Les langages de programmation de haut niveau, bien que simples par rapport aux langages humains, sont plus complexes que les langages que l'ordinateur comprend réellement, appelés langages machine. Chaque type d'unité centrale possède son propre langage machine. Et retenez simplement que plus le langage est haut niveau plus il est difficile pour la machine de le comprendre.

📝 Quel est le langage utilisé pour structurer les informations sur un site web ? De quel type de langage est-ce ? De quand date-t-il est pourquoi à t il a été inventé ? Qui s'occupe de le maintenir ?

Eléments, balises et attributs HTML - Pierre Giraud

Le HTML est un langage de balisage, c’est-à-dire un langage qui va servir à définir chaque contenu dans une page. Mais comment fait-on en pratique pour indiquer que tel contenu est un titre, tel autre est un lien, etc. ? C’est ce que nous allons voir dans cette leçon. Les éléments HTML Le langage …

Pierre Giraud

📝 À quoi sert le fichier « index.html » ? Ou doit-être stocké ce fichier si on veut le rendre disponible au public ?

📝 Quel est le langage utilisé pour mettre en forme et donner « du style » au page web ? De quand date-t-il est pourquoi à t il a été inventé ? Qui s'occupe de le maintenir ?

Sélecteurs et propriétés CSS - Pierre Giraud

Le CSS est un langage qui a été inventé pour styliser les contenus de nos pages en leur appliquant des styles. Dans cette nouvelle partie, nous allons passer en revue les notions de base du CSS en comprenant notamment les grands principes de fonctionnement de ce langage et en apprenant à cibler des …

Pierre Giraud

📝 Qu-est-ce qu'une balise HTML ? De combien de type en existe-t-il ? À quoi servent-elles ? Quels sont leurs principales différences ?

Les niveaux ou “types” d’éléments HTML block et inline - Pierre Giraud

Nous avons pour le moment défini et étudié les grands mécanismes de fonctionnement du CSS tout en présentant certaines propriétés CSS impactant l’aspect visuel des éléments. Pour aller plus loin dans notre étude du CSS, nous allons devoir maintenant comprendre comment est définie la place prise par …

Pierre Giraud

📝 Qu'appelle-t-on un conteneur générique en HTML ?

Les éléments HTML div et span (conteneurs génériques) - Pierre Giraud

Les éléments HTML div et span sont des éléments génériques (sans aucun sens sémantique) qui sont utilisés pour grouper et mettre en forme le contenu en CSS

Pierre Giraudjerome

📝 Quel est intérêt du HTML5 sémantique ?

Les secrets des balises structurelles du HTML5 sémantique

Un guide utile sur l’utilisation des balises sémantiques HTML5 : exemples pratiques et conseils faciles à mettre en œuvre.

SemrushJason Barnard

Mais, avant de commencer à coder

Vous allez devoir faire un wireframe de votre page. Pour rappel un wireframe est une mise en page de base ou un squelette d'une page pour donner une idée de la structure de la page et des ressources nécessaires pour la construire.

📝 Quel est intérêt de faire un wireframe ?

Vous ferez vos wireframe avec cet outil :

Whimsical Wireframes

Design better apps and websites. Faster.

Whimsical Logo

Prenez-le temps de parcourir des exemples de site / CV / portoflio qui vous aimez et concevez votre wireframe. Vous pouvez vous inspirer des créations postées sur https://dribbble.com/ ou sur https://www.pinterest.fr/ par exemple.

📝 Rédigez une justification de votre maquette wireframe (pourquoi tel emplacement, telle structure, etc).
📝 Prenez le temps de faire des petites planches tendance (à faire sur Google Slide par exemple) des sites et des couleurs qui vous inspire ou que vous voulez intégrer dans votre site.

Création de la 1ʳᵉ page

Pour cette partie n'utilisez pas de CSS, faites simplement le balisage et le contenu en HTML de votre site.

📝 Réunissez tout ce que vous avez fait précédemment au sein d'un même document. Ce document que l'on pourrait considérer comme un cahier des charges va vous servir de fil conducteur tout au long de la création du site.

Créez-vous un compte sur le site suivant :

Glitch: The friendly community where everyone builds the web

Simple, powerful, free tools to create and use millions of apps.

📝 Puis de façon "rudimentaire" commencez par uniquement écrire dans un fichier index.html le texte et les balises associées à votre site internet. Faite en sorte de faire attention à la sémantique des balises et cherchez systématique quelle est la bonne balise pour le contenu que vous voulez ajouter. Vous pouvez ensuite commencer d'intégrer la partie CSS de votre site.

Rendu 1 : le 13/01/22

Ce premier rendu devra comporter les documents suivants :

• Réponses aux questions
• Justification de votre maquette wireframe
• Planches tendance

Un premier état d'avancement de votre site qui devra contenir au moins :

• Un entête (titre, accorche, ...)
• 3 paragraphes
• Des images
• Une liste
• Un pied de page

Les éléments devront être positionnés en utilisant du CSS avec l'aide de Flexbox

Rendu final le 17/03/22

Ce dernier rendu sera obligé de comprendre l'intégralité des rendus précédents ainsi que :

Le code HTML

1. Un seul CSS pour toutes les pages ;
2. Le respect des bases <html><head></head><body></body></html> ;
3. Le moins d’id possible et surtout jamais en double sur une page ;
4. Des class !
5. Pas d’image de plus de 700 ko ;
6. Pas de <br> pour faire de la mise en page ;
7. Le code est propre et bien indenté (beautify !) ;
8. Pas de code inutile, de balises qui n’existent plus (code valide w3c) ;
9. Les fichiers n’ont pas des noms exotiques ;
10. Les images sont stockées dans un même dossier : assets

Orthographe & typographie

1. Pas de fautes d’orthographe (accueil, galerie…) ;
2. Un bon usage des capitales ÀÉÈŒÇ !

Forme et identité visuelle

1. La mise en page n’est pas bizarre à cause d’un mauvais usage de Flex ou autres
2. Le texte ne semble pas trop petit, les lignes ne paraissent pas trop longues ;
3. Les espaces sont harmonieux ;
4. L’interlignage n’est pas par défaut ;
5. Le favicon fonctionne http://www.favicon.io/ ;
6. Les images ne sont pas déformées ;
7. L’univers graphique semble cohérent ;
8. L’aspect visuel est soigné.

Grille d'évaluation

W3C Validator :

The W3C Markup Validation Service

W3C’s easy-to-use markup validation service, based on SGML and XML parsers.