This Valentine’s Day, drop a love bomb on someone you love

February 9, 2012 § 2 Comments

Here at Mozilla, we like to drop “love bombs” on our favorite friends and colleagues. To reward great work and show we care.

The good folks at the Mozilla Hackasaurus team have taken it a giant step further. As part of their ongoing mission to make webmaking fun and easy for the planet, they’ve created this lovely “Love Bomb Builder” protototype. Making and sending hand-crafted love bombs has never been simpler! (See Jess Klein’s “On Inspiration and Lovebombs.”)

How does it work?

Simple! Choose a template, say a little about who and why the love bomb is for, then fire away! Your mom, dogwalker or special someone can click on the link you send them for a lovely digital token of your affection — lovingly handcrafted in HTML and CSS. I got one from my wife the other day, and it made me blush.

WARNING: Love Bomb Builder is an early prototype and still a little rough around the edges. May prematurely detonate. May cause blushing and/or spontaneous emotional combustion. No webmakers were harmed in the creation of said love bombs.

Some samples of what your customizable love bomb can look like:

  • Atul’s love bomb to Tim Berners Lee for creating the world wide web.
  • A fist bump for Vint Cerf for thinkin’ up the whole “open Internet” thing.
  • A wrestler mask for Madonna. Cuz she’d look great in one!

So what are you waiting for? Go make one now and send it your geekiest Valentine!


Building a generation of web makers in Africa

November 23, 2011 § 1 Comment


With the release of the Mozilla Hackasaurus “hacktivity kit,” hack jams are starting to pop up around the world — including the first-ever Hackasaurus event in Africa.

Held last week at the Nairobits Design School in Nairobi, the jam introduced youth and novice web makers to the basic building blocks of HTML, all by messing around with their favorite web pages. (Check out Cliff Argwings post on the event here.)

The goal: help youth see the web as something they can actively make and shape, and potentially open the door to deeper design and web developer skills.

Prototyping web maker jams for the world

The event was also a chance to test out some of the new Hackasaurus Hacktivity Kit, a how-to guide designed to make it easy for anyone to host their own design jam for novice web makers.

Our goal is to massively scale up these local design jams in 2012, by providing the tools and resources local communities need to self-organize and adapt the template to their interests and needs.


Messing around with the web

That’s what the Mozilla Kenya team did last week, kicking off with a brief intro to the Mozilla Mission before diving into Hackasaurus. Cliff writes:

Then came the moment of truth: we had to test if the kids grasped how the Hackasaurus X-ray Goggles worked — and also test their html and css skills.

The results are a great example of what we mean by web making, and the “a ha!” moment that can happen when people play around with Hackasaurus for the first time: a shift to seeing the web as something you can tinker with, and a potential gateway to deeper skills.

Before Hackasaurus...

...after Hackasaurus

I really like what Joyce wrote in her hack:

I find it filled with fun… plus am also learning a new skill. I wish I could learn more and more of this!!! thanx for the skills!!!

"i wish i could learn more of this!!!!" Joyce's remix from the Nairobi jam.

Photos, sample hacks and more

“Mucking around with HTML is like baking bread or changing a tire”

November 21, 2011 § 2 Comments

Meredith Stewart

I love that analogy from Meredith Stewart, a 7th grade history teacher in North Carolina writing about her first Mozilla Hackasaurus hack jam.

Sponsored by the National Writing Project, the recent jam gave educators a chance to use Firefox and Hackasaurus to mess around with websites by changing the underlying HTML that makes them tick.

Meredith’s post about the experience perfectly captures the value of getting our hands dirty through webmaking, and reminded me of Mitchell Baker’s keynote on creation vs. one-way consumption at the Mozilla Festival. Meredith writes:

It’d be easy to say, “That sounds fun, but what’s the point?”

For me, mucking around in the HTML was like making bread from scratch or changing a tire. They’re activities in which I want to engage as an act of understanding and joy, not necessarily of utility or efficiency.

I think for ourselves and our students understanding the means of production are important, so that we can be responsible and thoughtful teachers, students, and humans.

Hack jam organizer Andrea Zellner + fellow hacker

The hack jam’s organizer, Andrea Zellner, also writes beautifully about revealing the hidden structures that make up our digital lives:

As more and more research and attention is paid to the ways our literate lives are mediated by interactions on the internet, less attention is paid to the function of the tools that get us there. How many facebook posters understand the algorithm of the newsfeed? How many people uploading content to Youtube understand the genesis of the embed code? There is an entire hidden structure of the webpages with which we interact that mediates the way we compose and present ourselves on the web.

Enter the hackjam: designed to make visible the hidden structure of the internet for K12 students (but most grownups I know would benefit, too!), these tools provide an entry into inquiry about the ways we are both freed and bounded by the hidden structure of the internet pages we visit.  By developing our hacker selves, we are then empowered to move ourselves more critically through these spaces, rather than being led through them.


VIDEO: How to use Mozilla Hackasaurus

November 10, 2011 § 7 Comments

This two-minute video provides a quick and easy explanation of how you can use Mozilla Hackasaurus to remix web pages and messing around with HTML in seconds. (WARNING: may alter your online reality!)

Hosting a Hackasaurus game jam for kids

August 12, 2011 § 6 Comments

Mind the gap.

As part of this week’s Hackasaurus game sprint, eight rambunctious kids aged 8 to 11 joined us in the new (and still under construction) Mozilla Toronto office. Our mission:

  • Test early game ideas and prototypes. Like X-Ray Goggle training missions, hack mazes, and hackable comic books.
  • Brainstorm totally new ideas. Have them surprise us with cool stuff we’ve never thought of.
  • Stage a mini dress rehearsal for what we want to do on a larger scale at the Mozilla Festival. Bringing kids, game designers and developers together in London for Hackasaurus design jams and hack sprints this November.

1) Icebreaker: Hacking board games

To get warmed up and into the spirit of the thing, Jess had the kids start by hacking some traditional board games.

Kids hacked and reinvented some traditional board games -- like Snakes and Ladders, Monopoly and chess -- changing the rules and game mechanics to make them more fun.

Ways to hack traditional games. The kids came up with a fifth: adding narrative and back story.

Turning Monopoly into "Hackopoly."

In this version, each game piece has unique powers.

2) Testing Hackasaurus game prototypes

Next we tested some early game prototypes for the X-Ray Goggles. Like Atul’s “Parable of the Hackasaurus,”and an early bare-bones “hack maze” prototype Dan Mosedale and David Humphrey put together.

In both cases, players are given a “broken” page and then use the X-Ray Goggles to fix it using simple HTML.

Tristan uses the X-Ray Goggles to fix broken elements on the page. The page responds in real time, counting down the number of elements left to fix.

 3) Kids designing their own game prototypes

Next we divided the kids into three groups:

  1. A “hackable comic book” group. Working on illustrations and early narrative for an interactive comic-book style experience using the X-Ray Goggles.
  2. A “build your own game using Scratch” group. Thinking about how you might incorporate the X-Ray Goggles into the gameplay.
  3. A “hack maze” group. Working on how to create “Portal”-style games where users create and share their own hack mazes.

This group began paper-prototyping a hackable online comic book experience. Players would use the X-Ray Goggles to change the characters and narrative, with remixing elements in HTML and CSS built right into the story.

This group designed their own game using Scratch. In less than 90 minutes, they were able to create their own "zombies vs. machine gun tower" game. They imagined using the X-Ray Goggles to hack leveled-up super zombies back into normal zombies.

Most games have a "training mission" or two to help you figure out how to play. The X-Ray Goggles need the same. Using the "Parable of the Hackasaurus" as a prototype, Atul hacked together this quick training mission (using artwork from the kids) to help users understand how to remix images. Individual training puzzles like these could be linked together into a larger "X-Ray Goggles obstacle course" or "hacker parcours."

What did we learn?

  • Testing and co-designing with kids is *always* a good idea. I was worried that we weren’t ready for real kid feedback. Jess helped me see that was wrong — and I’m totally sold. Testing with users — especially kids — is always going to yield interesting results.
  • It’s important to really listen and ask twice. Some of the kids would give one response in a group, but then give different answers when asked individually afterward. Like anyone, they don’t want to hurt your feelings. They won’t necessarily tell you “I think your prototype is lame” right to your face. So it’s crucial to ask and re-ask in different contexts.
  • Most kids instinctively get and speak game language. They think like game designers. To an even greater extent than anticipated. With complex concepts for character, narrative and game mechanics.
  • Some of our stuff is skewing too young. Two 12-year-olds privately described one of our prototypes as “baby-ish” and “cheesy.” Given that we’re targeting a 10 to 15-year-old age group, this is feedback we need to take seriously, and incorporate into our re-branding efforts in Q4 / Q1. Over-earnestness or babyish-ness is the kiss of death.

Portal gives you tests and progressive levels that require you to learn new skills as you go. An X-Ray Goggles "obstacle course" or set of training missions can do the same.

What ideas should we incorporate going forward?

  • Prioritize the X-Ray Goggle training missions. We’ve added this to the Hackasaurus roadmap for beta in September. The current X-Ray Goggles page makes it easy to install the Goggles — but doesn’t help you figure out how to use them in a scaffolded, self-guided way. We need to add that next.

The basic skills you need to start messing around with the X-Ray Goggles

  • The hackable comic book concept shows promise. Kids immediately got it, and it gave them a chance to get their hands dirty with illustrations and paper prototypes quickly.
  • So do the Tilt 3D and “Portal for the web” concepts. Kids liked the video demo of Tilt 3D, and liked the idea of busting hacks as a way to “unlock” pages and do cool stuff to them.
  • Unlocking super-gadgets. One of the best ideas was that busting a hack on a page would unlock a super-gadget — like a flamethrower — that you can then use to “set fire to the web page” you’re on. Or unlocking a Katamari ball you can roll around, or jackhammer you could use to bust up the page. This gives regular incentives to progress through various hack puzzles and pages — unlocking cool new web superpowers as you go.
  • Consider avatars and characters. This was the other idea we’d never really considered — web characters or avatars that run around the page, jump through portals, etc.

More detail on training missions, comic books and hack mazes coming soon

Hack this Game: Portal for the Web

August 4, 2011 § 2 Comments

Portal” and “Portal 2” are mind-bending and addictive. There’s something magical about firing your first “portal gun,” hacking through the fabric of everyday space to unlock whole new dimensions and possibilities.

What if we could do the same thing to the web? Making it easy for players to “fire a portal gun” at everyday web pages, using the Hackasaurus X-Ray Goggles to uncover easter eggs, solve puzzles and run through “hack mazes.” Using cool new tools like WebGL and Tilt in the background to bring cinematic transitions and game-like effects to familiar web pages. Like “Where in the World is Carmen San Diego” meets the hacking the Matrix.

Hackasaurus game challenge: Build a “hack maze” for the X-Ray Goggles

That’s the Minimum Viable Prototype idea I’d like to submit as part of the “Hack this Game” design challenge and hack sprint. Why is it a good fit for the Hackasaurus project and road map right now? Because it seems:

  • Doable. All we need for a prototype is one or two hack mazes, consisting of three or four web pages a piece. Plus some cool early examples of what the HTML5 transitions and effects could look like.
  • Familiar. Players, game designers and developers are already familiar with the Portal game, making it easier to explain and wrap our minds around.
  • Participatory. In the medium-term, we can make it easy for players to create and share their own hack mazes. This gives Hackasaurs an easy pathway beyond messing around: building mazes and worlds out of your hacks, and sharing them with friends.
  • Builds off what we’ve already got. Hackasaurs are already using the X-Ray Goggles to create and share their “hacks” — remixed versions of everyday web pages. This adds a game layer over top of them, and a more compelling reason to storify and share your remixes with others.
  • Fun (?). That’s the #1 requirement! I don’t think we’ll know whether it’s genuinely fun until we build a prototype. If we succeed, we’ll weave basic HTML right into the game-play, as the means by which players solve puzzles and advance. All sugar, no medicine.

X-Ray Goggles: coolest invention since the Portal Gun?

In the same way that the portal gun alters your sense of reality, so do the X-Ray Goggles — revealing the web as something malleable, tinkerable, made by all of us. With glowing bits of Matrix-like code just under the surface that we can mess and play around with. Safely experimenting, remixing and breaking things to see how they tick.

This turns the open web itself one giant game. We can build on the basic game mechanics of hack mazes to lay the foundation for David Humphrey’s larger vision: turning the open web into one giant gamespace or Alternate Reality Game (ARG).

Running through hack mazes

What would the basic game mechanics consist of? Players would use the X-Ray Goggles to solve puzzles and advance through a hack maze. These mazes can be created by us to start, but ultimately be created by players / educators / game designers / interactive storytellers / anyone.

Spot and unlock hacks to advance. In the same way that Portal presents you with a locked room and a portal gun to try and get out of it, Hackasaurus would give you a familiar-looking web page — but with a difference. One of the elements is different. Something’s been altered or remixed somehow. Maybe the photo on that New York Times page has been changed to a picture of somebody’s Cocker Spaniel. Or maybe the Google logo has been transformed into a sock monkey.

Can you spot the hack — and use the X-Ray Goggles to change it back? Or remix it yourself? Once you do, the page itself can start spinning and twisting and come to life in crazy ways (using WebGL, Tilt and other HTML5 magic behind the screen). A portal opens up around your hack, and it feels like you’re stepping through the guts and DOM of the web page itself. Like seeing the glowing green code behind the Matrix, sucking you through the web to the next page in the maze.

How would players create hack mazes?

What would the basic steps in the user experience for creating a hack maze look like?

  1. Bust a hack with the X-Ray Goggles. Go to any web page and use the X-Ray Goggles to remix something. Change the photo on a friend’s web site. Alter some text on a Wikipedia page, etc.
  2. Repeat. On to the next page. The user making the maze goes to a new page and repeats the process. By repeating this process three or four or however many times, you’ve created a “Hack Maze” — a series of hacks strung together across multiple pages. (Ideally with some kind of X-Ray Goggles “Maze-Maker” functionality tracking the process and making it easy in the background.)
  3. Publish and share your maze with others. Congratulations! You just made a hack maze! Now why not share it with friends? Maybe it’s a “flags of the world” maze or a LOLcats maze or a politically subversive re-imagining of the Tea Party maze. Hackasaurus mazes would be limited only by the maze-maker’s imagination.

Play as participation, participation as play

The best mazes can become popular games and puzzles for Hackasaurus. Hack Mazes could have themes, learning outcomes, or just be hilarious. An educator could, for example, create a Hack Maze on geography, where flags or labels on a map are re-arranged and students have to use the X-Ray Goggles to put them back. Or you could create a Hack Maze for School of Webcraft that teaches the basics of HTML, CSS or Javascript along the way. The beauty is in letting players decide and make up and share their own experiences. Play as participation, participation as play.

Wow factor = bringing familiar pages to life in strange new ways

  • The wow factor will come from using HTML5 effects and transitions to blow players’ minds. Bringing everyday web pages to life in crazy ways no one’s seen before. Pages can change color, spin, and twist apart in three dimensions as you successfully open a portal. Or pages could break into a million pieces like jagged glass, or literally “explode” if you use the X-Ray Goggles wrong. (Check out Tilt or the effects section at Three.js for inspiration.)
  • Make failure fun. Like Jane McGonigal‘s example from “Super Monkey Ball 2,” a which makes throwing a gutter ball hilarious and by extension, makes failing fun. Let’s follow the same principle to make HTML less intimidating and make breaking stuff fun.
  • Make HTML and the web’s building blocks more tangible. Less like code, more like Lego. The transitions and effects — by exploding or stretching the DOM of the page in 3D, for example — can make the web seem more tangible, craft-like and malleable.
  • Play with a Matrix-like sense of uncanny and mind-bending.  Imagine you’re sitting in your living room knowing that *one* element is suddenly different. Maybe there’s a red ruby slipper suddenly hidden in the top drawer of your desk. Or the picture of your family has been mysteriously swapped with a Selleck waterfall sandwich. That’s the sensibility we can bring to players’ own everyday online reality. Imparting a sense of wonder, magic, and Matrix-like mind-bending.

Build this game: Want to get involved?

Hackasaurus will be running an ongoing “Hack This Game” design and developer challenge. To create and share games and puzzles for the X-ray Goggles, making web-making and tinkering fun for kids aged 11 – 16 (and ideally adults as well).

We’re looking to get game designers, web developers and HTML5 enthusiasts together to swap ideas and code. The only restriction: game concepts have to involve the X-Ray Goggles in some way. Here’s how to get involved:

  • Our first Hackasaurus game sprint is happening Aug 8 – 12. With more sprints to follow. See this post for details.
  • If you’re interested in participating at any point, please get in touch through the Hackasaurus mailing list, or join a weekly Hackasaurus community call.
  • Share your prototype ideas and goals for the sprint as comments on this post, or on the Game Sprint etherpad. Linking to your own blog posts, tools, napkin sketches, etc.
  • The Hackasaurus web site and project page have plenty of project links and tools.
  • We’ll turn up the volume and engage kids, game designers and developers at the Mozilla Festival in London this November.

Hack This Game: Hackasaurus game sprint Aug 8 – 12

July 29, 2011 § 16 Comments

Web-making and remixing as game

HTML5 opens up amazing new gaming and storytelling potential. What if we could combine that potential with Hackasaurus to turn web-making, remixing and learning basic HTML and CSS into awesome game-like experiences? Where kids use the X-Ray Goggles as a controller / magic wand / portal gun to unlock hidden dimensions, solve puzzles, and sharpen their web-maker kung fu to level-up and advance through the game?

HTML5 games: A buncha cool cats converging

That’s the discussion a bunch of interesting folks in and around Mozilla had in last week’s Hackasaurus community call. A number of us have been dreaming up  HTML5 game ideas, all messing with the idea of the open web as a giant Alternate Realty Game.

  • David Humphrey is interested in building HTML5 games that break out of the usual gamespace box, using the open web itself as the game world — plus enabling greater collaboration amongst standalone HTML5 game projects.
  • Atul Varma wants to turn the Hackasaurus X-Ray Goggles into a “controller” for web games, creating an API that makes this easier for developers, and experimenting with web literacy puzzles like “The Parable of the Hackasaurus.”
  • Jono Xia has been teaching a School of Webcraft course on HTML 5 game development, and wants to reduce the barrier to entry for novice game developers.
  • Jess Klein has worked at Sesame Street creating games for smartphones and is interested in ARGs for Hackasaurus jams and storytelling.
  • Brett Gaylor has been exploring the gaming potential of Popcorn.js, thinking about a comic-book / WebGL hybrid, and possibly adapting a property like Cory Doctorow’s Little Brother into an interactive gaming experience.
  • Anna Debenham is interested in learning more about how kids can build their own games, instead of just consuming them.
  • Geoff MacDougall has spent 10 years in the game industry (mostly around MMOs) and is interested in helping to make introductions and find additional funding or resources to support these efforts.
  • Ben Moskowitz is interested in adapting classic arcade games like Pac Man or Asteroids for Hackasaurus, and drawing on our Knight-Mozilla innovation challenge model for Hackasaurus design challenges.
  • Plus many, many others… many of whom we haven’t even met yet. (Like you?)

Next steps: how do we work together?

Games are a core part of what Hackasaurus is building. So how do we capitalize on all this momentum and interest? We need a framework for effective collaboration, while also giving everyone the freedom and flexibility they need to purse their own projects. Here’s the plan we landed on in our community call:

  1. Document our thinking. Too much of this stuff exists in our heads — we need to get it down on paper and in blog posts.
  2. Run a hack sprint. Come together to build a minimum viable game prototype, using the X-Ray Goggles as the play device. A bunch of us are going to be in Toronto Aug 8 – 12, so let’s try then.
  3. Launch a more robust “Hack This Game” innovation challenge for Hackasaurus later in Q3 / Q4. Probably with the launch of Hackasaurus Beta in September. This will establish some open innovation infrastrucutre and web presence, making it easier for designers and developers to share ideas and code.
  4. Turn up the volume at the Mozilla Festival In London this November. We can showcase our early progress, and use that as a jumping off point for more hack sprints and testing with kids and game designers. Dovetail with what Jono’s already planning there.
  5. Constantly involve kids. That’s the secret sauce for Hackasaurus generally. Whatever we do — as Jess Klein keeps reminding us — we need to constantly involve kids as co-designers and testers to increase the awesome.

“Hack this Game:” Design challenge and hack sprint | Aug 8 – 12

With that in mind, a bunch of us will gather August 8 – 12 for a game design and hack sprint. We’ll use the new Mozilla Toronto office as home base, and do our best to enable effective remote participation as well.

How do we make the game sprint as successful as possible?

  • Start sharing ideas for a minimum viable game prototype. Let’s start sharing ideas and documentation for the prototype we want to build in the sprint. The one major requirement: use the X-Ray Goggles as part of the game mechanics.
  • Keep it simple and focused. The key will be coming up with something we can prototype effectively in 3 – 5 days. A lot of people have ambitious ideas — but the art will be quickly building a single atomic unit of fun.
  • Involve youth effectively. We’ll need to involve kids at the right points in the process, so that it isn’t boring or ineffective.
  • Encourage side-by-side collaboration. The key to past successful sprints we’ve done is having developers work side-by-side with filmmakers, educators, etc. We’ll need to do the same with game designers and players.
  • Share cool assets & tools for developers to play with. Like:

Want to get involved?

  • Physical space is limited, so if you’d like to participate in the Toronto sprint, please get in touch with me through matt [at] mozillafoundation [dot] org.
  • If you’re interested in participating remotely, please get in touch through the Hackasaurus mailing list.
  • I’ve started an etherpad for folks to self-organize and help work out logistics here.
  • Please share your prototype ideas and goals for the sprint as comments here, or on the Game Sprint etherpad, linking to your own blog posts, napkin sketches, etc.
  • We can work out further details in Tuesday’s Hackasaurus community call. See you there!

Where Am I?

You are currently browsing entries tagged with hackasaurus at o p e n m a t t.