Your SlideShare is downloading. ×
0
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 oth...
PEANUT BUTTER
& JELLY SANDWICH
find two slices of bread
spread peanut butter on one slice of bread
spread jelly on the oth...
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 O...
“
– 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 Archite...
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 ar...
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 ...
PERSONAS: WHAT JOHN CARES ABOUT
This isn’t sketchy is it?
How can I get my friends involved?
How often are the races on th...
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
ARCH...
IA: THE BLUEPRINT
SITEMAPS &
FLOW DIAGRAMS

WIREFRAMES & CONTENT

Establish flow and order
Define the user interaction and...
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 Ass...
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 ...
DEVELOPMENT
The development process can be broken into two separate responsibilities:
FRONT-END WEB DEVELOPMENT
1. How thi...
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
IA
DESIGN
UX
DEVELOPMENT
30 HOURS
Timeline: The Black Eyed Peas
40 HOURS
60 HOURS
120+ HOU...
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE: 

THE STORY STUDIO
• Main task: classes
• Consulting
• Low budget
• 4 page navig...
PROGRAMMING FOR NON-PROGRAMMERS
Timeline: The Story Studio
UX IA
DEVELOPMENT
DESIGN
8-12 HOURS
10 HOURS
35 HOURS
Total: 57...
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE: 

DERBY JACKPOT
• Main task: an online horse
gambling platform
• Start-up Consul...
PROGRAMMING FOR NON-PROGRAMMERS
IA
DESIGN
UX
DEVELOPMENT
45 HOURS
Timeline: Derby Jackpot to launch in June
45 HOURS
120 H...
PROGRAMMING FOR NON-PROGRAMMERS
IA
DESIGN
UX
DEVELOPMENT
Timeline: One Month
FOREVER +
Total: 700+ Hours
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+ Hou...
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

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

Programming for Non-Programmers - SXSW Vegas 2014

9,205

Published on

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

Published in: Engineering, Internet
5 Comments
153 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,205
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
252
Comments
5
Likes
153
Embeds 0
No embeds

No notes for slide

Transcript of "Programming for Non-Programmers - SXSW Vegas 2014"

  1. 1. With Chris Castiglione / @castig
  2. 2. WHAT IS PROGRAMMING? (AND WHY DO I CARE?)
  3. 3. WHAT IS PROGRAMMING … AND WHY DO I CARE?
  4. 4. A set of instructions used to solve a problem PROGRAMMING:
  5. 5. PEANUT BUTTER & JELLY SANDWICH
  6. 6. PEANUT BUTTER & JELLY SANDWICH find two slices of bread
  7. 7. PEANUT BUTTER & JELLY SANDWICH find two slices of bread spread peanut butter on one slice of bread
  8. 8. 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
  9. 9. 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
  10. 10. PROBLEM SOLVED!
  11. 11. A set of instructions used to solve a problem PROGRAMMING:
  12. 12. WHY ARE WE HERE? !
  13. 13. WHY ARE WE HERE? TO LEARN TO THINK LIKE A DEVELOPER
  14. 14. SHOULD EVERYONE LEARN PROGRAMMING?
  15. 15. “ – DOUGLAS RUSHKOFF, Program or be Programmed IF WE DON’T LEARN TO PROGRAM, WE RISK BEING PROGRAMMED OURSELVES… PROGRAM OR BE PROGRAMMED.
  16. 16. “ – JEFF ATWOOD, codinghorror.com IF WE DON’T LEARN TO PLUMB, WE RISK BEING PLUMBED OURSELVES… PLUMB OR BE PLUMBED.
  17. 17. WHAT’S YOUR PROBLEM?
  18. 18. 1. WEB DEV PROCESS UNDERSTAND THE PROBLEM
  19. 19. LET’S TAKE A HIKE!
  20. 20. LET’S TAKE A HIKE!
  21. 21. LET’S TAKE A HIKE! 10 Hours? Great!
  22. 22. DAY 1
  23. 23. DAY 1 … 2 Hours Later
  24. 24. DAY 2 What the hell? This wasn’t on the map!
  25. 25. DAY 5 Holy S!*T we didn’t even leave the Bay Area yet?!?? I hate everything.
  26. 26. “ – PAUL GRAHAM, Y Combinator NEVER WRITE A LINE OF CODE NO ONE ASKED YOU TO WRITE.
  27. 27. PRODUCT DEVELOPMENT Minimum features needed to test your assumptions Validate your idea MVP: MINIMAL VIABLE PRODUCT
  28. 28. HYPOTHESIS: If we know where people are falling off in the class, then we can improve completion rates.
  29. 29. THE WORST THING IS TO BUILD SOMETHING THAT NOBODY WANTS.
  30. 30. 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
  31. 31. USER-EXPERIENCE DESIGNER DEVELOPER
  32. 32. USER-EXPERIENCE DESIGNER DEVELOPER
  33. 33. COMPUTER SCIENCE
  34. 34. A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  35. 35. A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  36. 36. 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?
  37. 37. CASE STUDY: IDEAS, FEATURES & GOALS
  38. 38. I WANT ALL OF THE FEATURES!
  39. 39. WHO IS OUR USER?
  40. 40. CASE STUDY: USER RESEARCH
  41. 41. CASE STUDY: PERSONAS MARY DICKINSON, NORTH DAKOTA JOHN
 LONG ISLAND, NEW YORK
  42. 42. 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.
  43. 43. 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?
  44. 44. INFORMATION ARCHITECTURE
  45. 45. A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  46. 46. Wireframes Flow Documents Site Maps A model or blueprint for the site, resulting in deliverables such as: INFORMATION ARCHITECTURE (IA)
  47. 47. 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
  48. 48. BRAINSTORMING
  49. 49. BRAINSTORMING
  50. 50. TWITTER PROTOTYPE
  51. 51. LOW FIDELITY WIREFRAMES
  52. 52. HIGH FIDELITY WIREFRAMES
  53. 53. SMALL SITE
  54. 54. LARGE SITE
  55. 55. FUNCTIONAL
  56. 56. WIREFRAMES Homepage Blog 2 Column Top 1 Column Bottom 2 Column Top 2 Column Bottom
  57. 57. FLOW DIAGRAM
  58. 58. FLOW DIAGRAM
  59. 59. IPHONE WIREFRAMES
  60. 60. FOURSQUARE
  61. 61. FOURSQUARE
  62. 62. DESIGN. IS ALL ABOUT WORDS.
  63. 63. VISUAL DESIGN
  64. 64. A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  65. 65. VISUAL DESIGN Wireframes become design comps
  66. 66. VISUAL DESIGN Wireframes become design comps Homepage BlogListen
  67. 67. STYLE GUIDE Style Tile Final source: www.risk-show.com
  68. 68. DEVELOPMENT
  69. 69. A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  70. 70. A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  71. 71. DEVELOPMENT Comps become graphics & real text
  72. 72. 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
  73. 73. FRONT-END DEVELOPMENT (NOUN)
  74. 74. BACK-END DEVELOPMENT (NOUN)
  75. 75. DEVELOPMENT The development process can be broken into two separate responsibilities:
  76. 76. 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
  77. 77. 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.
  78. 78. PLACE YOUR BETS!
  79. 79. PROGRAMMING FOR NON-PROGRAMMERS TIMELINE: 
 THE BLACK EYED PEAS • Main task: blog • Agency project • Large budget • 6 page content site
  80. 80. PROGRAMMING FOR NON-PROGRAMMERS IA DESIGN UX DEVELOPMENT 30 HOURS Timeline: The Black Eyed Peas 40 HOURS 60 HOURS 120+ HOURS Total: 250+ Hours
  81. 81. PROGRAMMING FOR NON-PROGRAMMERS TIMELINE: 
 THE STORY STUDIO • Main task: classes • Consulting • Low budget • 4 page navigation site
  82. 82. PROGRAMMING FOR NON-PROGRAMMERS Timeline: The Story Studio UX IA DEVELOPMENT DESIGN 8-12 HOURS 10 HOURS 35 HOURS Total: 57+ Hours
  83. 83. PROGRAMMING FOR NON-PROGRAMMERS TIMELINE: 
 DERBY JACKPOT • Main task: an online horse gambling platform • Start-up Consulting • Decent-sized budget • High risk: APIs
  84. 84. 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
  85. 85. PROGRAMMING FOR NON-PROGRAMMERS IA DESIGN UX DEVELOPMENT Timeline: One Month FOREVER + Total: 700+ Hours FOREVER + FOREVER + FOREVER +
  86. 86. MY REQUEST FOR AN ESTIMATE
  87. 87. GUMROAD EXAMPLE SITE
  88. 88. MIKE’S REPLY
  89. 89. PROGRAMMING FOR NON-PROGRAMMERS UX, IA, DESIGN FRONT END Timeline: Growth Hacking Sales Page 2+ HOURS 5.75 Total: 700+ Hours BACK END 4
  90. 90. SUGGESTIONS WRITTEN IN CSS
  91. 91. BOOTSTRAP IMAGE PADDING 700PX
  92. 92. ONE MONTH HTML 25% OFF: http://bit.ly/sxswvegas
  93. 93. ONE MONTH RAILS 25% OFF: http://bit.ly/sxswvegas2
  94. 94. THANK YOU Chris Castiglione @castig chris [at] onemonth.com

  1. A particular slide catching your eye?

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

×