Programming for non-Programmers
1 like753 views
This document provides an overview of programming and the web development process for non-programmers. It explains that programming involves writing a set of instructions to solve a problem, using the example of instructions for making a peanut butter and jelly sandwich. It then outlines the typical stages in web development, including understanding user needs, designing information architecture and visuals, and developing the front-end and back-end of a website. The goal is to teach non-programmers how to think like developers.
![PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
CASE STUDY: IDEAS, FEATURES, GOALS](https://image.slidesharecdn.com/programmingfornon-programmers-140915174250-phpapp01/85/Programming-for-non-Programmers-32-320.jpg)
Programming for non-Programmers
- 1. PROGRAMMING FOR NON-PROGRAMMERS Chris Castiglione @castig | onemonth.com
- 2. THE QUESTION How do I communicate an idea from my head… to a computer?
- 3. What is Programming? (...and why do I care?)
- 4. PROGRAMMING ‣a set of instructions ‣used to solve a problem
- 5. PEANUT BUTTER & JELLY SANDWICH
- 6. PEANUT BUTTER & JELLY SANDWICH ‣find two slices of bread
- 7. PEANUT BUTTER & JELLY SANDWICH ‣find two slices of bread ‣spread peanut butter on one slice of bread
- 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. 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. PROBLEM SOLVED!
- 11. PROGRAMMING ‣a set of instructions ‣used to solve a problem
- 12. WHY ARE WE HERE? ‣to learn to think like a developer
- 13. WEB DEV PROCESS Understand the Problem
- 14. LET’S TAKE A HIKE!
- 15. LET’S TAKE A HIKE!
- 16. LET’S TAKE A HIKE! ‣ 10 hours per day? ‣ 10 days? ‣Great!
- 17. DAY 1
- 18. DAY 1 ...2 hours later
- 19. DAY 2 What the hell!? This wasn’t on the map
- 20. DAY 5 ‣ Holy S!*T we didn’t even leave the Bay Area yet?!?? ! ‣ I hate everything
- 21. PROGRAMMING FOR NON-PROGRAMMERS MINIMAL VIABLE PRODUCT - (MVP) ‣Minimum features needed to test your assumptions ‣Validate your idea
- 23. ‣Dropbox
- 24. ‣Pebble
- 25. ‣Pebble
- 26. PROGRAMMING FOR NON-PROGRAMMERS The worst thing is to build something that nobody wants.
- 27. Web Master Web Developer Web Designer Front-end Back-end User Experience Visual Designer Database Expert User-Interface Information Architecture Security Testing Growth Hacker HTML5 Animation SEO Expert Usability
- 28. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
- 29. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
- 30. PROGRAMMING FOR NON-PROGRAMMERS 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?
- 32. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] CASE STUDY: IDEAS, FEATURES, GOALS
- 33. PROGRAMMING FOR NON-PROGRAMMERS “I want all of the features!”
- 34. PROGRAMMING FOR NON-PROGRAMMERS Who is our user?
- 35. PROGRAMMING FOR NON-PROGRAMMERS CASE STUDY: USER RESEARCH
- 36. PROGRAMMING FOR NON-PROGRAMMERS CASE STUDY PERSONAS Mary Dickinson, North Dakota John Long Island, New York
- 37. PROGRAMMING FOR NON-PROGRAMMERS 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.
- 38. PROGRAMMING FOR NON-PROGRAMMERS 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?
- 40. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
- 41. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
- 42. PROGRAMMING FOR NON-PROGRAMMERS INFORMATION ARCHITECTURE (IA) A model or blueprint for the site, resulting in deliverables such as: ‣wireframes ‣flow diagrams ‣sitemap
- 43. PROGRAMMING FOR NON-PROGRAMMERS BRAINSTORMING
- 44. PROGRAMMING FOR NON-PROGRAMMERS BRAINSTORMING
- 46. PROGRAMMING FOR NON-PROGRAMMERS LOW FIDELITY WIREFRAMES
- 47. PROGRAMMING FOR NON-PROGRAMMERS HIGH FIDELITY WIREFRAMES
- 48. PROGRAMMING FOR NON-PROGRAMMERS SMALL SITE
- 49. PROGRAMMING FOR NON-PROGRAMMERS LARGE SITE
- 50. PROGRAMMING FOR NON-PROGRAMMERS FUNCTIONAL
- 51. PROGRAMMING FOR NON-PROGRAMMERS FLOW DIAGRAM
- 52. PROGRAMMING FOR NON-PROGRAMMERS FLOW DIAGRAM
- 53. PUT STUFF HERE LATER HEADER 2 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.
- 54. CONTENT STRATEGY TREAT TEXT AS USER-INTERFACE 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.
- 55. DESIGN. IS ABOUT WORDS. TREAT TEXT AS USER-INTERFACE
- 56. Visual Design
- 57. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
- 58. PROGRAMMING FOR NON-PROGRAMMERS User-Experience (UX) Information Architecture (IA) Visual Design Development A TYPICAL WEB DEVELOPMENT CYCLE
- 59. VISUAL DESIGN Wireframes become design comps
- 60. VISUAL DESIGN Each wireframe template becomes a comp template Homepage Listen Blog source: www.risk-show.com
- 61. STYLE GUIDE Style Tile Final source: www.risk-show.com
- 62. Development
- 63. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
- 64. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
- 65. PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT Comps become graphics & real text !65
- 66. PROGRAMMING FOR NON-PROGRAMMERS 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 !66
- 67. PROGRAMMING FOR NON-PROGRAMMERS FRONT-END DEVELOPMENT (noun)
- 68. PROGRAMMING FOR NON-PROGRAMMERS BACK-END DEVELOPMENT (noun)
- 69. PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT !69 The development process can be broken into two separate responsibilities:
- 70. PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT FRONT-END WEB DEVELOPMENT 1.Client Side 2.How things look to the user 3.Involves: Images, content, structure 4.HTML, CSS, JavaScript !70 The development process can be broken into two separate responsibilities:
- 71. PROGRAMMING FOR NON-PROGRAMMERS 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 BACK-END WEB DEVELOPMENT 1.Server Side 2.How things works 3.Involves: “business logic” and data 4.Ruby, PHP, C++, Java, etc !71 DEVELOPMENT
- 72. ±±± PROGRAMMING FOR NON-PROGRAMMERS ZAPPOS.COM FRONT-END homepage cart registration BACK-END process.php
- 73. PROGRAMMING FOR NON-PROGRAMMERS ‣Product Development ‣User Experience ‣Information Architecture ‣Content Strategy ‣Project Manager ‣Business Analyst !‣Visual Designer !‣Front-end developer ‣Back-end developer ‣Usability ‣Security ‣SEO Expert ‣Analytics Expert ‣Quality Assurance (QA) Tester ‣Server Administrator ‣Growth Hacking WEB DEVELOPMENT PROCESS
- 75. PROGRAMMING FOR NON-PROGRAMMERS Chris Castiglione @castig | onemonth.com