The web has the underestimated capacity to be printable. In the age of screenshots, generating a PDF from a website could become a method of encapsulating content, allowing for deferred reading without an internet connection. It could also be a way to create an archive of our favorite online contents that withstands the test of time, a more enduring material than the ever-shifting online world. And even more, it could allow us to envision a world where the Web could also be used to craft hybrid publications that look and feel as good in print as they do on screen. Nevertheless, the default outcome of hitting Ctrl + P in the web browser is often disappointing. For about a decade now, designers have addressed this issue and developed techniques allowing them to design documents with the web languages in order to be printed directly from a web browser, using the standards of HTML and CSS. This course will serve, then, as an initiation into these Web-to-Print techniques, starting from Media Queries specifications and extending to the implementation of Paged.js, a free and open-source JavaScript library that formats content in the browser to generate PDF output from any HTML content. It will enable students to build a foundation in programming single-source publications, while exploring the creative potential of web languages such as HTML, CSS and Javascript. Final project: Create a single-source publishing project using your own content.
PAD for today Fill out the Survey Download Chrome or Chromium browser Review Syllabus + Examples of student works from 2024 Introduction: Share something that has been published about you on the web. Exercise: Learn how to inspect, modify, and style elements on a webpage using Developer Tools in Chromium. → Open Chromium, and navigate to a webpage of your choice. → Right-click anywhere on the page and select "Inspect" to open the Developer Tools panel. → Go to the Elements tab in the Developer Tools. This tab lets you view and interact with the HTML and CSS structure of the page. → Hover over different elements in the Elements panel, and notice how they highlight different sections of the page. → Select an element to modify (title, paragraph, ...). → Double-click on the text within an HTML tag to edit it. For instance, you could change the text of a headline or button. → Switch to the Styles section within the Elements panel. Here you can change CSS properties to adjust the style of the selected element. → Try modifying properties (color, font size, margins, width, height, ...). → Once you're satisfied with your modifications, take a screenshot of the page showing the changes.
PAD for the day → Template 1: download Input 1: learn how an HTML page is structured Input 2: learn how to use CSS rules → Template 2: download Input 3: introduction to media queries @media print → Template 3: download Input 4: learn how to build a grid layout with CSS → Template 4: download If you're already comfortable with media queries and grid layouts, start here. Resources Web design in 4 minutes: jgthms.com/web-design-in-4-minutes/ Memo HTML: www.simplehtmlguide.com/cheatsheet.php Memo CSS: devhints.io/css or htmlcheatsheet.com/css/ CSS References: cssreference.io CSS Basic rules: developer.mozilla.org/en-US/docs/Web/CSS/Reference CSS Almanac: css-tricks.com/almanac/ CSS Tricks: css-tricks.com CSS Print: sarahgarcin.com/workshops/coding-cooking/web2print.html HTML Color picker: www.w3schools.com/colors/colors_picker.asp Explanation Web colors: en.wikipedia.org/wiki/Web_colors Leonardo colors: leonardocolor.io/theme# Grad Pad: ourownthing.co.uk/gradpad.html CSS Gradient: cssgradient.io Google font: fonts.google.com Open foundry: open-foundry.com Fountain: fontain.org OSP Foundry: osp.kitchen/foundry/ Fonts by Womxn: www.design-research.be/by-womxn/
PAD for the day Review of previous class + Questions → Template 5: download Input 5: how to use the browser as an interface for your design (poster) Input 6: introduction CSS Animations to create a dynamic design → Template 6: download Input 7: how to use the browser as an interface for your design (booklet) Exercise: Design an animated web-to-print poster using Template 5.
Resources CSS Grid by Jen Simmons: labs.jensimmons.com Animating CSS Grid: css-tricks.com/animating-css-grid-how-to-examples/ CSS Animations Examples: codepen.io/Venerons/pen/dyNdLL The Flying Toasters: preview and explanation Perspective and Rotation: codepen.io/sashtown/pen/neRRZq Set a clock (look at the source code of this page) ⇅
PAD for the day Review of previous class + Questions Lecture: Designing books in the browser? Demo: Learn how to use the PAD2PRINT to convert digital notepads into a book, gaining skills in (collaborative) digital publishing methods. The preview of YOUR layout is accessible here: berenice-serra.com/pad-to-print/ The notepad for HTML content is available here: PAD-HTML The notepad for CSS styles is available here: PAD-CSS If you want to explore: Input 8: introduction to paged.js → Template 7: download Input 9: explanation of PAD2PRINT preview file → Template 8: download Exercise: Begin designing your individual micro-project, using one of the templates we covered in class. Option 01 A responsive webpage designed for both screen and print using CSS media queries (@media screen / @media print) — Template 2 Option 02 A poster created using your browser as the interface — PPP Preview / Template 5 Option 03 A booklet designed using your browser as the interface — PPP Preview / Template 6 Option 04 A webpage featuring a display for screen and a web-to-print booklet — PPP Preview / Template 4 Option 05 A book collaboratively designed using notepads — PAD2PRINT / Template 8 Option 06 A book designed entirely with web languages, including micro-typography, using your browser as the interface — Paged.js / Template 7
PAD for the day Discussions in small groups Input 10: how to use Github to release your project → Download GitHub Desktop here → Create a GitHub account here Course feedback Fruits and chocolate!