Programming For Non-Programmers (AMEX Remix Edition)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
1,206
On Slideshare
1,206
From Embeds
0
Number of Embeds
0

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