Programming For Non-Programmers (AMEX Remix Edition)
1 like1,718 views
This document provides an overview of programming for non-programmers. It discusses front-end and back-end development, popular programming languages for different purposes like the web, mobile, and native apps. It also covers frameworks, functions, variables, comments and using programming tools like HTML, CSS, and JavaScript. The goal is to help non-programmers understand how to communicate ideas to a computer through programming.
![PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
VISUAL DESIGN
Wireframes become design comps
25](https://image.slidesharecdn.com/pfnp-final-slidedeck-amex-may-2013-130601074343-phpapp02/85/Programming-For-Non-Programmers-AMEX-Remix-Edition-25-320.jpg)
![PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
VISUAL DESIGN
Each wireframe template becomes a comp template
26
Homepage BlogListen
source: www.risk-show.com](https://image.slidesharecdn.com/pfnp-final-slidedeck-amex-may-2013-130601074343-phpapp02/85/Programming-For-Non-Programmers-AMEX-Remix-Edition-26-320.jpg)
![PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
STYLE GUIDE
27
Style Tile
Final
source: www.risk-show.com](https://image.slidesharecdn.com/pfnp-final-slidedeck-amex-may-2013-130601074343-phpapp02/85/Programming-For-Non-Programmers-AMEX-Remix-Edition-27-320.jpg)
![PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENT
Comps become graphics & real text
32](https://image.slidesharecdn.com/pfnp-final-slidedeck-amex-may-2013-130601074343-phpapp02/85/Programming-For-Non-Programmers-AMEX-Remix-Edition-32-320.jpg)
![PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENT
Comps become graphics & real text
mailer.png
general-assembly-logo.png
social-media.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
33](https://image.slidesharecdn.com/pfnp-final-slidedeck-amex-may-2013-130601074343-phpapp02/85/Programming-For-Non-Programmers-AMEX-Remix-Edition-33-320.jpg)
![PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENT
34
The development process can be broken into two separate responsibilities:](https://image.slidesharecdn.com/pfnp-final-slidedeck-amex-may-2013-130601074343-phpapp02/85/Programming-For-Non-Programmers-AMEX-Remix-Edition-34-320.jpg)
![PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
FRONT-END WEB DEVELOPMENT
1.Client Side
2.How things look to the user
3.Involves: Images, content, structure
4.HTML, CSS, JavaScript
DEVELOPMENT
35
The development process can be broken into two separate responsibilities:](https://image.slidesharecdn.com/pfnp-final-slidedeck-amex-may-2013-130601074343-phpapp02/85/Programming-For-Non-Programmers-AMEX-Remix-Edition-35-320.jpg)
![PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
FRONT-END WEB DEVELOPMENT
1.Client Side
2.How things look to the user
3.Involves: Images, content, structure
4.HTML, CSS, JavaScript
DEVELOPMENT
The development process can be broken into two separate responsibilities:
BACK-END WEB DEVELOPMENT
1.Server Side
2.How things works
3.Involves: “business logic” and data
4.Ruby, PHP, C++, Java, etc
36](https://image.slidesharecdn.com/pfnp-final-slidedeck-amex-may-2013-130601074343-phpapp02/85/Programming-For-Non-Programmers-AMEX-Remix-Edition-36-320.jpg)
Programming For Non-Programmers (AMEX Remix Edition)
- 1. Chris Castiglione @castig | pfnp.me PROGRAMMING FOR NON-PROGRAMMERS(AMEX REMIX EDITION)
- 2. THE QUESTION How do I communicate an idea from my head… to a computer?
- 3. PROGRAMMING FOR NON-PROGRAMMERS 1. FRONT END VS. BACK END 2. WHICH LANGUAGE? 3. CODE! 4. APIS
- 4. PROGRAMMING FOR NON-PROGRAMMERS 1. FRONT END VS. BACK END 2. WHICH LANGUAGE? 3. CODE! 4. APIS
- 5. PROGRAMMING FOR NON-PROGRAMMERS 1. FRONT END VS. BACK END 2. WHICH LANGUAGE? 3. CODE! 4. APIS
- 6. PROGRAMMING FOR NON-PROGRAMMERS 1. FRONT END VS. BACK END 2. WHICH LANGUAGE? 3. CODE! 4. APIS
- 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-PROGRAMMERS is to build something that nobody wants. The worst thing
- 19. I. WEB DEV PROCESS Understand the Problem
- 20. Web Master Web Developer Web Designer Front-end Back-end Visual DesignerUser Experience User-Interface Information ArchitectureDatabase Expert Growth HackerSecurity Testing HTML5 Animation SEO Expert Usability
- 21. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
- 22. Visual Design
- 23. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
- 24. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
- 25. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] VISUAL DESIGN Wireframes become design comps 25
- 26. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] VISUAL DESIGN Each wireframe template becomes a comp template 26 Homepage BlogListen source: www.risk-show.com
- 27. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] STYLE GUIDE 27 Style Tile Final source: www.risk-show.com
- 28. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
- 29. Development
- 30. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
- 31. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
- 32. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT Comps become graphics & real text 32
- 33. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT Comps become graphics & real text mailer.png general-assembly-logo.png social-media.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 33
- 34. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT 34 The development process can be broken into two separate responsibilities:
- 35. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] FRONT-END WEB DEVELOPMENT 1.Client Side 2.How things look to the user 3.Involves: Images, content, structure 4.HTML, CSS, JavaScript DEVELOPMENT 35 The development process can be broken into two separate responsibilities:
- 36. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] FRONT-END WEB DEVELOPMENT 1.Client Side 2.How things look to the user 3.Involves: Images, content, structure 4.HTML, CSS, JavaScript DEVELOPMENT The development process can be broken into two separate responsibilities: BACK-END WEB DEVELOPMENT 1.Server Side 2.How things works 3.Involves: “business logic” and data 4.Ruby, PHP, C++, Java, etc 36
- 37. ZAPPOS.COM PROGRAMMING FOR NON-PROGRAMMERS FRONT-END homepage cart registration BACK-END process.php
- 38. II. WHICH LANGUAGE? Understand the Tools
- 39. Vocabulary
- 40. PROGRAMMING FOR NON-PROGRAMMERS OTHER ‣ DECODE THE GENOME ‣ XBOX ‣ VIDEO GAMES ‣ OTHER HARDWARE ‣ ANYTHING ELSE I MAY HAVE MISSED NATIVE APPS Directly on your Operating System ‣ IPHONE ‣ ANDROID ‣ OSX ‣ WINDOWS In a browser ‣ CHROME ‣ SAFARI ‣ FIREFOX ‣ OPERA ‣ INTERNET EXPLORER THE WEB WEB SITES WEB APPS MOBILE WEB VOCABULARY
- 41. PROGRAMMING FOR NON-PROGRAMMERS PHP Ruby C C++Python Perl .NET Java Objective C Visual Basic ASP COBOL Ruby Lisp Logo Smalltalk ABC ADA ActionScript Clu R
- 42. PROGRAMMING FOR NON-PROGRAMMERS PHP Ruby C C++Python Perl .NET Java Objective C Visual Basic ASP Ruby Lisp Logo Smalltalk ABC ADA ActionScript Clu COBOL R
- 44. PROGRAMMING FOR NON-PROGRAMMERS Machine CodeLOW LEVEL HIGH LEVEL HIGH TO LOW LANGUAGES C PHP Ruby Python Java .NET C++ Objective C
- 45. PROGRAMMING FOR NON-PROGRAMMERS HIGH 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. PYTHONPHP PROGRAMMING FOR NON-PROGRAMMERS WEB PROGRAMMING LANGUAGES RUBY Wikipedia Facebook Twitter Hulu+ Groupon Youtube GoogleVimeo
- 47. PROGRAMMING FOR NON-PROGRAMMERS Then why choose... ?
- 49. PROGRAMMING FOR NON-PROGRAMMERS “REAL-TIME” IS MOST IMPORTANT ‣ Node.js
- 51. PROGRAMMING FOR NON-PROGRAMMERS Which Language for...? Mobile
- 52. PROGRAMMING FOR NON-PROGRAMMERS iPHONE, iPAD, MAC OS ‣ Objective-C
- 54. PROGRAMMING FOR NON-PROGRAMMERS MOBILE DEVELOPMENT FRAMEWORKS: NATIVE Appcelerator/Titanium “cross-compiler” Phone Gap “native wrapper”
- 55. PROGRAMMING FOR NON-PROGRAMMERS CROSS COMPILE W/ APPCELERATOR Javascript-ish Objective-C Java
- 56. PROGRAMMING FOR NON-PROGRAMMERS THE WEBWEB SITES WEB APPS MOBILE WEB MOBILE WEB
- 57. PROGRAMMING FOR NON-PROGRAMMERS RESPONSIVE DESIGN Desktop Browser Safari on iPhone
- 58. PROGRAMMING FOR NON-PROGRAMMERS PHP Ruby Python Java Objective C WEB Native Apps
- 59. PROGRAMMING FOR NON-PROGRAMMERS PHP vs. Ruby
- 61. PYTHONPHP PROGRAMMING FOR NON-PROGRAMMERS WEB PROGRAMMING LANGUAGES RUBY Wikipedia Facebook Twitter Hulu+ Groupon Youtube GoogleVimeo
- 62. PROGRAMMING FOR NON-PROGRAMMERS And then you were all like...
- 63. PROGRAMMING FOR NON-PROGRAMMERS Q: WELL WHAT ABOUT... PROTOTYPE JQUERY AJAX* RUBY ON RAILS BACKBONE.JS EXTJS *Ajax is a JavaScript related technique SASS DJANGO
- 64. Frameworks
- 65. TO THE CODE!
- 66. PROGRAMMING FOR NON-PROGRAMMERS Q: WELL WHAT ABOUT... PROTOTYPE JQUERY RUBY ON RAILS BACKBONE.JS EXTJS DJANGO BLUEPRINT SASS
- 67. PROGRAMMING FOR NON-PROGRAMMERS FUNCTION defines a block of code *I’m giving you permission to use this in the general sense Functions Methods Classes * *
- 69. PROGRAMMING FOR NON-PROGRAMMERS CONTENT MANAGEMENT SYSTEMS (CMS)
- 70. PROGRAMMING FOR NON-PROGRAMMERS CONTENT MANAGEMENT SYSTEMS (CMS) Wordpress Expression Engine Custom ?
- 71. PROGRAMMING FOR NON-PROGRAMMERS FUNCTION defines a block of code *I’m giving you permission to use this in the general sense Functions Methods Classes * *
- 72. PROGRAMMING FOR NON-PROGRAMMERS 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 walk()
- 73. PROGRAMMING FOR NON-PROGRAMMERS And then you were all like...
- 74. PROGRAMMING FOR NON-PROGRAMMERS Q: WELL WHAT ABOUT... PROTOTYPE JQUERY AJAX* RUBY ON RAILS BACKBONE.JS EXTJS *Ajax is a JavaScript related technique SASS DJANGO
- 75. PROGRAMMING FOR NON-PROGRAMMERS WHAT IS A TECH STACK?
- 76. III. CODE! Use the Tools
- 77. PROGRAMMING FOR NON-PROGRAMMERS HTML -structure CSS - style JS - behavior
- 78. PROGRAMMING FOR NON-PROGRAMMERS HTML (noun) CSS (adjective) JS (verb)
- 79. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make the logo bigger?
- 80. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make the logo bigger? CSS HTML
- 81. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make that grey heading fadein?
- 82. PROGRAMMING FOR NON-PROGRAMMERS HEY CHRIS, CAN YOU... make that grey heading fadein? JAVASCRIPT HTML CSS
- 83. PROGRAMMING FOR NON-PROGRAMMERS 4 CONCEPTS ...that are the same in every programming language
- 84. PROGRAMMING FOR NON-PROGRAMMERS 1. PRINT
- 85. PROGRAMMING FOR NON-PROGRAMMERS 2. VARIABLES
- 86. PROGRAMMING FOR NON-PROGRAMMERS POP QUIZ! a = 1 b = 2 c = a + b c = ?
- 87. PROGRAMMING FOR NON-PROGRAMMERS POP QUIZ! a = 1 b = 2 c = a + b c = 3
- 88. PROGRAMMING FOR NON-PROGRAMMERS 3. FUNCTIONS
- 89. PROGRAMMING FOR NON-PROGRAMMERS 4. COMMENTS
- 90. PROGRAMMING FOR NON-PROGRAMMERS ALL THIS STUFF GOES ON A SERVER