Drumbeat/webmademovies: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
Line 2: Line 2:
|icon=wmm.png
|icon=wmm.png
|pagelocation=Drumbeat/Webmademovies
|pagelocation=Drumbeat/Webmademovies
|pagetitle=Batucada Roadmap
|pagetitle=Web Made Movies wiki
|owner=Brett Gaylor, David Humphrey, Bobby Richter, CDOT, Bocoup
|owner=Brett Gaylor, David Humphrey, Bobby Richter, CDOT, Bocoup
|updated=March 15, 2011
|updated=March 15, 2011
Line 21: Line 21:
*'''issue tracker''': [http://webmademovies.lighthouseapp.com/ Lighthouse]
*'''issue tracker''': [http://webmademovies.lighthouseapp.com/ Lighthouse]
*'''source code''': Github: https://github.com/webmademovies'''<br>'''  
*'''source code''': Github: https://github.com/webmademovies'''<br>'''  
 
*'''irc''': #popcorn on irc.mozilla.org
== 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 [http://htmlpad.org/ HTML Pad] or [https://secure.toolness.com/webxray/ 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  ==
Web Made Movies is Mozilla’s open video lab. We’re bringing filmmakers and hackers together to explore how modern browser technologies like HTML5 can reshape moving images on the web.


*'''The project in 5 sentences''':
'''Movies are engines for innovation'''
**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&nbsp;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 Hack Jams  ==
 
*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.
 
'''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)]]
 
'''Upcoming Hack Jams:'''
 
*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)
 
<br>
 
== Experimental 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  ===
 
Web 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.
 
You can try the prototype now at [https://secure.toolness.com/webxray/ secure.toolness.com/webxray/].
 
=== HTMLPad ===
 
[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].
 
== Ideas For Future Hackasaurus Tools ==
 
These tools don't actually exist yet. They also may never exist as independent products&mdash;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)&nbsp;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)&nbsp;"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)&nbsp;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  ==
 
These could be used as inspiration for Hackasaurus tools. Or become part of the Hackasaurus toolkit itself:
 
*[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://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
 
<br>
 
 
 
 
 
 
 
OLD STUFF
 
 
This is the wiki for Web Made Movies, an open video software lab that is part of Mozilla's Drumbeat initiative.
 
If you want to get involved, you've come to the right place!
 
= About  =
 
[https://wiki.mozilla.org/Drumbeat/webmademovies/one_page One-pager first draft with community feedback is here]
 
[https://wiki.mozilla.org/Drumbeat/webmademovies/one_page_2.0 One-pager second draft is here]
 
[https://wiki.mozilla.org/Drumbeat/webmademovies/about Previous drafts, talking points and messaging fodder is here]
 
= Roadmap  =
 
[https://wiki.mozilla.org/Drumbeat/webmademovies/Public_roadmap Public roadmap. To present at Whistler]
 
[https://wiki.mozilla.org/Drumbeat/webmademovies/roadmap Detailed roadmap & workplan] More for internal use and planning.
 
= Get Involved!  =


Web Made Movies is an open source project. There are currently a group of software developers working on the first release of popcorn.js, as well as HTML designers create software demos. We need your help with both - the best way to get in touch:
We believe that the production of a new type of cinema, informed by the same qualities that make the web unique, will drive further innovation in browser-based video. That’s why were striving towards feature productions at Web Made Movies that are built using open video and HTML5 – working together, filmmakers and web developers can push the medium into new territory.


Mailing list: [[http://groups.google.ca/group/web-made-movies-working]]
The projects we’ll pursue will be a combination of those brought by partners, institutions and from within our own team.


Lighthouse: [[https://processing-js.lighthouseapp.com/projects/52212-popcornjs/overview]]
'''Creating software in the process'''


IRC:
We’ll also develop tools open video needs right now, including “popcorn.js,” a JavaScript library enabling video to interact with the rest of the web — mashing up Google Maps, image feeds, Twitter accounts and other semantic data. We’ll help filmmakers use these tools in productions that we hope can set an example, ultimately changing the market and culture around interactive productions online.


*#popcorn on irc.mozilla.org
'''Our ultimate goal: a new cinema that works like the web'''


Are you a filmmaker? Want to submit a project to the lab and work with software developers around the world to re-imagine what your work could do on the web? drop a line to brett@mozillafoundation.org
HTML5 and open video have created an exciting opportunity: cinema and journalism that can pull people and data from across the web into the story. Creating new ways to inform, educate and entertain online.
231

edits

Navigation menu