Coding for Designers. A primer. By Fabian Fabian

874 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
874
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
55
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Coding for Designers. A primer. By Fabian Fabian

  1. 1. Coding for Designers.A Primer.build 130511CC BY-NC-SAFabian Fabian · @filtercake · filtercake.com
  2. 2. Or:Designing interaction in Photoshopis like building a mechanical watchwith a hammer.
  3. 3. Me?★ Designer★ Hamburg★ Freelancing, StartUps, Agencies★ Proud father of twins★ Fabian (@filtercake)
  4. 4. What is beyond HTML and CSS? And W.H.Y. should onemake the effort and go deeper into designing withcode? What does that mean anyways?Taking off from static web design, we will take a heavytour de force, including but not limited to: the Shell andbash scripting, Git and Github, Ruby and Rails, vvvvand Processing, Arduino and Raspberry Pi.We will also see how and why open source and openstandards are a good thing and why we as designersshould support them.
  5. 5. What is beyond HTML and CSS? And W.H.Y. should onemake the effort and go deeper into designing withcode? What does that mean anyways?Taking off from static web design, we will take a heavytour de force, including but not limited to: the Shell andbash scripting, Git and Github, Ruby and Rails, vvvvand Processing, Arduino and Raspberry Pi.We will also see how and why open source and openstandards are a good thing and why we as designersshould support them.
  6. 6. Our goal for today:thisisindexed.com
  7. 7. WHYWHATHOW
  8. 8. WHYYYYYYYYYY?
  9. 9. Why did you becomea designer in thefirst place?
  10. 10. WHATsource
  11. 11. <p>hello world</p>
  12. 12. HTML
  13. 13. HTMLHypertext Markup Language
  14. 14. Hypertext Markup Language“en.wikipedia.org/wiki/HyperA prefix used in mathematics to denotefour or more dimensions.A prefix often used in scientific andtechnical words, to denote somethingabove or beyond the usual, normal,expected, or healthy level. Sometimesused to mean extreme or specifically"more than super-"
  15. 15. 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, anarrangement of buildings on a city block, or styles ofclothing. It is a coherent set of signs that transmits somekind of informative message. This set of symbols isconsidered in terms of the informative messages content,rather than in terms of its physical form or the medium inwhich it is represented.
  16. 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, anarrangement of buildings on a city block, or styles ofclothing. It is a coherent set of signs that transmits somekind of informative message. This set of symbols isconsidered in terms of the informative messages content,rather than in terms of its physical form or the medium inwhich it is represented.
  17. 17. Hypertext Markup Language“The notation that is used to indicate how text should bedisplayed.markup
  18. 18. Hypertext Markup Language“Markup_language · SemioticsMarkup Language: is a system for annotating a documentin a way that is syntactically distinguishable from the text.Syntactics: The branch of semiotics that deals with theformal properties of signs and symbols.Semiotics: the study of signs and sign processes (semiosis), indication, designation,likeness, analogy, metaphor, symbolism, signification, and communication. Semioticsis closely related to the field of linguistics, which, for its part, studies the structure andmeaning of language more specifically.
  19. 19. Markup is a set of rules andvocubalary on how to addmeta information to data.<p>hello world</p>p {color: black;}
  20. 20. haml.info
  21. 21. %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 areyour today?</span></p></div>
  22. 22. sass-lang.com
  23. 23. daringfireball.net/projects/markdown
  24. 24. - bullet- points- are- awesomehello 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 wordhello 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“>
  25. 25. iawriter.com · mouapp.com · markedapp.com
  26. 26. tryghost.org
  27. 27. “In the beginning there was thecommand line.cryptonomicon.com/beginning.html
  28. 28. Shell“Shell_(computing)A shell is software that provides aninterface for users of an operating systemto access the services of a kernel. The nameshell originates from shells being an outerlayer of interface between the user and theinternals of the operating system (thekernel).
  29. 29. Shell“Shell_(computing)A shell is software that provides aninterface for users of an operating systemto access the services of a kernel. The nameshell originates from shells being an outerlayer of interface between the user and theinternals of the operating system (thekernel).
  30. 30. $ ps aux | awk {if ($5 != 0 ) print $2,$5,$6,$11} | sort -k2n
  31. 31. Shell Finder$ mv file.txt destination/$ cp file.txt destination/„Hold + DRAG“movecopy„Hold + Alt + DRAG“
  32. 32. Shell Finder$ mv file.txt destination/$ cp file.txt destination/„Hold + DRAG“movecopy„Hold + Alt + DRAG“VERBS
  33. 33. $PATH
  34. 34. $PATH = /bin $PATH = /Applications$MY_NAME = filtercake$MY_SHOESIZE = 45$FOO = BAR
  35. 35. VERSIONING
  36. 36. VERSIONING“VersioningSoftware versioning is the process ofassigning either unique version names orunique version numbers to unique states ofcomputer software.
  37. 37. my super design final4 final2 version b nr6 export.psd
  38. 38. my super design 2012-05-23-14h.psd
  39. 39. my super design2012-05-23-14h.psdmy super design2012-05-23-19h.psdmy super design2012-05-25-9h.psdmy super design2012-05-25-18h.psd
  40. 40. Version Control System (VCS)
  41. 41. Version Control System (VCS)GitDistributed Version ControlSystem (DVCS)
  42. 42. Before After01 # the bird02 ## is the word0304 hello world0506 [i‘m a link](http://anywhere.com)0708 ![i am an image](http://placekitten.com/g/500/300)01 # the bird02 ## is the word0304 hello world0506 [i‘m a link](http://anywhere.com)0708 ![i‘m an image](http://placekitten.com/g/500/300)-08 ![i am an image](http://placekitten.com/g/500/300)+08 ![i‘m an image](http://placekitten.com/g/500/300) ∆Delta
  43. 43. $ git commit
  44. 44. $ git branch
  45. 45. GITHUBfollowsee commits
  46. 46. GITHUBfollowsee commits
  47. 47. GITHUBfollowsee commits
  48. 48. beforeheavy forking actionaftergraph$ git clone git://github.com/5v3n/ratpack.git
  49. 49. PACKAGEMANAGEMENT
  50. 50. PACKAGEMANAGEMENT“A package manager is a collection of software tools toautomate the process of installing, upgrading, configuring,and removing software packages for a computersoperating system. It typically maintains a database ofsoftware dependencies and version information to preventsoftware mismatches and missing prerequisites.Package_management_system
  51. 51. PACKAGEMANAGEMENT“A package manager is a collection of software tools toautomate the process of installing, upgrading, configuring,and removing software packages for a computersoperating system. It typically maintains a database ofsoftware dependencies and version information to preventsoftware mismatches and missing prerequisites.Package_management_system
  52. 52. PACKAGE
  53. 53. PACKAGE
  54. 54. rvm.io
  55. 55. rubygems.org
  56. 56. RVM, RUBYGEnpmjs.org
  57. 57. RVM, RUBYGElinux.die.net/man/8/apt-get
  58. 58. RVM, RUBYGEbower.io
  59. 59. HOMEBREWmxcl.github.io/homebrew
  60. 60. Tree
  61. 61. Tree$ brew install treedone.
  62. 62. Okay... so... canwe now solve areal problem,please?
  63. 63. Shell Finder$ mv file.txt destination/$ cp file.txt destination/„Hold + DRAG“movecopy„Hold + Alt + DRAG“
  64. 64. The Job:Move all photoshop filesfrom all projects which arebigger than 100 mb andolder than one month tothe archive if they haven‘tbeen archieved yet.
  65. 65. The Job:Convert .flac files to Applelossless.
  66. 66. “In the beginning there was thecommand line.cryptonomicon.com/beginning.html
  67. 67. duckduckgo.com
  68. 68. $ brew install ffmpeg$ touch flac2alac.sh
  69. 69. $ 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
  70. 70. TRANSFER
  71. 71. WHOAA!!11!
  72. 72. IDEs vs TEXTEDITORS
  73. 73. sublimetext.com
  74. 74. macromates.com
  75. 75. panic.com/coda
  76. 76. Rujetbrains.com/ruby
  77. 77. eclipse.org
  78. 78. eclipse.org
  79. 79. PROCESSING IDE + websiteprocessing.org
  80. 80. natureofcode.com
  81. 81. HELLO WORLD PROCESSINGhello-world.cc
  82. 82. ARDUINO SCREENSHOT
  83. 83. ARDUINO SCREENSHOT
  84. 84. ARDUINO SCREENSHOT
  85. 85. ARDUINO and PROCESSINGyoutube.com/watch?v=g0pSfyXOXj8
  86. 86. Wait asecond.Weren‘t wetalking aboutRuby and Rails?!craphound.com
  87. 87. Rails, Haml, etcLibraries: GemsYour own codeServerHTML/CSS/JSBrowserLanguage: RubyVersioning: GitPackage Managment:RVM, Rubygems,BundlerControl: TerminalTexteditor: Sublime TextCollaboration: Github
  88. 88. rvm.io
  89. 89. rvm.io~/.rvm/rubies/ $ ls -ldrwxr-xr-x 8 filtercake staff 272 14 Aug 2012 ruby-1.9.2-p320drwxr-xr-x 8 filtercake staff 272 29 Aug 2012 ruby-1.9.3-p125drwxr-xr-x 8 filtercake staff 272 29 Aug 2012 ruby-1.9.3-p194drwxr-xr-x 8 filtercake staff 272 17 Mär 18:45 ruby-1.9.3-p392drwxr-xr-x 8 filtercake staff 272 24 Mär 22:42 ruby-2.0.0-p0$PATH
  90. 90. rubygems.org
  91. 91. rubyonrails.org
  92. 92. $ gem install rails$ rails new wollmilchsau
  93. 93. fatfreecrm.com
  94. 94. Fork example project:$ git clone git://github.com/fatfreecrm/fat_free_crm.git wollmilchsaufatfreecrm.com
  95. 95. gembundler.com
  96. 96. gembundler.comGemfilesource https://rubygems.orggem nokogirigem rack, ~>1.1gem rspec, :require => spec$ bundle install$ rails s
  97. 97. sublimetext.com
  98. 98. HOW?
  99. 99. OPENSOURCE
  100. 100. Culture“Culture is everything which is not writtendown anywhere.Merlin Mann
  101. 101. tim bvia flickr
  102. 102. lostechies.com
  103. 103. OK, but whyis thatimportant?
  104. 104. What properitary, closedsystems do to you★ Facebook changing their API at free will. Now you tell yourclient!★ 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 suckso much, but we decided to go ahead and suck BIG TIMEso we do not need you anymore!“ Now you tell your users!★ Malware on Android. Explain that to your mom!
  105. 105. They are ALL„evil“!BS!
  106. 106. OPENSTANDARDS
  107. 107. remotestorage.io · unhosted.org
  108. 108. Why did you becomea designer in thefirst place?
  109. 109. DIY
  110. 110. SHAPEMAKECREATE
  111. 111. CHANGE
  112. 112. Drive / Daniel H. Pink
  113. 113. CAUSE.NOTEFFECT.
  114. 114. You want tobe the needle.Not the haystack.
  115. 115. Fabian Fabian@filtercakefiltercake.comCC BY-NC-SATHANKS!

×