Brian Suda gave this talk on the second day of the first beyond tellerrand in BERLIN. The title is “Connecting The Digital To Analog” and the full description is: “Going digital” is all the rave. From apps to QR codes, everyone's trying to bring you online. This talk focuses on the other direction; taking digital objects and projecting them into the analog world. From print-on-demand to just-in-time analog information, there is a lot of power and usefulness with paper. To do this, we don't have to give-up any of our existing knowledge. We'll go through how to use web APIs to fetch data, responsive design techniques to repurpose information for various paper sizes and HTML to PDF generation to control print outs. We'll observe how people use paper and it's affordances to bring all the great things about the Internet to them in a more analog form.

1. CONNECT ING THE DIGI TAL TO ANALOG

2. CONVINCE YOU PAPER IS BET TER THAN ELECTRONICS
( FOR SOME TASKS )

3. BRIAN SUDA
http://suda.co.uk
@briansuda

7. jan
feb
mar
apr
may
jun
jul
aug
sept
oct
nov
dec
02014
w
s
s
t
t
s
t
f
m
w
s
m
t
s
s
w
f
m
w
s
t
t
s
t
f
m
m
t
s
t
t
s
w
f
m
w
s
t
t
f
s
w
f
m
t
s
t
t
s
w
w
s
m
t
s
t
f
s
w
f
m
t
t
s
t
f
s
w
s
m
t
s
t
f
f
m
w
s
m
t
s
t
f
s
4
11
18
25
3
10
17
24
31
2
9
16
23
30
1
8
15
22
29
6
13
20
27
5
12
19
26
7
14
21
28
jan
feb
mar
apr
may
jun
jul
aug
sept
oct
nov
dec
02015
t
s
s
w
f
m
w
s
t
t
s
t
f
m
m
t
s
t
t
s
w
f
m
w
s
t
t
f
s
w
f
m
t
s
t
t
s
w
w
s
m
t
s
t
f
s
w
f
m
t
t
s
t
f
s
w
s
m
t
s
t
f
f
m
w
s
m
t
s
t
f
s
w
s
s
t
t
s
t
f
m
w
s
m
4
11
18
25
3
10
17
24
31
2
9
16
23
30
1
8
15
22
29
6
13
20
27
5
12
19
26
7
14
21
28

8. KICKSTARTER PROJECT: ANALOG. I S LAT LON NOTEBOOKS

10. B R I E F HIS TORY OF PAPER

11. P R E - PAPER: BONE, WOOD OR CLAY WAS USED BUT IT WAS TOO
CLUNKY TO CARRY AROUND.

14. PAPYRUS WAS INVENTED IN 3500 BCE IN EGYP T

15. PARCHMENT TAKES OF F IN 300 BCE DUE TO L IBRARY OF
ALEXANDRIA’S USE OF A L L THE PAPYRUS

16. PAPER WAS INVENTED IN CHINA OVER 2200 YEARS AGO.
SILK WAS LIGHTER THAN PAPER, BUT MORE EXPENSIVE

18. CHINA CREATES TOI LET PAPER IN 600 CE
(800 YEAR S AF T E R INVENTING PAPER)

19. 112 0 CE S E E THE F I R S T PAP E R MI L L IN EUROP E IN S PAIN

20. PAPER VS. ELECTRONICS
(NOTEBOOKS VS PHONES)

21. WAT ER RESIS TANT

22. ELECT R ICAL LY INDEPENDENT

23. FOLDABLE & TEARABLE

24. SIT ON I T / D ROP I T

25. ANNOTATABLE

26. CHEAP

27. WHY PAPER I S BET TER FOR SOMETHINGS COMPARI SON TABLE
WAT ER RESIS TANT
ELECT R ICAL LY INDEPENDENT
PORTABLE
FOLDABLE & TEARABLE
SIT ON I T / D ROP I T
ANNOTATABLE
CHEAP
REPLIC ABLE
TRANSMITAB L E
RESOLUTION
F I L E FORMAT AGNOST I C
RECYCL ABLE
+
+
+
+
+
+
+
-
-
+
+
+
PHOTOCOP I E R
FAX
5760+ DPI
X
X
-
X
X
X
X
+
+
+
X
-
7 2 -490DPI
SORT OF

28. PAPERNET

29. IMBUING PAPER WITH THE I N TERNET
( S LOW INTERNET, SORT OF L I K E SLOW FOOD, BUT WI T H DATA)

31. QR CODES OR TINYURLS TO JUMP BACK INTO DIGITAL
(P.S. AVOID QR CODES, THEY MAKE YOU LOOK SILLY)

32. http://wtfqrcodes.com

33. http://ia.net/blog/tages-anzeiger-paper-redesign-pi t c h-lost/

34. BOARDING PASS

36. FROM TRAV E L DOCUMENT TO TRAV E L GUIDE

38. SOMETHING MORE DISCRETE

40. POCKETMOD

41. http://pocketmod.com

49. ZOOMING AND COMPRESSING

53. ANIMATED GI FS ON PAPER

56. http://demo.marcofolio.net/a_paral l ax_illusion_with_css/

57. LENTICULAR MAGIC
GIF POP

58. GIF POP

59. BUT WE WORK ON THE WE B .
SO LET’S DO THIS IN HTML!

60. THE WE B I S NOT P I X E L P ERFECT
(NOR SHOUL D I T B E ! )
PDF C AN BE PIXEL PERFECT

61. WE CAN DESIGN FOR A SPECIFIC OUTPUT, FORMAT,
SIZE AND PRINTER.

62. HOW MANY OF YOU ARE
DESIGNERS OR DEVELOPERS?

63. PDF AS A SERVICE

64. PHANTOMJS
(HEADLESS WEBKI T BROWSER)

65. http://phantomjs.org

66. https://mac.gi thub.com

67. https://gi thub.com/optional - i s/html2pdf

68. g i t c l o ne g i t@g i t hub.com:opt i o n a l - i s / h tml2p d f . g i t

69. http://heroku.com

70. https://toolbe l t .heroku.com

71. g i t c l o ne g i t@g i t hub.com:opt i o n a l - i s / h tml2p d f . g i t
h e roku c reate

72. DEPLOY

73. g i t c l o ne g i t@g i t hub.com:opt i o n a l - i s / h tml2p d f . g i t
h e roku c reat e
g i t p u s h heroku m a s ter

74. g i t c l o ne g i t@g i t hub.com:opt i o n a l - i s / h tml2p d f . g i t
h e roku c reat e
g i t p u s h heroku m a s ter
h e roku c o n f i g : set BUI L D PACK_URL=https://gi thub.com/rsussland/heroku-buildpack-
python-phantomjs

75. g i t c l o ne g i t@g i t hub.com:opt i o n a l - i s / h tml2p d f . g i t
h e roku c reat e
g i t p u s h heroku m a s ter
h e roku c o n f i g : set BUI L D PACK_URL=https://gi thub.com/rsussland/heroku-buildpack-
python-phantomjs
heroku restar t

76. g i t c l o ne g i t@g i t hub.com:opt i o n a l - i s / h tml2p d f . g i t
h e roku c reat e
g i t p u s h heroku m a s ter
h e roku c o n f i g : set BUI L D PACK_URL=https://gi thub.com/rsussland/heroku-buildpack-
python-phantomjs
heroku restar t
heroku open

78. https://gi thub.com/optional - i s/html2pdf

79. http://tinyurl.com/oe3vmnt
h t t p ://opt i o n a l . i s / requ i red/2014/06/12/pdf - c reat i o n - f rom-h t m l - s e r v i ce/

80. CSS FOR PRINT

81. http://caniuse.com

82. ROTATE

83. . rot a te {
/ * S a f a r i * /
- web k i t - t rans f o r m : ro tate( -90deg) ;
/ * F i r e fox * /
-moz- t rans f o r m : ro tate( -90deg) ;
/ * I E * /
- m s - t rans f o r m : ro tate( -90deg) ;
/* Opera * /
- o - t rans f o r m : ro tate( -90deg) ;
/ * I n t e r net E x p l o r e r * /
f i l ter : p rogid:DXImageTrans f o rm.Mi c ro s o f t . BasicImage( rot a t i o n=3) ;
}

84. PAGE-BREAK-BEFORE
PAGE-BREAK- AF TER

85. Formal syntax: a u t o | a l ways | a vo i d | l e f t | r i g h t
/* a vo i d p a g e b re a k b e f o re t h e d i v * /
d i v. note {
p a g e - b reak- b e f o re: always ;
}

86. DISPLAY: I N L I N E - B LOCK

87. . u n b reakable
{
/ * p a g e - b reak- i n s i d e : a vo i d !im por t a n t ; < - - d o e s n ' t wo r k*/
d i s p l ay: i n l i n e - b l o c k ;
}

88. MULT I -COLUMN LAYOUT S FOR FOLDAB L E FLEXI B I L I T Y
( 4 , 5 OR 6 PANES?)

89. .pocketmod {
-moz-column-count: 4;
-moz-column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
}

94. http://dogear.co.uk

97. SEXAGESIMAL: BASE 60
60 IS DIVISIBLE BY: 1,2,3,4,5,6,10,12,15,20,30,60
PIECES OF EIGHT COI N :
8 I S D I V I S I B L E BY: 1, 2 , 4 ,8
12 IS DIVISIBL E BY 1,2,3,4,6,12

98. MEDIA QUE R I E S FOR VAR IOUS PAPER S IZES!

99. US LET TER VS. A4 PAPER

100. I AM AN A - S E R I ES CONVERT !
WHY I S THE USA S T I L L ON THE IMPERI A L SYSTEM?

101. <style>
body, html { font-size: 16px; }
h1 { font-size: 32px; }
h1, p { padding: 10px;
margin: 0; line-height: 1.35; }
div { outline: 1px solid #ccc; }
.a4 { height: 4.15in; width: 2.825in;
float: left; margin: .5in; }
.us { height: 4.25in; width: 2.74in;
float: left; margin: .5in; }
.us h1 { font-size: 28px; }
.us p { line-height: 1.4; }
</style>

102. BINDINGS

103. S TAPLES AND HOLE PUNCHS ARE MESSY

106. A SMALL , P R I N T ON DEMAND, CUSTOM, PAPERNET NOTEBOOK
L E S S THAN $1

107. THAT ’ S GREAT, BUT WHERE’S THE INTERNET?

108. APIS/PRINT ON DEMAND
DESIGN ON DEMAND

109. BERG L I T T L E PRINTER
http://littlepr i n ter.com

110. BERG L I T T L E PRINTER
http://littlepr i n ter.com

111. YOTEL LOBBY EXAMPLE

112. S TART WI TH THE EASY S TUFF
Stocks, Weather, Todos, Calendar
Same as iOS apps you can’t delete

114. DREAM DEVICE

115. OTHER PAPERNET EXAMPLES

116. https://www.paperlater.com

117. http://booktwo.org/notebook/sxsw-2010-f ieldnotes/

118. http://booktwo.org/notebook/wikipedia-historiography/

120. Brian Suda
brian@suda.co.uk
@briansuda THANKS!
MOR E ABOUT S E T T ING-UP A HTML2PDF SERV ICE
http://tinyurl.com/oe3vmnt
MOR E ABOUT PAPERNET BOARDING PASSES
http://tinyurl.com/3947p8w