Création de Sites Web

Ce wiki a été archivé en 2018.

Le nouveau wiki se trouve à: ressources.labomedia.org

Les fonctionnalités sont désactivées: vous pouvez faire une recherche sur Google site:https://wiki.labomedia.org et découvrir La Labomedia.

De Centre de Ressources Numériques - Labomedia
Aller à : navigation, rechercher

Intro

Internet, réseau des réseaux

Internet est un immense réseau regroupant divers protocoles de communication dont le plus célèbre est le World Wide Web (www) accessible via le protocole HTTP (Hyper Text Transfer Protocol). Il en existe bien d'autres comme le FTP (File Transfer Protocol), les réseaux de messagerie instantanés, l'email, les newsgroups...

C'est l'ensemble des machines connectées les unes aux autres qui forment ces réseaux et tout ces réseaux forment l'Internet.

Pour ce qui est des sites Web, ils sont majoritairement accessibles via le protocole HTTP avec une adresse du type http://www.monsite.com, et cette adresse correspond en fait à un ordinateur spécifique et unique. Chaque ordinateur connecté à Internet possède un numéro unique, appelé Adresse IP qui s'exprime sous la forme d'un groupe de 4 nombres séparés par des points, par exemple 212.23.54.123.

Dans le réseau des réseaux il existe 13 'serveurs racines' qui sont chargés de regrouper toutes les correspondances entre l'URL (http://...) et l'adresse IP de l'ordinateur correspondant (82.123.28.4). Donc lorsque l'on tappe une URL dans son navigateur, notre requête demandant à voir la page (le site) correspondant passera par ces serveurs qui redirigeront la demande à l'ordinateur concerné.

Par exemple, si vous tappez http://www.labomedia.net, votre requête demandera à l'ordinateur possédant l'adresse IP 88.191.25.242 d'accéder au site de Labomedia qu'il héberge. Si vous voulez connaitre le propriétaire, l'adresse IP et des infos supplémentaires sur un site web, un service existe : WHOIS (tappez 'labomedia.net' dans la case et regardez les infos).


Principe de Client-serveur

Lorsque l'on tappe une adresse de type http://www.labomedia.net, on demande en fait à un ordinateur spécifique (serveur) d'accéder à son contenu, et plus précisément à un site qu'il héberge. On est donc un client qui fait une requête à un serveur. Ce principe peut s'appliquer à tous les échanges d'informations sur Internet.

Qu'est ce qu'un site Web

Définition

  • Définition de Site Web sur Wikipedia.
  • voir aussi la page Surf Multimédiatique exposant quelques exemples de sites touchant à la plupart des technologies disponibles.

De quoi c'est fait un site ?

Un site est un ensemble de fichiers contenant une grosse partie de l'information disponible. Ces fichiers peuvent êtres de différents types, on y trouve des fichiers texte contenant du code : .html, .php, .css, .js .asp... ; des fichiers images : .jpg, .gif, .png... ; des fichiers vidéos : .avi, .ram, .mov, .flv...

Hyperliens et Arborescence

Un hyperlien, ou lien hypertexte, représente le fait que l'on puisse cliquer sur un mot, phrase, image... pour aller vers une autre page. C'est le fondement même du www, permettant de relier des contenus entre eux, simplement en 'pointant' dessus. L'organisation de l'information est donc entièrement dépendante des liens qui peuvent exister entre les pages d'un site.

On peut distinguer 2 types d'arborescence :

  • Arborescence de l'organisation de l'information sur le site, c'est à dire la hiérarchisation des contenus, classés dans telle ou telle catégorie/menu permettant de trouver ce qu'on cherche le plus efficacement possible.
  • Arborescence des fichiers : c'est l'organisation des fichiers du site (que l'internaute ne voit pas) qui permet de ranger les informations de manière à simplifier le développement et la maintenance du site.

De quoi est constituée une page de site

Une page de site est un fichier texte (donc éditable par n'importe quel éditeur de texte - et non pas traitement de texte (word)) contenant du code XHTML (plus généralement, XML) hiérarchisant les informations dans la page elle-même.

Le code source d'une page peut être vu en allant dans le menu 'Affichage' de votre navigateur préféré puis 'Code Source de la page'.

Cette hiérarchisation des données est alors mise en forme à l'aide d'un fichier CSS, décrivant la façon de présenter ces informations.

De plus, l'interaction avec l'utilisateur est réalisée grâce à des fichiers Javascript : le developpement de ces pratiques est regroupé sous le nom 'AJAX' de façon abusive : définition d'AJAX.

Une page ne contient pas d'images ou de videos ou quoi que ce soit d'autres que du texte (du code en fait), mais elle fait référence à ces contenus pour que le navigateur les affichent à l'écran.

Site Statique ou Site Dynamique

On distingue sur le Web 2 types de sites : les sites dynamiques et les sites statiques.

Le terme 'Site Web Dynamique' correspond au fait que ces sites sont capables d'interactions avec l'internaute, directement à travers le navigateur. Au contraire les 'Sites Web Statiques', désignant les sites dont le contenu (les pages) ne peut être modifié qu'en dehors d'un navigateur, à l'aide de logiciels spécifiques. Les sites dits 'statiques' proposent un contenu figé (ou très peu modifié) qui n'est pas supposé évoluer au cours du temps, alors que les sites dits 'dynamiques' proposent des outils facilitant la publication de contenus (forums, galeries photos, wikis, blogs, CMS, webmail...). Voir aussi la définition de Site Web Dynamique sur Wikipedia.

Ergonomie d'un site web

Les Outils de création

Créer pour ses besoins

Créer un site Web regroupe plusieurs niveaux de lecture, suivant les besoins et les compétences de celui qui veut en créer un. Plusieurs technologies/langages sont nécessaires à l'élaboration d'un site : un graphiste voulant diffuser son travail voudra faire un site qui lui ressemble graphiquement, il n'aura pas forcément l'envie ni le temps d'absorber les connaissances de bases requises pour la construction de ses pages, mais voudra plutôt trouver le moyen d'assouvir son âme créatrice en se libérant des contraintes techniques.

Différentes Solutions

L'Internet propose aujourd'hui des ressources permettant de répondre à tous les besoins de sites existant, et de nouvelles solutions apparaissent encore et toujours. On peut distinguer 3 méthodes pour créer un site dynamique :

  • Les portails d'inscription : sites portails sur lesquels il suffit de s'inscrire (majoritairement gratuits) pour ouvrir en quelques minutes un site prêt à l'emploi personnel, souvent de type Blog. L'édition du site est alors extrêmement simplifiée mais par la même très rigide, et il est très rare de pouvoir changer l'interface ou les fonctionnalités de ces sites.
  • Les Moteurs de Sites à télécharger : Télécharger un fichier compressé contenant un moteur de site complet pour un usage définit. Par exemple, on peut télécharger le fichier contenant tout le système de forums punBB puis le décompresser, l'envoyer sur un serveur et le configurer en quelques minutes. On peut trouver tout type de site prêt à l'emploi (libres d'utilisation et modification) : galerie photo, Blog, Wikis, Forums, Gestionnaires de Contenus.... Il faut bien sûr posséder un espace d'hébergement en ligne pour pouvoir les consulter avec une adresse Internet (URL);
  • Création à partir de zéro (ou presque) : 2 façon de faire. La première est de partir d'un moteur de site libre et de le modifier de l'intérieur, c'est à dire mettre les mains dans le code, tâche plutôt ardue pour un novice. L'avantage de se baser sur un moteur développé par une communauté d'internautes "qualifiés" permet de s'assurer de la qualité des fonctions présentes dans le site web et de la perénité du site en terme de maintenance et d'évolution. La seconde solution est de partir de rien ou presque en développant soi-même un moteur de site pour une utilisation spécifique.

Pour un site statique, la création des pages du site se fait entièrement à la main à l'aide d'un logiciel dit de 'développement Web', car le développement de sites Web n'est qu'une petite partie des développement possibles sur le Web.

Quels Outils pour créer un site ?

D'abord, il faut un ordinateur avec au moins un clavier.

Créer des pages Web

Le développement en lui même (écriture du code des pages) pourrait être entièrement réalisé dans un simple document texte (pas word, qui est un traitement de texte), car les pages web ne sont constituées que de texte (hormis les images, vidéos, sons...). Mais pour des raisons évidentes de confort, des logiciels spécialisés se chargent de simplifier la création de site.

Les plus connus sont :

  • Dreamweaver (payant - cher !!!) (Window$)
  • Aptana (gratuit - libre) (Linux - Window$) (basé sur Java).
  • Komposer (gratuit - libre) (Linux - Window$)
  • Quanta Plus (gratuit - libre) (Linux)
  • BlueFish (gratuit - libre) (Linux)

Utiliser de l'image

Un site sans images est plutôt triste, quelques illustrations des propos tenus sont toujours appréciées, ça allège la lecture. Par contre, les images servant uniquement au design du site n'ont aucun sens sémantique et alourdissent considérablement les pages Web pour les petites connections. Mais un site au design réussit est tellement plus agréable à lire :)

Les formats d'images utilisés sur le Web sont principalement : JPG, GIF et PNG. Seul le format PNG est libre, les autres sont dits 'propriétaires'.

Logiciels création d'images :

  • Inkscape équivalent d'Adobe Illustrator (gratuit - libre) (Linux - Window$)
  • The Gimp équivalent d'Adobe Photoshop (gratuit - libre) (Linux - Window$)
  • Xara Xtreme en passe de suplanter photoshop et Illustrator à la fois. Est en ce moment (novembre 2006) convertit vers un projet open-source.

Logiciels de retouches (simple) :

  • XnView
  • Phixr : Edition et retouches simples d'images directement sur un site Web, pas besoin de logiciel.

Afficher les pages créées

Dans le cadre d'un site Web statique, l'affichage des pages créées se fait directement avec votre navigateur préféré. Mais pour un site dynamique, il faut quelques logiciels supplémentaires pour voir le résultat de son travail.

Voici comment se déroule l'affichage d'une page demandée de manière simplifiée :

  • en tappant l'adresse d'un site ou en cliquant sur un lien, le navigateur envoie une demande de visionner la page au serveur hébergeant le site
  • le serveur reçoit la demande et la traite avec un logiciel qui 'écoute' les demandes extérieures. Par exemple Apache, serveur web libre et gratuit.
  • Apache s'interesse au langage utilisé par la page demandée, admettons qu'elle soit écrite en PHP.
  • Apache demande alors à un autre logiciel (le serveur PHP) de traiter la page pour qu'elle soit renvoyée à l'internaute.
  • Si le site a été conçu autour d'une base de données, disons MySQL, le PHP va interroger le logiciel 'sql' pour récupérer les données à afficher.
  • Une fois la page 'prête', elle est renvoyé à l'internaute.

Il existe beaucoup d'autres cas de figures, mais ce trio Apache+PHP+MySQL est le plus répandu.

Pour disposer de ces 3 programmes, il existe différentes solutions. Sous un système Linux et consors, il est vivement conseillé de les installer et configurer à la main (même si ça reste simple). Avec Windows, il existe des logiciels regroupant tous ces programmes en un et qui s'installent très simplement.

Exemple de logiciels pour Windows regroupant Apache, PHP et MySQL :

Exemple de Navigateurs (ou selon le ministère de l'éducation 'butineurs') :

Les Langages utilisés

Les divers langages de programmation utilisés servent à définir :

  • la structure d'une page (XHTML)
  • la mise en forme d'une page (CSS)
  • l'interaction avec l'utilisateur (PHP, ASP, JSP, CGI, javascript...)
  • le stockage des données (dans le cas d'un site dynamique) dans une base de données (MySQL, PostgreSQL, Oracle, Access...) ou des fichiers (XML, TXT...)

Ce ne sont là que les principaux langages, car ils en existent beaucoup d'autres ayant des applications dans la vidéo, l'audio, l'animation, les applications en lignes, les Flux RSS.... comme Java, AJAX, XML, SMIL...

Les langages tels que XHTML ou CSS font l'objet de recommandations quant à la manière d'écrire le code, tant au niveau de la syntaxe que des propriétés existantes et supportées par les navigateurs. L'organisme appelé le [W3C|http://www.w3c.org], est chargé de proposer ces recommandations et de faire des choix discutés par ceux qui le souaitent sur l'avenir de ces langages (ajouts/abandons de fonctionnalités, création de nouveux langages d'échanges de données...).

(X)HTML

Le (X)HTML est un langage de balisage (structure) qui encadre les informations d'une pages de site de manière sémantique, permettant de hiérarchiser le contenu et de lui demander une valeur de sens (décrit si 'linfo est un titre, un paragraphe, une liste d'élément, un tableau, un formulaire...). Exemple : cliquer avec le bouton droit sur cette page puis dans le menu qui apparaît, cliquer sur "Code source de la page". Une fenêtre s'ouvre alors, montrant le code qu'à reçu le navigateur avec lequel on surf actuellement sur cette page et qu'il a 'interprété' pour afficher une page structurée.

Découverte du langage

Approfondir

  • Toutes les balises XHTML Liste alphabétique. Choisissez une lettre en bas et les balises apparaissent en dessous. Pour bien comprendre le fonctionnement, prenez pour exemple une balise simple comme <p>
  • Article sur XHTML Article long retraçant toutes les balises utiles et expliquées de manière simple.

Qu'est ce que le modèle de boite ?

CSS

Ce langage se charge de la présentation de l'information là où (X)HTML se charge de la structuration de cette même information. L'intérêt est de séparer le contenu de sa présentation, ce qui simplifie la maintenance et les mise à jour, et permet de définir une charte graphique à l'ensemble d'un site Web (peut importe le nombre de pages).

Découverte du langage

Approfondir

Exemples

Quelques sites proposant des modèles de pages prêts à l'emploi

Les étapes de la création d'un site

On distingue 2 phases lors de la création d'un site : la création en elle même et la mise en production. Ci-dessous, un résumé de l'article de CommentCaMarche.net traitant du Webmastering en général (une fois sur la page de l'article, le menu de celui-ci se trouve à gauche).

1ère étape : création

Conception

Cette phase est primordiale, elle permet de définir ce que sera le site : navigation, contenu, présentation, ergonomie, public ciblé. L'idéal est de dessiner sur une feuille la forme globale d'une page d'une site afin d'y positionner les éléments qui apparaissent systématiquement sur toutes les pages du site (comme les menus de navigation). On appelera ce dessin, le 'layout de base'. Puis il faut définir la manière dont une page-type du site s'affiche en fonction de là où se trouve l'internaute dans l'arborescence du site.

Il faut aussi définir une arborescence de navigation afin d'orienter l'utilisateur en fonction de ses clics sur les pages du site. On distingue alors 2 types de liens : ceux internes au site, qui permettent de circuler de document en document et les liens externes qui emmènent vers d'autres sites.

Quant au design du site, il doit aussi être définit le plus précisément possible, car une modification au cours de la phase de développement peut être lourde de conséquences, cela prend en compte la taille du texte, qui peut faire changer les hauteurs et largeurs des contenus et modifier le design du site (voir le casser).

Il faut aussi veiller à respecter les règles de droits d'auteurs pour tout le contenu (texte ou visuel).

Le contenu à disposer sur le site doit être complet et prêt à être exploité dans la phase de Réalisation : images classés (d'une part les images du design et de l'autre les images du contenu), textes au format 'txt' (pour éliminer tous les formatages qui pourraient exister : gras, italic, saut de ligne...), videos prêtes à être encodées...

Enfin, il est nécessaire d'obéir le plus possible à la règle des '3-clics' qui veut que tout contenu du site est accessible en 3 clics maximum, ce qui porte l'information efficacement aux internautes rend la navigation sur le site beaucoup plus intuitive. De plus la largeur des pages du site doit être pensée en fonction de la largeur des écrans des internautes qui peut varier beaucoup : 1024*768 pixels en 'moyenne sûre', donc en comptant les acenseurs du navigateurs et la place que prend le menu en haut, un site large de 980 pixels passe partout.

Réalisation

C'est la phase de développement pur, celle où il faut produire le code nécessaire aux besoins du site. Cette phase doit s'accompagner d'une réflexion sur le poids final des fichiers. Cela passe par une rigueur du code XHTML (structure le contenu en le hiérarchisant) qui doit rester le plus simple et sémantique possible, et par une écriture organisée de la feuille de Style CSS (chargée de la présentation, du design).

La bande passante est ce qui coûte le plus cher sur Internet, plus que les serveurs qui hébergent vos sites, c'est pourquoi, même si le haut débit est bien installé, le poids des pages reste un problème majeur.

Imaginons un petit site contenant 20 pages avec de l'information simple et des images (une bonne partie des sites). Jusqu'à des jours pas si anciens la technique principale de création de pages Web était d'utiliser un système de tableaux imbriqués les uns dans les autres, découpant la page du site comme une grille de manière à positionner tous les éléments nécessaires aux bons endroits : menus, images, logos, contenus textes... De plus des balises HTML obsolètes étaient massivement utilisées, rajoutant du code pour pas grand chose. C'était le défaut principal des Logiciels de création de sites où tout n'était que boutons produisant du code non-valide et surtout pas optimisé (qui peut le plus peut le moins sûrement).

Ce site, une fois codé de manière rigoureuse et, c'est là que ça fait mal, étonnament beaucoup plus vite, le site peut 'peser' seulement 40% de son ancien poids (sans compter les images), c'est à dire que les pages se chargent plus de 2 fois plus vite (en théorie, mais c'est pas loin).

Enfin, les maintenances et mises à jour seront grandement facilités et ne prendront que quelques minutes la pluspart du temps quand il en fallait parfois 100 fois plus avant.

Hébergement - Publication

Un site n'a de but que d'être consulté et pour se faire il doit être visible à une adresse (URL) donnée. Cette adresse correspond à un ordinateur dit 'serveur' qui restitue le contenu du site quand on lui demande.

Pour publier un site sur un serveur, il faut y avoir accès, ce qui est généralement possible via le protocol FTP à l'aide d'un logiciel spécialisé, comme Filezilla (Windows) ou gFTP (linux). Il s'agit alors de transférer les fichiers du site vers l'espace aloué sur le serveur, ce qui rendra immédiatement accessible le site à son adresse de type www.monsite.org.

2ème étape : Mise en production

Promotion - Référencement

Un site qui n'est pas mis en valeur par une politique de promotion sur Internet est de toute façon un site qui ne sera quasiment pas consulté, car noyé dans la masse d'information d'Internet et caché derrière les sites communiquant largement. Cela passe par

  • un bon référencement dans les moteurs de recherche (qui est le résultat de plusieurs paramètres entremêlés)
  • une communication sur d'autres sites, sous la forme d'échange de bannières par exemple
  • des partenariats de partage de l'information avec d'autres sites
  • ...et toutes les techniques de WebMarketing existantes.

Maintenance - Mise à jour

Les sites internet évoluant dans le temps pour intégrer de nouveaux contenus, voire de nouvelles technologies, il faut garder à l'esprit qu'une veille est nécessaire pour qu'un site dure dans le temps. Internet évoluant extrêmement rapidement, de nouvelles technologies font leur apparition et il est parfois stratégique d'ajouter une fonction nouvelle au site pour relancer sa consultation.

Par ailleurs, le simple retour des utilisateurs suffit souvent à faire évoluer le site en fonction des idées et problèmes qu'il peuvent avoir ou rencontrer.

De plus, dans le cas de sites dynamiques basés sur des moteurs de sites libre, la mise à jour du moteur du site est régulière et palie les trous de sécurité ou ajoutent de nouvelles fonctions au moteur.

Enfin, les sites créés à partir de zéro, qu'ils soient statiques ou dynamiques, font souvent l'objet de retouches dans le code, soit pour corriger des bugs soit pour ajouter des fonctionnalités.

Références complémentaires




Voir l'ancienne page aussi.

Récupérée de « https://wiki.labomedia.org/index.php?title=Création_de_Sites_Web&oldid=24663 »