Supervised by Dominique Cunin, Raphaël Bottura and Romain Laurent.

Objectives, Participants & Organization

The short presentation of this workshop is available in this page Propagation Workshop #3 — Izmir University of economics, Visual Communication Department, May 13th-17th 2024

Results

First phase, two groups

Summary of events

Raphaël Bottura and Romain Laurent provided an introduction to the basic layout tools using the web-to-print tools developed by the EPE project. The group of 5 students from the Izmir economics VCD manipulated the 'Basic' templates that we had used in previous workshops and made minor corrections. The essential knowledge that was passed on during these two days was as follows:

• Markdown and its equivalence with HTML
• CSS and its ability to enable rich graphic design choices for printed media
• the translation chain between Markdown and HTML, then its layout using Paged.js

The content chosen by the Izmir economics team came from a variety of online sources and in a variety of formats: pdf, html pages and raw text. The first step was therefore to find ways of converting these files to a 'flat' text file, which is the one used by markdown. This was the first time this approach had been used in our workshops. In previous sessions, the students had already used word processors to aggregate content or write it themselves. This new phase showed us the usefulness of describing the different processes for converting one document format to another.

This phase should be integrated into our processing chains and could lead to the creation of a list of existing open source tools enabling these conversions, or, more generally, methods for carrying them out efficiently, with warnings of certain pitfalls and limitations. The source formats that cause the most problems are PDF, which fixes text and image content in a given layout, and proprietary formats that lose styles and layout when simply copied and pasted into a 'flat' text file (the old .doc format, for example).

The working environment remained the same as for previous sessions: VSCode as a code editor for writing sources and launching a local server to view the results in a browser. Similar working environments had already been discussed by Daniele Savasta during an introduction to P5.js, with one major difference: with P5.js, the code editor is integrated into a website that allows the result to be viewed in real time in a rendering space, as soon as the source code is edited. This immediacy does not exist in the more traditional environment offered by VSCode, which separates writing time from consultation time. The prototype editions were printed at the end of the second day in order to make the entire creation chain visible.

Alongside this initiation, the team of students from Esad-Valence studied the texts chosen by the Izmir team and worked on hypotheses for an interactive graphic interface that would allow the content to be consulted on screen before being printed.

Contributions to the EPE project

In addition to the publications that this phase produced and the knowledge transfer that it allowed, the hypothesis of a lightweight editing tool accessible directly online was formulated during an evaluation. It would be a website giving direct access to the Markdown and CSS files of our template, and displaying alongside them the result layout created by Paged.js. A prototype was produced after the workshop to serve as a proof of concept.

This prototype tool was presented to the consortium at the workshop's debreif videoconference. It was decided to continue the investigation with a goal of producing a functional prototype to facilitate the work of our partners' beginner students. It would facilitate the learning process and simplify the technical implementation for the initiation phase of a course dedicated to web-to-print.

Screenshot of the workshop online debriefing, held on June 13 2024

This is a major contribution to the EPE project, enabling us to share an induction tool that could be used by a large number of instructors and students, by the members of our consortium and beyond.

Second phase, working by pairs

The work by pairs of students began with a mutual presentation of the students' work: what the Izmir students had attempted to do with their page layout work on the one hand, and what the Valence students had imagined as an interactive consulting interface on the other. Each group negotiated its proposal jointly and organised the work autonomously. The projects themselves were discussed with the supervising professors. 5 projects were produced, and for these 5 projects, a screen part and a printed part were designed.

Drawing, Design and Semiotics

Demo

Source code

Content source : Drawing, Design and Semiotics, Clive Ashwin, 1984, article from “Design Issues , Autumn, 1984, Vol. 1, No. 2 (Autumn, 1984)

Authors

Simon Tregouët - Esad•V, Zeynep Saçkan - IUE VCD

General concept

This project explores the continuity of the project done in Zagreb about Packaging. On the onscreen version each text part and image can be clicked to stock it in a hidden DocumentFragment. When the letter "i" is pressed, the printable preview is generated by Paged.js. For this particular project, the text part are connected to a hidden media : a turkish translation or a picture in relation with the text content.

A specific JavaScript program has been written for this project, script.js. It's principle is that a custom HTML attribute is given to the elements that should be added to the list, but this specific element is hidden. On click, a test is done to find if this attributes exists, and if it's found, then the element is added to the list of those to be paginated.

Fluid Sketching

Demo

Source

Content source : Fluid Sketching: Bringing Ebru Art into VR, Eroglu, Sevinc; Weyers, Benjamin; Kuhlen, Torsten, Mensch und Computer 2018 - Workshopband. DOI: 10.18420/muc2018-demo-0511. Bonn: Gesellschaft für Informatik e.V.. Interaktive Demos. Dresden. 2.-5. September 2018

Authors

Simon Tregouët & Zeynep Saçkan

General concept

Turkish traditional Ebru art, also known as paper marbling, is a decorative technique that involves creating intricate, colorful patterns on the surface of water, which are then transferred to paper or fabric. This ancient art form uses natural pigments, ox gall, and a special tray to float and manipulate the colors before capturing the design. Ebru is characterized by its fluid, swirling designs and has been used historically for bookbinding, calligraphy, and decorative purposes. This project propose to elaborate upon the text of a group of computer scientist that gave an atempt to bring ebru art in virtual reality space. The article text is selectable by the user and can be deposit on a kind of liquid screen, here a canvas that uses P5.js. Several tools that the user can choose simulates the liquid surface manipulation that produce de marbling effect in the tradition art, but are used here to distort and twist the rendered text. Once the visual composition is done, the user can "print" it to insert it in the printed version of the article, layouted with Paged.js.

Emotional Typography

Demo

Sources

Content source : Emotional Typography: The Effectiveness of Current Typographic Design Categories in Eliciting Emotion, Amic G. Ho; January 2017, The International Journal of Visual Design 11(2):37-44

Authors

Andrea Kevorkian - Esad•V, Çağla Gül Dereli - IUE VCD

General concept

The text by author Amic G. Ho tries to identifies how typography can express emotions through their very drawing. Several categories associating fonts to emotions are suggested that more or less make sense. To make a soft critic of this ideas, we decided to ask ChatGPT ta make a selection of fonts for us according to the emotions listed in this article. The resulting list of fonts is used to produce page that shows the original text with in a font specimen like layout. When the user scrolls up or down, some letter's font are randomly changed to make use of these fonts "emotional expression" capacity. The printed version uses the text in its current shape, each print out being particular.

Persuasion in the digital era

Demo

Sources

Content source : Persuasive Technology: Using Computers to Change What We Think and Do. (2003), B.J. Fogg, Stanford University, San Francisco, CA. Morgan Kaufmann Publishers.

Authors

Hugo Lopez - Esad•V, Muzafer Demireva - IUE VCD

General concept

The layout of this text extensively uses rotations and paragraph special positionning. The challenge of not using a GUI based software for this kind of layout may not be very relevant, but it gives us the proof that it can be done with CSS in web-to-print. The idea of the text is to emphasis on how digital technologies can change the way see things and presuade us to think in a particular way. This project shows many computer interfaces on the user's scrolling : the more one scroll, the more iconographic objects appears. By clicking the print button, the printable version is accessed and show new pages at the end : one that show the mouse positions during the website consultation, and an otherone showing the scrolling amount in the shape of a chart.

The Maze

Demo

Sources

Content source : Fear and design : how can design impact on fear? how can design raise questions about fear? Jenny Bergström, 2007, Nordes 2007: Design Inquiries, 27-30 May, University of Arts, Craft, and Design, Stockholm, Sweden.

The story text and illustrations are originals and were created during the workshop.

Authors

Croze Tomy - Esad•V, Yağmur Namlı - IUE VCD

General concept

A visual novel can be explored by the user (the player, the reader). The path that has been choosen into the maze can lead to various ending. Each steps is memorized as every node of the story is associated to a part of the article about Fear and design. When one end is reached, the paginated version of the article parts can be printed.

This project requiered specific developements to make the story more easy to write. A lightweight visual novel engine has been written for the occasion and can be reused for various other stories with the same interactive principles. The main technical idea is to organise several StoryNodes inside a StoryContext that will handel each node media inside an iFrame. The engine itself can be found in the js folder.

Conclusions and futur works

This workshop concludes the propagation cycle of the EPE project. It provides an opportunity to finish with projects that fully embrace the relationship between a medium that can be consulted interactively on screen (a website) and a version that can be printed. The nature of the projects is therefore different from those of workshop propagation #1, in Sfax, since the design and creation of interactive graphic interfaces was added to the design of a page layout using source code.

It is now clear that art and design school curriculum that wants to invest into web-to-print must include programming and code courses as early as possible. Indeed, it is now possible to move away from proprietary software in a wide range of digital design activities, as we can see here with the design of textual and graphic content. But this requires in-depth knowledge of what software is made of: code and the creation of software tools using programming. So we need to find ways of persuading design students who do not yet have a technical background in software engineering that they need to make the effort to learn it. Without this knowledge, which is now essential for design creation in professional environments, the very value of art and design school and university curriculum is being undermined, as the courses no longer correspond to the reality of the jobs that await students after they graduate. Our prototype online editor is a step in this direction, providing a gateway into the vast field of digital creation for graphic design students.

The prototyping phase of the EPE project will be fundamentally different from this initial propagation phase, since it is now a question of going in-depth into the cutting-edge technical issues that are currently preventing web-to-print from being truly used in a professional context. Our engineering school partners, Pagora in particular, will be able to help us identify the major bottlenecks and describe them in as much detail as possible, so that we can then use our combined expertise to come up with draft solutions.