13 février 2008
Comment débuter sur internet
Bonjour à tous !
Comment débuter sur internet ?
Facile : on peut faire un "blog" (celui-ci en est un exemple). C'est à la portée de tout le monde, il n'y a qu'à cliquer sur les options qui sont proposées. Au début, on patauge un peu, et il faut de la patience avant de comprendre la logique du bidule, mais il n'y a rien à apprendre de spécial. Nous reparlerons du Blog dans une autre rubrique.
Créer un vrai site internet, c'est à peine plus compliqué.
Un site, c'est tout simplement un ensemble de pages, qui contiennent chacune quelques objets (texte, image, son, boutons, liens, vidéo...), et dans lequel on circule en cliquant sur des liens.
Donc en fait, il suffit de savoir faire une page. Ensuite, on en fera plusieurs, liées ensemble. On mettra le tout sur un ordinateur d'accueil (voir la rubrique "hébergement") et si on veut, on y mettra ce qu'il faut pour que tout le monde puisse le trouver, par exemple avec Google ou Yahoo (voir la rubrique "référencement").
Et voilà, c'est tout !
Créer sa première page
Comment créer sa première page ?
Les pros vous diront que le plus simple, c'est de l'écrire en HTML. Oups, ça commence mal. C'est quoi, HTML ? Bon, allez, très vite: c'est le texte que vous voulez afficher, écrit tout bêtement au clavier, mais garni de signaux assez simples qui diront à votre "navigateur" (le bidule qui affiche cette page sur votre écran), par exemple:
- ici commence un nouveau paragraphe (le signal, dit "balise", sera : </P>)
- ici, il faut souligner (balise <S>)
- ici, on arrête de souligner (balise </S>)
Pour en savoir un peu plus, voyez notre rubrique "le HTML, c'est quoi ?". Attention tout de même : si le principe est simple, et que le "bloc-notes" de Windows suffit pour travailler, il faut pas mal de pratique avant de maîtriser les "balises" diverses et leurs subtilités. Comme souvent, faire des choses simples, c'est simple, mais dès qu'on veut réaliser des choses un peu évoluées, ça se complique vite. Que cela ne vous décourage pas cependant si vous voulez vraiment vous perfectionner.
Utiliser le "Word" habituel ?
Eh oui, c'est possible, et ça marche: vous prenez votre texte word, vous faites "enregistrer sous -> format html" , et pouf, c'est fini. Essayez pour voir en cliquant sur votre document (qui s'appelait essai.doc, et qui s'appelle maintenant "essai.htm"). Bon ça marche, mais c'est très pénible pour utiliser proprement le résultat et le rendre accessible à tout le monde sur le web (voir rubrique "hébergement").
Editeurs HTML
Heureusement, il existe des tas de logiciels qui sont faits spécialement pour créer des pages html, et qui fournissent un document beaucoup plus "propre" : Frontpage, Pagemaker, etc.
Nous avons choisi NVU
D'abord parce qu'il est facile à utiliser (les commandes ressemblent beaucoup à celles de Word), qu'il fait un travail assez "propre", et qu'en plus il est gratuit. Et si on veut vraiment aller plus loin et apprendre le HTML, il permet de "rentrer dans le code" pour voir comment ça marche.
La plupart des pages du site ce-cetim-senlis.com ont été réalisées avec NVU.
Vous pouvez le télécharger gratuitement à cette adresse :
http://www.01net.com/telecharger/windows/Internet/editeur_de_site/fiches/29699.html
C'est gratuit et facile à installer !
Bon, assez bavardé: faites votre première page et revenez pour la suite!
Héberger votre site
Faites héberger votre site !
Héberger ? Pourquoi ? il n'est pas bien chez moi ?
Bon, vous avez créé votre première page, ou plusieurs pages, ou tout un site, parfait. Il marche bien, super. Il n'y a qu'un problème : vous seul pouvez le voir. Pour que tout le monde puisse le regarder, il faut:
- qu'il soit sur un ordinateur à caractère public, mis à la portée de tout le monde.
- que cet ordinateur soit tout le temps en service, jour et nuit.
L'hébergement, c'est ça: vous allez simplement installer une copie de votre site sur un ordinateur "hôte" ou "serveur", ou "hébergeur", enfin, une machine qui sera tout le temps au service de tous. Il existe des milliers d'endroits capables d'accueillir votre site.
Commençons par le plus simple : les "pages perso"
Votre fournisseur d'accès vous offre probablement la possibilité d'héberger des "pages perso". C'est souvent une possibilité gratuite, renseignez-vous. Il y a cependant quelques limitations: des pages perso ne sont pas faites pour faire du commerce (c'est généralement interdit). Le nom du site n'est pas très sympathique (style "mespagesperso.chez.leserveur.com", vous n'avez pas de statistiques de fréquentations, etc.
Mais c'est largement suffisant pour s'amuser, ou faire une jolie maquette de site.
Le jour où voulez faire un vrai site...
...avec un vrai nom et des possibilités plus étendues, vous pourrez toujours changer... mais ce sera payant. Les prix pratiqués sont très variables. Le moins cher des payants, à notre connaissance, est OVH, qui offre des prestations très correctes pour une vingtaine d'euros par an.
Comment on installe le site sur l'hébergeur ?
Bon...ça dépend... de l'hébergeur. Certains ont des "interfaces Web" : une page web vous permet d'installer toutes vos pages, les images etc, comme si vous les installiez sur un autre disque ou sur une clé usb, mais pas toujours de façon très pratique.
D'autres exigent le protocole de transfert "ftp". C'est plus rapide, mais barbare.
Il existe des logiciels gratuits qui permettent de transférer le site sur le serveur, très facilement, comme si on copiait d'un disque à un autre. Nous avons testé AxelFTP, rudimentaire, mais sympa pour débuter, et finalement, nous avons choisi FileZilla, qui est très pratique, performant, et gratuit en plus. Vous pouvez le télécharger sur
http://www.01net.com/windows/Internet/ftp/fiches/17966.html
... et prochainement ici...
Plein d'autres pages, qui s'enrichiront aussi de vos remarques :
- Comment effectuer les liens entre objets pour que tout se passe bien ?
- Comment se défendre contre les pirates du web (spams, phishing, virus, spyware...)
- Les astuces "pas prévues dans la notice"
- et surtout l'ajout des pages "multimedia"
etc., etc., etc. Ecrivez-nous !
- Ce sont vos questions qui enrichiront le site,
- Ce sont vos réponses qui résoudront nos problèmes !
Où trouver des illustrations visuelles ou sonores ?
Il existe plusieurs types d'illustrations possibles, à mettre sur une page web, et principalement :
- les images (videos, images animées, photos, fonds de page, boutons illustrés, etc.
- les sons (bruitages ponctuels, fonds sonores, sons ponctuant une action...)
- les animations (des dessins qui traversent l'écran, qui suivent le mouvement de la souris, des bandeaux défilants, etc).
Insérer une photo qu'on a faite soi-même, c'est assez facile.
Mais s'il s'agit d'une image "haute définition", il faut la dégrader... parce que votre visiteur n'attendra pas 20 minutes
que tous les points lui soient livrés. Il faut donc généralement "dénaturer" un peu l'image: si possible, la réduire aux dimensions qui seront celles affichées sur l'écran (une image qui couvre TOUT l'écran mesure (pour le commun des mortels) environ 1000 x 600 "pixels" (le pixel, c'est un point de l'image, si vous regardez l'écran à la loupe...). Une définition de 75 ou 150 est suffisante pour le web (300 maxi, si vous pensez que le visiteur voudra imprimer la photo). 75 quoi ? 75 pixels par pouce. Ah, ces anglosaxons...
Pour retravailler vos images, le "Paint" de windows peut suffire. Nous vous recommandons Photofiltre, logiel simple et gratuit, qui vous rendra bien des services. Vous pouvez le télécharger sur
http://www.01net.com/telecharger/windows/Multimedia/photo_numerique/fiches/21756.html
Faire soi-même des images animés ou manipuler les sons, certains le font... mais ce n'est pas toujours nécessaire
. Vous en trouverez des tonnes sur le Web, tout prêts !
Où trouver des illustrations sur le Web ?
Il y en a un peu partout, mais voici mes préférés. Si vous en voulez d'autres, ou si vous en avez d'autres, dites-nous !
- http://www.informatiquegifs.com/
- http://www.csenergie.qc.ca/st-sauveur/Lucie/GifsAnimes/ListeGifsAnimes.html
- http://www.csenergie.qc.ca/st-sauveur/Lucie/MenuMusique.html
- http://www.memoclic.com/sons-wav/
- http://www.toutpourlamusique.com/samples/bruitages/signaux/home.htm
- http://www.toutpourlamusique.com/samples/bruitages/animaux/home.htm
- http://www.yakeo.com/fr/webmaster/
- http://www.animationplayhouse.com/new/symbols3.html
- http://www.quigif.com/
- http://corigif.free.fr/
16 février 2008
Quickplace mieux que Quickplace
Le Quickplace de votre entreprise : on peut faire mieux !
Si vous avez lu notre page sur les blogs...
Eh bien Quickplace, c'est un peu comme un blog, du moins pour la construction: on choisit parmi des formules imposées, on fait des pages, et on partage de l'information. Mais la comparaison s'arrête là: Quickplace est surtout pratique pour mettre à la disposition du visiteur, des documents à télécharger. C'est un outil de "mise à disposition", pas un moyen de dialogue.
Si vous avez vu quelques pages de Quickplace, il faut se rendre à l'avidence: ce n'est pas très joli, pas très vivant, bref, du point de vue de l'agrément, ça ne vaut pas le web.
Et pourtant, avec quelques astuces "pas forcément prévues dans la notice", on peut lui en faire dire, des choses, à ce Quickplace ! En fait, nous avons bien exploré ses possibilités, et notre conclusion est claire: on peut mettre sur un Quickplace tout ce qu'on met sur un site web. Et en plus, garder les qualités du "produit" pour le stockage, l'archivage, le téléchargement de documents. C'est-y pas beau ?
Alors, pourquoi la plupart des sites quickplace sont-ils si tristes ? Simplement parce que les conceptueurs ne l'utilisent que dans ses options "de base". Un simple exemple: au lieu de créer une page en tapant un texte standard, avec les limites du standard, on peut la remplacer par une "page web importée". Ah ben voilà, tout de suite, ça s'éclaire !
La plupart des qualités de la page web sont alors conservées, avec quelques limites, mais on apprend vite à les contourner. Autrement dit: pour faire un beau Quickplace, il faut :
- savoir créer une page web (voir ce chapitre)
- savoir créer une page Quickplace (voir l'Informatique... ou nous)
- et connaître quelques petites recettes pour lier la sauce (consultez-nous).
Le minimum est de savoir utiliser le Quickplace "de base" quand c'est pour ranger des documents à télécharger, mais de passer au plus vite à la page importée, si on veut agrémenter le bidule.
Pour dire jusqu'où on peut aller... un exemple "au hasard" : voyez le site du C.E. de Senlis sur Quickplace (Intranet, Infos, IRP, C.E. Senlis).
Là, on a fait "fort" en exploitant "à fond" toute la galerie des astuces : non seulement on a importé des pages web, mais en plus on y a directement "incrusté" les pages du site www.ce-cetim-senlis.com. L'avantage, c'est que tout en gardant les possibilités d'y archiver nos documents, on évite de mettre le site Quickplace à jour : toute mise à jour de notre site web est immédiatement visible en Quickplace.
Quand je vous disait qu'on peut aller très loin, avec ce qui, au premier abord, ressemblait plutôt à un tracteur poussif...
Vous voulez des détails ? Ecrivez-nous !
17 février 2008
le référencement
"Référencer" son site ???
Référencer son site, c'est le faire identifier par des moteurs de recherches (Google, Yahoo, Altavista, MSN...), l'inscrire dans des annuaires ou des sites internet privés (par exemple faire figurer une maison d'hôte dans le site de l'office du tourisme du coin), etc.
Le but est simple : si des gens qui ne vous connaissent pas, cherchent quelque chose que vous proposez, ils doivent pouvoir vous trouver. Evidemment, s'ils vous connaissent, c'est facile: on tape Cetim, on tombe sur le site du Cetim. Mais si on tape "essais de fatigue", il faut non seulement tomber sur le Cetim, mais en plus il faut, si possible, que le Cetim apparaisse sur la première page, et pas sur la 54ème, après tous ses concurrents. C'est facile à dire, moins facile à faire.
Le Web est parcouru sans cesse par des robots qui cherchent à capter les sites "intéressants" pour leurs clients. La plupart des consultations se font d'ailleurs par des robots: il suffit de regarder les statistiques d'un site pour voir que plus de 90% des consultations durent moins de 3 secondes. Si c'est des visiteurs, ils sont drôlement rapides ! Ainsi donc, Google et bien d'autres vous cherchent tout le temps. Autant dire qu'il est presque aussi difficile de rester invisible que d'être très visible.
Etre ou ne pas être visible ?
Pour se rendre invisible, il faut glisser dans le site des objets particuliers (interdictions diverses), et dans chacune des pages des commandes spéciales pour que les robots n'y aillent pas, voire leur tendre des pièges pour qu'ils s'en aillent, dégoûtés (par exemple des liens qui n'aboutissent à rien, ou qui bouclent sur eux-mêmes). Faute de quoi on se fait vite repérer. Nous avons essayé: il faut moins de 24 heures !
Pour se rendre visible
La "visibilité" dépend de plusieurs facteurs :
- du site lui-même : on peut y glisser différentes aides pour que les moteurs vous repèrent, explorent les différentes pages, et y trouvent matière à nourrir leur index avec les morts significatifs. Cela peut suffire: il suffit d'attendre, les moteurs auront vite fait de vous répérer.
- d'une démarche volontaire : vous pouvez déclarer l'existence de votre site auprès des annuaires, des moteurs ou d'autres sites, en leur "demandant" de vous rendre visite pour vous inscrire. Il existe des logiciels qui vont solliciter des centaines d'indexes pour vous y inscrire.Vous pouvez aussi chercher par vous mêmes, ou confier ce travail à un prestataire, qui vous demandera n'importe quoi entre 3 euros et 6 000 euros... regardez un peu, c'est affolant !!! Si votre site subit des changements majeurs, pensez à re-solliciter les référenceurs, pour qu'ils viennent au plus vite voir les nouveautés.
De nombreux sites vous proposent de vous indexer gratuitement sur différents moteurs (parfois des centaines). Sur des annuaires, aussi, mais en principe, on vous demande alors en échange de mettre un logo sur votre site pour créer un lien réciproque. A vous de savoir si vous acceptez 25 logos "partenaire" en bas de votre page d'accueil...
Etre "BIEN" visible
Un référencement de qualité doit permettre de vous trouver en posant les questions qui doivent vous faire apparaître, et si possible parmi les premières réponses. Bien sûr, cela ne se fait pas en cinq minutes. Il faut y passer du temps. Les moteurs n'aiment pas trop les sites qui se font référencer par des logiciels, ils "préfèrent" de loin un référencement manuel, bien conforme à leur logique particulière. Certains posent même des questions pièges pour vérifier qu'ils ont un opérateur humain en face d'eux.
Beaucoup acceptent volontiers une inscription gratuite, mais traiteront (évidemment) beaucoup mieux leurs inscrits "payants". Un moyen sûr de gagner des places dans le classement. On trouve aussi des logiciels qui poseront différentes questions significatives à divers moteurs, pour vous dire, en moyenne, en quelle position vous apparaissez. Avec un peu d'entraînement, cela peut aider à "gagner" des places.
Enfin, les annuaires et les moteurs aiment bien les "célébrités" : ils traitent beaucoup mieux les sites qui sont très fréquemment mentionnés dans d'autres sites (donc connus) : plus vous avez a de liens avec d'autres sites, mieux vous serez traité : on comprend mieux ainsi la pratique des "liens croisés" que beaucoup souhaitent : "cite-moi, je te cite, et on sera plus visibles !"
Pour en savoir plus, il existe un guide gratuit fort bien fait, que vous pouvez télécharger gratuitement au format pdf à l'adresse suivante : http://www.guide-referencement.com/
Enfin, il existe des adresses pour faire référencer un site gratuitement (mais elles sont de plus en plus rares...) :
19 février 2008
Sommaire
Et tout d'abord, rappelons que vous n'êtes pas obligé de connaître le HTML pour créer un site internet, et encore moins un blog.
Mais bon, quand on apprend à conduire, on lève tout de même le capot pour voir ce qu'il y a dessous... et donc voici le sommaire de notre "introduction au HTML..."
Les balises
Structure générale d'une page HTML
... ce que vous voudrez: nous attendons vos commentaires !
21 février 2008
Le HTML, c'est quoi ?
Disons le en deux mots !
La définition officielle du HTML, selon Wikipedia, c'est (accrochez-vous, ne partez pas tout de suite) :
Le Hypertext Markup Language, généralement abrégé HTML, est un language informatique de balisage conçu pour écrire les pages web, et notamment pour créer de l'hypertexte, d’où son nom. HTML permet aussi de structurer sémantiquement et de mettre en page le contenu des pages, d’inclure des ressources multimedia dont des images, des formulaires de saisie, et des applets.
Bon, on s'arrête là, assez rigolé. Pour vous montrer à quoi ça ressemble, mieux vaut vous faire une "pierre de Rosette":
Vous trouverez donc ci-dessous:
- un petit extrait de page web
- la manière dont ça s'écrit en HTML (la "source"), avec, en bleu, les commentaires qui vous expliqueront comment ça marche. Vous verrez, ce n'est pas très compliqué.
Et si maintenant vous n'avez pas envie de "plonger dans le code", ce n'est pas bien grave : voyez nos articles "Créer sa première page"... (et vous décourirez NVU) et "Faites un Blog" (et vous découvrirez Canalblog).
Que ce soit avec NVU ou Canalblog, vous créez des pages sans rien connaître au HTML, mais en appuyant sur un bouton ("source" pour NVU, "< >" pour Canalblog), vous le verrez, ce code HTML qui a été généré...
Avant d'attaquer les exemples, ajoutons que sur toute page web, en cliquant sur le menu "Affichage" du navigateur, puis sur "Source", vous voyez le code (mais d'accord, ça peut faire peur).
Vous trouverez aussi des tas de cours HTML en français sur le WEB. Par exemple, vous voulez apprendre à faire un tableau en HTML ? Dans Google, tapez "html tableau", et vous trouverez des exemples commentés.
A présent, notre fameux exemple, puis son explication:
(Noter: cet exemple comporte 4 "lignes": un titre, un dessin, un texte, un tableau).
Notre page exemple
Voici un petit dessin sympathique, un morceau de texte et un petit tableau tout bête :
| 1 | 2 |
| 3 | 4 |
Et voici le code correspondant, ligne par ligne (avec, en bleu, les explications):
<p><font face="Arial" color="#000066" size="2"><strong>Notre page exemple</strong></font></p>
traduction: <nouveau paragraphe><police type Arial, couleur = "bleu foncé" (on trouve la valeur sur des tableaux) taille=2><en gras> le texte <fin pour le gras>,<fin pour cette police>,< fin de paragraphe>. ça va, on suit ? à présent, l'image.
<p><img src="ordinateurs.gif" ></p>
traduction: <nouveau paragraphe><image qui s'appelle "ordinateurs.gif">(j'ai juste un peu simplifié l'adresse, mais ça suffirait)< fin de paragraphe>.
<p><font face="Arial" color="#000066" size="2">Voici un petit dessin <strong>sympathique</strong>, un morceau de <u>texte</u> et un petit tableau tout bête:</font>
traduction: <nouveau paragraphe><police type Arial, couleur = "bleu foncé" taille=2>. Voici un petit dessin <je passe en gras>sympathique, <j'arrête le gras>qui vous montrera quelques exemples de travaux sur un <je souligne>texte<j'arrête de souligner> et un petit tableau tout bête:<fin pour cette police>.
<p ><table border="2"><tbody>
traduction: <nouveau paragraphe aligné au centre><tableau avec bordure de 2 pixels><voici le tableau>
<tr><td>1</td><td>2</td></tr>
traduction: <nouvelle ligne><nouvelle case> 1 <fin de case><nouvelle case> 2 <fin de case><fin de ligne>
<tr><td>3</td><td>4</td></tr>
traduction: <nouvelle ligne><nouvelle case> 3 <fin de case><nouvelle case> 4 <fin de case><fin de ligne>. Pas difficile.
</tbody></table></p>
traduction: <fini le tableau><je ferme le tableau><fin de paragraphe>.
Et voilà, je suis sûr que vous arriveriez à faire un tableau !!!
Bon courage !
Bien sûr, tout n'est pas aussi facile, et si on veut faire des trucs un peu compliqués, ça devient vite compliqué aussi, mais vous avez l'essentiel du principe.
24 février 2008
1 - Les "balises" HTML
(Nb.: tout ce qui suit est un peu simplifié, mais illustre bien les principes).
Le HTML n'est pas à proprement parler un "langage de programmation". Un document HTML est en fait composé d'un ensemble d'éléments visibles (ce qui est affiché) et des balises qui n'apparaîtront pas à l'écran, mais pour l'essentiel, servent à définir la mise en page.
Considérez en première approche que le "navigateur" qui affiche la page, interprêtera les balises à mesure qu'il les rencontre, sans jamais revenir en arrière.
Ces balises vont souvent par paires. Par exemple:
- <I> = ici commence quelque chose en italique
- </I> = ici finit le quelque chose en italique
Tout ce qui se trouve entre ces deux balises apparaîtra à l'écran... en italique.
- Une balise s'écrit entre les 2 signes <...>
- Une balise qui s'écrit </...> marque la fin d'un événement précisé précédemment (exemple ci-dessus)
- le contenu de la balise <...> n'apparaît pas à l'écran.
Une balise particulière qui vous sera utile au début :
<!-- votre commentaire --> : ceci constitue une ligne qui ne sera pas prise en compte par le navigateur, et contiendra vos remarques personnelles. Eh oui, c'est une des rares exceptions à la règle ci dessus! : celle-ci ne va pas par paire, le début "<!--" et la fin "-->" se trouvant pour une fois réunis (c'est rare!).
Quelques exemples de balises :
- <B>... </B> ce qui est entre ces balises sera en gras
- <Table>...</table> : entre ces deux balises est défini un tableau
- <script>..</script> ; entre ces balises, un morceau de programme écrit dans un autre langage
Une remarque importante: vous avez compris que les balises marchent un peu comme des parenthèses. Pour une raison de logique, il vaut mieux éviter de "croiser" les parenthèses, parce que, pour vous, le code deviendrait vite illisible, et même le "navigateur" risque vite de s'y perdre. Vous imaginez le bazar dans un tableau si vous ouvrez une nouvelle ligne avant d'avoir fermé la précédente ! Et donc, prenez l'habitude d'écrire par exemple :
- <B> texte en gras<S> texte en gras souligné </S></B>
- et non : <B> texte en gras<S> texte en gras souligné </B></S>
En ce qui concerne les (nombreuses) balises qui existent, nous ferons un lexique détaillé, si vous voulez !