PageRenderTime 73ms CodeModel.GetById 39ms app.highlight 19ms RepoModel.GetById 1ms app.codeStats 0ms

/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<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
  3<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
  4<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
  5<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
  6<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
  7<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  8<head>
  9  <meta charset="utf-8">
 10
 11  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
 12       More info: h5bp.com/b/378 -->
 13  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 14
 15  <title>Web Programming</title>
 16  <meta name="description" content="Friday Co-Op Web Programming, Fall 2011">
 17  <meta name="author" content="Mike McNally emmecinque@gmail.com">
 18
 19  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
 20  <meta name="viewport" content="width=device-width,initial-scale=1">
 21
 22  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
 23
 24  <link href='http://fonts.googleapis.com/css?family=UnifrakturCook:700|Numans|Aldrich|Short+Stack' rel='stylesheet' type='text/css'> 
 25
 26  <!-- CSS: implied media=all -->
 27  <!-- CSS concatenated and minified via ant build script-->
 28  <link rel="stylesheet" href="css/style.css">
 29  <link rel="stylesheet" href="css/1140.css">
 30  <link rel="stylesheet" href="css/1140_ie.css">
 31  <link rel="stylesheet" href="css/by_media.css">
 32  <!-- end CSS-->
 33
 34  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
 35
 36  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
 37       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
 38       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
 39  <script src="js/modernizr-2.0.6.min.js"></script>
 40</head>
 41
 42<body class='main-page'>
 43
 44  <div id="container" class='container'>
 45    <header class='row'>
 46      <div class='seven-wide col'>
 47        <div style='padding: 10px'>
 48          <h1 style='font-size: 325%;' class='gothic'>Secrets of</h1>
 49          <h1 style='font-size: 460%; padding-left: 50px' class='gothic'>Web Programming</h1>
 50        </div>
 51      </div>
 52      <div class='five-wide col info'>
 53        <div style='padding: 10px'>
 54          Friday Co-Op<br>
 55          Fall 2011<br>
 56          <a href='http://twitter.com/FridayCoopWeb' title='Twitter feed'>Twitter Feed</a>
 57        </div>
 58      </div>
 59    </header>
 60
 61    <div id="main" role="main" class='row'>
 62      <div class='six-wide col'>
 63        <section class='content'>
 64          <h1>Class Notes</h1>
 65          <ol>
 66            <li>
 67              <a href='classes/introduction.html'>Introduction: Why is all this stuff here, and why are people looking at it?</a>
 68            </li>
 69            <li>
 70              <a href='classes/layout.html'>CSS Rules: Yes, it rules, but let's talk about rules.</a>
 71            </li>
 72            <li>
 73              <a href='classes/alive.html'>It's Alive! Interactive Web Pages and JavaScript</a>
 74            </li>
 75            <li>
 76              <a href='classes/bbb.html'>Boxes, Borders, and Backgrounds</a>
 77            </li>
 78            <li>
 79              <a href='classes/more_javascript.html'>More and Better JavaScript Magic</a>
 80            </li>
 81            <li>
 82              <a href='classes/functions_1.html'>More About Functions</a>
 83            </li>
 84            <li>
 85              <a href='classes/functions_2.html'>Math In JavaScript</a>
 86            </li>
 87            <li>
 88              <a href='classes/values.html'>Values</a>
 89            </li>
 90            <li>
 91              <a href='classes/colors.html'>Colors</a>
 92            </li>
 93            <li>
 94              <a href='classes/bugs.html'>Bugs And Debugging</a>
 95            </li>
 96          </ol>
 97        </section>
 98
 99        <section class='content'>
100          <h1>Long Answers to Interesting Questions</h1>
101          After our <a href='classes/introduction.html'>first class</a>, I decided it might be 
102          nice to use this site as a way for me to provide long answers to some of the questions
103          I remember from the class.  In a one hour format, it's hard to really explore some of
104          the really interesting things that you all ask.  I will try, therefore, to go into more
105          detail here. Questions that are somewhat outside the core goals of the class will be
106          a big part of this effort.
107          <p>
108          I definitely will forget half the good questions, so if there's something you'd like
109          me to write about just <a href='mailto:emmecinque@gmail.com'>send me some mail</a> and
110          I'll see what I can do.
111          <p>
112          It's important to note that there will be lots of interesting questions for which I
113          won't have an answer.  I might try to explain <i>why</i> I don't know, if that's
114          intrinsically interesting, but I might just have to say "I don't know."
115          <ol>
116            <li><a href='answers/cookies.html'>What do "cookies" do? Are they bad? Can I "opt out" of them?</a></li>
117          </ol>
118          (LOL I only ended up with one of those :-)
119        </section>
120
121        <section class='content'>
122          <h1>Demonstrations</h1>
123          Over the course of the class, we did a whole bunch of exercises.
124          Almost everybody managed to get them working during class, and often managed to add their own fancy extensions
125          to the basic, silly problems.
126          It's my hope that everybody got something out of the class, and that you'll never look at
127          a web page the same way again!
128          <p>
129          Also kittens.
130          <p>
131          Here are some of the exercises we did:
132          <ul>
133            <li><a target='_blank' href='http://jsfiddle.net/Pointy/7afxS/1/embedded/result'>Turn red when thinking about Justin Bieber</a>
134            (<a target='_blank' href='http://jsfiddle.net/Pointy/7afxS/1'>all the code</a>)
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            (<a target='_blank' href='http://jsfiddle.net/Pointy/BgK2B/5/'>all the code</a>)
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            (<a target='_blank' href='http://jsfiddle.net/Pointy/b8FPh/4/'>all the code</a>)
141
142            <li><a target='_blank' href='http://jsfiddle.net/Pointy/Jtj9j/23/embedded/result'>Kountdown to Kittens</a>
143            (<a target='_blank' href='http://jsfiddle.net/Pointy/Jtj9j/23/'>all the code</a>)
144
145            <li><a target='_blank' href='http://jsfiddle.net/Pointy/93end/3/embedded/result'>Playing with a color picker</a>
146            (<a target='_blank' href='http://jsfiddle.net/Pointy/93end/3/'>all the code</a>)
147          </ul>
148        </section>
149      </div>
150      <div class='one-wide col'></div>
151      <div class='five-wide col'>
152        <section class='content'>
153          <h1>Resources</h1>
154          <dl>
155            <dt><h3>Instructor</h3></dt>
156            <dd>
157              Mike McNally<br>
158              <a href='mailto:emmecinque@gmail.com'>emmecinque@gmail.com</a>
159              <p>
160              Please feel free to email me with questions any time.
161              I generally respond to email really quickly.
162            </dd>
163            <dt><h3>Our Workbench</h3></dt>
164            <dd>
165              <a href='http://jsfiddle.net'>jsfiddle.net</a> is a website
166              made by some web developers working on some open-source web
167              framework software ("MooTools").  It's a great way to play with
168              web programming, and we'll be using it a whole lot. You can
169              sign up for a totally free account (no junk mail or anything),
170              which is nice because then it keeps track of the work you've
171              done.
172            </dd>
173            <dt><h3>HTML References</h3></dt>
174            <dd>
175              <div class='note'>
176                These external resources, and all others mentioned here,
177                are high-quality sources of information. Be warned, however,
178                that I cannot guarantee any particular level of family-friendliness
179                of the site contents!  Web developers (and software developers in
180                general) are grumpy, difficult people, and occasionally they 
181                vent frustration in disturbing ways.
182              </div>
183              <p>
184              <a href='http://www.blooberry.com'>Blooberry</a>
185              is a site that's been live for a very very long time. It's pretty "old school"
186              but it's easy to navigate and for the most part it's pretty accurate. It's not
187              totally up-to-date but for basic stuff it's great.
188              <p>
189              The <a href='https://developer.mozilla.org/en/HTML'>Mozilla HTML main page</a>
190              is an entry point to the HTML documentation maintained by the Mozilla Foundation.
191              It's like a Wiki, and the information is pretty accurate and up-to-date. If it
192              isn't, let me know and I'll fix it.
193            </dd>
194            <dt><h3>CSS References</h3></dt>
195            <dd>
196              The <a href='https://developer.mozilla.org/en/CSS_Reference'>Mozilla CSS main page</a>
197              is like the HTML reference: mostly up-to-date, and mostly very accurate.
198            </dd>
199            <dt><h3>JavaScript references</h3></dt>
200            <dd>
201              (TBD)
202            </dd>
203          </dl>
204        </section>
205      </div>
206    </div>
207
208    <footer>
209
210    </footer>
211  </div> <!--! end of #container -->
212
213
214  <!-- JavaScript at the bottom for fast page loading -->
215
216  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
217  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
218  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.3.min.js"><\/script>')</script>
219
220
221  <!-- scripts concatenated and minified via ant build script-->
222  <script defer src="js/plugins.js"></script>
223  <script defer src="js/script.js"></script>
224  <script defer src="js/wallflower-0.4.js"></script>
225  <!-- end scripts-->
226
227	
228  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
229       chromium.org/developers/how-tos/chrome-frame-getting-started -->
230  <!--[if lt IE 7 ]>
231    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
232    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
233  <![endif]-->
234  
235</body>
236</html>