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

Aprendiendo Material Design Lite: Tarjetas

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Learning Material Design Lite.
Learning Material Design Lite: Text Fields
Learning Material Design Lite: The Menu

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Las Tarjetas se están convirtiendo rápidamente en un patrón de UI indispensable, particularmente en las webs móviles. Esto se debe en parte a las webs relevantes como Pinterest, Twitter y Google Now que hacen uso exhaustivo de las mismas. En Tuts+ también encontrarás los cursos y las últimas entradas de la red presentados mediante tarjetas en la página principal.

Tuts+ emplea tarjetas para mostrar un listado de cursos en su página principal.

En este tutorial vamos a ver un componente para tarjetas de Material Design Lite (MDL). Según las especificaciones de Material Design, una tarjeta es:

"Un trozo de papel con datos únicos y relacionados entre sí, que sirven de entradilla hacia información mas detallada.

Una tarjeta puede contener texto, una imagen o una combinación de ambos, incluso es posible incluir en ella otros componentes MDL. En el contexto del diseño web, generalmente hacemos uso del interface de las tarjetas para mostrar listados de entradas, noticias, vídeos, productos, etc.

Como hacemos siempre en estas series, antes de implementar nada, necesitamos cargar las librerías MDL—las hojas de estilo y el JavaScript—en el head de un documento HTML.

Una vez que tengamos estos archivos en su sitio, podremos empezar a construir nuestras tarjetas.

¡Vamos!

Para crear una Tarjeta, empezamos con un div con la clase mdl-card asignada, y después la clase mdl-shadow--2dp para aplicar sombras a la tarjeta. Cambia el número de la clase mdl-shadow--2dpa 3, 4, 6, 8 o 16 para aumentar la profundidad de la sombra y extenderla tanto como necesites.

Hasta ahora, la anchura de la Tarjeta está sin definir. Podemos hacerlo nosotros mismos a través de CSS, o aplicar la anchura conjuntamente con el componente MDL grid component. Desearía que nuestra tarjeta fuera responsive y estrechamente integrada con nuestro ecosistema MDL, así que optaremos por la última opción. Incluimos la mdl-card dentro de un contenedor de rejilla y establecemos la tarjeta en sí misma como celda de rejilla o columna.

Contenido de la Tarjeta

Ahora debemos determinar el contenido. Asumamos que deseamos usar la tarjeta para mostrar una entrada de nuestro blog. Tradicionalmente, esto consistiría en la imagen destacada, el titular, el extracto de la entrada, y el típico botón "Leer Más" apuntando al contenido completo.

Empecemos por el título. Para añadirlo, creamos un div vacío con la clase mdl-card__title.

Añade un encabezado dentro del div y aplicale la clase mdl-card__title-text; dependiendo de la estructura de tu página y la jerarquía que ocupe la tarjeta en tu contenido, puede ser desde un h1 hasta un h6.

Coloquemos ahora el extrato de la entrada—el sumario del contenido de la misma. Para esto, hemos creado otro div debajo del contenedor de título y le hemos aplicado la clase mdl-card__supporting-text. Después, encerramos el extracto dentro de un párrafo ubicado dentro de el div anterior.

Para la imagen destacada, necesitamos crear otro elemento contenedor (optamos por figure) situado sobre el contenedor del título y con la clase mdl-card__media asignada. Los elementos figure disponen de algo de margen por defecto, así que vamos a eliminarlo de esta forma:

Para finalizar, añade la imagen.

Por defecto, MDL no modifica de manera predeterminada el tamaño de las imágenes dentro del contenedor media de las tarjetas. Conforme se reajusta el tamaño de la tarjeta, la anchura y altura de la imagen se mantendrá. El contenedor para los media está ajustado de manera que oculte las áreas de la imagen que lo rebosen.

Y por último, la imagen es desproporcionadamente alta, lo cual afea el aspecto de la tarjeta.

La tarjeta es excesivamente alta :(

Si deseamos que la imagen se reajuste conjuntamente con el contenedor, necesitaremos agregar algunos estilos, estableciendo max-width al 100%.

La Acción de la Tarjeta

Una tarjeta idealmente debería ejecutar una acción relacionada con su contenido. Si la tarjeta es un tuit, por ejemplo, podría realizar un Retuit y tener un botón para Seguir. Como nuestra tarjeta muestra una entrada del blog, añadiremos un botón Leer Más apuntando al contenido completo, a esto añadiremos también un par de botones para Me Gusta y Compartir la entrada. Añadimos estos botones de acción bajo el extracto, dentro de un nuevo div con la clase mdl-card__actions asignada.

Nota: MDL no viene con estilos predefinidos que cubran este escenario en el que disponemos de tres botones en un contenedor de acción de la Tarjeta. Así que necesitamos crear algunos estilos nuevos para alinear adecuadamente estos botones.

Ahora, añade algunas tarjetas más para crear el listado de entradas:

Concluyendo

Mostrar múltiples entradas del blog es uno de los motivos más populares para la implementación de las tarjetas en las webs. Dicho esto, el componente de tarjeta puede adaptarse de forma efectiva para cualquier tipo de contenido, incluso una única imagen, un widget de calendario o quizá información sobre el tiempo.

Algunos ejemplos más del componente tarjeta de MDL

De cualquier manera, las clases estándar en la especificación no incluyen todos los estilos para estos contextos específicos. Prepárate para agregar nombres de clases y algunas reglas de estilo para personalizar la apariencia de la tarjeta según sean tus necesidades. ¡Muéstranos en un comentario lo que consigues!

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

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.