036a.

 II - ÉLABORER MES PAGES WEB ?

            Élaborer une page web, autrement dit une page en langage html, qui pourra se lire grâce à un navigateur sur la toile mondiale (le net), et surtout dévoilera de nombreux hyperliens, donc des références accessibles d’un clic de souris... est l’objet de ces pages
Il va s'en dire que certaines connaissances en informatique sont recommandées, du moins des prérequis simplifiés, afin de ne pas trop se disperser !

Comment opère-t-on ?

 A)  Tout écrire soi-même les codes dans des scripts grâce à un programme texte simple comme Notepad++ ou Wordpad, ce qui implique des connaisances accrues en informatique !
B)  Se servir d’un programme adapté en Wysiwyg, c’est-à-dire que l’on tape sur le clavier ce qui apparaît à l’écran en facilitant notre tâche ; deux types d’éditeurs de pages web existent : commercial et payant ou bien gratuit et libre (open source).
C) Faire appel à un organisme, la plupart du temps commercial, pour nous aider à configurer des pages web : e-monsite.com, Wix, 1&1, OVH, Wordpress.... Certains offrent leurs services bénévolement. De toute manière il existe une version gratuite mais toujours réduite au plus simple.  Dans la catégorie apparaît les CMS (éditeurs html en ligne, online) mais le maniement devient plus délicat.
Nous choisirons la deuxième formule qui offre alors divers modèles parmi les gratuits :
Expression Web ; Blue Griffon, Sea Monkey ; Namo Webeditor v6*.  Cela constituera votre première expérience...
L’ultime programme cité n’existe plus sur le marché, mais demeure quand on a la chance de le posséder, terriblement pratique et convivial !
D'autre part, pour envoyer vos "trouvailles" sur internet, dans la toile mondiale, et étoffer vote site web, le protocole FTP est indispensable ; Filezilla et Total Commander vous sont d'un très grand secours ! Oui, ils sont indispensables ! Tout simplement...

pin_red.gif square65_green.gif - Le premier élément important à la base est le plan du site : quoi dire ? les thèmes généraux ? les options futures ? la trame globale des pages html ? l'architecture générale de vos pages ? Voilà bien le premier barrage à surmonter : bien cerner les diverses branches de recherche, alléger le travail de l'internaute. Notre conseil : tracer au crayon les diverses étapes dans l'élaboration de vos pages, le plan du site, la structure de votre sommaire, les diverses options prévisibles... bref, écrire vraiment sur le papier le canevas de votre site. Mieux vaut prévoir d'autres options éventuelles, même si elles ne sont pas suivies d'effet.
Nous arrivons alors au premier élément à façonner :
la page d'accueil (ou de démarrage) de votre site, dans laquelle viendra nécessairement le cybernaute au premier chef ! Elle doit impérativement offrir les multiples choix dès la première découverte ; l'internaute aura ainsi toute liberté d'action... mais le menu de travail doit apparaître à l'écran. Vous notez les mots mis en relief, souvent en caractères gras ou bien soulignés, voire en hyperlien, le clic provoquant la venue d'un autre document, ici une nouvelle page web, à savoir un exemple de page d'accueil située dans votre ordinateur. Remarquez la couleur en bleu typique de l'hyperlien à cliquer, mais elle ne ressort pas nécessairement.
Voilà le tout premier travail que vous pouvez fort bien réaliser dans votre machine. Il permet d'accéder à
vos propres références, et non vers celles des autres ! En un mot, vous possédez là vos multiples informations personnelles à portée de souris ! Cette page demeure un exemple bien entendu. Libre à vous d'agir comme bon vous semble, quand vous vous sentirez plus agile dans la procédure. Cette page reste spécialement dédiée à la machine en votre possession et demeure personnalisable au plus haut point.

pin_red.gif square66_green.gif - La deuxième attitude consiste à trouver le titre du site auprès d'un hébergeur, le serveur qui hébergera précisément les répertoires et fichiers inhérents à votre site. Lui seul vous indiquera si vous avez le droit de "porter" le nom du site : par exemple <monsite-perso> ou encore <mes_pages-web>, si ce n'est peut-être <pagesweb–Azur>...
Choisir un titre percutant n'est pas trop chose aisée. Vous trouverez ensuite le
choix de l'opérateur : ainsi, <monsite-perso.sfr.fr> ou bien <mon_siteperso.free.fr>, ou encore <mon-site-perso.orange.fr>... selon votre choix d'origine.
Vous pouvez demander cette option auprès de votre
FAI (fournisseur d'accès à internet) qui vous la fournit gratuitement mais dont la grandeur peut varier selon le prix ; un autre opérateur peut agir de la sorte, comme Online, Gandi, OVH, 1&1, Openclassroms, jimdo ; Free.
Vérifiez bien la grandeur
du futur site web par rapport à vos projets : 25 Mo, 300 Mo, 5 Go ou 10 Go ?  Le dernier nommé fournit gracieusement 10 Go d'hébergement mais la consultation des directives devient indispensable. Sachez que l'hébergeur conservera son nom dans l'énoncé du site, c'est la rançon de la gratuité !
Profitez de l'occasion pour créer un deuxième mél réservé à votre site, dédié par conséquent à cette seule fin. Vous pouvez opter de ne pas choisir votre opérateur préféré. Plusieurs formules s'offrent à vous.

 pin_red.gif square67_green.gif - La troisième démarche concerne la disposition des pages. En effet, les pages d'un site n'ont pas grand chose à voir avec un livre ; ce dernier se lit du début à la fin d'une manière linéaire en général. Dans un site en revanche, on va et vient, on bouge assez souvent de lien en lien, et donc de page en page mais pas forcément à la suite ! En effet, l'hyperlien bondit de ligne en ligne, de mot en mot, de dossier en dossier... grâce à la marque de l'extension du fichier : <monsiteperso.html>, <ma.famille.pdf>.
Le travail d'impression sur imprimante demeure toujours dans les fichiers web une difficulté parce que la disposition des pages ne correspond nullement avec 'votre aperçu avant impression' ! Il faut être vigilant à ce propos, puisque l'intérêt même de la page internet ne trouve son apogée que sur... la toile mondiale, ne donne sa pleine puissance que sur le Net, n'est pas destinée en principe à se lire sur le papier !
En conséquence, quelques divergences flagrantes surviennent lors de l'impression, qui en revanche dans les fichiers en .docx et .pdf prend tout son sens. La commande Aperçu avant impression est ici de rigueur si l'on veut éviter le "hachage" des pages.
Se rappeler le format maximal d'une photographie visible par l'oeil humain sans déformation : 1280 x 768.  Une page html comprend en général un écran et demi du moniteur.

On rencontre également fréquemment sur la toile d'autres fichiers : <liste-jeux.pdf>, <install.exe>... Nous n'entrons pas davantage dans le monde technique :  "Adobe Acrobat Reader" lit le fichier du programme gratuit si connu en pdf, dont la particularité fort précise et tant précieuse est de fournir à lui seul tous les éléments d'un document, en docx par exemple : images, signes, schémas, textes, logos, tableaux... etc. rassemblés dans un unique fichier ! Voilà la raison de sa présence très fréquente dans le monde de l'internet.
Force est par conséquent de préciser les choses : autant vous êtes libres dans l'organisation et l'agencement au cœur des répertories, dossiers et fichiers, autant dans
l'écriture de ces éléments vous devez absolument vous contraindre, ne serait-ce que pour l'internaute qui lirait votre ouvrage avec un ordinateur moins moderne, oui, à concevoir ces dénominations sans problèmes. En conséquence, les noms ne doivent pas avoir d'
accents graphiques, de caractères spéciaux, d'entrelignes... : <ma_cherie.txt>, <ces-eleves.docx>, <la.selection.htm>...
mais de grâce pas de "trou", <le site de mon père> est à exclure, préférez <le-site-de-mon-pere.pdf>. Tout emplacement doit être comblé ; retrouvez vos fiches de travail d'initiation à l'informatique !

pin_red.gif square68_green.gif - Le quatrième point important se rencontre sur le net : avons-nous le droit d'emprunt de photos, images et textes ? À notre niveau - et si la source est citée noir sur blanc - il est possible de choisir des documents pédagogiques pour nos pages. Il faut absolument joindre les références à côté des sources, ou du moins les éléments choisis en amont. C'est une question de simple politesse envers autrui. On recommande la création d'une page spéciale nommée à la racine du répertoire principal "mentions légales" où nous expliquons notre tâche et notre charte de travail avec les précautions d'usage.

pin_red.gif square69_green.gif - La cinquième mesure arrive lors de téléchargements. Cette activité devient sur la toile mondiale mais aussi dans la messagerie monnaie courante, à savoir télécharger un logiciel, une image, une application, une page web... bref, ce qui peut illustrer un site internet de bonne facture.
Nous vous mettons en garde contre l'éventuelle arrivée de piratage, virus, spams, pourriels et autres petites bestioles ! Un antivirus est indispensable avant toute manœuvre ! Au moins, effectuer un contrôle via des
utilitaires de sécurité est une priorité absolue.

Un site internet se constitue également par l'apport d'autres "trouvailles" rencontrées ça et là sur la toile. Il est commode de se constituer un dossier dédié à ce genre de tactique - nommé par exemple "sauvnet", "telecharg" ou "copnet"... vous y placerez les fichiers destinés principalement aux pages de votre site, que vous aurez pris la précaution d'organiser parfaitement : ainsi, <telecharg\images\..>, <telecharg\logos\..>, <telecharg\symboles\..>... ainsi de suite. À éviter absolument des noms à consonance anglaise !

Un petit mot à propos de la copie d'écran. Cette pratique de chargement est salutaire pour certains d'entre vous qui n'ont pas toujours sous le coude une image prête ou un dessin particulier. Copier à l'écran rend service et un outil dédié à cet usage est le bienvenu. Notre choix se porte sur FastStone Capture devenu à présent commercial mais on trouve sur le net précisément une version ancienne en français gratuite. De la sorte, vous vous simplifiez l'organisation du travail ultérieur.
Quelques fiches récapitulatives seront à consulter à portée de main pour les raccourcis ou bien les caractères particuliers en écriture. Nous vous renvoyons aux prérequis de base. Des fiches récapitulatives en informatique sont à posséder sous le coude ; on ne peut tout connaître !

pin_red.gif square70_green.gif - Le sixième aspect d'un site internet réside dans la pratique quotidienne de la mise à jour, ou si l'on s'exprime autrement la sauvegarde de ses données, les actualiser et les optimiser, d'abord dans votre propre machine puis et surtout sur la toile ; n'oubliez pas de procéder à la rectification du site lui-même via le protocole FTP , afin que son actualisation soit effective sur le Net. Toutes les 4-5 minutes semble être une fréquence correcte de sauvegarde !
La plateforme FTP  devient indispensable quand on désire envoyer sur la toile ses propres données de notre notre web. Le programme Total Commander est d'une aide incroyable car il offre le visionnement de deux disques, sur la gauche votre disque source et sur la droite le disque dans le cloud où se trouvent vos pages web. Le transfert se déroule par conséquent de la  gauche vers la droite, et ce directement en un clin d'oeil !  Bien entendu les codes actifs vous sont fournis par votre opérateur (utiilisateur et mot de passe).

pin_red.gif square70_green.gifsquare65_green.gif  - La septième disposition requiert la création d'une redirection. Qu'est-ce à dire ? Le transfert d'un fichier, dossier ou élément de page web vers une autre, avec ou bien sans temps de pause, pouvant aller jusqu'à la non perception par l'internaute, qui ne se rend compte de rien. Ce procédé permet la mise à jour par exemple de nouveaux éléments : page web, adresse url, nom de dossier... etc. Plusieurs tutoriels favorisent ce changement par l'insertion d'un code : trucsweb - tutothèque . Voir aussi fiche 037a. §7/13 du cyberseniors.

Une merveilleuse attitude nous est donnée par les deux éditeurs Namo Webeditor v6 et Blue Griffon : Ils offrent à la fois la création du fichier en *.htm .html mais aussi un doublon en *.bak, ce qui facilite grandement l'attention du webmestre dans sa mise à jour, lors d'un contrôle ultérieur.
 Il ne reste plus qu'à supprimer ces fichiers .bak après correction.

 

Voilà donc quelques notions plus précises sur la création d'un site web. Rien ne remplace l'expérience sur le terrain ou plutôt au museau de la souris ! L'activité en groupe sur l'ordinateur vous donnera davantage d'éclairage et le travail en sera facilité.

Cliquez pour découvrir la suite... 

Une autre manière d'aborder le sujet sur la création du site web vous est donnée sur l'icône ci-contre  .

Vos interrogations sont les bienvenues