Les 5 commandements du webmaster débutant

Les 5 commandements du webmaster débutant

Pour ma première participation à un évènement, j’avais vraiment envie de marquer le coup. Je suis donc partie à la recherche des 5 conseils incontournables quand on débute dans les coulisses d’un site web.

Mais en même temps, ce n’est pas si facile de faire un choix. Comment déterminer les conseils les plus importants ? Quel conseil plutôt qu’un autre ?

J’ai alors eu l’idée de m’inventer une petite histoire

Un sorcier m’a frappée d’un mauvais sort: demain, j’oublierai tout ce que j’ai appris durant ces 5 dernières années passées sur les forums informatiques, à créer des sites web et à développer des programmes.

C’est alors qu’un génie m’apparaît.

Comme les fées penchées sur le berceau de la belle au bois dormant, il m’offre un don: celui de conserver 5 souvenirs.

La seule condition: ces 5 souvenirs doivent être compréhensibles par un débutant pour que je sois en mesure de les comprendre moi-même.

C’est dans cet état d’esprit que j’ai sélectionné ces 5 points essentiels à connaître pour tout webmaster, créateur de site ou développeur débutant.

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://lesdoigtsdanslenet.com/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! Et pour savoir comment compresser une photo pour encore réduire son poids, regardez ma première vidéo.

Si vous deviez choisir 5 conseils pour débuter sur des bases solides, que choisiriez-vous ?

Cet article participe à l’évènement inter-blogueurs « Echanges de compétences » organisé par le blog Copywriting Pratique. Si vous avez lu cet article, à combien l’évalueriez-vous sur 5 ? Cliquez sur la note de votre choix : 012345

Image: digitalart / FreeDigitalPhotos.net

débutant, image, webmaster

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

44 commentaires

  1. Salut Marie-Eve,

    On ne peut pas encore voter mais je reviendrai pour le faire ! Vraiment bien ton article, j’ai appris pas mal de choses sur des aspects techniques sur lesquels je ne m’étais pas forcément penché :)

    Répondre
  2. Bonjour MarieEve,

    Merci pour ces bons rappels 😉

    Amicalement

    thierry

    Répondre
  3. Bonjour MarieEve,

    Tes conseils sont simples et efficaces et pourtant tellement utiles.

    J’adore le principe de « re »commencer par les principes de base.
    Et si ton génie t’apporte encore de l’aide, je suis également preneur.

    Très amicalement

    Frédéric

    Répondre
  4. Bonjour Marie-Eve,

    Excellent article que tu nous propose là.

    Pour le UTF-8 je met un +1000 … à faire dès le départ de son site … je me souviens encore avoir passé des heures a migrer des sites de ISO-xxxx en UTF-8 … on ne m’y reprendra plus jamais !

    Sinon je ne connais pas Apatana mais, pour info, Notepad++ propose aussi un plugin FTP qui permet de modifier ses pages directement depuis le serveur … + de nombreuses autres choses … je suis fan !

    Répondre
  5. Je ne pense pas être un total néophyte en matière de « webmastering » et pourtant j’ai réellement apprit des choses (par exemple, je ne connaissais pas le plugin pour Firefox – oui, honte à moi !). Donc merci pour ce très bon article : je vote pour !

    Répondre
  6. Oui il s’agit vraiment des bases mais je pense qu’il doit y avoir beaucoup de personnes (le pense à ceux qui débutent) qui ne les connaissent pas encore.

    Répondre
  7. Merci, j’ai appris plein de choses !

    ps : nous sommes dans la même catégorie 😉

    Répondre
  8. Merci à tous pour vos commentaires, ça fait plaisir de voir que ces 5 astuces sont utiles :)
    @Robin: Tes paupières sont lourdes…tu cliqueras sur 5…le son de ma voix te guide…. 😀
    @Thierry: de rien :)
    @Frédéric: promis, s’il repointe le bout de sa lampe, je te préviens
    @Xavier: Ah tiens je ne savais pas que Notepad++ pouvait le faire. Un bon point pour lui! Mais il se mélange un peu les pinceaux avec les encodages je trouve….
    @FHW: SI tu ne connaissais pas Firebug, c’est un nouveau monde qui s’ouvre à toi! 😉
    @linette: de rien, le titre de ton article est très accrocheur, je vais aller le lire…même si je n’ai pas de patron
    @linette2: une petite erreur sans doute ?

    Répondre
  9. Bonsoir Marie-Eve,
    Décidément, il y a toujours quelque chose à apprendre avec toi!
    Je bidouille un peu le html, par contre je ne connaissais pas Firebug. Je vais de suite l’installer car j’ai encore des anciens sites qui ne sont pas sous wordpress.

    Répondre
  10. Hello
    A mes débuts, j’ai mis plusieurs jours à bien maitriser la notion de clients serveur 😉
    Merci pour ces rappels de bonnes pratiques!

    Répondre
  11. J’adore la manière dont tu présentes ton article. Vraiment cool !

    Une autre idée que je risque de piquer 😉

    Les astuces sont bien aussi !

    A la prochaine

    Nassim

    Répondre
  12. Enchanté Marie-Eve, je ne suis pas débutant, mais tu m’as fait découvrir l’existence d’Apatana avec 5 points seulement, j’attends les suivants 😉

    Répondre
  13. Bonjour Marie-Ève,

    Merci pour les 5 commandements Webmasters!

    Un bon petit résumé d’éléments de base pour les 5 conseils incontournables…

    Du coup, je ne connaissais pas Firebug, l’encodeur UTF-8 et l’éditeur de texte Apatana.

    Je m’empresse tout de suite à connaître ses trois points essentiels en faisant une recherche sur Internet…

    Merci encore pour cette leçon de récapitulation!

    Réal

    Répondre
  14. Merci pour cet article intéressant et distrayant 😉

    Rodleg

    Répondre
  15. Très intéressant cet article !

    J’ai découvert 2 outils qui me seront très utiles : Apatana et Firebug.

    Merci !

    Répondre
  16. Bonjour Marie-Eve,

    L’article propose de bonnes bases pour bien débuter. Concernant les images, je favorise le format png pour gérer les évolutions.

    amicalement

    Répondre
  17. Tu as oublié de parler des gens qui utilisent d’autres navigateurs web en alternative à Firebug !
    Il y a tout simplement la console sous chrome, ou F12 dans Internet explorer.

    La console de chrome peut être ouverte avec CTRL+SHIFT+J, ou tout simplement click droit-> inspecter l’élement. :)

    Répondre
    • Bonjour Nicolas,
      C’est vrai que je n’ai pas mentionné les autres navigateurs. Honnêtement, je trouve que ces outils « de développement » intégrés ne sont que de pâles copies de firebug. J’ai peu utilisé l’outil de chrome, alors peut-être que je l’utilise mal… mais j’ai beaucoup utilisé celui de IE8 et il ne fait pas la moitié de ce que propose firebug (en particulier pour débugger le javascript).

      Je pense même que grâce à firebug, Firefox ne craint pas la concurrence parmi les développeurs. Pour le surf, c’est différent car Firefox est assez lent comparé à Chrome…

      Répondre
  18. Salut Marie Eve!

    A voté!!

    J’avais juste vu Firebug avant sans savoir ce que c’était.
    Et pour Apatana, totale découverte !!

    Merci 😉

    Répondre
  19. Bonjour Marie-Eve

    Des solutions intéressantes et claires. Firebug, j’avoue encore avoir un peu de mal à me dépatouiller. Mais, ça viens doucement.

    Pour logiciel ftp, j’utilise une extension firefox, fireftp, qui fonctionne très bien. Je peux aussi modifier mes fichiers directement sur le serveur, mais là, il faut faire très attention à ne pas faire d’erreur.

    Une sauvegarde du fichier avant la modification s’impose. J’ai déjà eu un coup de chaud avec une modification de fichier que je n’avais pas sauvegardé au préalable, et on ne m’y reprendra plus.

    Répondre
    • Bonjour Thierry,

      C’est vrai que c’est impressionnant de travailler sur le serveur quand on est pas habitué. Personnellement, je ne travaille que comme ça, mais j’ai l’habitude il faut dire :)

      Il me semble que FireFTP est un client FTP, plutôt l’équivalent de FileZilla que d’un éditeur de code comme Aptana ou Notepad++. Ses fonctionnalités sont assez limitées (pour éditer du code, pas pour effectuer des transferts http://FTP...) si je me souviens bien. Fait-il la coloration syntaxique ? (quand le code suit un code de couleur)

      Répondre
      • Je me suis mal exprimé. J’ai aussi notepad ++ installé sur le PC. Alors quand je suis sur le serveur via fireftp, il suffit d’un clic droit pour ouvrir le fichier, qui s’ouvre avec notepad++. Il y a donc la coloration syntaxique.

      • Ah oui je comprends mieux. C’est une façon de faire en effet. :) Filezilla le permet aussi.

  20. Salut,

    Concernant l’astuce 4, j’édite les fichiers sur mon serveur directement depuis Notepad++, qui intègre un client FTP. Avant-dernière icône, « Show NppFTP Window » 😉

    Je ne connais pas le logiciel dont tu parles, mais tu as dû vouloir dire Aptana je pense.

    Répondre
    • Bonjour Grégory,
      En effet Apatana n’existe pas :D, il s’agit bien d’Aptana !

      Merci d’avoir soulevé l’erreur 😉

      Répondre
  21. Bonjour Marie-Eve – merci pour aptana, je vais voir ce que cela donne. Pour réduire les PX des photos, j’avais cherché un logiciel pour mac, mais n’en ai pas trouvé, un sur tes trois ne fonctionne que pour windows. Vais voir les deux autres.
    Bonne continuation – j’ai voté, si tu peux aller voir mon article, merci.
    Didier

    Répondre
    • Merci Didier de ton retour. Si tu trouves un logiciel performant pour Mac, reviens nous le partager. Je vais jeter un oeil à ton article :)

      Répondre
  22. Connaiterais tu l équivalent de firebug pour chrome?

    Répondre
  23. j’ai trouvé votre article intéressant.je ne dispose pas encore de site . j’espère que je m’inspirerai de vos conseils. Merci pour ce que vous faite pour les débutants et les aspirants webmaster.

    Répondre
    • Merci Josias d’avoir pris le temps d’écrire ce commentaire. Je vous souhaite beaucoup de succès pour la suite, en espérant que mes conseils vous aident à avancer dans la jungle du web!

      Répondre
  24. Haaaaa! enfin un article complet pour les débutants comme moi.
    Si j’avais pu le lire il y a quelques temps à l’ouverture de mon blog ça aurait été encore mieux.
    Merci pour les infos en tous les cas.

    Répondre
  25. Merci Merci,
    De très bons conseils, firebug est aujourd’hui un inconditionnel chez moi, le meilleur moyen de retrouver ces vilaines images sans alt ou de retrouver ses meta cachées dans le header.

    Répondre
  26. Bonjour Marie-Eve,

    merci pour se petit rappel et surtout de m’avoir fait découvrir Aptana et Firebug, ils me sont devenu indispensable.

    Encore merci pour tes conseil !

    Répondre
    • Bonjour,
      Je suis contente que mes conseils servent. Bravo de t’y être mis (ce n’est pas facile de changer ses habitudes)!

      Répondre
  27. Bonjour Marie Eve !
    En forme?
    Moi j’utilise le logiciel gratuit online png optimiser pour alléger le poids de mes images.

    François

    Répondre
    • Merci pour ces précieux conseils MarieEve, je viens de tomber sur ton site en recherchant exactement cela sur Google ! A+ Xavier :)

      Répondre
  28. C’est simple, c’est clair et efficace!
    De très bon conseils.
    Merci Marie-Eve
    eric

    Répondre
    • J’ai modifié ton commentaire, là tu as un peu exagéré sur l’auto-promotion. Les commentaires ne sont pas fait pour ça.

      Répondre
  29. Bonjour Marie-Eve.

    Merci pour cet article, je viens de me lancer dans l’univers du blogging et je sens que je vais trouver tout ce qu’il me faut sur ton blog qui est vraiment super bien structuré.

    Si j’ai bien compris le schéma client-serveur, le serveur créer la page web et le navigateur l’affiche ?

    Merci également pour le point sur le format des images.

    Si je peux me permettre, vous avez fait une faute de frappe, ce n’est pas Apatana, mais Aptana.

    Á bientôt.

    Répondre
    • Bonjour Lucas,

      Merci pour la faute, c’est réparé (il me semblait l’avoir déjà fait mais non visiblement).

      Tu as bien compris le schéma client serveur ; si ça t’intéresse, tu as une vidéo qui explique plus en détails ce schéma sur la page de vente d’une de mes formations (car c’est une vidéo extraite de cette formaion, c’est pour ça qu’elle est pas dans un article de blog normal) : http://lesdoigtsdanslenet.com/modifier-theme-wordpress/presentation-de-la-formation/#extrait

      A bientôt !

      Répondre
  30. Bon, eh bien j’ai appris des trucs encore…
    Merci Marie-Eve 😉

    Répondre

Trackbacks/Pingbacks

  1. Les 5 commandements du webmaster débutant - Les Doigts dans le Net | -thécaires are not dead | Scoop.it - [...] background-color:#222222; background-repeat : repeat; } lesdoigtsdanslenet.com - Today,…
  2. Les 5 commandements du webmaster débutant – Les Doigts dans le Net « la bibliothèque, et veiller - [...] on lesdoigtsdanslenet.com Share this:J'aimeJ'aime  [...]
  3. Les statistiques du blog en Mai 2012 - Les Doigts dans le Net - [...] un article pour l’évênement inter-blogueur d’Yvon (copywriting-pratique.com) : Les 5 commandements du webmaster débutant [...]
  4. Comment installer Firebug sur Chrome et Internet Explorer ? - Les Doigts dans le Net - [...] mois passé, je vous donnais 5 astuces pour construire sur des bases solides votre activité [...]
  5. Rétrospective 2012 et bonne année 2013 ! - Les Doigts dans le Net - [...] Les 5 commandements du webmaster débutant [...]
  6. La tête dans les nuages - Les Doigts dans le Net - [...] service informatique à la demande. Ces services étant organisés entre eux sur des serveurs web (comme n’importe quel site…

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint