Les 5 commandements du webmaster débutant

Partagez si vous aimez ->

Quels sont ces 5 éléments de base, nécessaires pour se sentir à l’aise dans un environnement web, et pouvoir progresser ?

1. Le schéma client-serveur tu maîtriseras

Le web est un milieu technique et relativement abstrait. Si vous avez un blog ou un site, vous êtes forcément plongé dans ce monde.

Mais vous ne savez peut-être pas comment fonctionne une page web.

Pourtant un schéma résume la dynamique des pages très simplement.

Source: http://www.openrun.re/

Ce modèle est la base du fonctionnement de nos pages web. Quand on l’a bien en tête, il est plus facile de comprendre comment un site fonctionne.

Le principe

Pour afficher une page web, le navigateur, appelé le client, envoie une requête au serveur.

Par exemple, pour afficher l’article que vous lisez actuellement, quelle a été la requête du navigateur ?

"http://lddln.mypointcom.net/5-commandements-webmaster"

Elle signifie « Serveur, cherche le site « lesdoigtsdanslenet » et donne moi la page « 5-commandements-webmaster »

Simple, n’est-ce pas ?

Le serveur créé la page, (seul le contenu existe déjà), puis il la retourne au navigateur pour que celui-ci l’afficher.

Quand il ne trouve rien, il renvoie la fameuse erreur 404: « La page demandée n’existe pas ».

2. Firebug toujours tu utiliseras

Avez-vous déjà essayé de balayer sans balai ? Avec vos mains époussetant la poussière sur le sol, et vos petits doigts ramassant les tas à peine formés ?

Si vous répondez oui, vous aimez vraiment vous compliquer la vie !

Pour les autres, voici un conseil pour faciliter votre quotidien de webmaster : installez tout de suite Firebug!

Ce module complémentaire (un addon pour ceux qui spic ingliche) pour Firefox offre de nombreuses possibilités.

Vous allez entre autres :

  • Pouvoir lire le code source réel de la page (le DOM)
  • Débusquer les erreurs javascript (comme un plugin Facebook qui ne marche pas…)
  • Modifier le css ou l’html en live pour faire des tests en 2 minutes
  • Repérer les liens cassés (les images, les vidéos, les fichiers css…)

Et beaucoup d’autres fonctionnalités qu’il faudra prendre le temps d’explorer !

Cet outil génial mérite qu’on passe du temps à l’utiliser: il vous offre une porte sur le fonctionnement invisible de votre site web.

Une aubaine pour comprendre comment ça marche (et pourquoi ça ne marche pas!).

3. En UTF-8 ton site tu encoderas

Aaah, ces problèmes de charactères ! Quand ça commence, vous n’êtes pas arrivés!

Ces charactères bizarres vous disent sûrement quelque chose ?

Il s’agit d’un problème d’encodage. Mais d’où viennent-ils ?

Les pages web sont encodées selon un certain format. Or, en fonction du format choisi, tous les caractères n’existent pas.

Par exemple, les américains n’utilisent pas d’accent ni de cédille. Ils n’ont pas besoin d’avoir ce caractère. De même, nous n’utilisons pas le tilde (~) espagnol, et encore moins les caractères très particuliers d’Asie.

Cependant, cette logique ne fonctionne plus pour un site multilingue. Dans ce cas, une même page PHP est susceptible afficher des charactères de différentes langues.

De même, un problème se pose si vous essayez d’afficher un accent avec un logiciel américain (un auto-répondeur bien connu par exemple).

Dans un cas comme dans l’autre, des lettres apparaîtront de façon illisible!

Commment résoudre ce problème ?

L’idéal serait d’avoir, non pas un jeu de caractère par langue, mais un jeu international qui fonctionnerait tout le temps!

Ca tombe bien, il existe: il s’agit de UTF-8.

Mon meilleur conseil en matière d’encodage: encodez vos pages et votre base de données en UTF-8.

Ce conseil est largement appliqué puisque plus de la moitié des sites créés depuis 2010 utilise ce jeu de caractères international! Un large succès qui témoigne de son utilité.

4. En FTP tes pages tu éditeras

Vous n’êtes pas sans savoir que votre site est hébergé sur un serveur.

Quand vous voulez modifier un fichier de nombreuses étapes sont nécessaires:

  • Vous récupérez le-dit fichier sur votre ordinateur, avec un logiciel FTP.
  • Vous l’ouvrez avec un éditeur de texte comme Notepad++ ou Dreamweaver
  • Vous modifier le fichier
  • Vous sauvegardez votre modification
  • Vous renvoyer ce fichier vers votre serveur en FTP
  • Vous rechargez le navigateur pour constater la modification

Et si le résultat ne vous satisfait pas, vous êtes bon pour un deuxième round!

Voilà de quoi vous énerver, et j’avoue que je vous comprends, ce n’est vraiment pas pratique!

Heureusement, l’homme a inventé Aptana.

Ce logiciel gratuit et open-source est un éditeur de texte assez poussé, utilisé en milieu professionnel.

Rassurez-vous, il reste simple à utiliser.

Son gros avantage ?

Vous allez pouvoir travailler directement sur votre serveur.

Aptana intègre un client FTP (comme Filezilla), ce qui lui permet d’éditer vos pages à distance et instantanément.

Je vous le conseille plutôt deux fois qu’une!

PS: vous pouvez utiliser un autre éditeur de texte, du moment qu’il offre un client FTP intégré.

5. Les formats d’images tu comprendras

Les formats d’image sont un calvaire pour tout débutant.

Pourtant c’est assez facile de comprendre les bases. Cela ne fera pas de vous un graphiste mais la qualité de vos images s’en ressentira: visuellement, mais aussi en terme de poids.

Et souvenez-vous: un bon référencement implique une page la plus légère possible.

Le format .JPG ou .JPEG

C’est le plus connu de tous. Vous en avez beaucoup sur votre disque dur car vos photos numériques sont dans ce format. En effet, le jpg est utilisé pour les images contenant des millions de couleurs.

Il peut être utilisé pour des images de grandes tailles sans devenir trop lourd, même s’il est plus lourd que du png-8.

Le format .PNG

Le png existe en « version » 8 ou 24. Ces deux versions peuvent afficher des images possédant des zones transparentes.

Leur différence se situe au niveau du nombre de couleurs.

Le PNG-8 en couvre 256: utilisez-le pour des images de type « logo » (des zones de couleurs bien délimitées). Ce format donne des images légères.

Le PNG-24 supporte jusqu’16 millions de couleurs: comme le jpeg. Mais ce format est assez lourd. Ne l’utilisez jamais pour des photos!

Alors quand devez-vous l’utiliser ?

Pour des logos avec une zone transparente « en dégradée ». Par exemple quand on a un effet d’ombre portée, ou si le logo est affiché sur un fond dégradé.

Regardez l’ombre portée sur ces images:

On l’utilise aussi pour les logos contenant beaucoup de couleur (des dégradés le plus souvent).

Le format .GIF

Le gif est l’ancêtre de png. Je ne vous conseille pas de l’utiliser car sa qualité est médiocre comparé au png. Par contre, il possède un avantage : il peut être animé. Dans ce cas seulement, choisissez le format gif.

En résumé :

  • Une photo = JPEG.
  • Une image/logo avec peu de couleurs (moins de 256) / zone transparente possible = PNG 8
  • Une image/loop avec beaucoup de couleurs (dégradés) / zone transparente possible = PNG 24
  • Une image animée = GIF animé

Avec ça, vous êtes bien armés pour ne plus vous tromper !

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons