Your SlideShare is downloading. ×
  • Like
Programming for non-programmers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Programming for non-programmers

  • 380 views
Published

 

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
380
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Chris Castiglione @castig | pfnp.me PROGRAMMING FOR NON-PROGRAMMERS #SXSW
  • 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 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. 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. PROGRAMMING FOR NON-PROGRAMMERS User-Experience Designer Developer
  • 26. PROGRAMMING FOR NON-PROGRAMMERS User-Experience Designer Developer
  • 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. 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. 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 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. 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. PROGRAMMING FOR NON-PROGRAMMERS the server-side programming that processes the “business logic”, database, web services and other utilities BACK-END DEVELOPMENT (noun)
  • 33. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT 33 The development process can be broken into two separate responsibilities:
  • 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. 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. ZAPPOS.COM PROGRAMMING FOR NON-PROGRAMMERS FRONT-END homepage cart registration BACK-END process.php
  • 37. CODE! Use the Tools
  • 38. PROGRAMMING FOR NON-PROGRAMMERS HTML -structure CSS - style JS - behavior
  • 39. PROGRAMMING FOR NON-PROGRAMMERS PROTOTYPE JQUERY Ember.js Coffee Script EXTJS TWITTER BOOTSTRAP DJANGOFRAMEWORKS BLUEPRINT SASS AJAX
  • 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> </blink>Buy Me!
  • 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... make the logo bigger? CSS HTML
  • 53. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make that grey heading fadein?
  • 54. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make that grey heading fadein? JAVASCRIPT HTML CSS
  • 55. http://www.pfnp.me @castig PFNP.ME Twitter