Embed Size (px)
DESCRIPTION
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.
Citation preview
With Chris Castiglione / @castig
@CASTIG
WHAT IS PROGRAMMING?(AND WHY DO I CARE?)
WHAT IS PROGRAMMING … AND WHY DO I CARE?
A set of instructions used to solve a problem
PROGRAMMING:
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 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
PROBLEM SOLVED!
A set of instructions used to solve a problem
PROGRAMMING:
WHY ARE WE HERE? !
WHY ARE WE HERE? TO LEARN TO THINK LIKE A DEVELOPER
SHOULD EVERYONE LEARN PROGRAMMING?
“
– DOUGLAS RUSHKOFF, Program or be Programmed
IF WE DON’T LEARN TO PROGRAM, WE RISK BEING PROGRAMMED OURSELVES…
PROGRAM OR BE PROGRAMMED.
“
– JEFF ATWOOD, codinghorror.com
IF WE DON’T LEARN TO PLUMB, WE RISK BEING PLUMBED OURSELVES…
PLUMB OR BE PLUMBED.
WHAT’S YOUR PROBLEM?
1. 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.
“– PAUL GRAHAM, Y Combinator
NEVER WRITE A LINE OF CODE NO ONE ASKED YOU TO WRITE.
PRODUCT DEVELOPMENT
Minimum features needed to test your assumptions
Validate your idea
MVP: MINIMAL VIABLE PRODUCT
HYPOTHESIS: If we know where people are falling off in the class, then we can improve completion rates.
THE WORST THING IS TO BUILD SOMETHING THAT NOBODY WANTS.
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
USER-EXPERIENCE
DESIGNER DEVELOPER
USER-EXPERIENCE
DESIGNER DEVELOPER
COMPUTER SCIENCE
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
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?
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 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?
INFORMATION ARCHITECTURE
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
Wireframes
Flow Documents
Site Maps
A model or blueprint for the site, resulting in deliverables such as:
INFORMATION ARCHITECTURE (IA)
IA: THE BLUEPRINT
SITEMAPS & FLOW DIAGRAMS
WIREFRAMES & CONTENT
Establish flow and orderDefine the user interaction and ease the handoff process to the creative team
BRAINSTORMING
BRAINSTORMING
TWITTER PROTOTYPE
LOW FIDELITY WIREFRAMES
HIGH FIDELITY WIREFRAMES
SMALL SITE
LARGE SITE
FUNCTIONAL
WIREFRAMES
Homepage Blog 2 Column Top
1 Column Bottom
2 Column Top
2 Column Bottom
FLOW DIAGRAM
FLOW DIAGRAM
IPHONE WIREFRAMES
FOURSQUARE
FOURSQUARE
DESIGN. IS ALL ABOUT WORDS.
VISUAL DESIGN
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design
Development
VISUAL DESIGNWireframes become design comps
VISUAL DESIGNWireframes become design comps
Homepage Blog Listen
DEVELOPMENT
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design Development
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience (UX)
Information Architecture (IA)
Visual Design
Development
DEVELOPMENTComps become graphics & real text
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)
DEVELOPMENTThe development process can be broken into two separate responsibilities:
DEVELOPMENTThe development process can be broken into two separate responsibilities:
FRONT-END WEB DEVELOPMENT
1. How things look to the user
2. Involves: Images, Content & Structure
3. HTML, CSS & JavaScript
BACK-END WEB DEVELOPMENT
1. How things work
2. Involves: “business logic” and data
3. Ruby, PHP, C++, Java, etc.
±±±
ZAPPOS.COM
PROGRAMMING FOR NON-PROGRAMMERS
FRONT-END
homepage cartregistration
BACK-END
process.php
PLACE YOUR BETS!
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE: THE BLACK EYED PEAS• Main task: blog
• Agency project
• Large budget
• 6 page content site
PROGRAMMING FOR NON-PROGRAMMERS
IA
DESIGN
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
PROGRAMMING FOR NON-PROGRAMMERS
IA
DESIGN
UX
DEVELOPMENT
45 HOURS
Timeline: Derby Jackpot to launch in June
45 HOURS
120 HOURS
500+ HOURS
Total: 700+ Hours
PROGRAMMING FOR NON-PROGRAMMERS
IA
DESIGN
UX
DEVELOPMENT
Timeline: One Month
FOREVER +
Total: 700+ Hours
FOREVER +
FOREVER +
FOREVER +
MY REQUEST FOR AN ESTIMATE
GUMROAD EXAMPLE SITE
MIKE’S REPLY
ONE MONTH HTML
The easiest way to learn HTML/CSS - Just 30 minutes a day, for 30 days
www.onemonth.com
ONE MONTH RAILS
The easiest way to learn Ruby on Rails - Just 30 minutes a day, for 30 days
www.onemonth.com
ONE MONTH GROWTH HACKING
The easiest way to learn Growth Hacking & Digital Marketingwww.onemonth.com
