Programming For Non-Programmers @ One Month HQ

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

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

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

‣find

two slices of bread

‣find

two slices of bread

‣spread

peanut butter on one slice of bread

‣find

two slices of bread

‣spread


‣spread

jelly on the other slice of bread

‣find

two slices of bread

‣spread


‣spread

jelly on the other slice of bread

‣put

the two slices of bread together

WHY ARE WE HERE?
‣to

learn to think like a developer

I. WEB DEV PROCESS
Understand the Problem

LET’S TAKE A HIKE!
‣

10 hours? Great!

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
MVP - Minimal Viable Product
‣Minimum
‣Validate

features needed to test your assumptions

your idea


The worst thing
is to build something
that nobody wants.

Web Master
Web Developer
Front-end

Back-end

Web Designer
User Experience Visual Designer

Database Expert HTML5 Animation User-Interface Information Architecture
SEO Expert

Usability

Security Testing

Growth Hacker


A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Visual Design

Development


USER-EXPERIENCE (UX)
‣Who

are our users?

‣What

are the users goals?

‣What

does the program do when there are errors?

‣What

are the biggest risks?

[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]

CASE STUDY: IDEAS, FEATURES, GOALS


“I want all of the features!”


Who is our user?


CASE STUDY: USER RESEARCH


CASE STUDY PERSONAS

Mary
Dickinson, North Dakota

John
Long Island, New York


PERSONAS: WHAT JOHN CARES ABOUT…
‣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
‣Pays

video online, sports clips mostly.

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?



User-Experience
(UX)

Visual Design

Information
Architecture (IA)

Development


INFORMATION ARCHITECTURE (IA)
A model or blueprint for the site, resulting in
deliverables such as:
‣wireframes
‣flow

diagrams

‣sitemap


BRAINSTORMING


LOW FIDELITY
WIREFRAMES


HIGH FIDELITY
WIREFRAMES


SMALL SITE


LARGE SITE


FUNCTIONAL


FLOW DIAGRAM


FOURSQUARE

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.

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.

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



User-Experience
(UX)

Information
Architecture (IA)

Development

Visual Design

VISUAL DESIGN
Wireframes become design comps

source: www.risk-show.com

VISUAL DESIGN
Each wireframe template becomes a comp template

Homepage

Listen

Blog

source: www.risk-show.com

STYLE GUIDE

Style Tile

Final


DEVELOPMENT
Comps become graphics & real text

71


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

72


FRONT-END
DEVELOPMENT (noun)


BACK-END
DEVELOPMENT (noun)


DEVELOPMENT
The development process can be broken into two separate responsibilities:

75


DEVELOPMENT

FRONT-END WEB DEVELOPMENT
1.Client Side
2.How things look to the user
3.Involves: Images, content, structure
4.HTML, CSS, JavaScript

76


DEVELOPMENT

FRONT-END WEB DEVELOPMENT

BACK-END WEB DEVELOPMENT

1.Client Side
2.How things look to the user
3.Involves: Images, content, structure
4.HTML, CSS, JavaScript

1.Server Side
2.How things works
3.Involves: “business logic” and data
4.Ruby, PHP C++, Java, etc
,

77


ZAPPOS.COM

process.php

BACK-END

FRONT-END

registration
homepage

cart

II. WHICH LANGUAGE?
Understand the Tools


VOCABULARY

THE WEB
WEB SITES
WEB APPS
MOBILE WEB

NATIVE APPS
Directly on your Operating System
‣ IPHONE

In a browser
‣ CHROME

‣ FIREFOX

‣ SAFARI

‣ OPERA

‣INTERNET

EXPLORER

‣ OSX

‣ ANDROID

‣WINDOWS

OTHER
‣DECODE THE

GENOME
‣XBOX
‣VIDEO GAMES

‣OTHER

HARDWARE
‣ANYTHING ELSE
I MAY HAVE
MISSED

PHP

.NET

Perl

ADA

R

Lisp

C

Objective C

ABC

COBOL
Ruby

Logo
ASP

Smalltalk
Ruby
Python

Java

Clu

Visual Basic
C++

ActionScript

PHP
Ruby
Python
Java
.NET
C++
Objective C


HIGH TO LOW LANGUAGES
HIGH
LEVEL

PHP

Ruby

Java
C++

Python

.NET
Objective C
C

LOW LEVEL

Machine Code


HIGH TO LOW LANGUAGES
Machine Code
1000
1001
1003
1006
1008
100A
100D

CLC
LDA $80
ADC $4009
STA $80
LDA $81
ADC $400A
STA $81

jQUERY
$("#submit-button").click(function(){
$(".ball").animate({"left": "-=50px"}, "slow");
});


WEB PROGRAMMING LANGUAGES
PHP

RUBY

PYTHON

Wikipedia

Twitter

Youtube

Vimeo

Hulu+

Google

Facebook

Groupon


PHP Ruby... or Python?
...


1991

PYTHON

1995

PHP
RUBY


1991

PYTHON

1995

2001

2006

PHP
RUBY

PHP

RUBY


1991

PYTHON

1995

2001

2006

today

PHP
RUBY

PHP

RUBY

RUBY
PYTHON
PHP


Then why choose... ?


“REAL-TIME” IS MOST IMPORTANT
‣Node.js


Which Language for...?
Mobile


NATIVE APPS

Directly on your Operating System
‣ IPHONE

‣ OSX

‣ ANDROID

‣WINDOWS


iPHONE, iPAD, MAC OS
‣Objective-C


ANDROID
‣java


MOBILE DEVELOPMENT FRAMEWORKS: NATIVE

Appcelerator/Titanium
“cross-compiler”

Phone Gap
“native wrapper”


CROSS COMPILE W/ APPCELERATOR

Java

Objective-C

Javascript-ish


MOBILE WEB

THE WEB
WEB SITES
WEB APPS
MOBILE WEB


RESPONSIVE DESIGN

Safari on iPhone
Desktop Browser


How To Choose A Programming
Language


WHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:
‣Difficulty

level

‣Community
‣Resources

(people you have available)

‣Development

time to build an app


And then you were all like...


Q: WELL WHAT ABOUT...

DJANGO

SASS
EXTJS

JQUERY
AJAX*

BACKBONE.JS
PROTOTYPE

RUBY ON RAILS

*Ajax is a JavaScript related technique

Content Management Systems
(CMS)


CONTENT MANAGEMENT SYSTEMS (CMS)


CONTENT MANAGEMENT SYSTEMS (CMS)

?
Wordpress

Expression Engine

Custom


CMS DISTRIBUTION IN TOP MILLION SITES


Place Your Bets!


TIMELINE:
THE BLACK EYED PEAS
• Main task: blog
• Agency project
• Large budget
• 6 page content site

Timeline: The Black Eyed Peas
30 HOURS
UX

40 HOURS
IA

60 HOURS
DESIGN

DEVELOPMENT

120+ HOURS

Total: 250+ Hours


TIMELINE:
THE STORY STUDIO
• Main task: classes
• Consulting
• Low budget
• 4 page navigation site

Timeline: The Story Studio
8-12 HOURS
UX

IA

10 HOURS
DESIGN

35 HOURS
DEVELOPMENT

Total: 57+ Hours


TIMELINE:
DERBY JACKPOT
• Main task: an online horse
gambling platform

• Start-up Consulting
• Decent-sized budget
• High risk: APIs

Timeline: Derby Jackpot
45 HOURS
UX

45 HOURS
IA

120 HOURS
DESIGN

DEVELOPMENT

500+ HOURS

Total: 700+ Hours


TIMELINE:
GENERALASSEMB.LY
Main tasks:

• classes
• about us
• video
• social network
• custom payment gateway

WEB APP


TIMELINE:
GENERALASSEMB.LY
Main tasks:

• classes
• about us
• video
• social network
• custom payment gateway

WEB SITE


HTML -structure
CSS - style
JS - behavior


HTML (noun)
CSS (adjective)
JS (verb)


HEY CHRIS, CAN YOU...

make the logo bigger?


HTML

make the logo bigger?
CSS



make that grey heading fadein?


HTML

make that grey heading fadein?
CSS

JAVASCRIPT

Programming For Non-Programmers @ One Month HQ

Recommended

Recommended

More Related Content

More from Chris Castiglione

More from Chris Castiglione (8)

Recently uploaded

Recently uploaded (20)

Programming For Non-Programmers @ One Month HQ