Adding sitemap, room for improvement sections, removing PDF files as …

…they are out-of-date and no way to create new ones currently.

app.yaml

@@ -18,6 +18,10 @@ handlers:
 - url: /common
   static_dir: common
 
+- url: /sitemap.xml
+  static_files: sitemap.xml
+  upload: sitemap.xml
+
 - url: /
   static_files: index.html
   upload: index.html

htmlcss/index.html

@@ -8,7 +8,7 @@
  <div id="container">
 	<div id="header">
 		<h1>
-			HTML &amp; CSS
+			Teaching Materials: HTML &amp; CSS
 		</h1>
 	</div>
 	<div id="navigation">
@@ -27,9 +27,8 @@ <h2>
 			Overview
 		</h2>
 
-    <p>This course is designed to give an overview of HTML &amp; CSS, and was originally given in 5 evening classes over a 2.5 week period (with lesson 1 &amp; 2 in the first class). Each lesson has slides, an in-class example, and one or more exercises. The in-class example is designed to be an example of what the teacher should build up during the course of the lesson, switching between talking over the slides and demonstrating the concepts in the example page.
-The exercises can be started in class and then continued outside of it, and the teacher can decide when to reveal the solution for the exercises. For the most part, the solution to an exercise serves as the starting point for the next exercise. 
-    </p>
+    <p>This course is designed to give an overview of HTML &amp; CSS. There are 6 lessons:</p>
+
     <ul>
      <li><a href="/htmlcss/lesson1/">Lesson 1: Intro to the Web</a></li>
 		 <li><a href="/htmlcss/lesson2/">Lesson 2: Intro to HTML</a></li>
@@ -38,8 +37,35 @@ <h2>
      <li><a href="/htmlcss/lesson5/">Lesson 5: CSS Layout</a></li>
      <li><a href="/htmlcss/lesson6/">Lesson 6: Creating a Web Presence</a></li>
     </ul>
-    <p>All the materials from the above lessons(slides, examples, exercises) can be downloaded in <a href="htmlcss.zip">this zip file</a>. If you are using this material and have questions/comments, feel free to leave them here or on the individual lesson pages.</p>
 
+    <h3>Prerequisite</h3>
+    <p>The students should be familiar with the web as a user, but do not need to have any programming or markup language experience.</p>
+
+    <h3>Materials</h3>
+
+    <p>Each lesson includes:</p>
+
+     <ul>
+      <li><b>Slides</b>: An HTML5-based slideset (<em>not</em> a PowerPoint) which actually embeds the actual HTML tags being described in order to better demonstrate them.
+      <li><b>In-class example</b>: An example of what the teacher should build up during the course of the lesson, switching between talking over the slides and demonstrating the concepts in the example page. 
+      <li><b>Exercise(s)</b>: These can be started in class and then continued outside of it, and the teacher can decide when to reveal the solution for the exercises. For the most part, the solution to an exercise serves as the starting point for the next exercise. 
+      <li><b>Additional Reading</b>: Links that teachers can recommend students read after a lesson.
+      <li><b>Related Resources</b>: Slides or tutorials that were useful in the creation of the lesson content. Teachers can visit these to get an idea of how other people present the content.
+      <li><b>Room for Improvement</b>: A list of ways that the particular lesson might be improved.
+     </ul>
+
+    <p>The materials from the above lessons(slides, examples, exercises) can be downloaded in <a href="htmlcss.zip">this zip file</a>.</p>
+
+    <h3>Related Resources</h3>
+
+    <p>The content for the slides was based on consultation with a number of fantastic online resources, including the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 specification</a>, <a href="http://interact.webstandards.org/">WASP Interact Curriculum</a>, and the <a href="http://www.opera.com/company/education/curriculum/">Opera Web Standards Curriculum</a>. Those are recommended reading for teachers of this course.
+    </p>
+
+    <h3>History</h3>
+    <p>This course was designed and given by <a href="http://www.pamelafox.org">Pamela Fox</a> in October 2010 as part of <a href="meetup.com/girldevelopit-sydney/">GirlDevelopIt</a> in Sydney, Australia. The course was delivered as 5 2-hour evening classes over a 2.5 week period (Monday, Wednesday, Monday, Wednesday, Monday), with lesson 1 & 2 bundled into the first class. The students were women from ages 18-50 from a range of disciplines (photography, marketing, travel, ads). 
+    </p>
+
+    <p><strong>If you are using this material and have questions/comments, feel free to leave them here or on the individual lesson pages.</strong></p>
 	</div>
 	<div id="footer">
 		<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" /></a><br />The materials are licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 License</a>.

htmlcss/lesson1/index.html

@@ -31,14 +31,20 @@ <h3>Topics:</h3>
     <p>Browsers, Clients, FTP</p>
     <h3>Materials:</h3>
 		 <ul> 
-      <li><a href="slides.html">Slides</a> (<a href="slides.pdf">PDF</a>)
+      <li><a href="slides.html">Slides</a>
       <li><a href="exercise_descrip.html">Exercise</a> - This exercise will need to be modified to reflect the FTP details for the students, or removed if there is no FTP access.
      </ul>
     <h3>Additional Reading:</h3>
      <ul>
       <li><a href="http://computer.howstuffworks.com/web-server.htm">How Web Servers Work</a> 
      </ul> 
 
+    <h3>Room for Improvement:</h3>
+     <ul>
+      <li>Add a slide explaining FTP more, like what information you have to know in order to FTP (host, port, auth).
+      <li>Consider mentioning SSH.
+     </ul>
+
 	</div>
 	<div id="footer">
 		<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" /></a><br />The materials are licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 License</a>.

htmlcss/lesson1/slides.html

@@ -379,7 +379,7 @@
   <body> 
 
   <div id="info">
-    <p>Press <span class="key">&rarr;</span> key to advance. Zoom in/out: <span class="key">Ctrl or Command</span> + <span class="key">+/-</span>. <a href="/set?id=ags1bGlkZS1tYWtlcnIQCxIIU2xpZGVTZXQYifoBDA&output=pdf">Download PDF</a> </p>
+    <p>Press <span class="key">&rarr;</span> key to advance. Zoom in/out: <span class="key">Ctrl or Command</span> + <span class="key">+/-</span>.</p>
   </div>
 
   <div id="presentation">

htmlcss/lesson2/index.html

@@ -30,13 +30,30 @@ <h2>
     <h3>Topics:</h3>
 
     <p>HTML History, HTML tag syntax, Basic HTML tags</p>
+
     <h3>Materials:</h3>
 		 <ul> 
-      <li><a href="slides.html">Slides</a> (<a href="slides.pdf">PDF</a>)
+      <li><a href="slides.html">Slides</a>
       <li><a href="inclass.html">In-Class Example</a>
       <li><a href="exercise_descrip.html">Exercise</a> and <a href="exercise_solution.html">Solution</a>
      </ul>
 
+     <h3>Additional Reading:</h3>
+     <ul>
+      <li><a href="http://www.htmlgoodies.com/primers/html/article.php/3478151/Web-Developer-Class-Learn-the-Basic-HTML-Tags.htm">Basic HTML Tags</a>
+     </ul>
+
+     <h3>Room for Improvement:</h3>
+     <ul>
+      <li>Mention best practices for HTML style - using quotes, pressing enter, indenting levels.
+      <li>Consider removing TextEdit from list of editors, as it has a tendency to not save in plain text (and confuse students greatly).
+      <li>Show how to debug HTML in Firebug and Chrome developer console (element/DOM tab).
+      <li>Consider adding a slide about the difference between XML and HTML (particularly if the students had prior exposure to XHTML - as they will be confused about the different best practices).
+      <li>Add mention of additional <code>A</code> attributes, <code>target</code> (use scarcely!) and <code>name</code>.
+      <li>Re-iterate that the <code>title</code> element goes in the <code>head</code> and is not rendered on the page (this seems a matter of great confusion for newbies).
+      <li>Consider talking about the HTML as a tree structure (DOM).
+     </ul>
+
 	</div>
 	<div id="footer">
 		<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" /></a><br />The materials are licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 License</a>.

htmlcss/lesson2/slides.html

@@ -379,7 +379,7 @@
   <body> 
 
   <div id="info">
-    <p>Press <span class="key">&rarr;</span> key to advance. Zoom in/out: <span class="key">Ctrl or Command</span> + <span class="key">+/-</span>. <a href="/set?id=ags1bGlkZS1tYWtlcnIQCxIIU2xpZGVTZXQY-cYFDA&output=pdf">Download PDF</a> </p>
+    <p>Press <span class="key">&rarr;</span> key to advance. Zoom in/out: <span class="key">Ctrl or Command</span> + <span class="key">+/-</span>. </p>
   </div>
 
   <div id="presentation">

htmlcss/lesson3/index.html

@@ -33,7 +33,7 @@ <h3>Topics:</h3>
 
     <h3>Materials:</h3>
 		 <ul> 
-      <li><a href="slides.html">Slides</a> (<a href="slides.pdf">PDF</a>)
+      <li><a href="slides.html">Slides</a>
       <li><a href="inclass.html">In-Class Example</a>
       <li><a href="exercise_descrip.html">Exercise</a> and <a href="exercise_solution.html">Solution</a>
      </ul>
@@ -42,6 +42,13 @@ <h3>Additional Reading:</h3>
      <ul>
       <li><a href="http://diveintohtml5.org/video.html">Video on the Web</a>
      </ul>
+
+    <h3>Room for Improvement:</h3>
+    <ul>
+     <li>Possibly include a bit more information (a diagram?) on form->server interaction, and why the <code>name</code> attribute is important for a database-driven system.
+     <li>Consider splitting into two talks or shortening the media section, as this slideset takes longer to talk over than the others.
+     <li>To make the media part more interesting, talk about the use of some psychoacoustic tricks that improve compression.
+    </ul>
 
 	</div>
 	<div id="footer">