typoLa typographie (souvent abrégé typo) désigne les différents procédés de composition et d’impression utilisant des caractères et des formes en relief, ainsi que l’art et la manière d’utiliser les différents types de caractères dans un but esthétique et pratique.

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 pangrammeplus d'infos

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 ?

coche coche

 

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.
lien 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.
lien Le E dans l'O

 

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.
lien 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 :
lien www.web1.pro/unicode.htm

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.

typo lettres

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 :

 

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

Lettres HTML Code Num.  
© Copyright © Alt+0169
Euro € Alt+0128
¢ Cent ¢ Alt+0162
$ Dollard $ Alt+36
£ Livre &pound Alt+0163
æ Æ E dans l'a æ Aelig; Alt+0230 Alt+0198
œ, Œ E dans l'o œ Oelig; Alt+0156 Alt+0140
Ê E accent circonflexe majuscule Ê Ê Alt+ 0202
Ô O accent circonflexe majuscule Ô Ô Alt+ 0212
Î I accent circonflexe majuscule Î Î Alt+ 0206
Ä A tréma majuscule Ä Ä Alt+ 0196
É É É Alt+0201
« Guillemet ouvr. « Alt+0171
» Guillemet ferm. » Alt+0187
Triple point … Alt+0133
§ Section § Alt+0167
± Plus ou moins &plusmn' Alt+0177
Point médian &bull' Alt+7
Somme ∑  
Racine √  
Infini &infin  
µ Micro µ Alt+0181
° Degré ° Alt+0176
ε Epsilon &epsilon'  
¼ Un quart ¼ Alt+172
½ Un demi ½ Alt+0189
¾ Trois quarts ⅓ Alt+0190
Tiret – Alt+0173
- Trait d'union - Alt+045
| Barre verticale | Alt+0124
ø Ensemble vide Ø Alt+0248
Paragraphe ¶ Alt+0182
¬ Signe non ¬ Alt+0172
ƒ Fonction ƒ Alt+0131

 

lien 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.

 

tabulation 1

tabulation 2

L'appui sur la touche non imprimables 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.

tabulation  3

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 :

 

espace justifiante  L'espace justifiante : touche espace du clavier

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

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

 


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

Quelques cas particuliers

 

[ 1 ] 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

 

 

la ponctuation Comme son nom l'indique, un site sur la ponctuation qui vous aidera à ne plus rater aucune virgule, guillemet ou point...

 

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  :

 

source : Information et document numérique : Entre métaphore et matérialité. Revue Sciences de la société Article paru dans le n° 68 de mai 2006 Dossier : Pratiques sociales du document Coordonné par Caroline Courbières et Gérard Régimbeau

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

 

Quelques recommandations pour les noms de fichiers

Noms corrects

Noms incorrects

Erreur commise

monfichier.doc

mon fichier.doc

espace dans le nom

mon_image.png

mon_image

pas d'extension

ukulele.mp3

ukulélé.mp3

caractère accentué

film003.mov

film:003.mov

: dans le nom de fichier

exemple-test.rtf

exemple&test.rtf

caractère spécial

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 :

 

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.

arborescenceSupposons 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 :

 

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.

Lien 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 :

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

dossierUn 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 :

arborescence

Les formats

Qu'est-ce qu'un format ?

Le format d'un fichier est un ensemble de conventions définissant la représentation des données qu'il contient : la localisation et le codage des différents types d'informations contenues dans le fichier.

La méthode de base pour déterminer le type d'un fichier est de regarder son extension.

Lien http://www.europschool.net/static/formation/pdf/formats.pdf

Interopérabilité

Qui n'a jamais rencontré ce type de message...

interopérabilité

En l'occurrence ce fichier, au format .doc, réalisé dans une version béta de Word, ne peut plus être ouvert et affiché, même avec une version actuelle de Word.

Jusqu'à récemment lire un fichier réalisé avec un traitement avec un autre relevait de l'exploit et ce n'est que depuis peu, que l'on peut lire un fichier avec un autre logiciel que celui qui a servi à le créer.

Un format est dit interopérable si les documents, feuilles de calcul, présentations et formulaires peuvent être enregistrés dans un format accessible à tous et utilisable et licenciable par tous, sans droits d'auteur.

Le format est également dit ouvert s'il peut être lu sans restriction et par différents logiciels, par opposition aux formats fermés qui ne peuvent être lus que par des logiciels propriétaires.

Si vous ne possédez pas, ou plus le logiciel nécessaire à la lecture du fichier, ou tout simplement pas la bonne version, le document sera définitivement perdu.

Fuir définitivement les formats fermés !

 

lien http://fr.wikipedia.org/wiki/Format_ouvert

Nous n'aborderons ici, de préférence, que les formats ouverts, interopérables, autrement dit sans aucune entrave légale à leur libre utilisation. Un document enregistré dans un format ouvert sera indépendant du logiciel utilisé pour le créer, le modifier, le lire et l'imprimer. L'interopérabilité laisse également le choix du logiciel pour la lecture.
Pouvoir lire au moins un format ouvert, permettre l'exportation des données personnelles, voilà deux critères pour ne pas dire exigences minimales pour tout outil de production de données.

OpenDocument Text, Hypertext Markup Language (.htm ou .html), XHTML (.xhtml), Feuilles de style en cascade (.css) Tableur : OpenDocument Spreadsheet (.ods) Enregistrements biomédicaux : European Data Format (.edf) Document imprimable : Document PDF (.pdf) Livre numérique : EPUB (.epub)

Les formats texte

- Le format texte brut : ASCII (.txt)

Le texte brut ou plain text représente le contenu brut et interopérable du texte. Ce type de fichier ne contient que les caractères, sans leur apparence. Le plain text peut être affiché de diverses façons et nécessite un processus de rendu pour le rendre visible. Le plus souvent, l'extension d'un texte brut est .txt

Voici, à titre d'exemple, les 95 caractères et signes du codage ASCII.

! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @[ \ ] ^ _ `{ | } ~
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Une variante du format texte brut est le format rtf, pour Rich Text Format, initialement créé par la société Microsoft, non compressé et reconnu par la plupart des logiciels de traitement de texte. Il est à noter que les nouveautés introduites par Word 10 ne sont plus traduites en RTF, ce qui confirme le remplacement par Microsoft du format RTF par Open XML.

-Le format OpenDocument (.odt)

asciiOpenDocument est un format ouvert de données pour les applications bureautiques : traitements de texte, tableurs, présentations, diagrammes, dessins et base de données bureautique. La spécification OpenDocument s'est très largement inspirée du format créé pour les premières versions de la suite bureautique libre OpenOffice.org .

C'est le format par excellence des textes.

Depuis, de nombreux traitements de textes ont adoptés ce format ouvert.

Open office et Libre office

OpenOffice.org est un projet né le 13 octobre 2000 à l'initiative de Sun Microsystems en vue de produire un intégré bureautique libre fondé sur StarOffice. Dans le cadre de sa politique de transparence, le format de stockage utilisé par OOo sera dès la version 2.0 conforme au format ouvert OpenDocument, adopté par l’ISO, comme format bureautique de référence. OOo permet également l'export au format PDF.

open et libre office

Lien http://www.openoffice.org/fr/

 

libre-office

Lancé en 2012 LibreOffice découle du projet OpenOffice initialement mis en place par Sun puis racheté par Oracle en 2010. LibreOffice est une suite bureautique libre et gratuite qui offre des modules de traitement de textes, tableur, présentation, dessin vectoriel, base de données, et édition de formules mathématiques.

Lienhttp://fr.libreoffice.org/

Lienhttp://fr.wikipedia.org/wiki/OpenDocument

- Le format PDF

« Le Portable Document Format, communément abrégé en PDF, est un langage de description de pages créé par la société AdobeSystems et dont la spécificité est de préserver la mise en forme d'un fichier–polices d'écritures, images, objets graphiques, etc. – telle qu'elle aété définie par son auteur, et cela quels que soient le logiciel, le système d'exploitation et l'ordinateur utilisés pour l'imprimer ou le visualiser. »

Lien http://fr.wikipedia.org/wiki/Portable_Document_Format

La première version date de 1993. Pour garantir la portabilité, il faut utiliser et intégrer dans le PDF l'une des polices redistribuables (quatorze polices sont fournies en standard). Le lecteur « Adobe Reader », est diffusé gratuitement par Adobe. Le« rédacteur » est payant.
De nombreux autres lecteurs, dont certains sous forme de logiciels libres sont également proposés. PDF possède un système de gestion numérique des droits (DRM), qui permet de limiter la lecture ou la modification du document. L'intégration de vidéo ou de fenêtres 3D est possible.

PDF Il existe de nombreux outils pour générer du PDF. Libre office ou OpenOffice permettent une exportation directe, de même que les dernières versions de Word.
Citons également PDFcreator, qui s'installe comme une imprimante et qu'il suffit de sélectionner comme telle pour générer un fichier PDF.
Cependant, pour une gestion optimisée des PDF, par exemple des formulaires éditables et enregistrables, le logiciel original, autrement dit Acrobat d'Adobe reste incontournable.
Lien http://www.adobe.com/fr/products/acrobat.edu.html

- Le format epub3

epub « .EPUB » vient d' Electronic PUBlication. C'est le format ouvert et standardisé proposé par l'International Digital Publishing Forum (IDPF). La version 3, basée sur les normes HTML5 et CSS3, met l'accent sur l'interactivité, permet l'insertion de fichiers audio ouvidéo et la prise en charge de l'affichage de toutes les langues. JavaScript pour l'interactivité, SVG pour les images(vectorielles, exemple ), text-to-speech (TTS) pour la synthèse vocale, prise en compte des métadonnées.
Ce format atteint désormais une maturité suffisante. Les textes européens seront d'ailleurs tous accessibles dans ce format numérique et dans 23 langues.

Les ouvrages au format EPUB sont en gros des sites web assez basiques, auxquels l'on a adjoint une table des matières et des liens entre les pages.

En cela, il n'est guère différent d'un PDF, sauf qu'il s'adapte à la taille de l'écran et propose donc un meilleur confort de lecture.


Lien http://idpf.org/epub/30

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.

jpeg 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.

 

 

png 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 :


 

svg 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.

 

globe

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 :

 

Navigateur Formats audio
  Ogg Vorbis MP3 WAV
Internet Explorer non check check
Mozilla Firefox check non check
Google Chrome check check check
Safari non check check
Opera check non check

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) :

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
Internet Explorer Installation manuelle 9.0 Installation manuelle
Mozilla Firefox 3.5 Non 4.0
Google Chrome 3.0 Non 6.0
Safari Installation manuelle 3 Installation manuelle
Opera 10.50 Non 10.60