📰 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'a 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 …
Lire de la partie 6 Ă  11

📝 À 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 …
Lire de la partie 17 Ă  22

📝 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 …

📝 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

📝 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.

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.

Un exemple de wireframe

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

Vous ferez vos wireframe avec cet outil :

Whimsical Wireframes
Design better apps and websites. Faster.

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 tendances (à 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ère 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.

📝 De façon "rudimentaire" commencez par simplement é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 quel est la bonne balise pour le contenu que vous voulez ajouter.

Vous pouvez ensuite commencez à intégré la partie CSS de votre site.

Commentaires

Connectez vous ou devenez un membre de Async pour rejoindre la conversation.
Entrez un mail ici pour recevoir un lien de connexion, super simple ⚡️