PROGRAMMING FORNON-PROGRAMMERSChris Castiglione@castig | pfnp.me
THE QUESTIONHow do I communicate an ideafrom my head… to a computer?
PROGRAMMING FOR NON-PROGRAMMERS                         1. WEB DEV PROCESS                         2. WHICH LANGUAGE?     ...
PROGRAMMING FOR NON-PROGRAMMERS                         1. WEB DEV PROCESS                         2. WHICH LANGUAGE?     ...
PROGRAMMING FOR NON-PROGRAMMERS                         1. WEB DEV PROCESS                         2. WHICH LANGUAGE?     ...
What is Programming?(...and why do I care?)
PROGRAMMING‣   a set of instructions‣   used to solve a problem
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 o...
PEANUT BUTTER & JELLY SANDWICH‣   find two slices of bread‣   spread peanut butter on one slice of bread‣   spread jelly o...
PROBLEM SOLVED!
PROGRAMMING‣   a set of instructions‣   used to solve a problem
WHY ARE WE HERE?‣   to learn to think like a developer
WHY ARE WE HERE?‣   to learn to think like a developer‣   to understand the tools (aka. Programming Languages)
WHY ARE WE HERE?‣   to learn to think like a developer‣   to understand the tools (aka. Programming Languages)‣   and to u...
I. WEB DEV PROCESSUnderstand the Problem
Vocabulary
PROGRAMMING FOR NON-PROGRAMMERSVOCABULARY         THE WEB WEB SITES                                                     NA...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]PRODUCT DEVELOPMENT                            ‣   ...
PROGRAMMING FOR NON-PROGRAMMERS           The worst thing               is to build something                that no body ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE    User-Experience ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE                    ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]USER-EXPERIENCE (UX)                            ‣  ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]UX                    IDEAL EXPERIENCE             ...
PROGRAMMING FOR NON-PROGRAMMERS         “I want all of the features!”
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]CASE STUDY: IDEAS, FEATURES, GOALS
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]                                           Who is o...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]CASE STUDY: USER RESEARCH
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]CASE STUDY PERSONASMaryDickinson, North Dakota     ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]PERSONAS: WHAT JOHN CARES ABOUT…‣ Has5+ computers i...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]PERSONAS: WHAT JOHN CARES ABOUT                    ...
Information Architecture
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE    User-Experience ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE    User-Experience ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]INFORMATION ARCHITECTURE (IA)                      ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]IA: THE BLUEPRINT                            SITEMA...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]BRAINSTORMING
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]BRAINSTORMING
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]TWITTER(PROTOTYPE)
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]LOW FIDELITY MOCKUPS
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]HIGH FIDELITY MOCKUPS
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]SMALL SITE
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]LARGE SITE
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FUNCTIONAL
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FLOW DIAGRAM
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FLOW DIAGRAM
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]iPHONE WIREFRAMES
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FOURSQUARE
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FOURSQUARE
PUT STUFF HERE LATERHEADER 2Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel auguelaoreet rutrum faucib...
CONTENT STRATEGYTREAT TEXT AS USER-INTERFACETypography has one plain duty before it and that is to convey information inwr...
DESIGN. IS ABOUT WORDS.     TREAT TEXT AS USER-INTERFACE
Visual Design
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE    User-Experience ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE    User-Experience ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]VISUAL DESIGNWireframes become design comps        ...
PROGRAMMING FOR NON-PROGRAMMERS                            source: www.risk-show.com[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP...
PROGRAMMING FOR NON-PROGRAMMERS                    source: www.risk-show.com[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]STYLE ...
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]VISUAL DESIGNPRINT                                      DIGITAL‣   CMYK           ...
Development
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE    User-Experience ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE    User-Experience ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real text       ...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real text       ...
PROGRAMMING FOR NON-PROGRAMMERSFRONT-ENDDEVELOPMENT (noun)the client-side structure and behaviorof a web site; put simply ...
PROGRAMMING FOR NON-PROGRAMMERSBACK-ENDDEVELOPMENT (noun)the server-side programming thatprocesses the “business logic”, d...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken in...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken in...
PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken in...
PROGRAMMING FOR NON-PROGRAMMERSZAPPOS.COM                  process.php                BACK-ENDFRONT-END            homepag...
PROGRAMMING FOR NON-PROGRAMMERSWEB DEVELOPMENT PROCESS                                  ‣ Product Development             ...
PROGRAMMING FOR NON-PROGRAMMERSPOST-LAUNCH ROLES1.Growth Hacker2.SEO3.Analytics Expert4.Quality Assurance
PROGRAMMING FOR NON-PROGRAMMERS
PROGRAMMING FOR NON-PROGRAMMERS                                  WATERFALL
PROGRAMMING FOR NON-PROGRAMMERS      AGILE                       WATERFALL
II. WHICH LANGUAGE?Understand the Tools
PROGRAMMING FOR NON-PROGRAMMERS                                                   Java PHP                       Perl     ...
PROGRAMMING FOR NON-PROGRAMMERS                                                   Java PHP                       Perl     ...
PROGRAMMING FOR NON-PROGRAMMERS                                                   Java PHP                       Perl     ...
PROGRAMMING FOR NON-PROGRAMMERSHIGH TO LOW LANGUAGES                HIGH LEVEL                                  PHP   Ruby...
PROGRAMMING FOR NON-PROGRAMMERSHIGH TO LOW LANGUAGES        Machine Code          jQUERY        1000   CLC              10...
PROGRAMMING FOR NON-PROGRAMMERSINFLUENCED BY?            PHP                    RUBY                  JAVA   ‣C        ‣ C...
PROGRAMMING FOR NON-PROGRAMMERSTHE MOTHER OF ALL LANGUAGES                 C
PROGRAMMING FOR NON-PROGRAMMERS                             THE WEB WEB SITES                                     WEB APPS...
PROGRAMMING FOR NON-PROGRAMMERSWHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:‣   Difficulty level
PROGRAMMING FOR NON-PROGRAMMERSWHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:‣   Difficulty level‣   Community
PROGRAMMING FOR NON-PROGRAMMERSWHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:‣   Difficulty level‣   Community‣   Development ...
PROGRAMMING FOR NON-PROGRAMMERSWEB PROGRAMMING LANGUAGES         PHP                      RUBY       PYTHON          Wikip...
PROGRAMMING FOR NON-PROGRAMMERS                     PHP vs. Ruby
PROGRAMMING FOR NON-PROGRAMMERS                PHP                 RUBY           EASIER TO               STEEPER         ...
PROGRAMMING FOR NON-PROGRAMMERS       1995       PHP       RUBY
PROGRAMMING FOR NON-PROGRAMMERS       1995                2001       PHP                 PHP       RUBY
PROGRAMMING FOR NON-PROGRAMMERS       1995                2001   2006       PHP                 PHP    RUBY       RUBY
PROGRAMMING FOR NON-PROGRAMMERS       1995                2001   2006   today       PHP                 PHP    RUBY   PHP ...
PROGRAMMING FOR NON-PROGRAMMERS                             THE WEB WEB SITES                                     WEB APPS...
PROGRAMMING FOR NON-PROGRAMMERS        USER DRIVEN                             CONTENT DRIVEN        DATA DRIVEN          ...
PROGRAMMING FOR NON-PROGRAMMERS                 RUBY                PHP             WEB APP              WEB SITE
PROGRAMMING FOR NON-PROGRAMMERS                 Pop Quiz: Review!
PROGRAMMING FOR NON-PROGRAMMERSTIMELINE:THE BLACK EYED PEAS• Main task: blog• Agency project• Large budget• 6 page content...
PROGRAMMING FOR NON-PROGRAMMERSTimeline: The Black Eyed Peas                   30 HOURS       UX                   40 HOUR...
PROGRAMMING FOR NON-PROGRAMMERSTIMELINE:THE STORY STUDIO• Main task: classes• Consulting• Low budget• 4 page navigation si...
PROGRAMMING FOR NON-PROGRAMMERSTimeline: The Story Studio                     8-12 HOURS  UX            IA                ...
PROGRAMMING FOR NON-PROGRAMMERSTIMELINE:DERBY JACKPOT• Main task: an online horsegambling platform• Start-up Consulting• D...
PROGRAMMING FOR NON-PROGRAMMERSTimeline: Derby Jackpot                   45 HOURS       UX                   45 HOURS     ...
PROGRAMMING FOR NON-PROGRAMMERSTIMELINE:GENERALASSEMB.LYMain tasks:   • classes   • about us   • video   • social network ...
PROGRAMMING FOR NON-PROGRAMMERSTIMELINE:                         WEB SITEGENERALASSEMB.LYMain tasks:   • classes   • about...
PROGRAMMING FOR NON-PROGRAMMERS             Which Language for...?                 Native Apps
PROGRAMMING FOR NON-PROGRAMMERS                               NATIVE APPS                     Directly on your Operating S...
PROGRAMMING FOR NON-PROGRAMMERSiPHONE, iPAD, MAC OS‣   Objective-C
PROGRAMMING FOR NON-PROGRAMMERSANDROID‣   java
PROGRAMMING FOR NON-PROGRAMMERSMOBILE DEVELOPMENT FRAMEWORKS: NATIVE             Appcelerator/Titanium      Phone Gap     ...
PROGRAMMING FOR NON-PROGRAMMERSCROSS COMPILE W/ APPCELERATOR               Java                                          O...
PROGRAMMING FOR NON-PROGRAMMERSMOBILE WEB / RESPONSIVE DESIGN                                  Safari on iPhone           ...
PROGRAMMING FOR NON-PROGRAMMERSMOBILE WEB: FRAMEWORKS                    Sencha        jQuery Mobile                 Javas...
Content Management Systems          (CMS)
PROGRAMMING FOR NON-PROGRAMMERSCONTENT MANAGEMENT SYSTEMS (CMS)
PROGRAMMING FOR NON-PROGRAMMERSCONTENT MANAGEMENT SYSTEMS (CMS)                                               ?     Wordpr...
PROGRAMMING FOR NON-PROGRAMMERSCMS DISTRIBUTION IN TOP MILLION SITES
PROGRAMMING FOR NON-PROGRAMMERS          Which languages are left?
PROGRAMMING FOR NON-PROGRAMMERSANALYTICS, QUICK PROCESSES‣   C++
PROGRAMMING FOR NON-PROGRAMMERS“REAL-TIME” IS MOST IMPORTANT‣   Node.js
PROGRAMMING FOR NON-PROGRAMMERS
PROGRAMMING FOR NON-PROGRAMMERS        And then you were all like...
PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT...                 DJANGO                                               ...
Frameworks
LET’S CODE SOME
and come back to frameworks
PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT...                 DJANGO                                               ...
PROGRAMMING FOR NON-PROGRAMMERS                                                     Functions                         *  F...
PROGRAMMING FOR NON-PROGRAMMERSFRAMEWORK: Login Example                login()                          The “perfect regis...
PROGRAMMING FOR NON-PROGRAMMERSFRAMEWORK: Login Example                      1. Create an email field                     ...
PROGRAMMING FOR NON-PROGRAMMERS              1. Advance right leg forward 0.5697 feet              2. Shift weight to righ...
PROGRAMMING FOR NON-PROGRAMMERS   WALK() {              1. Advance right leg forward 0.5697 feet              2. Shift wei...
Frameworks
PROGRAMMING FOR NON-PROGRAMMERS  FRAMEWORKS   a collection of pre-baked code   ...mostly “functions”, and other great stuff
PROGRAMMING FOR NON-PROGRAMMERSFRAMEWORKS                            DJANGO                                               ...
PROGRAMMING FOR NON-PROGRAMMERSWHAT IS TWITTER BOOTSTRAP?                     http://twitter.github.com/
WHAT IS TWITTER BOOTSTRAP?A: Pre-baked...        CSS   JS
Frameworks
PROGRAMMING FOR NON-PROGRAMMERSA: JAVASCRIPT FRAMEWORKS & HELPERS                                                      EXT...
PROGRAMMING FOR NON-PROGRAMMERSA: CSS FRAMEWORKS & HELPERS                         SASS                                   ...
Tech Stack
PROGRAMMING FOR NON-PROGRAMMERSWHAT IS A TECH STACK?
PROGRAMMING FOR NON-PROGRAMMERSWHAT IS A TECH STACK?         FRONT-END LANGUAGE        CSS     HTML   JS         SERVER-SI...
III. CODE!Use the Tools
PROGRAMMING FOR NON-PROGRAMMERSHTML -structureCSS - styleJS - behavior
PROGRAMMING FOR NON-PROGRAMMERSHTML (noun)CSS (adjective)JS (verb)
PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...              make the logo bigger?
PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...                                  HTML              make the logo bigg...
PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...    make that grey heading fadein?
PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...                                  HTML    make that grey heading fadei...
PROGRAMMING FOR NON-PROGRAMMERS7 CONCEPTS...that are the same in everyprogramming language
PROGRAMMING FOR NON-PROGRAMMERS1. EVENTS
PROGRAMMING FOR NON-PROGRAMMERS2. COMMENTS
PROGRAMMING FOR NON-PROGRAMMERS3. PRINT
PROGRAMMING FOR NON-PROGRAMMERS4. VARIABLES
PROGRAMMING FOR NON-PROGRAMMERSPOP QUIZ!                        a=1                        b=2                        c=a+...
PROGRAMMING FOR NON-PROGRAMMERSPOP QUIZ!                        a=1                        b=2                        c=a+...
PROGRAMMING FOR NON-PROGRAMMERS5. DATATYPES
PROGRAMMING FOR NON-PROGRAMMERS6. CONDITIONALS
PROGRAMMING FOR NON-PROGRAMMERS7. FUNCTIONS
PROGRAMMING FOR NON-PROGRAMMERSPROGRAMMING CONCEPTS1. Events                    6. Conditionals2. Comments                ...
PROGRAMMING FOR NON-PROGRAMMERS JAVASCRIPT document.write(“Good morning”);
PROGRAMMING FOR NON-PROGRAMMERS JAVASCRIPT                        PHP document.write(“Good morning”);   echo “Good morning”;
PROGRAMMING FOR NON-PROGRAMMERS JAVASCRIPT                        PHP document.write(“Good morning”);   echo “Good morning...
PROGRAMMING FOR NON-PROGRAMMERS JAVASCRIPT                        PHP document.write(“Good morning”);   echo “Good morning...
PROGRAMMING FOR NON-PROGRAMMERS               1. WEB DEV PROCESSPFNP 1         2. WHICH LANGUAGE?                     3. C...
FRONT-ENDHTML, CSS, JS
PROGRAMMING FOR NON-PROGRAMMERSWHAT IS HTML5?
BACK-ENDPHP & SQL
PROGRAMMING FOR NON-PROGRAMMERSWHAT IS A TECH STACK?         FRONT-END LANGUAGE                CSS      HTML        JS    ...
PROGRAMMING FOR NON-PROGRAMMERS                 File Under:      “not a programming language”
PROGRAMMING FOR NON-PROGRAMMERSOPEN SOURCE
PROGRAMMING FOR NON-PROGRAMMERSFTP
PROGRAMMING FOR NON-PROGRAMMERSGIT
PROGRAMMING FOR NON-PROGRAMMERSGIT‣   Revisions
PROGRAMMING FOR NON-PROGRAMMERSGIT‣   Revisions‣   Collaboration
PROGRAMMING FOR NON-PROGRAMMERSDATABASES (YOU CHOOSE ONE)‣   MySQL (“My Sequel”)‣   PostgreSQL‣   ORACLE‣   Mongo DB‣   Re...
Programming For Non-Programmers: 2013
Upcoming SlideShare
Loading in...5
×

Programming For Non-Programmers: 2013

7,883

Published on

Slides from my most recent Programming For Non-Programmers class.

Published in: Technology
0 Comments
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,883
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
353
Comments
0
Likes
22
Embeds 0
No embeds

No notes for slide

Programming For Non-Programmers: 2013

  1. 1. PROGRAMMING FORNON-PROGRAMMERSChris Castiglione@castig | pfnp.me
  2. 2. THE QUESTIONHow do I communicate an ideafrom my head… to a computer?
  3. 3. PROGRAMMING FOR NON-PROGRAMMERS 1. WEB DEV PROCESS 2. WHICH LANGUAGE? 3. CODE!
  4. 4. PROGRAMMING FOR NON-PROGRAMMERS 1. WEB DEV PROCESS 2. WHICH LANGUAGE? 3. CODE!
  5. 5. PROGRAMMING FOR NON-PROGRAMMERS 1. WEB DEV PROCESS 2. WHICH LANGUAGE? 3. CODE!
  6. 6. What is Programming?(...and why do I care?)
  7. 7. PROGRAMMING‣ a set of instructions‣ used to solve a problem
  8. 8. PEANUT BUTTER & JELLY SANDWICH
  9. 9. PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread
  10. 10. PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread‣ spread peanut butter on one slice of bread
  11. 11. 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
  12. 12. 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
  13. 13. PROBLEM SOLVED!
  14. 14. PROGRAMMING‣ a set of instructions‣ used to solve a problem
  15. 15. WHY ARE WE HERE?‣ to learn to think like a developer
  16. 16. WHY ARE WE HERE?‣ to learn to think like a developer‣ to understand the tools (aka. Programming Languages)
  17. 17. WHY ARE WE HERE?‣ to learn to think like a developer‣ to understand the tools (aka. Programming Languages)‣ and to understand the constraints
  18. 18. I. WEB DEV PROCESSUnderstand the Problem
  19. 19. Vocabulary
  20. 20. PROGRAMMING FOR NON-PROGRAMMERSVOCABULARY THE WEB WEB SITES NATIVE APPS WEB APPS OTHER MOBILE WEB ‣ DECODE THE ‣ OTHER Directly on your Operating System GENOME HARDWARE ‣ XBOX ‣ ANYTHING ‣ IPHONE ‣ OSX ELSE I MAY In a browser ‣ ANDROID ‣ WINDOWS ‣ VIDEO GAMES HAVE MISSED ‣ CHROME ‣ FIREFOX ‣ INTERNET ‣ SAFARI ‣ OPERA EXPLORER
  21. 21. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]PRODUCT DEVELOPMENT ‣ MVP - Minimal Viable Product ‣ Minimum features needed to test your assumptions ‣ Build, Measure, Learn ‣ Validate your idea
  22. 22. PROGRAMMING FOR NON-PROGRAMMERS The worst thing is to build something that no body wants.
  23. 23. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design Development (UX) Architecture (IA)
  24. 24. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE Information Visual Design Development Architecture (IA)User-Experience (UX)
  25. 25. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]USER-EXPERIENCE (UX) ‣ Who are our users? ‣ How do we know if the user is hitting their goals? ‣ What are the most important features of this site? ‣ What does the program do when there are errors? ‣ What are the biggest risks?
  26. 26. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]UX IDEAL EXPERIENCE BUSINESS NEEDS BEST USER PRACTICES NEEDS
  27. 27. PROGRAMMING FOR NON-PROGRAMMERS “I want all of the features!”
  28. 28. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]CASE STUDY: IDEAS, FEATURES, GOALS
  29. 29. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] Who is our user?
  30. 30. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]CASE STUDY: USER RESEARCH
  31. 31. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]CASE STUDY PERSONASMaryDickinson, North Dakota John Long Island, New York
  32. 32. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]PERSONAS: WHAT JOHN CARES ABOUT…‣ Has5+ computers in his home but says he would ‣ Has a Facebook and Twitter profile but would not gamble on his iPad or a PC netbook running want to use it to setup an account. He would like Firefox primarily. to be able to see who of his Twitter and Facebook‣ Hasan iPhone 4, can’t wait to convince his wife friends is playing the game however. he needs the new one. Doesn’t think he would ‣ Watches video online, sports clips mostly. gamble on the iPhone but could see wanting to ‣ Pays for Netflix. check his account. ‣ Doesmost, if not all, shopping online out of convenience and selection.
  33. 33. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]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?
  34. 34. Information Architecture
  35. 35. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design Development (UX) Architecture (IA)
  36. 36. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Visual Design Development (UX) Information Architecture (IA)
  37. 37. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]INFORMATION ARCHITECTURE (IA) A model or blueprint for the site, resulting in deliverables such as: ‣ wireframes ‣ flow diagrams ‣ sitemap
  38. 38. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]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
  39. 39. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]BRAINSTORMING
  40. 40. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]BRAINSTORMING
  41. 41. [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]TWITTER(PROTOTYPE)
  42. 42. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]LOW FIDELITY MOCKUPS
  43. 43. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]HIGH FIDELITY MOCKUPS
  44. 44. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]SMALL SITE
  45. 45. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]LARGE SITE
  46. 46. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FUNCTIONAL
  47. 47. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FLOW DIAGRAM
  48. 48. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FLOW DIAGRAM
  49. 49. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]iPHONE WIREFRAMES
  50. 50. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FOURSQUARE
  51. 51. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FOURSQUARE
  52. 52. PUT STUFF HERE LATERHEADER 2Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel auguelaoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus etmagnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibusmollis interdum.
  53. 53. CONTENT STRATEGYTREAT TEXT AS USER-INTERFACETypography has one plain duty before it and that is to convey information inwriting. No argument or consideration can absolve typography from this duty.A printed work which cannot be read becomes a product without purpose.
  54. 54. DESIGN. IS ABOUT WORDS. TREAT TEXT AS USER-INTERFACE
  55. 55. Visual Design
  56. 56. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design Development (UX) Architecture (IA)
  57. 57. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Development (UX) Architecture (IA) Visual Design
  58. 58. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]VISUAL DESIGNWireframes become design comps 59
  59. 59. PROGRAMMING FOR NON-PROGRAMMERS source: www.risk-show.com[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]VISUAL DESIGNEach wireframe template becomes a comp template Homepage Listen Blog 60
  60. 60. PROGRAMMING FOR NON-PROGRAMMERS source: www.risk-show.com[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]STYLE GUIDE Style Tile Final 61
  61. 61. [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]VISUAL DESIGNPRINT DIGITAL‣ CMYK ‣ RGB‣ inches ‣ pixels‣ 300 dpi ‣ 72 dpi‣ Illustrator / InDesign ‣ Photoshop (for the Web)‣ PDF, Word Doc ‣ PNG, JPG, GIF 62
  62. 62. Development
  63. 63. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design Development (UX) Architecture (IA)
  64. 64. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design (UX) Architecture (IA) Development
  65. 65. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real text 66
  66. 66. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real text general-assembly-logo.png social-media.png mailer.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 67
  67. 67. PROGRAMMING FOR NON-PROGRAMMERSFRONT-ENDDEVELOPMENT (noun)the client-side structure and behaviorof a web site; put simply it mostly concernshow things look on the page
  68. 68. PROGRAMMING FOR NON-PROGRAMMERSBACK-ENDDEVELOPMENT (noun)the server-side programming thatprocesses the “business logic”, database,web services and other utilities
  69. 69. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken into two separate responsibilities: 70
  70. 70. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken into two separate responsibilities:FRONT-END WEB DEVELOPMENT1.Client Side2.How things look to the user3.Involves: Images, content, structure4.HTML, CSS, JavaScript 71
  71. 71. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken into two separate responsibilities:FRONT-END WEB DEVELOPMENT BACK-END WEB DEVELOPMENT1.Client Side 1.Server Side2.How things look to the user 2.How things works3.Involves: Images, content, structure 3.Involves: “business logic” and data4.HTML, CSS, JavaScript 4.Ruby, PHP C++, Java, etc , 72
  72. 72. PROGRAMMING FOR NON-PROGRAMMERSZAPPOS.COM process.php BACK-ENDFRONT-END homepage cart registration
  73. 73. PROGRAMMING FOR NON-PROGRAMMERSWEB DEVELOPMENT PROCESS ‣ 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
  74. 74. PROGRAMMING FOR NON-PROGRAMMERSPOST-LAUNCH ROLES1.Growth Hacker2.SEO3.Analytics Expert4.Quality Assurance
  75. 75. PROGRAMMING FOR NON-PROGRAMMERS
  76. 76. PROGRAMMING FOR NON-PROGRAMMERS WATERFALL
  77. 77. PROGRAMMING FOR NON-PROGRAMMERS AGILE WATERFALL
  78. 78. II. WHICH LANGUAGE?Understand the Tools
  79. 79. PROGRAMMING FOR NON-PROGRAMMERS Java PHP Perl .NET ADA Lisp R C ABC Objective C COBOL Ruby Logo ASP CluSmalltalk Ruby Visual Basic Python C++ ActionScript
  80. 80. PROGRAMMING FOR NON-PROGRAMMERS Java PHP Perl .NET ADA Lisp R C ABC Objective C COBOL Ruby Logo ASP CluSmalltalk Ruby Visual Basic Python C++ ActionScript
  81. 81. PROGRAMMING FOR NON-PROGRAMMERS Java PHP Perl .NET ADA Lisp R C ABC Objective C COBOL Ruby Logo ASP CluSmalltalk Ruby Visual Basic Python C++ ActionScript
  82. 82. PROGRAMMING FOR NON-PROGRAMMERSHIGH TO LOW LANGUAGES HIGH LEVEL PHP Ruby Python Java .NET C++ Objective C C LOW LEVEL Assembly Language Machine Code
  83. 83. PROGRAMMING FOR NON-PROGRAMMERSHIGH TO LOW LANGUAGES Machine Code jQUERY  1000 CLC        1001 LDA $80    $("#submit-button").click(function(){  1003 ADC $4009   $(".ball").animate({"left": "-=50px"}, "slow");  1006 STA $80  });  1008 LDA $81     100A ADC $400A  100D STA $81 
  84. 84. PROGRAMMING FOR NON-PROGRAMMERSINFLUENCED BY? PHP RUBY JAVA ‣C ‣ C++ ‣ ADA ‣ EIFFEL ‣ ADA 83 ‣ EIFFEL ‣ PERL ‣ TCL ‣ C++ ‣ LISP ‣ MESA ‣ SmallTalk ‣ JAVA ‣ CLU ‣ PERL ‣ C++ ‣ DYLAN ‣ PYTHON
  85. 85. PROGRAMMING FOR NON-PROGRAMMERSTHE MOTHER OF ALL LANGUAGES C
  86. 86. PROGRAMMING FOR NON-PROGRAMMERS THE WEB WEB SITES WEB APPS MOBILE WEB In a browser ‣ CHROME ‣ FIREFOX ‣ INTERNET ‣ SAFARI ‣ OPERA EXPLORER
  87. 87. PROGRAMMING FOR NON-PROGRAMMERSWHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:‣ Difficulty level
  88. 88. PROGRAMMING FOR NON-PROGRAMMERSWHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:‣ Difficulty level‣ Community
  89. 89. PROGRAMMING FOR NON-PROGRAMMERSWHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:‣ Difficulty level‣ Community‣ Development time to build an app
  90. 90. PROGRAMMING FOR NON-PROGRAMMERSWEB PROGRAMMING LANGUAGES PHP RUBY PYTHON Wikipedia Twitter Youtube Vimeo Hulu+ Google Facebook Groupon
  91. 91. PROGRAMMING FOR NON-PROGRAMMERS PHP vs. Ruby
  92. 92. PROGRAMMING FOR NON-PROGRAMMERS PHP RUBY EASIER TO STEEPER GET LEARNING STARTED CURVE WITH
  93. 93. PROGRAMMING FOR NON-PROGRAMMERS 1995 PHP RUBY
  94. 94. PROGRAMMING FOR NON-PROGRAMMERS 1995 2001 PHP PHP RUBY
  95. 95. PROGRAMMING FOR NON-PROGRAMMERS 1995 2001 2006 PHP PHP RUBY RUBY
  96. 96. PROGRAMMING FOR NON-PROGRAMMERS 1995 2001 2006 today PHP PHP RUBY PHP RUBY RUBY
  97. 97. PROGRAMMING FOR NON-PROGRAMMERS THE WEB WEB SITES WEB APPS MOBILE WEB In a browser ‣ CHROME ‣ FIREFOX ‣ INTERNET ‣ SAFARI ‣ OPERA EXPLORER
  98. 98. PROGRAMMING FOR NON-PROGRAMMERS USER DRIVEN CONTENT DRIVEN DATA DRIVEN BLOG WEB APP WEB SITE CUSTOM TASKS COMMON TASKS “OUT OF THE BOX” CMS PLUGINS In a browser
  99. 99. PROGRAMMING FOR NON-PROGRAMMERS RUBY PHP WEB APP WEB SITE
  100. 100. PROGRAMMING FOR NON-PROGRAMMERS Pop Quiz: Review!
  101. 101. PROGRAMMING FOR NON-PROGRAMMERSTIMELINE:THE BLACK EYED PEAS• Main task: blog• Agency project• Large budget• 6 page content site WEB SITE
  102. 102. PROGRAMMING FOR NON-PROGRAMMERSTimeline: The Black Eyed Peas 30 HOURS UX 40 HOURS IA 60 HOURS DESIGN 120+ HOURS DEVELOPMENT
  103. 103. PROGRAMMING FOR NON-PROGRAMMERSTIMELINE:THE STORY STUDIO• Main task: classes• Consulting• Low budget• 4 page navigation site WEB SITE
  104. 104. PROGRAMMING FOR NON-PROGRAMMERSTimeline: The Story Studio 8-12 HOURS UX IA 10 HOURS DESIGN 35 HOURS DEVELOPMENT
  105. 105. PROGRAMMING FOR NON-PROGRAMMERSTIMELINE:DERBY JACKPOT• Main task: an online horsegambling platform• Start-up Consulting• Decent-sized budget• High risk: APIs WEB APP
  106. 106. PROGRAMMING FOR NON-PROGRAMMERSTimeline: Derby Jackpot 45 HOURS UX 45 HOURS IA 120 HOURS DESIGN 500+ HOURS DEVELOPMENT
  107. 107. PROGRAMMING FOR NON-PROGRAMMERSTIMELINE:GENERALASSEMB.LYMain tasks: • classes • about us • video • social network • custom payment gateway WEB APP
  108. 108. PROGRAMMING FOR NON-PROGRAMMERSTIMELINE: WEB SITEGENERALASSEMB.LYMain tasks: • classes • about us • video • social network • custom payment gateway
  109. 109. PROGRAMMING FOR NON-PROGRAMMERS Which Language for...? Native Apps
  110. 110. PROGRAMMING FOR NON-PROGRAMMERS NATIVE APPS Directly on your Operating System ‣ IPHONE ‣ OSX ‣ ANDROID ‣ WINDOWS
  111. 111. PROGRAMMING FOR NON-PROGRAMMERSiPHONE, iPAD, MAC OS‣ Objective-C
  112. 112. PROGRAMMING FOR NON-PROGRAMMERSANDROID‣ java
  113. 113. PROGRAMMING FOR NON-PROGRAMMERSMOBILE DEVELOPMENT FRAMEWORKS: NATIVE Appcelerator/Titanium Phone Gap “cross-compiler” “native wrapper”
  114. 114. PROGRAMMING FOR NON-PROGRAMMERSCROSS COMPILE W/ APPCELERATOR Java Objective-C Javascript-ish
  115. 115. PROGRAMMING FOR NON-PROGRAMMERSMOBILE WEB / RESPONSIVE DESIGN Safari on iPhone Desktop Browser
  116. 116. PROGRAMMING FOR NON-PROGRAMMERSMOBILE WEB: FRAMEWORKS Sencha jQuery Mobile Javascript-ish jQuery-ish
  117. 117. Content Management Systems (CMS)
  118. 118. PROGRAMMING FOR NON-PROGRAMMERSCONTENT MANAGEMENT SYSTEMS (CMS)
  119. 119. PROGRAMMING FOR NON-PROGRAMMERSCONTENT MANAGEMENT SYSTEMS (CMS) ? Wordpress Expression Engine Custom
  120. 120. PROGRAMMING FOR NON-PROGRAMMERSCMS DISTRIBUTION IN TOP MILLION SITES
  121. 121. PROGRAMMING FOR NON-PROGRAMMERS Which languages are left?
  122. 122. PROGRAMMING FOR NON-PROGRAMMERSANALYTICS, QUICK PROCESSES‣ C++
  123. 123. PROGRAMMING FOR NON-PROGRAMMERS“REAL-TIME” IS MOST IMPORTANT‣ Node.js
  124. 124. PROGRAMMING FOR NON-PROGRAMMERS
  125. 125. PROGRAMMING FOR NON-PROGRAMMERS And then you were all like...
  126. 126. PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT... DJANGO SASS EXTJS JQUERY BACKBONE.JS AJAX* RUBY ON RAILS PROTOTYPE *Ajax is a JavaScript related technique
  127. 127. Frameworks
  128. 128. LET’S CODE SOME
  129. 129. and come back to frameworks
  130. 130. PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT... DJANGO EXTJS JQUERY BLUEPRINT BACKBONE.JS RUBY ON RAILS PROTOTYPE
  131. 131. PROGRAMMING FOR NON-PROGRAMMERS Functions * FUNCTION * Methods defines a block of code Classes *I’m giving you permission to use this in the general sense
  132. 132. PROGRAMMING FOR NON-PROGRAMMERSFRAMEWORK: Login Example login() The “perfect registration form”
  133. 133. PROGRAMMING FOR NON-PROGRAMMERSFRAMEWORK: Login Example 1. Create an email field 2. Create a password field 3. Create a button that reads “Submit” login() 4. Check to see that the username isn’t taken 5. Validate that the email is real 6. Add this user to the database
  134. 134. PROGRAMMING FOR NON-PROGRAMMERS 1. Advance right leg forward 0.5697 feet 2. Shift weight to right foot walk() 3. Advance left leg forward 0.5697 feet 4. Shift weight to left foot
  135. 135. PROGRAMMING FOR NON-PROGRAMMERS WALK() { 1. Advance right leg forward 0.5697 feet 2. Shift weight to right foot 3. Advance left leg forward 0.5697 feet 4. Shift weight to left foot }
  136. 136. Frameworks
  137. 137. PROGRAMMING FOR NON-PROGRAMMERS FRAMEWORKS a collection of pre-baked code ...mostly “functions”, and other great stuff
  138. 138. PROGRAMMING FOR NON-PROGRAMMERSFRAMEWORKS DJANGO TWITTER EXTJS BOOTSTRAP JQUERY BLUEPRINT BACKBONE.JS RUBY ON RAILS PROTOTYPE
  139. 139. PROGRAMMING FOR NON-PROGRAMMERSWHAT IS TWITTER BOOTSTRAP? http://twitter.github.com/
  140. 140. WHAT IS TWITTER BOOTSTRAP?A: Pre-baked... CSS JS
  141. 141. Frameworks
  142. 142. PROGRAMMING FOR NON-PROGRAMMERSA: JAVASCRIPT FRAMEWORKS & HELPERS EXTJS JQUERY AJAX* BACKBONE.JS COFFEE SCRIPT PROTOTYPE *Ajax is a JavaScript related technique
  143. 143. PROGRAMMING FOR NON-PROGRAMMERSA: CSS FRAMEWORKS & HELPERS SASS 960 GRID SYSTEM LESS COMPASS BLUEPRINT
  144. 144. Tech Stack
  145. 145. PROGRAMMING FOR NON-PROGRAMMERSWHAT IS A TECH STACK?
  146. 146. PROGRAMMING FOR NON-PROGRAMMERSWHAT IS A TECH STACK? FRONT-END LANGUAGE CSS HTML JS SERVER-SIDE LANGUAGE PHP DATABASE MYSQL WEB SERVER APACHE OPERATING SYSTEM LINUX
  147. 147. III. CODE!Use the Tools
  148. 148. PROGRAMMING FOR NON-PROGRAMMERSHTML -structureCSS - styleJS - behavior
  149. 149. PROGRAMMING FOR NON-PROGRAMMERSHTML (noun)CSS (adjective)JS (verb)
  150. 150. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... make the logo bigger?
  151. 151. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... HTML make the logo bigger? CSS
  152. 152. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... make that grey heading fadein?
  153. 153. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... HTML make that grey heading fadein? CSS JAVASCRIPT
  154. 154. PROGRAMMING FOR NON-PROGRAMMERS7 CONCEPTS...that are the same in everyprogramming language
  155. 155. PROGRAMMING FOR NON-PROGRAMMERS1. EVENTS
  156. 156. PROGRAMMING FOR NON-PROGRAMMERS2. COMMENTS
  157. 157. PROGRAMMING FOR NON-PROGRAMMERS3. PRINT
  158. 158. PROGRAMMING FOR NON-PROGRAMMERS4. VARIABLES
  159. 159. PROGRAMMING FOR NON-PROGRAMMERSPOP QUIZ! a=1 b=2 c=a+b c=?
  160. 160. PROGRAMMING FOR NON-PROGRAMMERSPOP QUIZ! a=1 b=2 c=a+b c=3
  161. 161. PROGRAMMING FOR NON-PROGRAMMERS5. DATATYPES
  162. 162. PROGRAMMING FOR NON-PROGRAMMERS6. CONDITIONALS
  163. 163. PROGRAMMING FOR NON-PROGRAMMERS7. FUNCTIONS
  164. 164. PROGRAMMING FOR NON-PROGRAMMERSPROGRAMMING CONCEPTS1. Events 6. Conditionals2. Comments 7. Functions3. Print4. Variables5. Datatypes
  165. 165. PROGRAMMING FOR NON-PROGRAMMERS JAVASCRIPT document.write(“Good morning”);
  166. 166. PROGRAMMING FOR NON-PROGRAMMERS JAVASCRIPT PHP document.write(“Good morning”); echo “Good morning”;
  167. 167. PROGRAMMING FOR NON-PROGRAMMERS JAVASCRIPT PHP document.write(“Good morning”); echo “Good morning”; RUBY print “Good morning”
  168. 168. PROGRAMMING FOR NON-PROGRAMMERS JAVASCRIPT PHP document.write(“Good morning”); echo “Good morning”; RUBY PERL print “Good morning” say “Good morning”
  169. 169. PROGRAMMING FOR NON-PROGRAMMERS 1. WEB DEV PROCESSPFNP 1 2. WHICH LANGUAGE? 3. CODE!PFNP 2 FRONT-END WEB DEV PFNP 3 BACK-END, SQL, APIS
  170. 170. FRONT-ENDHTML, CSS, JS
  171. 171. PROGRAMMING FOR NON-PROGRAMMERSWHAT IS HTML5?
  172. 172. BACK-ENDPHP & SQL
  173. 173. PROGRAMMING FOR NON-PROGRAMMERSWHAT IS A TECH STACK? FRONT-END LANGUAGE CSS HTML JS SERVER-SIDE LANGUAGE JAVA PYTHON RUBY PHP POSTGRES DATABASE ORACLE MONGO DB MYSQL SQL WEB SERVER APACHE NGINX MICROSOFT OPERATING SYSTEM OSX LINUX IIS
  174. 174. PROGRAMMING FOR NON-PROGRAMMERS File Under: “not a programming language”
  175. 175. PROGRAMMING FOR NON-PROGRAMMERSOPEN SOURCE
  176. 176. PROGRAMMING FOR NON-PROGRAMMERSFTP
  177. 177. PROGRAMMING FOR NON-PROGRAMMERSGIT
  178. 178. PROGRAMMING FOR NON-PROGRAMMERSGIT‣ Revisions
  179. 179. PROGRAMMING FOR NON-PROGRAMMERSGIT‣ Revisions‣ Collaboration
  180. 180. PROGRAMMING FOR NON-PROGRAMMERSDATABASES (YOU CHOOSE ONE)‣ MySQL (“My Sequel”)‣ PostgreSQL‣ ORACLE‣ Mongo DB‣ Reddis SELECT post_title FROM wp_users WHERE post_title = “Joy”
  1. A particular slide catching your eye?

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

×