Programming For Non-Programmers (AMEX Remix Edition)

1,409 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,409
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Programming For Non-Programmers (AMEX Remix Edition)

  1. 1. Chris Castiglione@castig | pfnp.mePROGRAMMING FORNON-PROGRAMMERS(AMEX REMIX EDITION)
  2. 2. THE QUESTIONHow do I communicate an ideafrom my head… to a computer?
  3. 3. PROGRAMMING FOR NON-PROGRAMMERS1. FRONT END VS. BACK END2. WHICH LANGUAGE?3. CODE!4. APIS
  4. 4. PROGRAMMING FOR NON-PROGRAMMERS1. FRONT END VS. BACK END2. WHICH LANGUAGE?3. CODE!4. APIS
  5. 5. PROGRAMMING FOR NON-PROGRAMMERS1. FRONT END VS. BACK END2. WHICH LANGUAGE?3. CODE!4. APIS
  6. 6. PROGRAMMING FOR NON-PROGRAMMERS1. FRONT END VS. BACK END2. WHICH LANGUAGE?3. CODE!4. APIS
  7. 7. What is Programming?
  8. 8. PROGRAMMING‣ a set of instructions‣ used to solve a problem
  9. 9. PEANUT BUTTER & JELLY SANDWICH
  10. 10. PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread
  11. 11. PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread‣ spread peanut butter on one 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
  13. 13. 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
  14. 14. PROBLEM SOLVED!
  15. 15. PROGRAMMING‣ a set of instructions‣ used to solve a problem
  16. 16. WHY ARE WE HERE?‣ to learn to think like a developer
  17. 17. WHY ARE WE HERE?‣ to learn to think like a developer‣ to understand the tools (aka. Programming Languages)
  18. 18. PROGRAMMING FOR NON-PROGRAMMERSis to build somethingthat nobody wants.The worst thing
  19. 19. I. WEB DEV PROCESSUnderstand the Problem
  20. 20. Web MasterWeb Developer Web DesignerFront-end Back-end Visual DesignerUser ExperienceUser-Interface Information ArchitectureDatabase ExpertGrowth HackerSecurity TestingHTML5 AnimationSEO Expert Usability
  21. 21. PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual Design Development
  22. 22. Visual Design
  23. 23. PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual Design Development
  24. 24. PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual DesignDevelopment
  25. 25. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]VISUAL DESIGNWireframes become design comps25
  26. 26. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]VISUAL DESIGNEach wireframe template becomes a comp template26Homepage BlogListensource: www.risk-show.com
  27. 27. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]STYLE GUIDE27Style TileFinalsource: www.risk-show.com
  28. 28. PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual Design Development
  29. 29. Development
  30. 30. PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual Design Development
  31. 31. PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual DesignDevelopment
  32. 32. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real text32
  33. 33. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real textmailer.pnggeneral-assembly-logo.pngsocial-media.pngReal Text:General Assembly offers classes, and events at the intersection oftechnology, design, and entrepreneurship. Together with our members,thought leaders, and seasoned practitioners, we offer a robustcurriculum focused on33
  34. 34. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENT34The development process can be broken into two separate responsibilities:
  35. 35. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FRONT-END WEB DEVELOPMENT1.Client Side2.How things look to the user3.Involves: Images, content, structure4.HTML, CSS, JavaScriptDEVELOPMENT35The development process can be broken into two separate responsibilities:
  36. 36. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FRONT-END WEB DEVELOPMENT1.Client Side2.How things look to the user3.Involves: Images, content, structure4.HTML, CSS, JavaScriptDEVELOPMENTThe development process can be broken into two separate responsibilities:BACK-END WEB DEVELOPMENT1.Server Side2.How things works3.Involves: “business logic” and data4.Ruby, PHP, C++, Java, etc36
  37. 37. ZAPPOS.COMPROGRAMMING FOR NON-PROGRAMMERSFRONT-ENDhomepage cart registrationBACK-ENDprocess.php
  38. 38. II. WHICH LANGUAGE?Understand the Tools
  39. 39. Vocabulary
  40. 40. PROGRAMMING FOR NON-PROGRAMMERSOTHER‣ DECODE THEGENOME‣ XBOX‣ VIDEO GAMES‣ OTHERHARDWARE‣ ANYTHINGELSE I MAYHAVE MISSEDNATIVE APPSDirectly on your Operating System‣ IPHONE‣ ANDROID‣ OSX‣ WINDOWSIn a browser‣ CHROME‣ SAFARI‣ FIREFOX‣ OPERA‣ INTERNETEXPLORERTHE WEBWEB SITESWEB APPSMOBILE WEBVOCABULARY
  41. 41. PROGRAMMING FOR NON-PROGRAMMERSPHPRubyCC++PythonPerl .NETJavaObjective CVisual BasicASPCOBOLRubyLispLogoSmalltalkABCADAActionScriptCluR
  42. 42. PROGRAMMING FOR NON-PROGRAMMERSPHPRubyCC++PythonPerl .NETJavaObjective CVisual BasicASPRubyLispLogoSmalltalkABCADAActionScriptCluCOBOLR
  43. 43. PROGRAMMING FOR NON-PROGRAMMERSPHPRubyPythonJava.NETC++Objective C
  44. 44. PROGRAMMING FOR NON-PROGRAMMERSMachine CodeLOW LEVELHIGH LEVELHIGH TO LOW LANGUAGESCPHP Ruby PythonJava .NETC++ Objective C
  45. 45. PROGRAMMING FOR NON-PROGRAMMERSHIGH TO LOW LANGUAGES 1000 CLC       1001 LDA $80    1003 ADC $4009 1006 STA $80  1008 LDA $81    100A ADC $400A 100D STA $81 Machine Code jQUERY$("#submit-button").click(function(){  $(".ball").animate({"left": "-=50px"}, "slow");});
  46. 46. PYTHONPHPPROGRAMMING FOR NON-PROGRAMMERSWEB PROGRAMMING LANGUAGESRUBYWikipediaFacebookTwitterHulu+GrouponYoutubeGoogleVimeo
  47. 47. PROGRAMMING FOR NON-PROGRAMMERSThen why choose... ?
  48. 48. PROGRAMMING FOR NON-PROGRAMMERS
  49. 49. PROGRAMMING FOR NON-PROGRAMMERS“REAL-TIME” IS MOST IMPORTANT‣ Node.js
  50. 50. PROGRAMMING FOR NON-PROGRAMMERS
  51. 51. PROGRAMMING FOR NON-PROGRAMMERSWhich Language for...?Mobile
  52. 52. PROGRAMMING FOR NON-PROGRAMMERSiPHONE, iPAD, MAC OS‣ Objective-C
  53. 53. PROGRAMMING FOR NON-PROGRAMMERSANDROID‣ java
  54. 54. PROGRAMMING FOR NON-PROGRAMMERSMOBILE DEVELOPMENT FRAMEWORKS: NATIVEAppcelerator/Titanium“cross-compiler”Phone Gap“native wrapper”
  55. 55. PROGRAMMING FOR NON-PROGRAMMERSCROSS COMPILE W/ APPCELERATORJavascript-ishObjective-CJava
  56. 56. PROGRAMMING FOR NON-PROGRAMMERSTHE WEBWEB SITESWEB APPSMOBILE WEBMOBILE WEB
  57. 57. PROGRAMMING FOR NON-PROGRAMMERSRESPONSIVE DESIGNDesktop BrowserSafari on iPhone
  58. 58. PROGRAMMING FOR NON-PROGRAMMERSPHPRubyPythonJavaObjective CWEBNative Apps
  59. 59. PROGRAMMING FOR NON-PROGRAMMERSPHP vs. Ruby
  60. 60. PROGRAMMING FOR NON-PROGRAMMERS2006RUBY2001PHP1995PHPRUBYtodayPHPRUBY
  61. 61. PYTHONPHPPROGRAMMING FOR NON-PROGRAMMERSWEB PROGRAMMING LANGUAGESRUBYWikipediaFacebookTwitterHulu+GrouponYoutubeGoogleVimeo
  62. 62. PROGRAMMING FOR NON-PROGRAMMERSAnd then you were all like...
  63. 63. PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT...PROTOTYPEJQUERYAJAX*RUBY ON RAILSBACKBONE.JSEXTJS*Ajax is a JavaScript related techniqueSASSDJANGO
  64. 64. Frameworks
  65. 65. TO THE CODE!
  66. 66. PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT...PROTOTYPEJQUERYRUBY ON RAILSBACKBONE.JSEXTJSDJANGOBLUEPRINTSASS
  67. 67. PROGRAMMING FOR NON-PROGRAMMERSFUNCTIONdefines a block of code*I’m giving you permissionto use this in the general senseFunctionsMethodsClasses**
  68. 68. Content Management Systems(CMS)
  69. 69. PROGRAMMING FOR NON-PROGRAMMERSCONTENT MANAGEMENT SYSTEMS (CMS)
  70. 70. PROGRAMMING FOR NON-PROGRAMMERSCONTENT MANAGEMENT SYSTEMS (CMS)Wordpress Expression Engine Custom?
  71. 71. PROGRAMMING FOR NON-PROGRAMMERSFUNCTIONdefines a block of code*I’m giving you permissionto use this in the general senseFunctionsMethodsClasses**
  72. 72. PROGRAMMING FOR NON-PROGRAMMERS1. Advance right leg forward 0.5697 feet2. Shift weight to right foot3. Advance left leg forward 0.5697 feet4. Shift weight to left footwalk()
  73. 73. PROGRAMMING FOR NON-PROGRAMMERSAnd then you were all like...
  74. 74. PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT...PROTOTYPEJQUERYAJAX*RUBY ON RAILSBACKBONE.JSEXTJS*Ajax is a JavaScript related techniqueSASSDJANGO
  75. 75. PROGRAMMING FOR NON-PROGRAMMERSWHAT IS A TECH STACK?
  76. 76. III. CODE!Use the Tools
  77. 77. PROGRAMMING FOR NON-PROGRAMMERSHTML -structureCSS - styleJS - behavior
  78. 78. PROGRAMMING FOR NON-PROGRAMMERSHTML (noun)CSS (adjective)JS (verb)
  79. 79. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...make the logo bigger?
  80. 80. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...make the logo bigger?CSSHTML
  81. 81. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...make that grey heading fadein?
  82. 82. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...make that grey heading fadein?JAVASCRIPTHTMLCSS
  83. 83. PROGRAMMING FOR NON-PROGRAMMERS4 CONCEPTS...that are the same in everyprogramming language
  84. 84. PROGRAMMING FOR NON-PROGRAMMERS1. PRINT
  85. 85. PROGRAMMING FOR NON-PROGRAMMERS2. VARIABLES
  86. 86. PROGRAMMING FOR NON-PROGRAMMERSPOP QUIZ!a = 1b = 2c = a + bc = ?
  87. 87. PROGRAMMING FOR NON-PROGRAMMERSPOP QUIZ!a = 1b = 2c = a + bc = 3
  88. 88. PROGRAMMING FOR NON-PROGRAMMERS3. FUNCTIONS
  89. 89. PROGRAMMING FOR NON-PROGRAMMERS4. COMMENTS
  90. 90. PROGRAMMING FOR NON-PROGRAMMERSALL THIS STUFF GOES ON A SERVER

×