GA | Programming For Non-Programmers (Aug)

"Programming For Non-Programmers" is a 3h workshop for GeneralAssemb.ly that serves as a first contact to the world of programming and web development.

Transcript

1. PROGRAMMING FOR NON-PROGRAMMERS FER MARTIN VP Engineering, investOrbit.com WiFi – sc2014sc
2. ABOUT FER MARTIN
3. Programming for non-Programmers
4. WHAT IS PROGRAMMING? WHAT CAN YOU BUILD? WEB DEVELOPMENT WEB-SITE VS WEB-APP STAGES OF WEB DEVELOPMENT FRONTEND VS BACKEND DEVELOPMENT QUESTIONS AGENDA
5. Programming for non-Programmers BEFORE WE START…
6. Programming for non-Programmers
7. PROGRAMMING FOR NON-PROGRAMMERS Visit http://code.org
8. SO, WHAT IS PROGRAMMING? PROGRAMMING FOR NON-PROGRAMMERS
9. Programming for non-Programmers Solving Problems WHAT IS PROGRAMMING? with computers
10. Programming for non-Programmers WHAT TYPES OF PROBLEMS?
11. Programming for non-Programmers WHAT TYPES OF PROBLEMS?
12. Programming for non-Programmers WHAT TYPES OF PROBLEMS?
13. Programming for non-Programmers LET’S GET STARTED
14. Programming for non-Programmers Solving Problems with computers using a Programming Language WHAT IS PROGRAMMING?
15. Programming for non-Programmers A COMMON LANGUAGE Humans created Programming Languages to tell computers what to do
16. Programming for non-Programmers PROGRAMMING LANGUAGE GENERATIONS 1GL 2GL 3GL 4GL 5GL Machine Language Assembly Language General Purpose Languages Natural Language Neural Networks http://en.wikipedia.org/wiki/Programming_language_generations
17. Programming for non-Programmers PROGRAMMING LANGUAGES | THE FUTURE
18. Programming for non-Programmers “HELLO WORLD” EXAMPLES | LEVEL: 1 WIKIPEDIA.ORG/WIKI/LIST_OF_HELLO_WORLD_PROGRAM_EXAMPLES
19. Programming for non-Programmers “HELLO WORLD” EXAMPLES | LEVEL: 2 WIKIPEDIA.ORG/WIKI/LIST_OF_HELLO_WORLD_PROGRAM_EXAMPLES
20. Programming for non-Programmers “HELLO WORLD” EXAMPLES | LEVEL: NINJA WIKIPEDIA.ORG/WIKI/LIST_OF_HELLO_WORLD_PROGRAM_EXAMPLES
21. Programming for non-Programmers “REAL WORLD” PROGRAMMING EXAMPLE
22. Programming for non-Programmers PROGRAMMING LANGUAGE RANKING
23. Programming for non-Programmers WHERE DID EVERYTHING START? Charles Babagge (1791-1871) Father of the computer | Analytical Engine
24. Programming for non-Programmers Ada Lovelace (1815-1852) Mother of Programming - Daughter of Lord Byron - Not just number crunching: General Computing! - “The Enchantress of Numbers” WHERE DID EVERYTHING START?
25. Programming for non-Programmers PROGRAMMING LANGUAGE HISTORY http://cdn.oreillystatic.com/news/graphics/prog_lang_poster.pdf 1995 1996 1998 1999 2000 2001 1997
26. Programming for non-Programmers PROGRAMMING LANGUAGE HISTORY 1954 1960 1965 1970 1975 1980 1985 1985 1990 2000 2001 2002 2003 2004
27. Programming for non-Programmers PROGRAMMING HISTORY – 70S
28. Programming for non-Programmers PROGRAMMING HISTORY – 80S
29. Programming for non-Programmers PROGRAMMING HISTORY – 90S Desktop Applications First Websites
30. Programming for non-Programmers PROGRAMMING NOW | MOBILE APPS
31. Programming for non-Programmers PROGRAMMING NOW | WEARABLES MetaWear | Production Ready Wearables in 30 minutes or less
32. Programming for non-Programmers PROGRAMMING NOW | TVS
33. Programming for non-Programmers TOWARDS A WEB-BASED WORLD
34. Programming for non-Programmers TOWARDS A WEB-BASED WORLD
35. Programming for non-Programmers RESPONSIVE DESIGN AUTOMAGICALLY ADJUST TO DIFFERENT SCREENS
36. Programming for non-Programmers RESPONSIVE DESIGN | MOBILE FIRST!
37. Programming for non-Programmers RESPONSIVE DESIGN
38. Programming for non-Programmers RESPONSIVE DESIGN RESPONSIVE INSPECTOR | CHROME EXTENSION https://chrome.google.com/webstore/detail/responsive-inspector/memcdolmmnmnleeiodllgpibdjlkbpim?hl=en
39. WHAT IS WEB DEVELOPMENT PROGRAMMING FOR NON-PROGRAMMERS
40. Programming for non-Programmers WHAT IS WEB DEVELOPMENT?
41. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? | UNDER THE HOOD
42. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? WEB TECHNOLOGIES OVERVIEW HTML Content Structure, Links Style Sheets Presentation JavaScript Interactivity
43. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? WEB TECHNOLOGIES OVERVIEW HTML Content Structure, Links Style Sheets Presentation JavaScript Interactivity
44. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? HTML: HYPER-TEXT* MARKUP* LANGUAGE Standard defined by World Web Consortium (W3C) that allow us to create web pages in a language that all browsers understand *Hyper-Text - you can cross reference pages *Markup – content is annotated
45. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? HTML: ROOT ELEMENT Every single HTML web page has a top element that describes the type of document it is. <html>                   </html>  
46. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? HTML: HEAD & BODY ELEMENTS <html>                   </html>   <head>   Gives the browser more info on your page   </head>   <body>   Here is where the actual content goes   </body>  
47. Programming for non-Programmers HTML | COMMON TAGS HTML  TAG   Defini6on   Example   <h1>..<h6>   Headers  for  their  sec3ons   <h1>  Programming  is  easy  </h1>   <p>   Parragraph   <p>  This  is  a  rather  short  parragraph….</P   <strong>   Emphasize  text  -­‐  bold   Which  <strong>word</strong>  is  bold?   <em>   Emphasize  text  -­‐  italic   Which  word  <i>is</i>  is  italic?   <ul>  /  <li>   Unnumbered  Lists   <ul>        <li>  first  element  </li>        <li>  second  element  </li>   </ul>   <ol>  /  <li>   Numbered  Lists   <ol>        <li>  first  element  </li>        <li>  second  element  </li>   </ol>   <hr>   Horizontal  Rule   <hr>   <a>   Link   <a  href=hMp://www.generalAssemb.ly>  GA  </a>  
48. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? HTML: LET’S PLAY http://tinyurl.com/pfnp-html
49. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? HTML: BABY STEPS
50. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? HTML: BABY STEPS
51. Programming for non-Programmers HTML EXERCISE | 15 MINUTES HTML  TAG   Example   <h1>..<h6>   <h1>  Programming  is  easy  </h1>     <p>   <p>  This  is  a  rather  short  paragraph….</p>   <strong>   Which  <strong>word</strong>  is  bold?   <em>   Which  word  <em>happens  to  be</em>  italic  now?   <ul>  /  <li>   <ul>        <li>  Element  </li>        <li>  Element  </li>   </ul>   <ol>  /  <li>   <ol>        <li>  first  element  </li>        <li>  second  element  </li>   </ol>   <hr>   Horizontal  Rule   <a>   <a  href=hHp://www.generalAssemb.ly>  GA  </a>   YOUR TURN!
52. Programming for non-Programmers HTML EXERCISE | SOLUTION
53. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? HTML: IN THE REAL WORLD…
54. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? WEB TECHNOLOGIES OVERVIEW HTML Content Structure, Links Style Sheets Presentation JavaScript Interactivity
55. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: CASCADING* STYLE* SHEETS Standard defined by World Web Consortium (W3C) that allow us to style web pages in a language that all browsers understand *Style: fonts, colors, spacing, animations, etc *Cascading: styles can inherit from each other
56. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: CASCADING STYLE SHEETS Style should be separate from content - Help avoid duplication - Allows Reusability - Homogeneous look & feel - Make a site-wide changes in one place - Easier to maintain
57. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: MIND BLOWING EXAMPLE <strong> Important text! </strong> strong { color: red; } HTML   CSS  
58. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: ELEMENTS strong { color: red; } CSS  Example   1. Selector 2. Declaration 2.1 Property name 2.2 Property value CSS  Elements  
59. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: SELECTORS CSS1 CSS1   Example   What  elements  apply  to?   .class   .intro   All  elements  with  class=“intro”   #id   #firstName   All  elements  with  id=“firstName”   *   *   All  Elements   element   p   All  <p>  Elements   element  >   p  >  ul   All  <ul>  elements  with  parent  <p>   aHribute  
60. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: SELECTOR BY ELEMENT #ID <h1 id=“welcome”> Welcome Title </h1> #welcome { border-left: solid 1px green; } HTML   CSS  
61. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: SELECTOR BY ELEMENT .CLASS <p> Welcome Title </p> <p class=“highlight”> Welcome Title </p> .highlight { background-color: green; font-size: 200%; } HTML   CSS  
62. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS SELECTORS: LET’S PLAY | 5 MINUTES http://tinyurl.com/pfnp-css-selectors
63. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: DECLARATION strong { color: red; } CSS  Example   1. Selector 2. Declaration 2.1 Property name 2.2 Property value CSS  Elements  
64. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: PROPERTIES strong { color: red; } CSS  Example   1. Selector 2. Declaration 2.1 Property name 2.2 Property value CSS  Elements  
65. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: PROPERTY GROUPS Color Background and Borders Basic Box Flexible Box Text Text Decoration Fonts Writing Modes Table Lists and Counters Animation Transform Transition Basic User Interface Multi-column Paged Media Generated Content Filter Effects Image/Replaced Content Masking Speech Marquee
66. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: PROPERTY GROUPS Color Background and Borders Basic Box Flexible Box Text Text Decoration Fonts Writing Modes Table Lists and Counters Animation Transform Transition Basic User Interface Multi-column Paged Media Generated Content Filter Effects Image/Replaced Content Masking Speech Marquee
67. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: BACKGROUND
68. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: BORDERS
69. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: PROPERTIES strong { color: red; } CSS  Example   1. Selector 2. Declaration 2.1 Property name 2.2 Property value CSS  Elements  
70. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: EMBEDDING CSS IN YOUR HTML <h1 style=“background-color: red;”> Welcome Title </h1> INLINE  
71. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: EMBEDDING CSS IN YOUR HTML INTERNAL   <head> <style> h1 { margin-left: 2px; } </style> </head> <body> <h1>Welcome Title </h1> </body>
72. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS: EMBEDDING CSS IN YOUR HTML EXTERNAL   body { background-color: blue; } h1 { margin-left: 2px; } .intro { font-weight: bold; } <head> <link rel=“stylesheet” type=“text/css” href=“styles.css”> </head> <body> <h1> Welcome Title </h1> <p class=“intro”> Parragraph of content </p> </body> styles.css home.html
73. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? HTML: LET’S PLAY | 15 MINUTES http://tinyurl.com/pfnp-css
74. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS FRAMEWORKS | ZURB FOUNDATION
75. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS FRAMEWORKS | ZURB FOUNDATION
76. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS FRAMEWORKS | TWITTER BOOTSTRAP
77. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? CSS FRAMEWORKS | TWITTER BOOTSTRAP
78. Programming for non-Programmers WHAT IS WEB DEVELOPMENT? WEB TECHNOLOGIES OVERVIEW HTML Content Structure, Links Style Sheets Presentation JavaScript Interactivity
79. WEBSITE | WEBAPP PROGRAMMING FOR NON-PROGRAMMERS
80. Programming for non-Programmers WELCOME TO THE WORLD OF DYNAMIC WEBSITES WEBSITE VS WEBAPP
81. Programming for non-Programmers WELCOME TO THE WORLD OF DYNAMIC WEBSITES WEBSITE VS WEBAPP
82. Programming for non-Programmers JAVASCRIPT WEBSITE VS WEBAPP Full programming language Dynamic Functional Object Oriented Language Features | client-side Interact with the user Control the browser Communicate Asynchronously Alter the document it’s displayed
83. Programming for non-Programmers JAVASCRIPT WEBSITE VS WEBAPP Can also run in the server ~ Node.js Features | Server-Side Fast, scalable network applications Event-driven Non-blocking I/O Data-intensive real-time applications
84. Programming for non-Programmers JAVASCRIPT | RECOMMENDED READ WEBSITE VS WEBAPP
85. Programming for non-Programmers WEBSITE VS WEBAPP
86. Programming for non-Programmers JAVASCRIPT | JQUERY WEBSITE VS WEBAPP Basic use: Adds dynamic behaviour to websites Animations & Effects | fade in, sliding, … Events Handling| keyboard, mouse click, … DOM Manipulation | change website on demand AJAX | send & receive info in the background $(‘.MESSAGE-BOX’).HIDE(); $(‘#LOADING’).FADEIN();
87. Programming for non-Programmers WEBSITE VS WEBAPP
88. Programming for non-Programmers JAVASCRIPT | JQUERY-UI WEBSITE VS WEBAPP Full programming language Basic use: Adds components to websites Interactions | draggable, droppable, resizeable, sortable,… Widgets| accordion, datepicker, sliders, tabs,… Effects| change website on demand
89. Programming for non-Programmers WEBSITE VS WEBAPP
90. Programming for non-Programmers JQUERY-UI EXAMPLES WEBSITE VS WEBAPP
91. Programming for non-Programmers A set of new JavaScript APIs to interact with the new HTML5 tags : ‣ Storing persistent data in client-side ‣ Offline cache ‣ Getting Geo-Location ‣ Video and Audio playback controls Cross-platform HTML5 WEBSITE VS WEBAPP
92. Programming for non-Programmers SERVER-SIDE FRAMEWORKS - MVC WEBSITE VS WEBAPP
93. Programming for non-Programmers SERVER-SIDE FRAMEWORKS WEBSITE VS WEBAPP Ruby   JavaScript   Python  
94. STAGES OF WEB DEVELOPMENT PROGRAMMING FOR NON-PROGRAMMERS
95. Programming for non-Programmers “THE EXPERT” https://www.youtube.com/watch?v=BKorP55Aqvg
96. Programming for non-Programmers STAGES OF WEB DEVELOPMENT TRADITIONAL DEVELOPMENT METHOD
97. Programming for non-Programmers STAGES OF WEB DEVELOPMENT AGILE
98. Programming for non-Programmers STAGES OF WEB DEVELOPMENT SCRUM
99. PROGRAMMING FOR NON-PROGRAMMERS FRONTEND | BACKEND
100. Programming for non-Programmers FRONTENT FRONTEND VS BACKED Frontend is what you can see and interact with a browser. Usually Refers to: - HTML - CSS - Client-side Javascript
101. Programming for non-Programmers BACKEND FRONTEND VS BACKED Backend is what happens in the server Includes stuff like: - Server-side logic * rails, django, node.js, - Database management - Caching
102. QUESTIONS & ANSWERS PROGRAMMING FOR NON-PROGRAMMERS
103. THANK YOU PROGRAMMING FOR NON-PROGRAMMERS
104. PROGRAMMING FOR NON-PROGRAMMERS FER MARTIN VP Engineering, investOrbit.com