The document provides an overview of programming for non-programmers. It introduces HTML as providing structure, CSS as defining style, and JavaScript as enabling behavior on webpages. It defines programming as a set of instructions to solve problems, and provides an example of instructions for making a peanut butter and jelly sandwich. The document outlines the typical development process and different roles involved, including user experience design, information architecture, visual design, and development. It distinguishes between front-end development, which deals with how the site appears to users, and back-end development, which processes business logic and data. The document encourages learning to "think like a developer" and introduces some programming tools and frameworks.

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