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.
In this hour and a half long workshop, Chris Castiglione, experienced developer and founder of One Month Rails, will tackle some development principles and answer questions to get you on the right path, such as, "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?" He will also have you coding a bit yourself!
Leading a development team (without being a developer yourself) can sometimes feels like talking about dancing, and so this is an interactive and friendly environment in which to learn the basics. Come with questions, and a desire to have fun!
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
With Chris Castiglione / @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 DONT LEARN TO
PROGRAM, WE RISK BEING PROGRAMMED OURSELVES PROGRAM OR BE
PROGRAMMED.
JEFF ATWOOD, codinghorror.com IF WE DONT LEARN TO PLUMB, WE
RISK BEING PLUMBED OURSELVES PLUMB OR BE PLUMBED.
WHATS YOUR PROBLEM?
1. WEB DEV PROCESS UNDERSTAND THE PROBLEM
LETS TAKE A HIKE!
LETS TAKE A HIKE!
LETS TAKE A HIKE! 10 Hours? Great!
DAY 1
DAY 1 2 Hours Later
DAY 2 What the hell? This wasnt on the map!
DAY 5 Holy S!*T we didnt 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, cant wait to convince his wife
he needs the new one. Doesnt 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 isnt 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 order Define 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 DESIGN Wireframes become design comps
VISUAL DESIGN Wireframes become design comps Homepage
BlogListen
STYLE GUIDE Style Tile Final source: www.risk-show.com
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
DEVELOPMENT Comps become graphics & real text
DEVELOPMENT Comps 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:
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 The 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.
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-PROGRAMMERS Timeline: 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
MIKES REPLY
PROGRAMMING FOR NON-PROGRAMMERS UX, IA, DESIGN FRONT END
Timeline: Growth Hacking Sales Page 2+ HOURS 5.75 Total: 700+ Hours
BACK END 4
SUGGESTIONS WRITTEN IN CSS
BOOTSTRAP IMAGE PADDING 700PX
ONE MONTH HTML 25% OFF: http://bit.ly/sxswvegas
ONE MONTH RAILS 25% OFF: http://bit.ly/sxswvegas2
THANK YOU Chris Castiglione @castig chris [at]
onemonth.com