|
|
| (12 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| <section begin="summary" />{{RoadmapSummary
| | #REDIRECT [[Hackasaurus]] |
| |icon=Hackasaur.jpg
| |
| |pagelocation=Drumbeat/Batucada/Roadmap
| |
| |pagetitle=Hackasaurus Project Page
| |
| |owner=Atul Varma, Jessica Klein
| |
| |updated=April 19, 2011
| |
| |status=Draft
| |
| |description=Hackasaurus helps kids hack.
| |
| }}<section end="summary" /> __NOTOC__
| |
| | |
| == Project Tools ==
| |
| | |
| *'''web site''': [http://www.hackasaurus.org/ hackasaurus.org]
| |
| *'''X-ray Goggles''': See what the web is made of. Mess around & remix. [https://secure.toolness.com/webxray/ https://secure.toolness.com/webxray/]
| |
| *'''HTML Pad''': Create your own web page in seconds: [http://htmlpad.org/ htmlpad.org] <br>
| |
| | |
| ----
| |
| | |
| *'''Drumbeat project page: '''https://drumbeat.org/en-US/projects/hackasaurus/
| |
| *'''wiki page:''' https://wiki.mozilla.org/Drumbeat/Hackasaurus
| |
| *'''mailing list''' (working group; daily): [http://groups.google.com/group/hackasaurus Google Group]
| |
| *mailing list (announce list; occasional): ''coming soon''<br>
| |
| *planet hackasaurus blog: ''coming soon'''''<br>'''
| |
| *'''twitter''': [http://twitter.com/#!/hackasaurus @hackasaurus] [http://twitter.com/#!/search/%23hackasaurus #hackasaurus]
| |
| *'''facebook''': http://www.facebook.com/#!/pages/Hackasaurus/140459162682866
| |
| *'''photos & visual assets '''(tag = hackasaurus)''':''' http://www.flickr.com/groups/hackasaurus/ <br>
| |
| *'''issue tracker''': http://hackasaurus.lighthouseapp.com/projects/66492-hackasaurus/overview
| |
| *'''source code''': Github: https://github.com/hackasaurus'''<br>'''
| |
| *'''theory behind the project: Hacker Literacy''': http://ietherpad.com/wXmjT3Zes1'''<br>'''
| |
| *'''presentation deck '''(draft only; in progress): http://mzl.la/hQ2h62
| |
| *chat room (IRC): irc.mozilla.org #hackasaurus
| |
| *roadmap: ''coming soon''<br>
| |
| *community calls: ''coming soon''
| |
| | |
| == Get involved now <br> ==
| |
| | |
| #'''Attend an '''[[#Hackasaurus_Hack_Jams|upcoming hack jam]]'''. '''Or organize a hack jam in your community'''. We're looking to spread to new cities beyond New York and Chicago. Get in touch through our [http://groups.google.com/group/hackasaurus?pli=1 mailing list]. <br> '''
| |
| #'''Start hacking with Hackasaurus tools''' like [https://secure.toolness.com/webxray/ X-Ray Goggles]or [http://htmlpad.org/ HTML Pad].
| |
| #'''Share your own ideas, tools and resources'''. Through our [http://groups.google.com/group/hackasaurus mailing list] or on [http://twitter.com/hackasaurus twitter].
| |
| #'''Become a Hackasaurs partner'''. We're looking for learning centers, libraries, media centers and other partners to help design, develop and host Hackasaurus. Get in touch through our [http://groups.google.com/group/hackasaurus?pli=1 mailing list].
| |
| #'''Help develop the Hackasaurus tool set'''. Through our [http://hackasaurus.lighthouseapp.com/projects/66492-hackasaurus/overview issue tracker] and [https://github.com/hackasaurus Github]. | |
| | |
| == About this project ==
| |
| | |
| *'''The project in 5 sentences''':
| |
| **Hackasaurus helps teens hack. Through tools that makes it easy for youth to explore, remix and redesign the web.
| |
| **Plus local events or "hack jams" that make hacking and digital literacy easy, social and fun. <br>
| |
| **We're designing around the way kids learn technology, based on Mizuko Ito's concepts of hanging out, messing around and geeking out.
| |
| **Tools in development so far include [http://htmlpad.org/ HTML Pad] and [https://secure.toolness.com/webxray/ X-Ray Goggles], with more on the way.<br>
| |
| **You can get involved by test-driving Hackasarus tools right now. Or attend an upcoming hack jam, organize your own event, help develop the Hackasaurus tool kit, or share your own ideas and tools.<br>
| |
| | |
| *'''One-page overview '''
| |
| **Draft in progress here: http://etherpad.mozilla.com:9000/Hackasaurus-one-pager
| |
| *'''Frequently Asked Questions (F.A.Q.)''':
| |
| **Draft in progress. Please add your questions here: http://etherpad.mozilla.com:9000/Hackasaurus-FAQ
| |
| *'''Roadmap: '''
| |
| **Draft in progress here: http://etherpad.mozilla.com:9000/Hackasaurus-roadmap
| |
| *'''Project infographic:''' ''coming soon''
| |
| | |
| == Hackasaurus Events ==
| |
| | |
| *Hackasaurus "Hack Jams" are one-day and weekend events that allow kids to test and help design Hackasaurus.
| |
| *They're run through the New Youth City Learning Network in collaboration with Mozilla.
| |
| *Hackasaurus jams are designed to be modular and self-organizing. So that any teen, parent or organization can organize their own.
| |
| *Event curriculum and an organizing kit are under development.
| |
| | |
| '''Upcoming Hack Jams:'''
| |
| * Toronto Maker Faire -- May 6 - 8
| |
| * Brussels -- June -- details to come
| |
| * Chicago-- tentatively May 26, 2011 at YouMedia
| |
| *[http://etherpad.mozilla.com:9000/Hackasaurus-Emoticon 6/4 Emoticon, NYC]
| |
| * [http://etherpad.mozilla.com:9000/Hackasaurus-London-jam London]
| |
| | |
| <br> '''Previous Hack Jams:'''
| |
| | |
| *2/9 @ 4pm, New York Public Library, Grand Concourse (Bronx)
| |
| *2/10 @ 4pm, New York Public Library, 67th St (Manhattan) - [http://spotlight.macfound.org/featured-stories/entry/at-hackasaurus-jam-mozilla-encourages-young-programmers-to-change-the-web/ DML Spotlight coverage], [http://htmlpad.org/themission/ "top secret" mission handout]
| |
| *2/11 @ 3:30PM, NY Public Library, Battery Park City (Manhattan)
| |
| *2/17 @ 4pm, YouMedia, Chicago - [http://groups.google.com/group/hackasaurus/browse_thread/thread/11834680e7d05b9b Atul's notes]
| |
| *2/22 @ 4:30pm, Bay Area Video Coalition, SF - [http://crashopensource.blogspot.com/2011/02/bay-area-video-coalition-teaching-open.html Lukas' blog post], [http://www.benmoskowitz.com/?p=161 Ben's blog post], [http://brettgaylor.tumblr.com/post/3526122151/web-made-movies-at-bavc Brett's blog post], [[Media:Wmmhandout.pdf|Handout (PDF)]]
| |
| *3/23 @ 4pm, New York Public Libary, Grand Concourse (Bronx)
| |
| *3/24 @ 4pm, New York Public Library, 67th St (Manhattan)
| |
| *3/25 @ 3:30pm, New York Public Library, Battery Park City (Manhattan)
| |
| *[http://etherpad.mozilla.com:9000/Hackasaurus-Q2L 4/13 Quest to Learn] public school, NYC (Manhattan)
| |
| *[http://etherpad.mozilla.com:9000/Hackasaurus-NYSCI June-July Hacking Citizen Science at NYSCI]
| |
| *[http://etherpad.mozilla.com:9000/Hackasaurus-citizen-science 4/22 Hacking Citizen Science] at New York Hall of Science (Queens)<br>
| |
| | |
| == Hackasaurus Lesson and Event Plans ==
| |
| | |
| *[http://jessicaklein.blogspot.com/2011/04/youth-design-jams-101-building-your.html How to create your own Hack Jam (in 10 easy steps)]
| |
| *Citizen Activist (coming soon)
| |
| *Citizen Designer (coming soon)
| |
| *Citizen Scientist (coming soon)
| |
| | |
| == Hackasaurus Tools ==
| |
| | |
| These tools are still evolving and have rough edges, but their basic functionality is available now. They're also actively being used at jams.
| |
| | |
| === Hack Goggles ===
| |
| | |
| "Hack Goggles" allow anyone to easily “see through the surface” of any Web page, and obtain an intuitive understanding of how pages are composed. They can be used anywhere on the Web one hangs out, and casual use of the tool enables one to gain a rudimentary grasp of HTML, CSS, and the Document Object Model.
| |
| | |
| You can try the prototype now at [https://secure.toolness.com/webxray/ secure.toolness.com/webxray/].
| |
| | |
| === HTMLPad (aka "Magic Ink) ===
| |
| | |
| [http://htmlpad.org/ htmlpad.org] is a simple website that allows anyone to easily create a Web page, collaborate on it in real-time with friends, and share it with the rest of the world.
| |
| | |
| More background for HTMLPad can be found in Atul's blog post entitled [http://www.toolness.com/wp/?p=1107 Prelude To Barcelona].
| |
| | |
| == Similar Tools ==
| |
| Other comparable tools to HTML Pad
| |
| * http://sketchpad.cc/
| |
| * http://jsfiddle.net/
| |
| * http://jsbin.com/
| |
| | |
| HTML composition
| |
| * [http://www.wymeditor.org/ WYMEditor, aka What-You-Mean-Editor] (WYSIWYG editor, exposes structure similar to X-Ray Goggles)
| |
| | |
| Tools that many kids are already using to make web sites:
| |
| * http://www.webs.com/
| |
| * http://www.wix.com/ (Flash)
| |
| | |
| *[http://www.colorzilla.com/firefox/ Colorzilla] (Firefox add-on)
| |
| *[https://addons.mozilla.org/en-US/firefox/addon/539/ Measure It] (Firefox add-on)
| |
| *[https://addons.mozilla.org/en-US/firefox/addon/737/ Platypus] (Firefox add-on)
| |
| *[https://addons.mozilla.org/en-US/firefox/addon/748/ GreaseMonkey] (Firefox add-on)
| |
| *[http://getfirebug.com/ Firebug] (Firefox add-on)
| |
| *[http://erkie.github.com/ Erkie's Ad Destroyer] (bookmarklet)
| |
| *[http://kathack.com/ Katamari] (bookmarklet)
| |
| *[http://chengyinliu.com/whatfont.html Whatfont] (bookmarklet)
| |
| *[http://www.westciv.com/xray/ Westciv's XRAY] (bookmarklet)
| |
| *[http://mir.aculo.us/dom-monster/ DOM Monster] (bookmarklet)
| |
| *[http://konigi.com/tools/submissions/wirify-create-wireframes-web-pages Wirify Wireframing Tools] (bookmarklet)
| |
| *[http://buildorpro.com/ BuildorPro] (web app)
| |
| *[http://cssdesk.com/ CSSDesk] (web app)
| |
| *[http://www.shiftspace.org/ ShiftSpace]
| |
| *[http://www.optimizely.com/ Optimizely]
| |
| *[http://education.mit.edu/projects/starlogo-tng StarLogo TNG]
| |
| | |
| Tutorials and reference materials:
| |
| | |
| *[http://www.neopets.com/help/html1.phtml NeoPets HTML Guide]
| |
| *[http://www.smartgirl.org/writing/tutorial/index.php Smart Girl HTML Tutorial]
| |
| *[http://www.webmonkey.com/2010/02/html_cheatsheet/ Webmonkey's HTML cheatsheet]
| |
| | |
| == Team ==
| |
| | |
| *[http://twitter.com/#!/taylorbayless Taylor Bayless], YouMedia
| |
| *[http://twitter.com/#!/iamjessklein Jess Klein], New Youth City Learning Network
| |
| *[http://twitter.com/#!/jacksondevious Jack Martin], New York Public Library
| |
| *[http://twitter.com/#!/benrito Ben Moskowitz], Mozilla
| |
| *[http://twitter.com/#!/OpenMatt Matt Thompson], Mozilla
| |
| *[http://twitter.com/#!/Empathetics Rafi Santo], Indiana University
| |
| *[http://twitter.com/#!/doseofsnark Chris Shoemaker], New York Public Library
| |
| *[http://twitter.com/#!/toolness Atul Varma], Mozilla
| |
| | |
| ==Videos & Multimedia==
| |
| <br>
| |
| <div class="video-js-box">
| |
| <video class="video-js" width="480" height="270" poster="http://videos.mozilla.org/serv/webmademovies/hackasaurus-still-from-dml.jpg" controls preload><br />
| |
| <source src="http://videos.mozilla.org/serv/webmademovies/hackasaurus_spotlight.ogv" type="video/ogg"><br />
| |
| <img src="http://videos.mozilla.org/serv/webmademovies/hackasaurus-still-from-dml.jpg" width="480" height="270" alt="Poster Image"><br />
| |
| [<em>There's an HTML video here—load this post with your open-video enabled browser</em>.]<br />
| |
| </video>
| |
| </div>
| |