Programming For Non-Programmers: 2013
Upcoming SlideShare
Loading in...5
×
 

Programming For Non-Programmers: 2013

on

  • 6,494 views

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

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

Statistics

Views

Total Views
6,494
Views on SlideShare
5,994
Embed Views
500

Actions

Likes
16
Downloads
283
Comments
0

10 Embeds 500

http://tracks.roojoom.com 311
http://www.hewitt-times.org 129
http://itstorch.dropmark.com 15
http://vpc1.roojoom.com 14
https://twitter.com 12
http://tracks.vpc1.roojoom.com 7
http://www.scoop.it 5
http://dabr.eu 4
http://localhost 2
http://tracks.localhost 1
More...

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: 2013 Programming For Non-Programmers: 2013 Presentation Transcript

  • PROGRAMMING FORNON-PROGRAMMERSChris Castiglione@castig | pfnp.me
  • THE QUESTIONHow do I communicate an ideafrom my head… to a computer?
  • PROGRAMMING FOR NON-PROGRAMMERS 1. WEB DEV PROCESS 2. WHICH LANGUAGE? 3. CODE!
  • PROGRAMMING FOR NON-PROGRAMMERS 1. WEB DEV PROCESS 2. WHICH LANGUAGE? 3. CODE!
  • PROGRAMMING FOR NON-PROGRAMMERS 1. WEB DEV PROCESS 2. WHICH LANGUAGE? 3. CODE!
  • What is Programming?(...and why do I care?)
  • 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)
  • WHY ARE WE HERE?‣ to learn to think like a developer‣ to understand the tools (aka. Programming Languages)‣ and to understand the constraints
  • I. WEB DEV PROCESSUnderstand the Problem
  • Vocabulary
  • 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
  • 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
  • PROGRAMMING FOR NON-PROGRAMMERS The worst thing is to build something that no body wants.
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design Development (UX) Architecture (IA)
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE Information Visual Design Development Architecture (IA)User-Experience (UX)
  • 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?
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]UX IDEAL EXPERIENCE BUSINESS NEEDS BEST USER PRACTICES NEEDS
  • PROGRAMMING FOR NON-PROGRAMMERS “I want all of the features!”
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]CASE STUDY: IDEAS, FEATURES, GOALS
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] Who is our user?
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]CASE STUDY: USER RESEARCH
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]CASE STUDY PERSONASMaryDickinson, North Dakota John Long Island, New York
  • 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.
  • 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?
  • Information Architecture
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design Development (UX) Architecture (IA)
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Visual Design Development (UX) Information Architecture (IA)
  • 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
  • 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
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]BRAINSTORMING
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]BRAINSTORMING
  • [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]TWITTER(PROTOTYPE)
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]LOW FIDELITY MOCKUPS
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]HIGH FIDELITY MOCKUPS
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]SMALL SITE
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]LARGE SITE
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FUNCTIONAL
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FLOW DIAGRAM
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FLOW DIAGRAM
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]iPHONE WIREFRAMES
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FOURSQUARE
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]FOURSQUARE
  • 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.
  • 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.
  • DESIGN. IS ABOUT WORDS. TREAT TEXT AS USER-INTERFACE
  • Visual Design
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design Development (UX) Architecture (IA)
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Development (UX) Architecture (IA) Visual Design
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]VISUAL DESIGNWireframes become design comps 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
  • PROGRAMMING FOR NON-PROGRAMMERS source: www.risk-show.com[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]STYLE GUIDE Style Tile Final 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
  • Development
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design Development (UX) Architecture (IA)
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design (UX) Architecture (IA) Development
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real text 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
  • 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
  • PROGRAMMING FOR NON-PROGRAMMERSBACK-ENDDEVELOPMENT (noun)the server-side programming thatprocesses the “business logic”, database,web services and other utilities
  • PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken into two separate responsibilities: 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
  • 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
  • PROGRAMMING FOR NON-PROGRAMMERSZAPPOS.COM process.php BACK-ENDFRONT-END homepage cart registration
  • 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
  • PROGRAMMING FOR NON-PROGRAMMERSPOST-LAUNCH ROLES1.Growth Hacker2.SEO3.Analytics Expert4.Quality Assurance
  • PROGRAMMING FOR NON-PROGRAMMERS
  • PROGRAMMING FOR NON-PROGRAMMERS WATERFALL
  • PROGRAMMING FOR NON-PROGRAMMERS AGILE WATERFALL
  • II. WHICH LANGUAGE?Understand the Tools
  • 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
  • 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
  • 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
  • PROGRAMMING FOR NON-PROGRAMMERSHIGH TO LOW LANGUAGES HIGH LEVEL PHP Ruby Python Java .NET C++ Objective C C LOW LEVEL Assembly Language Machine Code
  • 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 
  • 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
  • PROGRAMMING FOR NON-PROGRAMMERSTHE MOTHER OF ALL LANGUAGES C
  • PROGRAMMING FOR NON-PROGRAMMERS THE WEB WEB SITES WEB APPS MOBILE WEB In a browser ‣ CHROME ‣ FIREFOX ‣ INTERNET ‣ SAFARI ‣ OPERA EXPLORER
  • PROGRAMMING FOR NON-PROGRAMMERSWHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:‣ Difficulty level
  • PROGRAMMING FOR NON-PROGRAMMERSWHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:‣ Difficulty level‣ Community
  • PROGRAMMING FOR NON-PROGRAMMERSWHAT TO LOOK FOR WHEN CHOOSING A LANGUAGE:‣ Difficulty level‣ Community‣ Development time to build an app
  • PROGRAMMING FOR NON-PROGRAMMERSWEB PROGRAMMING LANGUAGES PHP RUBY PYTHON Wikipedia Twitter Youtube Vimeo Hulu+ Google Facebook Groupon
  • PROGRAMMING FOR NON-PROGRAMMERS PHP vs. Ruby
  • PROGRAMMING FOR NON-PROGRAMMERS PHP RUBY EASIER TO STEEPER GET LEARNING STARTED CURVE WITH
  • PROGRAMMING FOR NON-PROGRAMMERS 1995 PHP RUBY
  • PROGRAMMING FOR NON-PROGRAMMERS 1995 2001 PHP PHP RUBY
  • PROGRAMMING FOR NON-PROGRAMMERS 1995 2001 2006 PHP PHP RUBY RUBY
  • PROGRAMMING FOR NON-PROGRAMMERS 1995 2001 2006 today PHP PHP RUBY PHP RUBY RUBY
  • PROGRAMMING FOR NON-PROGRAMMERS THE WEB WEB SITES WEB APPS MOBILE WEB In a browser ‣ CHROME ‣ FIREFOX ‣ INTERNET ‣ SAFARI ‣ OPERA EXPLORER
  • 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
  • PROGRAMMING FOR NON-PROGRAMMERS RUBY PHP WEB APP WEB SITE
  • PROGRAMMING FOR NON-PROGRAMMERS Pop Quiz: Review!
  • PROGRAMMING FOR NON-PROGRAMMERSTIMELINE:THE BLACK EYED PEAS• Main task: blog• Agency project• Large budget• 6 page content site WEB SITE
  • PROGRAMMING FOR NON-PROGRAMMERSTimeline: The Black Eyed Peas 30 HOURS UX 40 HOURS IA 60 HOURS DESIGN 120+ HOURS DEVELOPMENT
  • PROGRAMMING FOR NON-PROGRAMMERSTIMELINE:THE STORY STUDIO• Main task: classes• Consulting• Low budget• 4 page navigation site WEB SITE
  • PROGRAMMING FOR NON-PROGRAMMERSTimeline: The Story Studio 8-12 HOURS UX IA 10 HOURS DESIGN 35 HOURS DEVELOPMENT
  • PROGRAMMING FOR NON-PROGRAMMERSTIMELINE:DERBY JACKPOT• Main task: an online horsegambling platform• Start-up Consulting• Decent-sized budget• High risk: APIs WEB APP
  • PROGRAMMING FOR NON-PROGRAMMERSTimeline: Derby Jackpot 45 HOURS UX 45 HOURS IA 120 HOURS DESIGN 500+ HOURS DEVELOPMENT
  • PROGRAMMING FOR NON-PROGRAMMERSTIMELINE:GENERALASSEMB.LYMain tasks: • classes • about us • video • social network • custom payment gateway WEB APP
  • PROGRAMMING FOR NON-PROGRAMMERSTIMELINE: WEB SITEGENERALASSEMB.LYMain tasks: • classes • about us • video • social network • custom payment gateway
  • PROGRAMMING FOR NON-PROGRAMMERS Which Language for...? Native Apps
  • PROGRAMMING FOR NON-PROGRAMMERS NATIVE APPS Directly on your Operating System ‣ IPHONE ‣ OSX ‣ ANDROID ‣ WINDOWS
  • PROGRAMMING FOR NON-PROGRAMMERSiPHONE, iPAD, MAC OS‣ Objective-C
  • PROGRAMMING FOR NON-PROGRAMMERSANDROID‣ java
  • PROGRAMMING FOR NON-PROGRAMMERSMOBILE DEVELOPMENT FRAMEWORKS: NATIVE Appcelerator/Titanium Phone Gap “cross-compiler” “native wrapper”
  • PROGRAMMING FOR NON-PROGRAMMERSCROSS COMPILE W/ APPCELERATOR Java Objective-C Javascript-ish
  • PROGRAMMING FOR NON-PROGRAMMERSMOBILE WEB / RESPONSIVE DESIGN Safari on iPhone Desktop Browser
  • PROGRAMMING FOR NON-PROGRAMMERSMOBILE WEB: FRAMEWORKS Sencha jQuery Mobile Javascript-ish jQuery-ish
  • 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-PROGRAMMERSCMS DISTRIBUTION IN TOP MILLION SITES
  • PROGRAMMING FOR NON-PROGRAMMERS Which languages are left?
  • PROGRAMMING FOR NON-PROGRAMMERSANALYTICS, QUICK PROCESSES‣ C++
  • PROGRAMMING FOR NON-PROGRAMMERS“REAL-TIME” IS MOST IMPORTANT‣ Node.js
  • PROGRAMMING FOR NON-PROGRAMMERS
  • PROGRAMMING FOR NON-PROGRAMMERS And then you were all like...
  • PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT... DJANGO SASS EXTJS JQUERY BACKBONE.JS AJAX* RUBY ON RAILS PROTOTYPE *Ajax is a JavaScript related technique
  • Frameworks
  • LET’S CODE SOME
  • and come back to frameworks
  • PROGRAMMING FOR NON-PROGRAMMERSQ: WELL WHAT ABOUT... DJANGO EXTJS JQUERY BLUEPRINT BACKBONE.JS RUBY ON RAILS PROTOTYPE
  • 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
  • PROGRAMMING FOR NON-PROGRAMMERSFRAMEWORK: Login Example login() The “perfect registration form”
  • 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
  • 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
  • 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 }
  • Frameworks
  • PROGRAMMING FOR NON-PROGRAMMERS FRAMEWORKS a collection of pre-baked code ...mostly “functions”, and other great stuff
  • PROGRAMMING FOR NON-PROGRAMMERSFRAMEWORKS DJANGO TWITTER EXTJS BOOTSTRAP JQUERY BLUEPRINT BACKBONE.JS RUBY ON RAILS PROTOTYPE
  • PROGRAMMING FOR NON-PROGRAMMERSWHAT IS TWITTER BOOTSTRAP? http://twitter.github.com/
  • WHAT IS TWITTER BOOTSTRAP?A: Pre-baked... CSS JS
  • Frameworks
  • PROGRAMMING FOR NON-PROGRAMMERSA: JAVASCRIPT FRAMEWORKS & HELPERS EXTJS JQUERY AJAX* BACKBONE.JS COFFEE SCRIPT PROTOTYPE *Ajax is a JavaScript related technique
  • PROGRAMMING FOR NON-PROGRAMMERSA: CSS FRAMEWORKS & HELPERS SASS 960 GRID SYSTEM LESS COMPASS BLUEPRINT
  • Tech Stack
  • PROGRAMMING FOR NON-PROGRAMMERSWHAT IS A TECH STACK?
  • 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
  • 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... HTML make the logo bigger? CSS
  • PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... make that grey heading fadein?
  • PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... HTML make that grey heading fadein? CSS JAVASCRIPT
  • PROGRAMMING FOR NON-PROGRAMMERS7 CONCEPTS...that are the same in everyprogramming language
  • PROGRAMMING FOR NON-PROGRAMMERS1. EVENTS
  • PROGRAMMING FOR NON-PROGRAMMERS2. COMMENTS
  • PROGRAMMING FOR NON-PROGRAMMERS3. PRINT
  • PROGRAMMING FOR NON-PROGRAMMERS4. VARIABLES
  • PROGRAMMING FOR NON-PROGRAMMERSPOP QUIZ! a=1 b=2 c=a+b c=?
  • PROGRAMMING FOR NON-PROGRAMMERSPOP QUIZ! a=1 b=2 c=a+b c=3
  • PROGRAMMING FOR NON-PROGRAMMERS5. DATATYPES
  • PROGRAMMING FOR NON-PROGRAMMERS6. CONDITIONALS
  • PROGRAMMING FOR NON-PROGRAMMERS7. FUNCTIONS
  • PROGRAMMING FOR NON-PROGRAMMERSPROGRAMMING CONCEPTS1. Events 6. Conditionals2. Comments 7. Functions3. Print4. Variables5. Datatypes
  • PROGRAMMING FOR NON-PROGRAMMERS JAVASCRIPT document.write(“Good morning”);
  • PROGRAMMING FOR NON-PROGRAMMERS JAVASCRIPT PHP document.write(“Good morning”); echo “Good morning”;
  • PROGRAMMING FOR NON-PROGRAMMERS JAVASCRIPT PHP document.write(“Good morning”); echo “Good morning”; RUBY print “Good morning”
  • PROGRAMMING FOR NON-PROGRAMMERS JAVASCRIPT PHP document.write(“Good morning”); echo “Good morning”; RUBY PERL print “Good morning” say “Good morning”
  • 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
  • FRONT-ENDHTML, CSS, JS
  • PROGRAMMING FOR NON-PROGRAMMERSWHAT IS HTML5?
  • BACK-ENDPHP & SQL
  • 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
  • PROGRAMMING FOR NON-PROGRAMMERS File Under: “not a programming language”
  • PROGRAMMING FOR NON-PROGRAMMERSOPEN SOURCE
  • PROGRAMMING FOR NON-PROGRAMMERSFTP
  • PROGRAMMING FOR NON-PROGRAMMERSGIT
  • PROGRAMMING FOR NON-PROGRAMMERSGIT‣ Revisions
  • PROGRAMMING FOR NON-PROGRAMMERSGIT‣ Revisions‣ Collaboration
  • 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”