MDC-101 Web: Conceptos básicos sobre componentes de Material (MDC) (Web)

1. Introducción

Los componentes de Material (MDC) ayudan a los desarrolladores a implementar Material Design. MDC, creado por un equipo de ingenieros y diseñadores de UX en Google, cuenta con decenas de componentes de IU atractivos y funcionales, y está disponible para Android, iOS, la Web y Flutter.material.io/develop.

¿Qué son Material Design y los componentes de Material para la Web?

Material Design es un sistema para crear productos digitales atractivos y llamativos. Mediante la unión de estilo, el desarrollo de la marca, la interacción y el movimiento en un conjunto coherente de principios y componentes, los equipos de productos pueden alcanzar su máximo potencial de diseño.

Para computadoras y la Web móvil, Material Components Web (MDC Web) une el diseño y la ingeniería con una biblioteca de componentes para crear coherencia en las apps y los sitios web. Cada componente de MDC Web reside en sus propios módulos de nodos, por lo que, a medida que evoluciona el sistema de Material Design, estos componentes se pueden actualizar fácilmente para garantizar una implementación uniforme pixel perfect y el cumplimiento de los estándares de desarrollo del frontend de Google. MDC también está disponible para Android, iOS y Flutter.

En este codelab, crearás una página de acceso usando varios de los componentes de MDC Web.

Qué compilarás

Este codelab es el primero de tres que te guiarán para que crees una app llamada Shrine, un sitio web de comercio electrónico en el que se vende ropa y artículos para el hogar. Demostrará cómo puedes personalizar los componentes para que reflejen cualquier marca o estilo con MDC Web.

En este codelab, crearás una página de acceso para Shrine que contiene lo siguiente:

Dos campos de texto: uno para ingresar un nombre de usuario y el otro para la contraseña
Dos botones: uno para "Cancel" y otro para "Next"
El nombre del sitio web (Shrine)
Una imagen del logotipo de Shrine

Componentes de MDC Web en este codelab

Campo de texto
Botón
Onda

Requisitos

Una versión reciente de Node.js (que viene con npm, un administrador de paquetes de JavaScript)
El código de muestra (que se descargará en el siguiente paso)
Conocimientos básicos de HTML, CSS y JavaScript

Siempre buscamos mejorar nuestros instructivos. ¿Cómo calificarías tu nivel de experiencia con el desarrollo web?

Principiante

Intermedio

Experto

2. Configura tu entorno de desarrollo

Descarga la app de inicio del codelab

La app de partida se encuentra en el directorio material-components-web-codelabs-master/mdc-101/starter. Asegúrate de usar cd en ese directorio antes de comenzar.

… o clónalo desde GitHub

Para clonar este codelab desde GitHub, ejecuta los siguientes comandos:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-101/starter

Instala las dependencias del proyecto

Desde el directorio de inicio, ejecuta lo siguiente:

npm install

Verás mucha actividad y, al final, tu terminal debería mostrar una instalación correcta:

Si no es así, ejecuta npm audit fix.

MDC Web usa un preprocesador de CSS llamado Sass. Si usas un preprocesador de CSS diferente (o ninguno), no hay problema. Puedes usar Sass junto con tu preprocesador actual instalando la CLI sass o usando un complemento (por ejemplo, sass-loader para Webpack, gulp-sass para Gulp o grunt-sass para Grunt) en tu cadena de herramientas de compilación.

Para que nuestro código funcione en navegadores más antiguos, como IE 11, usamos un transpilador llamado Babel para transpilador la sintaxis de JavaScript ES2015 de MDC Web a la sintaxis de JavaScript ES5.

Usaremos webpack para agrupar nuestros archivos y publicar nuestro sitio de forma local. La configuración de webpack para este proyecto ya se configuró en el archivo webpack.config.js. Para obtener más detalles sobre cómo se configuró, consulta la guía de introducción.

Cómo ejecutar la app de inicio

En el mismo directorio, ejecuta lo siguiente:

npm start

Se iniciará webpack-dev-server. Dirige tu navegador a http://localhost:8080/ para ver la página.

¡Listo! El código de inicio para la página de acceso de Shrine debería ejecutarse en tu navegador. Deberías ver el nombre "Shrine" y el logotipo de Shrine debajo de él.

Observa el código

Metadatos en `index.html`

En el directorio de inicio, abre index.html con tu editor de código favorito. Debe contener lo siguiente:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Shrine (MDC Web Example App)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
  <link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
  <section class="header">
    <svg class="shrine-logo" ...>
      ...
    </svg>
    <h1>SHRINE</h1>
  </section>

  <form action="home.html">
  </form>

  <script src="bundle-login.js" async></script>
</body>
</html>

Aquí, se usa una etiqueta <link> para cargar el archivo bundle-login.css que generó webpack, y una etiqueta <script> incluye el archivo bundle-login.js. Además, incluimos normalize.css para una renderización coherente en todos los navegadores, así como la fuente Roboto de Google Fonts.

Estilos personalizados en `login.scss`

Los componentes de MDC Web se diseñan con clases CSS mdc-*, como la clase mdc-text-field. (MDC Web trata su estructura DOM como parte de su API pública).

En general, se recomienda que realices modificaciones de estilo personalizadas en los componentes con tus propias clases. Es posible que hayas notado algunas clases de CSS personalizadas en el HTML anterior, como shrine-logo. Estos estilos se definen en login.scss para agregar estilos básicos a la página.

Abre login.scss y verás los siguientes estilos para la página de acceso:

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

Ahora que te familiarizaste con el código de partida, implementemos nuestro primer componente.

3. Agrega campos de texto

Para comenzar, agregaremos dos campos de texto a nuestra página de acceso, donde las personas podrán ingresar su nombre de usuario y contraseña. Usaremos el componente de campo de texto de MDC, que incluye una funcionalidad integrada que muestra una etiqueta flotante y activa un efecto de onda táctil.

Instala el campo de texto de MDC

Los componentes de MDC Web se publican a través de paquetes de NPM. Para instalar el paquete del componente de campo de texto, ejecuta lo siguiente:

npm install @material/textfield@^6.0.0

Agrega el HTML

En index.html, agrega lo siguiente dentro del elemento <form> en el cuerpo:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

La estructura DOM del campo de texto de MDC se compone de varias partes:

El elemento principal, mdc-text-field
Los subelementos mdc-text-field__ripple, mdc-text-field__input, mdc-floating-label y mdc-line-ripple

Agregar CSS

En login.scss, agrega la siguiente instrucción de importación después de la importación existente:

@import "@material/textfield/mdc-text-field";

En el mismo archivo, agrega los siguientes estilos para alinear y centrar los campos de texto:

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

Agrega el JavaScript

Abre login.js, que actualmente está vacío. Agrega el siguiente código para importar y crear instancias de los campos de texto:

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

Agrega la validación HTML5

Los campos de texto expresan si la entrada del campo es válida o contiene un error, mediante los atributos que proporciona la API de validación de formularios de HTML5.

Podrás:

Agrega el atributo required a los elementos mdc-text-field__input de los campos de texto Nombre de usuario y Contraseña.
Establece el atributo minlength del elemento mdc-text-field__input del campo de texto Contraseña en "8".

Ajusta los dos elementos <label class="mdc-text-field mdc-text-field--filled"> para que se vean de la siguiente manera:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

Actualiza la página en http://localhost:8080/. Ahora debería ver una página con dos campos de texto para el nombre de usuario y la contraseña.

Haz clic en los campos de texto para ver la animación de etiquetas flotantes y la animación de ondas de línea (la línea de borde inferior que se ondula hacia afuera):

4. Cómo agregar botones

A continuación, agregaremos dos botones a nuestra página de acceso: "Cancel" y "Next". Usaremos el componente de botón de MDC, junto con el componente de onda de MDC, para completar el efecto de onda de tinta icónico de Material Design.

Instala el botón de MDC

Para instalar el paquete del componente de botón, ejecuta lo siguiente:

npm install @material/button@^6.0.0

Agrega el HTML

En index.html, agrega lo siguiente debajo de la etiqueta de cierre del elemento <label class="mdc-text-field mdc-text-field--filled password">:

<div class="button-container">
  <button type="button" class="mdc-button cancel">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Cancel
    </span>
  </button>
  <button class="mdc-button mdc-button--raised next">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Next
    </span>
  </button>
</div>

Para el botón "Cancel", usamos el estilo de botón predeterminado. Sin embargo, el botón "Next" usa una variante de estilo elevado, que se indica con la clase mdc-button--raised.

Para alinearlos fácilmente más adelante, incluimos los dos elementos mdc-button en un elemento <div>.

Agregar CSS

En login.scss, agrega la siguiente instrucción de importación después de las importaciones existentes:

@import "@material/button/mdc-button";

Para alinear los botones y agregar un margen alrededor de ellos, agrega los siguientes estilos a login.scss:

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

Agrega una onda de tinta a los botones

Cuando el usuario toca un botón o hace clic en él, debe mostrar comentarios en forma de onda de tinta. El componente de onda de tinta requiere JavaScript, por lo que lo agregaremos a la página.

Para instalar el paquete del componente de onda, ejecuta lo siguiente:

npm install @material/ripple@^6.0.0

En la parte superior de login.js, agrega la siguiente instrucción de importación:

import {MDCRipple} from '@material/ripple';

Para crear instancias de las ondas, agrega lo siguiente a login.js:

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

Como no necesitamos conservar una referencia a la instancia de onda, no es necesario asignarla a una variable.

Eso es todo. Actualiza la página. Se mostrará una onda de tinta cuando hagas clic en cada botón.

Completa los campos de texto con valores válidos y presiona el botón "NEXT". ¡Lo lograste! Continuarás trabajando en esta página en MDC-102.

5. Resumen

Con el lenguaje de marcado HTML básico y solo unas pocas líneas de CSS y JavaScript, la biblioteca de componentes de Material para la Web te permitió crear una atractiva página de acceso que cumple con los lineamientos de Material Design y tiene un aspecto y comportamiento coherentes en todos los dispositivos.

Próximos pasos

El campo de texto, el botón y la onda son tres componentes principales de la biblioteca de MDC Web, pero hay muchos más. También puedes explorar el resto de los componentes en MDC Web.

Puedes consultar MDC-102: Estructura y diseño de Material Design para obtener información sobre el panel de navegación y la lista de imágenes. Gracias por probar los componentes de Material. Esperamos que hayas disfrutado de este codelab.

Pude completar este codelab en una cantidad de tiempo y con un nivel de esfuerzo razonables

Totalmente de acuerdo

De acuerdo

Neutral

En desacuerdo

Totalmente en desacuerdo

Me gustaría seguir usando los componentes de Material en el futuro.

Totalmente de acuerdo

De acuerdo

Neutral

En desacuerdo

Totalmente en desacuerdo

MDC-101 Web: Conceptos básicos sobre componentes de Material (MDC) (Web)

1. Introducción

¿Qué son Material Design y los componentes de Material para la Web?

Qué compilarás

Componentes de MDC Web en este codelab

Requisitos

Siempre buscamos mejorar nuestros instructivos. ¿Cómo calificarías tu nivel de experiencia con el desarrollo web?

2. Configura tu entorno de desarrollo

Descarga la app de inicio del codelab

… o clónalo desde GitHub

Instala las dependencias del proyecto

Cómo ejecutar la app de inicio

Observa el código

Metadatos en index.html

Estilos personalizados en login.scss

3. Agrega campos de texto

Instala el campo de texto de MDC

Agrega el HTML

Agregar CSS

Agrega el JavaScript

Agrega la validación HTML5

4. Cómo agregar botones

Instala el botón de MDC

Agrega el HTML

Agregar CSS

Agrega una onda de tinta a los botones

5. Resumen

Próximos pasos

Pude completar este codelab en una cantidad de tiempo y con un nivel de esfuerzo razonables

Me gustaría seguir usando los componentes de Material en el futuro.

Metadatos en `index.html`

Estilos personalizados en `login.scss`