[Amateur] Renouveau d'un site de 2009

Bonjour, j'ai (enfin) dépoussiéré mon site (ici), endormi depuis
2009, lors de mon précédent passage ici, afin de le
rendre plus moderne et j'aimerais votre avis avant concernant le rendu (un peu)
et le code(surtout).

Développeur moi-même, mais loin du monde de la publication Web, c'est ce qui
me chiffonne le plus.

Pour commencer, ce site est un prétexte pour diffuser un CV en pdf.
Il ne contient de fait que deux pages en HTML/CSS.
Donc, puisque de nos jours la majorité des navigateurs affiche du pdf
'à la volée', serait-il pertinent de publier un pendant aux CV en HTML/CSS ?
- Sachant que j' ai passé dix fois plus de temps à obtenir en HTML/CSS une page
qui corresponde à peu près à ce que je voudrais, qu'à pondre deux pages
document en Latex !
-

J'ai d'ailleurs été surpris par la qualité du rendu pdf sous IE10.

Ensuite, j'ai intégré le CSS fournis par Knacss sans vraiment l'utiliser.
J'ai surtout remplacé les "float:xxx" et "text-align:" qui existaient déjà
par les classes équivalentes de Knacss.
Est-ce bien utile, vu le peu de complexité du site, de l'utiliser ?
En d'autres termes, Knacss travaille-t-il bien plus à ma place que ce qu'il
n'y parait, à mon niveau ?

Les deux pages comportent un code commun, celui du bandeau supérieur.
Pour éviter le copier-collé, existe-il une méthode, hors java-script ou
autres scripts, qui inclue un code commun. J'ai bien tenté d'utiliser la commande
'import', mais elle ne semble pas convenir à l'inclusion de simple code HTML.

Je ne précise pas la les polices de caractères à charger, elles viennent donc de Knacss.
La police 'à défaut' par contre n'est pas terrible même si je ne la vois que
sur ma machine FreeBSD; sous les quelques Linux ou Windows que j'ai à
disposition, c'est beaucoup mieux.
Si je déposais et déclarait un jeu de caractères (fichier otf ou ttf je suppose) sur le
site, serait-il chargé même si les premières polices déclarées sont disponible ?
Et dans tout les cas, le chargement d'un jeu provenant du système par le navigateur
est-il sensiblement plus rapide que depuis le site ?

Enfin, pour afficher les deux colonnes du documents, je leur ai chacune attribué un
positionnement flottant.
Je me dis qu'il doit être possible d'en garder une dans le flux normal.
Je n'y suis pas arrivé, sauf à inverser la disposition des colonnes.
Je tiens à cet ordre car, à terme, j'essaierai d'adapter la page aux toupiti
terminaux en supprimant -entre autre- l'attribut "flottant" des colonnes; donc d'afficher la
partie droite sous la partie gauche.

Et merci pour les tutos et articles, principale source de renseignement que
j'ai utilisée.
Modifié par David Marec (02 Dec 2015 - 19:49)

Bonjour,

Je trouve que le style fait un peu daté. La faute au texte justifié (à éviter pour la lisibilité) et aux effets de dégradés qui ne se font plus (fond, dessous de textes… ). La construction aussi ne colle plus trop à la navigation actuelle (scroll, tactile… ). Privilégier le positionnement vertical, plutôt que les colonnes latérales (là sur la home, c'est déséquilibré, la colonne de droite bouffe tout). Sauf si il y a une vraie idée en terme d'ergonomie et/ou de design.

Aussi, limiter le nombre de tailles de caractères peut aider à clarifier la maquette. En hésitant pas à marquer par de fortes ruptures entre la taille du titre et celle du texte de contenu. Entre le titre, les sous titres et le contenu, 3 tailles maxi, chacune chartée, doivent pouvoir faire l'affaire.

Attention aussi à soigner votre gamme de couleurs. Limitez le nombre de couleurs et essayez de vous inscrire dans ce qui se fait actuellement. Votre gamme correspond aux style des années 90, juste changer/optimiser ce point, permettrai de donner un bon coup de peps à votre site. 3 couleurs maxi, blanc inclus, pourrait vous aider.

Des bugs au survol avec des textes qui se décalent (Chrome/mac).

My two cents.
Modifié par spongebrain (04 Dec 2015 - 18:54)

Bonsoir,

spongebrain a écrit :
Bonjour,
Je trouve que le style fait un peu daté. La faute au texte justifié (à éviter pour la lisibilité) et aux effets de dégradés qui ne se font plus (fond, dessous de textes… ). La construction aussi ne colle plus trop à la navigation actuelle (scroll, tactile… ). Privilégier le positionnement vertical, plutôt que les colonnes latérales (là sur la home, c'est déséquilibré, la colonne de droite bouffe tout). Sauf si il y a une vraie idée en terme d'ergonomie et/ou de design.

Merci des conseils. J'ai donc refait un peu la maquette:

La colonne de droite est retournée dans le flux, sous la présentation.
Elle est désormais elle-même disposée en colonnes, ce qui fonctionne bien, sauf sur Chrome qui pédale parfois dans le cassoulet (sud-ouest oblige) selon l'ordre et la taille du texte.

Je l'ai fait pour m'essayer au responsive, le nombre de colonne varie selon la taille du terminal.
- Ceci dit, je ne sais pas si le PDF est très 'responsive'.

J'ai supprimé l'appel à Knacss, puisque je n'en utilisait pas vraiment les possibilités.
J'ai l'impression d'avoir de meilleures polices 'a défaut', du coup.

Il n'y a qu'un point qui me chiffonne, c'est la remarque sur la justification du texte.
De mon point de vue, un paragraphe non justifié est moins agréable à lire.
Il ne l'était d'ailleurs pas au départ et c'est la première remarque que l'on m'a faite.
Enfin, ça dépend surtout de l'algorithme utilisé pour justifier.

a écrit :

Aussi, limiter le nombre de tailles de caractères peut aider à clarifier la maquette. En hésitant pas à marquer par de fortes ruptures entre la taille du titre et celle du texte de contenu. Entre le titre, les sous titres et le contenu, 3 tailles maxi, chacune chartée, doivent pouvoir faire l'affaire.

Je crois que c'est le cas maintenant.
Euh, «chartée» !?

a écrit :

Attention aussi à soigner votre gamme de couleurs. Limitez le nombre de couleurs et essayez de vous inscrire dans ce qui se fait actuellement. Votre gamme correspond aux style des années 90,
juste changer/optimiser ce point, permettrai de donner un bon coup de peps à votre site. 3 couleurs maxi, blanc inclus, pourrait vous aider.

Hmm. Les années 90, c'est très très peu d'années dans l'histoire du web.
Je produisait surtout du code pour des terminaux de type minitel (RTC) à l'époque.

Là, je n'ai plus vraiment de couleurs, mais j'ai l'impression que ça manque un peu de nuances.

David Marec a écrit :
Il n'y a qu'un point qui me chiffonne, c'est la remarque sur la justification du texte.
De mon point de vue, un paragraphe non justifié est moins agréable à lire.
Il ne l'était d'ailleurs pas au départ et c'est la première remarque que l'on m'a faite.
Enfin, ça dépend surtout de l'algorithme utilisé pour justifier.

Bonjour,
Effectivement, justifier le texte est souvent apprécié des lecteurs, mais si ce texte comporte des mots un peu longs, cela entraîne un aspect inesthétique.
Pour limiter cela, l'utilisation du trait d'union conditionnel (soft hyphen) peut être intéressante, bien qu'elle puisse être fastidieuse à mettre en oeuvre pour des articles un peu longs.
Plus d'infos sur le trait d'union conditionnel sur https://fr.wikipedia.org/wiki/Trait_d'union_conditionnel, par exemple, ou toute autre recherche web...
Cordialement

sepecat a écrit :

Bonjour,
Effectivement, justifier le texte est souvent apprécié des lecteurs, mais si ce texte comporte des mots un peu longs, cela entraîne un aspect inesthétique.

Oui, c'est là d'ailleurs le gros du boulot des algorithmes de justification.
Je ne saurais juger de leur pertinence dans les différents moteurs de rendu du web.

a écrit :

Pour limiter cela, l'utilisation du trait d'union conditionnel (soft hyphen) peut être intéressante, bien qu'elle puisse être fastidieuse à mettre en oeuvre pour des articles un peu longs.
Plus d'infos sur le trait d'union conditionnel sur https://fr.wikipedia.org/wiki/Trait_d'union_conditionnel, par exemple, ou toute autre recherche web...
Cordialement

Le lien ne fonctionne pas, mais je pense qu'il s'agit du tiret "virtuel", c'est à dire un faux tiret placé (judicieusement) pour aider à la justification et qui ne s'afficherait qu'en cas de césure.

J'ai surtout eu à faire l'inverse, c'est à dire placer des tirets et espaces insécables.

A ce propos, peut-on définir tout un pan de texte comme étant insécable ?
Je pense, par exemple, aux termes "C++" ou "TCP/IP", qu'il serait dommage de voir couper au niveau des des symboles "+" ou "/".

Ce qui, au vu de la petite taille de mes colonnes, peut facilement se produire.

Pour les espaces insécables, utiliser l'entité  
Pour rendre une zone de texte non sécable, utiliser un "span" (ou autre) avec l'attribut CSS white-space à nowrap.

sepecat a écrit :
Pour les espaces insécables, utiliser l'entité  
Pour rendre une zone de texte non sécable, utiliser un "span" (ou autre) avec l'attribut CSS white-space à nowrap.

Excellent !
Du coup, j'ai pu virer tous les petits bidules insécables dispersé au milieu des étiquettes de la deuxième page, grâce à ce 'no wrap' bien placé dans le document CSS.

Je replace le lien sur le [url=http://fr.wikipedia.org/wiki/Trait_d'union_conditionnel]tiret virtuel[/url].

wikipedia a écrit :

Le trait d’union conditionnel est parfois utilisé pour l’obfuscation de faux noms de domaine dans les URL ou les pourriels.

Effectivement, si une url peut comporter ce genre de caractère qui ne sera par définition jamais affiché sur une seule ligne...
Modifié par David Marec (11 Dec 2015 - 12:04)