Webmakers/Event Platform: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
 
(33 intermediate revisions by the same user not shown)
Line 10: Line 10:
== Mockups ==  
== Mockups ==  


[Image:Event_Mockup.png]
[[Image:Event_Mockup.png]]


== Get involved now <br>  ==
[[Image:Event_mockup2.png]]
 
#'''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  ==


*'''The project in 5 sentences''':  
*'''The project in 5 sentences''':  
**Hackasaurus helps teens hack. Through tools that makes it easy for youth to explore, remix and redesign the web.  
** Events are a major participation and community engine of Mozilla's webmaker efforts.  
**Plus local events or "hack jams" that make hacking and digital literacy easy, social and fun. <br>
** We need a place to track webmaker events worldwide.
**We're designing around the way kids learn technology, based on Mizuko Ito's concepts of hanging out, messing around and geeking out.  
** That enables users to learn about, create, import, sign up for, and leave feedback about events.
**Tools in development so far include [http://htmlpad.org/ HTML&nbsp;Pad] and [https://secure.toolness.com/webxray/ X-Ray Goggles], with more on the way.<br>
** The site should allow for communication among organizers, participants, and staff.
**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>
** And it should be dead-simple to use.
 
== How to host your own Hackasaurus event for Youth  ==
 
[http://www.hackasaurus.org/en-US/educators/ '''Resources &amp; Tools for Teaching Webmaking''']<br>


*[http://labs.toolness.com/temp/hackasaurus-pdfs/hacktivity_kit.pdf Hacktivity Kit: Step by step instructions for running your own hack jam] (PDF, 2.3MB)<br>
== Uses Supported by v1.0 ==
*[http://htmlpad.org/hackasaurus-presentation-01/ Hackasaurus Slides: An HTML5 remixable slide show].<br>
*[http://labs.toolness.com/temp/hackasaurus-pdfs/it_checklist.pdf I.T. Checklist] (PDF, 164KB)<br>
*[http://labs.toolness.com/temp/hackasaurus-pdfs/goggles_cheatsheet.pdf X-Ray Goggles Cheat Sheet: A quick reference printable for the X-Ray Goggles tool, highlighted hot keys] (PDF, 257 KB)<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 at [[Hackasaurus/Roadmap]]
*'''Project infographic:''' ''coming soon''


== Hackasaurus Events  ==
=== Find Event ===
* See on Front Page --> Click through --> Know what the event is from description --> RSVP (can message hosts) --> Share
* Search based on type/geography --> View results by Date/Distance --> Pick event --> Know what the event is from description --> RSVP (can msg hosts) --> Share


*Hackasaurus "Hack Jams" are one-day and weekend events that allow kids to test and help design Hackasaurus.
''Desired additional feature: Search event based on keyword in description''
*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.


== Hackasaurus Tools  ==
===Create Event===
* Learn about event types --> Pick Type --> Fill in details --> Publish --> Recruit
**Agenda design can either happen at "Learn about event types" stage or after "Publish"


These tools are still evolving and have rough edges, but their basic functionality is available now. They're also actively being used at jams.
''Desired additional feature: duplicate past events & address all previous attendees of your events at once''


=== X-Ray Goggles  ===
===Submit existing Event===
* External event exists --> Provide us with url, event type, date/time, location, description, your email --> Event is published to our calendar


"[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>
===Report Back (participant)===
* Receive email from Mozilla (or event host) --> Fill out feedback form & share on gallery --> Prompt to host/attend something else in future


== Similar Tools  ==
===Report back (organizer)===
Other comparable tools to HTML Pad
* Receive email from Mozilla --> Fill out feedback form &  share on gallery --> Prompt to host/attend something else in future
* http://sketchpad.cc/
* http://jsfiddle.net/
* http://jsbin.com/


HTML composition
== Roadmap ==
* [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:
=== Pre-launch: March ===
* http://www.webs.com/
* [https://events.etherpad.mozilla.org/kit-agendas Agenda maker] (Michelle Thorne)
* http://www.wix.com/ (Flash)
* [http://www.zythepsary.com/event_site/slidey/planning.html Logistical How-To's] (Laura Hilliger)
* Secure a domain (MT + Ross + BS)
** Migrate to make.mozilla if/when possible
* /Events pages design + coding (Dev + Design + BS + MT)
** [https://secure.flickr.com/photos/jessicaklein/6796529344/in/photostream Front page mockup]. In [http://labs.toolness.com/temp/mozevents-mockup/# HTML]
** [https://secure.flickr.com/photos/jessicaklein/6796532194/in/photostream Participate mockup]. Map + calendar
** Create Event mockup. Displays info about event types, recommended activities, examples
** [http://www.zythepsary.com/event_site/slidey/planning.html Resources mockup.] How-to's
** Design compatibility with Mozilla's larger calendar efforts (w/ Aakash)
* BSD Skinning/Integration (Dev + Design + BS + BSD)
** Activate Event Module in BSD
** Event creation user path
** Event discovery user path
* [https://wiki.mozilla.org/Webmakers/Event_Platform Legal & privacy reviews] (BS)
* Teams test event platform, agendas, and how tos.
** Kitchen Table:
***Call for staff, Aspiration, & high-level community members to try out with our sample agenda & curriculum and report back to us
** HackJam:
*** Hackasaurus Jams Warsaw (March 8)
*** Popcorn Jam London (March 25)
*** Popcorn Jam Cannes (March 29)
** PopUp: LA?, Pittsburgh?


*[http://www.colorzilla.com/firefox/ Colorzilla] (Firefox add-on)
=== Beta Testing: April ===
*[https://addons.mozilla.org/en-US/firefox/addon/539/ Measure It] (Firefox add-on)  
* External event submission form (Web Dev)
*[https://addons.mozilla.org/en-US/firefox/addon/737/ Platypus] (Firefox add-on)  
* /events design & coding cont. (Dev + Design + BS + MT)
*[https://addons.mozilla.org/en-US/firefox/addon/748/ GreaseMonkey] (Firefox add-on)  
* BSD cont. (Dev + Design + BS + BSD)
*[http://getfirebug.com/ Firebug] (Firefox add-on)
** Localizations
*[http://erkie.github.com/ Erkie's Ad Destroyer] (bookmarklet)
** Report back flow & copy
*[http://kathack.com/ Katamari] (bookmarklet)  
*Legal & privacy reviews cont. (BS)
*[http://chengyinliu.com/whatfont.html Whatfont] (bookmarklet)
* Testing cont.
*[http://www.westciv.com/xray/ Westciv's XRAY] (bookmarklet)
** Hack Jam
*[http://mir.aculo.us/dom-monster/ DOM Monster] (bookmarklet)  
*** Popcorn Jam Berlin (April 22)
*[http://konigi.com/tools/submissions/wirify-create-wireframes-web-pages Wirify Wireframing Tools] (bookmarklet)  
*** Popcorn Jam Lüneberg (April 29).
*[http://buildorpro.com/ BuildorPro] (web app)
*** Hacks/Hackers Buenos Aires (April 22)
*[http://cssdesk.com/ CSSDesk] (web app)  
** Pop Up:  
*[http://www.shiftspace.org/ ShiftSpace]
*** London/SF?
*[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]
=== Launch 1.0 + Summer Campaign Announcement: May ===
*[http://www.smartgirl.org/writing/tutorial/index.php Smart Girl HTML Tutorial]
* [https://wiki.mozilla.org/Foundation_Summer_2012_Campaign_Roadmap Summer Campaign Roadmap]
*[http://www.webmonkey.com/2010/02/html_cheatsheet/ Webmonkey's HTML cheatsheet]
* Prominent info about campaign.
* Display partners and planned events so far.  
* Sign up page for campaign partners.
* Campaign "Create event" page for organizers.
* Event sign up pages for participants. "Participate"
* Photos from past events.
* Show campaign video


== Inspiration ==
=== Day of Action: June ===
* Display lots & lots of event pins on a map of the world
* Display gallery of event pics and screenshots of hacks
* Prompt participants & organizers for feedback via BSD


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.
=== Summer cont: July-August ===
* Display info about upcoming end-of-summer events
* Display info about feedback, what we made, what we learned, what next
* Migrate to make.mozilla.org/events if ready


* [http://ilearnedtoprogram.com/ ilearnedtoprogram.com] - Testimonials from people who learned how to program.
=== Festival: September - November ===
* [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.
* Roll over /events to focus primarily on the festival
* [http://education.mit.edu/projects/starlogo-tng StarLogo TNG]


== Team  ==
== Team  ==


*[http://twitter.com/#!/taylorbayless Taylor Bayless], YouMedia
*[http://twitter.com/#!/thornet Michelle Thorne], Mozilla. Berlin.
*[http://twitter.com/#!/iamjessklein Jess Klein], New Youth City Learning Network
*[http://twitter.com/#!/benjaminsimon Ben Simon], Mozilla. Bay Area
*[http://twitter.com/#!/jacksondevious Jack Martin], New York Public Library
*[http://twitter.com/#!/iamjessklein Jess Klein], Mozilla. NYC.
*[http://twitter.com/#!/benrito Ben Moskowitz], Mozilla  
*[http://twitter.com/#!/epilepticrabbit Laura Hilliger], Mozilla. Dresden
*[http://twitter.com/#!/OpenMatt Matt Thompson], Mozilla  
*[http://twitter.com/#!/catspaw Michelle Levesque], Mozilla. Bay Area
*[http://twitter.com/#!/Empathetics Rafi Santo], Indiana University
*[http://twitter.com/#!/lainiedecoursy Lainie Decoursy], Mozilla. NYC.
*[http://twitter.com/#!/doseofsnark Chris Shoemaker], New York Public Library
* Allen Gunn, Aspiration & Mozilla Senior Advisor
*[http://twitter.com/#!/toolness Atul Varma], Mozilla
*[http://twitter.com/#1/ramilewski Richard Milewski]
 
==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>
 
== Project Tools  ==
 
*'''web site''': [http://www.hackasaurus.org/ hackasaurus.org]
*[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>
 
----
 
*'''Drumbeat project page:&nbsp;'''[https://drumbeat.org/en-US/projects/hackasaurus/ https://drumbeat.org/en-US/projects/hackasaurus/]
*'''wiki page:''' [https://wiki.mozilla.org/Drumbeat/Hackasaurus 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 http://www.facebook.com/#!/pages/Hackasaurus/140459162682866]
*'''photos &amp;&nbsp;visual assets '''(tag = hackasaurus)''':''' [http://www.flickr.com/groups/hackasaurus/ http://www.flickr.com/groups/hackasaurus/ ]<br>
*'''issue tracker''': [http://hackasaurus.lighthouseapp.com/projects/66492-hackasaurus/overview 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 (chat is archived at [http://irclog.gr/#browse/irc.mozilla.org/hackasaurus irclog.gr])
*roadmap:&nbsp; [[Hackasaurus/Roadmap]]<br>
*community calls: ''coming soon''

Latest revision as of 16:54, 21 March 2012

Event Mockup.png Event Platform Roadmap
Owner: Michelle Thorne, Ben Simon Updated: 2012-03-21
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 webmaker 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.

Uses Supported by v1.0

Find Event

  • See on Front Page --> Click through --> Know what the event is from description --> RSVP (can message hosts) --> Share
  • Search based on type/geography --> View results by Date/Distance --> Pick event --> Know what the event is from description --> RSVP (can msg hosts) --> Share

Desired additional feature: Search event based on keyword in description

Create Event

  • Learn about event types --> Pick Type --> Fill in details --> Publish --> Recruit
    • Agenda design can either happen at "Learn about event types" stage or after "Publish"

Desired additional feature: duplicate past events & address all previous attendees of your events at once

Submit existing Event

  • External event exists --> Provide us with url, event type, date/time, location, description, your email --> Event is published to our calendar

Report Back (participant)

  • Receive email from Mozilla (or event host) --> Fill out feedback form & share on gallery --> Prompt to host/attend something else in future

Report back (organizer)

  • Receive email from Mozilla --> Fill out feedback form & share on gallery --> Prompt to host/attend something else in future

Roadmap

Pre-launch: March

  • Agenda maker (Michelle Thorne)
  • Logistical How-To's (Laura Hilliger)
  • Secure a domain (MT + Ross + BS)
    • Migrate to make.mozilla if/when possible
  • /Events pages design + coding (Dev + Design + BS + MT)
  • BSD Skinning/Integration (Dev + Design + BS + BSD)
    • Activate Event Module in BSD
    • Event creation user path
    • Event discovery user path
  • Legal & privacy reviews (BS)
  • Teams test event platform, agendas, and how tos.
    • Kitchen Table:
      • Call for staff, Aspiration, & high-level community members to try out with our sample agenda & curriculum and report back to us
    • HackJam:
      • Hackasaurus Jams Warsaw (March 8)
      • Popcorn Jam London (March 25)
      • Popcorn Jam Cannes (March 29)
    • PopUp: LA?, Pittsburgh?

Beta Testing: April

  • External event submission form (Web Dev)
  • /events design & coding cont. (Dev + Design + BS + MT)
  • BSD cont. (Dev + Design + BS + BSD)
    • Localizations
    • Report back flow & copy
  • Legal & privacy reviews cont. (BS)
  • Testing cont.
    • Hack Jam
      • Popcorn Jam Berlin (April 22)
      • Popcorn Jam Lüneberg (April 29).
      • Hacks/Hackers Buenos Aires (April 22)
    • Pop Up:
      • London/SF?

Launch 1.0 + Summer Campaign Announcement: May

  • Summer Campaign Roadmap
  • Prominent info about campaign.
  • Display partners and planned events so far.
  • Sign up page for campaign partners.
  • Campaign "Create event" page for organizers.
  • Event sign up pages for participants. "Participate"
  • Photos from past events.
  • Show campaign video

Day of Action: June

  • Display lots & lots of event pins on a map of the world
  • Display gallery of event pics and screenshots of hacks
  • Prompt participants & organizers for feedback via BSD

Summer cont: July-August

  • Display info about upcoming end-of-summer events
  • Display info about feedback, what we made, what we learned, what next
  • Migrate to make.mozilla.org/events if ready

Festival: September - November

  • Roll over /events to focus primarily on the festival

Team

Retrieved from "https://wiki.allizom.org/index.php?title=Webmakers/Event_Platform&oldid=410018"