MDN/Archives/DemoRoom
From MozillaWiki
< MDN | Archives(Redirected from MDN/DemoRoom)
Development is being tracked on the MDN 0.9.x wiki since we are launching Demo Studio in the MDN 0.9.3 release.
Contents
MDN Demo Room (+ Firefox 4 demos microsite)
It has become clear that having a few blog posts and tutorials on the Hacks blog to share cool demos with developers and the community is not enough. We need a centralized library of demos, with access to the source and ways to share, hack and contribute.
A lot of work that Paul Rouget has already done, combined with the new demos under development for the Firefox 4 launch, presents an opportunity to build an MDN Demo Room (DR) to showcase demos and create a community-driven demos application to encourage hacking and sharing of HTML5, CSS3 and JavaScript demos.
There will be three major components to the DR:
- Gallery/Viewer
- display demos as thumbnails or live previews
- click on them to see full demo
- encourage voting (like/thumbs-up), viewing source, and discussing in forums
- provide links to docs to help understand the technologies
- Authors will have a project url, which could be a link to github or another source hosting page. This should be main entry into that projects source, documentation, etc. Featured demos may be automatically pulled from github, while other demos will only be updated via Zip file and re-submission form.
- Submission Form
- enable community to submit their own demos
- require a minimum set of information/details as a filter and to ensure good data for promoting, filtering, etc.
- encourage self-policing with flags
- Editor [FUTURE]
- allow community to make revisions of existing demos and resubmit their own versions.
- integrate a cloud editor like skywriter (formerly bespin) or jsfiddle to make the code interactive.
But the MDN Demo Room and Firefox 4 demos microsite will be quite different:
- MDN Demo Room
- audience: developers and tech-savvy consumers interested in the inner-workings of the demo, the technologies used, and creating their own demos.
- user experience: clean, stream-lined interface for optimized browsing, searching, filtering, viewing and learning.
- interface: simple gallery application similar to our Mozilla Creative Collective and Google Experiments
- Firefox 4 demos
- audience: consumers and fans of Firefox that want to see cool examples of what their browser can do and learn about what's possible with the latest technologies
- user experience: flashy (not with Flash), fun and whimsical to capture the imaginations of the every day user and for optimized viewing, exploring and navigating through "an experience".
- interface: consumer friendly microsite that focuses on visual elements and an interactive interface to view and explore each demo within a single thematic experience.
- Both the MDN Demo Room and the Firefox 4 demos site need to be live January 19, 2011.
Requirements
We need setup the infrastructure for submitting, storing, updating, sharing and serving out demos. The idea being that we have all the demos in one place and multiple sites/galleries can access them for display... with the Firefox 4 demo microsite and the MDN Demo Room being the first two to use it.
Basic Site Requirements
- Codebase should be built using git (github repo would be great)
- Site should be i18n and l10n ready
- low maintanence images
- use gettext strings in HTML and JavaScript
- zamboni reference app (AMO)
- jinja2 templates
- MySQL
- Memcached
- Mozilla Security Review
- Scope of work includes security reviews of a staging environment and bug fixes to address defects
- Follow Frontend Coding Standards
Demo Gallery Specific
- Demo submissions
- A form that allows anyone to submit their demos to the db that includes:
- Name, author(s), description, tags/technologies
- Source URL (encourage github repo URL, allow for others)
- Screenshot of demo in action
- Links to discussion, docs, blog posts, or other related external resources
- Files needed to run demo (as .zip)
- A form that allows anyone to submit their demos to the db that includes:
- Demo storage
- Work with Security to determine best way to host demos, probably an iframe loading from allizom.org
- Probably a zip file which will be unarchived onto static webserver
- Demos MUST include a demo.html file in the root directory of the zip file
- Demos SHOULD follow best practices and performance guidelines
- Require all demo developers to follow a set of guidelines and check against them before submission
- Develop standards for metadata
- github url
- discussion url
- ?
- Optional for submission, required for awesomeness: gallery to demo protocol (login required, who has it?)
- Demo viewing
- A simple viewer will be sufficient for the MDN Demo Room and should include the following features:
- Thumbnail and list views with search and filtering by tags
- Allow toggle between desktop and mobile CSS templates for optimal viewing (auto-detection would be ideal)
- Search as a primary action to encourage discoverability
- A simple viewer will be sufficient for the MDN Demo Room and should include the following features:
- Demo engagement
- Demos should be a gateway to discussions and learning with features like:
- Comments for each demo (or create a new forum thread for each demo, link to it and display the most recent comments on the demo page)
- Integrate videos, tutorials and relevant documentation on MDN to allow anyone to dig deeper into each demo and the technologies behind it.
- Enable social interactions on demos for gauging interest and tracking viewership
- A "like" or "thumbs up" button so anyone can quickly vote for their favorite demos
- Allow anyone to share a demo via direct link or tweet
- Possibly provide a demo preview button/widget for each demo that people can post their blogs or embed demos in content.
- Provide a flagging system to allow community to flag inappropriate content and notify us; this will require some sort of review/approval process to be built in.
- Demos should be a gateway to discussions and learning with features like:
- Demo marketing
- Encourage developers to write blogs posts or tutorials on their demos
- Create a points or badge system to provide incentive to top developers
- Round-up the top demos by category and blog about them on Hacks
- Hold demo challenges based on features we want to highlight to populate the gallery with community contributions; give away MDN t-shirts and other swag.
Mockups
- MDN Demo Studio
- Firefox 4 demo microsite
