Superhero of the Open Web Alliance (SOWA) Application

Hack to make your first Webpage

• • • DRAFT***

"mad libs" interactive; In order for us to retrieve your highly confidential requisite initiate orientation video, please fill in the blanks below:

   Fill in the blanks:

   I think that ___________ makes the web special

   I think that ____________ makes the web difficult to use.

Pitch: The world of the open web is full of opportunities for you to create serious cats, planking videos and mindcraft empires. However deep within the trenches we are threatened by the evil nemesis of firewalls and parental controls, which prevent free and open webmaking for all. The world needs you, a superhero of the web to save the day! In the Hackasaurus Challenges you will go through basic super hero training to learn how to create your own webpages in the battle for the open web. <this could be a motion graphic thing and then we popcorn the memes and the web threats>

Challenge 1: Application: Superhero of the Open Web Alliance

Description

Since the dawn of superheroism, there have been three initial requirements of all individuals who have chosen to take the path of joining the Superheros of the Open Web Alliance (SOWA)- 1. having a superhero name, 2, having at minimum of 1 power that can be classified as a "superpower" (your superpower can be anything!) and 3. demonstrating the ability to have a signature action move. In this challenge you will introduce yourself to the SOWA by submitting your initial requirements and in turn, learning how to start hacking your world in your new superhero identity.

Task 1: Introduce Yourself

Submit your Superhero name and superpower to SOWA by entering that here. (make sure we have some examples of superpowers at this stage so kids know the superpower can really be anything).

Task 2: Show us Your Moves

Every Superhero in SOWA has their own signature move. Take a photo or video of your action move and post it on the discussion wall.

Include examples of photo/video tools/platforms

Task 3: Get to know the other Superheroes

Check out your peers moves and hack at least one of them to make it your own. Take a photo or video and post it in the discussion wall and link to the image that you hacked.

Task 4: Hack your world

In this challenge, you have proven yourself worthy of participation in the Superheroes of the Open Web Alliance. Please submit a photo of other things in your own world that you have hacked and/or record yourself talking about things that you like to hack in your time off from your superhero duties. Needs example of real life hack, might want to reshoot demo

Community Badge : Wave Description: awarded by peers as a way to say hello (wave) to each to each other.

Challenge 2: Hacking the News by Remixing HTML ( and CSS)

Description

All members of the Superheroes of the Open Web Alliance need to ensure that their efforts to protect and defend the web as we know it are well documented. In this challenge, you will hack, deconstruct and modify online news sites to publicize your do -gooder work to the world.You will be briefed on your tools, including the X-Ray Goggles bookmarklet, which allows users to see and manipulate the HTML and CSS that make up webpages.

Task 1: Watch the Intro video to HTML to be briefed on how to create content for and build web pages

<insert interactive>

---

>>>> A version of the lovebomb: http://labs.toolness.com/temp/simple-lovebomb/

Task 2: Install the Xray Goggles

Go to Hackasaurus.org and install the X-Ray Goggles (This link will open a new tab; when you're done, come back here!)

Task 3: Remix the HTML

Go to a news site (for example nytimes.com) and with your goggles on, hover over parts of the webpage that you would like to change. Click R to remix an element. Now look for a

and <img> elements, and remix the content to include your superhero saving the day stories.

Task 4: Share your Hack

Hit P and copy and paste the url of your hack into the discussion wall.

Task 5: Bonus Round

Check out in the discussion wall what your peers have hacked and hack their hack. <if we had a working prototype here- we could have them submit their work to the "hacker battle">

Task 5 Skill Badge : HTML Decoder Badge Description: Rubrics: Other possible Badges: Navigator Apply for Dec Badge:

Challenge 3: Save the world & do it with (CSS) style

Description

A good superhero must be a master of illusion. You must be able to wield style on webpages to protect the public with your superpowers. In this challenge you will change the <style> elements of a webpage to show off your super styling skills to the world.

Task 1: Get started with CSS

Yikes! Johnny is all mixed up and he needs you to put him back together using your CSS super stylin' skills. Take this training mission to get up to speed with CSS and help put Johnny's head back on straight!

---

> CSS puzzle interactive

Task 2: Share with your Peers

Explain to your peers what you think CSS is all about. Try to define how CSS is different than HTML. What did you find difficult? What did you enjoy the most about your first mission? Write your comments in the discussion section.

Task 3: Get Stylin

It's time to move beyond the training mission and go out on into the field. Choose any webpage and make it look different.Turn on your goggles and click C and the spacebar (at the same time) to change the <style> elements. Try modifying the background color, or perhaps your font to make a distinctive mark on the web.

Task 4: Share your Hack

Hit P. Then hit "Publish to Internet" and copy and paste the url of your hack into the discussion wall. Go ahead and leave some comments on your peers hacks. (add guiding questions)

Task 3 Skill Badge : CSS Superstyler Badge Description: Rubrics: Other Badges: Design Thinking

Challenge 4: Make it Real! Create your first webpage

Description

As a member of the Superheroes of the Open Web Alliance, make an instructional webpage to teach your peers something that you are an expert at. This will be featured in the SOWA manual- for other superhero wannabees. In this challenge you will use the specialist Web Page Maker tool, to create your own webpage using HTML and CSS.

Task 1: Watch the Intro video to Webpage Maker to be briefed on how to create content for and build web pages

(and/or interactive thing here)

Task 2: Make a Webpage

Go to http://toolness.github.com/webpage-maker-prototype/ and choose a template and make your submission to the SOWA Manual for superhero wannabees. Be creative. Think about how you can make changes to the style to make your webpage stand out.

   Some parameters to help you out:

   Your superhero must have a name and visual representation 

   Your superhero must have a biography

   What are his/her superpowers?

   How did he/she get them?

   How do his/her superpowers help to protect the web?

   Does your superhero have a nemesis or challenge that they face? 

Task 3:Share your Webpage

Click P then hit the Publish button and copy and paste the url of your hack into the discussion page.

Task 4: Rescue Badge

Task 3 Skill Badge : Webmaker Badge Description: Rubrics: <Another option would be to use the lovebomb maker here and have them make a superhero S.O.S. signal-- a la commissioner gordon beaming out the bat signal.>

Other Badges awarded throughout the community: Helpful Feedback, Peer Coder, Creative Webmaker, You Rescued Me badge.