¿Qué es Material Design, para qué sirve y cómo desarrollar Apps Android? - Primeros pasos

Escrito por: Shrek

15 enero 2021

Si sueles leer las noticias relacionadas con el mundo de los móviles, habrás oído hablar en su momento de Material Design, un lenguaje de diseño creado por Google para sus dispositivos móviles que corren sistema operativo Android.

Primeros Pasos con Material Design

Ver este vídeo en YouTube

En efecto, como parte de los constantes cambios que experimentamos en torno a los sistemas de programación que se utilizan, en su momento desde La Gran G presentaron de forma oficial este entorno por demás interesante.

El objetivo que se persigue en estos casos tiene que ver generalmente con simplificar la manera en la que los desarrolladores pueden generar aplicaciones para Android, las que nosotros luego descargamos en nuestros terminales.

En este contexto es que en su momento nos enteramos de la creación de Material Design y por eso si quieres dar tus primeros pasos con este lenguaje de programación, te aconsejamos que sigas leyendo para saber más al respecto.

Una vez que hayas leído los aspectos básicos acerca de este entorno, estarás en condiciones entonces de comprender cómo mejora la usabilidad de las aplicaciones Material Design, y cuál es su potencial final.

abriendo material design

Índice()

¿Cómo implementar Material Design?
Obtener Materialize de Material Design

¿Cómo implementar Material Design?

La implementación de Material Design en nuestro sitio web es el primer paso que tenemos que tener en cuenta en este tipo de situaciones, aunque en principio no debes preocuparte, dado que existen muchas opciones relacionadas con frameworks libres.

Aquí lo que tienes que tener en consideración es que todo dependerá de tu nivel de conocimientos en programación, como así también de las necesidades que tenga el proyecto que estás llevando adelante.

En general, podemos decir que hay dos frameworks que podrían ser considerados los más importantes dentro de este segmento, como material-ui, el cual utiliza la librería React, y en el que están basadas aplicaciones como Facebook e Instagram.

En segunda instancia, para los usuarios que no tengan tantos conocimientos, tenemos Materialize, el sistema perfecto porque nos permite programar sólo con la inclusión de una librería .js y un archivo .css, y en el que vamos a centrarnos a continuación.

trabajando con material design

Obtener Materialize de Material Design

Bien, llegados a este punto debes considerar que podemos obtener Materialize de distintas formas, aunque la mayoría de los usuarios apuestan directamente por realizar la descarga de sus archivos desde la web oficial.

Una segunda alternativa sería utilizando Sass, qué funciona de manera similar a Less, aunque nos demanda contar con un compilador.

En estas circunstancias, disponemos de un gestor de paquetes de Node.js que habrá que instalar previamente en nuestro sistema como para que luego nos permita utilizar NPM, ejecutando a continuación la siguiente línea de comando en Node.js:

npm install materialize-css

Una vez que hayas realizado el paso anterior, lo siguiente será incluir los archivos desde el CDN de la aplicación, de este modo:

<!—CSS compilado y minificado -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">

<!—JavaScript compilado y minificado -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

Ahora tendrás Materialize para tus proyectos, así que vamos a enseñarte un ejemplo de su uso:

Lo primero que tienes que hacer en estos casos es intentar crear un código HTML más bien sencillo, gracias al cual podrás incluir las librerías de Materialize, mientras que también añadiremos un menú desplegable de Material Design en su cuerpo.

Para eso, lo primero que tienes que hacer es incluir las etiquetas convencionales y luego añadir una etiqueta link a la hoja de estilo, de este modo:

<!DOCTYPE html>
<html>
<head>

Una vez que hayas terminado con el paso anterior, el siguiente será agregar las clases que le van a indicar a los elementos ul el comportamiento que deben tener como menú desplegable. En esta ocasión será del tipo dropdown-content.

A su vez, vamos a añadir jQuery al final, para que el código quede de este modo:

<body>
<ul id="dropdown2" class="dropdown-content">
<li><a href="#!">Enlace 1<span class="badge">1</span></a></li>
<li><a href="#!">Enlace 2<span class="new badge">1</span></a></li>
<li><a href="#!">Enlace 3</a></li>
</ul>
<a class="btn dropdown-button" href="#!" data-activates="dropdown2">Menu Desplegable<i class="mdi-navigation-arrow-drop-down right"></i></a>

Una vez que hayamos ingresado el código anterior, podremos visualizar un ensayo de cómo funcionará el contenido creado.

Aquí hemos concluido entonces con esta primera implementación de Material Design de una forma por demás rápida y sencilla, aunque por supuesto es recomendable que sigas haciendo pruebas para conocer mejor el alcance de este entorno de desarrollo.

Una vez que domines este lenguaje de programación, estarás entonces en condiciones de desarrollar aplicaciones para las diferentes versiones de Android, de modo tal que sean capaces de adaptarse a este sistema operativo sin mayor esfuerzo.

¿Qué más te gustaría saber acerca del lenguaje de programación Material Design?