PROGRAMMING FORNON-PROGRAMMERS#SXSW       Chris Castiglione            @castig | pfnp.me
MY TWITTER@castig
RESOURCESpfnp.me/sxsw
THE QUESTIONHow do I communicate an ideafrom my head… to a computer?
PROGRAMMING FOR NON-PROGRAMMERSHTMLCSSJS
PROGRAMMING FOR NON-PROGRAMMERSHTML -structureCSS - styleJS - behavior
What is Programming?(...and why do I care?)
PROGRAMMING‣   a set of instructions‣   used to solve a problem
PEANUT BUTTER & JELLY SANDWICH
PEANUT BUTTER & JELLY SANDWICH‣   find two slices of bread
PEANUT BUTTER & JELLY SANDWICH‣   find two slices of bread‣   spread peanut butter on one slice of bread
PEANUT BUTTER & JELLY SANDWICH‣   find two slices of bread‣   spread peanut butter on one slice of bread‣   spread jelly o...
PEANUT BUTTER & JELLY SANDWICH‣   find two slices of bread‣   spread peanut butter on one slice of bread‣   spread jelly o...
PROBLEM SOLVED!
PROGRAMMING‣   a set of instructions‣   used to solve a problem
WHY ARE WE HERE?‣   to learn to think like a developer
WHY ARE WE HERE?‣   to learn to think like a developer‣   to understand the tools (aka. Programming Languages)
WHY ARE WE HERE?‣   to learn to think like a developer‣   to understand the tools (aka. Programming Languages)‣   and to u...
PROGRAMMING FOR NON-PROGRAMMERS
PROGRAMMING FOR NON-PROGRAMMERS            “If we don’t learn to program, we             risk being programmed ourselves.....
PROGRAMMING FOR NON-PROGRAMMERS            “If we don’t learn to plumb, we             risk being plumbed ourselves...    ...
Vocabulary
PROGRAMMING FOR NON-PROGRAMMERSVOCABULARY         THE WEB WEB SITES                                                     NA...
Web Master       Web Developer                           Web Designer Front-end        Back-end          User Experience  ...
PROGRAMMING FOR NON-PROGRAMMERS                User-Experience   Developer                   Designer
PROGRAMMING FOR NON-PROGRAMMERS                   User-Experience   Developer                      Designer
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE    User-Experience ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE    User-Experience ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real text       ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real text       ...
PROGRAMMING FOR NON-PROGRAMMERSFRONT-ENDDEVELOPMENT (noun)the client-side structure and behaviorof a web site; put simply ...
PROGRAMMING FOR NON-PROGRAMMERSBACK-ENDDEVELOPMENT (noun)the server-side programming thatprocesses the “business logic”, d...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken in...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken in...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken in...
PROGRAMMING FOR NON-PROGRAMMERSZAPPOS.COM                  process.php                BACK-ENDFRONT-END            homepag...
CODE!Use the Tools
PROGRAMMING FOR NON-PROGRAMMERSHTML -structureCSS - styleJS - behavior
PROGRAMMING FOR NON-PROGRAMMERSFRAMEWORKS                            DJANGO                                               ...
PROGRAMMING FOR NON-PROGRAMMERSWHAT IS HTML5?
WHAT IS MICROSOFT WORD 2011?    1995             2011
1991<HTML>
1991  <HTML>Tim Berners-Lee
Tim Berners-Lee
<blink>
<blink>   </blink>
<blink> Buy Me! </blink>
2008
PROGRAMMING FOR NON-PROGRAMMERSHTML -structureCSS - styleJS - behavior
PROGRAMMING FOR NON-PROGRAMMERSHTML (noun)CSS (adjective)JS (verb)
PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...              make the logo bigger?
PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...                                  HTML              make the logo bigg...
PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...    make that grey heading fadein?
PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...                                  HTML    make that grey heading fadei...
PFNP.ME          Twitterhttp://www.pfnp.me   @castig
Upcoming SlideShare
Loading in...5
×

Programming For Non-Programmers @SXSW 2013

7,011

Published on

Highlights from my talk at SXSW 2013.

Published in: Technology
4 Comments
69 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,011
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
36
Comments
4
Likes
69
Embeds 0
No embeds

No notes for slide

Programming For Non-Programmers @SXSW 2013

  1. 1. PROGRAMMING FORNON-PROGRAMMERS#SXSW Chris Castiglione @castig | pfnp.me
  2. 2. MY TWITTER@castig
  3. 3. RESOURCESpfnp.me/sxsw
  4. 4. THE QUESTIONHow do I communicate an ideafrom my head… to a computer?
  5. 5. PROGRAMMING FOR NON-PROGRAMMERSHTMLCSSJS
  6. 6. PROGRAMMING FOR NON-PROGRAMMERSHTML -structureCSS - styleJS - behavior
  7. 7. What is Programming?(...and why do I care?)
  8. 8. PROGRAMMING‣ a set of instructions‣ used to solve a problem
  9. 9. PEANUT BUTTER & JELLY SANDWICH
  10. 10. PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread
  11. 11. PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread‣ spread peanut butter on one slice of bread
  12. 12. PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread‣ spread peanut butter on one slice of bread‣ spread jelly on the other slice of bread
  13. 13. PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread‣ spread peanut butter on one slice of bread‣ spread jelly on the other slice of bread‣ put the two slices of bread together
  14. 14. PROBLEM SOLVED!
  15. 15. PROGRAMMING‣ a set of instructions‣ used to solve a problem
  16. 16. WHY ARE WE HERE?‣ to learn to think like a developer
  17. 17. WHY ARE WE HERE?‣ to learn to think like a developer‣ to understand the tools (aka. Programming Languages)
  18. 18. WHY ARE WE HERE?‣ to learn to think like a developer‣ to understand the tools (aka. Programming Languages)‣ and to understand the constraints
  19. 19. PROGRAMMING FOR NON-PROGRAMMERS
  20. 20. PROGRAMMING FOR NON-PROGRAMMERS “If we don’t learn to program, we risk being programmed ourselves... Program or be programmed!” -Douglas Rushkoff “Program or be Programmed”
  21. 21. PROGRAMMING FOR NON-PROGRAMMERS “If we don’t learn to plumb, we risk being plumbed ourselves... Plumb or be plumbed!” -Jeff Atwood codinghorror.com
  22. 22. Vocabulary
  23. 23. PROGRAMMING FOR NON-PROGRAMMERSVOCABULARY THE WEB WEB SITES NATIVE APPS WEB APPS OTHER MOBILE WEB ‣ DECODE THE ‣ OTHER Directly on your Operating System GENOME HARDWARE ‣ XBOX ‣ ANYTHING ‣ IPHONE ‣ OSX ELSE I MAY In a browser ‣ ANDROID ‣ WINDOWS ‣ VIDEO GAMES HAVE MISSED ‣ CHROME ‣ FIREFOX ‣ INTERNET ‣ SAFARI ‣ OPERA EXPLORER
  24. 24. Web Master Web Developer Web Designer Front-end Back-end User Experience Visual DesignerDatabase Expert HTML5 Animation User-Interface Information Architecture SEO Expert Usability Security Testing Growth Hacker
  25. 25. PROGRAMMING FOR NON-PROGRAMMERS User-Experience Developer Designer
  26. 26. PROGRAMMING FOR NON-PROGRAMMERS User-Experience Developer Designer
  27. 27. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design Development (UX) Architecture (IA)
  28. 28. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design (UX) Architecture (IA) Development
  29. 29. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real text 29
  30. 30. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real text general-assembly-logo.png social-media.png mailer.png Real Text: General Assembly offers classes, and events at the intersection of technology, design, and entrepreneurship. Together with our members, thought leaders, and seasoned practitioners, we offer a robust curriculum focused on 30
  31. 31. PROGRAMMING FOR NON-PROGRAMMERSFRONT-ENDDEVELOPMENT (noun)the client-side structure and behaviorof a web site; put simply it mostly concernshow things look on the page
  32. 32. PROGRAMMING FOR NON-PROGRAMMERSBACK-ENDDEVELOPMENT (noun)the server-side programming thatprocesses the “business logic”, database,web services and other utilities
  33. 33. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken into two separate responsibilities: 33
  34. 34. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken into two separate responsibilities:FRONT-END WEB DEVELOPMENT1.Client Side2.How things look to the user3.Involves: Images, content, structure4.HTML, CSS, JavaScript 34
  35. 35. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken into two separate responsibilities:FRONT-END WEB DEVELOPMENT BACK-END WEB DEVELOPMENT1.Client Side 1.Server Side2.How things look to the user 2.How things works3.Involves: Images, content, structure 3.Involves: “business logic” and data4.HTML, CSS, JavaScript 4.Ruby, PHP C++, Java, etc , 35
  36. 36. PROGRAMMING FOR NON-PROGRAMMERSZAPPOS.COM process.php BACK-ENDFRONT-END homepage cart registration
  37. 37. CODE!Use the Tools
  38. 38. PROGRAMMING FOR NON-PROGRAMMERSHTML -structureCSS - styleJS - behavior
  39. 39. PROGRAMMING FOR NON-PROGRAMMERSFRAMEWORKS DJANGO TWITTER EXTJS BOOTSTRAP BLUEPRINT JQUERY Coffee Script Ember.js SASS AJAX PROTOTYPE
  40. 40. PROGRAMMING FOR NON-PROGRAMMERSWHAT IS HTML5?
  41. 41. WHAT IS MICROSOFT WORD 2011? 1995 2011
  42. 42. 1991<HTML>
  43. 43. 1991 <HTML>Tim Berners-Lee
  44. 44. Tim Berners-Lee
  45. 45. <blink>
  46. 46. <blink> </blink>
  47. 47. <blink> Buy Me! </blink>
  48. 48. 2008
  49. 49. PROGRAMMING FOR NON-PROGRAMMERSHTML -structureCSS - styleJS - behavior
  50. 50. PROGRAMMING FOR NON-PROGRAMMERSHTML (noun)CSS (adjective)JS (verb)
  51. 51. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... make the logo bigger?
  52. 52. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... HTML make the logo bigger? CSS
  53. 53. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... make that grey heading fadein?
  54. 54. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... HTML make that grey heading fadein? CSS JAVASCRIPT
  55. 55. PFNP.ME Twitterhttp://www.pfnp.me @castig

×