Mdn, la Red de Desarrolladores de Mozilla: Experimentos y Demos

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

 

 
by Janeth Kent Date: 17-07-2013 mozilla MDN desarrolladores wiki diseñadores recursos herramientas web demos visitas : 3778  
 
Janeth Kent

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 END DEVELOPMENT.

 
 
 

Artículos relacionados

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

El concepto de Modelo-Vista-Controlador (MVC) explicado

En la ingeniería de software, usamos patrones de diseño como soluciones reutilizables para un problema común, un patrón es como una plantilla de cómo resolver un problema. El Modelo-Vista-Controlador (MVC) es…

Javascript: los operadores Spread y Rest

En el artículo de hoy vamos a hablar de una de las características de la versión ES6 (ECMAScript 2015) de JavaScript que es el operador Spreadasí como el operador Rest. Estas…

Introducción a RegExp - Expresiones regulares

Hoy vamos a escribir sobre las Expresiones Regulares conocidas como regex o regexp abreviado, un concepto muy útil de uso de patrones de búsqueda. Seguramente usted estaba en una situación en…

Cookies HTTP: cómo funcionan y cómo usarlas

Hoy vamos a escribir sobre la forma de almacenar datos en un navegador, por qué los sitios web utilizan cookies y cómo funcionan en detalle. Continúa leyendo para averiguar cómo implementarlas…

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…

Cómo escribir nuestra propia Política de Privacidad

En este artículo hablaremos de las declaraciones de la Política de Privacidad, de cómo puedes escribir una y ponerla en práctica en tu página. ¿Por qué apareció? Hoy en día, cuando navegamos…

El mejor software y aplicaciones gratuitos de streaming en directo para todas las plataformas

Estamos en una lenta transición hacia un mundo hecho de transmisiones en streaming. Ya sea que quieras transmitir en vivo o capturar contenido de la web, las opciones son ilimitadas.…

Guía sencilla para convertir imágenes a WebP en PHP

El 30 de septiembre de 2010, Google anunció la publicación de un nuevo estándar abierto para la compresión con pérdida de gráficos de 24 bits en la web. La base…

¿Cuál es la diferencia entre Flexbox y Grid?

Vamos directos al grano e intentemos responder a esta pregunta con explicaciones sencillas. Hay muchas similitudes entre Flexbox y Grid, empezando por el hecho de que se utilizan para el diseño…

Las Mejores Alternativas al Navegador Tor para Navegar Anónimamente

La seguridad del Proyecto Tor, el servicio más popular para navegar por la web de forma anónima, está bajo sospecha. El Proyecto Tor ha sufrido un par de agujeros de…

Principios Gestalt: Secretos de la piratería del cerebro humano por diseño

Cuando has vistola foto de arriba, ¿qué te ha venido a la mente? ¿Caras de mujeres o un candelabro? Sí, tal vez pueda adivinar tu respuesta. Porque el estudio dice…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración