120
CONNECTING THE DIGITAL TO ANALOG

Connecting The Digital To Analog - Brian Suda

Embed Size (px)

Citation preview

Page 1: Connecting The Digital To Analog - Brian Suda

C O N N E C T I N G T H E D I G I TA L TO A N A LO G

Page 2: Connecting The Digital To Analog - Brian Suda

C O N V I N C E YO U PA P E R I S B E T T E R T H A N E L E C T RO N I C S

( F O R S O M E TA S KS )

Page 3: Connecting The Digital To Analog - Brian Suda

BRIAN SUDA

http://suda.co.uk @briansuda

Page 4: Connecting The Digital To Analog - Brian Suda
Page 5: Connecting The Digital To Analog - Brian Suda
Page 6: Connecting The Digital To Analog - Brian Suda
Page 7: Connecting The Digital To Analog - Brian Suda

0201

4

jan

feb

mar

apr

may

jun

jul

aug

sept

oct

nov

dec

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

4111825

310172431

29162330

18152229

6132027

5121926

7142128 02

015

jan

feb

mar

apr

may

jun

jul

aug

sept

oct

nov

dec

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

4111825

310172431

29162330

18152229

6132027

5121926

7142128

Page 8: Connecting The Digital To Analog - Brian Suda

K I C KS TA R T E R P RO J E C T : A N A LO G . I S L AT LO N N OT E B O O KS

Page 9: Connecting The Digital To Analog - Brian Suda
Page 10: Connecting The Digital To Analog - Brian Suda

B R I E F H I S TO RY O F PA P E R

Page 11: Connecting The Digital To Analog - Brian Suda

P R E - PA P E R : B O N E , WO O D O R C L AY WA S U S E D B U T I T WA S TO O

C LU N K Y TO C A R RY A RO U N D .

Page 12: Connecting The Digital To Analog - Brian Suda
Page 13: Connecting The Digital To Analog - Brian Suda
Page 14: Connecting The Digital To Analog - Brian Suda

PA P Y R U S WA S I N V E N T E D I N 3 5 0 0 B C E I N E GY P T

Page 15: Connecting The Digital To Analog - Brian Suda

PA RC H M E N T TA K E S O F F I N 3 0 0 B C E D U E TO L I B R A RY O F

A L E X A N D R I A’ S U S E O F A L L T H E PA P Y R U S

Page 16: Connecting The Digital To Analog - Brian Suda

PA P E R WA S I N V E N T E D I N C H I N A OV E R 2 2 0 0 Y E A R S AG O .

S I L K WA S L I G H T E R T H A N PA P E R , B U T M O R E E X P E N S I V E

Page 17: Connecting The Digital To Analog - Brian Suda
Page 18: Connecting The Digital To Analog - Brian Suda

C H I N A C R E AT E S TO I L E T PA P E R I N 6 0 0 C E

( 8 0 0 Y E A R S A F T E R I N V E N T I N G PA P E R )

Page 19: Connecting The Digital To Analog - Brian Suda

112 0 C E S E E T H E F I R S T PA P E R M I L L I N E U RO P E I N S PA I N

Page 20: Connecting The Digital To Analog - Brian Suda

PA P E R VS . E L E C T RO N I C S

( N OT E B O O KS VS P H O N E S )

Page 21: Connecting The Digital To Analog - Brian Suda

WAT E R R E S I S TA N T

Page 22: Connecting The Digital To Analog - Brian Suda

E L E C T R I C A L LY I N D E P E N D E N T

Page 23: Connecting The Digital To Analog - Brian Suda

F O L DA B L E & T E A R A B L E

Page 24: Connecting The Digital To Analog - Brian Suda

S I T O N I T / D RO P I T

Page 25: Connecting The Digital To Analog - Brian Suda

A N N OTATA B L E

Page 26: Connecting The Digital To Analog - Brian Suda

C H E A P

Page 27: Connecting The Digital To Analog - Brian Suda

W H Y PA P E R I S B E T T E R F O R S O M E T H I N G S C O M PA R I S O N TA B L E

WAT E R R E S I S TA N T

E L E C T R I C A L LY I N D E P E N D E N T

P O R TA B L E

F O L DA B L E & T E A R A B L E

S I T O N I T / D RO P I T

A N N OTATA B L E

C H E A P

R E P L I C A B L E

T R A N S M I TA B L E

R E S O LU T I O N

F I L E F O R M AT AG N O S T I C

R E C YC L A B L E

+

+

+

+

+

+

+

-

-

+

+

+

P H OTO C O P I E R

FA X

576 0 + D P I

X

X

-

X

X

X

X

+

+

+

X

-

7 2 - 4 9 0 D P I

S O R T O F

Page 28: Connecting The Digital To Analog - Brian Suda

PA P E R N E T

Page 29: Connecting The Digital To Analog - Brian Suda

IMBUING PA P E R W I T H T H E I N T E R N E T

( S LOW I N T E R N E T , S O R T O F L I K E S LOW F O O D , B U T W I T H DATA )

Page 30: Connecting The Digital To Analog - Brian Suda
Page 31: Connecting The Digital To Analog - Brian Suda

QR CODES OR T INYURLS TO JUMP BACK INTO DIGITAL

(P.S . AVOID QR CODES, THEY MAKE YOU LOOK SILLY)

Page 32: Connecting The Digital To Analog - Brian Suda

h t tp ://wt fqrcodes .com

Page 33: Connecting The Digital To Analog - Brian Suda

h t tp :// ia .ne t/b log/ tages -anze iger -paper - redes ign -p i t c h - los t/

Page 34: Connecting The Digital To Analog - Brian Suda

B OA R D I N G PA S S

Page 35: Connecting The Digital To Analog - Brian Suda
Page 36: Connecting The Digital To Analog - Brian Suda

F RO M T R AV E L D O C U M E N T TO T R AV E L G U I D E

Page 37: Connecting The Digital To Analog - Brian Suda
Page 38: Connecting The Digital To Analog - Brian Suda

S O M E T H I N G M O R E D I S C R E T E

Page 39: Connecting The Digital To Analog - Brian Suda
Page 40: Connecting The Digital To Analog - Brian Suda

P O C K E T M O D

Page 41: Connecting The Digital To Analog - Brian Suda

h t tp ://pocke tmod.com

Page 42: Connecting The Digital To Analog - Brian Suda
Page 43: Connecting The Digital To Analog - Brian Suda
Page 44: Connecting The Digital To Analog - Brian Suda
Page 45: Connecting The Digital To Analog - Brian Suda
Page 46: Connecting The Digital To Analog - Brian Suda
Page 47: Connecting The Digital To Analog - Brian Suda
Page 48: Connecting The Digital To Analog - Brian Suda
Page 49: Connecting The Digital To Analog - Brian Suda

Z O O M I N G A N D C O M P R E S S I N G

Page 50: Connecting The Digital To Analog - Brian Suda
Page 51: Connecting The Digital To Analog - Brian Suda
Page 52: Connecting The Digital To Analog - Brian Suda
Page 53: Connecting The Digital To Analog - Brian Suda

A N I M AT E D G I F S O N PA P E R

Page 54: Connecting The Digital To Analog - Brian Suda
Page 55: Connecting The Digital To Analog - Brian Suda
Page 56: Connecting The Digital To Analog - Brian Suda

h t tp ://demo.marcofo l io .ne t/a_para l lax_ i l l u s ion_wi t h_css/

Page 57: Connecting The Digital To Analog - Brian Suda

LENTICULAR MAGIC

GIF POP

Page 58: Connecting The Digital To Analog - Brian Suda

GIF POP

Page 59: Connecting The Digital To Analog - Brian Suda

B U T W E WO R K O N T H E W E B .

S O L E T ’ S D O T H I S I N H T M L !

Page 60: Connecting The Digital To Analog - Brian Suda

T H E W E B I S N OT P I X E L P E R F E C T

( N O R S H O U L D I T B E ! )

P D F C A N B E P I X E L P E R F E C T

Page 61: Connecting The Digital To Analog - Brian Suda

W E C A N D E S I G N F O R A S P E C I F I C O U T P U T , F O R M AT ,

S I Z E A N D P R I N T E R .

Page 62: Connecting The Digital To Analog - Brian Suda

HOW MANY OF YOU ARE

D E S I G N E R S O R D E V E LO P E R S ?

Page 63: Connecting The Digital To Analog - Brian Suda

P D F A S A S E RV I C E

Page 64: Connecting The Digital To Analog - Brian Suda

P H A N TO M J S

( H E A D L E S S W E B K I T B ROWS E R )

Page 65: Connecting The Digital To Analog - Brian Suda

h t tp ://phan tomjs .org

Page 66: Connecting The Digital To Analog - Brian Suda

h t tps ://mac.g i t hub.com

Page 67: Connecting The Digital To Analog - Brian Suda

h t tps ://g i t hub.com/op t iona l - i s/h tm l2pdf

Page 68: Connecting The Digital To Analog - Brian Suda

g i t c l o n e g i t @ g i t h u b . c o m : o p t i o n a l - i s / h t m l 2 p d f . g i t

Page 69: Connecting The Digital To Analog - Brian Suda

h t tp ://heroku.com

Page 70: Connecting The Digital To Analog - Brian Suda

h t tps :// too lbe l t .heroku.com

Page 71: Connecting The Digital To Analog - Brian Suda

g i t c l o n e g i t @ g i t h u b . c o m : o p t i o n a l - i s / h t m l 2 p d f . g i t

h e r o k u c r e a t e

Page 72: Connecting The Digital To Analog - Brian Suda

D E P LOY

Page 73: Connecting The Digital To Analog - Brian Suda

g i t c l o n e g i t @ g i t h u b . c o m : o p t i o n a l - i s / h t m l 2 p d f . g i t

h e r o k u c r e a t e

g i t p u s h h e r o k u m a s t e r

Page 74: Connecting The Digital To Analog - Brian Suda

g i t c l o n e g i t @ g i t h u b . c o m : o p t i o n a l - i s / h t m l 2 p d f . g i t

h e r o k u c r e a t e

g i t p u s h h e r o k u m a s t e r

h e r o k u c o n f i g : s e t B U I L D PAC K _ U R L = ht tps ://g i t hub.com/rsuss land/heroku -bu i ldpack -py t hon -phan tomjs

Page 75: Connecting The Digital To Analog - Brian Suda

g i t c l o n e g i t @ g i t h u b . c o m : o p t i o n a l - i s / h t m l 2 p d f . g i t

h e r o k u c r e a t e

g i t p u s h h e r o k u m a s t e r

h e r o k u c o n f i g : s e t B U I L D PAC K _ U R L = ht tps ://g i t hub.com/rsuss land/heroku -bu i ldpack -py t hon -phan tomjs

heroku res tar t

Page 76: Connecting The Digital To Analog - Brian Suda

g i t c l o n e g i t @ g i t h u b . c o m : o p t i o n a l - i s / h t m l 2 p d f . g i t

h e r o k u c r e a t e

g i t p u s h h e r o k u m a s t e r

h e r o k u c o n f i g : s e t B U I L D PAC K _ U R L = ht tps ://g i t hub.com/rsuss land/heroku -bu i ldpack -py t hon -phan tomjs

heroku res tar t

heroku open

Page 77: Connecting The Digital To Analog - Brian Suda
Page 78: Connecting The Digital To Analog - Brian Suda

h t tps ://g i t hub.com/op t iona l - i s/h tm l2pdf

Page 79: Connecting The Digital To Analog - Brian Suda

h t t p : / / o p t i o n a l . i s / r e q u i r e d / 2 014 / 0 6 / 12 / p d f - c r e a t i o n - f r o m - h t m l - s e r v i c e /

http://tinyurl.com/oe3vmnt

Page 80: Connecting The Digital To Analog - Brian Suda

C S S F O R P R I N T

Page 81: Connecting The Digital To Analog - Brian Suda

h t tp ://can iuse .com

Page 82: Connecting The Digital To Analog - Brian Suda

ROTAT E

Page 83: Connecting The Digital To Analog - Brian Suda

. r o t a t e {

/ * S a f a r i * /

- we b k i t - t r a n s f o r m : r o t a t e ( - 9 0 d e g ) ;

/ * F i r e f ox * /

- m o z - t r a n s f o r m : r o t a t e ( - 9 0 d e g ) ;

/ * I E * /

- m s - t r a n s f o r m : r o t a t e ( - 9 0 d e g ) ;

/ * O p e r a * /

- o - t r a n s f o r m : r o t a t e ( - 9 0 d e g ) ;

/ * I n t e r n e t E x p l o r e r * /

f i l t e r : p r o g i d : DX I m a g e Tr a n s f o r m . M i c r o s o f t . B a s i c I m a g e ( r o t a t i o n = 3 ) ;

}

Page 84: Connecting The Digital To Analog - Brian Suda

PAG E - B R E A K - B E F O R E

PAG E - B R E A K - A F T E R

Page 85: Connecting The Digital To Analog - Brian Suda

F o r m a l s y n t a x : a u t o | a l wa y s | a vo i d | l e f t | r i g h t

/ * a vo i d p a g e b r e a k b e f o r e t h e d i v * /

d i v . n o t e {

p a g e - b r e a k - b e f o r e : a l wa y s ;

}

Page 86: Connecting The Digital To Analog - Brian Suda

D I S P L AY: I N L I N E - B LO C K

Page 87: Connecting The Digital To Analog - Brian Suda

. u n b r e a ka b l e

{

/ * p a g e - b r e a k - i n s i d e : a vo i d ! i m p o r t a n t ; < - - d o e s n ' t wo r k * /

d i s p l a y : i n l i n e - b l o c k ;

}

Page 88: Connecting The Digital To Analog - Brian Suda

M U LT I - C O LU M N L AYO U T S F O R F O L DA B L E F L E X I B I L I T Y

( 4 , 5 O R 6 PA N E S ? )

Page 89: Connecting The Digital To Analog - Brian Suda

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

Page 90: Connecting The Digital To Analog - Brian Suda
Page 91: Connecting The Digital To Analog - Brian Suda
Page 92: Connecting The Digital To Analog - Brian Suda
Page 93: Connecting The Digital To Analog - Brian Suda
Page 94: Connecting The Digital To Analog - Brian Suda

h t tp ://dogear.co .uk

Page 95: Connecting The Digital To Analog - Brian Suda
Page 96: Connecting The Digital To Analog - Brian Suda
Page 97: Connecting The Digital To Analog - Brian Suda

SEXAGESIMAL: BASE 60

60 IS DIVIS IBLE BY: 1,2 ,3 ,4 ,5 ,6 ,10,12,15,20,30,60

P I E C E S O F E I G H T C O I N :

8 I S D I V I S I B L E BY : 1 , 2 , 4 , 8

12 I S D I V I S I B L E BY 1, 2 , 3 , 4 , 6 ,12

Page 98: Connecting The Digital To Analog - Brian Suda

M E D I A Q U E R I E S F O R VA R I O U S PA P E R S I Z E S !

Page 99: Connecting The Digital To Analog - Brian Suda

U S L E T T E R VS . A 4 PA P E R

Page 100: Connecting The Digital To Analog - Brian Suda

I A M A N A - S E R I E S C O N V E R T !

W H Y I S T H E U S A S T I L L O N T H E I M P E R I A L S YS T E M ?

Page 101: Connecting The Digital To Analog - Brian Suda

<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>

Page 102: Connecting The Digital To Analog - Brian Suda

B I N D I N G S

Page 103: Connecting The Digital To Analog - Brian Suda

S TA P L E S A N D H O L E P U N C H S A R E M E S S Y

Page 104: Connecting The Digital To Analog - Brian Suda
Page 105: Connecting The Digital To Analog - Brian Suda
Page 106: Connecting The Digital To Analog - Brian Suda

A S M A L L , P R I N T O N D E M A N D , C U S TO M , PA P E R N E T N OT E B O O K

L E S S T H A N $ 1

Page 107: Connecting The Digital To Analog - Brian Suda

T H AT ’ S G R E AT , B U T W H E R E ’ S T H E I N T E R N E T ?

Page 108: Connecting The Digital To Analog - Brian Suda

A P I S / P R I N T O N D E M A N D

D E S I G N O N D E M A N D

Page 109: Connecting The Digital To Analog - Brian Suda

B E RG L I T T L E P R I N T E R

ht tp :// l i t t l epr in te r.com

Page 110: Connecting The Digital To Analog - Brian Suda

B E RG L I T T L E P R I N T E R

ht tp :// l i t t l epr in te r.com

Page 111: Connecting The Digital To Analog - Brian Suda

YOT E L LO B BY E X A M P L E

Page 112: Connecting The Digital To Analog - Brian Suda

Stocks, Weather, Todos, CalendarSame as iOS apps you can’t delete

S TA R T W I T H T H E E A S Y S T U F F

Page 113: Connecting The Digital To Analog - Brian Suda
Page 114: Connecting The Digital To Analog - Brian Suda

D R E A M D E V I C E

Page 115: Connecting The Digital To Analog - Brian Suda

OT H E R PA P E R N E T E X A M P L E S

Page 116: Connecting The Digital To Analog - Brian Suda

h t tps ://www.paper la ter.com

Page 117: Connecting The Digital To Analog - Brian Suda

h t tp ://book two.org/no tebook/sxsw -2010 - f ie ldno tes/

Page 118: Connecting The Digital To Analog - Brian Suda

h t tp ://book two.org/no tebook/wik iped ia -h i s tor iography/

Page 119: Connecting The Digital To Analog - Brian Suda
Page 120: Connecting The Digital To Analog - Brian Suda

Brian Suda [email protected] @briansudaTHANKS!

http://tinyurl.com/oe3vmnt

http://tinyurl.com/3947p8w

M O R E A B O U T S E T T I N G - U P A H T M L 2 P D F S E RV I C E

M O R E A B O U T PA P E R N E T B OA R D I N G PA S S E S