strasbourg-html2print
clone your own copy | download snapshot

About

HTML_sauce-cocktail-workshop-OSP

Explorations des possibilités HTML2print durant une semaine de workshop du 10 au 13 mars 2015.

Intervenants : Stéphanie Vilayphiou, Colm O’Neill et Ludi. Avec les étudiants en communication graphique : So-Hyun Bae, Laura Burucoa, Charlotte Chowdurry, Victor Donati, Montasser Drissi, Angéline Girard, Romain Goetz, Manon Hachad, Quentin Juhel, Théophile Martin, Arman Mohtadji, Clara Neumann, Lisa Pagès, Benjamin Riollet, Lena Robin, Hugo Serraz, Caroline Sorin.

À propos du workshop

Une fondue de mise en page web et papier (en hiver) ou un cocktail de class pour été. Par ses contraintes de tailles d'écrans - multiple devices - la mise en page web se doit d'être adaptative, quelque part consciente de l'environnement dans lequel elle s'installe. De ce point de vue elle s'oppose au design imprimé où la plupart des interfaces traditionelles tiennent nos mains sur les blocs durs de Gutenberg.

remettre le contenu en avant, a sa place d abord visser les articulations du texte avant de le deplier sur tel ou tel format À quels paramètres peut s'accrocher le metteur en page papier sur le web, quelle part de lâcher prise ? Jusqu'où peut-on ajuster les réglages typographiques a partir d un langage balisé Un même contenu est-il adaptable à différents formats papiers? L'atelier propose d'approcher la mise en forme d'un texte de manière liquide, de débrancher les réflexes de blocs À partir d'un contenu html texte et image, riche de plusieurs niveaux hiérarchiques, nous proposons de travailler sur une/des mise/s en forme vers le papier en constituant des équipes, chacune travaillant sur un format de sortie différent (basées sur une liste de formats arbitraires, par exemple les formats proposés par les services d'impression à la demande de type Lulu ou Blurb ou une liste de formats représentatifs des différents mouvement de l'histoire imprimée) En définissant un ensemble de media queries les étudiants construisent ensemble une feuille de style commune mais posent chacun les conditions qui vont identifier / typographier leur format.

À propos d'HTML 2 print

https://github.com/osp/osp.tools.html2print

This little tool is a boilerplate, a minimal example to start a print project using HTML, less/CSS and Javascript/Jquery to design it.

Why use html to make printed matters?

The most exciting reason to use HTML/CSS is the fact that you can go back and forth between code and visual manipulation thanks to the element inspector of browsers. With Javascript on top of it, you can access every object in the DOM and its properties or do programmatic manipulations. This back-and-forth between hand and code manipulations is new to print production.

The second strong reason why we set this up is that because the design is made with code/text, it means we can use collaborative text editors such as Etherpad to design with several people at the same time.

alt alt

Références

Formats

Responsive design

  • http://louisedrulhe.fr/designfluide/#sommaire → http://louisedrulhe.fr/designfluide/#espace-internet
  • http://bureau347.com/
  • http://whitney.org/
  • http://blog.froont.com/9-basic-principles-of-responsive-web-design/
  • http://www.fastcodesign.com/3036091/the-next-big-thing-in-responsive-design
  • http://responsiveicons.co.uk/
  • http://a.fastcompany.net/multisite_files/fastcompany/inline/2014/09/3036091-inline-s-0-the-next-big-thing-in-responsive-design.png
  • http://stackoverflow.com/questions/20862563/responsive-printing
  • http://colm.be/blog/index.php/posts/lessons-web-type
  • http://www.fastcolabs.com/3020038/designing-software-and-hardware-at-once
  • http://stephaniehobson.ca/2012/03/14/print-styles-responsive-design/
  • Et le texte flux: http://litteraturing.tumblr.com/page/2#82974741045

Snapshots | iceberg

Log

 

colmtattled

— adding all the folders and files of the production of the workshop week @HEAR Strasbourg

Saturday, 14th March 2015 - 19:18

 

colmtattled

— iceberg img

Sunday, 15th March 2015 - 11:34

 

colmtold

— image iceberg pyramide des formats!

Tuesday, 17th March 2015 - 21:49

 

colmemited

— parallel sync back from Ludi's images into the HEAR gh repo

Monday, 23rd March 2015 - 11:17

 

Colm O'Neilldiscovered

— Create README.md

repo @ HEAR

Friday, 13th March 2015 - 15:25

 

colmverbalised

— premier push pour rassembler/partager les fichiers

Friday, 13th March 2015 - 15:33

 

colmbabbled

— ça marche si je fais des liens relatifs vers le propre repo pour nourrir le README?

Friday, 13th March 2015 - 15:38

 

colmtalked

— ok donc pas des nom de fichiers trash à la Mac??

Friday, 13th March 2015 - 15:45

 

colmdivulged

— Syntaxxx?

Friday, 13th March 2015 - 15:47

 

colmexposed

— images dans le README, c'est ok je pense, la connection est tellement lente que j'arrive pas à les voir s'afficher :)

Friday, 13th March 2015 - 15:51

 

colmdisclosed

— rajoute du dossier de Ben & Victor

Friday, 13th March 2015 - 16:10

 

colmsaid

— on fige les styles du groupe Angéline Charlotte Manon, elles bossaient sur un pad, pas sur de la durée de vie d'un Framapad. Ce qui est sur, c'est que Manon n'a pas encore mis à jour le lien vers cette feuille de style dans son index.html, c'est dit ici pour le futur.

Friday, 13th March 2015 - 16:13

 

colmshouted

— clean des images dans le git, fallai renommer certaines nommenclatures génériques de l'outil de screenshot mac

Friday, 13th March 2015 - 16:16

 

Colm O'Neillcomplained

— Rajouter des bouts du manuel

de l'outil HTML2PRINT

Friday, 13th March 2015 - 15:56

 

Colm O'Neilldiscovered

— encore du README

avec des rajoutes des notes OSP et l'annonce du Workshop

Friday, 13th March 2015 - 16:05

 

colmwhistled

— Merge branch 'master' of github.com:HEAR/HTML_sauce-cocktail-workshop-OSP

Friday, 13th March 2015 - 16:22

 

colminterpreted

— Les fichiers du groupe du petit format, relié en live

Friday, 13th March 2015 - 16:48

 

Stéphanie Vilayphiouspoke

— ajout des noms des participants au workshop + quelques corrections et formattage Markdown

Thursday, 19th March 2015 - 11:34

 

Stéphanie Vilayphioulet on

— merge

Friday, 20th March 2015 - 11:33

 

Stéphanie Vilayphioulet on

— rm hidden Mac OS files

Friday, 20th March 2015 - 11:33

 

colmlet the cat out of the bag

— Merge branch 'master' of git.constantvzw.org:osp.workshop.strasbourg-html2print

Monday, 23rd March 2015 - 11:17