Programming for non-programmers
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Programming for non-programmers

on

  • 530 views

 

Statistics

Views

Total Views
530
Views on SlideShare
530
Embed Views
0

Actions

Likes
1
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Programming for non-programmers Presentation 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