/index.html

https://github.com/Pointy/Web-Programming-Class-Fall-2011 · HTML · 236 lines · 183 code · 27 blank · 26 comment · 0 complexity · 08af751cc45c081c72761fd199ce7d34 MD5 · raw file 

    

  1. <!doctype html>
    2. 

  2. <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
    3. 

  3. <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
    4. 

  4. <!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
    5. 

  5. <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
    6. 

  6. <!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
    7. 

  7. <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    8. 

  8. <head>
    9. 

  9.   <meta charset="utf-8">
    10. 

  10. 

  11.   <!-- Use the .htaccess and remove these lines to avoid edge case issues.
    12. 

  12.        More info: h5bp.com/b/378 -->
    13. 

  13.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    14. 

  14. 

  15.   <title>Web Programming</title>
    16. 

  16.   <meta name="description" content="Friday Co-Op Web Programming, Fall 2011">
    17. 

  17.   <meta name="author" content="Mike McNally emmecinque@gmail.com">
    18. 

  18. 

  19.   <!-- Mobile viewport optimized: j.mp/bplateviewport -->
    20. 

  20.   <meta name="viewport" content="width=device-width,initial-scale=1">
    21. 

  21. 

  22.   <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
    23. 

  23. 

  24.   <link href='http://fonts.googleapis.com/css?family=UnifrakturCook:700|Numans|Aldrich|Short+Stack' rel='stylesheet' type='text/css'> 
    25. 

  25. 

  26.   <!-- CSS: implied media=all -->
    27. 

  27.   <!-- CSS concatenated and minified via ant build script-->
    28. 

  28.   <link rel="stylesheet" href="css/style.css">
    29. 

  29.   <link rel="stylesheet" href="css/1140.css">
    30. 

  30.   <link rel="stylesheet" href="css/1140_ie.css">
    31. 

  31.   <link rel="stylesheet" href="css/by_media.css">
    32. 

  32.   <!-- end CSS-->
    33. 

  33. 

  34.   <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
    35. 

  35. 

  36.   <!-- All JavaScript at the bottom, except for Modernizr / Respond.
    37. 

  37.        Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
    38. 

  38.        For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
    39. 

  39.   <script src="js/modernizr-2.0.6.min.js"></script>
    40. 

  40. </head>
    41. 

  41. 

  42. <body class='main-page'>
    43. 

  43. 

  44.   <div id="container" class='container'>
    45. 

  45.     <header class='row'>
    46. 

  46.       <div class='seven-wide col'>
    47. 

  47.         <div style='padding: 10px'>
    48. 

  48.           <h1 style='font-size: 325%;' class='gothic'>Secrets of</h1>
    49. 

  49.           <h1 style='font-size: 460%; padding-left: 50px' class='gothic'>Web Programming</h1>
    50. 

  50.         </div>
    51. 

  51.       </div>
    52. 

  52.       <div class='five-wide col info'>
    53. 

  53.         <div style='padding: 10px'>
    54. 

  54.           Friday Co-Op<br>
    55. 

  55.           Fall 2011<br>
    56. 

  56.           <a href='http://twitter.com/FridayCoopWeb' title='Twitter feed'>Twitter Feed</a>
    57. 

  57.         </div>
    58. 

  58.       </div>
    59. 

  59.     </header>
    60. 

  60. 

  61.     <div id="main" role="main" class='row'>
    62. 

  62.       <div class='six-wide col'>
    63. 

  63.         <section class='content'>
    64. 

  64.           <h1>Class Notes</h1>
    65. 

  65.           <ol>
    66. 

  66.             <li>
    67. 

  67.               <a href='classes/introduction.html'>Introduction: Why is all this stuff here, and why are people looking at it?</a>
    68. 

  68.             </li>
    69. 

  69.             <li>
    70. 

  70.               <a href='classes/layout.html'>CSS Rules: Yes, it rules, but let's talk about rules.</a>
    71. 

  71.             </li>
    72. 

  72.             <li>
    73. 

  73.               <a href='classes/alive.html'>It's Alive! Interactive Web Pages and JavaScript</a>
    74. 

  74.             </li>
    75. 

  75.             <li>
    76. 

  76.               <a href='classes/bbb.html'>Boxes, Borders, and Backgrounds</a>
    77. 

  77.             </li>
    78. 

  78.             <li>
    79. 

  79.               <a href='classes/more_javascript.html'>More and Better JavaScript Magic</a>
    80. 

  80.             </li>
    81. 

  81.             <li>
    82. 

  82.               <a href='classes/functions_1.html'>More About Functions</a>
    83. 

  83.             </li>
    84. 

  84.             <li>
    85. 

  85.               <a href='classes/functions_2.html'>Math In JavaScript</a>
    86. 

  86.             </li>
    87. 

  87.             <li>
    88. 

  88.               <a href='classes/values.html'>Values</a>
    89. 

  89.             </li>
    90. 

  90.             <li>
    91. 

  91.               <a href='classes/colors.html'>Colors</a>
    92. 

  92.             </li>
    93. 

  93.             <li>
    94. 

  94.               <a href='classes/bugs.html'>Bugs And Debugging</a>
    95. 

  95.             </li>
    96. 

  96.           </ol>
    97. 

  97.         </section>
    98. 

  98. 

  99.         <section class='content'>
    100. 

  100.           <h1>Long Answers to Interesting Questions</h1>
    101. 

  101.           After our <a href='classes/introduction.html'>first class</a>, I decided it might be 
    102. 

  102.           nice to use this site as a way for me to provide long answers to some of the questions
    103. 

  103.           I remember from the class.  In a one hour format, it's hard to really explore some of
    104. 

  104.           the really interesting things that you all ask.  I will try, therefore, to go into more
    105. 

  105.           detail here. Questions that are somewhat outside the core goals of the class will be
    106. 

  106.           a big part of this effort.
    107. 

  107.           <p>
    108. 

  108.           I definitely will forget half the good questions, so if there's something you'd like
    109. 

  109.           me to write about just <a href='mailto:emmecinque@gmail.com'>send me some mail</a> and
    110. 

  110.           I'll see what I can do.
    111. 

  111.           <p>
    112. 

  112.           It's important to note that there will be lots of interesting questions for which I
    113. 

  113.           won't have an answer.  I might try to explain <i>why</i> I don't know, if that's
    114. 

  114.           intrinsically interesting, but I might just have to say "I don't know."
    115. 

  115.           <ol>
    116. 

  116.             <li><a href='answers/cookies.html'>What do "cookies" do? Are they bad? Can I "opt out" of them?</a></li>
    117. 

  117.           </ol>
    118. 

  118.           (LOL I only ended up with one of those :-)
    119. 

  119.         </section>
    120. 

  120. 

  121.         <section class='content'>
    122. 

  122.           <h1>Demonstrations</h1>
    123. 

  123.           Over the course of the class, we did a whole bunch of exercises.
    124. 

  124.           Almost everybody managed to get them working during class, and often managed to add their own fancy extensions
    125. 

  125.           to the basic, silly problems.
    126. 

  126.           It's my hope that everybody got something out of the class, and that you'll never look at
    127. 

  127.           a web page the same way again!
    128. 

  128.           <p>
    129. 

  129.           Also kittens.
    130. 

  130.           <p>
    131. 

  131.           Here are some of the exercises we did:
    132. 

  132.           <ul>
    133. 

  133.             <li><a target='_blank' href='http://jsfiddle.net/Pointy/7afxS/1/embedded/result'>Turn red when thinking about Justin Bieber</a>
    134. 

  134.             (<a target='_blank' href='http://jsfiddle.net/Pointy/7afxS/1'>all the code</a>)
    135. 

  135. 

  136.             <li><a target='_blank' href='http://jsfiddle.net/Pointy/BgK2B/5/embedded/result'>A simple box that blinks when a button is clicked.</a>
    137. 

  137.             (<a target='_blank' href='http://jsfiddle.net/Pointy/BgK2B/5/'>all the code</a>)
    138. 

  138. 

  139.             <li><a target='_blank' href='http://jsfiddle.net/Pointy/b8FPh/4/embedded/result'>Move the mouse over the boxes and they change</a>
    140. 

  140.             (<a target='_blank' href='http://jsfiddle.net/Pointy/b8FPh/4/'>all the code</a>)
    141. 

  141. 

  142.             <li><a target='_blank' href='http://jsfiddle.net/Pointy/Jtj9j/23/embedded/result'>Kountdown to Kittens</a>
    143. 

  143.             (<a target='_blank' href='http://jsfiddle.net/Pointy/Jtj9j/23/'>all the code</a>)
    144. 

  144. 

  145.             <li><a target='_blank' href='http://jsfiddle.net/Pointy/93end/3/embedded/result'>Playing with a color picker</a>
    146. 

  146.             (<a target='_blank' href='http://jsfiddle.net/Pointy/93end/3/'>all the code</a>)
    147. 

  147.           </ul>
    148. 

  148.         </section>
    149. 

  149.       </div>
    150. 

  150.       <div class='one-wide col'></div>
    151. 

  151.       <div class='five-wide col'>
    152. 

  152.         <section class='content'>
    153. 

  153.           <h1>Resources</h1>
    154. 

  154.           <dl>
    155. 

  155.             <dt><h3>Instructor</h3></dt>
    156. 

  156.             <dd>
    157. 

  157.               Mike McNally<br>
    158. 

  158.               <a href='mailto:emmecinque@gmail.com'>emmecinque@gmail.com</a>
    159. 

  159.               <p>
    160. 

  160.               Please feel free to email me with questions any time.
    161. 

  161.               I generally respond to email really quickly.
    162. 

  162.             </dd>
    163. 

  163.             <dt><h3>Our Workbench</h3></dt>
    164. 

  164.             <dd>
    165. 

  165.               <a href='http://jsfiddle.net'>jsfiddle.net</a> is a website
    166. 

  166.               made by some web developers working on some open-source web
    167. 

  167.               framework software ("MooTools").  It's a great way to play with
    168. 

  168.               web programming, and we'll be using it a whole lot. You can
    169. 

  169.               sign up for a totally free account (no junk mail or anything),
    170. 

  170.               which is nice because then it keeps track of the work you've
    171. 

  171.               done.
    172. 

  172.             </dd>
    173. 

  173.             <dt><h3>HTML References</h3></dt>
    174. 

  174.             <dd>
    175. 

  175.               <div class='note'>
    176. 

  176.                 These external resources, and all others mentioned here,
    177. 

  177.                 are high-quality sources of information. Be warned, however,
    178. 

  178.                 that I cannot guarantee any particular level of family-friendliness
    179. 

  179.                 of the site contents!  Web developers (and software developers in
    180. 

  180.                 general) are grumpy, difficult people, and occasionally they 
    181. 

  181.                 vent frustration in disturbing ways.
    182. 

  182.               </div>
    183. 

  183.               <p>
    184. 

  184.               <a href='http://www.blooberry.com'>Blooberry</a>
    185. 

  185.               is a site that's been live for a very very long time. It's pretty "old school"
    186. 

  186.               but it's easy to navigate and for the most part it's pretty accurate. It's not
    187. 

  187.               totally up-to-date but for basic stuff it's great.
    188. 

  188.               <p>
    189. 

  189.               The <a href='https://developer.mozilla.org/en/HTML'>Mozilla HTML main page</a>
    190. 

  190.               is an entry point to the HTML documentation maintained by the Mozilla Foundation.
    191. 

  191.               It's like a Wiki, and the information is pretty accurate and up-to-date. If it
    192. 

  192.               isn't, let me know and I'll fix it.
    193. 

  193.             </dd>
    194. 

  194.             <dt><h3>CSS References</h3></dt>
    195. 

  195.             <dd>
    196. 

  196.               The <a href='https://developer.mozilla.org/en/CSS_Reference'>Mozilla CSS main page</a>
    197. 

  197.               is like the HTML reference: mostly up-to-date, and mostly very accurate.
    198. 

  198.             </dd>
    199. 

  199.             <dt><h3>JavaScript references</h3></dt>
    200. 

  200.             <dd>
    201. 

  201.               (TBD)
    202. 

  202.             </dd>
    203. 

  203.           </dl>
    204. 

  204.         </section>
    205. 

  205.       </div>
    206. 

  206.     </div>
    207. 

  207. 

  208.     <footer>
    209. 

  209. 

  210.     </footer>
    211. 

  211.   </div> <!--! end of #container -->
    212. 

  212. 

  213. 

  214.   <!-- JavaScript at the bottom for fast page loading -->
    215. 

  215. 

  216.   <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    217. 

  217.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
    218. 

  218.   <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.3.min.js"><\/script>')</script>
    219. 

  219. 

  220. 

  221.   <!-- scripts concatenated and minified via ant build script-->
    222. 

  222.   <script defer src="js/plugins.js"></script>
    223. 

  223.   <script defer src="js/script.js"></script>
    224. 

  224.   <script defer src="js/wallflower-0.4.js"></script>
    225. 

  225.   <!-- end scripts-->
    226. 

  226. 

  227. 	
    228. 

  228.   <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
    229. 

  229.        chromium.org/developers/how-tos/chrome-frame-getting-started -->
    230. 

  230.   <!--[if lt IE 7 ]>
    231. 

  231.     <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    232. 

  232.     <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
    233. 

  233.   <![endif]-->
    234. 

  234.   
    235. 

  235. </body>
    236. 

  236. </html>
    237.