Les fondamentaux et l'anatomie du web

Site: Orange Campus Africa, la plateforme de formation en ligne d'Orange
Course: Intégration Web
Book: Les fondamentaux et l'anatomie du web
Printed by: Guest user
Date: Friday, 2 December 2022, 10:22 PM

Description

Prenez bien soin de maitriser les notions , concepts et méthodes abordés dans cette partie du cours.

1. Internet et le web

Internet est le réseau mondial composé d’ordinateur interconnecté.

Selon Wikipédia “le réseau informatique mondial internet est composé de 47 000 réseaux autonome (nationaux, internationaux et privés). Internet serait donc le réseau des réseaux sans centre névralgique.”

le but d’Internet est de relier tous les ordinateurs du monde

L’avénement de l’Internet à permis et favorisé plusieurs type d’application donc le plus connu est sans doute le Web.

Le web, communément appelé World Wide Web, signifie la toile d’araignée mondiale.

2. Historique et évolution du web : du web initial au web 2.0

Le Web a été créé à la fin de l’année 1989 par Tim Berners-LEE, alors informaticien du CERN. Le but était de créer une toile où chacun pourrait naviguer de contenu à contenu. Le principe est de pouvoir relier les postes informatiques des scientifiques, via les réseaux informatiques, en un système d’information puissant, mais surtout simple à faire fonctionner.

En 1990, pour faire fonctionner le système, Tim Berners-Lee met au point le protocole HTTP (Hyper Text Tranfer Protocol), ainsi que le langage HTML (HyperText Markup Language). Ce protocole est d’abord testé au CERN, sur l’ordinateur NeXT.

Celui-ci est toujours au Microcosm du CERN, avec une étiquette manuscrite indiquant en rouge : « this machine is a server : do not power down !! ».

Pour garantir un web ouvert et accessible à tous  Tim Berners-Lee fonde, en 1994, le W3C (World Wide Web Consortium) organisme à but non lucratif qui a pour mission aussi de promouvoir la compatibilité des technologies du World Wide Web.

Le terme "web 2.0" a été proposé dans le cadre d’une conférence tenue en août 2004 qui a rendu compte de la transformation tendancielle du web en "plate forme de données partagées via le développement d’applications qui viennent architecturer les réseaux sociaux issus de la contribution essentielle des usagers à la création des contenus et des formats de publication" (blogs, wikis…). La définition a été ensuite popularisée par Tim O’Reilly, président-fondateur de la maison d’édition américaine informatique O'Reilly, dans un article publié le 30 septembre 2005 qui en a posé les principes. Pour lui, la clef du succès dans cette nouvelle étape de l’évolution du web réside dans l’intelligence collective. « Le web 2.0 repose sur un ensemble de modèles de conception : des systèmes architecturaux plus intelligents qui permettent aux gens de les utiliser, des modèles d’affaires légers qui rendent possible la syndication et la coopération des données et des services. Le web 2.0 c’est le moment où les gens réalisent que ce n’est pas le logiciel qui fait le web, mais les services.”

3. Les navigateurs, les liens et les urls

Les navigateurs

Même si la plupart d’entre nous utilisons les mots Internet et toile – ou web - de façon interchangeable, ce sont des « endroits » distincts du cyberespace. Le terme Internet a été forgé au début des années 1970 lorsque diverses institutions académiques ont créé une manière de partager des ressources - essentiellement basées texte - électroniquement.

En 1993, des gens du National Center for Supercom- puting Applications (NCSA, pour Centre national pour les applications des super-ordinateurs) ont fourni une manière d’afficher ces documents via une interface graphique standard facile à comprendre et encore plus facile à utiliser. Appelée officiellement Mosaic, on prête à ce petit logiciel la popularisation de la toile et la mise en place des fondations pour les navigateurs web tels que nous les connaissons. En fait, tous les navigateurs modernes contiennent certaines caractéristiques – comme le fameux bouton de retour – de ce premier navigateur.

Les Liens et les URLs

Comme vous le savez, la toile est construite sur des liens entre différents bouts d’informations. En fait, le langage de base utilisé pour créer les sites web est appelé HTML, ce qui est l’abréviation de Hypertext Markup Language (soit Langage de balisage d’hypertexte). Alors que le mot hypertexte pourrait sonner un peu comme un mot venu de l’espace, il renvoie, en fait, au principe que le contenu est lié à quelque chose d’autre.

Lorsque nous lions vers des pages web, nous devons connaître l’adresse de la page étant liée. La terminologie offcielle pour cette adresse est uniform resource locator, ou URL (prononcé lettre par
lettre U-R-L, et signifant localisateur uniforme de ressource) tout court. Les URL débutent avec http:// et se terminent habituellement avec quelque chose tel que .com ou .org. Examinons l’adresse qui nous permet d'acceder à cette formation : http://formation1.uvs.sn/course/view.php?id=211.

Schèma

La première partie de l’URL est appelée le schéma (mentionnée, auparavant, en tant que protocole). Ceci dit au navigateur quelle interface devrait être utilisée pour accéder à l’adresse. Les schémas les plus communément utilisés pour visualiser des pages web sont HTTP et HTTPS.

HTTP signifie hypertext transfer protocol (soit protocole de transfert hypertexte). HTTPS est la même chose, sauf que le s placé à la fin indique qu’une connexion sécurisée est en place.

Domaine

Dans l’adresse de la plateforme de l'UVS, uvs.sn est la partie de l’adresse – appelée le domaine – qui aide à identifier quel ordinateur héberge les pages. Ici nous avons un domaine et un sous-domaine: formation1.uvs.sn: formation1 étant le sous domaine

Chemin

Le reste de l’adresse - /course/ – est le chemin de l’endroit exact où sont affichées les informations.

4. Les serveurs et les langages de publication du Web

Les serveurs

Maintenant que nous avons identifié la structure de base d’une adresse web, la question logique est : où se trouvent réellement les fichiers?

Croyez-le ou non, les pages sont stockées/peuvent être stockées sur un ordinateur ressemblant beaucoup à celui que vous utilisez pour visualiser ce site. La clé est que l’ordinateur doit également être connecté à l’Internet et désigné en tant que serveur web. Ceci signifie que l’ordinateur est configuré pour recevoir des requêtes pour des fichiers, puis pour répondre à ces requêtes en envoyant le fichier approprié.

Lorsque vous tapez une adresse web dans un navigateur puis cliquez sur Entrée, votre ordinateur envoie un message pour localiser l’information demandée. La partie domaine de l’adresse donne le premier indice au sujet de l’endroit où chercher. L’Internet Corporation for Assigned Names and Numbers (ICANN, soit Société pour l’attribution des noms de domaine et des numéros sur l’Internet) prend soin de gérer la base de données centrale des domaines, s’assurant que chaque adresse est unique et identifiable.

Le registre de l’ICANN donne l’adresse numérique du serveur associé à chaque domaine particulier, qui, à son tour, indique où peuvent être trouvés les fichiers pour ce domaine. Pour aider à clarifier la relation, supposez que le répertoire de votre téléphone mobile est la base de données centrale des enregistrements de noms de domaine. Si vous souhaitez appeler votre mère, vous pourriez taper « maman » dans le répertoire. Lorsque vous localisez le listing et cliquez sur Appeler, votre téléphone recoupe ‘maman’ avec le numéro de téléphone et achemine votre appel en fonction. Les adresses web fonctionnent pratiquement de la même manière pour situer le serveur web approprié stockant le contenu d’un site.

Lorsque vous configurez un nouveau site, vous devez décider quel serveur devrait héberger votre contenu.

4.1. Les langages de publication du Web

Comme nous l'avons précédemment appris, le premier navigateur graphique populaire était Mosaic, lancé au début des années 1990 par NCSA. Avant de pouvoir se faire, Tim Berners-Lee a dû passer de longues nuits sans sommeil à travailler sur une manière simple de publier le contenu sur un ordinateur unique, mais la question tournait autour de la découverte d'une manière de la faire efficacement et effectivement sur une échelle globale.

Il a décidé d’utiliser la structure d’un des modules de publication assistée par ordinateur populaire : SGML. En fait, il a retenu le concept de paire de balises (utilisé pour dire quand commencer quelque chose, puis quand arrêter de le faire), ainsi que les balises spécifiques pour les fonctions telles que les titres, les paragraphes, les têtières et les listes. Par exemple, dans le code suivant, la balise d’ouverture (<p>) donne l’ordre au navigateur de commencer un nouveau paragraphe alors que la balise de fermeture (</p>) lui indique où arrêter ce paragraphe.

<p> Ceci est un paragraphe de texte<p>

Ces simples balises de texte étaient excellentes, mais il manquait deux pièces essentielles : les liens et les images.

En raison de sa formation académique et de chercheur, Berners-Lee s’est interconnecté et a recherché le feed-back d’autant de programmeurs que possible de trouver, entre autre, des balises pour les liens et les images. Il a encouragé un genre de col- laboration qui conduira au style de l’open source qui constitue une majeure partie de l’Internet que nous apprécions de nos jours.

En fait, au cours de ces premières années, le HTML est passé par tellement d'itérations en si peu de temps que Tim et beaucoup d'autres ont reconnu le besoin de définir des normes universelles. En 1994, le World Wide Web Consortium (W3C) a été conçu pour combler ce manque. Avec des représentants dans les entreprises, les institutions et les organisations partout dans le monde, le W3C maintient les normes de publication web pour l'Internet global.

Les Normes W3C

Le W3C établit donc les normes de publication sur la toile et les entreprises offrant des navigateurs écrivent des logiciels pour interpréter ces normes et afficher le contenu en fonction.

De nombreuses normes ont été proposées depuis le début des années 1990, mais les deux principales normes de publication sont le HTML et le CSS.

Le HTML est utilisé pour créer l'infrastructure de chaque page web, puis le CSS – Cascading Style Sheets, soit Feuilles de style en cascade – est utilisé pour les « rendre jolies ». Pour être plus précis, le HTML définit la structure du contenu alors que le CSS le stylise.

4.2. HTML et CSS

HTML

La norme offcielle actuelle pour le HTML est HTML4, qui est devenu porte-drapeau en 1997.
Le très anticipé HTML5 a été lancé en tant que « brouillon de travail » en 2008 et, à ce jour, il est toujours listé « en cours de développement » par W3C. Néanmoins, les développeurs de navigateur ont travaillé depuis 2008 à concevoir les outils pour interpréter ce dernier jeu de normes qui est censé être plus convivial, plus efficace, plus facilement traduit sur différentes plateformes et capable de mieux afficher le multimédia.

Typiquement, il faut des années pour que soit écrit un nouveau jeu de normes, quelques années supplémentaires pour devenir officiel et que les navigateurs le supportent. Pendant ce temps, de nouvelles normes continuent à être écrites et de nouveaux navigateurs sont développés. C'est un cycle sans fin qui nous oblige, nous, intégrateur ou développeurs web, à toujours garder l'œil ouvert.

CSS

Au cours des premiers jours de la publication web, il n'existait que peu d'options pour styliser le texte et celles qui existaient étaient contenues à l'intérieur du HTML. Pour l'essentiel, les concepteurs ne pouvaient modifier que certaines couleurs et certaines polices. Au début, il était même impossible de changer la couleur de l'arrière-plan gris de la page. Mais, progressivement, à mesure que la toile a gagné en popularité, de plus en plus de gens ont exprimé leur intérêt envers un meilleur contrôle du style des pages web.

Il a fallu du temps, après que les spécifications HTML initiales aient été approuvées par le W3C, pour également mettre en place un groupe pour superviser le CSS. Le groupe a passé du temps à créer des directives pour les éditeurs web, clarifiant la relation entre HTML et CSS. De nouveau, le HTML se concentre sur la manière de structurer le contenu de la page alors que le CSS ajoute le style.
Si nous devions traduire ceci en construction de maison, vous pourriez dire que le HTML est utilisé pour construire les murs alors que le CSS applique la peinture et les décorations. Les deux sont des aspects importants et uniques de la publication web qui travaillent de concert pour créer les pages que nous concevons.

5. Les logiciels de conception

Maintenant que vous possédez une bonne vue d'ensemble des pages web, des navigateurs, de l'hébergement et de tous les composants tournés vers l'extérieur, il est temps de passer dans les coulisses et de faire le tour des outils logiciels qui construisent véritablement des sites web.

Le premier concept à clarifier est la différence entre « conception » de site web et « développement » de site web. La conception de site comprend tout, depuis l'expérience utilisateur jusqu'à la planification de la navigation en passant par la création de l'interface graphique. Le développement de site, en revanche, se concentre sur la programmation du code qui unit la page, connecte le site aux bases de données et vous permet de réaliser des choses telles qu'acheter des objets en ligne avec une carte bancaire. Ce dernier relève des compétences du développeur Web.

5.1. Rôle des logiciels de graphisme dans la conception

La phase de conception requiert deux types de logiciels extrêmement différents pour produire tous les composants nécessaires. Non seulement devez- vous résoudre la conception des informations, ce qui est évoqué plus loin, mais vous devez également produire les graphismes du site, soit pour votre propre projet, soit pour les partager avec les clients pour approbation avant de pouvoir commencer à produire le site.

Conception des informations

Un des documents produits à cette étape est le « plan du site », qui montre toutes les pages d'un site et comment elles sont interconnectées. Il existe bon nombre d'outils logiciels que vous pouvez utiliser pour construire un plan de site.

Structures filaires

Une fois que vous avez construit un plan de site, l'étape suivante consiste à déterminer les détails de chaque page. Vous pouvez le faire en créant des dessins schématiques appelés
« structures filaires », ou « fils de fer », pour chaque type de page unique ce qui vous conduira à la mise en place de la maquette web.

Maquette web

C'est dans la mise en place des maquettes web qu'entre en jeux les logiciels de graphisme tels que Adobe photoshop, Gimp etc. Apprendre à utiliser un de ces logiciels de graphisme à son potentiel maximum demandera un important investissement en temps, mais cela vaudra bien l'effort. En raison de son ubiquité, partager les maquettes détaillées entre différents concepteurs, développeurs et clients crée un flux de travail efficient.

Les maquettes détaillées de site ont l'air réel, mais elles ne servent réellement que
de source pour les graphismes et de guide de mise en page. La maquette détaillée est transmise à un intégrateur qui doit ouvrir le fichier et extraire ce dont il a besoin pour recréer la page en langages de code. Par conséquent, les intégrateurs ont besoin
de travailler confortablement à l'intérieur du logiciel et de parcourir le fichier source.

5.2. Ressources graphiques et police d’écriture

Lorsque vous créez des maquettes détaillées de conception de site, vous devrez incorporer des actifs de photographie, des boutons et des icônes, un faux texte (nous expliquerons pourquoi) et vous devrez utiliser des polices au-delà de celles qui sont installées par défaut sur votre ordinateur. Ci-dessous, vous trouverez une liste de ressources en ligne pour ces actifs créatifs :

Médias de stock

Les meilleures sources de stock peu coûteux de photographies, d'illustrations, de vidéo et d'audio sont iStockphoto et shutterstock. Leurs bases de données d'actifs créatifs grossissent chaque jour en raison des concepteurs amateurs et professionnels, des musiciens et des photographes qui téléchargent leur travail et reçoivent des droits d'auteur lorsque des concepteurs tels que vous choisissent et utilisent leurs biens.

Les polices en ligne

Une autre des ressources favorites en ligne est fonts.googlecom. Vous pouvez chercher les polices à l'aide d'adjectifs communs tels que « moderne » ou « dessiné à la main », ou vous pouvez trouver les polices par style tel que « sans serif ». Le moteur de recherche qui apparaît vous permet de raffiner encore plus vos critères de recherche, et même mieux, de taper votre propre texte pour voir à quoi ressembleront vos gros titres.

Texte grec

En développant des structures filaires et des maquettes détaillées de design, vous n'incluez
jamais un texte réel, ou une « copie » comme elle est appelée. Les auteurs assignés à un projet de site génèrent habituellement une copie sous la forme de documents Microsoft Word. La copie n'est placée dans le site web qu'après avoir été revue, corrigée et approuvée. La copie est généralement placée directement dans une base de données contournant l'ensemble des maquettes visuelles détaillées.

Essayer de raffiner et de modifier une copie dans des outils logiciels graphiques au cours du processus de conception n'est pas une pratique efficace. Non seulement les concepteurs ne sont habituellement pas les auteurs, mais vous ne voulez pas que le processus créatif visuel soit entravé par des essais de découverte de titres incisifs et de corps de copie informatif.

Donc, ce qu'utilisent les concepteurs est un faux- texte appelé (injustement, puisque c'est du latin !) « Texte grec » en anglais, ou encore « lorem ipsum », en tant qu'élément de substitution pour le corps de copie de leurs maquettes détaillées. Les concepteurs utiliseront une copie réelle pour les éléments de navigation et pour les principaux titres pour que les membres de l'équipe et les clients puissent mieux évaluer le design de la page, mais il doit être clairement affirmé que ce texte n'est pas final et qu'il n'est présent qu'à des fins de visualisation.

Une excellente ressource en ligne pour générer du faux-texte se trouve à http://www.lipsum.com/

5.3. Les logiciels de développement

Comme évoqué plus haut, chaque page web comporte deux côtés. Le côté de conception visuelle que voient les utilisateurs et le côté du codage qui unit l'ensemble et fait que tout fonctionne.

Ainsi dans le Web, il existe de nombreux outils pour faire ce codage. Ces outils peuvent être divisés en trois grandes familles:

  1. Les éditeurs de texte
  2. Les éditeurs graphiques
  3. Les outils d'aide au développement

Les éditeurs de texte

Pour un écrire une page web, nous n'avons en général besoin que d'un simple édieteur de texte comme le bloc note de Windows. Mais, dans le monde du Web et pour des projets beaucoup plus complexe il est préférable d'avoir un environnement de travail complet. Ainsi des éditeurs de texte complet on vu le jour et sont connus sous le nom d'Environnement de Développement Intégré (EDI). Parmi les plus célèbres des EDI nous avons Aptana Studio, Eclipse et Netbeans.

Les éditeurs graphiques

Les éditeurs graphiques, communément appelé WYSIWYG de l'anglais What You See Is What You Get traduit en Vous obtenez ce que vous voyez, permettent de réaliser des pages web sans beaucoup de codage. Parmi les plus célèbre de ces éditeurs nous avons Adobe Dreamweaver et CoffeeCup. 

les outils d'aide au développement

Ces outils se présentent sous forme de plugins ou modules supplémentaires intégrés aux navigateurs Web que nous utilisons (Firefox, Chrome ou Safari). Ces outils vous permettent de voir le comporte du code en temps réel dans le navigateur. Le plus apprécié de ces outils est Firebug de Mozilla Firefox.

Ce cours étant un cours d'introduction, nous aurons l'occasion d'expérimenté tous les points abordés ci-dessus.

 

6. Code ou Design?

Pour Commencer

Au début de tout nouveau projet de développement, il est commun de mettre un dossier en place sur votre système pour héberger tous les fichiers liés. À l'intérieur du dossier principal, vous pourriez créer un dossier appelé 'images' (pour tous les fichiers images). Si vous vous attendez à avoir de multiples fichiers d'aide non HTML, tels que des planches et des scripts, vous pourriez également envisager de créer un autre dossier appelé 'aide' pour héberger ces fichiers. 

Lorsque vous pensez à la manière de nommer vos pages web, voici quelques remarques relatives aux conventions d'appellation des fichiers et des dossiers:

  • Les fichiers HTML utilisent l'extension .html
  • Les noms de page sont sensibles à la casse : en d'autres termes, formation.uvs.sn est différent de Formation.Uvs.Sn.
  • Utilisez uniquement des lettres et des chiffres. La simplicité prévaut, évitez donc les caractères spéciaux tels que les traits d'union (qui peuvent facilement être confondus avec un tiret bas), les espaces ou autre ponctuation.

Le Code ou le design?

Avant de plonger dans le HTML, nous devrions tout d'abord attirer l'attention sur le syndrome de la 'poule ou de l'œuf' de l'apprentissage de la conception de site. À chaque fois que quelqu'un essaie d'apprendre la conception de site, l'enseignant doit décider s'il couvre tout d'abord le codage ou le design. Des arguments existent en faveur des deux méthodes.

Si vous enseignez tout d'abord le design, vous mettez l'emphase sur le design et le format du contenu, sans limiter les étudiants avec les contraintes du code. Mais, ce faisant, vous pourriez pousser les étudiants à créer des designs impossible à atteindre, simplement parce qu'ils ne comprennent pas encore le code.

Si vous enseignez le code en premier, vous insistez, au contraire, sur le plan et la structure des pages, permettant aux concepteurs de réaliser des décisions de design plus éduquées qui adoucissent le processus de codage. L'inconvénient de cette méthode est que les étudiants apprennent le code avant de réellement posséder des designs sur lesquels s'entraîner.

Nous avons choisi la seconde option, consistant à enseigner les méthodes de codage avant de couvrir les tenants et les aboutissants de la conception de site. Nous pensons qu'au long cours, cette méthode permet de faire de vous de meilleurs concepteurs, même si cela peut créer une légère confusion au cours du processus d'apprentissage.

7. Le métier d’intégrateur web

Le métier d'intégrateur web est métier très récent et il est amené à évoluer au même rythme que les standards et technologies du web. L’intégrateur web ou développeur front-end en anglais, joue un rôle important dans la chaîne de production d’un site internet.Il est incontournable dans les équipes de développement de sites web. Il reçoit des instructions (généralement une maquette sous forme d’image conçue par un infographiste ou Designer), et donne vie à cette maquette en rédigeant du code en langage HTML, CSS et JavaScript. Il se doit de respecter des normes d’accessibilité, de référencement et d’ergonomie ainsi que des standards pour construire un site de qualité.

Compétences:

  • définir les mécanismes permettant aux sites web de fonctionner
  • créer des pages web avec html 5, CSS 3
  • Analyser une maquette pour la transformé en page web
  • utiliser des scripts
  • intégrer des thèmes 
  • découper des maquettes
  • envoyer votre site en ligne
  • etc

Les métiers de l'intégrateur web:

  • Technicien intégrateur web
  • Administrateur de site web
  • créateur de site web
  • développeur web html
  • webmasters