• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
977
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
27
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Chris Castiglione@castig | pfnp.mePROGRAMMING FORNON-PROGRAMMERS(AMEX REMIX EDITION)
  • 2. THE QUESTIONHow do I communicate an ideafrom my head… to a computer?
  • 3. PROGRAMMING FOR NON-PROGRAMMERS1. FRONT END VS. BACK END2. WHICH LANGUAGE?3. CODE!4. APIS
  • 4. PROGRAMMING FOR NON-PROGRAMMERS1. FRONT END VS. BACK END2. WHICH LANGUAGE?3. CODE!4. APIS
  • 5. PROGRAMMING FOR NON-PROGRAMMERS1. FRONT END VS. BACK END2. WHICH LANGUAGE?3. CODE!4. APIS
  • 6. PROGRAMMING FOR NON-PROGRAMMERS1. FRONT END VS. BACK END2. WHICH LANGUAGE?3. CODE!4. APIS
  • 7. What is Programming?
  • 8. PROGRAMMING‣ a set of instructions‣ used to solve a problem
  • 9. PEANUT BUTTER & JELLY SANDWICH
  • 10. PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread
  • 11. PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread‣ spread peanut butter on one slice of bread
  • 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. 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. PROBLEM SOLVED!
  • 15. PROGRAMMING‣ a set of instructions‣ used to solve a problem
  • 16. WHY ARE WE HERE?‣ to learn to think like a developer
  • 17. WHY ARE WE HERE?‣ to learn to think like a developer‣ to understand the tools (aka. Programming Languages)
  • 18. PROGRAMMING FOR NON-PROGRAMMERSis to build somethingthat nobody wants.The worst thing
  • 19. I. WEB DEV PROCESSUnderstand the Problem
  • 20. Web MasterWeb Developer Web DesignerFront-end Back-end Visual DesignerUser ExperienceUser-Interface Information ArchitectureDatabase ExpertGrowth HackerSecurity TestingHTML5 AnimationSEO Expert Usability
  • 21. PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual Design Development
  • 22. Visual Design
  • 23. PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual Design Development
  • 24. PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual DesignDevelopment
  • 25. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]VISUAL DESIGNWireframes become design comps25
  • 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. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]STYLE GUIDE27Style TileFinalsource: www.risk-show.com
  • 28. PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual Design Development
  • 29. Development
  • 30. PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual Design Development
  • 31. PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual DesignDevelopment
  • 32. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real text32
  • 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. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENT34The development process can be broken into two separate responsibilities:
  • 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. 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. ZAPPOS.COMPROGRAMMING FOR NON-PROGRAMMERSFRONT-ENDhomepage cart registrationBACK-ENDprocess.php
  • 38. II. WHICH LANGUAGE?Understand the Tools
  • 39. Vocabulary
  • 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. PROGRAMMING FOR NON-PROGRAMMERSPHPRubyCC++PythonPerl .NETJavaObjective CVisual BasicASPCOBOLRubyLispLogoSmalltalkABCADAActionScriptCluR
  • 42. PROGRAMMING FOR NON-PROGRAMMERSPHPRubyCC++PythonPerl .NETJavaObjective CVisual BasicASPRubyLispLogoSmalltalkABCADAActionScriptCluCOBOLR
  • 43. PROGRAMMING FOR NON-PROGRAMMERSPHPRubyPythonJava.NETC++Objective C
  • 44. PROGRAMMING FOR NON-PROGRAMMERSMachine CodeLOW LEVELHIGH LEVELHIGH TO LOW LANGUAGESCPHP Ruby PythonJava .NETC++ Objective C
  • 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. PYTHONPHPPROGRAMMING FOR NON-PROGRAMMERSWEB PROGRAMMING LANGUAGESRUBYWikipediaFacebookTwitterHulu+GrouponYoutubeGoogleVimeo
  • 47. PROGRAMMING FOR NON-PROGRAMMERSThen why choose... ?
  • 48. PROGRAMMING FOR NON-PROGRAMMERS
  • 49. PROGRAMMING FOR NON-PROGRAMMERS“REAL-TIME” IS MOST IMPORTANT‣ Node.js
  • 50. PROGRAMMING FOR NON-PROGRAMMERS
  • 51. PROGRAMMING FOR NON-PROGRAMMERSWhich Language for...?Mobile
  • 52. PROGRAMMING FOR NON-PROGRAMMERSiPHONE, iPAD, MAC OS‣ Objective-C
  • 53. PROGRAMMING FOR NON-PROGRAMMERSANDROID‣ java
  • 54. PROGRAMMING FOR NON-PROGRAMMERSMOBILE DEVELOPMENT FRAMEWORKS: NATIVEAppcelerator/Titanium“cross-compiler”Phone Gap“native wrapper”
  • 55. PROGRAMMING FOR NON-PROGRAMMERSCROSS COMPILE W/ APPCELERATORJavascript-ishObjective-CJava
  • 56. PROGRAMMING FOR NON-PROGRAMMERSTHE WEBWEB SITESWEB APPSMOBILE WEBMOBILE WEB
  • 57. PROGRAMMING FOR NON-PROGRAMMERSRESPONSIVE DESIGNDesktop BrowserSafari on iPhone
  • 58. PROGRAMMING FOR NON-PROGRAMMERSPHPRubyPythonJavaObjective CWEBNative Apps
  • 59. PROGRAMMING FOR NON-PROGRAMMERSPHP vs. Ruby
  • 60. PROGRAMMING FOR NON-PROGRAMMERS2006RUBY2001PHP1995PHPRUBYtodayPHPRUBY
  • 61. PYTHONPHPPROGRAMMING FOR NON-PROGRAMMERSWEB PROGRAMMING LANGUAGESRUBYWikipediaFacebookTwitterHulu+GrouponYoutubeGoogleVimeo
  • 62. PROGRAMMING FOR NON-PROGRAMMERSAnd then you were all like...
  • 63. PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT...PROTOTYPEJQUERYAJAX*RUBY ON RAILSBACKBONE.JSEXTJS*Ajax is a JavaScript related techniqueSASSDJANGO
  • 64. Frameworks
  • 65. TO THE CODE!
  • 66. PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT...PROTOTYPEJQUERYRUBY ON RAILSBACKBONE.JSEXTJSDJANGOBLUEPRINTSASS
  • 67. PROGRAMMING FOR NON-PROGRAMMERSFUNCTIONdefines a block of code*I’m giving you permissionto use this in the general senseFunctionsMethodsClasses**
  • 68. Content Management Systems(CMS)
  • 69. PROGRAMMING FOR NON-PROGRAMMERSCONTENT MANAGEMENT SYSTEMS (CMS)
  • 70. PROGRAMMING FOR NON-PROGRAMMERSCONTENT MANAGEMENT SYSTEMS (CMS)Wordpress Expression Engine Custom?
  • 71. PROGRAMMING FOR NON-PROGRAMMERSFUNCTIONdefines a block of code*I’m giving you permissionto use this in the general senseFunctionsMethodsClasses**
  • 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. PROGRAMMING FOR NON-PROGRAMMERSAnd then you were all like...
  • 74. PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT...PROTOTYPEJQUERYAJAX*RUBY ON RAILSBACKBONE.JSEXTJS*Ajax is a JavaScript related techniqueSASSDJANGO
  • 75. PROGRAMMING FOR NON-PROGRAMMERSWHAT IS A TECH STACK?
  • 76. III. CODE!Use the Tools
  • 77. PROGRAMMING FOR NON-PROGRAMMERSHTML -structureCSS - styleJS - behavior
  • 78. PROGRAMMING FOR NON-PROGRAMMERSHTML (noun)CSS (adjective)JS (verb)
  • 79. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...make the logo bigger?
  • 80. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...make the logo bigger?CSSHTML
  • 81. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...make that grey heading fadein?
  • 82. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...make that grey heading fadein?JAVASCRIPTHTMLCSS
  • 83. PROGRAMMING FOR NON-PROGRAMMERS4 CONCEPTS...that are the same in everyprogramming language
  • 84. PROGRAMMING FOR NON-PROGRAMMERS1. PRINT
  • 85. PROGRAMMING FOR NON-PROGRAMMERS2. VARIABLES
  • 86. PROGRAMMING FOR NON-PROGRAMMERSPOP QUIZ!a = 1b = 2c = a + bc = ?
  • 87. PROGRAMMING FOR NON-PROGRAMMERSPOP QUIZ!a = 1b = 2c = a + bc = 3
  • 88. PROGRAMMING FOR NON-PROGRAMMERS3. FUNCTIONS
  • 89. PROGRAMMING FOR NON-PROGRAMMERS4. COMMENTS
  • 90. PROGRAMMING FOR NON-PROGRAMMERSALL THIS STUFF GOES ON A SERVER