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 : 4254  
 
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

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Guía: Como entrar en la DeepWeb y la Darknet

Queremos presentarte una guía que te permitirá entrar en las principales darknets que componen la Dark Web, conocida coloquialmente como la Deep Web, aunque este último término tiene otro significado.…

El diseño gráfico y su impacto en el desarrollo web

En el artículo de hoy explicaremos el concepto de diseño gráfico, sus fundamentos y lo que aporta al desarrollo web. El diseño gráfico se aplica a todo lo visual, lo…

Interesantes y Útiles Funcionalidades de Búsqueda de Google que Querrás Empezar a Utilizar

Google - EL motor de búsqueda para muchos usuarios de Internet. Lleva con nosotros desde su lanzamiento en 1998 y, gracias a su sencillez de uso y a sus geniales…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Validación de formularios HTML usando BULMA y vanilla JavaScript

Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript. El formulario de contacto parece ser una de las características principales de toda página web básica. Es…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

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…

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