historique du site 2005 - 2020

Historique du site www.favreber.ch de 2005 à 2020

B.Favre; 07.01.19; Version 1.0 04.04.2020; chapitre 01, page 1 / 17

Chapitre 10

Historique du site www.favreber.ch2005 - 2020

Le PDF est téléchargeable ici:

www.favreber.ch/radotage/downlaod/chapitre_10.pdf

Les logiciels / utilitaires pour le WEB sont ici:

www.favreber.ch/downloads/web_utilitie_favre.zip



2 Sommaire3 A propos de ce document3 L'évolution du WEB entre 2005 et 20204 Éditeur HTML, pages statiques5 Système de Gestion de Contenu (CMS) pages réactives.7 Manuel d’utilisation du convertisseur PDFtoHTML.8 « Free PDF to HTML converter » Manuel d’utilisation 1/3.9 « Free PDF to HTML converter » . Conversion des images 2/310 « Free PDF to HTML converter » Conversion des extensions 3/3.11 Réaliser une page interactive avec « MccHTMLMapper ». 1/412 Réaliser une page interactive: mode d'emploi, image 2/413 Réaliser une page interactive: mode d'emploi, Item 3/414 Réaliser une page interactive: mode d'emploi, HTML export 4/415 Historique du site www.favreber.ch.16 Les outils de création du site www.favreber.ch.17 Réalisation d'une page web simple17 Réalisation d'une galerie d'images17 Réalisation d'un récit

Sommaire



A propos de ce document

Ce document est un recueil d’informations, un pense-bête, un four tout. Ilconcerne la création et la gestion du site « www.favreber.ch » ces quinzedernières années.

On y trouve aussi des manuels d’utilisation pour la conversion des PDF anHTML, d’image interactive, d’installation de Wordpress ou de l'environnementPython etc.

L'évolution du WEB entre 2005 et 2020



Éditeur HTML, pages statiques

1 De 2005 à 2020 le site a été créé et géré par des éditeurs HTML de typeWYSIWYG tel que Frontpage, Nemo, Microsoft Expression Web, Kompozeretc.

2 En 15 ans, 5 éditeurs différents ont été utilisés. Le passage d’un éditeur àl’autre, dans les deux sens, s’est déroulé sans perte d’informations et sansdérangements de la mise en page.

3 Ces logiciels sont des applications qui tournent sous Windows ets’installent comme une application Windows.

4 Pendant le développement, les pages / le projet et les fichiers joints sonthébergés localement chez le concepteur web. Google et consorts ne peutpas piller le savoir-faire. D’autre part, la cessation des activités d’unfournisseur de logiciel ne cause pas la perte d’un site web.

5 La prise en main de ces logiciels est assez aisée, les interfaces graphiqueset la terminologie étant relativement homogènes.

6 La création et l’édition des pages et simple et efficient. Que ce soit pourécrire du texte, insérer des images (Drag-and-Drop), des tableaux, desliens, etc. L’éditeur montre la page telle quel sera vue par l’internaute.

7 Le concepteur web a une liberté totale sur le graphisme et le contenu de laPage.

8 Ces éditeurs créent des pages statiques, c'est-à-dire qu’elles ne s’adaptentpas aux différents terminaux utilisés par les internautes (moniteursd'ordinateur, smartphone, tablettes, télévision…).

9 Les pages statiques ne nécessitent pas de base de données de type SQLou autres, ou du langage PHP. Ces pages peuvent être hébergées partoutsans problème.

10 Une page statique ne nécessite pas de Script Java ou de Plugin extérieur,cela est un gage de sécurité.

11 Une page statique est un document qui contient tout, elle est directementtéléchargée (Download) du fournisseur d’accès vers l’utilisateur.

12 La sauvegarde ou le téléchargement (upload) vers le fournisseur d’accèss’effectue en déplaçant ou en copiant des fichiers ou des dossiers.



Système de Gestion de Contenu (CMS) pages réactives.

1. Début de 2020, une étude a été lancée sur l’opportunité de rendre le site« www.favreber.ch » réactif. La réponse est mitigée. La diversité et lenombre de « systèmes gestion de contenu » ( CMS) place le concepteurweb devant un choix difficile.

2. Les différents CMS gèrent les projets dans des formats différents, lepassage d’un CMS à un autre est compliqué et exige beaucoup de travail.

3. Ces logiciels tournent soit sous PHP qui nécessite l’installation d’un serveuret parfois d’une base de données SQL, sous Python avec environnementvirtuel, ainsi que java et d’autres. Dans tous les cas l’installation n’est paspour un néophyte.

4. Pendant le développement, les pages / le projet et les fichiers joints peuventêtre hébergés localement chez le concepteur web (Wordpress, Joomla) ouexterne (service on-line par.ex.). Dans le premier cas Google et consorts nepeut pas piller le savoir-faire. D’autre part, la cessation des activités d’unfournisseur de logiciels ne cause pas la perte d’un site web. Dans ledeuxième cas rien n’est garanti !

5. La prise en main de ces logiciels est lourde, les interfaces graphiques et laterminologie est très diverses.

6. La création et l’édition n’est pas aisée. Vous devez, soit utiliser des modèlesfournit et les adapter (c’est un peu du WYSIWYG), ou utiliser Markdown unlangage de balisage léger.

7. Le concepteur web ne dispose pas d’une liberté totale sur le graphisme dela page (du fait entre autres que cette dernière doit être adaptée auxdifférents terminaux).

8. Ces éditeurs créent des sites réactifs.

Un site réactif est un site ou l'utilisateur peut ainsi consulter le même siteweb à travers une large gamme d'appareils (moniteurs d'ordinateur,smartphone, tablettes, télévision…) avec le même confort visuel et sansavoir recours au défilement horizontal ou au zoom avant/arrière sur lesappareils tactiles notamment.

Quel genre de site réactif y a-t-il ?

Site web responsif !

Le mécanisme complet de la conception de sites web responsive peut êtrerésumé en un seul mot, c’est « Grilles Fluides ». La mise en page Webcréée à l'aide des grilles fluides, ajuste automatiquement les tailles de



Système de Gestion de Contenu (CMS) pages réactives.

l'écran à tous les périphériques. Vous trouverez une mise en page webunique au travail, et elle se redimensionne en fonction de la nature de larésolution de l'écran de l'appareil de l'utilisateur.

Site web adaptatif.

Le web adaptatif fonctionne à l'aide de plusieurs mises en page. Il n'y apas de mise en page simple comme la conception d'un site webresponsif. Le concepteur web (à vrai dire le CMS) doit créer une mise enpage web multiple pour différentes tailles d'écran.

9. Les pages réactives nécessitent selon les CMS, le langage PHP etparfois une base de données. L’hébergement ne peut avoir lieu que surdes sites fournissant ces prestations.

10. Une page réactive contient souvent des scripts java ou des pluginsextérieurs, cela pose des problèmes de sécurité.

11. Une page responsive n’existe pas sur le serveur, elle doit être d’abordassemblée à partir de composants (texte, image, tableau, média) puistéléchargée (Download) vers l’utilisateur. Une page adaptative existe enplusieurs versions, le serveur doit choisir la version adaptée a l’utilisateur.Ces deux procédés nécessite une puissance de calcul accrue duserveur, donc consomme plus d’électricité.

12. La sauvegarde ou le téléchargement (upload) vers le fournisseur nepeut pas, en général s’effectuer en copiant ou déplaçant des fichiers. Ilfaut passer par les fonctions publier ou sauvegarder des CMS. Cesfonctions sont propriétaires à un CMS, un site édité par Wordpress nepeut pas être géré par Joomla par exemple.



Manuel d’utilisation du convertisseur PDFtoHTML.

Système d'exploitation, Installation et déinstallation :

L’application fonctionne sous Windows, de XP à Windows 10.

PDFtoHTML ne nécessite pas d’installation, il suffit de copier le dossier« favre_pdf2 », ou de l’effacer pour le désinstaller.

À propos du convertisseur.

Le convertisseur ne possède pas d’interface graphique, il doit être lanceravec le fichier de commandes « pdfto.bat ».

Tous les chemins d’accès des fichiers sont relatifs, vous pouvez déplacer ourenommer le fichier « favre_pdf2 » à votre guise.

Les paramètres utilisés pour la conversion sont détaillés dans le fichier« pdfto.bat »

Tous les paramètres possibles sont dans le document« xxx\favre_pdf2\manual\ppdf2htmlEX_parameter.pdf », ainsi qu’une copiedu fichier « pdfto.bat »

Remarque :

Le projet du convertisseur « ppdf2htmlEX » de Mr. Cool Wanglu est à l’arrêtdepuis 2015, le téléchargement depuis « github » n’est plus possible.

Le blog est encore consultable ici: «http://coolwanglu.github.io/pdf2htmlEX/ »

Copier votre fichier PDF dans le répertoire«xxx\favre_pdf2\docu\html » et renommer le en « pdfx.pdf ».

Si nécessaire, effacer tous les fichiers dans le dossier« xxx:\favre_pdf2\docu\html ». Les dossiers existants sont écrasés.

Démarrer la conversion en lançant le fichier« xxx:\favre_pdf2\pdfto.bat »

Après quelques secondes pour un PDF de dix pages, votreHTML est disponible dans le dossier « xxx\favre_pdf2\docu\html »





Ce convertisseur qui possède une interface graphique, est une alternative àPDFtoHTML qui n’est plus développée depuis 2015.

Ce logiciel est fabriqué par « Free PDF Solutions », la version actuelle est1.0.0 du 28 Août 2019. Vous pouvez le télécharger ici :https://www.freepdfsolutions.com/downloads.html.

L’application fonctionne sous Windows 8.1 et Windows 10, peut-être XP.

Elle ne nécessite pas d’installation, il suffit de copier le dossier « Free PDF toHTML Converter », ou de l’effacer pour le désinstaller.

Format des images.

Les images sont au format PNG, cela donne des fichiers relativement gros quiont pour conséquence que le document HTML est plus gros que le PDF.

Il est possible de convertir les fichiers PNG en JPG, le chapitre qui suit montrecomment.

« Free PDF to HTML converter » Manuel d’utilisation 1/3.





Mode d’emplois IrfanView : (convertisseur d’images)Ce logiciel est fabriqué par « Irfanview.com », la version actuelle est 4.54 de2020. Vous pouvez le télécharger ici : https://www.irfanview.com

L’application fonctionne sous Windows XP à Windows 10, en versions32 et 64 Bit.

Elle ne nécessite pas d’installation, il suffit de copier le dossier « Irfan-ViewPortable», ou de l’effacer pour le désinstaller.1)Lancer IrfanView

2) Sélectionner « Fichier » « convertir / renommer »

3) Cocher « conversion en mode batch ».

4) Format de sortie = JPG ; dans « Option » choisir la résolution (150 dpi) et laqualité = 80%.

5) Sélectionner et ouvrir le dossier contenant les PNG.

6) Sélectionner le type de fichier (PNG), Dateiname reste vide

7) Cocher « Ajouter tous ».

8) Sélectionner le dossier de sortie.

9) Démarrer.

10) effacer les fichiers PNG.

« Free PDF to HTML converter » Conversion des images 2/3.



11) Il faut modifier les fichiers SVG dans le dossier contenant les JPG (avantPNG). À savoir, remplacer les chaînes de caractères.PNG par .JPG. Pourcela on utilise « Notepad++ » portable.

12) dans « Notepad++ » sélectionner « Recherche » / « recherche dans lessous dossiers »

Paramètres

13) Recherche = .PNG

14) remplacer par = .jpg

15) filtre = *.svg (seulement les fichiers SVG)

16) Dossier = le dossier contenant les SVG, le même que sous le point 5.

17) Mode de recherche = Mode normal

18) lancer l’action avec "Remplacer tout »

« Free PDF to HTML converter » Conversion des extensions 3/3.



Réaliser une page interactive avec « MccHTMLMapper ». 1/4

Vous souhaitez créer une page avec un graphisme audacieux, vous voulezdonner libre cours à votre créativité, à votre fantaisie !

Eh bien ! créer une page contenant une image interactive!

Une image interactive est une image contenant un ou plusieurs lien hypertextesur une page Web. Lorsque l’utilisateur clique sur les différentes parties del’image, il accède à d’autres ressources.

Le logiciel « MccHTMLMapper » est fabriqué par bride maxime, la versionactuelle est V0.3. Vous pouvez le télécharger ici : http://mhm.fr.nf/(« Microsoft Expression Web 4 » permet également de créer des imagesinteractives)

L’application fonctionne sous Windows XP à Windows 10, en versions32 bit.

Elle ne nécessite pas d’installation, il suffit de copier le dossier« MccHTMLMapper», ou de l’effacer pour le désinstaller.





Réaliser une page interactive: mode d'emploi, image 2/4

1) Dessiner votre image avec les zones cliquables (boutons par exemple) enformat portrait de 450x700 pixel par exemple. Ce format convient pour lesPC, Tablette et mobile.

2) Contrôler la dimension de votre image dans un navigateur et modifier la sinécessaire. La modification dans « MccHtmlmapper » nécessite leredimensionnement et le déplacement de tous les boutons.

3) Lancer « MccHTMLMapper »

4) Charger l’image, les paramètres suivants sont insérés automatiquement :

« alt », texte alternatif si l’image n’est pas chargée dans le navigateur.

« src », nom du fichier image à charger.

« usemap » ancre de la map. (HTML interne)

Facultatif, vous pouvez ajouter.

« title » le text apparaît quand l’utilisateur passe sur l’image avec la souris.

Avant d’exporter, transformer le lien absolu en lien relatif :Absolu : (favre est le dossier local de votre site WEB)« D:/favreweb_01/favre/image/index1_html – Kopie.jpg »Relativ :« image/index1_html - Kopie.jpg »



Réaliser une page interactive: mode d'emploi, Item 3/4

5) Placer vos « items » ( boutons sur l’image importée), les « items »suivant son disponible : carré, rond, polygones et main levée.

Les 4 paramètres suivants sont insérés automatiquement :

« alt », texte alternatif si l’image n’est pas chargée dans le navigateur.

« coords » x,y et dimension (Inséré par MccHTMLMapper )

« href » le lien associé, relatif ou absolu.

« shape» type de l’item (Inséré par MccHTMLMapper )

Facultatif, vous devez ajouter.

« target » Spécifie comment ouvrir le lien associé à l’item. « blank » =nouvelle page

« title » le text apparaît quand l’utilisateur passe sur l’item avec la souris.

Lien absolu ou lien relativ ?

Lien absolu, seulement si la page est sur un site extérieur !

http://www.favreber.ch/entreprise_index_fr.html ceci est un lien absolu !

Lien relatif : pour toutes les pages qui sont sur le même site

« entreprise_index_fr.html »

Dans la boîte de dialogue ci-dessus, vous devez supprimer« http://www.favreber.ch/ » de href.



Réaliser une page interactive: mode d'emploi, HTML export 4/4

6) Exporter en HTML (N'oubliez pas de sauver votre projet ...)

Template : ne pas changer

Encodage : occidental (ISO-8859-1), pour que les lettres accentuées soientaffichées correctement.

Titre : la balise (title) décrit le contenu d’une page.

C’est le premier champ qui indique aux moteurs de recherche le sujet traitédans l’emplacement. Le titre devait avoir entre 55-65 charactères.

Le contenu de ce champ n’apparaît que sur la partie supérieure de la fenêtrede navigation et dans le nom de l’onglet.

Description : la balise (description) qui doit être facile à comprendre,développe le sujet ou thème présenté dans la métadonnée « title ». Elle estsémantiquement cohérente avec celui-ci. En ce qui concerne la longueur dutexte, le nombre de caractères idéal est de 160, et doit contenir une ou desphrases, et non une liste de mots.



Historique du site www.favreber.ch.

Le site existe depuis 2005, en 15 ans les logiciels suivants ont été utilisés:

1) FrontpageExpress, 2005 – 2006. Fin de vie.

Ce produit était livré avec Windows, il produisait un code HTML de piètrequalité, et certaines pages n’étaient affichées correctement qu'avec lenavigateur Explorer.

2) Namo Webeditor, 2007 – 2011. Fin de vie.

Logiciel commercial coréen qui coutait environ 200 Sfr. .Il n’avait pas dedéfauts connus.

3) NVU 2005 – 2006, remplacé par KompoZer en raison des nombreux bugsdu logiciel.

Logiciel gratuit. Le code HTML produit par Nvu se veut propre etrespectueux des recommandations du W3C,

4) KompoZer 2007 – 2010, … la version actuelle est 0.8b3.

(État du projet: à l'arrêt)

Logiciel gratuit. KompoZer est stable et donne entière satisfaction malgréson âge avancé. Il tourne sur toutes les versions Windows de XP à 2010,mais aussi avec Linux et Mac. Il est soutenu par la fondation Mozilla.

5) SeaMonkey, composer 2006 – 2020, … la version actuelle est 2.53.1

C'est une suite comprenant : navigateur, Email et une éditeur HTMLWYSIWYG. Elle est développée par la SeaMonkey Council.

6) Microsoft Expression Web 4, 2006 – 2012. Fin de vie.

En 2012 Microsoft a cessé la vente et le service pour ce logiciel. Depuis ilpeut être téléchargé gratuitement chez Microsoft, mais la durée defonctionnement est limitée à 60 jours ! C’est un logiciel très complet quiinclut la gestion des pages du site.

Les outils (logiciel) de création et de gestion de site Web abondent sur la toile,du simple et gratuit au sophistiqué et cher.

À l’embarras du choix, s’ajoute la durée limitée du logiciel en raison de fin devie ou de la mise à jour du système d’exploitation.



Les outils de création du site www.favreber.ch.

Tous les logiciels ci-dessous sont gratuits et en version portable.C'est-à-dire ne nécessitant pas d’installation. Il suffit de copier le dossierdans votre PC,. Ces logiciels peuvent également fonctionner depuis uneclef USB.

1 Open Office Writer : Traitement de texte avec le correcteur Cordial.

2 Open Office Draw : Dessin vectoriel pour le graphisme des pages Index(exportation en jpg).

3 Open Office Impress : pour les présentations.

4 Scribus : Logiciel de publication assistée par ordinateur (PAO), quipermet la mise en pages de façon flexible.

5 Gimp : Pour la manipulation et les retouches d’images.

6 Shotcut : Pour l’édition des vidéos.

7 KompoZer : Pour créer des pages web en voyant le résultat final.

8 Filezilla : FTP pour transférer les pages Web entre votre PC etl’hébergeur de votre site.

9 pdf2htmlEX : Convertit un document PDF en page HTML. (fin de vie)

10 Free PDF to HTML Converter: Convertit un document PDF en pageHTML.

11 MccHTMLMapper : Pour créer des zones cliquables dans un graphique(Hotspot).

12 IrfanViewPortable : Convertisseur d'images

Remarque: un site simple peut-être creé en utilisant unique-ment KompoZer et Filezilla.

Les logiciels 9,10,11 et 12 peuvent être télécharger depuis le lien ci-dessous.





Réalisation d'une page web simple

Vous réalisé votre page(s) avec Kompozer et la télécharger chez votrehébergeur avec Filezilla.Les images et les vidéos sont adaptées avec Gimp ou Shotcut selon les be-soins

Réalisation d'une galerie d'images

Il s'agit de page(s) ou l'image est le l'élément central, complétée par un texte.Pour cela j'ai utilisé Impress pour créer une présentation.Ensuite la présentation est exportée en format PDF, puis le PDF est convertiten HTML.Et enfin le téléchargement chez l'hébergeur avec Filezilla!Les images et les vidéos sont adaptées avec Gimp ou Shotcut selon les be-soinsExemples :www.favreber.ch/presentation_htlm/b_favre_jeunesse/B_Favre_jeunesse.html

www.favreber.ch/presentation_pdf/B_Favre_jeunesse.pdf

Réalisation d'un récitIl s'agit de page(s) ou le texte est l'élément central, complété par des illustra-tions.

Pour cela je saisi le texte avec Writer sans formatage, ce qui me permet deme concentrer sur le contenu.

Le correcteur Cordial contrôle l'orthographe et la grammaire.

Je fais la mise en page du text et des images avec Scribus sans devoirm'occuper du text.

Ensuite le récit est exporté en format PDF, puis le PDF est convertit en HTML.

Et enfin le téléchargement chez l'hébergeur avec Filezilla!

Les images et les vidéos sont adaptées avec Gimp ou Shotcut selon les be-soins.

Exemples :www.favreber.ch/radotage/chapitre_03_ecolier_et_travail/chapitre_03_ecolier_et_travail.html

www.favreber.ch/radotage/downlaod/chapitre_03_ecolier_et_travail.pdf

Remarque : Cette manière de procéder date des années 2005, Scribusétait encore en version bêta. Aujourd’hui je n’utiliserai pas Impress pour faireune présentation, mais Scribus !

historique du site 2005 - 2020

Documents