TONER KEBAB WIKI

workshop PAO LIbre (CNAP + Frank Adebiaye) http://forthcome.fr/hoplites/index.html

Ce workshop vise l'acquisition d'une méthode alternative de mise en page graphique. Au moyen de logiciels et de typographies libres, il s'agit de travailler ensemble le code et la forme visuelle associée (What You See Is What You Mean) .

Les graphistes ont généralement l'habitude de pratiquer la mise en page sur des plates formes utilisant le WYSIWYG (What You See Is What You Get). Les logiciels auxquels ils ont recours relèvent majoritairement de la suite Adobe Creative (In Design notamment): ce sont des logiciels propriétaires payant dont le code n'est pas ouvert. Ce qui signifie que le graphiste ne maîtrise pas le code informatique de sa mise en page et produit un document souvent lourd et peu ou pas adaptable aux différentes situations de lecture que les nouvelles technologies autorisent aujourd'hui (lecture sur écrans : liseuses, ordinateurs, tablettes, téléphones portables…). Le graphiste devient également tributaire du logiciel qui formate ses documents et du cloud associé. La Suite Adobe, par exemple, est désormais disponible par abonnement; si le graphiste n'est pas à jour dans ses paiements, il ne peut plus accéder à ses contenus.

http://www.numerama.com/magazine/25896-adobe-passe-photoshop-et-illustrator-sous-abonnement.html

La composition balisée suppose en amont un travail d'analyse de la structure sémantique du texte (cf. composition structurée), de façon à annoncer clairement quelle hiérarchie sera opérée pour la déclarer au moyen de balises au sein du code. Il s'agit d'un préalable à la composition, ce qui rend plus difficile la démarche intuitive et essentiellement visuelle encouragée par les logiciels WYSIWYG.

Chaque opération graphique va être nommée. L'avantage toutefois va être d'automatiser un grand nombre d'opérations qui sont parfois laborieuses ou source d'erreurs, telles que l'indexation et le référencement. Ce balisage va permettre différentes requêtes et notamment la recherche par mots clés ou l'utilisation de métadonnées pour légender automatiquement les images. Il est également la condition d'un contenu fluide adaptable à des supports de lectures de formats différents, puisqu'il conserve la hiérarchie des informations tout en modifiant la composition.

(texte suivant en page 8 de http://www.france-universite-numerique.fr/IMG/pdf/guide_chaines_editoriales.pdf)

La plupart des systèmes d'édition numérique se fondent sur le paradigme du WYSIWYG, « What you see is what you get », ou littéralement en français : « Ce que vous voyez est ce que vous obtenez ». Cette approche vise, en résumé, à permettre à l'utilisateur de créer un document tout en en composant le rendu final, comme dans sur un support traditionnel non numérique.

Le WYSIWYM oppose sa démarche à celle du WYSIWYG en partant non pas du résultat graphique, mais de l'information à véhiculer [WYSIWYM (what you see is what you MEAN)], de sa signification et de l'intention auctoriale.

La chaîne éditoriale se fonde, elle, sur le concept du WYSIWYM, « What you see is what you mean », c'est à dire : « Ce que vous voyez est ce que vous voulez dire». Le principe est pour un logiciel, de représenter les informations en fonction de leur sens [What you see is what you mean], de l'information à véhiculer (par opposition à “représenter les informations sous leur forme finale, pour impression, avec mise en forme à l'identique…”).

L'édition WYSIWYM est l'instrument technique de la séparation entre le format de création (sémantique et orienté métier) et le format de publication.

Frank Adebiaye, dans l'onglet Hinterland (arrière-pays en allemand) de son site, explique son processus de travail et rend publics également les fichiers html qu'il a élaborés. Cet hinterland s'apparente à un atelier dont les portes ouvertes autorisent le visiteur à prendre connaissance de la méthodologie élaborée. Chaque cas constitue une base de travail, réutilisable, aux paramètres variables. Son adaptation pour une nouvelle composition visuelle exige, pour être efficace, que la morphologie et l'utilisation du nouveau document s'apparentent au modèle initial.

http://www.forthcome.fr/hinterland/index.html

Avant toute chose, le graphiste doit identifier clairement le mode de lecture appliqué au document à mettre en page et les principales propriétés de ce document.

—Voici un rapide aperçu des situations de consultation et de lecture les plus courantes pour un document à mettre en page:

>image 1 : carte des cas / web to print et print to web (Frank Adebiaye ©)

À noter : on parle de web parce que l'html suppose un navigateur pour l'affichage écran lié au code.

On parle:

• de destination print, parce que le document ainsi programmé va être transféré en page imprimée via un PDF (nous verrons plus avant que ce PDF demande à être correctement paramétré pour l'impression en CMJN);
• de destination web, parce que le document ainsi programmé sera affiché et consulté sur écran. Se posera alors la question de sa médiagénie et de sa dimension responsive (voir lexique).

Propriétés : modèle de page avec bloc de texte centré horizontalement et verticalement + en-tête et pied-de-page

http://forthcome.fr/hoplites/ecriture_totale.html

forthcome_hoplites.pdf

Document issu de la modification du modèle : page A4 pour le dépliant Salon Graphique#3_CNAP 01_page_web2print.pdf

Propriétés : modèle de fanzine avec têtière en SVG, article central sur 3 colonnes notes sur 2 colonnes et crédits sur 1 colonne

http://www.fadebiaye.com/read/rhino/rhino10_en.pdf

http://typographisme.net/post/De-la-cesure-et-du-Web

Propriétés : modèle de livre avec bloc page centré horizontalement et verticalement + en-tête et pied-de-page & sommaire en javascript

http://www.forthcome.fr/hoplites/zeitgeist_demo.pdf

matrice_print_me_moire.zip

Propriétés : séquençage du contenu, ancres, défilement vertical, défilement horizontal (pour la galerie d'images uniquement), partage de la surface en zones inversées, affichage ou masquage de contenu, image en arrière-plan et texte en premier plan…

• defilement_vertical.html : - image en arrière-plan - titres de niveau 1 et 2 au premier plan - en-tête de page / d'écran avec liens cliquables - pied de page / d'écran fixe

• jour_nuit.html (accessible par le lien « jour / nuit » dans l'en-tête de la page « défilement vertical ») : - séparation de la page en un espace « matin » (texte bleu sur fond blanc) et un espace « après-midi » (texte blanc sur fond bleu)

• page_secondaire.html (accessible par le lien « détail article » dans l'en-tête de la page « défilement vertical ») - en-tête de page / d'écran sur le côté afin de servir de sommaire toujours accessible – écran 1 : détail article 1 – écran 2 : détail article 2 avec affichage / masque de texte

• ancre « #01 » ((accessible par le lien « écran 1 » dans l'en-tête de la page « défilement vertical ») - galerie d'images avec défilement horizontal

N.B. : la feuille de styles utilisée pour l'ensemble de ces pages est « style_.css » (fournie également dans l'archive ci-dessous)

salon_graphique_cnap.zip

darwin.zip

retour : 1. DESCRIPTIF : FLUX DE PRODUCTION

suite : 3. GÉNÉRER LES FONTES WEB

suite : 4. CONTRÔLE TECHNIQUE

suite : 5. PROCESSUS WEB TO PRINT