Successfully reported this slideshow.
Your SlideShare is downloading. ×

Programming For Non-Programmers @SXSW 2013

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 55 Ad

More Related Content

Advertisement

Similar to Programming For Non-Programmers @SXSW 2013 (20)

Recently uploaded (20)

Advertisement

Programming For Non-Programmers @SXSW 2013

  1. PROGRAMMING FOR NON-PROGRAMMERS #SXSW Chris Castiglione @castig | pfnp.me
  2. MY TWITTER @castig
  3. RESOURCES pfnp.me/sxsw
  4. THE QUESTION How do I communicate an idea from my head… to a computer?
  5. PROGRAMMING FOR NON-PROGRAMMERS HTML CSS JS
  6. PROGRAMMING FOR NON-PROGRAMMERS HTML -structure CSS - style JS - behavior
  7. What is Programming? (...and why do I care?)
  8. PROGRAMMING ‣ a set of instructions ‣ used to solve a problem
  9. PEANUT BUTTER & JELLY SANDWICH
  10. PEANUT BUTTER & JELLY SANDWICH ‣ find two slices of bread
  11. PEANUT BUTTER & JELLY SANDWICH ‣ find two slices of bread ‣ spread peanut butter on one slice of bread
  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. 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. PROBLEM SOLVED!
  15. PROGRAMMING ‣ a set of instructions ‣ used to solve a problem
  16. WHY ARE WE HERE? ‣ to learn to think like a developer
  17. WHY ARE WE HERE? ‣ to learn to think like a developer ‣ to understand the tools (aka. Programming Languages)
  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. PROGRAMMING FOR NON-PROGRAMMERS
  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. 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. Vocabulary
  23. PROGRAMMING FOR NON-PROGRAMMERS VOCABULARY 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. Web Master Web Developer Web Designer Front-end Back-end User Experience Visual Designer Database Expert HTML5 Animation User-Interface Information Architecture SEO Expert Usability Security Testing Growth Hacker
  25. PROGRAMMING FOR NON-PROGRAMMERS User-Experience Developer Designer
  26. PROGRAMMING FOR NON-PROGRAMMERS User-Experience Developer Designer
  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. 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. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT Comps become graphics & real text 29
  30. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT Comps 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. PROGRAMMING FOR NON-PROGRAMMERS FRONT-END DEVELOPMENT (noun) the client-side structure and behavior of a web site; put simply it mostly concerns how things look on the page
  32. PROGRAMMING FOR NON-PROGRAMMERS BACK-END DEVELOPMENT (noun) the server-side programming that processes the “business logic”, database, web services and other utilities
  33. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT The development process can be broken into two separate responsibilities: 33
  34. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT The development process can be broken into two separate responsibilities: FRONT-END WEB DEVELOPMENT 1.Client Side 2.How things look to the user 3.Involves: Images, content, structure 4.HTML, CSS, JavaScript 34
  35. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT The development process can be broken into two separate responsibilities: FRONT-END WEB DEVELOPMENT BACK-END WEB DEVELOPMENT 1.Client Side 1.Server Side 2.How things look to the user 2.How things works 3.Involves: Images, content, structure 3.Involves: “business logic” and data 4.HTML, CSS, JavaScript 4.Ruby, PHP C++, Java, etc , 35
  36. PROGRAMMING FOR NON-PROGRAMMERS ZAPPOS.COM process.php BACK-END FRONT-END homepage cart registration
  37. CODE! Use the Tools
  38. PROGRAMMING FOR NON-PROGRAMMERS HTML -structure CSS - style JS - behavior
  39. PROGRAMMING FOR NON-PROGRAMMERS FRAMEWORKS DJANGO TWITTER EXTJS BOOTSTRAP BLUEPRINT JQUERY Coffee Script Ember.js SASS AJAX PROTOTYPE
  40. PROGRAMMING FOR NON-PROGRAMMERS WHAT IS HTML5?
  41. WHAT IS MICROSOFT WORD 2011? 1995 2011
  42. 1991 <HTML>
  43. 1991 <HTML> Tim Berners-Lee
  44. Tim Berners-Lee
  45. <blink>
  46. <blink> </blink>
  47. <blink> Buy Me! </blink>
  48. 2008
  49. PROGRAMMING FOR NON-PROGRAMMERS HTML -structure CSS - style JS - behavior
  50. PROGRAMMING FOR NON-PROGRAMMERS HTML (noun) CSS (adjective) JS (verb)
  51. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make the logo bigger?
  52. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... HTML make the logo bigger? CSS
  53. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make that grey heading fadein?
  54. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... HTML make that grey heading fadein? CSS JAVASCRIPT
  55. PFNP.ME Twitter http://www.pfnp.me @castig

×