Introduction au Web

Qu’est ce qu’un site web ?

Un site web est un document multimédia composé de texte, d’images et de vidéos assemblés au sein d’une mise en page réalisée par le concepteur du site.

Accéder au Web

Un site est consultable en ligne, c’est à dire sur le Web, le Web étant un service utilisant le réseau Internet

• depuis un navigateur (Firefox, Brave, Opera, Chrome)
• à n’importe quelle heure
• n’importe où dans le monde
• avec une rapidité d’affichage à peu près identique quelque soit l’endroit du globe

L’hébergement

Pour ce faire, un site doit être hébergé sur un serveur, un ordinateur très puisssant connecté à Internet 24h/24 et 7j/7

Différents supports

Le Web a d’abord été consulté sur des navigateurs installés sur des ordinateurs de bureau.

Depuis une dizaine d’années, le Web a investi la sphère mobile et on le consulte surtout sur ces trois supports :

• Desktop (ordinateur de bureau, prononcez « dèstop »)
• Tablettes
• Smartphones

Chacun de ces terminaux proposant un navigateur permettant d’y accéder.

Un site est un média interactif, c’est à dire qu’il présente à l’utilisateur un contenu qui n’est pas figé.

L’interconnexion du web : les liens internes

Les pages d’un site web sont reliées entre elles par des liens hypertexte, on parle de liens internes

Les liens externes

La toile du Web provient, elle, de l’interconnexion entre différents sites. On parle de liens externes.
Le clic est donc l’interaction fondamentale du Web

Les autres interactions

• Le survol de souris
• Le scroll
• La frappe de touche du clavier
• Le swipe avec un, deux ou trois doigts sur les appareils mobiles

Il existe deux autres aspects fondamentaux en conception web…

La fluidité

Contrairement à une affiche ou à n’importe quel support print, le contenu d’un site est amené à varier, à évoluer…

• Le contenu des pages ne fera jamais la même hauteur
• Des éléments peuvent s’agrandir ou se rétrecir (menus, accordéons, slider…)

L’adaptativité

Egalement appelé Responsive Design, l’adaptativité d’un site lui permet de s’adapter à ses différents supports : desktop, tablette, mobile

• La largeur du contenu va être modifiée
• Les tailles de typo vont d’adapter pour améliorer la lisibilité sur petit écran
• Certains éléments vont disparaitre ou se tranformer (par exemple, la navigation)

Interactivité, fluidité et adaptativité… Ces trois caractéristiques du web vont imposer un système de conception bien particulier très différent de l’approche print :

La mise en page programmée en HTML et CSS

HTML et CSS sont deux langages de programmation qui sont utilisés en combinaison pour matérialiser la mise en page d’un site internet sur la fenêtre d’un navigateur

1. le navigateur lit le HTML
2. le navigateur lit le CSS
3. le navigateur interprète la combinaison des deux codes
4. le navigateur affiche un rendu graphique intéractif à l’écran

Concrètement…

On crée un site en codant, c’est à dire en tapant du code dans un éditeur de code (un petit logiciel gratuit). Dans la pratique, on fait beaucoup de copié/collé.

Source : greentalk.fr

Pour voir le code source

Le code source d’un site est toujours accessible, vous pouvez visualiser le HTML, le CSS et le JavaScript : Appuyez sur Ctrl+U (Windows) ou ⌘-Option-U (Mac).
Dans le cadre de votre formation, cela vous permet d’étudier comment sont créés les sites pour améliorer vos compétences en développement web et full stack.

Le HTML est un métalangage qui permet de structurer et d’assurer la sémantique d’un document web. Il s’agit de la première couche des technologies standards du web, les deux autres étant JavaScript et CSS.

• HTML est un langage de balisage utilisé pour structurer et donner sens au contenu web, par exemple définir des paragraphes, entêtes et table de données ou encore intégrer des images ou des vidéos dans la page
• CSS est un langage de règles de style utilisé pour appliquer un style au contenu HTML, par exemple en modifiant la couleur d’arrière-plan ou les polices, ou en disposant le contenu en plusieurs colonnes
• JavaScript est un langage de programmation qui permet de modifier dynamiquement le contenu d’une page web

En agence

Dans une agence web, la création d’un site met en oeuvre différents métiers :

Le chef de projet

Il réalise le cahier des charges en collaboration avec le commanditaire (le client)

Le webdesigner

Il conçoit la mise en page avec des outils tels que Figma, XD ou Photoshop

Parfois c’est un directeur artistique qui commence la création et donne au projet une orientation graphique, puis un webdesigner prend le relais et réalise la déclinaison de toutes les pages du site

Le développeur front-end

Il va transformer les maquettes figées (ni interactives, ni fluides, ni responsives) réalisées par le webdesigner en de véritables pages web fonctionnelles. Cette opération est aussi appelée Intégration.

L’exploit

Il a en charge la mise en ligne du site et la gestion de l’hébergement sur un serveur adapté au trafic.