Programming for Non-Programmers - SXSW Vegas 2014
Upcoming SlideShare
Loading in...5
×
 

Programming for Non-Programmers - SXSW Vegas 2014

on

  • 6,986 views

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

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!

OneMonth.com
OneMonthHtml.com
OneMonthRails.com

Statistics

Views

Total Views
6,986
Views on SlideShare
6,638
Embed Views
348

Actions

Likes
150
Downloads
209
Comments
5

19 Embeds 348

https://twitter.com 200
http://dkamilali.wordpress.com 64
http://research-digital.com 20
http://abaspineiro.blogspot.com 19
http://mangastorytelling.tistory.com 14
https://www.blogger.com 6
http://localhost 6
http://translate.googleusercontent.com 3
http://stg.shocase.com 3
https://www.linkedin.com 2
http://nucash.wordpress.com 2
http://127.0.0.1 2
https://abaspineiro.blogspot.com 1
http://www.slideee.com 1
http://pulse.me&_=1405671317282 HTTP 1
https://nucash.wordpress.com 1
http://plus.url.google.com 1
http://pulse.me&_=1405671317141 HTTP 1
http://pulse.me&_=1405675326392 HTTP 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Programming for Non-Programmers - SXSW Vegas 2014 Programming for Non-Programmers - SXSW Vegas 2014 Presentation 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 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 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.
  • “ – 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 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
  • MIKE’S 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