1.
PROGRAMMING FOR
NON-PROGRAMMERS
Chris Castiglione
@castig | pfnp.me

2.
THE QUESTION
How do I communicate an idea
from my head… to a computer?

3.
PROGRAMMING FOR NON-PROGRAMMERS
1. WEB DEV PROCESS
2. WHICH LANGUAGE?
3. CODE!

4.
PROGRAMMING FOR NON-PROGRAMMERS
1. WEB DEV PROCESS
2. WHICH LANGUAGE?
3. CODE!

5.
PROGRAMMING FOR NON-PROGRAMMERS
1. WEB DEV PROCESS
2. WHICH LANGUAGE?
3. CODE!

6.
What is Programming?
(...and why do I care?)

7.
PROGRAMMING
‣ a set of instructions
‣ used to solve a problem

8.
PEANUT BUTTER & JELLY SANDWICH

9.
PEANUT BUTTER & JELLY SANDWICH
‣ find two slices of bread

10.
PEANUT BUTTER & JELLY SANDWICH
‣ find two slices of bread
‣ spread peanut butter on one slice of bread

11.
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

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
‣ put the two slices of bread together

13.
PROBLEM SOLVED!

14.
PROGRAMMING
‣ a set of instructions
‣ used to solve a problem

15.
WHY ARE WE HERE?
‣ to learn to think like a developer

16.
WHY ARE WE HERE?
‣ to learn to think like a developer
‣ to understand the tools (aka. Programming Languages)

17.
WHY ARE WE HERE?
‣ to learn to think like a developer
‣ to understand the tools (aka. Programming Languages)
‣ and to understand the constraints

18.
I. WEB DEV PROCESS
Understand the Problem

19.
Vocabulary

20.
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

21.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
PRODUCT DEVELOPMENT
‣ MVP - Minimal Viable Product
‣ Minimum features needed to test your assumptions
‣ Build, Measure, Learn
‣ Validate your idea

22.
PROGRAMMING FOR NON-PROGRAMMERS
The worst thing
is to build something
that no body wants.

23.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience Information Visual Design Development
(UX) Architecture (IA)

24.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
A TYPICAL WEB DEVELOPMENT CYCLE
Information Visual Design Development
Architecture (IA)
User-Experience
(UX)

25.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
USER-EXPERIENCE (UX)
‣ Who are our users?
‣ How do we know if the user is hitting their goals?
‣ What are the most important features of this site?
‣ What does the program do when there are errors?
‣ What are the biggest risks?

26.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
UX
IDEAL EXPERIENCE BUSINESS
NEEDS
BEST USER
PRACTICES NEEDS

27.
PROGRAMMING FOR NON-PROGRAMMERS
“I want all of the features!”

28.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
CASE STUDY: IDEAS, FEATURES, GOALS

29.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
Who is our user?

30.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
CASE STUDY: USER RESEARCH

31.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
CASE STUDY PERSONAS
Mary
Dickinson, North Dakota
John
Long Island, New York

32.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
PERSONAS: WHAT JOHN CARES ABOUT…
‣ Has5+ computers in his home but says he would ‣ Has a Facebook and Twitter profile but would not
gamble on his iPad or a PC netbook running want to use it to setup an account. He would like
Firefox primarily. to be able to see who of his Twitter and Facebook
‣ Hasan iPhone 4, can’t wait to convince his wife friends is playing the game however.
he needs the new one. Doesn’t think he would ‣ Watches video online, sports clips mostly.
gamble on the iPhone but could see wanting to ‣ Pays for Netflix.
check his account. ‣ Doesmost, if not all, shopping online out of
convenience and selection.

33.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
PERSONAS: WHAT JOHN CARES ABOUT
‣ This isn’t sketchy is it?
‣ How can I get my friends involved?
‣ How often are the races on the weekends?
‣ How good quality are the videos?
‣ How will the load time be on my iPad?
‣ How much do I need to play?
‣ How much could I win?
‣ Do I need to know about horses to make smart bets?

34.
Information Architecture

35.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience Information Visual Design Development
(UX) Architecture (IA)

36.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience Visual Design Development
(UX)
Information
Architecture (IA)

37.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
INFORMATION ARCHITECTURE (IA)
A model or blueprint for the site, resulting in
deliverables such as:
‣ wireframes
‣ flow diagrams
‣ sitemap

38.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
IA: THE BLUEPRINT
SITEMAPS & FLOW DIAGRAMS WIREFRAMES & CONTENT
Establish flow and order Define the user interaction
and ease the handoff
process to the creative
team

39.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
BRAINSTORMING

40.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
BRAINSTORMING

41.
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
TWITTER
(PROTOTYPE)

42.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
LOW FIDELITY MOCKUPS

43.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
HIGH FIDELITY MOCKUPS

44.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
SMALL SITE

45.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
LARGE SITE

46.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
FUNCTIONAL

47.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
FLOW DIAGRAM

48.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
FLOW DIAGRAM

49.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
iPHONE WIREFRAMES

50.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
FOURSQUARE

51.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
FOURSQUARE

52.
PUT STUFF HERE LATER
HEADER 2
Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus
mollis interdum.

53.
CONTENT STRATEGY
TREAT TEXT AS USER-INTERFACE
Typography has one plain duty before it and that is to convey information in
writing. No argument or consideration can absolve typography from this duty.
A printed work which cannot be read becomes a product without purpose.

54.
DESIGN. IS ABOUT WORDS.
TREAT TEXT AS USER-INTERFACE

55.
Visual Design

56.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience Information Visual Design Development
(UX) Architecture (IA)

57.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience Information Development
(UX) Architecture (IA)
Visual Design

58.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
VISUAL DESIGN
Wireframes become design comps
59

59.
PROGRAMMING FOR NON-PROGRAMMERS source: www.risk-show.com
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
VISUAL DESIGN
Each wireframe template becomes a comp template
Homepage Listen Blog
60

60.
PROGRAMMING FOR NON-PROGRAMMERS source: www.risk-show.com
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
STYLE GUIDE
Style Tile
Final
61

61.
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
VISUAL DESIGN
PRINT DIGITAL
‣ CMYK ‣ RGB
‣ inches ‣ pixels
‣ 300 dpi ‣ 72 dpi
‣ Illustrator / InDesign ‣ Photoshop (for the Web)
‣ PDF, Word Doc ‣ PNG, JPG, GIF
62

62.
Development

63.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience Information Visual Design Development
(UX) Architecture (IA)

64.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience Information Visual Design
(UX) Architecture (IA)
Development

65.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENT
Comps become graphics & real text
66

66.
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
67

67.
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

68.
PROGRAMMING FOR NON-PROGRAMMERS
BACK-END
DEVELOPMENT (noun)
the server-side programming that
processes the “business logic”, database,
web services and other utilities

69.
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENT
The development process can be broken into two separate responsibilities:
70

70.
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
71

71.
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
,
72

72.
PROGRAMMING FOR NON-PROGRAMMERS
ZAPPOS.COM process.php
BACK-END
FRONT-END
homepage cart registration

73.
PROGRAMMING FOR NON-PROGRAMMERS
WEB DEVELOPMENT PROCESS
‣ Product Development
‣ User Experience
‣ Information Architecture
‣ Content Strategy
‣ Project Manager
‣ Business Analyst
‣ Visual Designer
‣ Front-end developer
‣ Back-end developer
‣ Usability
‣ Security
‣ SEO Expert
‣ Analytics Expert
‣ Quality Assurance (QA) Tester
‣ Server Administrator
‣ Growth Hacking

74.
PROGRAMMING FOR NON-PROGRAMMERS
POST-LAUNCH ROLES
1.Growth Hacker
2.SEO
3.Analytics Expert
4.Quality Assurance

75.
PROGRAMMING FOR NON-PROGRAMMERS

76.
PROGRAMMING FOR NON-PROGRAMMERS
WATERFALL

77.
PROGRAMMING FOR NON-PROGRAMMERS
AGILE WATERFALL

78.
II. WHICH LANGUAGE?
Understand the Tools

79.
PROGRAMMING FOR NON-PROGRAMMERS
Java
PHP Perl .NET ADA
Lisp R
C
ABC Objective C
COBOL
Ruby Logo
ASP Clu
Smalltalk
Ruby Visual Basic
Python C++ ActionScript

80.
PROGRAMMING FOR NON-PROGRAMMERS
Java
PHP Perl .NET ADA
Lisp R
C
ABC Objective C
COBOL
Ruby Logo
ASP Clu
Smalltalk
Ruby Visual Basic
Python C++ ActionScript

81.
PROGRAMMING FOR NON-PROGRAMMERS
Java
PHP Perl .NET ADA
Lisp R
C
ABC Objective C
COBOL
Ruby Logo
ASP Clu
Smalltalk
Ruby Visual Basic
Python C++ ActionScript

82.
PROGRAMMING FOR NON-PROGRAMMERS
HIGH TO LOW LANGUAGES
HIGH LEVEL
PHP Ruby Python
Java .NET
C++ Objective C
C
LOW LEVEL Assembly Language
Machine Code

83.
PROGRAMMING FOR NON-PROGRAMMERS
HIGH TO LOW LANGUAGES
Machine Code jQUERY
1000 CLC
1001 LDA $80 $("#submit-button").click(function(){
1003 ADC $4009 $(".ball").animate({"left": "-=50px"}, "slow");
1006 STA $80 });
1008 LDA $81
100A ADC $400A
100D STA $81

84.
PROGRAMMING FOR NON-PROGRAMMERS
INFLUENCED BY?
PHP RUBY JAVA
‣C ‣ C++ ‣ ADA ‣ EIFFEL ‣ ADA 83 ‣ EIFFEL
‣ PERL ‣ TCL ‣ C++ ‣ LISP ‣ MESA ‣ SmallTalk
‣ JAVA ‣ CLU ‣ PERL ‣ C++
‣ DYLAN ‣ PYTHON

85.
PROGRAMMING FOR NON-PROGRAMMERS
THE MOTHER OF ALL LANGUAGES
C

86.
PROGRAMMING FOR NON-PROGRAMMERS
THE WEB WEB SITES
WEB APPS
MOBILE WEB
In a browser
‣ CHROME ‣ FIREFOX ‣ INTERNET
‣ SAFARI ‣ OPERA EXPLORER

87.
PROGRAMMING FOR NON-PROGRAMMERS
WHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:
‣ Difficulty level

88.
PROGRAMMING FOR NON-PROGRAMMERS
WHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:
‣ Difficulty level
‣ Community

89.
PROGRAMMING FOR NON-PROGRAMMERS
WHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:
‣ Difficulty level
‣ Community
‣ Development time to build an app

90.
PROGRAMMING FOR NON-PROGRAMMERS
WEB PROGRAMMING LANGUAGES
PHP RUBY PYTHON
Wikipedia Twitter Youtube
Vimeo Hulu+ Google
Facebook Groupon

91.
PROGRAMMING FOR NON-PROGRAMMERS
PHP vs. Ruby

92.
PROGRAMMING FOR NON-PROGRAMMERS
PHP RUBY
EASIER TO STEEPER
GET LEARNING
STARTED CURVE
WITH

93.
PROGRAMMING FOR NON-PROGRAMMERS
1995
PHP
RUBY

94.
PROGRAMMING FOR NON-PROGRAMMERS
1995 2001
PHP PHP
RUBY

95.
PROGRAMMING FOR NON-PROGRAMMERS
1995 2001 2006
PHP PHP RUBY
RUBY

96.
PROGRAMMING FOR NON-PROGRAMMERS
1995 2001 2006 today
PHP PHP RUBY PHP
RUBY RUBY

97.
PROGRAMMING FOR NON-PROGRAMMERS
THE WEB WEB SITES
WEB APPS
MOBILE WEB
In a browser
‣ CHROME ‣ FIREFOX ‣ INTERNET
‣ SAFARI ‣ OPERA EXPLORER

98.
PROGRAMMING FOR NON-PROGRAMMERS
USER DRIVEN CONTENT DRIVEN
DATA DRIVEN
BLOG
WEB APP WEB SITE
CUSTOM TASKS COMMON TASKS “OUT OF THE BOX” CMS
PLUGINS
In a browser

99.
PROGRAMMING FOR NON-PROGRAMMERS
RUBY PHP
WEB APP WEB SITE

100.
PROGRAMMING FOR NON-PROGRAMMERS
Pop Quiz: Review!

101.
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE:
THE BLACK EYED PEAS
• Main task: blog
• Agency project
• Large budget
• 6 page content site
WEB SITE

102.
PROGRAMMING FOR NON-PROGRAMMERS
Timeline: The Black Eyed Peas
30 HOURS
UX
40 HOURS
IA
60 HOURS
DESIGN
120+ HOURS
DEVELOPMENT

103.
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE:
THE STORY STUDIO
• Main task: classes
• Consulting
• Low budget
• 4 page navigation site
WEB SITE

104.
PROGRAMMING FOR NON-PROGRAMMERS
Timeline: The Story Studio
8-12 HOURS
UX IA
10 HOURS
DESIGN
35 HOURS
DEVELOPMENT

105.
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE:
DERBY JACKPOT
• Main task: an online horse
gambling platform
• Start-up Consulting
• Decent-sized budget
• High risk: APIs
WEB APP

106.
PROGRAMMING FOR NON-PROGRAMMERS
Timeline: Derby Jackpot
45 HOURS
UX
45 HOURS
IA
120 HOURS
DESIGN
500+ HOURS
DEVELOPMENT

107.
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE:
GENERALASSEMB.LY
Main tasks:
• classes
• about us
• video
• social network
• custom payment gateway
WEB APP

108.
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE: WEB SITE
GENERALASSEMB.LY
Main tasks:
• classes
• about us
• video
• social network
• custom payment gateway

109.
PROGRAMMING FOR NON-PROGRAMMERS
Which Language for...?
Native Apps

110.
PROGRAMMING FOR NON-PROGRAMMERS
NATIVE APPS
Directly on your Operating System
‣ IPHONE ‣ OSX
‣ ANDROID ‣ WINDOWS

111.
PROGRAMMING FOR NON-PROGRAMMERS
iPHONE, iPAD, MAC OS
‣ Objective-C

112.
PROGRAMMING FOR NON-PROGRAMMERS
ANDROID
‣ java

113.
PROGRAMMING FOR NON-PROGRAMMERS
MOBILE DEVELOPMENT FRAMEWORKS: NATIVE
Appcelerator/Titanium Phone Gap
“cross-compiler” “native wrapper”

114.
PROGRAMMING FOR NON-PROGRAMMERS
CROSS COMPILE W/ APPCELERATOR
Java
Objective-C
Javascript-ish

115.
PROGRAMMING FOR NON-PROGRAMMERS
MOBILE WEB / RESPONSIVE DESIGN
Safari on iPhone
Desktop Browser

116.
PROGRAMMING FOR NON-PROGRAMMERS
MOBILE WEB: FRAMEWORKS
Sencha jQuery Mobile
Javascript-ish jQuery-ish

117.
Content Management Systems
(CMS)

118.
PROGRAMMING FOR NON-PROGRAMMERS
CONTENT MANAGEMENT SYSTEMS (CMS)

119.
PROGRAMMING FOR NON-PROGRAMMERS
CONTENT MANAGEMENT SYSTEMS (CMS)
?
Wordpress Expression Engine Custom

120.
PROGRAMMING FOR NON-PROGRAMMERS
CMS DISTRIBUTION IN TOP MILLION SITES

121.
PROGRAMMING FOR NON-PROGRAMMERS
Which languages are left?

122.
PROGRAMMING FOR NON-PROGRAMMERS
ANALYTICS, QUICK PROCESSES
‣ C++

123.
PROGRAMMING FOR NON-PROGRAMMERS
“REAL-TIME” IS MOST IMPORTANT
‣ Node.js

124.
PROGRAMMING FOR NON-PROGRAMMERS

125.
PROGRAMMING FOR NON-PROGRAMMERS
And then you were all like...

126.
PROGRAMMING FOR NON-PROGRAMMERS
Q: WELL WHAT ABOUT... DJANGO
SASS
EXTJS
JQUERY
BACKBONE.JS
AJAX*
RUBY ON RAILS
PROTOTYPE
*Ajax is a JavaScript related technique

127.
Frameworks

128.
LET’S CODE SOME

129.
and come back to frameworks

130.
PROGRAMMING FOR NON-PROGRAMMERS
Q: WELL WHAT ABOUT... DJANGO
EXTJS
JQUERY
BLUEPRINT
BACKBONE.JS
RUBY ON RAILS
PROTOTYPE

131.
PROGRAMMING FOR NON-PROGRAMMERS
Functions
*
FUNCTION * Methods
defines a block of code Classes
*I’m giving you permission
to use this in the general sense

132.
PROGRAMMING FOR NON-PROGRAMMERS
FRAMEWORK: Login Example
login()
The “perfect registration form”

133.
PROGRAMMING FOR NON-PROGRAMMERS
FRAMEWORK: Login Example
1. Create an email field
2. Create a password field
3. Create a button that reads “Submit”
login()
4. Check to see that the username isn’t taken
5. Validate that the email is real
6. Add this user to the database

134.
PROGRAMMING FOR NON-PROGRAMMERS
1. Advance right leg forward 0.5697 feet
2. Shift weight to right foot
walk()
3. Advance left leg forward 0.5697 feet
4. Shift weight to left foot

135.
PROGRAMMING FOR NON-PROGRAMMERS
WALK() {
1. Advance right leg forward 0.5697 feet
2. Shift weight to right foot
3. Advance left leg forward 0.5697 feet
4. Shift weight to left foot
}

136.
Frameworks

137.
PROGRAMMING FOR NON-PROGRAMMERS
FRAMEWORKS
a collection of pre-baked code
...mostly “functions”, and other great stuff

138.
PROGRAMMING FOR NON-PROGRAMMERS
FRAMEWORKS DJANGO
TWITTER
EXTJS
BOOTSTRAP
JQUERY
BLUEPRINT
BACKBONE.JS
RUBY ON RAILS
PROTOTYPE

139.
PROGRAMMING FOR NON-PROGRAMMERS
WHAT IS TWITTER BOOTSTRAP?
http://twitter.github.com/

140.
WHAT IS TWITTER BOOTSTRAP?
A: Pre-baked... CSS JS

141.
Frameworks

142.
PROGRAMMING FOR NON-PROGRAMMERS
A: JAVASCRIPT FRAMEWORKS & HELPERS
EXTJS
JQUERY
AJAX*
BACKBONE.JS
COFFEE SCRIPT
PROTOTYPE
*Ajax is a JavaScript related technique

143.
PROGRAMMING FOR NON-PROGRAMMERS
A: CSS FRAMEWORKS & HELPERS
SASS
960 GRID SYSTEM
LESS
COMPASS
BLUEPRINT

144.
Tech Stack

145.
PROGRAMMING FOR NON-PROGRAMMERS
WHAT IS A TECH STACK?

146.
PROGRAMMING FOR NON-PROGRAMMERS
WHAT IS A TECH STACK?
FRONT-END LANGUAGE CSS HTML JS
SERVER-SIDE LANGUAGE PHP
DATABASE MYSQL
WEB SERVER APACHE
OPERATING SYSTEM LINUX

147.
III. CODE!
Use the Tools

148.
PROGRAMMING FOR NON-PROGRAMMERS
HTML -structure
CSS - style
JS - behavior

149.
PROGRAMMING FOR NON-PROGRAMMERS
HTML (noun)
CSS (adjective)
JS (verb)

150.
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make the logo bigger?

151.
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
HTML
make the logo bigger?
CSS

152.
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make that grey heading fadein?

153.
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
HTML
make that grey heading fadein?
CSS JAVASCRIPT

154.
PROGRAMMING FOR NON-PROGRAMMERS
7 CONCEPTS
...that are the same in every
programming language

155.
PROGRAMMING FOR NON-PROGRAMMERS
1. EVENTS

156.
PROGRAMMING FOR NON-PROGRAMMERS
2. COMMENTS

157.
PROGRAMMING FOR NON-PROGRAMMERS
3. PRINT

158.
PROGRAMMING FOR NON-PROGRAMMERS
4. VARIABLES

159.
PROGRAMMING FOR NON-PROGRAMMERS
POP QUIZ!
a=1
b=2
c=a+b
c=?

160.
PROGRAMMING FOR NON-PROGRAMMERS
POP QUIZ!
a=1
b=2
c=a+b
c=3

161.
PROGRAMMING FOR NON-PROGRAMMERS
5. DATATYPES

162.
PROGRAMMING FOR NON-PROGRAMMERS
6. CONDITIONALS

163.
PROGRAMMING FOR NON-PROGRAMMERS
7. FUNCTIONS

164.
PROGRAMMING FOR NON-PROGRAMMERS
PROGRAMMING CONCEPTS
1. Events 6. Conditionals
2. Comments 7. Functions
3. Print
4. Variables
5. Datatypes

165.
PROGRAMMING FOR NON-PROGRAMMERS
JAVASCRIPT
document.write(“Good morning”);

166.
PROGRAMMING FOR NON-PROGRAMMERS
JAVASCRIPT PHP
document.write(“Good morning”); echo “Good morning”;

167.
PROGRAMMING FOR NON-PROGRAMMERS
JAVASCRIPT PHP
document.write(“Good morning”); echo “Good morning”;
RUBY
print “Good morning”

168.
PROGRAMMING FOR NON-PROGRAMMERS
JAVASCRIPT PHP
document.write(“Good morning”); echo “Good morning”;
RUBY PERL
print “Good morning” say “Good morning”

169.
PROGRAMMING FOR NON-PROGRAMMERS
1. WEB DEV PROCESS
PFNP 1 2. WHICH LANGUAGE?
3. CODE!
PFNP 2 FRONT-END WEB DEV PFNP 3 BACK-END, SQL, APIS

170.
FRONT-END
HTML, CSS, JS

171.
PROGRAMMING FOR NON-PROGRAMMERS
WHAT IS HTML5?

172.
BACK-END
PHP & SQL

173.
PROGRAMMING FOR NON-PROGRAMMERS
WHAT IS A TECH STACK?
FRONT-END LANGUAGE CSS HTML JS
SERVER-SIDE LANGUAGE JAVA PYTHON RUBY PHP
POSTGRES
DATABASE ORACLE MONGO DB MYSQL SQL
WEB SERVER APACHE NGINX
MICROSOFT
OPERATING SYSTEM OSX LINUX IIS

174.
PROGRAMMING FOR NON-PROGRAMMERS
File Under:
“not a programming language”

175.
PROGRAMMING FOR NON-PROGRAMMERS
OPEN SOURCE

176.
PROGRAMMING FOR NON-PROGRAMMERS
FTP

177.
PROGRAMMING FOR NON-PROGRAMMERS
GIT

178.
PROGRAMMING FOR NON-PROGRAMMERS
GIT
‣ Revisions

179.
PROGRAMMING FOR NON-PROGRAMMERS
GIT
‣ Revisions
‣ Collaboration

180.
PROGRAMMING FOR NON-PROGRAMMERS
DATABASES (YOU CHOOSE ONE)
‣ MySQL (“My Sequel”)
‣ PostgreSQL
‣ ORACLE
‣ Mongo DB
‣ Reddis
SELECT post_title FROM wp_users WHERE post_title = “Joy”