Introductions
Survey Skill Level
Brief intro to P2PU, School of Webcraft, and Challenges
Example challenge Draw how the web works
Separate into groups
Work on existing challenges (take notes)
Brainstorm new challenge ideas in groups
Select one and write it

Instructions:

1. Sign up for p2pu http://p2pu.org

2. Create a new etherpad

2. Complete these two challenges


Carla Notes:
Asynchronous challenges that lead to badges
HTML Hunting in the World Around You
Writing HTML by Hand

Good challenge design
1) Fun
2) Good learning objective

Questions:
what if you don't have a blog or don't want to post to an old blog?

Comments on Courses:

Challenges ideas

new challanges from brigitte + marie + fiona

make 2 people link to each others pages.
build a webring
build a list of people: i learned to link from <a href="#prev">previous person</a>
build a image alphabet: find a link to an image that starts with the letter "A", "B", ...
stolen from my colleague matthias: to teach about folders and files, and relative links:
build a folder structre
- europe
-- uk
-----london.html
-----manchester.html
-- austria
----klagenfurt.html
----salzburg.html
-- germany
----berlin.html
- africa
- america

and then build relative links from city x to city y.
you can use texts about the cities from wikipedia, so you dont' get into trouble with IP

scavanger hunt: if the write the link right they get to pages with new informaiton on them

to make them realize, that a webpage is diaplyed differently on different devices + browsers:
take a picutre of the same page on my own compuer, on a smartphone, on a tablet, ...

spot the syntax error:  show them a page with code, have them find the
missing pieces.  my favorite would be <a href="....>link</a> with   the second quotation mark missing.  if you do it in jsfiddle you can  see  the results of fixing it 

to teach them about using the validator: same challange as above, but with 
using the w3c vaildator to find the errors.



new challanges from brigitte + marie + fiona

make 2 people link to each others pages.
build a webring
build a list of people: i learned to link from <a href="#prev">previous person</a>
build a image alphabet: find a link to an image that starts with the letter "A", "B", ...
stolen from my colleage matthias: to teach about folders and files, and relative links:
build a folder structre
- europe
-- uk
-----london.html
-----machaster.html
-- austria
----klagenfurt.html
----salzburg.html
-- germany
----berlin.html
- africa
- america


and then build relative links from city x to city y.
you can use texts about the cities from wikipedia, so you dont' get into trouble with IP

scavanger hunt: if the write the link right they get to pages with new informaiton on them

to make them realize, that a webpage is diaplyed differently on different devices + browsers:
take a picutre of the same page on my own compuer, on a smartphone, on a tablet, ...

inductive: ....give them different stylesheets to try out on their html-page, or on pages they pull from the internet


spot the syntax error:  show them a page with code (e.g. in jsfiddle), have them find the
missing  pieces.  my favorite would be <a href="....>link</a> with  the second quotation mark missing.  if you do it in jsfiddle you can see  the results of fixing it 


to teach them about using the validator: same challange as above, but with 
using the w3c vaildator to find the errors.



Feeback by Brigitte: I absolutely refuse to copy down html code by hand.  that just feels stupid to me.
so i won't be doing the "writing by hand" challenge.

The "html hunting in the world around you" one was great fun.
but I didn't get the badge-system: when I checked the checkboxes myself
and got awarded two badges I thought i was done and was dissapointed.
I would NEVER have clicked on the peer-reviewed badge - the badges just
don't look "clickable". maybe you could but a button below the badge saying
"apply for this badge"

Overall:  to start this very basic html-challenges you already have
to be very smart with your computer + a digital camera. which is probably ok
for 16year olds with an iphone, but you should also offer something for 
computer-beginners.






feedback:
hard to find the "challenge discussion page" we were directed to in the challenge
would have liked additional visual signposts besides the link to start the challenge


Feedback round notes

1. Aimed at a young audience, not particularly challenging. Maybe because I have a bit more experience in HTML. I kind of feel like the first page with the basic markup (Challenge #2 should have more explanation, what does each element mean). Remove some unnecssary elements for beginners. It would be nice to have a compilation of the code, a final product that you can try out.

2. Would like to see more happening on the machine, less about writing and drawing. Would prefer to wok in a group, wouldn't have done this on my own. Should be a bit more involving.

3. Some of the tasks are really general, it would be good to provide several examples of how to do the challeneges. It was easy to ask for help since we are in the same place, don't know how I would get help through the site.

4. I need more information about the meaning of the things that I'm learning, but not strictly drilling. More CSS, more technical. 

5. Love the fact that it's simple, hands on, practical but I think that memorizing is not that useful. I just want to plug and play and see it working.

6.  I like that we are encouraged to repeat over and over agian. The first time I did it I didn't really understand, the more I copied the more that I learned about the pattern of copying.

7. Good introduction, I would like the site to give me some more infrastructure, I don't want to make a blog. 

8. I didn't do the first challenge, I hate copying things. I usually teach people to start just with the body of the document. I really liked the second challenge beacuse it was fun I like that I connected something abstract to something real (marking up the world around you). I don't think it was simple to write on the photo itself. 

9. Assumes a lot of knowledge, please specify what I need to know before I start. Not interested in drilling or memorizing. Loved the photo thing, was an inventive way of thinking about the meaning of tags. Learn how to make a hyperlink, I we glossed over that. Interactivity is very motivating. Maybe include pointers to external resources. Emphasze folder and file structure, people don't usually know that when they start. If you've got a bunch of people, they can see each others sites by linking to each other. Create some kind of collection on the site.

10. I'd prefer to try and learn than to do something, give me an example that I can manipulate. I didn't know that I was supposed to click on the task link, so I started to write my own HTML. Really loved the idea of the second challenge. Include some example images on that task that they could mark up.


Challenge ideas

Group 1
a. users are given tags with how to use them and an associated mission (ex <ol> make a list)
b. given a base set of HTML code with CSS etc and task the participant with removing as much as possible before breaking the page. purpose to show that broken code can still work.
c. Find an element on a page, browse the web and find an element of that type (ex image) and point it out. See HTML Goggles on Hackasaurus

Group 2
a. Talking about using dropdown menus and explain that particluar element.
b. Match code with elements on the website, show a snippit of code and show it on side of the screen, task is to match the code to the elements on the page.
c. understanding the concept of forms, client side only 

Group 3
a. In your HTML code, how can you access other html code from another website
b. learning about 

Group 4
new challanges from brigitte + marie + fiona

make 2 people link to each others pages.
build a webring
build a list of people: i learned to link from <a href="#prev">previous person</a>
build a image alphabet: find a link to an image that starts with the letter "A", "B", ...
stolen from my colleage matthias: to teach about folders and files, and relative links:
build a folder structre
- europe
-- uk
-----london.html
-----machaster.html
-- austria
----klagenfurt.html
----salzburg.html
-- germany
----berlin.html
- africa
- america

and then build relative links from city x to city y.
you can use texts about the cities from wikipedia, so you dont' get into trouble with IP

scavanger hunt: if the write the link right they get to pages with new informaiton on them

to make them realize, that a webpage is diaplyed differently on different devices + browsers:
take a picutre of the same page on my own compuer, on a smartphone, on a tablet, ...
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_headers


spot the syntax error:  show them a page with code, have them find the
missing   pieces.  my favorite would be <a href="....>link</a> with   the second quotation mark missing.  if you do it in jsfiddle you can  see  the results of fixing it 

to teach them about using the validator: same challange as above, but with 
using the w3c vaildator to find the errors.

HTML Memory game, one side HTML the other side with a rendered version.

Building understanding of structure with respect to html.
Need to have built: simple website. Includes only basic tags.

The goal:The student will come out with the understanding of where different element on the page are structured within the html. Knowledge of appropriate tagging and order, hierarchy.

To teach people how to learn the process



---------- Brigitte says: please build this challenge for me =  ------
(I'm http://p2pu.org/en/OpenID%20user%204b974abb97fb1/
but i cant find the pleace where i can enter a new challenge myself)

[1] Open Up http://tinkerbin.com/l3HCLNVk - you will see an example with one simple html tag and one simple css rule.

[2] read up on <p>, <strong>, <em> Tags. 


[3] change the html-code to "hello world from ...your name here..." and add two paragraphs of text about your hometown / favorite town (you may copy some text from the wikipedia-page on your hometown.)  Mark it up with the tags you learned

[4] when you're finished with your page, press the save button and hand in the URL ou get  to get the "hello-tag" badge

 ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------