Programming For Non-Programmers: 2013

9,681 views
9,485 views

Published on

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

Published in: Technology
1 Comment
36 Likes
Statistics
Notes
  • Search more than 5000 IT certified Trainers at http://www.todaycourses.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
9,681
On SlideShare
0
From Embeds
0
Number of Embeds
635
Actions
Shares
0
Downloads
440
Comments
1
Likes
36
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”

×