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