XRay Goggles

XRay Goggles Hacktivity Kit

Big Picture

  1. Participants will understand that:
    • "Hacking" has always been a key element in the creative process. It is a constructive collaborative activity, not a destructive one.
    • the Web is made out of building blocks that they can rearrange to create new things through an iterative process.
    • HTML is a language used to tell computers how to build webpages so that humans can consume them
    • CSS means cascading style sheets
    • Parts of a webpage include HTML, CSS, graphic assets and text content
    • that an element is the combination of an opening and closing tag and the content in between
    Learners will be able to :
    • Use the browser to remix content found on the web.
    • tweak or enter a URL
    • switch between browser tabs
    • use keyboard shortcuts (i.e. for copying and pasting)
    • right-click and scroll with the mouse
    • use the Goggles to replace both text and images on a site
    • share a hacked page with peers
    • use a search engine to find specific content
    • find the content he/she was looking for
    • revisit hackasaurus.org or the MDN for resources
    • create text on a webpage using basic HTML tags
    • recognize HTML and CSS
    • install the X-Ray Goggles

  2. The Results:

    • Learners will hack to create a new game or a new dance
    • Learners will use the XRay Goggles to make a new project.

  3. The Event Type:

  4. Tell the story:

    In the Hack-a-Day event my participants will learn how to hack in their every day lives. Through the creation of a league of superheroes, we will learn about the Open Web and collaborative work, as well as a bit of HTML and CSS.

  5. Circle Up Module

    • What is hacking? Where can we find examples of hacks?
    • How are webpages and websites dynamic systems?
    • Which are the fundamental parts of a webpage?
    • How does a webpage change when you change one of its parts?
    • Why is it important to have open access to the Internet?
    • Why is it important that the web is designed by many individuals?
    • Why is it important for websites to invite participation?

Introductions

  1. webmaker_logo

    Introduction to Webmaker

  2. Introduction to the XRay Goggles

  3. howtouse

    How to Use this Kit

  4. howtouse

    Crash Course in HTML and CSS

Additional Resources

Hacktivities

  1. Icebreaker

    How to Hack: the Robot Dance
    step02_dancecardRobot

  2. Diving In

    Hack the Web: With the XRay Goggles
    Hack the Web

  3. Hands on Hacking

    Remix-a-thon: Save the Open Web
    Remix Page

  4. Playtesting and Iteration

    Learners share their projects.
    Is the user:
    • following the instructions?
    • getting the joke?
    • understanding the commentary?
    Have learners form groups and take notes.
    Start a discussion by having learners complete sentences.
    • I thought you did a nice job with/of ___.
    • You might want to improve ___.
    • Your idea was fun/interesting because ___.
    • What you made was ___ and it made me think/feel ____.
    Let your learners review each other's work.

    When they're finished with their reviews, ask them what next steps would be for each project. How can each project be iterated and improved upon?

  5. Assessment

    How did your learners do? Here is a helpful guide for assessing their work.