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

Programming For Non-Programmers (AMEX Remix Edition)

on

  • 1,156 views

 

Statistics

Views

Total Views
1,156
Views on SlideShare
1,156
Embed Views
0

Actions

Likes
1
Downloads
27
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Programming For Non-Programmers (AMEX Remix Edition) Programming For Non-Programmers (AMEX Remix Edition) Presentation Transcript

  • Chris Castiglione@castig | pfnp.mePROGRAMMING FORNON-PROGRAMMERS(AMEX REMIX EDITION)
  • THE QUESTIONHow do I communicate an ideafrom my head… to a computer?
  • PROGRAMMING FOR NON-PROGRAMMERS1. FRONT END VS. BACK END2. WHICH LANGUAGE?3. CODE!4. APIS
  • PROGRAMMING FOR NON-PROGRAMMERS1. FRONT END VS. BACK END2. WHICH LANGUAGE?3. CODE!4. APIS
  • PROGRAMMING FOR NON-PROGRAMMERS1. FRONT END VS. BACK END2. WHICH LANGUAGE?3. CODE!4. APIS
  • PROGRAMMING FOR NON-PROGRAMMERS1. FRONT END VS. BACK END2. WHICH LANGUAGE?3. CODE!4. APIS
  • What is Programming?
  • 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 on the other slice of bread
  • 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
  • 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)
  • PROGRAMMING FOR NON-PROGRAMMERSis to build somethingthat nobody wants.The worst thing
  • I. WEB DEV PROCESSUnderstand the Problem
  • Web MasterWeb Developer Web DesignerFront-end Back-end Visual DesignerUser ExperienceUser-Interface Information ArchitectureDatabase ExpertGrowth HackerSecurity TestingHTML5 AnimationSEO Expert Usability
  • PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual Design Development
  • Visual Design
  • PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual Design Development
  • PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual DesignDevelopment
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]VISUAL DESIGNWireframes become design comps25
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]VISUAL DESIGNEach wireframe template becomes a comp template26Homepage BlogListensource: www.risk-show.com
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]STYLE GUIDE27Style TileFinalsource: www.risk-show.com
  • PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual Design Development
  • Development
  • PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual Design Development
  • PROGRAMMING FOR NON-PROGRAMMERSA TYPICAL WEB DEVELOPMENT CYCLEUser-Experience(UX)InformationArchitecture (IA)Visual DesignDevelopment
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real text32
  • 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
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENT34The development process can be broken into two separate responsibilities:
  • 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:
  • 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
  • ZAPPOS.COMPROGRAMMING FOR NON-PROGRAMMERSFRONT-ENDhomepage cart registrationBACK-ENDprocess.php
  • II. WHICH LANGUAGE?Understand the Tools
  • Vocabulary
  • 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
  • PROGRAMMING FOR NON-PROGRAMMERSPHPRubyCC++PythonPerl .NETJavaObjective CVisual BasicASPCOBOLRubyLispLogoSmalltalkABCADAActionScriptCluR
  • PROGRAMMING FOR NON-PROGRAMMERSPHPRubyCC++PythonPerl .NETJavaObjective CVisual BasicASPRubyLispLogoSmalltalkABCADAActionScriptCluCOBOLR
  • PROGRAMMING FOR NON-PROGRAMMERSPHPRubyPythonJava.NETC++Objective C
  • PROGRAMMING FOR NON-PROGRAMMERSMachine CodeLOW LEVELHIGH LEVELHIGH TO LOW LANGUAGESCPHP Ruby PythonJava .NETC++ Objective C
  • 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");});
  • PYTHONPHPPROGRAMMING FOR NON-PROGRAMMERSWEB PROGRAMMING LANGUAGESRUBYWikipediaFacebookTwitterHulu+GrouponYoutubeGoogleVimeo
  • PROGRAMMING FOR NON-PROGRAMMERSThen why choose... ?
  • PROGRAMMING FOR NON-PROGRAMMERS
  • PROGRAMMING FOR NON-PROGRAMMERS“REAL-TIME” IS MOST IMPORTANT‣ Node.js
  • PROGRAMMING FOR NON-PROGRAMMERS
  • PROGRAMMING FOR NON-PROGRAMMERSWhich Language for...?Mobile
  • PROGRAMMING FOR NON-PROGRAMMERSiPHONE, iPAD, MAC OS‣ Objective-C
  • PROGRAMMING FOR NON-PROGRAMMERSANDROID‣ java
  • PROGRAMMING FOR NON-PROGRAMMERSMOBILE DEVELOPMENT FRAMEWORKS: NATIVEAppcelerator/Titanium“cross-compiler”Phone Gap“native wrapper”
  • PROGRAMMING FOR NON-PROGRAMMERSCROSS COMPILE W/ APPCELERATORJavascript-ishObjective-CJava
  • PROGRAMMING FOR NON-PROGRAMMERSTHE WEBWEB SITESWEB APPSMOBILE WEBMOBILE WEB
  • PROGRAMMING FOR NON-PROGRAMMERSRESPONSIVE DESIGNDesktop BrowserSafari on iPhone
  • PROGRAMMING FOR NON-PROGRAMMERSPHPRubyPythonJavaObjective CWEBNative Apps
  • PROGRAMMING FOR NON-PROGRAMMERSPHP vs. Ruby
  • PROGRAMMING FOR NON-PROGRAMMERS2006RUBY2001PHP1995PHPRUBYtodayPHPRUBY
  • PYTHONPHPPROGRAMMING FOR NON-PROGRAMMERSWEB PROGRAMMING LANGUAGESRUBYWikipediaFacebookTwitterHulu+GrouponYoutubeGoogleVimeo
  • PROGRAMMING FOR NON-PROGRAMMERSAnd then you were all like...
  • PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT...PROTOTYPEJQUERYAJAX*RUBY ON RAILSBACKBONE.JSEXTJS*Ajax is a JavaScript related techniqueSASSDJANGO
  • Frameworks
  • TO THE CODE!
  • PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT...PROTOTYPEJQUERYRUBY ON RAILSBACKBONE.JSEXTJSDJANGOBLUEPRINTSASS
  • PROGRAMMING FOR NON-PROGRAMMERSFUNCTIONdefines a block of code*I’m giving you permissionto use this in the general senseFunctionsMethodsClasses**
  • Content Management Systems(CMS)
  • PROGRAMMING FOR NON-PROGRAMMERSCONTENT MANAGEMENT SYSTEMS (CMS)
  • PROGRAMMING FOR NON-PROGRAMMERSCONTENT MANAGEMENT SYSTEMS (CMS)Wordpress Expression Engine Custom?
  • PROGRAMMING FOR NON-PROGRAMMERSFUNCTIONdefines a block of code*I’m giving you permissionto use this in the general senseFunctionsMethodsClasses**
  • 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()
  • PROGRAMMING FOR NON-PROGRAMMERSAnd then you were all like...
  • PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT...PROTOTYPEJQUERYAJAX*RUBY ON RAILSBACKBONE.JSEXTJS*Ajax is a JavaScript related techniqueSASSDJANGO
  • PROGRAMMING FOR NON-PROGRAMMERSWHAT IS A TECH STACK?
  • 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...make the logo bigger?CSSHTML
  • PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...make that grey heading fadein?
  • PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU...make that grey heading fadein?JAVASCRIPTHTMLCSS
  • PROGRAMMING FOR NON-PROGRAMMERS4 CONCEPTS...that are the same in everyprogramming language
  • PROGRAMMING FOR NON-PROGRAMMERS1. PRINT
  • PROGRAMMING FOR NON-PROGRAMMERS2. VARIABLES
  • PROGRAMMING FOR NON-PROGRAMMERSPOP QUIZ!a = 1b = 2c = a + bc = ?
  • PROGRAMMING FOR NON-PROGRAMMERSPOP QUIZ!a = 1b = 2c = a + bc = 3
  • PROGRAMMING FOR NON-PROGRAMMERS3. FUNCTIONS
  • PROGRAMMING FOR NON-PROGRAMMERS4. COMMENTS
  • PROGRAMMING FOR NON-PROGRAMMERSALL THIS STUFF GOES ON A SERVER