• Save
Programming For Non-Programmers @SXSW 2013
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Programming For Non-Programmers @SXSW 2013

on

  • 7,512 views

Highlights from my talk at SXSW 2013.

Highlights from my talk at SXSW 2013.

Statistics

Views

Total Views
7,512
Views on SlideShare
7,243
Embed Views
269

Actions

Likes
69
Downloads
36
Comments
4

10 Embeds 269

http://brokenguru.tumblr.com 86
https://twitter.com 81
http://www.perpettersson.me 36
http://lanyrd.com 28
http://k-squaredcreative.com 26
http://pinterest.com 5
http://feeds.feedburner.com 3
http://127.0.0.1 2
http://www.google.com 1
http://tweetedtimes.com 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 @SXSW 2013 Presentation Transcript

  • 1. PROGRAMMING FORNON-PROGRAMMERS#SXSW Chris Castiglione @castig | pfnp.me
  • 2. MY TWITTER@castig
  • 3. RESOURCESpfnp.me/sxsw
  • 4. THE QUESTIONHow do I communicate an ideafrom my head… to a computer?
  • 5. PROGRAMMING FOR NON-PROGRAMMERSHTMLCSSJS
  • 6. PROGRAMMING FOR NON-PROGRAMMERSHTML -structureCSS - styleJS - behavior
  • 7. What is Programming?(...and why do I care?)
  • 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. WHY ARE WE HERE?‣ to learn to think like a developer‣ to understand the tools (aka. Programming Languages)‣ and to understand the constraints
  • 19. PROGRAMMING FOR NON-PROGRAMMERS
  • 20. PROGRAMMING FOR NON-PROGRAMMERS “If we don’t learn to program, we risk being programmed ourselves... Program or be programmed!” -Douglas Rushkoff “Program or be Programmed”
  • 21. PROGRAMMING FOR NON-PROGRAMMERS “If we don’t learn to plumb, we risk being plumbed ourselves... Plumb or be plumbed!” -Jeff Atwood codinghorror.com
  • 22. Vocabulary
  • 23. 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
  • 24. Web Master Web Developer Web Designer Front-end Back-end User Experience Visual DesignerDatabase Expert HTML5 Animation User-Interface Information Architecture SEO Expert Usability Security Testing Growth Hacker
  • 25. PROGRAMMING FOR NON-PROGRAMMERS User-Experience Developer Designer
  • 26. PROGRAMMING FOR NON-PROGRAMMERS User-Experience Developer Designer
  • 27. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design Development (UX) Architecture (IA)
  • 28. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]A TYPICAL WEB DEVELOPMENT CYCLE User-Experience Information Visual Design (UX) Architecture (IA) Development
  • 29. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTComps become graphics & real text 29
  • 30. 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 30
  • 31. 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
  • 32. PROGRAMMING FOR NON-PROGRAMMERSBACK-ENDDEVELOPMENT (noun)the server-side programming thatprocesses the “business logic”, database,web services and other utilities
  • 33. PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]DEVELOPMENTThe development process can be broken into two separate responsibilities: 33
  • 34. 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 34
  • 35. 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 , 35
  • 36. PROGRAMMING FOR NON-PROGRAMMERSZAPPOS.COM process.php BACK-ENDFRONT-END homepage cart registration
  • 37. CODE!Use the Tools
  • 38. PROGRAMMING FOR NON-PROGRAMMERSHTML -structureCSS - styleJS - behavior
  • 39. PROGRAMMING FOR NON-PROGRAMMERSFRAMEWORKS DJANGO TWITTER EXTJS BOOTSTRAP BLUEPRINT JQUERY Coffee Script Ember.js SASS AJAX PROTOTYPE
  • 40. PROGRAMMING FOR NON-PROGRAMMERSWHAT IS HTML5?
  • 41. WHAT IS MICROSOFT WORD 2011? 1995 2011
  • 42. 1991<HTML>
  • 43. 1991 <HTML>Tim Berners-Lee
  • 44. Tim Berners-Lee
  • 45. <blink>
  • 46. <blink> </blink>
  • 47. <blink> Buy Me! </blink>
  • 48. 2008
  • 49. PROGRAMMING FOR NON-PROGRAMMERSHTML -structureCSS - styleJS - behavior
  • 50. PROGRAMMING FOR NON-PROGRAMMERSHTML (noun)CSS (adjective)JS (verb)
  • 51. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... make the logo bigger?
  • 52. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... HTML make the logo bigger? CSS
  • 53. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... make that grey heading fadein?
  • 54. PROGRAMMING FOR NON-PROGRAMMERSHEY CHRIS, CAN YOU... HTML make that grey heading fadein? CSS JAVASCRIPT
  • 55. PFNP.ME Twitterhttp://www.pfnp.me @castig