Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Material Design Lite
Webdesign

Visión General de Material Design Lite

by
Length:ShortLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Tengo el presentimiento que CodePen va a estar absolutamente agobiado con Material Design en los próximos meses. ¿Por qué? Porque Google acaba de revelar su ansiosamente anticipado Material Design Lite (MDL). Ésta biblioteca de componentes front-end permite a la comunidad web implementar la especificación de Material Design de Google usando puro HTML, CSS y Javascript. Es una implementación ligera de la especificación de Material Design (pocas dependencias, bajos recursos, muy conciso) por lo tanto lo llama "Lite".

Al lanzar MDL, Google ha respondido a una demanda muy obvia. Ellos tomaron nota del hecho de que han habido esfuerzos de la comunidad para crear frameworks inspirados en Material Design, como Bootstrap Material Design, Materialize, y Material UI por nombrar unos cuantos. Con MDL, creado en estrecha colaboración con el equipo de Chrome UX, Google ha sentado un estándar de cómo Material Design debería ser implementado en sitios web.

¡Observemos que ha aportado MDL con su primer lanzamiento!

Componentes de Material Design

A diferencia de los Elementos de Material Design de Polymer (también conocidos como Elementos Paper, que son desarrollados para sitios web y aplicaciones altamente interactivas y dirigidas por datos, MDL se enfoca principalmente en sitios web con contenido más simple tales como blogs, páginas de aterrizaje y de mercadotecnia.

En éste lanzamiento inicial, MDL viene con una serie de componentes, incluyendo:

Maquetado

El componente maquetado incluye un número de elementos para la elaboración de páginas. Por ejemplo, la grilla o cuadrícula: una característica fundamental de cualquier framework front-end. La grilla de MDL está elaborada con Flexbox y un poco de ayuda de calc() de CSS. Tiene 12 columnas preparadas para ventanas gráficas grandes, ocho columnas para lo que podría llamarse ventanas gráficas del tamaño de tablets, y cuatro columnas para ventanas gráficas más pequeñas.

El componente de Maquetado de MDL también incluye navegación, pestañas y pies de página-cada uno ha sido optimizado para diferentes tamaños de ventanas gráficas.

Botones

En cuanto a los principios de Material Desgin, hay diferentes tipos visuales de botones, algunos de ellos son:

  • Botón Regular: un botón rectangular básico con un fondo distinto al color del texto.
  • Botón Plano: un botón sin el fondo.
  • Botón de Acción Flotante (o FAB) el propio de Material Desgin: un botón circular que flota en la interfaz, generalmente llevando la acción primaria de la pantalla actual, o en éste caso, la página.

Cada botón puede ser mejorado con el conocido efecto dominó .

Tarjetas

Una tarjeta es un contenedor para desplegar contenido, como texto e imágenes, que generalmente promueve alguna clase de acción. Por ejemplo, una imagen con un "me gusta" o botón "compartir", una lista de música con el botón "reproducir", o quizá con un botón "Guardar".

Insignias

Una insignia es un pequeño círculo, colocado cerca de un elemento UI, típicamente conteniendo un número (quizá para indicar nuevos mensajes no leídos o chats entrantes) o un ícono. Hoy en día, dónde la información está infinitamente fluyendo por nuestros dispositivos, una "insignia" puede considerarse un muy importante elemento UI en cualquier diseño.

Y hay más

Otros componentes esenciales que encontrarás en MDL, incluyen campos de entrada, rotadores de imágenes, botones biestado, menús, tooltips, e íconos de Material Design.

Meet the components
Conoce los componentes

Es más, Google también proporciona un par de plantillas para ayudarte a tenerlo funcionándolo rápidamente, con una estructura de maquetado adecuada. Hay cinco tipos de plantillas en éste lanzamiento inicial:

  1. Un blog
  2. Un artículo
  3. Una aplicación o página de aterrizaje de mercadotecnia
  4. Un escritorio
  5. Una página web con mucho texto
The MDL blog layout template
La agradable plantilla del maquetado del blog de MDL.

Personalización

Los estilos de MDL son estructurados con Sass y la metodología BEM. Los estilos pueden ser personalizados de muchas formas, aún antes de que descargues el paquete de tu framework. Una forma sería con el círculo cromático en la página de Personalizar. El círculo cromático te permite seleccionar acentos basados en la selección del color primario. El personalizador generará la hoja de estilos, que puedes descargar, o enlazar directamente desde el CDN de Google.

Theme builder
La vista previa del creador de temas de MDL

El archivo resultante material.min.css es muy pequeño (17.6kB comprimido), pero para los que necesitan control total para reducirlo al máximo, el código fuente está disponible en el repositorio de Github.

Soporte de Navegadores

Ya que la mayoría de los componentes en MDL están creados con técnicas web vanguardistas, tales como calc(), Flexbox, querySelector, y classList, MDL sólo funcionarlá perfectamente en navegadores modernos más utilizados: Chrome, Firefox, Opera, Microsoft Edge. MDL no funcionará adecuadamente en navegadores antiguos, como IE9, sirviendo únicamente la versión CSS. Los elementos interactivos (como el efecto dominó en el botón, por ejemplo) no estará presente.

Dicho esto, la UI todavía es notablemente presentable en IE8. Por ejemplo, observa los botones y el elemento tablas:

Consideraciones Finales

Serías perdonado por pensar que ahora tenemos un framework front-end adicional para poner en nuestra caja de herramientas junto con Bootstrap y Foundation. Sin embargo, MDL no intenta remplazar, o convertirse en un sucesor de Bootstrap. Material Design es parte de la misión de Google para asegurar que las interfaces de usuario, así cómo las experiencias en la gama de sus productos son consistentes, uniformes y consideradas.

Recordemos nosotros mismos la idea central por un momento:

"Nos desafiamos a nosotros mismos para crear un lenguaje visual para nuestros usuarios que sintetiza los principios clásicos de buen diseño con la innovación y la posibilidad de tecnología y ciencia." -Introducción a Material Design de Google

Así que recuerda, mientras que MDL coincide con los productos de Google, puede estar fuera de contexto cuando se implementa en un sitio web que no tiene que ver con Google. Sin embargo, como acabamos de descubrir, Google proporciona control total sobre el código fuente, permitiéndonos personalizarlo hasta el más mínimo detalle. Y eso es de lo que vamos a hablar en el próximo artículo. Así que, ¡mantente en sintonía!

Más Recursos

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.