Your SlideShare is downloading. ×
0
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!
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
PEANUT BUTTER & JELLY SANDWICH
‣find

two slices of bread

‣spread

peanut butter on one slice of bread

‣spread

jelly on...
PEANUT BUTTER & JELLY SANDWICH
‣find

two slices of bread

‣spread

peanut butter on one slice of bread

‣spread

jelly on...
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 PROCESS
Understand 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
PROGRAMMING FOR NON-PROGRAMMERS

PRODUCT DEVELOPMENT
MVP - Minimal Viable Product
‣Minimum
‣Validate

features needed to t...
‣Dropbox
‣Dropbox
‣Pebble
‣Pebble
PROGRAMMING FOR NON-PROGRAMMERS

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 Animatio...
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Vis...
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Vis...
PROGRAMMING FOR NON-PROGRAMMERS

USER-EXPERIENCE (UX)
‣Who

are our users?

‣What

are the users goals?

‣What

does the p...
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

Mary
Dickinson, North Dakota

John
Long Island, New York
PROGRAMMING FOR NON-PROGRAMMERS

PERSONAS: WHAT JOHN CARES ABOUT…
‣Has

5+ computers in his home but says he would
gamble ...
PROGRAMMING FOR NON-PROGRAMMERS

PERSONAS: WHAT JOHN CARES ABOUT
‣This

isn’t sketchy is it?
‣How can I get my friends inv...
Information Architecture
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Vis...
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Visual Design

Information
Archite...
PROGRAMMING FOR NON-PROGRAMMERS

INFORMATION ARCHITECTURE (IA)
A model or blueprint for the site, resulting in
deliverable...
PROGRAMMING FOR NON-PROGRAMMERS

BRAINSTORMING
PROGRAMMING FOR NON-PROGRAMMERS

BRAINSTORMING
TWITTER
(PROTOTYPE)
PROGRAMMING FOR NON-PROGRAMMERS

LOW FIDELITY
WIREFRAMES
PROGRAMMING FOR NON-PROGRAMMERS

HIGH FIDELITY
WIREFRAMES
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
PUT STUFF HERE LATER
HEADER 2

Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue
laoreet rutrum fa...
CONTENT STRATEGY
TREAT TEXT AS USER-INTERFACE

Typography has one plain duty before it and that is to convey information i...
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)

Vis...
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Dev...
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
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Vis...
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Vis...
PROGRAMMING FOR NON-PROGRAMMERS

DEVELOPMENT
Comps become graphics & real text

71
PROGRAMMING FOR NON-PROGRAMMERS

DEVELOPMENT
Comps become graphics & real text

general-assembly-logo.png

social-media.pn...
PROGRAMMING FOR NON-PROGRAMMERS

FRONT-END
DEVELOPMENT (noun)
PROGRAMMING FOR NON-PROGRAMMERS

BACK-END
DEVELOPMENT (noun)
PROGRAMMING FOR NON-PROGRAMMERS

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

75
PROGRAMMING FOR NON-PROGRAMMERS

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

FR...
PROGRAMMING FOR NON-PROGRAMMERS

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

FR...
PROGRAMMING FOR NON-PROGRAMMERS

ZAPPOS.COM

process.php

BACK-END

FRONT-END

registration
homepage

cart
II. WHICH LANGUAGE?
Understand the Tools
Vocabulary
PROGRAMMING FOR NON-PROGRAMMERS

VOCABULARY

THE WEB
WEB SITES
WEB APPS
MOBILE WEB

NATIVE APPS
Directly on your Operating...
PROGRAMMING FOR NON-PROGRAMMERS
PHP

.NET

Perl

ADA

R

Lisp

C

Objective C

ABC

COBOL
Ruby

Logo
ASP

Smalltalk
Ruby
P...
PROGRAMMING FOR NON-PROGRAMMERS
PHP

.NET

Perl

ADA

R

Lisp

C

Objective C

ABC

COBOL
Ruby

Logo
ASP

Smalltalk
Ruby
P...
PROGRAMMING FOR NON-PROGRAMMERS
PHP

.NET

Perl

ADA

R

Lisp

C

Objective C

ABC

COBOL
Ruby

Logo
ASP

Smalltalk
Ruby
P...
PROGRAMMING FOR NON-PROGRAMMERS
PHP
Ruby
Python
Java
.NET
C++
Objective C
PROGRAMMING FOR NON-PROGRAMMERS

HIGH TO LOW LANGUAGES
HIGH
LEVEL

PHP

Ruby

Java
C++

Python

.NET
Objective C
C

LOW LE...
PROGRAMMING FOR NON-PROGRAMMERS

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

CLC      
L...
PROGRAMMING FOR NON-PROGRAMMERS

WEB PROGRAMMING LANGUAGES
PHP

RUBY

PYTHON

Wikipedia

Twitter

Youtube

Vimeo

Hulu+

G...
PROGRAMMING FOR NON-PROGRAMMERS

PHP Ruby... or Python?
...
PROGRAMMING FOR NON-PROGRAMMERS

1991

PYTHON

1995

PHP
RUBY
PROGRAMMING FOR NON-PROGRAMMERS

1991

PYTHON

1995

2001

2006

PHP
RUBY

PHP

RUBY
PROGRAMMING FOR NON-PROGRAMMERS

1991

PYTHON

1995

2001

2006

today

PHP
RUBY

PHP

RUBY

RUBY
PYTHON
PHP
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

‣ OSX

‣ ANDROID

‣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
...
PROGRAMMING FOR NON-PROGRAMMERS

CROSS COMPILE W/ APPCELERATOR

Java

Objective-C

Javascript-ish
PROGRAMMING FOR NON-PROGRAMMERS

MOBILE WEB

THE WEB
WEB SITES
WEB APPS
MOBILE WEB
PROGRAMMING FOR NON-PROGRAMMERS

RESPONSIVE DESIGN

Safari on iPhone
Desktop Browser
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

(pe...
PROGRAMMING FOR NON-PROGRAMMERS

And then you were all like...
PROGRAMMING FOR NON-PROGRAMMERS

Q: WELL WHAT ABOUT...

DJANGO

SASS
EXTJS

JQUERY
AJAX*

BACKBONE.JS
PROTOTYPE

RUBY ON R...
Frameworks
Content Management Systems
(CMS)
PROGRAMMING FOR NON-PROGRAMMERS

CONTENT MANAGEMENT SYSTEMS (CMS)
PROGRAMMING FOR NON-PROGRAMMERS

CONTENT MANAGEMENT SYSTEMS (CMS)

?
Wordpress

Expression Engine

Custom
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 ...
PROGRAMMING FOR NON-PROGRAMMERS
Timeline: The Black Eyed Peas
30 HOURS
UX

40 HOURS
IA

60 HOURS
DESIGN

DEVELOPMENT

120+...
PROGRAMMING FOR NON-PROGRAMMERS

TIMELINE:
THE STORY STUDIO
• Main task: classes
• Consulting
• Low budget
• 4 page naviga...
PROGRAMMING FOR NON-PROGRAMMERS
Timeline: The Story Studio
8-12 HOURS
UX

IA

10 HOURS
DESIGN

35 HOURS
DEVELOPMENT

Total...
PROGRAMMING FOR NON-PROGRAMMERS

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

• Start-up Consul...
PROGRAMMING FOR NON-PROGRAMMERS
Timeline: Derby Jackpot
45 HOURS
UX

45 HOURS
IA

120 HOURS
DESIGN

DEVELOPMENT

500+ HOUR...
PROGRAMMING FOR NON-PROGRAMMERS

TIMELINE:
GENERALASSEMB.LY
Main tasks:

• classes
• about us
• video
• social network
• c...
PROGRAMMING FOR NON-PROGRAMMERS

TIMELINE:
GENERALASSEMB.LY
Main tasks:

• classes
• about us
• video
• social network
• c...
PROGRAMMING FOR NON-PROGRAMMERS

And then you were all like...
PROGRAMMING FOR NON-PROGRAMMERS

Q: WELL WHAT ABOUT...

DJANGO

SASS
EXTJS

JQUERY
AJAX*

BACKBONE.JS
PROTOTYPE

RUBY ON R...
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...
HTML

make the logo bigger?
CSS
PROGRAMMING FOR NON-PROGRAMMERS

HEY CHRIS, CAN YOU...

make that grey heading fadein?
PROGRAMMING FOR NON-PROGRAMMERS

HEY CHRIS, CAN YOU...
HTML

make that grey heading fadein?
CSS

JAVASCRIPT
Programming For Non-Programmers @ One Month HQ
Upcoming SlideShare
Loading in...5
×

Programming For Non-Programmers @ One Month HQ

3,516

Published on

Hey NYC! I've been teaching Programming For Non-Programmers for two years now - this is a special opportunity to get in on the class one more time before the end of the year. Plus it's at our beautiful soho loft downtown - more the reason to come out. Come enjoy! Hope to see you there. -Chris Castiglione

Why Take this Workshop?

If you're running a tech start-up, it's essential that you familiarize yourself with the fundamentals of web development. Ultimately knowing how to "talk to the talk" will help you communicate better with developers, and overall just look really cool.

5 Star Reviews: https://www.udemy.com/programming-for-non-programmers/

What You'll Learn
In this workshop we'll tackle some development principles to get you on the right path.

We'll look at questions like, "Front-end vs. Back-end?", "Is UX necessary for my project?", "What is this Javascript function thingy, and why am I passing it strange math equations to it?".

Takeaways:
• What coding languages should I use for my next project?
• Which CMS is right for the job?
• What are the stages of web development?
• What deliverables do I need to provide my developer? (FYI - This is important and often neglected or done poorly)
• Reading code & basic developing principles to get us started

About the Teacher: Chris Castiglione
Chris Castiglione is a Product Developer and User-Experience designer living in NYC. In the past, Chris has taught classes for American Express, The New York Stock Exchange, Columbia University, General Electric, The Ladders, and SXSW. Chris is an alumni of YCombinator's Summer 2013 class.

Published in: Education, Technology

Transcript of "Programming For Non-Programmers @ One Month HQ "

  1. 1. PROGRAMMING FOR NON-PROGRAMMERS Chris Castiglione @castig | pfnp.me
  2. 2. THE QUESTION How do I communicate an idea from my head… to a computer?
  3. 3. PROGRAMMING FOR NON-PROGRAMMERS 1. WEB DEV PROCESS 2. WHICH LANGUAGE? 3. CODE!
  4. 4. PROGRAMMING FOR NON-PROGRAMMERS 1. WEB DEV PROCESS 2. WHICH LANGUAGE? 3. CODE!
  5. 5. PROGRAMMING FOR NON-PROGRAMMERS 1. WEB DEV PROCESS 2. WHICH LANGUAGE? 3. CODE!
  6. 6. What is Programming? (...and why do I care?)
  7. 7. PROGRAMMING ‣a set of instructions ‣used to solve a problem
  8. 8. PEANUT BUTTER & JELLY SANDWICH
  9. 9. PEANUT BUTTER & JELLY SANDWICH ‣find two slices of bread
  10. 10. PEANUT BUTTER & JELLY SANDWICH ‣find two slices of bread ‣spread peanut butter on one slice of bread
  11. 11. 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
  12. 12. 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
  13. 13. PROBLEM SOLVED!
  14. 14. PROGRAMMING ‣a set of instructions ‣used to solve a problem
  15. 15. WHY ARE WE HERE? ‣to learn to think like a developer
  16. 16. WHY ARE WE HERE? ‣to learn to think like a developer
  17. 17. I. WEB DEV PROCESS Understand the Problem
  18. 18. LET’S TAKE A HIKE!
  19. 19. LET’S TAKE A HIKE!
  20. 20. LET’S TAKE A HIKE! ‣ 10 hours? Great!
  21. 21. DAY 1
  22. 22. DAY 1 ...2 hours later
  23. 23. DAY 2 What the hell!? This wasn’t on the map
  24. 24. DAY 5 Holy S!*T we didn’t even leave the Bay Area yet?!?? ‣ ‣ I hate everything
  25. 25. PROGRAMMING FOR NON-PROGRAMMERS PRODUCT DEVELOPMENT MVP - Minimal Viable Product ‣Minimum ‣Validate features needed to test your assumptions your idea
  26. 26. ‣Dropbox
  27. 27. ‣Dropbox
  28. 28. ‣Pebble
  29. 29. ‣Pebble
  30. 30. PROGRAMMING FOR NON-PROGRAMMERS The worst thing is to build something that nobody wants.
  31. 31. 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
  32. 32. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  33. 33. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  34. 34. PROGRAMMING FOR NON-PROGRAMMERS 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?
  35. 35. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] CASE STUDY: IDEAS, FEATURES, GOALS
  36. 36. PROGRAMMING FOR NON-PROGRAMMERS “I want all of the features!”
  37. 37. PROGRAMMING FOR NON-PROGRAMMERS Who is our user?
  38. 38. PROGRAMMING FOR NON-PROGRAMMERS CASE STUDY: USER RESEARCH
  39. 39. PROGRAMMING FOR NON-PROGRAMMERS CASE STUDY PERSONAS Mary Dickinson, North Dakota John Long Island, New York
  40. 40. PROGRAMMING FOR NON-PROGRAMMERS 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.
  41. 41. PROGRAMMING FOR NON-PROGRAMMERS 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?
  42. 42. Information Architecture
  43. 43. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  44. 44. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Visual Design Information Architecture (IA) Development
  45. 45. PROGRAMMING FOR NON-PROGRAMMERS INFORMATION ARCHITECTURE (IA) A model or blueprint for the site, resulting in deliverables such as: ‣wireframes ‣flow diagrams ‣sitemap
  46. 46. PROGRAMMING FOR NON-PROGRAMMERS BRAINSTORMING
  47. 47. PROGRAMMING FOR NON-PROGRAMMERS BRAINSTORMING
  48. 48. TWITTER (PROTOTYPE)
  49. 49. PROGRAMMING FOR NON-PROGRAMMERS LOW FIDELITY WIREFRAMES
  50. 50. PROGRAMMING FOR NON-PROGRAMMERS HIGH FIDELITY WIREFRAMES
  51. 51. PROGRAMMING FOR NON-PROGRAMMERS SMALL SITE
  52. 52. PROGRAMMING FOR NON-PROGRAMMERS LARGE SITE
  53. 53. PROGRAMMING FOR NON-PROGRAMMERS FUNCTIONAL
  54. 54. PROGRAMMING FOR NON-PROGRAMMERS FLOW DIAGRAM
  55. 55. PROGRAMMING FOR NON-PROGRAMMERS FLOW DIAGRAM
  56. 56. PROGRAMMING FOR NON-PROGRAMMERS FOURSQUARE
  57. 57. PROGRAMMING FOR NON-PROGRAMMERS FOURSQUARE
  58. 58. 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.
  59. 59. 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.
  60. 60. DESIGN. IS ABOUT WORDS. TREAT TEXT AS USER-INTERFACE
  61. 61. Visual Design
  62. 62. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  63. 63. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Development Visual Design
  64. 64. VISUAL DESIGN Wireframes become design comps
  65. 65. source: www.risk-show.com VISUAL DESIGN Each wireframe template becomes a comp template Homepage Listen Blog
  66. 66. source: www.risk-show.com STYLE GUIDE Style Tile Final
  67. 67. Development
  68. 68. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  69. 69. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  70. 70. PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT Comps become graphics & real text 71
  71. 71. PROGRAMMING FOR NON-PROGRAMMERS 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
  72. 72. PROGRAMMING FOR NON-PROGRAMMERS FRONT-END DEVELOPMENT (noun)
  73. 73. PROGRAMMING FOR NON-PROGRAMMERS BACK-END DEVELOPMENT (noun)
  74. 74. PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT The development process can be broken into two separate responsibilities: 75
  75. 75. PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT The development process can be broken into two separate responsibilities: FRONT-END WEB DEVELOPMENT 1.Client Side 2.How things look to the user 3.Involves: Images, content, structure 4.HTML, CSS, JavaScript 76
  76. 76. PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT The development process can be broken into two separate responsibilities: 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
  77. 77. PROGRAMMING FOR NON-PROGRAMMERS ZAPPOS.COM process.php BACK-END FRONT-END registration homepage cart
  78. 78. II. WHICH LANGUAGE? Understand the Tools
  79. 79. Vocabulary
  80. 80. PROGRAMMING FOR NON-PROGRAMMERS 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
  81. 81. PROGRAMMING FOR NON-PROGRAMMERS PHP .NET Perl ADA R Lisp C Objective C ABC COBOL Ruby Logo ASP Smalltalk Ruby Python Java Clu Visual Basic C++ ActionScript
  82. 82. PROGRAMMING FOR NON-PROGRAMMERS PHP .NET Perl ADA R Lisp C Objective C ABC COBOL Ruby Logo ASP Smalltalk Ruby Python Java Clu Visual Basic C++ ActionScript
  83. 83. PROGRAMMING FOR NON-PROGRAMMERS PHP .NET Perl ADA R Lisp C Objective C ABC COBOL Ruby Logo ASP Smalltalk Ruby Python Java Clu Visual Basic C++ ActionScript
  84. 84. PROGRAMMING FOR NON-PROGRAMMERS PHP Ruby Python Java .NET C++ Objective C
  85. 85. PROGRAMMING FOR NON-PROGRAMMERS HIGH TO LOW LANGUAGES HIGH LEVEL PHP Ruby Java C++ Python .NET Objective C C LOW LEVEL Machine Code
  86. 86. PROGRAMMING FOR NON-PROGRAMMERS 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"); });
  87. 87. PROGRAMMING FOR NON-PROGRAMMERS WEB PROGRAMMING LANGUAGES PHP RUBY PYTHON Wikipedia Twitter Youtube Vimeo Hulu+ Google Facebook Groupon
  88. 88. PROGRAMMING FOR NON-PROGRAMMERS PHP Ruby... or Python? ...
  89. 89. PROGRAMMING FOR NON-PROGRAMMERS 1991 PYTHON 1995 PHP RUBY
  90. 90. PROGRAMMING FOR NON-PROGRAMMERS 1991 PYTHON 1995 2001 2006 PHP RUBY PHP RUBY
  91. 91. PROGRAMMING FOR NON-PROGRAMMERS 1991 PYTHON 1995 2001 2006 today PHP RUBY PHP RUBY RUBY PYTHON PHP
  92. 92. PROGRAMMING FOR NON-PROGRAMMERS Then why choose... ?
  93. 93. PROGRAMMING FOR NON-PROGRAMMERS
  94. 94. PROGRAMMING FOR NON-PROGRAMMERS
  95. 95. PROGRAMMING FOR NON-PROGRAMMERS “REAL-TIME” IS MOST IMPORTANT ‣Node.js
  96. 96. PROGRAMMING FOR NON-PROGRAMMERS Which Language for...? Mobile
  97. 97. PROGRAMMING FOR NON-PROGRAMMERS NATIVE APPS Directly on your Operating System ‣ IPHONE ‣ OSX ‣ ANDROID ‣WINDOWS
  98. 98. PROGRAMMING FOR NON-PROGRAMMERS iPHONE, iPAD, MAC OS ‣Objective-C
  99. 99. PROGRAMMING FOR NON-PROGRAMMERS ANDROID ‣java
  100. 100. PROGRAMMING FOR NON-PROGRAMMERS MOBILE DEVELOPMENT FRAMEWORKS: NATIVE Appcelerator/Titanium “cross-compiler” Phone Gap “native wrapper”
  101. 101. PROGRAMMING FOR NON-PROGRAMMERS CROSS COMPILE W/ APPCELERATOR Java Objective-C Javascript-ish
  102. 102. PROGRAMMING FOR NON-PROGRAMMERS MOBILE WEB THE WEB WEB SITES WEB APPS MOBILE WEB
  103. 103. PROGRAMMING FOR NON-PROGRAMMERS RESPONSIVE DESIGN Safari on iPhone Desktop Browser
  104. 104. PROGRAMMING FOR NON-PROGRAMMERS How To Choose A Programming Language
  105. 105. 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
  106. 106. PROGRAMMING FOR NON-PROGRAMMERS And then you were all like...
  107. 107. PROGRAMMING FOR NON-PROGRAMMERS Q: WELL WHAT ABOUT... DJANGO SASS EXTJS JQUERY AJAX* BACKBONE.JS PROTOTYPE RUBY ON RAILS *Ajax is a JavaScript related technique
  108. 108. Frameworks
  109. 109. Content Management Systems (CMS)
  110. 110. PROGRAMMING FOR NON-PROGRAMMERS CONTENT MANAGEMENT SYSTEMS (CMS)
  111. 111. PROGRAMMING FOR NON-PROGRAMMERS CONTENT MANAGEMENT SYSTEMS (CMS) ? Wordpress Expression Engine Custom
  112. 112. PROGRAMMING FOR NON-PROGRAMMERS CMS DISTRIBUTION IN TOP MILLION SITES
  113. 113. PROGRAMMING FOR NON-PROGRAMMERS Place Your Bets!
  114. 114. PROGRAMMING FOR NON-PROGRAMMERS TIMELINE: THE BLACK EYED PEAS • Main task: blog • Agency project • Large budget • 6 page content site
  115. 115. PROGRAMMING FOR NON-PROGRAMMERS Timeline: The Black Eyed Peas 30 HOURS UX 40 HOURS IA 60 HOURS DESIGN DEVELOPMENT 120+ HOURS Total: 250+ Hours
  116. 116. PROGRAMMING FOR NON-PROGRAMMERS TIMELINE: THE STORY STUDIO • Main task: classes • Consulting • Low budget • 4 page navigation site
  117. 117. PROGRAMMING FOR NON-PROGRAMMERS Timeline: The Story Studio 8-12 HOURS UX IA 10 HOURS DESIGN 35 HOURS DEVELOPMENT Total: 57+ Hours
  118. 118. PROGRAMMING FOR NON-PROGRAMMERS TIMELINE: DERBY JACKPOT • Main task: an online horse gambling platform • Start-up Consulting • Decent-sized budget • High risk: APIs
  119. 119. PROGRAMMING FOR NON-PROGRAMMERS Timeline: Derby Jackpot 45 HOURS UX 45 HOURS IA 120 HOURS DESIGN DEVELOPMENT 500+ HOURS Total: 700+ Hours
  120. 120. PROGRAMMING FOR NON-PROGRAMMERS TIMELINE: GENERALASSEMB.LY Main tasks: • classes • about us • video • social network • custom payment gateway WEB APP
  121. 121. PROGRAMMING FOR NON-PROGRAMMERS TIMELINE: GENERALASSEMB.LY Main tasks: • classes • about us • video • social network • custom payment gateway WEB SITE
  122. 122. PROGRAMMING FOR NON-PROGRAMMERS And then you were all like...
  123. 123. PROGRAMMING FOR NON-PROGRAMMERS Q: WELL WHAT ABOUT... DJANGO SASS EXTJS JQUERY AJAX* BACKBONE.JS PROTOTYPE RUBY ON RAILS *Ajax is a JavaScript related technique
  124. 124. Frameworks
  125. 125. III. CODE! Use the Tools
  126. 126. PROGRAMMING FOR NON-PROGRAMMERS HTML -structure CSS - style JS - behavior
  127. 127. PROGRAMMING FOR NON-PROGRAMMERS HTML (noun) CSS (adjective) JS (verb)
  128. 128. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make the logo bigger?
  129. 129. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... HTML make the logo bigger? CSS
  130. 130. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make that grey heading fadein?
  131. 131. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... HTML make that grey heading fadein? CSS JAVASCRIPT
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×