Varia

Mot-clé -

Fil des billets

16 septembre 2003

Les polices

Vu du travail, avec Internet Explorer, mon sommaire est illisible, parce que la taille des polices est trop petite. J'avais trouvé une page expliquant et comparant les différentes présentations possibles des navigateurs en fonction des tailles de polices définies, mais je ne trouve plus ma source. Toujours est-il que mes pourcentages ne marche pas ou alors je n'ai pas tout compris.

Mon but est très simple : je veux que le sommaire se différencie du corps de la page. J'ai défini pour cela deux familles de polices dans ma feuille de style, une pour l'ensemble de la page

body { 

    font-family: Times, serif;

}

et une autre pour le sommaire

#sommaire { 

    font-family: Lucida, Verdana, Helvetica, Arial, sans-serif;

}

Le nom des polices correspond aux polices éventuellement disponibles sur le poste du lecteur. Si aucune police n'est disponible, l'agent utilisateur se rabat sur la famille générique. Ainsi, si vous n'avez pas de police nommée Times, le navigateur utilisera le nom de famille générique serif pour fournir un équivalent (par exemple Times New Roman).

Pour accentuer cette différence, je veux que la taille du sommaire soit inférieure à la taille du corps de la page. Pour cela, je peux soit définir des tailles absolues (en centimètre ou en point par exemple), inutilisable pour le média écran mais utile pour l'impression, soit définir des tailles relatives (en pixel ou en carré typographique par exemple). Ce sont ces dernières que je vais utiliser. Mais quelles unités relatives choisir ? Il suffit de respecter le choix de l'utilisateur.

Ainsi, les valeurs en pixel dépendent de la résolution de l'écran du lecteur. Si le lecteur a fixé la taille de la police à 16 pixels, on peut supposer qu'il a ses raisons (son confort de lecture par exemple). Pourquoi vouloir alors lui infliger une taille de 12 pixels ? On va supposer que le lecteur est intelligent et utiliser des valeurs en carré typographique. En rajoutant dans la feuille de style une propriété font-size, pour toute la page

body { 

    font-family: Times, serif;
    font-size: 1em;
}

et pour le sommaire

#sommaire * {
    font-size: .9em;
}

je définis une taille de police relative au choix de l'utilisateur. Avec 1em, ce choix est respecté quelle que soit la taille définie en pixel (16 pixels dans mon exemple). Avec .9em, j'indique au navigateur une taille de police plus petite, toujours relativement à la taille choisie au départ, mais je laisse le navigateur faire le calcul. J'arrive ainsi au but voulu.

Il existe d'autres possibilités, comme smaller ou larger, mais elles n'ont pas l'air de fonctionner correctement.

Ma feuille de style est maintenant stabilisée. Il me reste toutefois à styler des balises que j'ai employé récemment, comme del et ins, et d'autres dont l'affichage ne me plaît pas comme dt et dd.

3 septembre 2003

Sémantique et petits rongeurs

Quelques notes suite à la lecture de l'article Won't somebody please think of the gerbils? de Mark Pilgrim, article dans lequel il revient sur le XHTML, la validation, les CSS, le balisage sémantique et l'accessibilité.

Si je peux comprendre ces réticences concernant le XHTML, le fait que mes documents soient servis comme du HTML ne me gênent pas, parce que dans la norme XHTML 1.0, le nommage MIME général recommandé pour les applications n'a pas encore été résolu. Le problème se posera si je passe en 1.1. Il faudrait alors que je vérifie que mon FAI (puisque cela se passe côté serveur) serve mes pages en xhtml+xml. Pourquoi utiliser du XHTML 1.0 strict alors ? Parce que comme l'écrivait Tristan Nitot, j'ai de la chance d'être un débutant :

C'est pour cela que les débutants ont une chance inouïe : ils peuvent décider, pour peu qu'on les informe, de débuter directement au niveau XHTML 1.0 strict, sémantique et accessible.

Débuter à ce niveau permet à des néophytes comme moi de bien rédiger ses pages. La principale règle d'écriture tient en une seule phrase : un document bien formé est un document dont chaque élément possède une balise d'ouverture, un contenu et une balise de clôture. Cela me semblait contraignant au départ, mais finalement on s'y habitue vite.

Un document bien formé n'est pas encore un document valide, bien que pour qu'un document soit valide, il doive être bien formé. C'est une condition nécessaire mais pas suffisante. Il faut encore qu'il obéisse à la structure de la DTD dans laquelle les éléments et les attributs sont définis. La validité elle-même ne me dit rien sur la sémantique ou l'accessibilité de mon document. À la limite, elle ne me sert qu'à déboguer mes pages, mais le programme Tidy le fait aussi bien. Quel est l'intérêt alors de laisser une rubrique « Validation » dans mon sommaire ? Pour faire comme tout le monde ?

Les feuilles de style en cascade (CSS) me permettent de séparer la structure de mon document de sa présentation physique (écran de moniteur ou de portable, papier, synthèse vocale, etc.). Elles n'ont rien à voir avec la conformité de mes pages : une page peut être valide sans utiliser de feuilles de styles ou l'inverse.

Le balisage sémantique est lié à la signification des marqueurs. Certains éléments renvoient à un type de contenu (textuel comme p ou non comme img) ou à une construction logique (comme h1). Mais h1 est lui-même de type textuel, non ? C'est le point le moins clair pour moi : lire l'annexe B des directives pour l'accessibilité aux contenus Web pour plus de précisions.

L'accessibilité signifie que le contenu est accessible indépendament de l'agent utilisateur. D'après Mark Pilgrim, deux points importants sont à retenir : l'attribut alt pour les éléments images et la navigation au clavier grâce à l'attribut accesskey. J'y rajouterais un troisième point, écrire des liens explicites qui ont encore un sens en dehors de leurs contextes. Si le premier point est règlé et que je fais attention au troisième, je n'ai défini par contre aucune navigation au clavier. Il va falloir que je me penche là-dessus et que j'écrive une page expliquant ma politique d'accessibilité.

6 août 2003

blockquote, q et cite (2)

Problème : référencer chaque citation. Solution : donner à chaque élément q un attribut title, dans lequel on précise l'auteur, le titre et la page de la référence. Au cas où la référence pointée par l'attribut cite de l'élément blockquote ne se trouve pas en ligne, la remplacer par une URN indiquant l' ISBN de la source. Ce mécanisme est expliqué dans la RFC 3187.

13 juillet 2003

blockquote, q et cite

Selon la norme, cite indique un extrait ou une référence vers une autre source, blockquote indique une citation longue de type bloc (avec saut de paragraphe) et q une citation courte de type en-ligne (sans saut de paragraphe).

Ces trois éléments peuvent prendre les attributs lang et title et les éléments blockquote et q peuvent prendre en plus l'attribut cite qui fournit les indications sur l'origine de la source. Pour chacune de mes citations, j'ai besoin du titre du livre et de la page de la citation.

En m'appuyant sur l'Art d'utiliser le cite de Karl Dubost, je me rends compte que si l'exemple qu'il donne est tout à fait valable pour les citations longues, elle pose un problème pour les citations dans le corps du texte. Exemple :

<blockquote cite="Recherches logiques" lang="fr">
<p>
<q lang="fr">Une très longue citation de Husserl</q>
</p>
<cite title="Auteur">Husserl, E.</cite>
<cite title="Titre" lang="fr">Recherches logiques</cite> 
<cite title="Année">1901</cite>:
<cite title="Page">223</cite>
</blockquote>

On remarque au passage que pour le type de citation longue, il n'y a plus besoin de faire un renvoi puisque nous avons toutes les informations nécessaires. Mais le problème reste entier pour les citations en-ligne : je ne peux pas utiliser ce système. Je peux peut-être créer une classe sur l'élément blockquote pour les citations en ligne, cela gênerait moins la lecture, mais ça la gênerait quand même (et c'est pour ça que je ne suis pas satisfait). Un autre point mineur concerne les abbréviations qui courent à travers le document.

12 juillet 2003

Une reconstruction

Un exemple de reconstruction de document HTML. Notes qui serviront pour la présentation prévue pour l'association Tuxbihan, Introduction aux CSS.

La structure d'une page du mémoire est simple : elle comporte le corps du texte et des notes. Je vais donc préciser cette structure en utilisant l'élément div :

<div id="corps">
</div>

<div id="note"> 
</div>

Le corps du texte porte un titre, se compose de paragraphes et de citations. Ces dernières sont de deux sortes : les citations courtes qui s'insèrent à l'intérieur d'un paragraphe, les citations longues qui sont présentées en dehors des paragraphes. Pour les premières, j'utilise l'élément q et pour les secondes, l'élément blockquote. J'utilise classiquement l'élément h1 pour le titre de la section et l'élément p pour les paragraphes. Extrait : 

<div id="corps">

<h1>Le titre de ma section</h1>

<p>Un paragraphe <q>avec une courte citation</q> tandis
qu'ici ma citation est plus longue :</p>

<blockquote>Une citation beaucoup plus longue mis en évidence en
dehors des paragraphes</blockquote>

</div>

Je souhaite ensuite préciser les références de mes citations en dehors du corps du texte. Pour marquer ce renvoi, je vais utiliser l'élément sup après chaque citation, avec un élément a qui précisera l'identifiant, la référence et le titre de la note. Les références sont regroupées dans le deuxième niveau de la page que j'ai défini par un élément div. Extrait  

<div id="corps">

<h2>Le titre de ma section</h2>

<p>Un paragraphe <q>avec une courte citation</q>
<sup><a id="1" href="#note1" title="Note 1">1</a>
</sup>tandis qu'ici ma citation est plus longue :</p>

<blockquote>Une citation beaucoup plus longue mis en évidence en
dehors des paragraphes</blockquote><sup><a id="2"
href="#note2" title="Note 2">1</a></sup>

</div>

<div id="notes">

<p><a id="note1" href="#1" title="Note 1">Titre du livre et
année de publication.</a></p>

<p><a id="note2" href="#2" title="Note 2">Titre du livre et
année de publication.</a></p>

</div>

On remarque que le titre du bloc notes (mouahahaha) est h2 pour marquer qu'il n'est pas du même niveau logique que le titre du bloc corps. Cela posera un problème par la suite que j'examinerais plus tard.

Que reste-t-il à faire ? Il va falloir prendre en compte le fait que certaines pages vont contenir des mots d'une autre langue que la définition des pages, notament des termes ou des références allemandes ou des termes grecs. Il va falloir examiner ensuite quelle est la meilleure manière de citer les références. Enfin, si la navigation à l'intérieur d'une page est règlée à travers le système de référence, il nous faut définir la navigation externe, c'est-à-dire la navigation entre les pages. Je laisse les deux premiers points pour plus tard et je vais décrire la conception de la barre de navigation en essayant de justifier mes choix.

La première chose que je veux faire, c'est utiliser une barre de navigation qui soit disponible, non seulement pour les pages du mémoire, mais pour tout le site. Pour ce faire, je vais utiliser l'élément link qui définie un lien indépendant du média utilisé. Contrairement à a, il apparaît nécessairement dans l'élément head. Extrait :

<link rel="Table des matières" href="index.html" />
<link rel="Suivant" href="chapitre1.html" />
<link rel="Prédédent" href="introduction.html" />

Deux problèmes non-résolus pour l'instant : quelle est la distinction entre rel et rev ? A-t-on le droit de franciser ces éléments ? Je passe pour l'instant.

L'avantage pour un navigateur comme Links, c'est que cette barre de navigation apparaît au début de la page, comme ceci :

Link: Table des matières
Link: Suivant
Link: Précédent

Je vais définir ensuite une autre barre de navigation, visible aussi cette fois-ci dans Mozilla, en ajoutant un bloc à ma page :

<div id="corps">
</div>

<div id="note"> 
</div>

<div id="navigation"> 

<p>
<a href="index.html">Table des matières</a>
<a href="introduction.html">précédent</a>
<a href="chapitre1.html">suivant</a>
</p> 

</div>

C'est tout pour aujourd'hui.

- page 4 de 5 -