Bonus

Mes connaissances en informatique  

J'ai terminé mes études d'ingénieur en 1975 et n'ai donc pas touché à l'informatique lors de celles-ci puisqu'elle n'était pas encore accessible au grand public. J'avais eu quelques cours très théorique de Fortran, mais sans application pratique.

Il faut se rappeler qu'au début des années 70, on entrait en prépa avec une règle à calcul, des tables de log et des tables numériques Laborde. Je n'ai touché à la première calculette qu'en 1975 et ce n'est qu'avec mon premier vrai salaire d'ingénieur en 1978 que je me suis acheté une calculette programmable HP-25 ; elle avait 49 pas de programmes qui s'effaçaient lorsqu'on éteignait l'engin. Et pourtant, elle m'a été très utile quand je faisais du forage pétrolier dans le Sahara.

Ça laisse rêveur aujourd'hui...

J'ai acheté mon premier « vrai » ordinateur en 1982 lors d'un voyage à Singapour. C'était un Sharp PC-1500 programmable en GW-Basic et en langage-machine, il était équipé d'une mini-imprimante munie d'un barillet de quatre petits stylos à bille et pouvait tracer tout ce qu'on voulait sur un rouleau de papier de 5 ou 6 cm de large. Et ô confort, les programmes étaient stockables sur une cassette audio. Le pied !

C'est ainsi que j'ai appris à programmer seul, à l'aide de quelques bouquins. Ce n'était évidemment pas mon métier mais je me facilitais la vie en mettant au point des outils qui me servaient quotidiennement dans mon travail.

De fil en aiguille, mon premier ordinateur portable professionnel m'a été attribué vers la fin des années 80. C'était un Toshiba à écran plasma monochrome orange, son disque dur faisait 10 Mo ! et il tournait sous Dos. Quand Windows est apparu, il n'a pas pu le supporter car il manquait cruellement de mémoire.

Je me suis donc habitué à tous les outils de bureautique (Office, notamment) et j'ai persévéré en Basic en faisant grand usage de VisualBasic (VBA pour Office) jusqu'à aujourd'hui. D'ailleurs la très grande majorité des animations personnelles de ce site ont été générées en VBA, image par image, et transformées en animation d'abord grâce à GIF Movie Gear puis par la suite en format SVG, bien plus puissant et surtout bien moins lourd.

Parallèlement, quand je me suis intéressé à Internet, je me suis mis à coder en HTML, JavaScript, CSS, PHP, MySql, etc. Pour moi, cela ne pose aucun problème compte tenu de ma formation, de mes capacités et du plaisir que j'ai à le faire.

Pour aller plus loin, je me suis intéressé à un autre mode de programmation, le mode orienté objet par opposition à celui que j'avais toujours connu, le mode procédural. J'ai donc parcouru assidument le cours d'OpenClassRoom et l'ai trouvé particulièrement intéressant. J'ai fait les premiers exercices (je donne ces précisions pour ceux qui seront tentés d'en faire de même) et les ai trouvé très astucieux. Pour info, il s'agit de créer un jeu de bataille avec des personnages. La POO semble particulièrement adaptée pour ce faire. Puis j'ai poursuivi avec l'exercice créant un système de news sur un site. L'ayant réalisé sur mon site, mais en mode procédural, je pensais que ce serait une bonne évolution. Mais là, j'ai commencé à déchanter. La méthode me paraissait tellement complexe et lourde par rapport à ce que j'avais moi-même développé, pour un résultat identique. que j'ai commencé à douter. Puis je suis allé plus loin avec la création d'un site et là, il m'a semblé être tombé chez les Shadocks dont l'un des grands principes est « Pourquoi faire simple quand on peut faire compliqué ? ».

J'avoue que depuis, je reste très dubitatif quant aux avantages réels de la POO sur un mode procédural bien organisé.

J'en suis arrivé à concevoir ce site de A à Z sans autre aide que les tuto et forums du Net. Merci à tous ceux qui publient et qu'on pourra retouver sur la page « Liens et adresses » dans la rubrique « Informatique ».

Historique du site  

Le premier site

J'ai créé et mis en ligne le tout premier site consacré au sujet des Anciennes Automobiles en octobre 2002. Il était hébergé gratuitement chez Free et est toujours en ligne (Jaguar Mk2 ) tant que cette société ne l'effacera pas.

Ce premier site, né d'une envie de faire partager ma passion pour une automobile que je venais d'acquérir, n'a eu d'autre but que de mettre à la portée de tous les renseignements collectés à son sujet, le plus simplement possible, et gratuitement bien sûr.

On peut voir sur les images ci-dessous à quoi ce site ressemblait ; il était composé essentiellement de code HTML, mis en page à l'aide de balises table et de propriétés CSS dans le style des balises. Un peu de JavaScript pour animer le menu de gauche et le tour était joué.

Il s'agissait de mon premier site et j'avais commencé à me servir de FrontPage pour le concevoir, mais j'ai vite abandonné cet outil quand j'ai vu l'ampleur de l'usine à gaz déployée...

 

 

 

 

Le second site

Au fur et à mesure où je travaillais à étoffer ce site, je me suis aperçu que certaines explications faisaient intervenir des notions plus générales et j'ai décidé d'inverser les rôles ; c'est-à-dire de parler de la technique des automobiles anciennes en général et d'inclure la Jaguar Mk2 comme cas particulier, en espérant pouvoir ajouter d'autres automobiles au fil du temps.

C'est ainsi que le site « Anciennes Automobiles » a vu le jour début 2013, hébergé chez PlanetHoster. Il a évidemment repris le contenu de l'ancien site. Voici sa page d'accueil.

 

 

Ce site existe toujours, c'est celui que vous parcourez actuellement, mais il a simplement changé de look... suite à un message que j'avais laissé sur le forum d'Alsacréations dans la partie où chaque créateur peut demander l'avis des lecteurs sur son propre site.

J'y ai globalement reçu une volée de bois vert d'où il ressortait que son design était ringard et rendait le site peu attrayant d'une part et que d'autre part sa non-responsivité le condamnait. Passé le premier effet de ces critiques -ça fait toujours un peu mal de voir critiquer son bébé- je me suis remis en cause et ai cherché comment améliorer les choses.

Après réflexions et beaucoup de lectures, je me suis orienté vers un modèle WorPress. J'ai creusé la question avant de me lancer et ai constaté que pour faire un seul site, c'était là encore se lancer dans une véritable usine à gaz alors que tout bien pesé, il me suffisait de modifier mon fichier CSS, le reste n'ayant besoin que de très peu de retouches puisqu'entièrement organisé à partir de fonctions php.

Je me suis donc lancé après avoir conçu un design et une présentation plus moderne, plus en conformité avec les tendances actuelles (Philippe Rondepierre - Tendances Web Design 2017/2018 , Serge Guerriero - Cours de typographie , ).

Le responsive design  

Après plusieurs tâtonnements plus ou moins heureux et beaucoup de lecture sur le Net, dont certaines sont citées ici, pour bénéficier d'un design -à peu près- responsive et fluide (Raphaël Goetter - C'est quoi le Responsive Web Design ? - Alsacréations ), je me suis arrêté aux organisations d'écran détaillées ci-dessous.
Je me suis efforcé par ailleurs de respecter les règles de programmation suivantes :

• minimiser le code HTML de la façon la plus strict en n'utilisant pas la propriété style, mais au maximum le CSS ;
• de facto, utiliser au maximum le code CSS en essayant de ne pas être redondant ;
• générer les pages dynamiquement en php de manière à ne pas retoucher le code HTML en cas de changement de disposition ;
• optimiser le code php en créant des classes et en utilisant la POO ;
• et bien sûr créer des fonctions autant que nécessaire plutôt que de dupliquer des lignes de codes, mais là, il s'agit de bonnes pratiques de programmation valables quel que soit le langage utilisé.

Les résolutions d'écran

À ce jour, car la technologie évolue sans cesse dans ce domaine, on peut faire l'état des lieux suivants des résolutions d'affichage des différents écrans.

La course aux pixels a été lancée et n'est pas prête de s'arrêter.

Il faut donc s'adapter à ces résolutions pour offrir un site consultable de façon agréable et confortable à partir de tous ces appareils. Notons toutefois que la consultation de sites techniques comme celui-ci n'est pas vraiment compatible avec les très basses résolutions et qu'il serait illusoire d'espérer le faire avec les très anciens smartphones de 320 pixels de large par exemple...

Une première difficulté pour le développeur est de savoir de quels pixels il est question. Car les choses ne sont pas si simples, les définitions étant évidemment complexes.

La définition physique de l'écran

C'est le nombre physique de pixels qui composent la matrice de l'écran, telle que le constructeur le décrit dans les caractéristiques. Par exemple, la surface réelle de quelques terminaux Apple :

• 320 x 480 px pour l'iPhone 3 ;
• 640 x 960 px pour l'iPhone 4 ;
• 640 x 1136 px pour l'iPhone 5 ;
• 750 x 1334 pour l'iPhone 6 (1080 x 1920 pour l'iPhone 6+) ;
• 768 x 1024 px pour l'iPad 2 ;
• 1536 x 2048 px pour l'iPad 3, 4, Air.

La surface utilisable (en « pixels CSS »)

Également appelée device-width et device-height ou screen.width et screen.height, il s'agit du nombre de pixels virtuels que le terminal pense avoir et sur lequel il fonde son affichage.

Il s'agit d'une grandeur essentielle en programmation car cette surface ne correspond pas toujours à la surface physique, notamment pour les mobiles dits « retina » ou haute définition. Un « pixel CSS » n'est donc pas égal à un pixel physique.

En voici quelques exemples :

• 320 x 480 px pour l'iPhone 3 (là c'est identique) ;
• 320 x 480 px pour l'iPhone 4 ;
• 320 x 568 px pour l'iPhone 5 ;
• 375 x 667 px pour l'iPhone 6 (414 x 736 pour l'iPhone 6+) ;
• 768 x 1024 px pour l'iPad 2 ;
• 768 x 1024 px pour l'iPad 3.

Je n'ai cité ici que la marque Apple, mais il en est de même pour un grand nombre d'autres terminaux, toutes marques confondues.

De plus, les terminaux Apple ont une particularité que n'ont pas les autres mobiles. La valeur de screen.width est invariable en portrait et en paysage. Le screen.width d'un iPad vaudra toujours 768 px quelle que soit son orientation !

Le viewport

Difficulté de plus, la taille du viewport d'un terminal mobile ne correspond ni à la taille de son écran réelle ni celle en « pixels CSS ». Elle est généralement bien supérieure à la surface physique, afin de pouvoir y afficher n'importe quelle page Internet en lui affectant un niveau de zoom.

Autre surprise, la valeur initiale du viewport ne dépend pas du terminal, comme cela semblerait normal, mais du navigateur mobile et peut parfois même être modifiable par l'utilisateur dans ses réglages.

Encore quelques exemples :

• Android 1, 2 et 3 : 800 px ;
• Android 4 : 980 px ;
• Opera mini : 850 px ;
• Opera mobile : 980 px ;
• Safari mobile : 980 px ;
• Internet Explorer mobile : 1024 px.

Les pages Internet s'affichent par défaut de manière que toute la surface entre dans celle de l'écran. Ce niveau de zoom initial correspond à une simple division mathématique de device-width / viewport.

Ainsi, la surface réelle en pixels n'est pas prise en compte dans le calcul du niveau de zoom d'affichage. Par exemple, Safari mobile sur iPhone 5 va afficher par défaut les pages Internet dans une fenêtre de 980 px de large au sein des 320 px de largeur qu'il croit avoir… bien qu'il en ait physiquement 640 px. Le niveau de zoom initial sera donc de 320 / 980, soit environ 0,326.

Heureusement, pour s'affranchir de ce zoom rendant les contenus illisibles, il est possible d'imposer la taille de la surface du viewport d'un périphérique mobile. Non pas en CSS comme on pourrait le croire, mais en HTML, à l'aide d'un élément <meta> proposé initialement par Apple.

Les différentes valeurs de cet élément <meta> et de son attribut content, offrent la possibilité de fixer la largeur de viewport à la valeur souhaitée, voire de l'adapter automatiquement à la valeur de device-width du terminal.

Tous les exemples cités ci-dessus ne sont pas à jour et ne comprennent pas les dernières évolutions ; ils ne sont là que pour expliquer la complexité de la chose...

Mes choix

Je vais présenter les choix retenus des plus grandes résolutions aux plus petites :

• Pour les résolutions à partir de 1025 pixels : Un seul fichier CSS avec une seule disposition d’écran et deux gammes de tailles de caractères, la première pour les écrans de 1025 à 1279 pixels et la seconde pour les écrans de 1280 pixels et plus. En fait, pour simplifier les choses, je me suis fixé deux règles d'écriture majeures :
• la font-size de base est définie dans la balise html et toutes les autres sont exprimées en rem ;
• toutes les dimensions sont exprimées en px jusqu'à 5 et au-delà en vw.
• Pour les résolutions de 768 à 1024 pixels : Un seul fichier CSS et une seule présentation qui diffère de la précédente (lire les détails ci-dessous) ;
• Enfin, pour les résolutions inférieures à 768 pixels : Là encore, un seul fichier CSS mais deux présentations différentes. La première pour les écrans de 767 à 480 pixels et la seconde pour les écrans de résolution inférieure à 480 pixels.

Écrans de 1025 pixels de large et plus  

J'ai adopté une page relativement classique aujourd'hui, reprenant les éléments suivants :

• un bandeau horizontal en en-tête reprenant le nom du site ;
• une page principale verticale au centre de l'écran et qui peut défiler de haut en bas ;
• un bandeau horizontal en pied de page comportant les indications générales d'un footer ainsi que les éléments de menu secondaire ;
• à noter que ces trois éléments, bandeau d'en-tête, page centrale et bandeau de pied de page sont liés et défilent ensemble verticalement ;
• verticalement, à gauche de la page centrale, une colonne comportant le menu principal ainsi que le sommaire de la page affichée ;
• symétriquement à droite de la page centrale, une colonne comportant les boutons de connexion, inscription et de recherche dans le site ainsi que des informations complémentaires ;
• mais surtout, je ne voulais pas que ces deux colonnes défilent verticalement avec la page centrale comme on le voit souvent, ce que je n'aime pas. Je les ai donc rendues fixes et j'ai ajouté le nom du site en haut à gauche de manière qu'il soit visible qand le bandeau d'en-tête sort de l'écran par le haut.

À la base, j'avais pensé utiliser une div flexbox (Raphaël Goetter - CSS3 Flexbox Layout module - Alsacréations ) pour contenir les trois éléments défilants et fixer les deux colonnes. Mais je me suis vite aperçu d'un inconvénient majeur, la div flexbox étant placée au-dessus des deux colonnes, elle les recouvrait et ne permettait plus de les cliquer ; une parade aurait été d'employer la propriété pointer-events: none;, mais dans ce cas, il n'était plus possible de cliquer sur les éléments de la div. J'avais également envisagé la possibilité de placer les deux colonnes au-dessus de la div flexbox en jouant sur les z-index et l'opacity (Vincent De Oliveira - Les contextes d'empilement ) mais, je voulais impérativement que les colonnes passent sous le pied de page dès lors qu'il remonterait assez par le jeu du défilement vertical.

J'ai donc opté pour un empilement de div selon le schéma ci-dessous, avec un mimimum de quatre couches qui me donne entière satisfaction. À cette occasion j'ai découvert une particularité que je ne connaissais pas et à propos de laquelle je n'avais rien lu ; je la préciserai ci-après en expliquant le fonctionnement des différentes div flexbox empilées.

Les noms entre parenthèses sont ceux que j'ai donné aux id et class dans le code CSS.

L'organisation des empilements de div

Comme indiqué plus haut, il y a un empilement ou emboîtement d'un minimum de quatre couches de div, en allant de la couche inférieure et donc du conteneur général, à la couche supérieure :

• en rose sur le schéma, le niveau 1 composé de la div appelée flex-1, organisée en colonne ;
• en bleu sur le schéma, le niveau 2 composé de trois div placées les unes sous les autres, du haut vers le bas, la première, appelée flex-1-1, contient l'en-tête, la deuxième, appelée flex-1-2 est une div flexbox organisée en ligne, contenant les colonnes de gauche et droite et la page centrale et la troisième, appelée flex-1-3 est une div flexbox également organisée en ligne, contenant le pied de page ;
• en vert sur le schéma, le niveau 3. Dans flex-1-2, on trouve la colonne de gauche, une div flexbox appelée flex-1-2-1 et organisée en colonne, une div appelée flex-1-2-2 contenant la page principale, sur laquelle on reviendra plus loin, et la colonne de gauche, une div flexbox, appelée flex-1-2-3, organisée en colonne. Dans le pied de page (footer), se situent quatre div ;
• en jaune sur le schéma, le niveau 4, des div qui composent les deux colonnes de gauche et de droite.

Le défilement vertical

Les trois schémas suivants montrent comment les différentes div doivent se comporter lors du défilement vertical (scrolling) de la page.

• lorsque la page est dans sa position originale, à son ouverture, l'en-tête, les deux colonnes et la page centrale sont visibles ;
• lorsque le défilement fait disparaître l'en-tête vers le haut, la page centrale défile également, mais les deux colonnes restent fixes, celle de gauche laissant apparaître l'image haute reprenant le nom du site qui reste ainsi toujours présent ;
• le défilement arrivant en bas de page, le pied de page est visible.

 

 

Et c'est ici qu'est mise en évidence la particularité dont je parlais. Les colonnes de gauche et droite, des div pourtant contenues dans la div flex-1-2 en débordent allégrement par le haut et le bas dès lors que je leur ai donné la propriété position: fixed;.

La page centrale

Juste quelques mots sur son organisation. Elle a d'abord été composée de paragraphes indentés et placés dans deux colonnes afin d'en faciliter la lecture avec une lettrine sur le premier de chacun des paragraphes d'un sous-chapitre. Tout cela est mis en page en code CSS.
Autant cette disposition était jolie, mais autant elle n'était plus pratique dès que les pages étaient longues. J'ai donc abandonné la présentation en deux colonnes pour revenir à une présentation en une seule colonne qui rend la lecture plus facile quand on fait défiler la page.

Pour la petite histoire, je me suis trouvé confronté à une « anomalie » dans la mise en forme de cette page centrale. Elle n'occupait pas systématiquement la largeur assignée selon les pages affichées... Et je me suis rendu compte que cette largeur pouvait varier avec les photos contenues et être minimum (environ 20% de la largeur de l'écran au lieu des 60% assignés) s'il n'y avait que du texte. J'ai d'abord résolu ce problème sans le comprendre par un artifice en plaçant systématiquement, en haut de chaque page, une image transparente de 2000px x 1px. Puis je suis tombé par hasard sur cet article (Raphaël Goetter - Flexbox a cassé mes images responsive ! ) qui m'a éclairé et m'a permis de rectifier le tir.

 

.colonnes {
column-gap: 1.5em;
margin: 1em 0 0 0;
background: transparent;
columns: 2 12em;
}
.colonnes ul,
.colonnes li,
.colonnes li a {
text-align: left;
hyphens: auto;
color: #B13C2E;
hyphenate-limit-lines: 2;
hyphenate-limit-chars: 6 3 2;
hyphenate-limit-zone: 40px;
}
.colonnes a:hover {
font-weight: bold;
color: #FF0000;
}
#flex-1-2-2 p:first-of-type {
text-indent: 0;
}
#flex-1-2-2 p:first-of-type:first-letter {
float: left;
margin-right: 5px;
padding: 0.08em 0.05em 0 0;
font-size: 6rem;
font-weight: bold;
color: #B13C2E;
}

Écrans de 768 à 1024 pixels de large  

J'ai repris la disposition précédente et j'ai déplacé la colonne de droite sous la page de texte en conservant les boutons en haut, mais dans la colonne de gauche cette fois, entre le petit logo et le menu principal.

Dans le texte de la page, j'ai supprimé la disposition en deux colonnes et augmenté légèrement la taille des caractères pour garder une bonne lisibilité.

Enfin, le défilement garde les mêmes propriétés que pour les grands écrans.

Écrans de moins de 768 pixels de large