Webmakers/Event Platform: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
Line 13: Line 13:


[[Image:Event_mockup2.png]]
[[Image:Event_mockup2.png]]
== Get involved now <br>  ==
#'''Attend an '''[http://www.hackasaurus.org/en-US/events/ 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 [http://www.hackasaurus.org/en-US/goggles/ X-Ray Goggles].
#'''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  ==
== About this project  ==
Line 47: Line 39:
*'''Project infographic:''' ''coming soon''
*'''Project infographic:''' ''coming soon''


== Hackasaurus Events ==
== Team ==


*Hackasaurus "Hack Jams" are one-day and weekend events that allow kids to test and help design Hackasaurus.  
*[http://twitter.com/#!/thornet Michelle Thorne], Mozilla. Berlin.
*They're run through the New Youth City Learning Network in collaboration with Mozilla.  
*[http://twitter.com/#!/benjaminsimon Ben Simon], Mozilla. Bay Area
*Hackasaurus jams are designed to be modular and self-organizing. So that any teen, parent or organization can organize their own.  
*[http://twitter.com/#!/iamjessklein Jess Klein], Mozilla. NYC.
*Event curriculum and an organizing kit are under development.
*[http://twitter.com/#!/epilepticrabbit Laura Hilliger], Mozilla. Dresden
*[http://twitter.com/#!/catspaw Michelle Levesque], Mozilla. Bay Area
*[http://twitter.com/#!/lainiedecoursy Lainie Decoursy], Mozilla. NYC.


== 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.
=== X-Ray Goggles  ===
"[http://hackasaurus.org/en-US/goggles/ X-Ray 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.<br>
== 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]
*[https://www.writeonglass.com/ Glass]
* DesignBlocks: a Scratch-like programming environment for artists interested in creating Processing programs. Working prototypes in HTML5/JS: http://www.kickstarter.com/projects/evhan55/designblocks-visual-programming-for-artists
*Bricolage: Example-Based Retargeting for Web Design http://hci.stanford.edu/research/bricolage/
* Shiftspace http://www.shiftspace.org/
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]
== Inspiration ==
These don't necessarily have anything directly to do with Hackasaurus or the Web, but we've found them helpful or inspiring in other ways.
* [http://ilearnedtoprogram.com/ ilearnedtoprogram.com] - Testimonials from people who learned how to program.
* [http://www.826national.org/ 826 National] - See Atul's post on [http://www.toolness.com/wp/2010/10/what-mozilla-can-learn-from-826-national/ What Mozilla Can Learn From 826 National] for more information on why this is relevant.
* [http://education.mit.edu/projects/starlogo-tng StarLogo TNG]
== 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
*[http://twitter.com/#1/ramilewski Richard Milewski]


==Videos & Multimedia==
==Videos & Multimedia==
Line 135: Line 64:
*[http://hackasaurus.org/en-US/goggles/ '''X-ray Goggles''']: See what the web is made of. Mess around &amp; remix.&nbsp;  
*[http://hackasaurus.org/en-US/goggles/ '''X-ray Goggles''']: See what the web is made of. Mess around &amp; remix.&nbsp;  
*[http://htmlpad.org/ '''HTML Pad'''] (aka "Magic Ink"): 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.&nbsp; ''More background for HTMLPad can be found in Atul's blog post entitled ''[http://www.toolness.com/wp/2010/10/prelude-to-barcelona/ ''Prelude To Barcelona.'']<br> <br>
*[http://htmlpad.org/ '''HTML Pad'''] (aka "Magic Ink"): 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.&nbsp; ''More background for HTMLPad can be found in Atul's blog post entitled ''[http://www.toolness.com/wp/2010/10/prelude-to-barcelona/ ''Prelude To Barcelona.'']<br> <br>
== Get involved now <br>  ==
#'''Attend an '''[http://www.hackasaurus.org/en-US/events/ 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 [http://www.hackasaurus.org/en-US/goggles/ X-Ray Goggles].
#'''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].


----
----

Revision as of 11:15, 9 March 2012

Event Mockup.png Event Platform Roadmap
Owner: Michelle Thorne, Ben Simon Updated: 2012-03-9
We're building an online event platform to track, create, import, and sign up for Mozilla webmaker events.

Mockups

Event Mockup.png

Event mockup2.png

About this project

  • The project in 5 sentences:
    • Events are a major participation and community engine of Mozilla's webmaker efforts.
    • We need a place to track events worldwide.
    • That enables users to learn about, create, import, sign up for, and leave feedback about events.
    • The site should allow for communication among organizers, participants, and staff.
    • And it should be dead-simple to use.

How to host your own Hackasaurus event for Youth

Resources & Tools for Teaching Webmaking

Team


Videos & Multimedia


<video class="video-js" width="480" height="270" poster="hackasaurus-still-from-dml.jpg" controls preload>
<source src="http://videos.mozilla.org/serv/webmademovies/hackasaurus_spotlight.ogv" type="video/ogg">
<img src="hackasaurus-still-from-dml.jpg" width="480" height="270" alt="Poster Image">
[There's an HTML video here—load this post with your open-video enabled browser.]
</video>

Project Tools

  • web site: hackasaurus.org
  • X-ray Goggles: See what the web is made of. Mess around & remix. 
  • HTML Pad (aka "Magic Ink"): 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 Prelude To Barcelona.


Get involved now

  1. Attend an 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 mailing list.
  2. Start hacking with Hackasaurus tools like X-Ray Goggles.
  3. Share your own ideas, tools and resources. Through our mailing list or on twitter.
  4. 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 mailing list.
  5. Help develop the Hackasaurus tool set. Through our issue tracker and Github.