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?

1. WEB DEV PROCESS

2. WHICH LANGUAGE?

3. CODE!

1. WEB DEV PROCESS

2. WHICH LANGUAGE?

3. CODE!

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

‣spread peanut butter on one slice of bread

‣find two slices of bread

‣spread jelly on the other slice of bread

‣find two slices of bread

‣spread jelly on the other slice of bread

‣put the two slices of bread together

PROBLEM SOLVED!

PROGRAMMING‣a set of instructions

‣used to solve a problem

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!‣ 10 hours? Great!

...2 hours later

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 features needed to test your assumptions

‣Validate your idea

‣Dropbox

‣Pebble

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

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?

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

MaryDickinson, North Dakota

JohnLong Island, New York

‣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?

PERSONAS: WHAT JOHN CARES ABOUT

Information Architecture

A model or blueprint for the site, resulting in deliverables such as:

‣wireframes

‣flow diagrams

‣sitemap

INFORMATION ARCHITECTURE (IA)

BRAINSTORMING

TWITTER (PROTOTYPE)

LOW FIDELITY WIREFRAMES

HIGH FIDELITYWIREFRAMES

SMALL SITE

LARGE SITE

FUNCTIONAL

FLOW DIAGRAM

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

Development

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

Visual Design

Development

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

FRONT-END DEVELOPMENT (noun)

BACK-END DEVELOPMENT (noun)

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

DEVELOPMENT

FRONT-END WEB DEVELOPMENT

1.Client Side

2.How things look to the user

3.Involves: Images, content, structure

4.HTML, CSS, JavaScript

BACK-END WEB DEVELOPMENT

1.Server Side

2.How things works

3.Involves: “business logic” and data

4.Ruby, PHP, C++, Java, etc

DEVELOPMENT

±±±

ZAPPOS.COM

FRONT-END

homepage cartregistration

BACK-END

process.php

II. WHICH LANGUAGE?Understand the Tools

Vocabulary

‣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

C++Python

Perl .NETJava

Objective C

Visual Basic

Smalltalk

ActionScript

C++Python

Perl .NETJava

Objective C

Visual Basic

Smalltalk

ActionScript

C++Python

Perl .NETJava

Objective C

Visual Basic

Smalltalk

ActionScript

PHP Ruby

PythonJava.NETC++

Objective C

Machine CodeLOW LEVEL

HIGH LEVEL

HIGH TO LOW LANGUAGES

PHP Ruby Python

Java .NET

C++ Objective C

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

WEB PROGRAMMING LANGUAGESRUBY

Wikipedia

Facebook

Twitter

Groupon

Youtube

GoogleVimeo

PHP... Ruby... or Python?

PHPRUBY

PYTHON

RUBY2001

PHP1995

PHPRUBY

PYTHON

RUBY2001

PHP1995

PHPRUBY

RUBYPYTHONPHP

PYTHON

Then why choose... ?

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

Which Language for...?Mobile

NATIVE APPS

Directly on your Operating System‣ IPHONE ‣ ANDROID

‣ OSX‣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

Javascript-ish

Objective-CJava

THE WEBWEB SITESWEB APPS

MOBILE WEB

RESPONSIVE DESIGN

Desktop Browser

Safari on iPhone

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...

PROTOTYPE

JQUERY

RUBY ON RAILS

BACKBONE.JS

*Ajax is a JavaScript related technique

SASSDJANGO

Frameworks

Content Management Systems(CMS)

CONTENT MANAGEMENT SYSTEMS (CMS)

Wordpress Expression EngineCustom

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

DESIGN

DEVELOPMENT

30 HOURS

Timeline: The Black Eyed Peas

40 HOURS

60 HOURS

120+ HOURS

Total: 250+ Hours

TIMELINE: THE STORY STUDIO• Main task: classes

• Consulting

• Low budget

• 4 page navigation site

PROGRAMMING FOR NON-PROGRAMMERSTimeline: The Story Studio

DEVELOPMENT

DESIGN

8-12 HOURS

10 HOURS

35 HOURS

Total: 57+ Hours

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

• Start-up Consulting

• Decent-sized budget

• High risk: APIs

DESIGN

DEVELOPMENT

45 HOURS

Timeline: Derby Jackpot

45 HOURS

120 HOURS

500+ HOURS

Total: 700+ Hours

WEB APP

TIMELINE: GENERALASSEMB.LYMain tasks:

• classes

• about us

• video

• social network

• custom payment gateway

WEB SITETIMELINE: GENERALASSEMB.LYMain tasks:

• classes

• about us

• video

• social network

• custom payment gateway

And then you were all like...

Q: WELL WHAT ABOUT...

PROTOTYPE

JQUERY

RUBY ON RAILS

BACKBONE.JS

*Ajax is a JavaScript related technique

SASSDJANGO

Frameworks

III. CODE!Use the Tools

HTML -structure

CSS - style

JS - behavior

HTML (noun)

CSS (adjective)

JS (verb)

HEY CHRIS, CAN YOU...

make the logo bigger?

make the logo bigger?CSS

make that grey heading fadein?

make that grey heading fadein?JAVASCRIPT

Programming For Non-Programmers @ One Month HQ

Education

Transcript of Programming For Non-Programmers @ One Month HQ

Installation HQ Series...HQ-112.43 / HQ-112.64 / HQ-112.95 HQ-218 / HQ-212.64 / HQ-212.95 User's Manual Antes de utilizar el equipo, lea la sección “Precauciones de seguridad”

Eson hhh~E - DTIC · HQ AFISC/DAP 2 HQ ATC/DPAE 1 1 HQ ATC/TTOA 2 1 HQ MAC/DPAT 3 3 HQ MAC/TTGT 1 1 HQ PACAF/TTGT 1 1 HQ PACAF/DPAT 3 3 HQ SAC/DPAT 3 3 HQ SAC/TTGT 1 1 HQ TAC/DPATJ

The Mythical Man-Month - Salisbury Universityfaculty.salisbury.edu/~xswang/Courses/csc425_426/ReadingMaterial… · Optimism 15 The pervasiveness of optimism among programmers deserves

pcdaopune.gov.in 23018391 12630/TAJDA/Mov C HQ Southern Command HQ Eastern Command HQ Western Command HQ Central Command HQ Northern Command HQ South Western Command HQ ARTRAC HQ A

Programmers slang

CYCLONE Programmers

International Monetary Fund (IMF) HQ #2 · International Monetary Fund Roof Replacement from OPX. The International Monetary Fund HQ #2 is featured in the month of December in The

Programmers 40

Java for Advanced Programmers - itcourseware.com€¦ · Java for Advanced Programmers Java for Advanced Programmers Contributing Authors: John Crabtree, Danielle Hopkins, Julie Johnson,

Designed by programmers, for programmers • …bill/cs308/Book_slides_ch10.pdf• Designed by programmers, for programmers • Designed to be: ... Figure 10-2. ... MODERN OPERATING

RealCode Programmers Reference

Work plan – Installation Research Projectsihjj.hr/metafore/wp-content/uploads/2015/09/RadniPlanFi… · Web viewSigning a 1 month contract with 2 technicians (programmers) (to

FT9xx API Programmers Manual · FT9xx API Programmers Manual ... 20

Bikaner Division Safety Organization · One seminar per month at different driver HQ station. 6. 4 ambush checks per month regarding the following i). Exchanging of all right signal

Ansys Programmers Manual

Displacing the Programmers

Local Search Service from Russia: Quality Matters! · 2018-06-25 · The 2GIS partnering program HQ 400+ programmers 400+ data verification specialists 200+ sales people Local business

WEST HQ LIMITED - West HQ Home - West HQ

€¦ · Web viewDedication. Paternoster of Programmers Reloaded. Paternoster of Programmers Reloaded. Paternoster of Programmers Reloaded. Colophon. …

Part C ManufacturingUserManualPartC-en.pdfuse backflush method packaging is done for production in HQ-Plant1 and HQ-Plant2 1.3.3 HQ-HQ For GW warehouse HQ-HQ there will be defined