Comment créer un site Web ? (Part. 2)


    26 mars 2004 par Thierry Secqueville

      Un site web est une sorte de livre électronique public qu’on peut consulter via le réseau mondial Internet, appelé aussi Web, Net ou toile.
      Un site web est constitué de pages web, portant généralement l’extension html ou htm, auxquelles on peut intégrer du texte, des images et des liens hypertextes , sorte d’interrupteurs permettant d’afficher les autres pages web du site ou les pages d’un autre site web , pour naviguer de page en page à l’intérieur d’un site.

      Toutes les pages d’un site web sont stockées sur un ordinateur appelé serveur web relié en permanence au réseau Internet permettant ainsi à quiconque de les consulter à distance. Ce serveur est physiquement installé chez un hébergeur. Cet hébergeur peut être votre "provider", la société à qui vous payez un abonnement pour vous connecter à Internet . Parmi les plus connus, nous citerons : free, club-internet, AOL, Wanadoo, OVH.

      Les pages web sont visualisables sur tout micro-ordinateur équipé d’un navigateur aussi appelé exploreur web ou butineur par nos amis Québécois ; les navigateurs les plus fréquemment utilisés étant Microsoft Internet Explorer et Nescape Navigator, mais il en existe d’autres (Opera, etc.).
      Avec l’évolution des NTIC, il est à présent possible de consulter un site web à l’aide d’un organiseur numérique personnel (PDA) ou à l’aide d’un téléphone mobile grâce au WAP (sites wap écrits en wml) ou à l’i-mode (site i-mode écrit en chtml).

      Le langage HTML

      La présentation des divers éléments figurant sur une page web est réalisée grâce à une codification simple et un mode d’écriture appelé script . Ce fichier est lisible avec un simple éditeur de texte du type NotePad. Le HTML - Hyper Texte Markup Language - est un langage à base de balises qui délimitent le début et la fin d’une action. Elles permettent d’agir sur la disposition et la mise en forme du texte (gras, incliné, souligné, taille, nom de la police de caractère, couleurs, etc.). Elles autorisent aussi l’insertion d’images, de photos, la manipulation de tableaux et l’intégration de liens hypertextes (appelés aussi liens URL) associés à une image ou un bloc de texte.

      Un exemple vaut parfois mieux qu’un long discours. Pour afficher le texte "Echos Mouche la Newsletter des Pêcheurs à la Mouche" en italique avec les mots "Echos Mouche" en gras, on écrira :

      < i > < b >Echos Mouche< / b > la Newsletter des Pêcheurs à la Mouche< / i >

      ... Simple, n’est ce pas ?

      Tous les éléments se manipulent de la même manière, quelque-soit leur forme : textes, images, images cliquables, tableaux, formulaires, sons ou vidéos.
      Des éléments plus sophistiqués de mise en page sont apparus avec les dernières versions de navigateurs : les feuilles de style, le XML et le SMILE . Lorsqu’on veut utiliser d’autres techniques propriétaires à l’intérieur d’une page web, l’internaute qui consultera ces pages devra au préalable télécharger sur sa machine un module supplémentaire, appelé pluggin, pour les visualiser. Quelques exemples de pluggin ? Acrobat Reader, Macromedia Flash, Java, lecteur de fichier MP3 (musique).

      Pour ajouter de l’interactivité à vos pages qui, par essence, sont des pages non vivantes, on pourra utiliser un autre langage : le JavaScript. Ce langage permet de définir des scripts qui permettront, selon leur contenu, de modifier des événements associés à la page , de gérer le rollover de la souris (survol du curseur de la souris sur une image qui change alors d’aspect), d’utiliser des menus plus ou moins dynamiques, d’afficher une date, de prendre en charge l’envoi et le traitement de formulaires.

      Images et photos

      Vous pouvez, si vous le souhaitez, intégrer des images et/ou des photos à vos pages html. Il vous faudra néanmoins veiller à leurs format et leurs poids.

      Les formats les plus fréquemment utilisés sont :

      - Le format GIF : compressé, 256 couleurs indexées maxi avec possibilité de transparence
      - Le format JPEG : compressé, 16 Millions de couleurs maxi sans transparence
      - >Le format PNG : compressé, 16 millions de couleurs maxi avec possibilité de transparence reconnu uniquement par les navigateurs les plus récents..

      On peut aisément obtenir ces éléments graphiques grâce à un appareil photo numérique , en les créant directement à partir d’un logiciel de dessin comme PaintShopPro, Photoshop ou PhotoImpact, ou en numérisant des documents à l’aide d’un scanner. La capture d’écrans ou d’images vidéo depuis un camescope ou une webcam peuvent être aussi envisagée.

      Les animations

      - Le format GIF animé permet de créer des petits animations par succession d’images.
      - La majorité des animations graphiques sont le plus souvent créées avec des logiciels spécialisés comme Macromedia Flash.
      - Le JavaScript, plus complexe, permet de créer quelques animations mais avec beaucoup de lignes de code .
      - Le langage Java est très puissant et permet de créer entre-autres des animations mais au prix de l’installation du pluggin Java approprié pour l’utilisateur et des temps d’exécution souvent assez élevés.

      Sonorisez vos pages

      Images, animations : il ne manque plus que le son. Il est possible d’insérer des séquences sonores ou musicales à vos pages. L’internaute pourra les écouter à la condition expresse que son poste informatique soit équipé d’une carte son et de haut parleurs.

      - Le format midi est utilisé comme une partition musicale à faire jouer par la carte son. Le rendu est dépendant des caractéristiques matériels.
      - Le format wav est utilisé pour les signaux sonores complexes et cours car il est très volumineux. Le fichier est d’abord chargé entièrement en mémoire avant d’être exécuté.
      - Le format MP3 comporte un signal sonore compressé permettant d’obtenir le même rendu acoustique que les fichiers wav avec une taille de fichier extrêmement plus faible ; c’est le format HiFi en vogue.
      - Le format audio-streaming permet de diffuser de la musique en quasi continu. La lecture se fait au fur et à mesure du chargement du fichier.

      A l’exception des fichiers midi, les autres formats sont volumineux et doivent réellement apporter un plus pour être utilisés.

      Ajoutez des Vidéos

      Des vidéos peuvent être visualisées sur une page web. Le lecteur doit d’abord attendre que la vidéo soit entièrement chargée en mémoire sur son poste avant de pouvoir la consulter. Ce processus est très lent et surcharge le réseaux .

      - Le format video-streaming fonctionne sur le même pricipe que l’audio-streaming. La vidéo peut être consulter pendant son chargement (diffusion quasi en continu).
      - Le nouveau format vidéo propriétaire proposé par Macromedia Flash MX se présente avec une bien meilleure compression de fichier.

      Ces types de média sont très volumineux, gourmands en bande passante et doivent réellement apporter un plus sur une page web pour être utilisés. Tous les hébergeurs ne les acceptent pas forcément (surtout le streaming).

      Pour des sites web plus complexes et plus dynamiques, on pourra utiliser des langages du type ASP, PHP, PERL, JAVA ou C++(CGI) pour fabriquer les pages web à la volée (à la demande de consultation), permettant ainsi de présenter des informations régulièrement mises à jour sur les pages web (issues de bases de données par ex.emple).

      Les technologies de type script serveur (php, asp), initialement utilisées pour la mise en place de boutique virtuelle en ligne- l’e-commerce - et de sites d’information, peuvent être utiles pour la mise en place de modules à configurer comme les forums de discussion, les newsletters, les toplistes, les webrings, les formulaires, les questionnaires et les jeux..

      On touche ici à un secteur à mi-chemin entre les professionnels et les bon bricoleurs, bien que certains langages récents comme ASP ou PHP)soient abordables, en utilisation basique, pour des développeurs informatiques débutants.

      On fait le point ?

      Le langage HTML sera utilisé pour la mise en page, le Javascript pour introduire du mouvement et de l’interactivité dans vos pages.

      Les fichiers de type Gif et Jpeg seront utilisés pour les éléments graphiques. Quelques fichiers Gif animés ajouteront des touches graphiques en mouvement assorties ou non de fichiers Midi ou wav pour créer une ambiance sonore.
      Apparemment, nous avons tout ce qu’il nous faut pour attaquer l’assemblage de tout ces éléments : A partir des matériaux, on construit la maison.

      L’intégration

      Pour assembler tous ces éléments (textes, tableaux, images, etc.) on pourra utiliser un simple éditeur de texte comme NotePad ou Wordpad mais il est préférable d’utiliser des éditeurs de pages web - qui font aussi office de gestionnaire de site - qui intègrent un suivi des mises à jours et des transferts de fichiers vers le serveur. Certains sont très efficaces mais sont d’un prix prohibitif, aussi n’hésitez pas le cas échéant à utiliser des logiciels gratuits de bonne facture.

      Deux familles existent : les intégrateur dits graphiques comme FrontPage et Dreamweaver, les éditeurs de balises comme Hotdog, UltraEdit ou WebExpert.

      Les premiers permettent de "monter" une page en mode quasi WYSIWYG , ce que vous voyez est ce que vous obtiendrez au final.
      Tandis que les deuxièmes sont destinés aux développeurs qui, de ce fait, pourront optimiser le code HTML et traquer les bouts de code html inutiles.
      Il existe des logiciels tels Macromedia Fireworks et Adobe Imagestyler qui permettent de composer complètement graphiquement ses pages web pour en générer, au final, tout le code nécessaire prêt à être traiter pour y adjoindre du code complémentaire.

      Quelques recommandations

      Prévoyez un format de page de 800X600 points en 256 couleurs, c’est le standard actuel qui passe partout à coup sûr.
      Ne dépassez pas un taille de 20 à 40 Ko pour chaque page web ; images comprises.
      Préférez des pages simples et fonctionnelles plutôt que sophistiquées et quasi-inutilisables. Evitez les pluggins autant que possible.
      Pensez au plus tôt au référencement de votre site qui dépend en partie de sa structure et de son contenu. Un référencement demande bien souvent plusieurs semaines avant d’être effectif.
      Indiquez toujours clairement le moyen de joindre le webmaster de votre site en indiquant son e-mail et/ou son numéro de téléphone ou en mettant un formulaire à disposition des utilisateurs.
      Testez longuement votre site à l’aide de différents types de navigateurs et dans différentes versions.
      N’hésitez pas à consulter les innombrables sites et forums de discussion qui dispensent de l’information et des conseils sur ces différentes technologies.
      Méfiez vous des programmes prêts à l’emploi et des « copier/coller » qui ne fonctionnent pas forcément avec tous les navigateurs et sur toutes les plateformes.

      En conclusion, faites-vous les dents et bienvenue dans le monde du développement web.

          | Réagir à cet article | Rechercher | Dans la même rubrique |

            Copyright echosmouche.fr
            Tous droits de diffusion et de reproduction réservés - Système de Gestion de contenu spip(3.0.17)
            Sommaire La Lettre d'echosmouche.fr Concours Auteurs Trophée Echos Mouche Nous écrire