📰 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 

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

CritĂšres BarĂšme
Respect du wireframe original / 4
Le portfolio est terminé / 4
Qualité du code HTML (lisibilité du code, balises utilisés) / 4
Qualité du code CSS / 4
Qualité de l'apparence visuelle, ergonomie / 4
(Bonus) Votre code est valide W3C / 2
(Bonus) Responsive / 3

W3C Validator :

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

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 âšĄïž