Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CONNECT ING THE DIGI TAL TO ANALOG
CONVINCE YOU PAPER IS BET TER THAN ELECTRONICS 
( FOR SOME TASKS )
BRIAN SUDA 
http://suda.co.uk 
@briansuda
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 
...
KICKSTARTER PROJECT: ANALOG. I S LAT LON NOTEBOOKS
B R I E F HIS TORY OF PAPER
P R E - PAPER: BONE, WOOD OR CLAY WAS USED BUT IT WAS TOO 
CLUNKY TO CARRY AROUND.
PAPYRUS WAS INVENTED IN 3500 BCE IN EGYP T
PARCHMENT TAKES OF F IN 300 BCE DUE TO L IBRARY OF 
ALEXANDRIA’S USE OF A L L THE PAPYRUS
PAPER WAS INVENTED IN CHINA OVER 2200 YEARS AGO. 
SILK WAS LIGHTER THAN PAPER, BUT MORE EXPENSIVE
CHINA CREATES TOI LET PAPER IN 600 CE 
(800 YEAR S AF T E R INVENTING PAPER)
112 0 CE S E E THE F I R S T PAP E R MI L L IN EUROP E IN S PAIN
PAPER VS. ELECTRONICS 
(NOTEBOOKS VS PHONES)
WAT ER RESIS TANT
ELECT R ICAL LY INDEPENDENT
FOLDABLE & TEARABLE
SIT ON I T / D ROP I T
ANNOTATABLE
CHEAP
WHY PAPER I S BET TER FOR SOMETHINGS COMPARI SON TABLE 
WAT ER RESIS TANT 
ELECT R ICAL LY INDEPENDENT 
PORTABLE 
FOLDABLE...
PAPERNET
IMBUING PAPER WITH THE I N TERNET 
( S LOW INTERNET, SORT OF L I K E SLOW FOOD, BUT WI T H DATA)
QR CODES OR TINYURLS TO JUMP BACK INTO DIGITAL 
(P.S. AVOID QR CODES, THEY MAKE YOU LOOK SILLY)
http://wtfqrcodes.com
http://ia.net/blog/tages-anzeiger-paper-redesign-pi t c h-lost/
BOARDING PASS
FROM TRAV E L DOCUMENT TO TRAV E L GUIDE
SOMETHING MORE DISCRETE
POCKETMOD
http://pocketmod.com
ZOOMING AND COMPRESSING
ANIMATED GI FS ON PAPER
http://demo.marcofolio.net/a_paral l ax_illusion_with_css/
LENTICULAR MAGIC 
GIF POP
GIF POP
BUT WE WORK ON THE WE B . 
SO LET’S DO THIS IN HTML!
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
WE CAN DESIGN FOR A SPECIFIC OUTPUT, FORMAT, 
SIZE AND PRINTER.
HOW MANY OF YOU ARE 
DESIGNERS OR DEVELOPERS?
PDF AS A SERVICE
PHANTOMJS 
(HEADLESS WEBKI T BROWSER)
http://phantomjs.org
https://mac.gi thub.com
https://gi thub.com/optional - i s/html2pdf
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
http://heroku.com
https://toolbe l t .heroku.com
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
DEPLOY
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 ...
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 ...
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 ...
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 ...
https://gi thub.com/optional - i s/html2pdf
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 ...
CSS FOR PRINT
http://caniuse.com
ROTATE
. 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 ...
PAGE-BREAK-BEFORE 
PAGE-BREAK- AF TER
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 * ...
DISPLAY: I N L I N E - B LOCK
. 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 ...
MULT I -COLUMN LAYOUT S FOR FOLDAB L E FLEXI B I L I T Y 
( 4 , 5 OR 6 PANES?)
.pocketmod { 
-moz-column-count: 4; 
-moz-column-gap: 20px; 
-webkit-column-count: 4; 
-webkit-column-gap: 20px; 
}
http://dogear.co.uk
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 ...
MEDIA QUE R I E S FOR VAR IOUS PAPER S IZES!
US LET TER VS. A4 PAPER
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?
<style> 
body, html { font-size: 16px; } 
h1 { font-size: 32px; } 
h1, p { padding: 10px; 
margin: 0; line-height: 1.35; }...
BINDINGS
S TAPLES AND HOLE PUNCHS ARE MESSY
A SMALL , P R I N T ON DEMAND, CUSTOM, PAPERNET NOTEBOOK 
L E S S THAN $1
THAT ’ S GREAT, BUT WHERE’S THE INTERNET?
APIS/PRINT ON DEMAND 
DESIGN ON DEMAND
BERG L I T T L E PRINTER 
http://littlepr i n ter.com
BERG L I T T L E PRINTER 
http://littlepr i n ter.com
YOTEL LOBBY EXAMPLE
S TART WI TH THE EASY S TUFF 
Stocks, Weather, Todos, Calendar 
Same as iOS apps you can’t delete
DREAM DEVICE
OTHER PAPERNET EXAMPLES
https://www.paperlater.com
http://booktwo.org/notebook/sxsw-2010-f ieldnotes/
http://booktwo.org/notebook/wikipedia-historiography/
Brian Suda 
brian@suda.co.uk 
@briansuda THANKS! 
MOR E ABOUT S E T T ING-UP A HTML2PDF SERV ICE 
http://tinyurl.com/oe3vm...
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
Upcoming SlideShare
Loading in …5
×

Connecting The Digital To Analog - Brian Suda

687 views

Published on

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.

Published in: Design
  • Be the first to comment

Connecting The Digital To Analog - Brian Suda

  1. 1. CONNECT ING THE DIGI TAL TO ANALOG
  2. 2. CONVINCE YOU PAPER IS BET TER THAN ELECTRONICS ( FOR SOME TASKS )
  3. 3. BRIAN SUDA http://suda.co.uk @briansuda
  4. 4. 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
  5. 5. KICKSTARTER PROJECT: ANALOG. I S LAT LON NOTEBOOKS
  6. 6. B R I E F HIS TORY OF PAPER
  7. 7. P R E - PAPER: BONE, WOOD OR CLAY WAS USED BUT IT WAS TOO CLUNKY TO CARRY AROUND.
  8. 8. PAPYRUS WAS INVENTED IN 3500 BCE IN EGYP T
  9. 9. PARCHMENT TAKES OF F IN 300 BCE DUE TO L IBRARY OF ALEXANDRIA’S USE OF A L L THE PAPYRUS
  10. 10. PAPER WAS INVENTED IN CHINA OVER 2200 YEARS AGO. SILK WAS LIGHTER THAN PAPER, BUT MORE EXPENSIVE
  11. 11. CHINA CREATES TOI LET PAPER IN 600 CE (800 YEAR S AF T E R INVENTING PAPER)
  12. 12. 112 0 CE S E E THE F I R S T PAP E R MI L L IN EUROP E IN S PAIN
  13. 13. PAPER VS. ELECTRONICS (NOTEBOOKS VS PHONES)
  14. 14. WAT ER RESIS TANT
  15. 15. ELECT R ICAL LY INDEPENDENT
  16. 16. FOLDABLE & TEARABLE
  17. 17. SIT ON I T / D ROP I T
  18. 18. ANNOTATABLE
  19. 19. CHEAP
  20. 20. 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
  21. 21. PAPERNET
  22. 22. IMBUING PAPER WITH THE I N TERNET ( S LOW INTERNET, SORT OF L I K E SLOW FOOD, BUT WI T H DATA)
  23. 23. QR CODES OR TINYURLS TO JUMP BACK INTO DIGITAL (P.S. AVOID QR CODES, THEY MAKE YOU LOOK SILLY)
  24. 24. http://wtfqrcodes.com
  25. 25. http://ia.net/blog/tages-anzeiger-paper-redesign-pi t c h-lost/
  26. 26. BOARDING PASS
  27. 27. FROM TRAV E L DOCUMENT TO TRAV E L GUIDE
  28. 28. SOMETHING MORE DISCRETE
  29. 29. POCKETMOD
  30. 30. http://pocketmod.com
  31. 31. ZOOMING AND COMPRESSING
  32. 32. ANIMATED GI FS ON PAPER
  33. 33. http://demo.marcofolio.net/a_paral l ax_illusion_with_css/
  34. 34. LENTICULAR MAGIC GIF POP
  35. 35. GIF POP
  36. 36. BUT WE WORK ON THE WE B . SO LET’S DO THIS IN HTML!
  37. 37. 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
  38. 38. WE CAN DESIGN FOR A SPECIFIC OUTPUT, FORMAT, SIZE AND PRINTER.
  39. 39. HOW MANY OF YOU ARE DESIGNERS OR DEVELOPERS?
  40. 40. PDF AS A SERVICE
  41. 41. PHANTOMJS (HEADLESS WEBKI T BROWSER)
  42. 42. http://phantomjs.org
  43. 43. https://mac.gi thub.com
  44. 44. https://gi thub.com/optional - i s/html2pdf
  45. 45. 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
  46. 46. http://heroku.com
  47. 47. https://toolbe l t .heroku.com
  48. 48. 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
  49. 49. DEPLOY
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. https://gi thub.com/optional - i s/html2pdf
  55. 55. 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/
  56. 56. CSS FOR PRINT
  57. 57. http://caniuse.com
  58. 58. ROTATE
  59. 59. . 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) ; }
  60. 60. PAGE-BREAK-BEFORE PAGE-BREAK- AF TER
  61. 61. 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 ; }
  62. 62. DISPLAY: I N L I N E - B LOCK
  63. 63. . 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 ; }
  64. 64. MULT I -COLUMN LAYOUT S FOR FOLDAB L E FLEXI B I L I T Y ( 4 , 5 OR 6 PANES?)
  65. 65. .pocketmod { -moz-column-count: 4; -moz-column-gap: 20px; -webkit-column-count: 4; -webkit-column-gap: 20px; }
  66. 66. http://dogear.co.uk
  67. 67. 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
  68. 68. MEDIA QUE R I E S FOR VAR IOUS PAPER S IZES!
  69. 69. US LET TER VS. A4 PAPER
  70. 70. 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?
  71. 71. <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>
  72. 72. BINDINGS
  73. 73. S TAPLES AND HOLE PUNCHS ARE MESSY
  74. 74. A SMALL , P R I N T ON DEMAND, CUSTOM, PAPERNET NOTEBOOK L E S S THAN $1
  75. 75. THAT ’ S GREAT, BUT WHERE’S THE INTERNET?
  76. 76. APIS/PRINT ON DEMAND DESIGN ON DEMAND
  77. 77. BERG L I T T L E PRINTER http://littlepr i n ter.com
  78. 78. BERG L I T T L E PRINTER http://littlepr i n ter.com
  79. 79. YOTEL LOBBY EXAMPLE
  80. 80. S TART WI TH THE EASY S TUFF Stocks, Weather, Todos, Calendar Same as iOS apps you can’t delete
  81. 81. DREAM DEVICE
  82. 82. OTHER PAPERNET EXAMPLES
  83. 83. https://www.paperlater.com
  84. 84. http://booktwo.org/notebook/sxsw-2010-f ieldnotes/
  85. 85. http://booktwo.org/notebook/wikipedia-historiography/
  86. 86. 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

×