|
|
| Line 101: |
Line 101: |
|
| |
|
| More background for HTMLPad can be found in Atul's blog post entitled [http://www.toolness.com/wp/?p=1107 Prelude To Barcelona]. | | More background for HTMLPad can be found in Atul's blog post entitled [http://www.toolness.com/wp/?p=1107 Prelude To Barcelona]. |
|
| |
| == Ideas For Future Hackasaurus Tools ==
| |
|
| |
| These tools don't actually exist yet. They also may never exist as independent products—for example, their functionality might be rolled into an existing tool instead.
| |
|
| |
| === Mixmaster ===
| |
|
| |
| While goggles allow one to take apart a page and inspect its individual parts, the Mixmaster allows one to actually ''change'' parts to remix the page. For instance, the tool can be used to change the font that’s used on a page, or to hyperlink a word on a page to its entry on Wikipedia. Each alteration is called a hack and hacks can be easily shared with friends for any purpose—to make a page, a site, or even the entire Web more usable, more hilarious, or more meaningful. Experimenting with this tool engages people in writing short snippets of HTML, which provides scaffolding for future adventures in Web development.
| |
|
| |
| Development on this tool has not yet started, though similar functionality has been added to the goggles as an experimental feature. Here's some wireframes to explain our thinking:
| |
|
| |
| Wireframe: Boring Form <imagemap>
| |
| Image:hanging.jpg|400px|alt=Boring Form
| |
| default [http://www.flickr.com/photos/toolness/5288844406/in/pool-1590086@N21/ flickr photo]
| |
| </imagemap>
| |
|
| |
| === Magnetic Poetry ===
| |
|
| |
| <imagemap>
| |
| Image:messing.jpg|400px|alt=Magnetic Poetry
| |
| default [http://www.flickr.com/photos/jessicaklein/5290109843/in/pool-1590086@N21/ flickr photo]
| |
| </imagemap>
| |
|
| |
| *This mock-up explores how remixing code is like magnetic poetry.<br>
| |
| *Thinking of code this way allows users to define their own rules, rather than defining lines of sequential procedural code.
| |
| *Some users might approach a sentence grammatically, others visually, and some might just cluster components together that they will eventually make sense of.
| |
| *There's also an element of social collaborative mentoring, where users can help each other in developing code.
| |
|
| |
| '''Next Steps:'''
| |
| *Develop a functional prototype.
| |
| *Consider integrating a gaming aspect.
| |
| *Consider ways to include a mentoring/hint/bumper-bowling system that isn't as annoying as the MS Paper Clip.
| |
| *Think about systems for users to define their own rules.
| |
| *Think about social collaborative mentoring.
| |
| *Think about social collaborative badging, karma for being helpful, etc.
| |
|
| |
| === Advanced Tools (coming soon)<br> ===
| |
|
| |
| *The highest level of engagement are the “geeking out” tools. <br>
| |
| *These are for users with a serious interest in web design and development.
| |
| *Ideas in development:<br>
| |
|
| |
| <br>
| |
|
| |
| '''1) Creative Wireframing Tools'''<br>
| |
|
| |
| *wireframing tools to allow teens to create new interfaces and interactions from scratch. <br>
| |
| *May involve pre-existing tools like [http://www.omnigroup.com/products/OmniGraffle/ OmniGraffle] or developing our own from scratch.
| |
|
| |
| '''<br> 2) "Build out" game'''<br>
| |
|
| |
| *Players would use physical cards to trade with other kids, etc. <br>
| |
| *Maybe you need badges/achievements to trade or make certain kinds of content or code.
| |
|
| |
| <br>
| |
|
| |
| '''3) Super funked-out HTML editor'''<br>
| |
|
| |
| *a super funked-out HTML editor would allow users to create a brand new page/website from scratch.
| |
| *May build on some of Atul's [http://www.toolness.com/wp/?p=1107 HTMLPad] work <br>
| |
|
| |
| <br>
| |
|
| |
|
| == Similar Tools == | | == Similar Tools == |