programming for non-programmers
TRANSCRIPT
![Page 1: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/1.jpg)
Chris Castiglione@castig | pfnp.me
PROGRAMMING FOR NON-PROGRAMMERS#SXSW
![Page 2: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/2.jpg)
MY TWITTER@castig
![Page 3: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/3.jpg)
RESOURCESpfnp.me/sxsw
![Page 4: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/4.jpg)
THE QUESTIONHow do I communicate an idea from my head… to a computer?
![Page 5: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/5.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HTML CSS JS
![Page 6: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/6.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HTML -structure CSS - styleJS - behavior
![Page 7: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/7.jpg)
What is Programming? (...and why do I care?)
![Page 8: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/8.jpg)
PROGRAMMING‣ a set of instructions‣ used to solve a problem
![Page 9: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/9.jpg)
PEANUT BUTTER & JELLY SANDWICH
![Page 10: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/10.jpg)
PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread
![Page 11: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/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](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/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](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/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](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/14.jpg)
PROBLEM SOLVED!
![Page 15: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/15.jpg)
PROGRAMMING‣ a set of instructions‣ used to solve a problem
![Page 16: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/16.jpg)
WHY ARE WE HERE?‣ to learn to think like a developer
![Page 17: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/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](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/18.jpg)
WHY ARE WE HERE?‣ to learn to think like a developer ‣ to understand the tools (aka. Programming Languages) ‣ and to understand the constraints
![Page 19: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/19.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
![Page 20: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/20.jpg)
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”
![Page 21: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/21.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
“If we don’t learn to plumb, we risk being plumbed ourselves... Plumb or be plumbed!”
-Jeff Atwoodcodinghorror.com
![Page 22: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/22.jpg)
Vocabulary
![Page 23: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/23.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 24: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/24.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 25: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/25.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
User-ExperienceDesigner
Developer
![Page 26: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/26.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
User-ExperienceDesigner
Developer
![Page 27: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/27.jpg)
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
![Page 28: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/28.jpg)
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design
Development
![Page 29: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/29.jpg)
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENTComps become graphics & real text
29
![Page 30: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/30.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
30
![Page 31: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/31.jpg)
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)
![Page 32: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/32.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
the server-side programming that processes the “business logic”, database, web services and other utilities
BACK-END DEVELOPMENT (noun)
![Page 33: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/33.jpg)
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENT
33
The development process can be broken into two separate responsibilities:
![Page 34: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/34.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
34
The development process can be broken into two separate responsibilities:
![Page 35: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/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
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
35
![Page 36: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/36.jpg)
±±±
ZAPPOS.COM
PROGRAMMING FOR NON-PROGRAMMERS
FRONT-END
homepage cart registration
BACK-END
process.php
![Page 37: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/37.jpg)
CODE!Use the Tools
![Page 38: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/38.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HTML -structure CSS - styleJS - behavior
![Page 39: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/39.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
PROTOTYPE
JQUERY
Ember.js
Coffee Script
EXTJS
TWITTER BOOTSTRAP
DJANGOFRAMEWORKS
BLUEPRINT
SASSAJAX
![Page 40: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/40.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
WHAT IS HTML5?
![Page 41: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/41.jpg)
WHAT IS MICROSOFT WORD 2011?
1995 2011
![Page 42: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/42.jpg)
1991<HTML>
![Page 43: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/43.jpg)
1991<HTML>
Tim Berners-Lee
![Page 44: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/44.jpg)
Tim Berners-Lee
![Page 45: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/45.jpg)
<blink>
![Page 46: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/46.jpg)
<blink> </blink>
![Page 47: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/47.jpg)
<blink> </blink>Buy Me!
![Page 48: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/48.jpg)
2008
![Page 49: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/49.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HTML -structure CSS - styleJS - behavior
![Page 50: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/50.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HTML (noun)CSS (adjective)JS (verb)
![Page 51: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/51.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make the logo bigger?
![Page 52: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/52.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make the logo bigger?CSS
HTML
![Page 53: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/53.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make that grey heading fadein?
![Page 54: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/54.jpg)
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make that grey heading fadein?JAVASCRIPT
HTML
CSS
![Page 55: Programming for non-programmers](https://reader033.vdocuments.us/reader033/viewer/2022060107/55495987b4c90566498b5396/html5/thumbnails/55.jpg)
http://www.pfnp.me @castig
PFNP.ME Twitter