Projet d’une page Web

Ce document est surtout une base de travail pour permettre de créer au mieux sa page perso.

Réalisé en Janvier 2020 par F5BQV Pierre Schuster

Il recense les différentes étapes réalisées lors de la mise en place du projet, montre les erreurs commises et corrigées, les règles à appliquer, ainsi que certaines questions que l’on peut se poser.

Objectif : mettre en ligne une soixantaine de documents rédigés au cours des années passées.

Ces documents sont des aides mémoire pour me permettre de réinstaller un programme, une application et surtout de conserver une trace de la procédure utilisée ainsi que le paramétrage effectué.

Certains documents ont été rédigés pour aider des amis (RA ou pas)

Comment se compose cette page

- Une entête rappelant l’objectif de la page, ainsi que les instructions pour se déplacer dans cette page. (header)

-Un corps contenant un tableau (body)

-Pas de pied de page (footer)

Le tableau est constitué de 4 colonnes, objectif l’indexation par les moteurs de recherches je le pensais …

-Domaine Centre d’intérêt

-Date Année de rédaction du document

- Document Descriptif de la fonction ou nom d’une application

-Lien Lien vers le document par un double clic (pdf ou html)

Réalisation

Ci-dessous, la description des différents cheminements, tâtonnements et tests pour arriver à la mise en place d’une page Web en local.

Pour mémoire il est impératif que tous les éléments constituant et référencés dans cette page résident tous dans le même dossier.

Réalisation sous Windows 10

Dans un premier temps utilisation de Microsoft Excel (Version 2007)

-en tête, tableau, et bas de page sur le même feuillet, des difficultés rencontrées pour animer l’en-tête, ajouter photo, par contre facilité à réaliser le tableau.

Dans un second temps même réalisation avec LibreOffice Calc Non concluant, problème d’ancrage des images.

Ensuite utilisation de Microsoft Word (version 2007)

Création de l’entête plus simple qu’avec Excel.

Le tableau étant constitué sous Excel (avec ses Hyperliens) par un copier/coller ce tableau est incorporé au document. Ensuite on oublie Excel, les manipulations et enrichissements se font avec Word.

Incorporation des consignes de déplacement en tête du tableau, ainsi que date, version et auteur.

Puis sauvegarde du document en « ma_page.html filtré »

Clic sur fichier «ma_page.html » , le navigateur Internet s’ouvre ainsi qu’une page presque Web s’affiche.

C’est assez basique, il faut y incorporer de l’animation.

-ouverture du fichier «ma_page.html » par l’éditeur de texte de Windows (Bloc-notes ou autre)

Objectif :

1- Faire défiler une chaine de caractères. (de droite à gauche)

2- Faire clignoter une chaîne de caractères.

Localisation du texte à faire défiler ajout de la balise <marquee> dans les paramètres d’affichage de la chaîne de caractères.

Localisation de la chaine à faire clignoter (« blink » non supporté en HTML4)

Ajout d’un script Java remplissant la fonction de clignotement (trouvé sur le Net et adapté).

-Sauvegarde

-Tests c’est ok

Ouverture à nouveau par Word, seulement une partie de l’en tête s’affiche et plus rien derrière, ce qui signifie que le coding ajouté pour animer n’est pas supporté par Word.

Par la suite, il sera nécessaire d’effectuer des mises à jour dans le tableau, ajout ou suppression de domaine, idem pour les programmes et les liens Hypertexte.

Cette impossibilité de modifier le tableau par Word impose que le tableau soit dissocié du coding d’en-tête, il faut considérer ce tableau comme un cadre.

La solution (non retenue pour le moment) ajouter dans le script d’en-tête une balise < iframe > pour amener dynamiquement un cadre (tableau) , les instructions de fin de page n’ont plus raison d’être visible puisque l’on reste dans la même page.

Suite à ces modifications, pour modifier le script d’en-tête, utilisez le Bloc-notes (Win-Word est hors course), par contre, le tableau peut être modifié à loisir : seul impératif que tous les documents et script se trouvent dans le même dossier.

En pratique

Un fichier entête. docx converti en entête.html (filtré)

Un fichier « Inventaire.docx » converti en « Inventaire.html » (filtré)

Résultat un fichier « index.html » après fusion du code des 2 objets (copier/coller) par Bloc-Notes de Windows, il y a des balises <html> et </html> à déplacer.

Tester cette page

Disposant d’un Raspberry Pi3 , relié à mon réseaux local, j’ai installé Apache , cette machine devient donc un serveur (local) Internet.

Sur un des Pc Windows 10, Installation de FileZilla (permettant le transfert FTP)

Bien entendu il y avait d’autres solutions pour mettre en ligne sur le Raspberry cette page, mais rien ne vaut une bonne répétition avant d’aller sur un serveur Web.

Hébergement

Recherche d’un site pouvant accueillir les pages perso, tentative chez « Free.fr » cette mise à disposition pour les Clients ne semble plus disponible (information obtenue au bout d’un mois).

Recherche d’un autre hébergeur, j’ai trouvé LWS, très réactif, fournissant de bons conseils, site non gratuit, mais totalement abordable pour des pages perso.

Après obtention des codes (après paiement) il est possible d’accéder à son compte ainsi qu’à la fonction d’accès au serveur.

Création d’un nom de domaine ce qui entraine la mise à disposition du chargement sur le site hébergeur.

L’outil de transfert FileZilla ayant été testé auparavant, le transfert vers le serveur LWS ne pose aucun problème.

Voir Note1

Le référencement

La version 1 étant accessible depuis différents navigateurs, cette page n’étant pas encore référencée par un ou des moteurs de recherche (accessible seulement en entrant sons adresse http://f5bqv.fr il faut se pencher sur le référencement, quelques recherches sur Internet permettent de trouver un site permettant d’effectuer gratuitement ce référencement sur un grand nombre de moteurs, (c’est merveilleux…) Pourquoi ne pas essayer … 10 jours après rien n’a bougé, ma page n’est toujours pas référencée, le gratuit c’est pas toujours sérieux …

Pour obtenir un référencement, il semblerait que ça se fasse dans le temps, à partir du moment où des accès ont lieu sur cette page. (wait and see, 15 jours rien de nouveau…)

Il faut trouver une solution commençons par Bing

Référencement par Bing (c'est le moteur de recherche par défaut de Microsoft Internet Explorer, Edge) et aussi Yahoo qui s’appuie sur le moteur Bing.

- Aller sur bing.com http://www.bing.com/toolbox

-S’identifier avec son compte Microsoft ou son compte Google

- Nouvel écran choisir ajouter un site

Remplir ce qui semble utile URL obligatoire sous la forme //http://monsite.fr

Puis clic sur enregistrer

-Un nouvel écran demandant de récupérer le fichier « BingSiteAuth.xml » (il est dans le dossier téléchargement du pc)

Retourner sur le dépositaire de son site FileZilla et transférer vers le dossier de la page ce fichier nommé BingSiteAuth.xml contenant la clé.

-Retour sur la page Bing Webmaster clic sur Vérifier si Ok continuer.

Modifier son fichier « index.html » de la page (celui qui est en sauvegarde sur le PC) .

Ajouter une ligne <meta> contenant la clé obtenue précédemment

Recharger par FileZilla l’index.html sur le site

Rajouter aussi ce <meta> sur les fichiers de sauvegarde.

Ça semble efficace, utilisation des moteurs de recherche « Bing » puis « Yahoo » la page est bien référencée, le contenu n’est pas encore indexé. (Wait and See) .

Idem pour DuckDukgo et Qwant la page est connue.

Suite à des modifications sur le nom de fichiers, Il est possible de revenir sur Bing webmaster pour recharger le fichier « sitemap.txt » ou « sitemap.xml »

Référencement par le moteur de recherche de Google.

Ouvrir un navigateur Chrome ou Firefox

-S’identifier avec son compte Google (il faut avoir un compte gmail.com)

Aller sur https://search.google.com/search-console/

- Nouvel écran choisir ajouter un site

Remplir ce qui semble utile URL obligatoire sous la forme //http://monsite.fr

Puis clic sur enregistrer

-Un nouvel écran demandant de récupérer le fichier « google__________.html » (il est dans le dossier téléchargement)

Retourner sur son site (FileZilla) et transférer vers le dossier de la page ce fichier nommé google__________.html contenant la clé.

Cette clé permet de vérifier la propriété du site, et de continuer.

Voir note2

-Retour sur la page Search Console clic sur Vérifier si Ok continuer.

Modifier son fichier « index.html » de la page (celui qui est en sauvegarde sur le PC)

Ajouter une ligne « meta » contenant la clé obtenue précédemment

Recharger par FileZilla l’index.html sur le site.

Rajouter aussi ce <meta> sur les fichiers de sauvegarde.

Une tentative pour obtenir un texte plus parlant que celui affiché par le moteur de recherche, c'est-à-dire les premières lignes de la page, j’ai placé juste avant ces lignes un texte non affichable contenant des mots clés pouvant faciliter le référencement et l’indexation (affaire à suivre). Pour certains moteurs c’est le <meta description> qui apparaît.

Indexation

Il n’y a plus qu’à attendre que le SEO travaille.

Des conseils trouvés sur internet pour augmenter les chances de référencement.

Balise <title> donner plus d’informations

A la place de « F5BQV_Page »

Mettre  <title> Page_Aide_mémoire_de_F5BQV

Balise <meta> description remplacer site Radio amateur F5BQV Pierre Schuster Muzillac

Par  : <meta name="description" content="Cette page
 contient une compilation des aides mémoire rédigés
 lors de réalisations et d'utilisations dans le domaine Radioamateur,
 effectuées au cours des années par F5BQV, Pierre Schuster, Muzillac">

Ajout d’une balise <h1> devrait rajouter des mots clés pour l’indexation (affaire à suivre).

Le Titre du document Word (l’entête) a été enregistré comme une balise <h2>

Solution effectuer les corrections

-créer une balise <h1> dans le header qui reprend le titre du document

-modifier la balise <h2> dans le body changer éventuellement le texte mais aussi la fonte.

Désormais au revoir Word pour les modifications sur le « *docx ».

Evolution

Après la V1 de la page il faut passer à la V2, c'est-à-dire tenir compte des remarques des visiteurs pour améliorer, pour mémoire j’ai utilisé WinWord version 2007 pour construire la page.

Des remarques :

- les caractères trop petits.

- le non centrage de l’affichage (sur des écrans très large), Word ne permettant pas le centrage lors de la conversion en « html ». Il est possible par la suite d’ effectuer ces mises en forme (entre autre) en rouvrant de fichier « html » par Word, une gêne le coding devient de plus en plus pollué par des paragraphes de « style » en commentaire.

Il faut trouver une autre solution pour modifier plus aisément ce code html.

La version gratuite de « BlueGriffon » permet ces modifications, le programme travaille en « WYSIWYG » , ajouter des marges, déplacer des objets, modifier des Hyperliens, c’est possible.

Néanmoins l’utilisation de Wordpad est encore de mise, par exemple BlueGriffon ne semble pas permettre de changer une taille de police sur l’ensemble de la page, donc ligne par ligne dans le code, il ne faut pas y penser, Wordpad ou Notepad feront ça très bien sur le code html.

Dans les pages créées par Word et converties le signe « == > » lors de l’affichage en html est remplacé par « é » (pas avec tous les Navigateurs)

Solution lors de la rédaction d’une future page html, insérer une image sous la forme cette image nommée « fleche.png » a été crée par un logiciel de dessin.

Malheureusement lors de la traduction automatique dans une langue différente du français cette « fleche.png » ne se trouve plus placée au bon endroit.

Ajout d’une adresse eMail sous forme d’image (non copiable par les robots).

L’incorporation du code html de l’objet « inventaire » dans le code de l’objet « index » étant plus contraignant, je suis revenu temporairement à l’utilisation de « iframe » (incorporation dynamique du cadre «Inventaire »). Les 2 objets se trouvent totalement indépendants, lorsqu’il y aura moins de modifications à apporter, je reviendrai à une seule et unique « frame », il n’y aura plus qu’un seul ascenseur.

Création d’un « sitemap.xml » incorporé dans le dossier sur le serveur du site.

C’est la liste de tous les hyperliens contenus dans la page (adresse complète)

Soumettre ce sitemap par bing toolbox et aussi par search.google . Voir Note3

Adoption temporaire de la frame unique.

Après être passé par l’utilisation d’appel dynamique de frames, je me suis rendu compte que le référencement patinait les pages document ne sont pas vues par le SEO, le nom du document ne s’affiche pas que ce soit en html ou pdf.

Un test de référencement par Bingbot signale trop de balises <h1> et code html trop long.

Google signale pas adapté aux appareils mobiles

Il a fallu faire un choix.

Normalisation

Pour éviter des erreurs sur le nom d’objet il est important d’adopter des normes.

Le nom du lien (nom du document) devant être référencé ne doit comporter que des chiffres ou des lettres (sans accent), éventuellement un espace ou un souligné.

Les documents en html seront toujours suffixé «.html » et non «.htm » (c’est la même chose sauf pour les robots).

Lorsque la normalisation est appliquée après la publication du site, il en découle un grand nombre de pages non trouvées voir erreur 404

Questions à se poser

Faut-il publier les pages en pdf ?

L’affichage de la page est parfaitement formaté, identique à ce que l’auteur a voulu.

Le zoom est directement disponible.

L’indexation semble plus complexe

Cette page ne peut pas être traduite directement.

Le changement d’Hyperlien nécessite de repasser par une modification du document d’origine *.docx , avant de le publier en *.pdf (version gratuite d’Acrobat Reader DC).

Faut-il publier les pages en html ?

L’affichage de la page est directement dépendant de la taille de l’écran ou du cadre (frame) attribué à cet affichage.

Le zoom passe par une fonction du navigateur.

Indexation plus efficace (meta)

Cette page est directement traductible depuis le Navigateur « Google Chrome ». ou « IE »

Le changement d’Hyperlien est directement possible par Wordpad ou autre éditeur de texte.

Pour voir comment mieux référencer ces pages voir Contenu page

Note1 : Après un rechargement d’éléments sur le site (en ftp), il est obligatoire, lors du retour dans son Navigateur d’en vider le cache, pour chaque demande de page modifiée, actualiser le contenu de l’écran permet d’effacer l’ancienne page qui est encore conservée en mémoire cache (cela ressemble à une mise à jour non effectuée). Dans certains cas il faut nettoyer l’historique de son navigateur.

Note2 : Il nécessaire lors d’une utilisation ultérieure de Google Search Console, de refaire la validation de propriété.

Note3 : Pour afficher directement certaines pages, (objets en pdf,wmv,mp4) sans passer par la case « Enregistrer sous » il a été nécessaire d’adapter mes différents navigateurs Internet (Chrome, Firefox, Explorer, Edge, pas testé avec Safari) .

Pierre Schuster le 30 janvier 2020

Choix nouveau document http://f5bqv.fr