What is beyond HTML and CSS? And W.H.Y. should one make the effort and go deeper into designing with code? What does that mean anyways? Taking off from static web design, we will take a heavy tour de force, including but not limited to: the Shell and bash scripting, Git and Github, Ruby and Rails, vvvv and Processing, Arduino and Raspberry Pi. We will also see how and why open source and open standards are a good thing and why we as designers should support them. If you have a Design-Is-How-It-Works mindset, but never knew how and where to start with code, this is for you.

1. Coding for Designers.
A Primer.
build 130511
CC BY-NC-SA
Fabian Fabian · @filtercake · filtercake.com

2. Or:
Designing interaction in Photoshop
is like building a mechanical watch
with a hammer.

3. Me?
★ Designer
★ Hamburg
★ Freelancing, StartUps, Agencies
★ Proud father of twins
★ Fabian (@filtercake)

4. What is beyond HTML and CSS? And W.H.Y. should one
make the effort and go deeper into designing with
code? What does that mean anyways?
Taking off from static web design, we will take a heavy
tour de force, including but not limited to: the Shell and
bash scripting, Git and Github, Ruby and Rails, vvvv
and Processing, Arduino and Raspberry Pi.
We will also see how and why open source and open
standards are a good thing and why we as designers
should support them.

5. What is beyond HTML and CSS? And W.H.Y. should one
make the effort and go deeper into designing with
code? What does that mean anyways?
Taking off from static web design, we will take a heavy
tour de force, including but not limited to: the Shell and
bash scripting, Git and Github, Ruby and Rails, vvvv
and Processing, Arduino and Raspberry Pi.
We will also see how and why open source and open
standards are a good thing and why we as designers
should support them.

6. Our goal for today:
thisisindexed.com

7. WHY
WHAT
HOW

8. WHYYYYYYYYYY?

9. Why did you become
a designer in the
first place?

10. WHAT
source

12. <p>hello world</p>

13. HTML

14. HTML
Hypertext Markup Language

15. Hypertext Markup Language
“
en.wikipedia.org/wiki/Hyper
A prefix used in mathematics to denote
four or more dimensions.
A prefix often used in scientific and
technical words, to denote something
above or beyond the usual, normal,
expected, or healthy level. Sometimes
used to mean extreme or specifically
"more than super-"

16. Hypertext Markup Language
“
en.wikipedia.org/wiki/Text_(literary_theory)
In literary theory, a text is any object that can be "read,"
whether this object is a work of literature, a street sign, an
arrangement of buildings on a city block, or styles of
clothing. It is a coherent set of signs that transmits some
kind of informative message. This set of symbols is
considered in terms of the informative message's content,
rather than in terms of its physical form or the medium in
which it is represented.

17. Hypertext Markup Language
“
en.wikipedia.org/wiki/Text_(literary_theory)
In literary theory, a text is any object that can be "read,"
whether this object is a work of literature, a street sign, an
arrangement of buildings on a city block, or styles of
clothing. It is a coherent set of signs that transmits some
kind of informative message. This set of symbols is
considered in terms of the informative message's content,
rather than in terms of its physical form or the medium in
which it is represented.

18. Hypertext Markup Language
“The notation that is used to indicate how text should be
displayed.
markup

19. Hypertext Markup Language
“
Markup_language · Semiotics
Markup Language: is a system for annotating a document
in a way that is syntactically distinguishable from the text.
Syntactics: The branch of semiotics that deals with the
formal properties of signs and symbols.
Semiotics: the study of signs and sign processes (semiosis), indication, designation,
likeness, analogy, metaphor, symbolism, signification, and communication. Semiotics
is closely related to the field of linguistics, which, for its part, studies the structure and
meaning of language more specifically.

20. Markup is a set of rules and
vocubalary on how to add
meta information to data.
<p>hello world</p>
p {color: black;}

21. haml.info

22. %p hello world <p>hello world</p>
HAML HTML
%h1 the bird is the word
%p hello world
<h1> the bird is the word</h1>
<p>hello world</p>
.peter
%h1 the bird is the word
%p hello world
<div class=“peter“>
<h1> the bird is the word</h1>
<p>hello world</p>
</div>
.peter
%h1 the bird is the word
%p hello world.
%span how are you today?
<div class=“peter“>
<h1> the bird is the word</h1>
<p>hello world. <span>how are
your today?</span></p>
</div>

23. sass-lang.com

24. daringfireball.net/projects/markdown

25. - bullet
- points
- are
- awesome
hello world <p>hello world</p>
Markdown HTML
<ul><li>bullet</li>
<li>points</li>
<li>are</li>
<li>awesome</li></ul>
*** <hr>
# the bird
## is the word
hello world
<h1>the bird</h1>
<h2>is the word</h2>
<p>hello world</p>
[i‘m a link](http://anywhere.com) <a href=“http://anywhere.com)“>
i‘m a link </a>
![i am an image](http://
placekitten.com/g/500/300)
<img alt=“i am an image“
src=“http://placekitten.com/g/
500/300“>

26. iawriter.com · mouapp.com · markedapp.com

27. tryghost.org

31. “In the beginning there was the
command line.
cryptonomicon.com/beginning.html

32. Shell
“
Shell_(computing)
A shell is software that provides an
interface for users of an operating system
to access the services of a kernel. The name
shell originates from shells being an outer
layer of interface between the user and the
internals of the operating system (the
kernel).

33. Shell
“
Shell_(computing)
A shell is software that provides an
interface for users of an operating system
to access the services of a kernel. The name
shell originates from shells being an outer
layer of interface between the user and the
internals of the operating system (the
kernel).

34. $ ps aux | awk '{if ($5 != 0 ) print $2,$5,$6,$11}' | sort -k2n

35. Shell Finder
$ mv file.txt destination/
$ cp file.txt destination/
„Hold + DRAG“
move
copy
„Hold + Alt + DRAG“

36. Shell Finder
$ mv file.txt destination/
$ cp file.txt destination/
„Hold + DRAG“
move
copy
„Hold + Alt + DRAG“
VERBS

37. $PATH

38. $PATH = /bin $PATH = /Applications
$MY_NAME = filtercake
$MY_SHOESIZE = 45
$FOO = BAR

39. VERSIONING

40. VERSIONING
“
Versioning
Software versioning is the process of
assigning either unique version names or
unique version numbers to unique states of
computer software.

41. my super design final4 final2 version b nr6 export.psd

42. my super design 2012-05-23-14h.psd

43. my super design
2012-05-23-14h.psd
my super design
2012-05-23-19h.psd
my super design
2012-05-25-9h.psd
my super design
2012-05-25-18h.psd

45. Version Control System (VCS)

47. Version Control System (VCS)
Git
Distributed Version Control
System (DVCS)

48. Before After
01 # the bird
02 ## is the word
03
04 hello world
05
06 [i‘m a link](http://
anywhere.com)
07
08 ![i am an image](http://
placekitten.com/g/500/300)
01 # the bird
02 ## is the word
03
04 hello world
05
06 [i‘m a link](http://
anywhere.com)
07
08 ![i‘m an image](http://
placekitten.com/g/500/300)
-08 
+08  ∆
Delta

51. $ git commit

52. $ git branch

53. GITHUB
follow
see commits

54. GITHUB
follow
see commits

55. GITHUB
follow
see commits

57. before
heavy forking action
after
graph
$ git clone git://github.com/5v3n/ratpack.git

58. PACKAGE
MANAGEMENT

59. PACKAGE
MANAGEMENT
“A package manager is a collection of software tools to
automate the process of installing, upgrading, configuring,
and removing software packages for a computer's
operating system. It typically maintains a database of
software dependencies and version information to prevent
software mismatches and missing prerequisites.
Package_management_system

60. PACKAGE
MANAGEMENT
“A package manager is a collection of software tools to
automate the process of installing, upgrading, configuring,
and removing software packages for a computer's
operating system. It typically maintains a database of
software dependencies and version information to prevent
software mismatches and missing prerequisites.
Package_management_system

61. PACKAGE

62. PACKAGE

63. rvm.io

64. rubygems.org

65. RVM, RUBYGE
npmjs.org

66. RVM, RUBYGE
linux.die.net/man/8/apt-get

67. RVM, RUBYGE
bower.io

68. HOMEBREW
mxcl.github.io/homebrew

69. Tree

70. Tree
$ brew install tree
done.

71. Okay... so... can
we now solve a
real problem,
please?

72. Shell Finder
$ mv file.txt destination/
$ cp file.txt destination/
„Hold + DRAG“
move
copy
„Hold + Alt + DRAG“

73. The Job:
Move all photoshop files
from all projects which are
bigger than 100 mb and
older than one month to
the archive if they haven‘t
been archieved yet.

74. The Job:
Convert .flac files to Apple
lossless.

79. “In the beginning there was the
command line.
cryptonomicon.com/beginning.html

80. duckduckgo.com

83. $ brew install ffmpeg
$ touch flac2alac.sh

84. $ chmod +x flac2alac.sh
$ mv flac2alac.sh ~/scripts/
$PATH = /Users/filtercake/.rvm/gems/
ruby-1.9.3-p392/bin:/Users/filtercake/.rvm/
gems/ruby-1.9.3-p392@global/bin:/Users/
filtercake/.rvm/rubies/ruby-1.9.3-p392/bin:/
Users/filtercake/.rvm/bin:/usr/local/bin:/
usr/bin:/bin:/usr/sbin:/sbin:/usr/X11/bin:/
usr/local/MacGPG2/bin:/Users/filtercake/
scripts

88. TRANSFER

89. WHOAA!!11!

90. IDEs vs TEXTEDITORS

92. sublimetext.com

93. macromates.com

94. panic.com/coda

95. Ru
jetbrains.com/ruby

96. eclipse.org

97. eclipse.org

98. PROCESSING IDE + website
processing.org

101. natureofcode.com

102. HELLO WORLD PROCESSING
hello-world.cc

103. ARDUINO SCREENSHOT

104. ARDUINO SCREENSHOT

105. ARDUINO SCREENSHOT

106. ARDUINO and PROCESSING
youtube.com/watch?v=g0pSfyXOXj8

107. Wait a
second.
Weren‘t we
talking about
Ruby and Rails?!
craphound.com

109. Rails, Haml, etc
Libraries: Gems
Your own code
Server
HTML/CSS/JS
Browser
Language: Ruby
Versioning: Git
Package Managment:
RVM, Rubygems,
Bundler
Control: Terminal
Texteditor: Sublime Text
Collaboration: Github

110. rvm.io

111. rvm.io
~/.rvm/rubies/ $ ls -l
drwxr-xr-x 8 filtercake staff 272 14 Aug 2012 ruby-1.9.2-p320
drwxr-xr-x 8 filtercake staff 272 29 Aug 2012 ruby-1.9.3-p125
drwxr-xr-x 8 filtercake staff 272 29 Aug 2012 ruby-1.9.3-p194
drwxr-xr-x 8 filtercake staff 272 17 Mär 18:45 ruby-1.9.3-p392
drwxr-xr-x 8 filtercake staff 272 24 Mär 22:42 ruby-2.0.0-p0
$PATH

112. rubygems.org

113. rubyonrails.org

114. $ gem install rails
$ rails new wollmilchsau

115. fatfreecrm.com

116. Fork example project:
$ git clone git://github.com/fatfreecrm/fat_free_crm.git wollmilchsau
fatfreecrm.com

117. gembundler.com

118. gembundler.com
Gemfile
source 'https://rubygems.org'
gem 'nokogiri'
gem 'rack', '~>1.1'
gem 'rspec', :require => 'spec'
$ bundle install
$ rails s

119. sublimetext.com

120. HOW?

121. OPEN
SOURCE

122. Culture
“Culture is everything which is not written
down anywhere.
Merlin Mann

123. tim b
via flickr

124. lostechies.com

126. OK, but why
is that
important?

127. What properitary, closed
systems do to you
★ Facebook changing their API at free will. Now you tell your
client!
★ Google shutting down Reader. Now you tell your users!
★ Apple rejecting or taking down certain apps at free will.
Now you tell your users!
★ Twitter basically saying „Thanks for making us not suck
so much, but we decided to go ahead and suck BIG TIME
so we do not need you anymore!“ Now you tell your users!
★ Malware on Android. Explain that to your mom!

128. They are ALL
„evil“!BS!

129. OPEN
STANDARDS

131. remotestorage.io · unhosted.org

132. Why did you become
a designer in the
first place?

133. DIY

134. SHAPE
MAKE
CREATE

135. CHANGE

136. Drive / Daniel H. Pink

137. CAUSE.
NOT
EFFECT.

138. You want to
be the needle.
Not the haystack.

139. Fabian Fabian
@filtercake
filtercake.com
CC BY-NC-SA
THANKS!