El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrolladores: Trucos semanales

Integra Angular Material al diseño de tu sitio web

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
05:07
  Añadir a marcadores

Transcripción

Material Design, acorde a la definición encontrada en su sitio material.google.com, es un lenguaje visual que sintetiza los principios del buen diseño con la tecnología y la ciencia. En otras palabras, es un conjunto de especificaciones y buenas prácticas sobre el diseño web y móvil que ha recopilado Google a lo largo de los años y que busca tener interfaces de usuario homologadas para garantizar el uso intuitivo de una página web o de una aplicación móvil. Desde que fue lanzada en el Google Layout en junio de 2014 ha crecido y se ha fortalecido enormemente hasta el grado de que se han generado versiones específicas para ser integradas y usadas por algunas librerías y frameworks de JavaScript como AngularJS y es precisamente aquí donde nace Angular Material que es la adaptación de Material Design para ser usada e integrada con Angular. Tanta aceptación ha tenido que se le dado un apoyo y mantenimiento especial que podrás encontrar su documentación específica en el sitio material.angularjs.org. Y, al igual que muchas herramientas en el mercado, la practicidad y sencillez de uso es tal que puedes generar una aplicación web o móvil en cuestión de minutos. Aprendamos a hacer una aplicación web con Angular Material. Toda la información de Angular Material podemos encontrarla en el sitio web material.angularjs.org. Si queremos comenzar rápidamente con esta herramienta podemos acudir a su GitHub. Aquí en el GitHub tenemos un elemento que se llama material-start. Tal cual, lo único que necesitaremos es clonar el proyecto para lo cual vamos a copiar la ruta completa vayamos a nuestra terminal de comandos y vamos a escribir git clone y mandamos la ruta donde se encuentra material-start. Esta es la plantilla de inicio que ofrecen donde ya viene todo instalado y configurado. Una vez que ya lo tenemos, simplemente, entramos a la carpeta y aquí vamos a ejecutar el comando npm install. Esto va a instalar todas las librerías y paquetes necesarios para que podamos tener disponible en nuestra computadora Material Design. Una vez que ya lo tenemos disponible e instalado en nuestra computadora, lo único que tendremos que hacer es levantar un servidor web que trae incluido. Al levantar ese servidor web vamos a poder ver todo el proyecto y a partir de aquí vamos a poder modificarlo y hacer todas las actualizaciones que vayamos a necesitar. ¡Cuidado!, puede tomar un poco de tiempo, así que sé paciente, no desesperes. Una vez que haya terminado, simplemente, vamos a ejecutar el comando npm run serve, esto nos va a levantar un servidor web que vamos a poder utilizar. La URL será 127.0.0.1 en el puerto 8080. Y como puedes ver, aquí ya tenemos una estructura base del proyecto. Ahora, veamos cómo se compone. Cuando abrimos la carpeta podemos darnos cuenta que tenemos dos fólders principales, uno será la carpeta de node_modules donde van a estar instalados todos los componentes que requiere la aplicación para funcionar y el otro será app. En app tenemos una carpeta llamada src. Aquí es donde se encuentran todos los archivos fuente de nuestra aplicación. Así que, entramos a esa sección donde tenemos el AppController y, a partir de esto, cada uno de los componentes que nosotros trabajemos va a tener en sí un elemento donde va a tener el html y el JavaScript, es decir, todo esto está dividido por componentes. Entonces, en cada componente tú vas a poder acceder y modificar la lógica de cada uno de ellos, dependiendo de lo que estés utilizando. Es importante que puedas reconocer en qué momento estamos utilizando Material Design aquí, por ejemplo, tú puedes reconocer este tipo de etiquetas. Estas etiquetas son directivas específicas que van a invocar a Material Design es por eso que tienen el nombre de md sobre Material Design. Y si aquí tienes alguna duda sobre qué tipo de componente puedes utilizar, simplemente, puedes regresar a la documentación oficial y en esta parte, en el menú izquierdo, podrás encontrar todos los componentes que tiene disponible. Por ejemplo, si vamos a la sección de CSS podrás encontrar todo lo que puedes trabajar con los botones y cómo puedes interactuar con ellos. Incluso aquí nos aparece el nombre de la directiva que nosotros podemos utilizar. Hay algunas otras cuestiones que pueden ser un poco más sofisticadas y las puedes ver en acción, por ejemplo, entras a la sección DEMOS y aquí en DEMOS supongamos que queremos ocupar un Card. Lo seleccionamos y nos aparecen los distintos ejemplos. La gran ventaja es que tiene aquí una opción para ver el código fuente incluido directamente en la página o podemos ir a codepen y ver una implementación de este ejercicio. Aquí, tú simplemente podrás ocupar el código, copiarlo y pegarlo directamente en tu implementación. De esta manera, es como podemos estar trabajando directamente con Angular Material y poder integrarlo a nuestro proyecto.