Skip to content

Commit

Permalink
Adding JS course and changed frontpage
Browse files Browse the repository at this point in the history
  • Loading branch information
@pamelafox
pamelafox committed May 28, 2012
1 parent 2cf495a commit 863e4d0
Show file tree
Hide file tree
Showing 36 changed files with 6,705 additions and 78 deletions.
Binary file added .DS_Store
View file
Binary file not shown.
7 changes: 7 additions & 0 deletions app.yaml
View file
Expand Up @@ -18,6 +18,13 @@ handlers:
- url: /htmlcss
static_dir: htmlcss

- url: /javascript/
static_files: javascript/index.html
upload: javascript/index.html

- url: /javascript
static_dir: javascript

- url: /common
static_dir: common

Expand Down
16 changes: 12 additions & 4 deletions htmlcss-1day/index.html
View file
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Teaching Materials: HTML &amp; CSS (One-Day)</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="../common/styles.css" rel="stylesheet" type="text/css" />
Expand Down Expand Up @@ -90,12 +91,13 @@ <h3>Materials:</h3>
<li><a href="lesson2/slides.html">Slides</a>
<li><a href="lesson2/inclass.html">In-Class Example</a>
<li>Exercise: if students don't already have a text editor, make them download one or use Cloud9.
<li><a href="lesson2/exercise_descrip.html">Exercise</a> and <a href="exercise_solution.html">Solution</a>
<li><a href="lesson2/exercise_descrip.html">Exercise</a> and <a href="lesson2/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>
<li><a href="http://www.joelonsoftware.com/articles/Unicode.html">The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets</a>
</ul>

<h3>Room for Improvement:</h3>
Expand Down Expand Up @@ -127,17 +129,23 @@ <h3>Materials:</h3>

<h3>Additional Reading:</h3>
<ul>
<li><a href="http://blog.monstuff.com/archives/000149.html">HTTP 101</a>
<li><a href="http://diveintohtml5.org/video.html">Video on the Web</a>
<li><a href="http://computer.howstuffworks.com/cookie5.htm">How Cookies Work</a>
</ul>

<h3>Room for Improvement:</h3>
<ul>
<li>Add a slide on "Forms in HTML5": input type="email", "url", form validation.
<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, perhaps set up a basic server side script for users to post to, and show the code for that on the slide.
<li>Replace Google search example with a user login or guestbook example, as that is more intuitive.
<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, perhaps set up a basic server side script for users to post to (that simply outputs what they sent to it), and show the code for that on the slide.
<li>Explain basics of HTTP - GET vs. POST, show NET tab, show example of GET/POST requests.
<li>Maybe give basic explanation of cookies.
<li>Show example form for a user login or guestbook (POST).
<li>For Google search example, show how easy it is to change it to search Twitter or other sites.
<li>Maybe mention existence of <code>framesrc</code> tag (<a href="http://www-scf.usc.edu/~csci571/">example site</a>) and why it's not a best practice (<a href="http://accessibility.psu.edu/frames">accessibility</a>)
<li>Add a single slide on "Multimedia in HTML5" - video/audio tag.
<li>Consider removing object/embed entirely, as it's only used in copy/paste (and iframe is more common now anyway).
<li>Check on URL for beatingheart.swf, store it locally. (404 now?)
<li>Add an exercise on embedding.
</ul>
</div>

Expand Down
Binary file added htmlcss-1day/lesson3/beatingheart.swf
View file
Binary file not shown.
99 changes: 37 additions & 62 deletions htmlcss-1day/lesson3/slides.html
View file
Expand Up @@ -571,44 +571,6 @@
<img src="http://farm5.static.flickr.com/4135/4930813031_601aa2c5c9_o.png">
</p>
</div>



<div class="slide normal">
<header><h1>Forms</h1></header>
<section class="content">

<!--
<p>A form consists of a <code>form</code> element with multiple input controls inside of it that help retrieve user data in some way, and attributes that specify how a server should handle the form.</p>
<p>The example below asks for a search query, and then sends the query to the Google server once submitted.</p>
-->

<pre>
&lt;form action="http://www.google.com/search" method="get"&gt;
&lt;input type="text" name="q"&gt;
&lt;button type="submit" value="Search"&gt;
&lt;/form&gt;</pre>

<form action="http://www.google.com/search" method="get" target="_blank">
<input type="text" name="q">
<button type="submit">Search</button>
</form>

<pre>
&lt;?php
<b>$q = $_GET["q"];</b>

$query = sprintf("SELECT page FROM internet WHERE
MATCH(text) AGAINST '%s'", mysql_real_escape_string($q));

$result = mysql_query($query);
while ($row = @mysql_fetch_assoc($result)) {
echo $row["link"] + "&lt;br&gt;" + $row["description"];
}
?&gt;</pre>

</section>
</div>



Expand Down Expand Up @@ -809,14 +771,14 @@
<!--<p>To let the user specify multiple lines of text, use the <code>textarea</code> element, and specify <code>cols</code> or <code>rows</code> to specify a specific size.</p>-->
<pre>
&lt;label&gt;Delivery instructions: &lt;br&gt;
<b>&lt;textarea&gt;&lt;/textarea&gt;</b>
<b>&lt;textarea name="delivery"&gt;&lt;/textarea&gt;</b>
&lt;/label&gt;
</pre>
<label>Delivery instructions:<br><textarea></textarea></label>

<pre>
&lt;label&gt;Write a haiku on your love for pizza: &lt;br&gt;
<b>&lt;textarea rows="3" cols="40"&gt;&lt;/textarea&gt;</b>
<b>&lt;textarea name="haiku" rows="3" cols="40"&gt;&lt;/textarea&gt;</b>
&lt;/label&gt;
</pre>
<label>Write a haiku on your love for pizza: <br>
Expand All @@ -831,28 +793,41 @@






<div class="slide normal">
<header><h1>Form processing</h1></header>
<header><h1>Forms</h1></header>
<section class="content">
<p>A form is processed by a server, which typically takes the inputs and stores them in a database.</p>
<p>If you don't have a server, you can also have all the form contents sent to the email address of your choice, using extra attributes in the <code>form</code> element:</p>
<pre>
&lt;form action="mailto:admin@example.com"
enctype="text/plain" method="post"&gt;
&lt;input name="info" type="text"/&gt;
&lt;button type="submit"&gt;Send Mail&lt;/button&gt;
&lt;/form&gt;
</pre>
<form action="mailto:admin@example.com" enctype="text/plain" method="post">
<input name="info" type="text">
<button type="submit">Send Mail</button>
</form>

<p>A form is processed by a server, which typically takes the inputs and stores them in a database
or uses them to query a database.</p>
<!--
<p>A form consists of a <code>form</code> element with multiple input controls inside of it that help retrieve user data in some way, and attributes that specify how a server should handle the form.</p>
<p>The example below asks for a search query, and then sends the query to the Google server once submitted.</p>
-->

<pre>
&lt;form action="http://www.google.com/search" method="get"&gt;
&lt;input type="text" name="q"&gt;
&lt;button type="submit"&gt;Search&lt;/button&gt;
&lt;/form&gt;</pre>

<form action="http://www.google.com/search" method="get" target="_blank">
<input type="text" name="q">
<button type="submit">Search</button>
</form>

<pre>
&lt;?php
<b>$q = $_GET["q"];</b>
$query = sprintf("SELECT page FROM internet WHERE
MATCH(text) AGAINST '%s'", mysql_real_escape_string($q));
$result = mysql_query($query);
while ($row = @mysql_fetch_assoc($result)) {
echo $row["link"] + "&lt;br&gt;" + $row["description"];
}
?&gt;</pre>

</section>
</div>




Expand All @@ -872,11 +847,11 @@
</p>

<pre>
&lt;iframe src="https://www.google.com"
&lt;iframe src="https://www.pamelafox.org"
width="500" height="300"&gt;&lt;/iframe&gt;
</pre>

<iframe src="http://www.google.com" width="500" height="280"></iframe>
<iframe src="http://www.pamelafox.org" width="500" height="280"></iframe>
</section>
</div>

Expand Down Expand Up @@ -954,7 +929,7 @@
</pre>

<object width="300" height="150">
<param name="movie" value="http://media2.sweetimsmiley.com/emoticons/beatingheart.swf"/>
<param name="movie" value="beatingheart.swf"/>
</object>
</section>
</div>
Expand All @@ -973,7 +948,7 @@
&lt;embed type="application/x-shockwave-flash"
src="beatingheart.swf"/&gt;
</pre>
<embed type="application/x-shockwave-flash" src="http://media2.sweetimsmiley.com/emoticons/beatingheart.swf"/>
<embed type="application/x-shockwave-flash" src="beatingheart.swf"/>
</section>
</div>

Expand Down
70 changes: 58 additions & 12 deletions index.html
View file
@@ -1,34 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<meta name="google-site-verification" content="y2qSQ8u5dyqCclUC_LogrgqihF-6ow-gDaktJTOovc4" />
<title>Teaching Materials</title>
<link href="/common/bootstrap.css" rel="stylesheet">
<link href="/common/bootstrap-responsive.css" rel="stylesheet">
<link href="/common/styles.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8" name="google-site-verification" content="y2qSQ8u5dyqCclUC_LogrgqihF-6ow-gDaktJTOovc4" />
<title>Teach the Web</title>
<link href="common/bootstrap.css" rel="stylesheet">
<link href="common/bootstrap-responsive.css" rel="stylesheet">
<link href="common/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="container">
<h1 class="page-header">Teaching Materials</h1>

<p>This website is a host for CC-licensed, easy-to-repurpose teaching materials. Here's whats available so far:
<p>We need more web developers in the world.</p>

<p>There are many people out there that want to be web developers but don't know how.
Fortunately, <a href="http://blog.pamelafox.org/2012/04/learning-to-code-online.html">many universities, startups, and non-profits</a> are experimenting with ways
to learn web development online, but there is another way: good old hands-on
teaching. That's what we want to make easier.
</p>
<p>
If you're a web developer already, you already have the knowledge you need to
be able to teach others - so all you need next is curriculum, logistics, and students.
Here's a guide to putting together those pieces and teaching the web to budding developers near you.
</p>
<ul>
<li><a href="/htmlcss/">HTML &amp; CSS</a>: Given in 2010, six lessons over multiple nights.
<li><a href="/htmlcss-1day/">HTML &amp; CSS (One-Day)</a>: Given in April 2012, five lessons in one day.
</ul>
<ol>
<li><h3>Curriculum</h3>
<p>A good curriculum includes both slides and exercises, giving you the opportunity to teach
conceptually and giving students the opportunity to practice what you've taught.
Here are some curriculum sets that you can use:
</p>
<table class="table">
<thead>
<tr><th>Topic <th>Prereqs <th>Slides? <th>Exercises? <th>Duration <th>Last Updated
<tbody>
<tr><td><a href="/htmlcss-1day/">HTML &amp; CSS</a>
<td>None
<td>&#10003;
<td>&#10003;
<td>8hrs
<td>4/16/2012
<tr>
<td><a href="/javascript/">Intro to JavaScript</a>
<td>None
<td>&#10003;
<td>&#10003;
<td>8-10hrs
<td>5/17/2012
</table>
<li><h3>Venue</h3>
<p>The ideal venue will have a projector, a whiteboard, tables &amp; chairs, WiFi, and enough power outlets.
It doesn't need to be huge - you can start with just a handful of folks in a conference room - and
in fact, you probably should keep it to around 30-40 students, to make sure students still get individual attention.
Some ideas for venues are: your workplace, local web companies/startups, co-working spaces, libraries, universities.</p>
<li><h3>Date</h3>
<p>Since most people that want to learn web development already have a day job, a good date for a class would be on a weekend (like all-day on a Saturday) or a series of weekday evenings (e.g. every Monday for a month).
Try not to do it on holidays, and give yourself atleast a few weeks to advertise.
</p>
<!-- laptops, number of days? -->
<li><h3>Students</h3>
<p>You can use skillshare.com to advertise your event (and hey, you should charge a bit of money too &mdash; if it's sustainable, then you can do more of them). Then start spreading the word - your friends may already be developers, but they probably have relatives, friends, or coworkers that aren't -
remind them of that. You can also tell your own relatives, friends, and coworkers, of course.
</ol>

<p>The code for this website is <a href="https://github.com/pamelafox/teaching-materials">hosted on github</a>.</p>
<p>...And if you've done all that, then congrats, there are now more web developers in the world because of you.

<p>Feel free to <a href="http://www.google.com/profiles/pamela.fox/contactme">contact me</a> with questions.
Be sure to <a href="http://www.google.com/profiles/pamela.fox/contactme">let me know</a> about what you taught where. :)
</p>

<!--
<br><br>
<blockquote>
Tell me and I forget. Teach me and I remember. Involve me and I learn.
<small>Benjamin Franklin</small>
</blockquote>
-->

</div>

Expand Down
Binary file added javascript/exercises/.DS_Store
View file
Binary file not shown.

0 comments on commit 863e4d0

Please sign in to comment.