Your SlideShare is downloading. ×
0
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Programming For Non-Programmers @SXSW 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Programming For Non-Programmers @SXSW 2013

6,919

Published on

Highlights from my talk at SXSW 2013.

Highlights from my talk at SXSW 2013.

Published in: Technology
4 Comments
69 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,919
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
36
Comments
4
Likes
69
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. 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

×