EMI | Typographie et numérique

Typogaphie

Les lettres

Vers 1 700 av. J.-C., les Phéniciens découvrent que les articulations élémentaires du langage sont très réduites et peuvent se représenter par une vingtaine de signes graphiques, les lettres. L'alphabet dont nous nous servons, et qui découle des alphabets phéniciens et grecs, a été dessiné par les Romains trois siècles avant notre ère et introduit en Gaule en 59 av. J.-C avec dix-neuf signes, lettres et chiffres.

Combien y-a-t-il de lettres dans l'alphabet ?

Pour le savoir comptons le nombre de lettre de ce pangramme

Dès Noël où un zéphyr haï me vêt de glaçons würmiens, je dîne d'exquis rôtis de bœuf au kir à l'aÿ d'âge mûr & cætera

Combien de lettres ?

Bravo ! Il y a bien 42 lettres !
En effet, à l’alphabet latin moderne de 26 lettres il faut ajouter les lettres issues de cinq diacritiques, qui l'enrichissent alors de treize voyelles accentuées et du graphème c cédille « ç » ainsi que deux ligatures e dans l’a « æ Æ » et e dans l’o « œ Œ ».
Ce sont donc bien au total 42 lettres qui composent l'alphabet français (21 voyelles et 21 consonnes).

Mais en informatique toutes les lettres sont d'abord des chiffres.

L'ASCII
Pour des raisons historiques (les grandes sociétés associées pour mettre au point l'ASCII étaient américaines) et techniques, ce codage ne prenait en compte que 128 caractères.
Le code ASCII ne contient ni caractères accentués, ni caractères spécifiques à une langue soient 26 lettres.
www.table-ascii.com/

L'ISO/CEI 8859-1
Il définit 191 caractères de l'alphabet latin, avec les caractères accentués utiles aux langues originaires d'Europe.
Mais le symbole de l'euro € ou certaines lettres (comme les lettres « œ », « Œ » et « Ÿ », ne sont pas reconnues. ISO 8859-15 ajoute entre autres le caractère de l' euro ( € ) et les caractères Œ , œ et Ÿ qui manquaient pour l'écriture du français, les caractères Š et š pour le du finnois.
Le E dans l'O ou cet article du Monde.

Unicode
L'Unicode est géré par une organisation à but non lucratif (le Consortium Unicode) ayant pour but d'attribuer un numéro à tout caractère utilisé dans une langue humaine.
Unicode

UTF-8
L'Unicode Transformation Format est un encodage d'Unicode. Les premiers caractères d'UTF-8 sont communs à l'ASCII.
Les différents caractères spéciaux :
https://unicode-table.com/fr/

Majuscules et minuscules

En typographie, pour désigner les majuscules et minuscules, on parle de capitales et de bas de casse, parce que les types de plomb étaient rangés dans un tiroir nommé casse. Les minuscules étaient dans le bas de casse et les majuscules, moins utilisées, en haut.

En français, une majuscule est un repère visuel qui facilite la lecture d'un texte. Traditionnellement, la majuscule est la première lettre d'un mot, sauf dans le cas de noms composés ( Pays-Bas , le Très-Haut ).

En outre, si la première lettre est ligaturée, alors toute la ligature est en capitale ( Œuvre ).

Les majuscules s'utilisent :

• au premier mot d'un texte ;
• au premier mot d'un alinéa : c'est notamment traditionnellement le cas en poésie au début de chaque vers ; dans le cas d'une phrase divisée en alinéas, cette règle n'est plus toujours respectée aujourd'hui ;
• au premier mot suivant un point (également après le point d'interrogation, le point d'exclamation et les points de suspension, uniquement quand ils équivalent à un point), sauf après un point abréviatif ;
• au premier mot d'une phrase citée

Les majuscules sont accentuées. Pour ce faire, il suffit d'appuyer sur la touche Alt du clavier et de saisir les chiffres (précédés de 0 lorsque c'est nécessaire) sur le clavier numérique (voir tableaux caractères spéciaux paragraphe suivant).

Les caractères spéciaux

Dans un traitement de texte, appuyer sur la touche Alt du clavier et saisir le code Unicode de la lettre souhaitée puis touche entrée.

Attention ! La valeur 0169, © est différente de 169 ®
En html, le code est constitué de lettres et encadré de l'esperluette "&" et du point-virgule ";"

Quelques caractères spéciaux

http://www.toutimages.com/codes_caracteres.htm

Les espaces

Quel que soit le texte, outre les mots, ce sont d'abord les espaces qu'il faut savoir maîtriser. Des phrases mal alignées, et c'est l'assurance d'un CV qui passe directement à la poubelle.

La gestion des espaces est codifiée par des règles souvent simples, quelques fois subtiles et tarabiscotées, mais toujours incontournables.

L'espace (mot masculin) entre les mots est composé d'espaces (mot féminin) de taille variable. Une espace justifiante est donc un espace, réalisé avec la barre d'espace du clavier, mais de taille variable. Seules les polices dites "non proportionnelles" type " Courier " ou " Courier New "ont une largeur de caractère identique. Dans l'utilisation du traitement de texte, cela occasionne d'ailleurs l'une des erreurs les plus fréquentes qui consiste à positionner du texte en utilisant des espaces à la place de la touche tabulation.

Dans l'utilisation du traitement de texte, cela occasionne d'ailleurs l'une des erreurs les plus fréquentes qui consiste à positionner du texte en utilisant des espaces à la place de la touche tabulation.

L'appui sur la touche permet d'afficher les caractères non imprimables, c'est à dire ceux qui règlent la mise en page mais n'apparaissent qu'à l'écran et pas à l'impression.

Et ce qui ne semble être qu'un détail, devient discriminant par exemple pour un CV. L'œil perçoit le moindre défaut d'alignement et votre CV risque fort de passer à la trappe en moins de temps qu'il n'en faut pour le lire...

Outre les tabulations et autres fonctions dont la maîtrise est indispensable à une bonne présentation, la première chose à connaître ce sont les espaces...

On distingue donc :

• L'espace justifiante : c'est l'espace entre les mots. Elle est dite  « justifiante » car sa taille servira de variable d'ajustement lorsque le texte sera justifié. Cet espace n'a pas toujours la même taille et ne peut donc servir par exemple à aligner un texte.
  
• L'espace insécable : cette espace a la particularité de préserver la continuité entre le mot qui la précède et le mot qui la suit. Ainsi, en cas de redimensionnement du texte il n'y aura pas, par exemple de ":" séparé du mot qui le précède ^[ .
• L'espace fine : il s'agit d'une espace qui est environ deux fois plus étroite que l'espace justifiante ordinaire ¹ .

 L'espace justifiante : touche espace du clavier

 L'espace insécable : Ctrl+Maj+Espace ou   (en html) ou   au clavier

 L'espace fine :   (en html) ou &#8201 au clavier

S'il y a bien une espace difficile à reproduire sur Internet, c'est l'espace fine insécable. Celle-ci n'est tout simplement pas définie dans la norme Unicode.

Source : http://typographisme.net/post/Les-espaces-typographiques-et-le-web

Ponctuation		Espace avant		Espace après
.	Point	Aucune		Espace justifiante
,	Virgule	Aucune		Espace justifiante
:	Deux-points	Espace insécable		Espace justifiante
;	Point-virgule	Espace fine insécable		Espace justifiante
!	Point d'exclamation	Espace fine insécable		Espace justifiante
?	Point d'interrogation	Espace fine insécable		Espace justifiante
«	Guillemet ouvrant	Espace justifiante		Espace insécable
»	Guillemet fermant	Espace insécable		Espace justifiante
(	Parenthèse ouvrante	Espace justifiante		Aucune
)	Parenthèse fermante	Aucune		Espace justifiante
[	Crochet ouvrant	Espace justifiante		Aucune
]	Crochet fermant	Aucune		Espace justifiante
-	Trait d'union	Aucune		Aucune
­	Tiret long ouvrant	Espace justifiante		Espace insécable
­	Tiret long fermant	Espace insécable		Espace justifiante

Quelques cas particuliers

• Pas d'espace entre les points d'exclamation, d'interrogation associés aux points de suspensions : ?!?...
• Les nombres sont séparés par une espace insécable et pas un point, sauf pour les dates, années, codes postaux, pages ou paragraphes d'un livre : page 2807, 2 807 euros,
• Pas d'espace après la virgule d'un nombre pourvu d'une décimale : Pi = 3,14
• Lorsqu'un point est abréviatif, l'on en rajoute pas un deuxième point. S'il clos une phrase, il est suivi d'une majuscule mais pas dans le cas contraire.  M. le Maire affirma (p. 12). La solution est dans les W.C.

Les mots

D’un point de vue informatique, un mot est une suite de caractère entre 2 blancs...

Mais pour en savoir plus, consulter le module "structurer un texte".

Un document numérique ?

Le document numérique : un document électrique

Un document numérique est une forme de représentation de l'information consultable sur un écran

Le document numérique est  :

• ouvert dans le sens qu'il n'est pas achevé, fixé dans sa forme ou son contenu mais il peut être modifié, enrichi...
• plastique, c'est avant tout un fichier, qui a été produit dans un certain état, à partir d’outils déterminés (traitement de texte, tableurs, application...)
• appareillé au sens où sa lecture ne se fait plus avec la même autonomie que le document classique, mais doit passer par le truchement d’un dispositif technique
• automatisable, sa production, sa forme son contenu peuvent être générés à la volée à partir d'un langage de programmation. Exemple type, un itinéraire sur Openstreetmap
• auto-décrit, le document numérique intègre dans sa structure même des éléments de description sémantique (métadonnées, balises dites sémantiques qui indiquent la nature du contenu bien qu'elles n’apportent aucune information sur le sens de ce contenu... qui lui est l'objet du Web sémantique, toujours annoncé et encore à réaliser...)
• pas pérenne. Sur le plan conceptuel, cela revient à se demander ce qu’il faut conserver : quelle version, autrement dit quel « état » du document ?
• infiniment reproductible, à coût marginal quasiment nul. Mais au-delà même de la question des droits d’auteur et de la propriété intellectuelle, la question de « l’autorité » se pose. Auctor , auctoritas, les mots auteur et autorité ont la même racine

Les fichiers

On l'a vu, un document numérique est d'abord constitué d'un ou plusieurs fichiers.

Qu'est-ce qu'un fichier ?

Un fichier est un ensemble de données informatiques stockées sur un support de stockage pérenne (disque dur, CD, DVD, clef USB…) possédant un nom, un chemin d'accès et généralement implicitement associé à un format (format image, format de documents, formats de base de données…).

Le nom des fichiers

La manière de nommer les fichiers dépend fortement du système d'exploitation. Longtemps la longueur et la forme des fichiers était très limitée, par exemple avec le système DOS et le fameux 8.3 : 1 à 8 caractères pour le nom, un point puis 0 à 3 caractères pour l'extension, sans distinction de la casse, ni espace, virgule etc.

page.odt

image.png

document.pdf

De nos jours les noms des fichiers peuvent prendre bien plus de liberté dans la forme, à tel pour qu'un grand classique de "baby hacking" consiste à mettre plein d'expaces avant le nom de l'extension d'un fichier pour la masquer...

Puis petit à petit la taille des noms de fichier a passé à 255 caractères Unicode.

Le chemin d'accès

Le chemin d'accès d'un fichier définit sa localisation sur un périphérique donné. C'est une chaîne de caractères qui définit la suite des répertoires à parcourir pour atteindre le fichier depuis la racine du périphérique.

X:\Répertoire\Répertoire\..

D:\lisletdelisle\Site\moocs\mediateks

Chemin relatif ou chemin absolu ?

Le chemin absolu fait toujours référence à la racine du disque (unité logique) sur lequel est située l’arborescence des dossiers avec lesquels on travaille.

On le reconnait :

• soit par le / qui signifie que l'on est à la racine du site,
  

  /dossier/page.html

   

• soit par son adresse complète
  

  D:\lisletdelisle\Site\moocs\mediateks\dossier\page.html

Mais si le chemin change (par exemple le fichier page.html n'est plus dans dossier mediateks), impossible de le retrouver. C'est ce qui explique souvent les images absentes dans une page.

Le chemin relatif fait référence à la cible à partir de la page actuelle.

Supposons que nous souhaitons afficher l'image nommée image.png qui se trouve dans le dossier images alors que nous affichons actuellement le fichier index.html.

Pour accéder à cette image, le chemin relatif est le suivant

images/image.png

Si nous nous trouvions à l'intérieur du dossier prod et que nous souhaitions afficher la même image, nous devrions monter d'un niveau dans l'arborescence (autrement dit le répertoire parent) ce qui se fait de la manière suivante

img/image.png

Résumons :

• pas de slash signifie que le fichier ou le répertoire est cherché à partir du répertoire courant
• ../ permet de remonter d'un niveau, ../../ de deux niveaux etc.
• ../dossier/ permet de remonter d'un niveau et d'ouvrir le répertoire dossier

Les extensions de fichier

En informatique, une extension de nom de fichier (ou simplement extension de fichier, voire extension) est un suffixe ajouté au nom d'un fichier pour identifier son format.
Ainsi, on dira qu'un fichier nommé fichier.txt a l'extension "txt" ou ".txt".

Elle permet de déterminer rapidement à quel logiciel est rattaché un fichier, par exemple : un fichier .doc est rattaché au traitement de texte Word, un fichier .jpg est un fichier image...

Liste des principales extensions de fichiers.

http://fr.wikipedia.org/wiki/Liste_d%27extensions_de_fichiers

Lire un fichier

Fichiers et répertoires disposent de différentes permissions qui spécifient qui peut y accéder ainsi que le type d'accès auquel un utilisateur a droit :

• Lire ou Read - Autorise la lecture du fichier
• Ecrire ou Write - Autorise l'écriture et la modification du fichier
• Exécuter eXecute - Autorise l'exécution d'un fichier ou l'accès à un répertoire

Ainsi un fichier qui aurait des droits du type RW pour autorise la lecture et la modification, mais pas son exécution (par exemple pour un programme).

Les répertoires

Un répertoire (appelé également dossier ou folder en anglais) est un objet informatique pouvant contenir des fichiers.

Imaginez une grande commode qui contient des tiroirs dans lesquels pourraient se trouver des fichiers ainsi que d'autres tiroirs. Un répertoire peut en effet contenir :

• des fichiers
• d'autres répertoires

Les formats image

Les formats les plus couramment répandus sur le Web sont le JPEG et lePNG. Le format SVG commence lui aussi petit à petit à apparaître. L'un des plus anciens, le gif, revient à nouveau grâce à sa version animée.

Le format jpeg ( Joint Photographic Expert Group ) est conçu pour réduire le poids des photos (c'est-à-dire la taille du fichier associé), et dégrade assez peu l'original lors de la compression. La compression peut varier de quelques à 16 millions de couleurs différentes. L'extension est ".jpg" ou ".jpeg".
Particulièrement adapté aux photos.

Le format PNG ( Portable Network Graphics ), plus récent, est adapté à la plupart des graphiques et est destiné à remplacer le format GIF. Il gère la couleur transparente, et existe en deux versions, en fonction du nombre de couleurs que doit comporter l'image :

• PNG 8 bits : 256 couleurs
• PNG 24 bits : 16 millions de couleurs (autant qu'une image JPEG)

L'EPUB prend également en compte les images au format svg.
Il s'agit d'un format vectoriel, qui évite donc aux images de se déformer, de pixelliser, lors de leur redimensionnement, ce qui est important notamment pour la page de couverture.

Le gif (Graphics Interchange Format) est un format qui date de 1987 et permet d'enregistrer 256 couleurs différentes.
Cette limitation à 256 couleurs n'est pas gênante pour les logos, les graphiques et la plupart des images synthétiques. En revanche une photographie couleur de qualité nécessite plus de nuances. Une couleur peut être transparente.
Ce format est utilisé sur le Web depuis 1993 et est revenu à la mode avec sa version animée. Plusieurs images se succédant sont compilées en un seul fichier, ce qui permet de créer facilement des animations.

De fait l'on se souciera simplement ici de n'utiliser que des images au format jpeg (pour les photos) et png (pour les graphiques), gif éventuellement animé, en prenant soin de les réduire à la bonne taille.
Attention aux png qui peuvent prendre des tailles bien différentes selon leur encodage. Le format svg reste encore assez rare bien qu'en développement.

Les formats audio

Pour diffuser de la musique ou n'importe quel son, il existe de nombreux formats audio :

• MP3 : C'est l'un des plus vieux, mais aussi l'un des plus compatibles (tous les appareils savent lire des MP3), ce qui fait qu'il est toujours très utilisé aujourd'hui
• AAC : :utilisé majoritairement par Apple sur iTunes, c'est un format de bonne qualité. Les iPod, iPhone et autres iPad savent les lire sans problème, les autres...
• OGG : le format Ogg Vorbis est très répandu dans le monde du logiciel libre, notamment sous Linux. Ce format a l'avantage d'être libre.
• WAV ( format non compressé : fichier est très volumineux, à éviter

Navigateur	Formats audio
	Ogg Vorbis	MP3	WAV

Moralité ! Pour être sûr d'être "entendu", il faudra encoder le fichier au moins en mp3 et en ogg .

Les formats vidéo

Comme souvent, aucun navigateur à ce jour ne prend en charge la totalité des formats et il faut toujours en proposer au moins 2 pour être certain de pouvoir être vu (sauf à proposer le lecteur type flash avec le fichier) :

• OGG (type mime video/ogg, extension .ogv) est un format ouvert*
• H.264 ou MPEG-4 (type mime video/mp4, extension .mp4) *
• WebM , (type mime video/webm, extension .webm) format ouvert*

Note : Le type mime est un identifiant de format de données sur internet en deux parties.

Navigateur	Formats vidéo
	Ogg Theora	H.264	WebM
	Installation manuelle	9.0	Installation manuelle
	3.5	Non	4.0
	3.0	Non	6.0
	Installation manuelle	3	Installation manuelle
	10.50	Non	10.60