MDN, la red de desarrolladores de Mozilla: experimentos y demos

MDN una wiki abierta para desarrolladores y diseñadores web

La red de desarrolladores de Mozilla (MDN), es muy popular entre los desarrolladores web.

Diseñada por y para desarrolladores y diseñadores, MDN ayuda a Mozilla en su misión para promover la apertura y la innovación en la web.

MDN es una wiki open osea abierta, impulsada por la misma comunidad, que proporciona a los desarrolladores y diseñadores la mejor documentación, tutoriales y herramientas sobre el desarrollo de web o de aplicaciones.

Cualquiera puede añadir su proprio proyecto o contenido.

Resumiendo estas son las 10 cosas que debéis saber sobre MDN (con algunos consejos sobre cómo participar a la comunidad).

1. MDN es una herramienta popular entre los desarrolladores con más de 4,5 millones de vistas y 2 millones de visitantes por més.
2. Ofrece un total de 49.748 de documentos (y siguen subiendo), por un total de 9.185 contribuyentes que al día de hoy han puesto 272.134 proyectos.
3. Tiene una comunidad de desarrolladores activa en los canales de IRC de MDN.
4. MDN es el único sitio para desarrolladores traducido en 15 idiomas: 15 idiomas para documentos HTML, 13 idiomas para CSS, y 11 idiomas para JavaScript. Todas estas traducciones son creadas por una comunidad global de voluntarios. Los localizadores le dan prioridad a la traducción de temas basándose ​​en las necesidades e intereses locales.
5. Es la mejor plataforma para obtener documentación e información de referencia sobre JavaScript en la web.
   

   “MDN es sin duda alguna, el mejor recurso para encontrar documentación de calidad sobre JavaScript. Esta bien organizado permitiendo a los desarrolladores encontrar rápidamente la información que necesitan sin tener que recurrir a diferentes especificaciones, ” – Desarrolladores principales para jQuery

6. Es un gran recurso para todos los que buscan contenido reciente sobre el desarrollo. La red de desarrolladores de Mozilla es mantenida por la comunidad de desarrolladores y escritores técnicos y almacena, literalmente, miles de documentos sobre una amplia variedad de temas tales como: HTML5, JavaScript, CSS y Node.JS, por nombrar unos cuantos.
7. Cualquiera puede editar o añadir documentos al la wiki, sólo se tiene que crear una cuenta.
8. Hay más de 500 demos. número que sube cada día.
9. Cada mes, el Dev Derby ofrece un desafío diferente para los desarrolladores – desde aplicaciones offline hasta aplicaciones “no JavaScript” (el Dev Derby más popular en el año 2012, con 71 entradas).
10. En agosto del 2012, se puso en producción una nueva wiki HTML. La plataforma es de código abierto y basado en Django, por lo tanto los desarrolladores pueden añadir nuevas características y funcionalidad desde GitHub. También se desarrolló un nuevo plugin para WordPress en HTML5 que permite a los desarrolladores de enlazar palabras desde sus blog a MDN.

Os dejamos con 15 proyectos experimentales de MDN que vale la pena estudiar.

1. The Box

An animated cardboard and paper 3D scene, made from recycled materials.

Demo & Download

2. Rofox CSS3 Animation

Little spaceship lands on planet. Little spaceship takes off from planet.

Demo & Download

3. Ghost writer Art Studio

Skookum's online art playground.

Demo & Download

4. Zoom to infinity

An infinite zoom-in using CSS3 keyframes.

Demo & Download

5. Escapade

Escape the multitude of balls thrown at u.

Demo & Download

6. Old Radio

Just CSS3 (no images) + HTML5 (audio API) + JS.

Demo & Download

7. HTML5 Free Cell

Using drag and drop to demonstrate uses for history api.

Storing history and using state can be extremely useful in ajax environments and in page content. The idea of this demo is to take other user inputs or to expand the use of back button. This demo shows the use of saving state after drag and drop user interaction.

Demo & Download

8. Comic Gen

Comic genertor app.

It is a comic generator using canvas and some JS API.

Demo & Download

9. The Planetarium

A CSS3 journey through the Solar System. Works in Firefox, Chrome, Safari.

Demo & Download

10. The Letter-Heads

Experience interactive shadow-art in your browser.

The Letter-Heads is a demo that lets you experience interactive shadow art. Meet different characters made with letters and text-shadow. By moving and rotating the letters into the right position, their shadow of the letters casts a silhouette that looks like a head. The animation is done with CSS3+JS. It’s mainly inspired by shadow artist Kumi Yamashita (kumiyamashita.com). 

Demo & Download

11. Chess

Browser based chess engine with CSS animation.

This demo is based on Douglas Bagnall's javascript chess game written for the 5k competition in 2002 (http://p4wn.sourceforge.net). Use of unicode was inspired by Antony Lesuisse's version of the game (2005). Animation added by Yehuda B. (2011).

Demo & Download

12. Zoom Menu

Just a simple menu zooming with CSS3.

This is a small part of a redesign I am working on. I was wondering how do make a menu that zooms into a smaller thumbnail when you don't use it and gets bigger when you want to click a link. Now with animations :).

Demo & Download

13. Parts

An interactive music video for the Gamits new Album.

Demo & Download

14. Meowww!

A cat meowing.

Using no graphics and no javascript just CSS to animate a cat meow.

Demo & Download

15. CSS sliding image gallery

An image gallery made without JavaScript using dots and arrows to browse.

The demo uses CSS3's target pseudo-class and CSS transforms to achieve to slide behavior.

Demo & Download

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.