TONER KEBAB WIKI

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
===== 2. FLUX DE PRODUCTION PAS À PAS=====
===MISE EN PAGE GRAPHIQUE & COMPOSITION BALISÉE===
**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) .//

====Le processus de mise en page en composition visuelle====

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]]
====Le processus de mise en page en composition balisée====

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.

==Édition WYSIWYM==

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



=====MISE EN PAGE BRIQUE PAR BRIQUE=====

=====Se constituer une bibliothèque de cas=====

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]]
====ANALYSE EN AMONT====
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:

{{:wiki:tutoriels:flux-de-production:workflow_pao_web_at_a_glance.pdf|>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).

=====EXEMPLES COMMENTÉS DURANT LE WORKSHOP=====

====1. PAGE (web to print / dominante graphique)====

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

{{:wiki:tutoriels:flux-de-production:forthcome_hoplites.pdf|}}

Document issu de la modification du modèle : page A4 pour le dépliant Salon Graphique#3_CNAP 
{{:wiki:tutoriels:flux-de-production:01_page_web2print.pdf|}}



====2. FANZINE (web to print / dominante graphique)====

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

====3. LIVRE (web to print / dominante texte)====

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

{{:wiki:tutoriels:flux-de-production:matrice_print_me_moire.zip|}}



====4. DÉFILEMENT VERTICAL ++ (web to web / dominante texte/image)====


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)

{{:wiki:tutoriels:flux-de-production:salon_graphique_cnap.zip|}}





====5. DÉFILEMENT VERTICAL + (web to web / dominante texte)====

{{:wiki:tutoriels:flux-de-production:darwin.zip|}}
----
retour : 1. [[[wiki:tutoriels:flux-de-production:flux-de-production|DESCRIPTIF : FLUX DE PRODUCTION]]

suite :  3. [[[wiki:tutoriels:flux-de-production:flux-de-production_02|GÉNÉRER LES FONTES WEB]]

suite :  4. [[[wiki:tutoriels:flux-de-production:flux-de-production_03|CONTRÔLE TECHNIQUE]]

suite :  5. [[[wiki:tutoriels:flux-de-production:flux-de-production_04|PROCESSUS WEB TO PRINT]]
TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Outils de la page
