EPE - Work Package#4

Livrable 4.2

Sfax Propagation Workshop#1

General objectives

The goal of propagation workshops is to present the tools available for creating editorial objects using Web-to-print technologies. Groups of students work on shared projects for a defined period of time in one of the partner schools of the EPE project. The general organization of the workshops is designed in collaboration between ESAD Valence and the host institution. Logistics are handled by the host institution. The purpose is to introduce students and teachers to the technologies needed to produce printed works from visual elements that can be consulted via a web browser. The languages used for Web creation are therefore the common basis: HTML and CSS for the most part, JavaScript for projects requiring it. The actual creation of printed editorial objects using these tools enables us to discover both their potential and their limitations. These workshops can be divided into two main phases. Phase 1 involves the layout of a printed booklet based on content prepared by the workshop host institution. The second phase, when feasible, involves the creation of interactive on-screen editorial content that can also be printed, exploring the greatest potential of Web-to-print: the relationship between screen and print.

Workshop at the Higher institute of Arts and crafts of Sfax (ISAMS), Tunisia

Logistics

The workshop at ISAMS in Sfax took place from January 15th to 18th, 2024. 5 students from ESAD Valence, accompanied by two assistants and a professor, left on Sunday, January 14th to fly from Lyon to Monastir, then to Sfax in a passenger car. As flights between France and Sfax are not daily, the return trip took place on Friday, January 19th.

Participants

ISAMS

Professors:

• Ines Kamoun
• Sonda Kammoun
• Wiem Cheikhrouhou
• Ikbel Charfi

Students:

• Eya Bouaziz, PhD Student D1 en design Image
• Farah Maalej, 1st year Master of Professional Design Graphic Advertising
• Yassine Fendri, 1st year Master professionnel Design Graphic Advertising
• Bea Ayadi, 1st year Licence Art et Mediation–specializing in Communication and Multimedia
• Jed Ben Hmida, 1st year Bachelor of Art and Mediation–specializing in Communication and Multimedia

Esad Valence

Professors:

• Dominique Cunin
• Cédric Rossignol-Brunet
• Romain Laurent

Students:

• Maïssane Escur, 5th Research in Digital Environment
• Thomas Croze, 5th Research in Digital Environment
• Simon Tegouët, 5th Research in Digital Environment
• Lidka Vallet, 4th Year Graphic Design
• Maeva Morinière, 4th Year Graphic Design

Schedule

Monday, Januar 15th

In the morning, a series of official presentations in the presence of ISAMS administrators, according to the following program:

• Opening words from the President of the University and the Director of ISAMS
• Ikbel Charfi, The logic of federated projects–context of the event
• Sonda Kammoun, History of 4C ISAMS: Actions and partners
• Ghazi Mhiri, Opening up the university to the socio-economic environment
• Dominique Cunin, Presentation of ESAD Grenoble-Valence and the EPE project
• Closure and perspectives of International Cooperation

In the afternoon, Web-to-print works by graphic designers and publishing houses are presented:

• Hybrid Publishing System
• Ateliers ESAD Pyrénées
• Center for Future Publishing
• John Caserta
• Controverses

The booklet template prepared for the workshop was installed on the participants' computers to check that the creation workflow was running smoothly: VSCode as source code editor, installation of the Live Server extension to test the creations on a local server (without using the Internet) and first manipulations of markdown, HTML and CSS files to understand how they work. At the end of the session, the EPE team formed pairs of students from the partner institutions (ESAD & ISAMS).

Tuesday, Januar 16th

The 10 students, 5 from Esad-Valence and 5 from ISAMS, worked in pairs on separate projects. The content was prepared by the ISAMS students, based on general themes such as packaging in Tunisia, web design in Tunisia, and so on. As the ESAD Valence students already had some experience of web tools and the workflow put in place during courses at the Valence school in previous years, they took on the role of trainers alongside the ISAMS students, acting as their technical assistants.

Wednesday, Januar 17th

In order to maximize the benefits of our group presence in Sfax, the decision was taken that day to produce bilingual French-Arabic publication. This new perspective had a much greater influence on the rest of the workshop than expected. The idea was to immerse ourselves in the characteristics of the country in which the workshop was taking place, Tunisia, where Arabic and French are taught to children at school. The mix of languages is therefore quite obvious from the Tunisian point of view, which is much less true for the French. As the Arabic language was unknown to the French participants, the presence of our Tunisian colleagues was necessary to organize the texts of the editions.

Several elements were discovered during this bilingual layout work. First of all, as the writing direction of the two languages is opposite, an effort is required to organize the texts and, sometimes, the pages: French, as a Latin language, is written from left to right, while Arabic is written from right to left. The pages of a book written in Arabic are therefore turned from right to left, requiring the reader of the Arabic text to adapt to the handling of the book. On a more technical level, in order to make collective work easier, the original template has been modified to use online pad texts.Pads (Etherpad) are shared online documents that can be edited by several users simultaneously. Their content can be downloaded on the fly using requests from any origin, including from a program running on a web page. This feature, already in long-standing use at ESAD Valence, was proposed to make texts easier to work on collectively and to keep for future use.

Thursday, Januar 18th

The morning was devoted to a few sightseeing visits, to take in as much of the local color as possible. A visit to a traditional olive oil factory gave us a chance to see one of the last human-scale manufacturers working with traditional hydraulic presses. A walk around the medina and its many shops of all kinds took up the rest of this morning‘s break before the final production effort.

The afternoon turned into a production sprint to complete the booklets with the resources available on site. It was only an hour later than originally planned that we completed the printing and finishing of the books.

5 printed books were produced, one for each pair of students, one of which uses on-screen user interactivity to modify the appearance of the text before printing (selecting a text fragment with the mouse transforms the color of the letters).

Friday, Januar 19th

The ESAD Valence team returns to France. The ISMAS teachers personally drove us to Sfax airport to ensure our smooth departure.

Results

From the point of view of the ISAMS students, despite coming from the "Graphic Design" and "Multimedia Communication" specialties, this workshop was an opportunity for them to discover a new field of investigation: digital publishing. The workshop taught them how to use various tools made available by ESAD students, who acted as tutors. For the ESAD students, this position of tutor was a particular challenge: they had to take on the position of teacher and partner in both technical and graphic aspects.

Discovering the problems of layout in Arabic and bilingual texts was the main interest and challenge for all.

Productions

Each group produced a booklet of up to 16 double-page spreads (32 pages). For the 5 works produced, the texts had been prepared by the students prior to the workshop. The themes chosen by the ISAMS teaching team concern Tunisian productions in the field of visual design, in line with ISMAS's teachings, but also with the general positioning of the country's art schools and the issues they address. This means, on the one hand, finding a certain relationship between the school's training courses and the practices and professions of the regions in which they are located, and, on the other hand, establishing a strong professionalization component in these schools over the long term, with training enabling students to successfully enter the professional and economic world after their studies. Digital technologies, with their high potential for professional integration, naturally come into play here.

The themes were:

• Tunisian public policy in the age of digital transformation
• Web design in Tunisia
• Packaging in Tunisia
• Signalization in Tunisia
• Digital innovation and creativity in the visual arts in Tunisia

Difficulties and unexpected events

Technologies

Language combinations

Difficulties were encountered with the layout of Arabic text. We had the opportunity to discover the degree to which digital technologies are based on Anglo-Saxon languages: stand-alone typed letters inducing the idea of abstract symbols that can be manipulated in logical-mathematical systems (at the origin of computer science). Arabic, when calligraphed, is not written from independent letters, but in a form of continuity, the letters sticking together with numerous formal variations that induce a change in pronunciation and meaning. As computer science is entirely based on principles of information discretization, the symbols used cannot be ambiguous. The aim of programming languages is to enable the expression of procedures to be executed by the computer, which in turn must respect the fundamental principle of information processing by a computing unit. From the very idea of Turing's abstract machine, a conceptual model of computer science that is still relevant today, no ambiguity is allowed to make programs work. This has led to organizational systems that are rigid by necessity, such as the Unicode standard, which organizes the position of written characters (glyphs) in an extensible standard table: one cell corresponds to one symbol, be it a letter or another graphic form. This leaves little room for writing systems that don't separate the characters that constitute their alphabets as precisely as Latin or Asian languages (Chinese, Japanese). Arabic is one of those languages that suffer forced transformations to become available in computerized systems, but lose some of their qualities, or even part of their nature as a language.

During this workshop, we came to see this state of things with some distress. When we wanted to integrate Arabic texts into our work, we realized that it was necessary to treat them separately from other texts, and sometimes to use specific tools to avoid losing their organization when laying them out.

Furthermore, when a text written in Arabic is saved in as neutral a format as possible, such as .txt, which contains no formatting, and we wish to integrate it into an Adobe InDesign or Adobe Photoshop file, we realized, with the help of ISAMS students, that the order of the glyphs was broken when copying and pasting: the position of the letters is automatically reversed throughout the text (the letter at the beginning of the sentence is found at the end). The main reason for this failure lies in the fact that the Arabic writing direction is not natively supported by these programs. You therefore have to find other ways of composing Arabic text correctly in these programs, such as arabic-texts.com, which describes itself as “the first website that allows its visitors to convert Arabic text to a format compatible with many designing software like PhotoShop/ AfterEffects/ Premiere/ Avid Media Composer/ Smoke/ Etc”.

This difficulty does not exist in HTML, where the dir attribute can be used to specify the writing direction of a text element using the following values:

• ltr - left-to-right
• rtl - right to left

The difficulty we encountered lies in Paged.js, which does not yet allow the management of several separate text streams in its pagination system. It's not yet possible to define fill zones in pages, where a set of text elements can be inserted according to a particular attribute, be it a change of language or something else. This problem is well known to the Paged.js team, having already arisen in bilingual publishing projects. The EPE team would like to help develop this technical aspect to make the layout of multilingual works more efficient.

Collaborative writing

The need to work with several people (the students were in pairs) on the same content posed several difficulties. When several computers are used, one per person, the source files need to be synchronized if both people modify the files. Without this, everyone is working on a different project, which doesn't help to foster collective practice. During the workshop, it was therefore proposed to use pads (Etherpad, a shared document platform that can be modified in real time by several users) to simplify collaboration. This decision had the merit of enabling real collaboration in real time, but it also led to a number of difficulties that we can list here:

• as the program was written rather quickly and under the pressure of the workshop, pad content was sometimes incorrectly loaded, leading to execution errors
• unlike VSCode or other specialized editors, the pads are not designed for writing source code. Syntax coloring, autocompletion and automatic indentation for markdown, HTML and CSS are therefore lost.
• pads are temporary and must be saved on a local disk to avoid loss. Student projects therefore need to be retouched to work properly after the workshop and the disappearance of the online pad.

Other solutions therefore need to be explored, as multiple concurrent editing of source code is an imperative for these Propagation workshops as well as for more real-life work situations (communications team at a structure like Hexagone).

Teaching

The ISAMS teachers involved in the project are:

• Ines Kamoun
• Sonda Kammoun
• Wiem Cheikhrouhou
• Ikbel Charfi

They tried to follow the projects closely, mainly from an aesthetic point of view. They would have liked to have been introduced to the Web-to-print tool themselves before the workshop. Technical support was provided by the French tutors, who were already experienced and skilled in this highly specialized field. For future workshops, it is therefore important to plan introductory sessions to the proposed tools for the teaching teams who will be supervising their students.

The professors of ESAD Valence are:

• Dominique Cunin
• Cédric Rossignol-Brunet
• Romain Laurent (specific assistant EPE)

We have noticed several differences between our students, given the gaps in the training program. Technical and conceptual elements are still being acquired by these 4 students, making this workshop an interesting opportunity for them in several respects, including:

• learning about new references in graphic design (designers and design studios)
• quick decision-making on typographic and layout choices, both conceptually and technically
• use of Web technologies as an explicit replacement for InDesign
• writing textual content and choosing accompanying images

Equipment

The photocopier borrowed from the library was not immediately usable. Installed in 2015, it's a Sharp MX-M623N copier whose drivers for printing from a computer were only available for the Windows operating system, but not for Mac OS X or Linux. It took about a day of various tests (Tuesday, January 16th) to find a way of using this copier to produce the final objects. Despite this difficulty, which we anticipated well, we were able to produce our booklets on site, with the equipment provided, without any specific acquisition, in line with the ethics we advocate against programmed obsolescence.

Most of the booklets required cutting, which had to be done by hand in the absence of a cutting machine, with no dedicated space for cutting: there was a lack of cutting mats, suitable metal rulers and enough cutters for several groups to do the cutting in parallel. As the whole process was carried out by hand, the precision was sometimes less, but the results were nevertheless respectable.

Future works

ISAMS teachers and students propose to revise their texts and review the proposed booklets with a view to publishing them at ISAMS.

An idea for improving the markdown transcription has been put forward, with the addition of a diagram explaining the transition from markdown to HTML via the Markdown-it library. This will make more explicit the mechanisms implemented by the tool chain currently in use.

Dual flow (right-left and left-right) should be integrated into Paged.js for multilingual work. The final rendering of the project can be chosen by selecting different CSS parameters, whether for on-screen display or for printing. For future workshops, the aim is to explore the possibilities offered by on-screen interactivity and its consequences for the printed version of what is displayed.

The consortium has also proposed that the Zagreb and Izmir booklets be made bilingual, to give the deliverables greater visibility and internationalization.

Communication actions

Publication of photos by the ISAMS team

List of appendices