Programming for non-programmers

656 views

Published on

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

No Downloads
Views
Total views
656
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Programming for non-programmers

  1. 1. Chris Castiglione @castig | pfnp.me PROGRAMMING FOR NON-PROGRAMMERS #SXSW
  2. 2. MY TWITTER @castig
  3. 3. RESOURCES pfnp.me/sxsw
  4. 4. THE QUESTION How do I communicate an idea from my head… to a computer?
  5. 5. PROGRAMMING FOR NON-PROGRAMMERS HTML CSS JS
  6. 6. PROGRAMMING FOR NON-PROGRAMMERS HTML -structure CSS - style JS - 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-PROGRAMMERS OTHER ‣ DECODE THE GENOME ‣ XBOX ‣ VIDEO GAMES ‣ OTHER HARDWARE ‣ ANYTHING ELSE I MAY HAVE MISSED NATIVE APPS Directly on your Operating System ‣ IPHONE ‣ ANDROID ‣ OSX ‣ WINDOWS In a browser ‣ CHROME ‣ SAFARI ‣ FIREFOX ‣ OPERA ‣ INTERNET EXPLORER THE WEBWEB SITES WEB APPS MOBILE WEB VOCABULARY
  24. 24. Web Master Web Developer Web Designer Front-end Back-end Visual DesignerUser Experience User-Interface Information ArchitectureDatabase Expert Growth HackerSecurity Testing HTML5 Animation SEO Expert Usability
  25. 25. PROGRAMMING FOR NON-PROGRAMMERS User-Experience Designer Developer
  26. 26. PROGRAMMING FOR NON-PROGRAMMERS User-Experience Designer Developer
  27. 27. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  28. 28. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  29. 29. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT Comps become graphics & real text 29
  30. 30. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT Comps become graphics & real text mailer.png general-assembly-logo.png social-media.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-PROGRAMMERS the client-side structure and behavior of a web site; put simply it mostly concerns how things look on the page FRONT-END DEVELOPMENT (noun)
  32. 32. PROGRAMMING FOR NON-PROGRAMMERS the server-side programming that processes the “business logic”, database, web services and other utilities BACK-END DEVELOPMENT (noun)
  33. 33. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT 33 The development process can be broken into two separate responsibilities:
  34. 34. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] FRONT-END WEB DEVELOPMENT 1.Client Side 2.How things look to the user 3.Involves: Images, content, structure 4.HTML, CSS, JavaScript DEVELOPMENT 34 The development process can be broken into two separate responsibilities:
  35. 35. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] FRONT-END WEB DEVELOPMENT 1.Client Side 2.How things look to the user 3.Involves: Images, content, structure 4.HTML, CSS, JavaScript DEVELOPMENT The development process can be broken into two separate responsibilities: BACK-END WEB DEVELOPMENT 1.Server Side 2.How things works 3.Involves: “business logic” and data 4.Ruby, PHP, C++, Java, etc 35
  36. 36. ZAPPOS.COM PROGRAMMING FOR NON-PROGRAMMERS FRONT-END homepage cart registration BACK-END process.php
  37. 37. CODE! Use the Tools
  38. 38. PROGRAMMING FOR NON-PROGRAMMERS HTML -structure CSS - style JS - behavior
  39. 39. PROGRAMMING FOR NON-PROGRAMMERS PROTOTYPE JQUERY Ember.js Coffee Script EXTJS TWITTER BOOTSTRAP DJANGOFRAMEWORKS BLUEPRINT SASS AJAX
  40. 40. PROGRAMMING FOR NON-PROGRAMMERS WHAT 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> </blink>Buy Me!
  48. 48. 2008
  49. 49. PROGRAMMING FOR NON-PROGRAMMERS HTML -structure CSS - style JS - behavior
  50. 50. PROGRAMMING FOR NON-PROGRAMMERS HTML (noun) CSS (adjective) JS (verb)
  51. 51. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make the logo bigger?
  52. 52. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make the logo bigger? CSS HTML
  53. 53. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make that grey heading fadein?
  54. 54. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make that grey heading fadein? JAVASCRIPT HTML CSS
  55. 55. http://www.pfnp.me @castig PFNP.ME Twitter

×