Programming For Non-Programmers @ One Month HQ
-
date post
12-Sep-2014 -
Category
Education
-
view
2.696 -
download
1
description
Transcript of Programming For Non-Programmers @ One Month HQ
Chris Castiglione@castig | pfnp.me
PROGRAMMING FOR NON-PROGRAMMERS
THE QUESTIONHow do I communicate an idea from my head… to a computer?
PROGRAMMING FOR NON-PROGRAMMERS
1. WEB DEV PROCESS
2. WHICH LANGUAGE?
3. CODE!
PROGRAMMING FOR NON-PROGRAMMERS
1. WEB DEV PROCESS
2. WHICH LANGUAGE?
3. CODE!
PROGRAMMING FOR NON-PROGRAMMERS
1. WEB DEV PROCESS
2. WHICH LANGUAGE?
3. CODE!
What is Programming? (...and why do I care?)
PROGRAMMING‣a set of instructions
‣used to solve a problem
PEANUT BUTTER & JELLY SANDWICH
PEANUT BUTTER & JELLY SANDWICH‣find two slices of bread
PEANUT BUTTER & JELLY SANDWICH‣find two slices of bread
‣spread peanut butter on one slice of bread
‣find two slices of bread
‣spread peanut butter on one slice of bread
‣spread jelly on the other slice of bread
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
PEANUT BUTTER & JELLY SANDWICH
PROBLEM SOLVED!
PROGRAMMING‣a set of instructions
‣used to solve a problem
WHY ARE WE HERE?‣to learn to think like a developer
WHY ARE WE HERE?‣to learn to think like a developer
I. WEB DEV PROCESSUnderstand the Problem
LET’S TAKE A HIKE!
LET’S TAKE A HIKE!
LET’S TAKE A HIKE!‣ 10 hours? Great!
DAY 1
DAY 1
...2 hours later
DAY 2
What the hell!? This wasn’t on the map
DAY 5‣ Holy S!*T we didn’t even leave the Bay Area yet?!??
‣ I hate everything
PRODUCT DEVELOPMENT
PROGRAMMING FOR NON-PROGRAMMERS
MVP - Minimal Viable Product
‣Minimum features needed to test your assumptions
‣Validate your idea
‣Dropbox
‣Dropbox
‣Pebble
‣Pebble
PROGRAMMING FOR NON-PROGRAMMERS
is to build somethingthat nobody wants.
The worst thing
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
PROGRAMMING FOR NON-PROGRAMMERS
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
PROGRAMMING FOR NON-PROGRAMMERS
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
USER-EXPERIENCE (UX)
PROGRAMMING FOR NON-PROGRAMMERS
‣Who are our users?
‣What are the users goals?
‣What does the program do when there are errors?
‣What are the biggest risks?
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
CASE STUDY: IDEAS, FEATURES, GOALS
PROGRAMMING FOR NON-PROGRAMMERS
“I want all of the features!”
PROGRAMMING FOR NON-PROGRAMMERS
Who is our user?
PROGRAMMING FOR NON-PROGRAMMERS
CASE STUDY: USER RESEARCH
PROGRAMMING FOR NON-PROGRAMMERS
CASE STUDY PERSONAS
MaryDickinson, North Dakota
JohnLong Island, New York
PROGRAMMING FOR NON-PROGRAMMERS
‣Has 5+ computers in his home but says he would gamble on his iPad or a PC netbook running Firefox primarily.‣Has an iPhone 4, can’t wait to convince his wife he needs the new one. Doesn’t think he would gamble on the iPhone but could see wanting to check his account.
‣Has a Facebook and Twitter profile but would not want to use it to setup an account. He would like to be able to see who of his Twitter and Facebook friends is playing the game however.‣Watches video online, sports clips mostly.‣Pays for Netflix.‣Does most, if not all, shopping online out of convenience and selection.
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?
PROGRAMMING FOR NON-PROGRAMMERS
PERSONAS: WHAT JOHN CARES ABOUT
Information Architecture
PROGRAMMING FOR NON-PROGRAMMERS
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
PROGRAMMING FOR NON-PROGRAMMERS
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
A model or blueprint for the site, resulting in deliverables such as:
‣wireframes
‣flow diagrams
‣sitemap
PROGRAMMING FOR NON-PROGRAMMERS
INFORMATION ARCHITECTURE (IA)
PROGRAMMING FOR NON-PROGRAMMERS
BRAINSTORMING
PROGRAMMING FOR NON-PROGRAMMERS
BRAINSTORMING
TWITTER (PROTOTYPE)
PROGRAMMING FOR NON-PROGRAMMERS
LOW FIDELITY WIREFRAMES
PROGRAMMING FOR NON-PROGRAMMERS
HIGH FIDELITYWIREFRAMES
PROGRAMMING FOR NON-PROGRAMMERS
SMALL SITE
PROGRAMMING FOR NON-PROGRAMMERS
LARGE SITE
PROGRAMMING FOR NON-PROGRAMMERS
FUNCTIONAL
PROGRAMMING FOR NON-PROGRAMMERS
FLOW DIAGRAM
PROGRAMMING FOR NON-PROGRAMMERS
FLOW DIAGRAM
PROGRAMMING FOR NON-PROGRAMMERS
FOURSQUARE
PROGRAMMING FOR NON-PROGRAMMERS
FOURSQUARE
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.
HEADER 2
PUT STUFF HERE LATER
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.
TREAT TEXT AS USER-INTERFACE
CONTENT STRATEGY
DESIGN. IS ABOUT WORDS.
TREAT TEXT AS USER-INTERFACE
Visual Design
PROGRAMMING FOR NON-PROGRAMMERS
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
PROGRAMMING FOR NON-PROGRAMMERS
User-Experience (UX)
Information Architecture (IA)
Visual Design
Development
A TYPICAL WEB DEVELOPMENT CYCLE
VISUAL DESIGNWireframes become design comps
VISUAL DESIGNEach wireframe template becomes a comp template
Homepage BlogListen
source: www.risk-show.com
STYLE GUIDE
Style TileFinal
source: www.risk-show.com
Development
PROGRAMMING FOR NON-PROGRAMMERS
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
PROGRAMMING FOR NON-PROGRAMMERS
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design
Development
PROGRAMMING FOR NON-PROGRAMMERS
DEVELOPMENTComps become graphics & real text
71
PROGRAMMING FOR NON-PROGRAMMERS
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
72
PROGRAMMING FOR NON-PROGRAMMERS
FRONT-END DEVELOPMENT (noun)
PROGRAMMING FOR NON-PROGRAMMERS
BACK-END DEVELOPMENT (noun)
PROGRAMMING FOR NON-PROGRAMMERS
DEVELOPMENT
75
The development process can be broken into two separate responsibilities:
PROGRAMMING FOR NON-PROGRAMMERS
FRONT-END WEB DEVELOPMENT
1.Client Side
2.How things look to the user
3.Involves: Images, content, structure
4.HTML, CSS, JavaScript
DEVELOPMENT
76
The development process can be broken into two separate responsibilities:
PROGRAMMING FOR NON-PROGRAMMERS
FRONT-END WEB DEVELOPMENT
1.Client Side
2.How things look to the user
3.Involves: Images, content, structure
4.HTML, CSS, JavaScript
The development process can be broken into two separate responsibilities:
BACK-END WEB DEVELOPMENT
1.Server Side
2.How things works
3.Involves: “business logic” and data
4.Ruby, PHP, C++, Java, etc
77
DEVELOPMENT
±±±
ZAPPOS.COM
PROGRAMMING FOR NON-PROGRAMMERS
FRONT-END
homepage cartregistration
BACK-END
process.php
II. WHICH LANGUAGE?Understand the Tools
Vocabulary
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‣WINDOWS
In a browser‣ CHROME‣ SAFARI
‣ FIREFOX‣ OPERA
‣INTERNET EXPLORER
THE WEBWEB SITESWEB APPS
MOBILE WEB
VOCABULARY
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
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
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
PROGRAMMING FOR NON-PROGRAMMERS
PHP Ruby
PythonJava.NETC++
Objective C
PROGRAMMING FOR NON-PROGRAMMERS
Machine CodeLOW LEVEL
HIGH LEVEL
HIGH TO LOW LANGUAGES
C
PHP Ruby Python
Java .NET
C++ Objective C
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");});
PYTHONPHP
PROGRAMMING FOR NON-PROGRAMMERS
WEB PROGRAMMING LANGUAGESRUBY
Wikipedia
Hulu+
Groupon
Youtube
GoogleVimeo
PROGRAMMING FOR NON-PROGRAMMERS
PHP... Ruby... or Python?
PROGRAMMING FOR NON-PROGRAMMERS
1995
PHPRUBY
1991
PYTHON
PROGRAMMING FOR NON-PROGRAMMERS
2006
RUBY2001
PHP1995
PHPRUBY
1991
PYTHON
PROGRAMMING FOR NON-PROGRAMMERS
2006
RUBY2001
PHP1995
PHPRUBY
today
RUBYPYTHONPHP
1991
PYTHON
PROGRAMMING FOR NON-PROGRAMMERS
Then why choose... ?
PROGRAMMING FOR NON-PROGRAMMERS
PROGRAMMING FOR NON-PROGRAMMERS
PROGRAMMING FOR NON-PROGRAMMERS
“REAL-TIME” IS MOST IMPORTANT‣Node.js
PROGRAMMING FOR NON-PROGRAMMERS
Which Language for...?Mobile
PROGRAMMING FOR NON-PROGRAMMERS
NATIVE APPS
Directly on your Operating System‣ IPHONE ‣ ANDROID
‣ OSX‣WINDOWS
PROGRAMMING FOR NON-PROGRAMMERS
iPHONE, iPAD, MAC OS‣Objective-C
PROGRAMMING FOR NON-PROGRAMMERS
ANDROID‣java
PROGRAMMING FOR NON-PROGRAMMERS
MOBILE DEVELOPMENT FRAMEWORKS: NATIVE
Appcelerator/Titanium“cross-compiler”
Phone Gap“native wrapper”
PROGRAMMING FOR NON-PROGRAMMERS
CROSS COMPILE W/ APPCELERATOR
Javascript-ish
Objective-CJava
PROGRAMMING FOR NON-PROGRAMMERS
THE WEBWEB SITESWEB APPS
MOBILE WEB
MOBILE WEB
PROGRAMMING FOR NON-PROGRAMMERS
RESPONSIVE DESIGN
Desktop Browser
Safari on iPhone
PROGRAMMING FOR NON-PROGRAMMERS
How To Choose A Programming Language
PROGRAMMING FOR NON-PROGRAMMERS
WHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:‣Difficulty level
‣Community
‣Resources (people you have available)
‣Development time to build an app
PROGRAMMING FOR NON-PROGRAMMERS
And then you were all like...
PROGRAMMING FOR NON-PROGRAMMERS
Q: WELL WHAT ABOUT...
PROTOTYPE
JQUERY
AJAX*
RUBY ON RAILS
BACKBONE.JS
EXTJS
*Ajax is a JavaScript related technique
SASSDJANGO
Frameworks
Content Management Systems(CMS)
PROGRAMMING FOR NON-PROGRAMMERS
CONTENT MANAGEMENT SYSTEMS (CMS)
PROGRAMMING FOR NON-PROGRAMMERS
CONTENT MANAGEMENT SYSTEMS (CMS)
Wordpress Expression EngineCustom
?
PROGRAMMING FOR NON-PROGRAMMERS
CMS DISTRIBUTION IN TOP MILLION SITES
PROGRAMMING FOR NON-PROGRAMMERS
Place Your Bets!
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE: THE BLACK EYED PEAS• Main task: blog
• Agency project
• Large budget
• 6 page content site
IA
DESIGN
PROGRAMMING FOR NON-PROGRAMMERS
UX
DEVELOPMENT
30 HOURS
Timeline: The Black Eyed Peas
40 HOURS
60 HOURS
120+ HOURS
Total: 250+ Hours
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE: THE STORY STUDIO• Main task: classes
• Consulting
• Low budget
• 4 page navigation site
PROGRAMMING FOR NON-PROGRAMMERSTimeline: The Story Studio
UX IA
DEVELOPMENT
DESIGN
8-12 HOURS
10 HOURS
35 HOURS
Total: 57+ Hours
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE: DERBY JACKPOT• Main task: an online horse gambling platform
• Start-up Consulting
• Decent-sized budget
• High risk: APIs
IA
DESIGN
PROGRAMMING FOR NON-PROGRAMMERS
UX
DEVELOPMENT
45 HOURS
Timeline: Derby Jackpot
45 HOURS
120 HOURS
500+ HOURS
Total: 700+ Hours
PROGRAMMING FOR NON-PROGRAMMERS
WEB APP
TIMELINE: GENERALASSEMB.LYMain tasks:
• classes
• about us
• video
• social network
• custom payment gateway
PROGRAMMING FOR NON-PROGRAMMERS
WEB SITETIMELINE: GENERALASSEMB.LYMain tasks:
• classes
• about us
• video
• social network
• custom payment gateway
PROGRAMMING FOR NON-PROGRAMMERS
And then you were all like...
PROGRAMMING FOR NON-PROGRAMMERS
Q: WELL WHAT ABOUT...
PROTOTYPE
JQUERY
AJAX*
RUBY ON RAILS
BACKBONE.JS
EXTJS
*Ajax is a JavaScript related technique
SASSDJANGO
Frameworks
III. CODE!Use the Tools
PROGRAMMING FOR NON-PROGRAMMERS
HTML -structure
CSS - style
JS - behavior
PROGRAMMING FOR NON-PROGRAMMERS
HTML (noun)
CSS (adjective)
JS (verb)
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make the logo bigger?
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make the logo bigger?CSS
HTML
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make that grey heading fadein?
PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make that grey heading fadein?JAVASCRIPT
HTML
CSS