Programming For Non-Programmers (AMEX Remix Edition)
-
Upload
chris-castiglione -
Category
Technology
-
view
1.049 -
download
2
Transcript of Programming For Non-Programmers (AMEX Remix Edition)
![Page 1: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/1.jpg)
Chris Castiglione@castig | pfnp.me
PROGRAMMING FOR NON-PROGRAMMERS
(AMEX REMIX EDITION)
![Page 2: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/2.jpg)
THE QUESTIONHow do I communicate an idea from my head… to a computer?
![Page 3: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/3.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
1. FRONT END VS. BACK END
2. WHICH LANGUAGE?
3. CODE!
4. APIS
![Page 4: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/4.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
1. FRONT END VS. BACK END
2. WHICH LANGUAGE?
3. CODE!
4. APIS
![Page 5: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/5.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
1. FRONT END VS. BACK END
2. WHICH LANGUAGE?
3. CODE!
4. APIS
![Page 6: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/6.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
1. FRONT END VS. BACK END
2. WHICH LANGUAGE?
3. CODE!
4. APIS
![Page 7: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/7.jpg)
What is Programming?
![Page 8: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/8.jpg)
PROGRAMMING‣ a set of instructions‣ used to solve a problem
![Page 9: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/9.jpg)
PEANUT BUTTER & JELLY SANDWICH
![Page 10: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/10.jpg)
PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread
![Page 11: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/11.jpg)
PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread‣ spread peanut butter on one slice of bread
![Page 12: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/12.jpg)
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
![Page 13: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/13.jpg)
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
![Page 14: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/14.jpg)
PROBLEM SOLVED!
![Page 15: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/15.jpg)
PROGRAMMING‣ a set of instructions‣ used to solve a problem
![Page 16: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/16.jpg)
WHY ARE WE HERE?‣ to learn to think like a developer
![Page 17: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/17.jpg)
WHY ARE WE HERE?‣ to learn to think like a developer ‣ to understand the tools (aka. Programming Languages)
![Page 18: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/18.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
is to build somethingthat nobody wants.
The worst thing
![Page 19: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/19.jpg)
I. WEB DEV PROCESSUnderstand the Problem
![Page 20: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/20.jpg)
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
![Page 21: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/21.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
![Page 22: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/22.jpg)
Visual Design
![Page 23: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/23.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
![Page 24: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/24.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design
Development
![Page 25: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/25.jpg)
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
VISUAL DESIGNWireframes become design comps
25
![Page 26: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/26.jpg)
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
VISUAL DESIGNEach wireframe template becomes a comp template
26Homepage BlogListen
source: www.risk-show.com
![Page 27: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/27.jpg)
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
STYLE GUIDE
27
Style TileFinal
source: www.risk-show.com
![Page 28: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/28.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
![Page 29: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/29.jpg)
Development
![Page 30: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/30.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
![Page 31: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/31.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design
Development
![Page 32: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/32.jpg)
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENTComps become graphics & real text
32
![Page 33: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/33.jpg)
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENTComps 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
33
![Page 34: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/34.jpg)
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENT
34
The development process can be broken into two separate responsibilities:
![Page 35: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/35.jpg)
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
FRONT-END WEB DEVELOPMENT
1.Client Side2.How things look to the user3.Involves: Images, content, structure4.HTML, CSS, JavaScript
DEVELOPMENT
35
The development process can be broken into two separate responsibilities:
![Page 36: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/36.jpg)
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
FRONT-END WEB DEVELOPMENT
1.Client Side2.How things look to the user3.Involves: Images, content, structure4.HTML, CSS, JavaScript
DEVELOPMENTThe development process can be broken into two separate responsibilities:
BACK-END WEB DEVELOPMENT
1.Server Side2.How things works 3.Involves: “business logic” and data 4.Ruby, PHP, C++, Java, etc
36
![Page 37: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/37.jpg)
±±±
ZAPPOS.COM
PROGRAMMING FOR NON-PROGRAMMERS
FRONT-END
homepage cart registration
BACK-END
process.php
![Page 38: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/38.jpg)
II. WHICH LANGUAGE?Understand the Tools
![Page 39: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/39.jpg)
Vocabulary
![Page 40: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/40.jpg)
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‣ WINDOWSIn a browser
‣ CHROME‣ SAFARI
‣ FIREFOX‣ OPERA
‣ INTERNET EXPLORER
THE WEBWEB SITESWEB APPS
MOBILE WEB
VOCABULARY
![Page 41: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/41.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
PHP
Ruby
C
C++Python
Perl .NETJava
Objective C
Visual Basic
ASP
COBOL
Ruby
Lisp
Logo
Smalltalk
ABC
ADA
ActionScript
Clu
R
![Page 42: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/42.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
PHP
Ruby
C
C++Python
Perl .NETJava
Objective C
Visual Basic
ASP
Ruby
Lisp
Logo
Smalltalk
ABC
ADA
ActionScript
Clu
COBOL
R
![Page 43: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/43.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
PHP Ruby
PythonJava.NETC++
Objective C
![Page 44: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/44.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
Machine CodeLOW LEVEL
HIGH LEVEL
HIGH TO LOW LANGUAGES
C
PHP Ruby Python
Java .NET
C++ Objective C
![Page 45: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/45.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HIGH TO LOW LANGUAGES
1000 CLC 1001 LDA $80 1003 ADC $4009 1006 STA $80 1008 LDA $81 100A ADC $400A 100D STA $81
Machine Code jQUERY$("#submit-button").click(function(){ $(".ball").animate({"left": "-=50px"}, "slow");});
![Page 46: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/46.jpg)
PYTHONPHP
PROGRAMMING FOR NON-PROGRAMMERS
WEB PROGRAMMING LANGUAGESRUBY
Wikipedia
Hulu+
Groupon
Youtube
GoogleVimeo
![Page 47: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/47.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
Then why choose... ?
![Page 48: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/48.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
![Page 49: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/49.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
“REAL-TIME” IS MOST IMPORTANT‣ Node.js
![Page 50: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/50.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
![Page 51: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/51.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
Which Language for...?Mobile
![Page 52: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/52.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
iPHONE, iPAD, MAC OS‣ Objective-C
![Page 53: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/53.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
ANDROID‣ java
![Page 54: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/54.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
MOBILE DEVELOPMENT FRAMEWORKS: NATIVE
Appcelerator/Titanium“cross-compiler”
Phone Gap“native wrapper”
![Page 55: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/55.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
CROSS COMPILE W/ APPCELERATOR
Javascript-ish
Objective-CJava
![Page 56: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/56.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
THE WEBWEB SITESWEB APPS
MOBILE WEB
MOBILE WEB
![Page 57: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/57.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
RESPONSIVE DESIGN
Desktop Browser
Safari on iPhone
![Page 58: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/58.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
PHP Ruby
Python
JavaObjective C
WEB
Native Apps
![Page 59: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/59.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
PHP vs. Ruby
![Page 60: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/60.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
2006
RUBY2001
PHP1995
PHPRUBY
today
PHPRUBY
![Page 61: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/61.jpg)
PYTHONPHP
PROGRAMMING FOR NON-PROGRAMMERS
WEB PROGRAMMING LANGUAGESRUBY
Wikipedia
Hulu+
Groupon
Youtube
GoogleVimeo
![Page 62: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/62.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
And then you were all like...
![Page 63: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/63.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
Q: WELL WHAT ABOUT...
PROTOTYPE
JQUERY
AJAX*
RUBY ON RAILS
BACKBONE.JS
EXTJS
*Ajax is a JavaScript related technique
SASSDJANGO
![Page 64: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/64.jpg)
Frameworks
![Page 65: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/65.jpg)
TO THE CODE!
![Page 66: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/66.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
Q: WELL WHAT ABOUT...
PROTOTYPE
JQUERY
RUBY ON RAILS
BACKBONE.JS
EXTJS
DJANGO
BLUEPRINT
SASS
![Page 67: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/67.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
FUNCTIONdefines a block of code
*I’m giving you permission to use this in the general sense
Functions
Methods
Classes
**
![Page 68: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/68.jpg)
Content Management Systems(CMS)
![Page 69: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/69.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
CONTENT MANAGEMENT SYSTEMS (CMS)
![Page 70: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/70.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
CONTENT MANAGEMENT SYSTEMS (CMS)
Wordpress Expression Engine Custom
?
![Page 71: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/71.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
FUNCTIONdefines a block of code
*I’m giving you permission to use this in the general sense
Functions
Methods
Classes
**
![Page 72: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/72.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
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
walk()
![Page 73: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/73.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
And then you were all like...
![Page 74: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/74.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
Q: WELL WHAT ABOUT...
PROTOTYPE
JQUERY
AJAX*
RUBY ON RAILS
BACKBONE.JS
EXTJS
*Ajax is a JavaScript related technique
SASSDJANGO
![Page 75: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/75.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
WHAT IS A TECH STACK?
![Page 76: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/76.jpg)
III. CODE!Use the Tools
![Page 77: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/77.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HTML -structure CSS - styleJS - behavior
![Page 78: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/78.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HTML (noun)CSS (adjective)JS (verb)
![Page 79: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/79.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make the logo bigger?
![Page 80: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/80.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make the logo bigger?CSS
HTML
![Page 81: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/81.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make that grey heading fadein?
![Page 82: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/82.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make that grey heading fadein?JAVASCRIPT
HTML
CSS
![Page 83: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/83.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
4 CONCEPTS...that are the same in every programming language
![Page 84: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/84.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
1. PRINT
![Page 85: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/85.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
2. VARIABLES
![Page 86: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/86.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
POP QUIZ! a = 1
b = 2
c = a + b
c = ?
![Page 87: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/87.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
POP QUIZ! a = 1
b = 2
c = a + b
c = 3
![Page 88: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/88.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
3. FUNCTIONS
![Page 89: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/89.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
4. COMMENTS
![Page 90: Programming For Non-Programmers (AMEX Remix Edition)](https://reader033.fdocuments.net/reader033/viewer/2022042814/554958b1b4c905fc4e8b536f/html5/thumbnails/90.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
ALL THIS STUFF GOES ON A SERVER