La Bnbox !

Créateur de sourires...

Mon compte

S'inscrire

Recherche

Vous êtes ici : Accueil » Atelier Webmaster » Liste des articles

Atelier Webmaster



Gérer votre site Web

Ce cours ne vous parlera pas vraiment de programmation. Ici, je pars du principe que vous avez déjà conçu votre site web avec le ou les langages informatiques de votre choix, c'est pourquoi nous étudierons plutôt ce qui entoure les site Web. Comment mettre son site sur Internet, comment gagner de l'argent grâce à lui, comment l'administrer au mieux, comment le rendre accessible, comment le référencer, etc.
Toutes ces questions tellement importante, auxquels on ne trouve pas forcément de réponses quand on débute, et qu'il est toujours bon de se rappeler, même quand on a de l'expérience bn_wink

Il n'y aura pas forcément de lien logique entre les différentes parties, prenez plutôt ce cours comme un panorama de toutes les choses à savoir.

Sommaire



Les écueils à un site Web

Utiliser le FTP


Remonter Navigation rapide : Sommaire

Utiliser le FTP

Pour comprendre ce que je vais vous apprendre, il va nous falloir faire un point sur une chose très importante : les serveurs.
A votre avis, où se trouve un site Web ? Plus clairement, quand vous visitez n'importe quel site Web, où se situe les fichiers que vous visualisez ?
Ils se situent tout bêtement dans un disque dur. Dans un disque dur relié à un ordinateur assez puissant, qui est lui même relié à Internet. C'est cet ordinateur qui vous fournit l'accès au disque dur en question pour que vous puissiez visualiser le site Web. C'est ça un serveur. (c'est pas si compliqué finalement^^) En très schématisé : un ordinateur puissant relié à Internet, contenant pleins de disque dur qui contiennent les fichiers de tous les sites Web.

Pour que notre site Web soit accessible par tout le monde, il faut donc le placer sur un serveur. Pour cela, il y a 3 solutions :
  • Faire appel à un hébergeur. C'est à dire à une société spécialisée qui va "héberger" notre site sur ses serveurs, moyennent finance. Il existe de nombreuses offres à des prix variant du tout au tout, avec des possibilités d'actions (rapidité, espace alloué sur le disque dur...) différentes à chaque fois.
  • Utiliser un serveur dédié. La encore, il faut faire appel à une société spécialisée. Cette fois-ci au lieu de n'avoir "qu'une partie de disque dur" c'est tout un serveur que l'on loue. C'est utile quand un site Internet devient très fréquenté. Mais nous en sommes encore loin, croyez-moi...
  • Héberger son site sois-même. C'est à dire, réserver un ordinateur chez sois, qui sera constament relié à un Internet et qui contiendra le site Internet. Cela enlève tous les soucis de prix et de communication des deux possibilités ci dessus, mais cela rajoute le problème de la sécurité, de la maintenance, de la fiabilité... A éviter si on n'est pas expert^^ (et même les experts préfèrent souvent les serveurs dédiés.)


A vous de choisir donc ce que vous préférez, suivant vos moyens et vos connaissances !
Je ne souhaite pas vous donner des noms d'hébergeurs, car en faisant une petite recherche, on trouve une foultitude d'offres et une foultitude d'article retraçant les offres les plus intéressantes. Néanmoins, je peux vous donner quelques petits conseils si vous débutez :
  • Très souvent, votre FAI (Fournisseur d'Accès à Internet) vous offre une ou plusieurs "pages perso". C'est à dire une place sur un serveur. Ce sont souvent des offres de qualités, alors renseignez-vous ! (et si vous êtes chez Free, n'hésitez pas !!)
  • Les hébergeurs gratuits et sans pub existent. Mais ils sont très rare et souvent imparfait. Dans tout ce qui est gratuit, il vaut mieux faire attention aux magouilles et vérifier qu'il y ai spécifié : "sans pub". (sauf si vous désirez avoir de la pub sur votre site, sans que cela ne vous rapporte.)
  • Les hébergeurs vous proposeront un espace sur leur disque dur : 50mo, 100mo ou plus. Si vous ne comptez n'avoir que du texte sur votre site, pas de souci à ce niveau là. Mais si vous souhaitez afficher des images, faire des galeries d'images, ou mettre des petits logiciels à télécharger; cela devient vite très lourd. Alors attention. 100mo c'est bien. Même très bien, et dans la plupart des cas, cela suffit amplement.
  • Si vous comptez utiliser du PHP, vérifiez que le serveur en question accepte le PHP. Et vérifiez aussi que vous ayez accès à, au moins, une base de données. (il y a rarement besoin de plus d'une base de données, mais de toute façon, les hébergeurs n'en proposent, le plus souvent, qu'une seule)


Maintenant que nous avons fait le tour des serveurs, il va nous falloir envoyer notre site Web sur notre serveur. Pour cela on utilise le FTP.
Le FTP ? C'est quoi ce truc là ?


Je ne vais pas rentrer dans les détails théoriques, sachez seulement que le FTP est un protocole qui permet d'envoyer et de recevoir des fichiers sur un serveur distant. Tout comme le protocole HTTP permet de visualiser des informations sur un serveur distant. Ne vous inquiétez pas, je ne vais pas vous demander d'apprendre un nouveau langage ^-^ Nous allons apprendre tout de suite à nous en servir, c'est assez simple, vous verrez.


Deux manières d'utiliser un FTP


Très souvent, votre hébergeur met à votre disposition un script vous permettant d'envoyer vos fichiers, à partir du site de l'hébergeur lui-même. C'est... utile. Mais personnellement, j'ai toujours trouvé ça mal fait et assez compliqué à utiliser.

Voilà pourquoi il existe des logiciels, utilisant le FTP, qui vous permettent de déplacer vos fichiers vers votre serveur, aussi facilement que vous faites un copier/coller sur votre ordinateur. Bref, c'est beaucoup plus pratique !!
Pour les utiliser, il suffit simplement de connaître :
  • Le nom de l'hôte. C'est à dire l'adresse ftp e votre serveur.
  • Le nom de l'utilisateur. C'est à dire vous. C'est donc, en général, le nom avec lequel vous vous êtes inscrit sur le site de l'hébergeur.
  • Un mot de passe. En général, le même que celui que vous utilisez sur le site Internet de l'hébergeur. Mais la encore, cela dépand !

Toutes ces informations vous sont donnés par votre hébergeur. En cherchant bien, vous les trouverez forcément !

Dans le choix de ces logiciels, je vous en conseille deux.
Le premier : FTP Expert de Visicom Média.
document/atelier/ftp_expert.gif

Il est très bien conçu et sécurisé. Il permet même d'avoir 2 serveurs ouvert en même temps. (ce qui est utile, mais pas indispensable^^) Cependant il est payant.

Le deuxième : FileZilla conçu par la célèbre fondation Mozilla.
document/atelier/file_zilla_1.gif

Tout aussi bien conçu et sécurisé. (quoi que d'un fonctionnement différent) Il est totalement gratuit, et je pense que sur les deux, c'est mon préféré ! Alors, me direz-vous, pourquoi payer ? (c'est une bonne question^^)

Dans cette troisième et dernière partie, je vous expliquerai le fonctionnement de FileZilla.

Utiliser FileZila


Voici ce que vous avez à l'écran lorsque vous ouvrez FileZilla :
document/atelier/file_zilla_2.gif


Cela vous parait peut-être compliqué, mais son utilisation est en fait très simple. Voici quelques explications qui vous aideront sûrement.
[1]

C'est la qu'apparaissent les dossiers et les fichiers qui se trouvent sur votre ordinateur. Cette partie se sépare en deux fenêtres : la fenêtre du haut vous présente les dossiers sous forme d'organigramme. La deuxième vous montre l'intérieur du dossier que vous avez choisit.
[2]

C'est la qu'apparaissant les dossiers et les fichiers distants. C'est à dire ceux qui se trouvent sur votre serveur. Pour envoyer un fichier de votre ordinateur sur votre serveur, vous n'avez donc qu'à glisser un dossier, ou un fichier, de la fenêtre [1] vers la fenêtre [2]. (vous pouvez aussi faire l'inverse^^)
Si le fichier que vous envoyez existe déjà sur le serveur, la petite fenêtre suivante va apparaître.
document/atelier/file_zilla_3.gif

En cliquant sur "Ecraser" vous allez remplacer le fichier déjà existant par le nouveau fichier. (ce que vous ferez toujours en général)
"Reprendre" équivaut à "réessayer". Si vous voulez conserver les deux fichiers, vous pouvez cliquer sur "renommer" afin de renommer le fichier que vous envoyez. "Suivant" équivaut à "ne pas envoyer ce fichier, passer au fichier suivante". (ce qui est utile dans le cas où vous envoyez plusieurs fichiers d'un seul coup.)
[3]

Dans cette partie va s'afficher l'historique de tout ce que vous avez fait. S'il y a une erreur lors de la connexion, ou lors de l'envoi des fichiers, c'est donc ici que cela s'affichera.
[4]

C'est là que vous verrez apparaître l'avancement de vos envois.
[5]

C'est ici que vous devez rentrer les données explicités dans la partie 2, afin de vous connecter, via le FTP, à votre serveur.
A noter que le "port" à utiliser est, en général, le port n°21. Vous n'avez donc qu'à mettre 21 dans ce champ.
Tout cela remplit, vous n'avez plus qu'à cliquer sur "Connexion rapide". (si vous avez déjà rentré des données, celles-ci sont sauvegardés. Vous n'avez donc pas à rentrer votre adresse, votre mot de passe, etc, à chaque fois ! Soulagé(e) ?)



Voilà, vous pouvez désormais envoyer sans problème votre site Web sur votre serveur afin de le rendre accessible à tous !!
Si vous avez encore des questions ou si vous rencontrez des problèmes : le Bar à Nougat (forum de la Bnbox) est fait pour vous !!



Remonter Navigation rapide : Sommaire

Les écueils à un site Web

Tous les Webmasters vous le diront : sur son premier site Web on fait toujours pleins de bêtises. Sur son deuxième, on arrive parfois à faire pire, mais on fait souvent mieux. Certains Webmasters vont enchainer les sites pour ne faire plus que des erreurs acceptables. (au bout du centième essai bn_tongue) D'autres vont sans cesse concevoir des nouvelles versions de leur site jusqu'à ce qu'il soit... parfait ! Et il y a un troisième type de Webmasters : c'est vous ! Vous qui allez lire ce tutoriel et qui allez découvrir tous les écueils possibles et (in)imaginables à un site Web afin d'éviter les pièges qui vous guette mini_bn

Bon, je n'ai quand même pas la prétention de recenser toutes les bêtises Webmasteriques, mais j'espère que mes quelques expériences et réflexions pourront vous aider, débutant ou nous, à avancer toujours mieux et toujours plus vite bn_heureux

Pourquoi faire un site Web ?


Cela vous parait peut-être idiot, pourtant il est fondamental de vous poser cette question, enfin, disons que c'est mieux mini_bn En effet, en créant un site Web on peut avoir plusieurs buts (avoir le plus de visiteurs possible, gagner de l'argent, s'amuser, mettre ses connaissances à la disposition de tous, faire son travail de Webmaster) et la façon de travailler tout comme le contenu ou l'apparence d'un site varie énormément en fonction du but que l'on s'est fixé. On peut résumer cela ainsi :

Deux buts différents => Deux manières de fonctionner différentes


Je vous conseille de passer un petit peu de temps à réfléchir à cette question, parce qu'au final, si vous faites un site simplement pour vous amuser, alors tout vous est permis ! Mais si vous avez des projets plus précis, (un site sur les pandas par exemple) il sera surement plus intéressant de ne pas vous écarter, ni à droite, ni à gauche, de la voie que vous aviez prévu.
Pour vous aider, voici quelques questions-réponses qui pourraient vous traverser l'esprit mini_bn

Je veux faire un site, oui, mais pourquoi ?
  • Pour avoir un max de visiteurs ! C'est vraiment mon but... Je veux avoir des visiteurs, donc je trouve un thème qui conviendrait pour ça et enfin je créé un site.  Que ce soit par envie de gagner de l'argent ou pas, si je réussis, alors j'aurais surement de quoi subvenir financièrement aux besoins du site grâce à la publicité. Bref, Google, YouTube, Dailymotion ont commencé comme ça, pourquoi pas moi ?
  • Moi, c'est juste un site pour m'éclater... J'trouvais ça marrant de faire un design funky tout ça. Sur mon site, je parle de pleins de trucs, j'ai même mis un anim' flash un peu lourde. Bref, un peu comme ce boulet qui a créé la Bnbox, il s'est tellement diversifié qu'on se demande ce qu'il a pu penser lorsqu'il a créé tout ça bn_heureux Mais bon, ça à l'air de le faire marrer.
  • Pour mon boulot (ou mon association) on m'a demandé si je pouvais créer un site. J'ai quelques possibilités de libertés (ou non) mais bon, en règle général on me dit "fait ça", et moi bah... je "fais ça".  bn_hmm Cela dit, j'ai trouvé comment me venger : c'est moi qui code, donc je peux faire passer ma manière de penser là dedans bn_wink


Une autre question pour le moins importante que tout Webmestre qui se respecte devrait se poser. (disons que ça éviterai aux internautes que nous sommes de tomber sur des sites très pourris)
Qu'apporte mon site Web ? A ceux qui le visitent ou à moi... Qu'a-t-il d'original ? De mieux par rapport aux autres sites ?
A vrai dire, si je fais un site seulement pour moi ou quelques amis, le problème ne se pose pas : je suis libre comme le vent ! (ô joie) Mais bon, parfois il faut aussi penser à ses visiteurs... qu'est-ce qu'ils pensent du site ? Quelles pages visitent-ils le plus souvent ? D'où viennent-ils ? (un outil comme Google Analytics ou Xiti peut-être être très utile pour ça.) S'ils y sont accros peut-être qu'ils aimeraient que certaines choses changent, ou qu'il y ai des nouveautés... (d'où l'importance d'un livre d'or, d'un forum, des commentaires, d'un mini-tchat ou d'une adresse e-mail. (qui répond aux e-mails de ses visiteurs bn_tongue) C'est une mine d'or pour savoir ce que pensent ses visiteurs) Je peux me ficher totalement d'être original, mais bon, c'est toujours pas mal et puis, pourquoi faire comme tout le monde ? Et pourquoi se contenter de faire un site moins bien que les autres ? Pourquoi faire mon p'tit site à moi, c'est tout voilà ? (en appuyant bien sur les italiques !!!) Bigre, si d'autres on fait des super trucs, c'est que j'en suis capable aussi !!! Je pourrai rajouter cette fonctionnalité la à mon projet de départ, et puis ça, et puis...

A la fin de telles réflexions, on en arrive très souvent à vouloir faire quelque chose de génial ! Si bien qu'on en ressort avec une motivation décuplée et une vision bien plus nette de ce que l'on veut obtenir. Et si on se donne les moyens d'y arriver (et d'y réfléchir) on peut même aller au but. (et vous ferez des visiteurs heureux)
La Toile est un espace assez spéciale puisque tout le monde peut s'y exprimer, alors n'ayons pas peur d'explorer de nouveaux horizons et de sortir des bornes des limites. (bref, raz le bol des sites qui se ressemblent tous bn_big_smile)

J'espère vous avoir convaincu du bien fondé de ces questions préliminaires. (qu'il faut continuer à se poser même lorsque le site est en ligne) Maintenant, passons à ce qui fait le coeur d'un site Web : son contenu mini_bn

Le contenu d'un site Web


Eh oui, le coeur d'un site Web c'est son contenu ! C'est ça qui le fait vivre. "Contenu", c'est vague, et ça peut être plein de choses : article sur l'actualité dans le monde, cours de programmation, galeries de photos, ribambelle de designs, collection d'anecdotes ! Bref le contenu de votre site c'est ce pour quoi vous avez créé votre site.

Lorsqu'un Internaute surfe sur une page Web  pour en découvrir le contenu, si tout ce qui est autour est important, c'est néanmoins secondaire. En effet, si votre contenu est génial, on vous pardonnera tout le reste mini_bn (même un design orange et violet bn_tongue) Par contre votre "tout le reste" peut être génial, si votre contenu est nul, bah... vous n'aurez pas beaucoup de visiteurs bn_tongue

Je vous invite donc à réfléchir sur le mot-clef suivant :
VIDE

V comme Vide

document/atelier/web/chambre_vide.png
C'est l'une des plus grandes plaies des Webmasters ! On est tout feu tout flamme lorsque l'on créé son site, on a plein d'idées et puis au bout de quelques temps éh bien on abandonne ou on laisse trainer. Le résultat c'est que des tonnes de sites sur la toile se retrouvent avec des liens prometteurs "Cours d'XHTML", "Derniers jeux Nintendo", etc... qui ne mènent nulle part. En règle général, même si votre site est bien rempli par ailleurs, le visiteur lambda partira très rapidement quand même.
La Bnbox en est d'ailleurs un exemple concrêt puisque durant très longtemps les cours de programmation sont restés inachevés. La situation n'est toujours pas brillante, mais petit à petit... (enfin le pire c'est surtout la partie jeux vidéos pour l'instant bn_heureux)

Moralité : soyez modeste, créez un site à votre mesure. Ayez des idées folles, des élans de grandeurs certes, mais ne montrez aux visiteurs que des choses finis.
I comme Inutile

document/atelier/web/chambre_inutile.png
Les jeunes Webmasters sont toujours à la recherche du sujet accrocheur qui leur apportera plein de visiteurs. En général, ils choisissent un des thèmes suivants :
  • cours de programmation
  • tout sur Nintendo ! (ça fonctionne aussi pour les jeux vidéos en général)
  • tous les jeux en Flash !
  • Mangas mangas, j'aime les mangas !

La plupart du temps, le résultat est catastrophique car des tonnes de sites (très pourris pour la plupart^^) existent déjà à ce sujet. Le contenu du site devient alors inutile.

Je n'ai pas dit qu'il ne fallait pas faire de sites sur cette thématique. Simplement, si vous voulez vous lancer là dedans, il va falloir exceller mini_bn


Moralité : Trouver un thème qui vous plait, (comme ça vous éviterez le V bn_wink) si possible original et ciblé. (sauf si vous voulez faire comme moi et patauger dans les BN bn_hmm)
D comme Désuet

document/atelier/web/chambre_desue.png
Pensez à vérifier le plus souvent possible que les informations que vous communiquez sont véridiques et fraiches. On croise souvent des archives sur le net qui sont archifausses ! Les solutions consistent à préciser que c'est une archive ou à mettre à jour.

Moralité : Soyez attentif à la fraîcheur de votre site. ça se voit très rapidement quand le Webmestre n'a pas visité son site pendant 1 ou 2 mois, alors n'hésitez pas à créer des petits trucs pour montrer à vos visiteurs que le site est vivant. Ah oui et puis si vous faites perdurer votre site dans le temps, penser à corriger les fautes d'orthographe de votre jeunesse bn_wink



E comme Electrique

document/atelier/web/chambre_electrique.png

J'aurai aussi pu dire Agressif, mais ça commençait pas par E bn_tongue
Vous avez déjà visité des sites Web d'autrefois ? (d'y a 5 ans ça suffit) Fond blanc ou noir, avec du gros texte en rouge, des gifs multicolores de partout avec des effets javascript à s'arracher les cheveux... Bref si votre visiteur n'arrive pas à se concentrer sur votre contenu éh bien, on en revient au V bn_big_smile Le net a énormément évolué, il existe de nouveaux langages (notamment le XHTML/CSS) qui font que l'on peut créer très simplement de jolies sites et même de très jolies. (il suffit d'aller voir le Jardin Zen ou CSS Attitude)
De la même manière, les gifs clignotants et les pubs multicolores ne sont plus à la mode. Des annonceurs comme Google AdSense vous permettent d'afficher des pubs (vous rapportant de l'argent bn_wink) qui s'insèrent dans le design de votre site.

Je passe rapidement sur le phénomène "pub" car je compte y revenir un de ces quatre dans un autre cours. Je vous invite simplement à réfléchir à cet adage tout travail mérite salaire : la pub ne sert à rien si vous n'avez pas travaillé sur votre site mini_bn


Moralité : Pensez aux yeux de vos visiteurs car on ne revient qu'avec réticence sur un site agressif ! Couleurs, taille du texte, nombre et nature des images, pubs discrètes adaptez tout cela pour faire un ensemble harmonieux.


Vous avez désormais quelques pistes de réflexions pour améliorer le contenu de votre site, pensez au VIDE et votre site ne sera pas vide de visiteurs...
Hum... bref, suite à cette blague douteuse, passons à la suite.

Accessibilité


C'est un sujet extrêmement intéressant et vous trouverez sur le net de nombreuses pages abordant l'abordant en détails, vous prodiguant idées, conseils, réflexions... Pour ma part, je me contenterai de vous faire "méditer" sur 2 axes principaux : La sémantique et la navigation sur un site Web. (et si le coeur m'en dit, je ferai peut-être un autre article plus complet sur ce sujet)
Mais avant cela...
Qu'est ce que j'entends par Accessibilité ?

Lorsque l'on créé un site, il faut bien avoir en tête que nos visiteurs ne passent pas forcément leur vie sur Internet et que ce qui peut nous paraitre instinctif ne l'est pas pour eux. Il est aussi bon d'avoir une pensée (voir plus qu'une bn_wink) pour les personnes ayant un handicap et qui ont donc des difficultés pour surfer sur le Web. (Vous pouvez lire cet article d'Openweb. Mais pour donner un simple exemple, des aveugles vont sur Internet (c'est un outils bien pratique pour eux) mais puisqu'ils ne peuvent voir les pages, ils les écoutent à l'aide d'un lecteur d'écran comme JAWS. (vous pouvez télécharger une version gratuite de ce logiciel) Je vous laisse imaginer la difficulté de l'entreprise... pourtant vous pouvez leur simplifier la vie, éh oui.)
Mais l'accessibilité c'est aussi permettre à vos visiteurs d'avoir accès à tout votre site facilement. Ou encore de faciliter l'indexation de vos pages par les moteurs de recherche comme Google, Yahoo! ou encore Exalead.

Pour résumé l'accessibilité c'est être accessible par tous les types de visiteurs ce qui apporte en bonus track d'être accessible par les moteurs de recherche, donc d'être mieux indexés, donc d'être encore plus accessible, donc d'avoir plus de visiteurs... bn_wink

Maintenant, voyons comment être un peu plus accessible...
Sémantique => Accessibilité

Au début de mon cours sur la sémantique du XHTML/CSS (le XHTML/CSS est un langage de programmation.) j'ai mis la définition du Petit Larousse Illustré du mot "sémantique" :
Sémantique : n.f. (du grec semantikos qui signifie) Relatif au sens, à la signification des unités linguistiques.

Car c'est dans la manière de programmer votre site que vous allez pouvoir améliorer son accessibilité. Ce n'est pas de moi, c'est universellement reconnu et d'ailleurs Google a publié il y a quelques temps un document Conseils aux Webmasters qui est plus qu'intéressant ! (pensez donc ! C'est l'étude sur "comment sont codés les sites les mieux indexés" par le plus gros moteur de recherche du monde ! Google a fait beaucoup de constatations très intéressantes et qui montrent, entre autre, qu'un site bien codé est mieux référencé. Je vous invite très fortement à lire cet article.)
Oui mais voilà, qu'est-ce qu'un site bien codé ? Eh bien c'est un site qui est codé sémantiquement... Le langage le plus utilisé dans la programmation des sites Web est l'XHTML/CSS ou ses dérivés. (ancêtres ou progénitures bn_heureux) Or c'est un langage qui fonctionne avec des balises, et chaque balise a un sens bien précis, une signification, bref : une sémantique ! Bien sûr on pourrait utiliser ces balises n'importe comment, mais les utiliser convenablement, au bon endroit, pour les bonnes raisons, permet de rendre son site plus accessible :
  • Aux personnes avec des handicaps.
    Je parlais des aveugles tout à l'heure : les lecteurs d'écrans ne liront pas de la même manière un texte mis en gras (par la balise <strong></strong>) qu'un texte normal.
    Il existe aussi des logiciels permettant de naviguer à travers les titres (balises <hX></hX>) d'une page.
  • Aux moteurs de recherche.
    Ils peuvent avoir des informations précises sur votre site, et donner ainsi des résultats pertinents à leurs utilisateurs. C'est tout bénéf' pour vous bn_wink
  • A vos visiteurs "normaux".
    Si vous êtes prêt à travailler la sémantique de votre code, cela se ressentira forcément sur tout votre site Web. Et puis, en général, on arrive plus facilement à faire de beaux designs bn_heureux


Je vais vous donner quelques pistes pour bien coder votre site Web, mais sachez que vous retrouverez la plupart de ces idées sur le cours à propos de la sémantique du XHTML/CSS.
  • Un titre pertinent à chacune de tes pages tu donneras.
    Un titre qui retranscrit bien ce que les visiteurs pourront trouver sur chaque page. Vos visiteurs et les moteurs de recherche vous remercieront bn_wink
    Code :
    <!DOCTYPE html PUBLIC "-//W3 //DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
       <head>
           <title>Titre pertinent !</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
       </head>


  • Des balises à bon escient tu utiliseras.
    Je le dis, je le répète : chaque balise à un sens ! Il est idiot de mettre une balise :
    Code :
    <span class="important">Texte important</span>

    Alors qu'il existe une balise pour cela :
    Code :
    <strong>Texte important</strong>

    De même :
    Code :
    <!-- Exemple idiot voir stupide -->
    <p class="titre">Le titre de mon site !</p>
    <p class="titre_2">Le sous-titre</p>

    <!-- Exemple sémantique, correct si ce n'est intelligent -->
    <h1>Le titre de mon site !</h1>
    <h2>Le sous-titre</h2>

    Bref, un titre est un titre, un paragraphe un paragraphe, une liste une liste, etc. mini_bn

  • Un bonne utilisation des attributs alt="description de l'image" et title="description du lien/image" tu feras.
    Ces attributs guident vos visiteurs. (tout comme les moteurs de recherche)
    Lorsque vous utilisez title="" pour un lien, pensez à mettre le titre du lien puis sa description. (certains lecteurs d'écrans ne liront que l'attribut title="" et zapperont ce qu'il y a entre les balises <a></a>)
    Dans le cas de l'attribut alt="" (s'utilisant en général avec la balise <img />) sachez qu'il est lu par les lecteurs d'écrans et qu'il apparait à l'écran lorsque l'image ne veut pas s'afficher. (éh oui, des Internautes bloquant les images, ça existent encore... enfin plus trop quand même bn_tongue)
    Code :
    <!-- Exemple d'utilisation de title="" -->
    <a href="http://blouhibou.free.fr" title="Blouhibou - Un site perso bleu comme un hibou">
    Blouhibou</a>

    <!-- Exemple d'utilisation de alt="" et title="" -->
    <img src="http://la-bnbox.fr/document/exposition/2/militaire_bn.png" alt="Un BN militaire" title="Un BN militaire" />


    Ce qui nous donne :


  • Des recommandations du W3C (sur l'XHTML, le CSS, le RSS et pour les handicapés) compte tu tiendras.
    Encore une chose que j'aborde dans mon cours d'XHTML/CSS. Le W3C et l'organisme qui "dicte" les règles pour éviter que les navigateurs Web (ou les créateurs de langages) partent chacun de leur côté sans s'occuper des autres. C'est cet organisme qui fait que la Toile ne se déchire pas en 10 000 petits morceaux mini_bn Il publie des recommandations et surtout fixe les "standards du Web".
    Pour savoir si votre site est standard et pour le rendre standard, vous pouvez le faire tester automatiquement :
    - Validateur XHTML
    - Validateur CSS
    - Validateur RSS ou Atom
    - Validateur  WAI
    N'hésitez pas à demander de l'aide sur le forum.

  • Changer la taille du texte à tes visiteurs te permettras.
    Imaginez-vous dans votre vieille âge... Croyez-vous franchement que vous arriverez à lire la police Arial taille 10 de ces sites Web des années 2000 ? (je vous le souhaite bn_lol) Il est important de permettre à ses visiteurs d'augmenter ou de diminuer la taille du texte. Comment ça marche :
    Bnmaster a écrit :
    Vous pouvez agrandir ou rétrécir la taille du texte afin de l'adapter à votre vision. Pour cela, dans la barre de tâche de votre navigateur Web (Internet Explorer, Firefox, Opera ou un autre) cliquez sur Affichage (alt+A) puis Taille du texte et choisissez Plus grand ou Plus petit.
    Une autre solution consiste à simplement maintenir la touche Ctrl de votre clavier appuyée tout en jouant avec la molette de votre souris bn_wink Ce qui nous donne : Ctrl+Molette de souris

    Si vous possédez un navigateur récent (comme Firefox qui a pensé à tous les pauvres internautes qui avaient cassé leur molette de souris à force de joué avec... bn_sad) vous pouvez aussi faire Ctrl++ pour agrandir et Ctrl+- pour rétrécir. (sous Opera, il suffit simplement d'utiliser les touches + et -)
    Pour que vos visiteurs puissent faire cela, il suffit que vous mettiez la taille de votre texte en em ou en pourcentage. Le mieux c'est de la faire dans la propriété body du CSS.
    Code :
    /* Cette technique (avec cette valeur) fonctionne bien même avec IE. */
    body {
    font-size: 68.75%;
    }

    /* Ou bien */
    body {
    font-size: 1em;
    }

    Testez donc votre site avec différentes tailles de police pour vérifier que tout est lisible et accessible (surtout au niveau des liens), c'est bête, mais il faut y penser mini_bn

  • Ton site Web sans CSS tu testeras.
    Certaines personnes mal ou non-voyantes (ou autre) désactivent le CSS ou utilisent des navigateurs qui ne l'interprètent pas. Mais pourquoi ? Principalement afin d'obtenir une meilleur visibilité ou parce que le matériel qu'elles utilisent ne leur permet pas de faire autrement.
    Dans un autre domaine, la technologie permettant de surfer sur le Web à l'aide d'écrans très petit (Nintendo DS, PSP, portables, palms...) se développe de plus en plus. Or cette technologie interprète un peu différemment le CSS.
    Voilà pourquoi il faut tester son site Web sans CSS ou en émulant les petits écrans. (si vous utilisez Firefox, vous pouvez installer pour cela l'add-on Web Developer. Cette barre qui se place sous votre barre d'url, permet de faire plein d'autres choses, c'est extrêmement pratique et si vous êtes un webmaster "quotidien" vous vous en servirez surement... "quotidiennement" bn_heureux) Sur votre navigateur, en cliquant sur "Affichage" vous avez la possibilité de désactiver le CSS temporairement.
    En testant, vous vous apercevrez peut-être qu'il faut parfois faire défiler énormément la page avant d'arriver à ce qui est intéressant. D'où la nécessité des liens d'évitement dont nous parlerons bientôt ou mieux : de placer tout ce qui est "moins intéressant" à la fin du code, tout en gardant la même mise en page via le CSS bn_wink

  • Du Javascript (JS) point tu n'abuseras.
    11% des Internautes désactivent encore aujourd'hui le JS. (même si la montée en puissance d'AJAX tend à faire diminuer ce pourcentage) Mais vous imaginez bien les difficultés que peuvent avoir des personnes handicapés avec le JS. Et il faut aussi savoir que, pour l'instant les moteurs de recherches ne savent pas lire les liens entourés ou fait en JS. Embêtant n'est ce pas ?
    Donc utiliser le JS, c'est bien, mais il est conseillé de ne l'utiliser que pour des "gagdets", des choses non-nécessaires, et d'apporter si possible une alternative.

  • De Flash bon usage tu feras.
    Je passe rapidement la dessus, car, en fonction du site que vous voulez faire, Flash peut-être très utile (voir la seule technologie utilisée) ou très déconseillé. Une petite lecture et je n'en dirai pas plus bn_heureux



Voilà ! J'ai conscience d'être passé très très très vite sur de nombreux points mais mon but pour l'instant est d'être très global. Vous trouverez sur le net (cf : fin de l'article) de nombreux sites allant beaucoup plus dans les détails. Et puis n'oubliez pas que pour toute question, le forum est votre ami bn_wink


Navigation sur un site Web

Permettre à des visiteurs de naviguer simplement sur un site Web, voilà tout le travail d'un Webmaster. On pourait aussi dire : comment lutter contre le Je clic, je quitte des visiteurs. Et cela en pensant à tous les types de visiteurs, sans oublier ces chers moteurs de recherche. Bref : tout un programme !
Encore une fois, voici une ribambelle d'idées et de réflexions :
  • La règle des 3 clics.
    document/atelier/3_clics.png
    Une règle qu'on oublie trop souvent. Elle consiste à faire en sorte que, pour aller d'un endroit à un autre sur un site, un visiteur n'ai que 3 clics de souris à faire. C'est en général le nombre de clic qu'est prêt à faire le visiteur lambda pour trouver une information avant de... quitter bn_sad
    C'est une règle difficile à appliquer mais qui apporte pourtant beaucoup. Toutes les idées suivantes permettent (entre autre) de tendre vers la règle des trois clics.

  • L'importance du menu.
    C'est le meilleur des guides que vous pouvez donner à vos visiteurs. On le retrouve sur tous les sites, mais il n'en reste pas moins difficile à concevoir. En effet, peut-être rêvez-vous d'un magnifique menu qui pétille lors du passage de la souris, ou que sais-je encore... On a vu que les moteurs de recherches ne savaient pas encore lire le code JS (or le menu est l'une de leur plus grosse source d'information), et de la même manière la déco peut empêcher le visiteur de comprendre le menu, ou ne pas lui donner envi de cliquer.
    Le mieux c'est d'avoir un menu qui retrace toutes les parties principales de votre site, et pour ne pas perdre les visiteurs il vaut mieux qu'il n'y en ai pas plus de quatre. A vous de voir si vous voulez rajouter des sous-parties, et tant que ça reste lisible : n'hésitez pas ! (les addicts de votre site vous remercieront, même si vous courrez le risque de perdre un tout petit peu les nouveaux arrivant)

  • Raccourcis claviers.
    Ils permettent d'accèder aux pages imporantes du site (accueil, recherche, contact, plan du site...) via les touches du clavier. Pour cela il faut utiliser le lien suivant :
    Code :
    <a href="index.html" accesskey="numeroduracourci" title="Accueil - La Bnbox ! Créateur de sourires">Accueil</a>

    La bonne blague c'est que, pour y accéder il vous faut utiliser les touches de votre clavier : Alt+Shift+Numéro du raccourci clavier (visiblement les concepteurs de navigateurs n'ont pas réussi à trouver plus compliqué, désolé bn_hmm)
    Voici un article (assez critique bn_heureux) sur AlsacréationS sur les "normes" pour les numéros à utiliser.

  • Liens d'évitements.
    Ce sont des liens placés en haut de la page (en général) qui permettent d'aller directement au contenu du site, d'aller au menu, d'aller au bloc recherche. (et parfois de retourner à la page d'accueil) Très utile pour les malvoyants ou les utilisateurs de petits écrans. Le principe est de placer une ancre sur la page et de faire pointer un lien vers cet ancre. (#recherche ou #menu ...)
    On peut aussi placer des liens Retour en haut en bas de chaque page via les ancres. Ces liens sont peu utilisés mais indispensable pour les personnes ayant des difficultés à remonter tout en haut de la page.

    Un petit exemple :
    Code :
    <!-- J'en ai profité pour mettre des accesskey. Eh oui ça fonctionne aussi avec des ancres -->
    <a href="#contenu" title="Aller directement au contenu du site" accesskey="s" id="haut_page">Aller au contenu</a>
    |
    <a href="#menu" title="Aller directement au menu du site" accesskey="4">Aller au bloc recherche</a>

    <!-- Plus loin sur la page -->
    <div id="contenu">
      Contenu du site

      <div id="recherche">
        Bloc recherche
      </div>

      <a href="#haut_page" title="Retourner en haut de la page">Haut de la page</a>
    </div>


  • Navigation par tabulation.
    Sur les bons navigateurs (bn_roll) le visiteur a la possibilité de naviguer à travers les liens via la touche tab du clavier.
    Le mieux est de tester vous même votre site en essayant de ne pas utiliser votre souris. Vous pouvez numéroter l'ordre des liens à l'aide de l'attribut tabindex="" si c'est nécessaire. Comme ceci :
    Code :
    <a href="lien1.html" tabindex="1">Lien n°1</a>
    <a href="lien2.html" tabindex="2">Lien n°2</a>

    L'utilisation de cet attribut pour les liens prête à discussion. Si vous en avez vraiment besoin utilisez-le, sinon, éh bien ce n'est pas franchement nécessaire.
    Faites attention à ce qu'il n'y ait pas de conflit avec les tabindex="" que vous utilisez pour les formulaires. (indispensable eux par contre bn_heureux)


  • Fil d'Arianne.
    C'est un petit ajout bien utile et bien utilisé. En effet un fil d'Arianne permet aux visiteurs de se repérer sur le site ! (comme le "Vous êtes ici !" sur les cartes des villes bn_tongue) Voilà à quoi cela peut ressembler :
    document/atelier/arianne.png

    Avec ça, le visiteur peut naviguer facilement sur le site, et en plus ça lui donne envie de fouiller un peu : "mais quelle était donc la page qui menait vers celle-ci ?" bn_big_smile
    La conception d'un tel fil est un peu délicate. Soit vous le faite manuellement sur chaque page. (c'est un peu lourd, mais j'en connais qui l'ont fait... bn_rollbn_lol) Soit vous avez codé votre site en PHP (ou équivalent) et alors, éh bien... il suffit de réfléchir un peu, c'est délicat mais pas compliqué bn_wink (dans un prochain cours peut-être que...)

  • Liens de navigation rapide
    Tout comme le fil d'Arianne les liens de navigations rapides ont de multiples avantages : ils sont un repère pour le visiteur, ils l'incitent à visiter d'avantage le site, ils sont utilisés par les moteurs de recherche pour référencer les différentes pages d'un site.
    En général ce sont des liens du style : sommaire, article suivant, article précédent, un article au hasard.



Bon, éh bien rien qu'avec tout ça, vos visiteurs ont déjà moins de chance de se perdre. Mais souvenez vous du E de VIDE : électrique, agressif. Si vous en fait trop alors cela risque d'avoir l'effet inverse de celui escompté.
N'hésitez pas à donner vos idées à ce sujet si vous en avez.

Pour finir, voici une petite annexe avec plusieurs liens à propos de tout ce dont j'ai parlé. (je la complèterai au fil de mes découvertes bn_wink)

Annexe


En annexe voici une liste de liens parlant en particulier d'accessibilité et de standardisation. Bonne lecture bn_wink



Bon éh bien nous en avons fini avec tout ces écueils. Je vous souhaite de ne pas vous échouer bn_wink
Bien sûr tout n'a pas été dit ici, alors si vous avez des questions, des remarques des idées : commentez donc cet article, ou allez remplir le forum ! bn_tongue
Remonter Navigation rapide : Sommaire
Ce cours est en cours de rédaction bn_tongue
  • Auteur : Bnmaster
  • Créé le : 29/08/2006
  • Modifié le : 21/05/2007

Ailleurs sur la Bnbox

Ailleurs sur la Toile

Mini-tchat

?

TheGeeKyKy tergiverse : Lolololololololololololololololololollololllololol Le 09 décembre, 15h03 via Boite Jeux vidéos

ok proclame : Qui aurais une carte mentale sur Mr Forestier de Bel-Ami svp? Le 09 décembre, 14h11 via Fiches sur les personnages ...

ok griffonne : Salut Le 09 décembre, 14h10 via Fiches sur les personnages ...

kc,vd,,d,d,bmd , proclame : Kepogkeogkov,me,rjijprthjprthjpibrpihjprthjpejbprjhpojehomiegootgjitjhihjthithjtihjijpithjpithjpgtphjprjrbjijithjtikgkjirjgkktekfok'otyjgigjjvnvbgorofpeflpkgorjojfirjijrikfpez^lpqldlptjgiehfhgidhjifhgizhgiegiejfifjrifjfpefpgptkhpn497th,bjhorgkrok(orhkorhorhjorhj,ojrohjohhjrojhorgokpefkephkokfephlkeokep^zl^xl^zfgpkgpkpvk Le 08 décembre, 19h16 via Mathématiques

mamou murmure : Mamou 278 Le 08 décembre, 11h48 via Fiches sur les personnages ...

II-LASALLE-II bafouille : Cite de merde qui deg Le 06 décembre, 13h03 via Résumé - Les Fourberies De ...

Dranreb dit : Merci pour le résumé des Fourberie de Scapin ! Mais pourriez-vous faire relire le texte par un élève de CM2 pour qu'il corrige la douzaine de GROSSES fôtteu qu'il contient ? Ça serait bien ! Le 05 décembre, 14h15 via Accueil

la perle des ocens chuchote : Hum Le 04 décembre, 18h03 via Fiches sur les personnages ...

bruh s'exclame : On 3+4 pas nous ?! Le 04 décembre, 8h19 via Résumé - Le Médecin Malgrè ...

1% déclare : C'est moi à 99% Le 03 décembre, 12h48 via Résumé : Le Tartuffe de Mol...

la mouche proclame : Je suis un bourdon Le 03 décembre, 11h52 via Résumé : Le Tartuffe de Mol...

meuh bafouille : 85+
3---9339=12
Le 30 novembre, 17h53 via Résumé scène par scène - Le...

1234 scribouille : D Le 26 novembre, 12h17 via Fiches sur les personnages ...

Akuu s'exclame : Yo Le 24 novembre, 16h09 via Résumé : Andromaque

oui chuchote : Voila Le 23 novembre, 19h15 via Résumé : Andromaque

arif tergiverse : Trop facile Le 22 novembre, 18h53 via Résumé - Le Médecin Malgrè ...

Tibo proclame : Damn les gens Le 19 novembre, 13h53 via Résumé - Le Médecin Malgrè ...

BERENICE bafouille : SALUUUUT Le 16 novembre, 20h55 via Accueil

kenfirstar s'exclame : Salut Le 16 novembre, 17h02 via Accueil

kenfirstar murmure : JE SUIS NOUVEAU ALOR SALUT SAVA Le 16 novembre, 16h19

kkljlk chuchote : Yoloooooooooooo Le 15 novembre, 20h15 via Fiches sur les personnages ...

crousthibax gribouille : Findus Le 14 novembre, 16h59 via Résumé : Andromaque

lol1256 murmure : Toi meme Le 11 novembre, 18h33 via Accueil

Douae doudi s'exclame : Lettres de mon moulin.le secret de maître corneille résumé Le 11 novembre, 12h22 via Résumé - Le Secret de Maîtr...

lol1234 dit : Je pense que j'ai raison Le 09 novembre, 21h04 via Fiches sur les personnages ...

... bafouille : J'ecris quoi au juste Le 08 novembre, 20h23 via Résumé - Les Fourberies De ...

vine écrit : Uh i never went to oovoo javer Le 08 novembre, 17h40 via Résumé scène par scène - Le...

rodrigue scribouille : Get out my poem Le 08 novembre, 17h17 via Résumé scène par scène - Le...

whats up écrit : H3y Le 08 novembre, 17h16 via Résumé scène par scène - Le...

Real Madame chuchote : Hey ladies Le 08 novembre, 17h15 via Résumé scène par scène - Le...

fake madame bafouille : Stregganona Le 08 novembre, 17h15 via Résumé scène par scène - Le...

jjj griffonne : Yo this class whack Le 08 novembre, 17h14 via Résumé scène par scène - Le...

jjj scribouille : SHvshvhscv Le 08 novembre, 17h14 via Résumé scène par scène - Le...

jjj bafouille : Mjjj

Le 08 novembre, 17h13 via Résumé scène par scène - Le...

hja tergiverse : Bonjour

je ne comprends pas la démonstration par récurrence de la suite de Fibonnacci de l'exemple 2
Le 07 novembre, 9h54 via Raisonnement par récurrence

Salut c qui ?? gribouille : 3+4 Le 04 novembre, 22h13 via Résumé - Le Médecin Malgrè ...

Gros zizi gribouille : Merci comme sa je vait lire le livre? Le 04 novembre, 21h52 via Résumé scène par scène - Le...

Theo écrit : Super Le 04 novembre, 10h21 via Résumé : On ne badine pas a...

momi proclame : Mdr Le 02 novembre, 19h29 via Résumé : L'Avare

kwj scribouille : Hjjj Le 30 octobre, 9h44 via Résumé scène par scène - Le...

GG tergiverse : Comment cv Le 28 octobre, 19h19 via Résumé : L'Avare

gh bafouille : Ugit Le 28 octobre, 18h08 via Résumé - Les Fourberies De ...

jule s'exclame : Cv? Le 26 octobre, 18h32

jule proclame : Hey Le 26 octobre, 18h31

popo déclare : Salam tout le monde
mini_bn <3
Le 26 octobre, 16h26 via Biographie et Bibliographie...

jujujujuju chuchote : Bonsuir
je me suis égaré sur ce site mdrr
Le 26 octobre, 14h31 via Résumé : La Promesse de l'a...

apprendre :) murmure : T chelou toi bn_big_smile
bn_neutral
Le 25 octobre, 20h21

jaja77 gribouille : Je délire, je suis entrain de me parler toute seul.
bn_big_smile mini_bn bn_wink
Le 25 octobre, 20h18

jaja77 tergiverse : Ouais et toi ?
bn_yikes
Le 25 octobre, 20h16

jaja77 scribouille : ça va bn_big_smile Le 25 octobre, 19h29

Publicité



©Bnbox (Infos) - Cahier de l'élèves - Atelier webmaster - Boîte à Nuts - Bar à Nougat - Plus ou moins valide XHTML 1.0, CSS 2, RSS 2.0
Flux RSS