0
Chris Castiglione
@castig | pfnp.me
PROGRAMMING FOR
NON-PROGRAMMERS
#SXSW
MY TWITTER
@castig
RESOURCES
pfnp.me/sxsw
THE QUESTION
How do I communicate an idea
from my head… to a computer?
PROGRAMMING FOR NON-PROGRAMMERS
HTML
CSS
JS
PROGRAMMING FOR NON-PROGRAMMERS
HTML -structure
CSS - style
JS - 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 on t...
PEANUT BUTTER & JELLY SANDWICH
‣ find two slices of bread
‣ spread peanut butter on one slice of bread
‣ spread jelly on t...
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 unde...
PROGRAMMING FOR NON-PROGRAMMERS
PROGRAMMING FOR NON-PROGRAMMERS
“If we don’t learn to program, we
risk being programmed ourselves...
Program or be program...
PROGRAMMING FOR NON-PROGRAMMERS
“If we don’t learn to plumb, we
risk being plumbed ourselves...
Plumb or be plumbed!”
-Jef...
Vocabulary
PROGRAMMING FOR NON-PROGRAMMERS
OTHER
‣ DECODE THE
GENOME
‣ XBOX
‣ VIDEO GAMES
‣ OTHER
HARDWARE
‣ ANYTHING
ELSE I MAY
HAVE...
Web Master
Web Developer Web Designer
Front-end Back-end Visual DesignerUser Experience
User-Interface Information Archite...
PROGRAMMING FOR NON-PROGRAMMERS
User-Experience
Designer
Developer
PROGRAMMING FOR NON-PROGRAMMERS
User-Experience
Designer
Developer
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 ]
DEVELOPMENT
Comps become graphics & real text
29
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENT
Comps become graphics & real text
mai...
PROGRAMMING FOR NON-PROGRAMMERS
the client-side structure and behavior
of a web site; put simply it mostly concerns
how th...
PROGRAMMING FOR NON-PROGRAMMERS
the server-side programming that
processes the “business logic”, database,
web services an...
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENT
33
The development process can be bro...
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
FRONT-END WEB DEVELOPMENT
1.Client Side
2.How thi...
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
FRONT-END WEB DEVELOPMENT
1.Client Side
2.How thi...
ZAPPOS.COM
PROGRAMMING FOR NON-PROGRAMMERS
FRONT-END
homepage cart registration
BACK-END
process.php
CODE!
Use the Tools
PROGRAMMING FOR NON-PROGRAMMERS
HTML -structure
CSS - style
JS - behavior
PROGRAMMING FOR NON-PROGRAMMERS
PROTOTYPE
JQUERY
Ember.js
Coffee Script
EXTJS
TWITTER
BOOTSTRAP
DJANGOFRAMEWORKS
BLUEPRINT...
PROGRAMMING FOR NON-PROGRAMMERS
WHAT IS HTML5?
WHAT IS MICROSOFT WORD 2011?
1995 2011
1991
<HTML>
1991
<HTML>
Tim Berners-Lee
Tim Berners-Lee
<blink>
<blink> </blink>
<blink> </blink>Buy Me!
2008
PROGRAMMING FOR NON-PROGRAMMERS
HTML -structure
CSS - style
JS - behavior
PROGRAMMING FOR NON-PROGRAMMERS
HTML (noun)
CSS (adjective)
JS (verb)
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make the logo bigger?
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make the logo bigger?
CSS
HTML
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make that grey heading fadein?
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make that grey heading fadein?
JAVASCRIPT
HTML
CSS
http://www.pfnp.me @castig
PFNP.ME Twitter
Upcoming SlideShare
Loading in...5
×

Programming for non-programmers

415

Published on

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

No Downloads
Views
Total Views
415
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×