/index.html
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>