Programming For Non-Programmers: 2013

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

‣ spread peanut butter on one slice of bread

‣ spread jelly on the other slice of bread

‣ 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

WHY ARE WE HERE?
‣ to understand the tools (aka. Programming Languages)

WHY ARE WE HERE?
‣ to understand the tools (aka. Programming Languages)
‣ and to understand the constraints

I. WEB DEV PROCESS
Understand the Problem


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

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

PRODUCT DEVELOPMENT
‣ MVP - Minimal Viable Product
‣ Minimum features needed to test your assumptions
‣ Build, Measure, Learn
‣ Validate your idea


The worst thing
is to build something
that no body wants.


A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience Information Visual Design Development
(UX) Architecture (IA)



Information Visual Design Development
Architecture (IA)
User-Experience
(UX)

Programming For Non-Programmers: 2013


USER-EXPERIENCE (UX)
‣ Who are our users?
‣ How do we know if the user is hitting their goals?
‣ What are the most important features of this site?
‣ What does the program do when there are errors?
‣ What are the biggest risks?


UX
IDEAL EXPERIENCE BUSINESS
NEEDS

BEST USER
PRACTICES NEEDS


“I want all of the features!”


CASE STUDY: IDEAS, FEATURES, GOALS


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…
‣ Has5+ computers in his home but says he would ‣ Has a Facebook and Twitter profile but would not
gamble on his iPad or a PC netbook running want to use it to setup an account. He would like
Firefox primarily. to be able to see who of his Twitter and Facebook
‣ Hasan iPhone 4, can’t wait to convince his wife friends is playing the game however.
he needs the new one. Doesn’t think he would ‣ Watches video online, sports clips mostly.
gamble on the iPhone but could see wanting to ‣ Pays for Netflix.
check his account. ‣ Doesmost, 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 Visual Design Development
(UX)
Information
Architecture (IA)


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


IA: THE BLUEPRINT
SITEMAPS & FLOW DIAGRAMS WIREFRAMES & CONTENT
Establish flow and order Define the user interaction
and ease the handoff
process to the creative
team


BRAINSTORMING


TWITTER
(PROTOTYPE)


LOW FIDELITY MOCKUPS


HIGH FIDELITY MOCKUPS


SMALL SITE


LARGE SITE


FUNCTIONAL


FLOW DIAGRAM


iPHONE WIREFRAMES


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 Information Development
Visual Design


VISUAL DESIGN
Wireframes become design comps

59

PROGRAMMING FOR NON-PROGRAMMERS source: www.risk-show.com


VISUAL DESIGN
Each wireframe template becomes a comp template

Homepage Listen Blog
60

PROGRAMMING FOR NON-PROGRAMMERS source: www.risk-show.com


STYLE GUIDE

Style Tile
Final
61


VISUAL DESIGN
PRINT DIGITAL
‣ CMYK ‣ RGB
‣ inches ‣ pixels
‣ 300 dpi ‣ 72 dpi
‣ Illustrator / InDesign ‣ Photoshop (for the Web)
‣ PDF, Word Doc ‣ PNG, JPG, GIF

62



User-Experience Information Visual Design
Development


DEVELOPMENT
Comps become graphics & real text

66


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

67


FRONT-END
DEVELOPMENT (noun)
the client-side structure and behavior
of a web site; put simply it mostly concerns
how things look on the page


BACK-END
DEVELOPMENT (noun)
the server-side programming that
processes the “business logic”, database,
web services and other utilities


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

70


DEVELOPMENT

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

71


DEVELOPMENT

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
,

72


ZAPPOS.COM process.php

BACK-END

FRONT-END

homepage cart registration


WEB DEVELOPMENT PROCESS
‣ Product Development
‣ User Experience
‣ Information Architecture
‣ Content Strategy
‣ Project Manager
‣ Business Analyst

‣ Visual Designer
‣ Front-end developer
‣ Back-end developer
‣ Usability
‣ Security
‣ SEO Expert
‣ Analytics Expert
‣ Quality Assurance (QA) Tester
‣ Server Administrator
‣ Growth Hacking


POST-LAUNCH ROLES
1.Growth Hacker
2.SEO
3.Analytics Expert
4.Quality Assurance


WATERFALL


AGILE WATERFALL

II. WHICH LANGUAGE?
Understand the Tools


Java
PHP Perl .NET ADA

Lisp R
C
ABC Objective C
COBOL
Ruby Logo
ASP Clu
Smalltalk

Ruby Visual Basic
Python C++ ActionScript


HIGH TO LOW LANGUAGES
HIGH LEVEL
PHP Ruby Python

Java .NET
C++ Objective C

C

LOW LEVEL Assembly Language
Machine Code


HIGH TO LOW LANGUAGES
Machine Code jQUERY
1000 CLC
1001 LDA $80 $("#submit-button").click(function(){
1003 ADC $4009 $(".ball").animate({"left": "-=50px"}, "slow");
1006 STA $80 });
1008 LDA $81
100A ADC $400A
100D STA $81


INFLUENCED BY?
PHP RUBY JAVA
‣C ‣ C++ ‣ ADA ‣ EIFFEL ‣ ADA 83 ‣ EIFFEL

‣ PERL ‣ TCL ‣ C++ ‣ LISP ‣ MESA ‣ SmallTalk

‣ JAVA ‣ CLU ‣ PERL ‣ C++

‣ DYLAN ‣ PYTHON


THE MOTHER OF ALL LANGUAGES

C


THE WEB WEB SITES
WEB APPS
MOBILE WEB

In a browser
‣ CHROME ‣ FIREFOX ‣ INTERNET
‣ SAFARI ‣ OPERA EXPLORER


WHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:
‣ Difficulty level


‣ Community


‣ Community
‣ Development time to build an app


WEB PROGRAMMING LANGUAGES
PHP RUBY PYTHON
Wikipedia Twitter Youtube

Vimeo Hulu+ Google

Facebook Groupon


PHP vs. Ruby


PHP RUBY
EASIER TO STEEPER
GET LEARNING
STARTED CURVE
WITH


1995
PHP
RUBY


1995 2001
PHP PHP
RUBY


1995 2001 2006
PHP PHP RUBY
RUBY


1995 2001 2006 today
PHP PHP RUBY PHP
RUBY RUBY


USER DRIVEN CONTENT DRIVEN
DATA DRIVEN
BLOG
WEB APP WEB SITE
CUSTOM TASKS COMMON TASKS “OUT OF THE BOX” CMS

PLUGINS
In a browser


RUBY PHP

WEB APP WEB SITE


Pop Quiz: Review!


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

WEB SITE

Timeline: The Black Eyed Peas
30 HOURS

UX
40 HOURS

IA
60 HOURS

DESIGN

120+ HOURS

DEVELOPMENT


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

WEB SITE

Timeline: The Story Studio
8-12 HOURS

UX IA
10 HOURS

DESIGN
35 HOURS

DEVELOPMENT


TIMELINE:
DERBY JACKPOT
• Main task: an online horse
gambling platform
• Start-up Consulting
• Decent-sized budget
• High risk: APIs
WEB APP

Timeline: Derby Jackpot
45 HOURS

UX
45 HOURS

IA
120 HOURS

DESIGN

500+ HOURS

DEVELOPMENT


TIMELINE:
GENERALASSEMB.LY
Main tasks:
• classes
• about us
• video
• social network
• custom payment gateway
WEB APP


TIMELINE: WEB SITE

GENERALASSEMB.LY
Main tasks:
• classes
• about us
• video
• social network
• custom payment gateway


Which Language for...?
Native Apps


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 Phone Gap
“cross-compiler” “native wrapper”


CROSS COMPILE W/ APPCELERATOR

Java
Objective-C

Javascript-ish


MOBILE WEB / RESPONSIVE DESIGN

Safari on iPhone
Desktop Browser


MOBILE WEB: FRAMEWORKS

Sencha jQuery Mobile
Javascript-ish jQuery-ish

Content Management Systems
(CMS)


CONTENT MANAGEMENT SYSTEMS (CMS)


CONTENT MANAGEMENT SYSTEMS (CMS)

?
Wordpress Expression Engine Custom


CMS DISTRIBUTION IN TOP MILLION SITES


Which languages are left?


ANALYTICS, QUICK PROCESSES
‣ C++


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


And then you were all like...


Q: WELL WHAT ABOUT... DJANGO

SASS
EXTJS

JQUERY

BACKBONE.JS
AJAX*

RUBY ON RAILS
PROTOTYPE

*Ajax is a JavaScript related technique


Q: WELL WHAT ABOUT... DJANGO

EXTJS

JQUERY
BLUEPRINT
BACKBONE.JS

RUBY ON RAILS
PROTOTYPE


Functions
*
FUNCTION * Methods

defines a block of code Classes

*I’m giving you permission
to use this in the general sense


FRAMEWORK: Login Example

login()

The “perfect registration form”


FRAMEWORK: Login Example
1. Create an email field
2. Create a password field
3. Create a button that reads “Submit”
login()
4. Check to see that the username isn’t taken
5. Validate that the email is real
6. Add this user to the database


1. Advance right leg forward 0.5697 feet
2. Shift weight to right foot
walk()
3. Advance left leg forward 0.5697 feet
4. Shift weight to left foot


WALK() {
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

}


FRAMEWORKS
a collection of pre-baked code
...mostly “functions”, and other great stuff


FRAMEWORKS DJANGO
TWITTER
EXTJS
BOOTSTRAP
JQUERY
BLUEPRINT
BACKBONE.JS

RUBY ON RAILS
PROTOTYPE


WHAT IS TWITTER BOOTSTRAP?

http://twitter.github.com/

WHAT IS TWITTER BOOTSTRAP?
A: Pre-baked... CSS JS


A: JAVASCRIPT FRAMEWORKS & HELPERS
EXTJS

JQUERY
AJAX*
BACKBONE.JS

COFFEE SCRIPT
PROTOTYPE

*Ajax is a JavaScript related technique


A: CSS FRAMEWORKS & HELPERS

SASS
960 GRID SYSTEM
LESS
COMPASS
BLUEPRINT


WHAT IS A TECH STACK?


FRONT-END LANGUAGE CSS HTML JS

SERVER-SIDE LANGUAGE PHP

DATABASE MYSQL

WEB SERVER APACHE

OPERATING SYSTEM LINUX


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


7 CONCEPTS
...that are the same in every
programming language


1. EVENTS


2. COMMENTS


3. PRINT


4. VARIABLES


POP QUIZ!
a=1
b=2
c=a+b
c=?


POP QUIZ!
a=1
b=2
c=a+b
c=3


5. DATATYPES


6. CONDITIONALS


7. FUNCTIONS


PROGRAMMING CONCEPTS
1. Events 6. Conditionals
2. Comments 7. Functions
3. Print
4. Variables
5. Datatypes


JAVASCRIPT
document.write(“Good morning”);


JAVASCRIPT PHP
document.write(“Good morning”); echo “Good morning”;


JAVASCRIPT PHP

RUBY
print “Good morning”


JAVASCRIPT PHP

RUBY PERL
print “Good morning” say “Good morning”


1. WEB DEV PROCESS

PFNP 1 2. WHICH LANGUAGE?

3. CODE!

PFNP 2 FRONT-END WEB DEV PFNP 3 BACK-END, SQL, APIS


WHAT IS HTML5?


FRONT-END LANGUAGE CSS HTML JS

SERVER-SIDE LANGUAGE JAVA PYTHON RUBY PHP

POSTGRES
DATABASE ORACLE MONGO DB MYSQL SQL

WEB SERVER APACHE NGINX

MICROSOFT
OPERATING SYSTEM OSX LINUX IIS


File Under:
“not a programming language”


OPEN SOURCE


FTP


GIT


GIT
‣ Revisions


GIT
‣ Revisions
‣ Collaboration


DATABASES (YOU CHOOSE ONE)
‣ MySQL (“My Sequel”)
‣ PostgreSQL
‣ ORACLE
‣ Mongo DB
‣ Reddis

SELECT post_title FROM wp_users WHERE post_title = “Joy”

Programming For Non-Programmers: 2013

More Related Content

Programming For Non-Programmers: 2013