Como Crear una Página Web con Material Design – Parte 1

6 minuto(s)

Demo

Los diseñadores de páginas Webs o desarrolladores Front-end, cuentan con diferentes herramientas y utilidades para crear interfaces de usuario rápidamente, una de estas herramientas es Material Design, el cual es un Framework muy usado para crear interfaces de aplicaciones móviles Android, pero también podemos crear interfaces para sitios web y en este Post vamos a crear una página web paso a paso con Material Design.

Partes

Antes de continuar, te invito a leer los siguientes artículos:

Si ya lo conoces o eres usuario avanzado de Material Design, puedes continuar, no hay problema.

Asimismo te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”:

Spotify SoundCloud

Bien ahora continuemos con el Post: Como Crear una Página Web con Material Design – Parte 1.

Hasta la fecha de este Post, podemos hacer uso de 2 versiones de Material Design, una es la versión normal o standar y la otra es la versión Lite, yo usaré la versión Lite, es decir Material Design Lite la cual me brinda una documentación muy organizada.

Desplegando Material Design

Me dirijo a la página Material Design Lite y crearé una versión personalizada de Material Design con los colores Indigo y Blue (Tu puedes crearte una versión con los colores que desees o simplemente descargar Material Design, el cual trae un tema por defecto), luego hago clic en el botón que se encuentra en el centro de la paleta de colores para descargar mi tema personalizado.

Para este tutorial diseñaré 4 páginas, las cuales son Inicio, Nosotros, Servicios y Contacto, entonces necesito crear 4 archivos, los cuales serán index.html, nosotros.html, servicios.html y contacto.html

En los 4 archivos HTML debo de instanciar los archivos de mi tema personalizado que descargue desde Material Design Lite, primero instancio el archivo CSS material.min.css, lo coloco antes de la etiqueta de cierre </head>


Luego instancio el archivo JavaScript material.min.js antes de la etiqueta de cierre </body>


Recuerda que debemos instanciar Material Design en todos los archivos HTML en donde deseamos usar Material Design.

Creando la Página Web con Material Design

Tal como mencione más arriba crearé las páginas Inicio, Nosotros, Servicios y Contacto, así que seguiré ese orden. Asimismo por sentido común usaré el mismo header y footer en todas las páginas de mi sitio web.

Los estilos CSS personalizados para todas las páginas los crearé en un archivo nuevo llamado estilos.css, este archivo lo guardo en una carpeta llamada css para mantener el orden, lo coloco antes de la etiqueta de cierre </head>

El archivo estilos.css lo puedes encontrar en el repositorio GitHub de este proyecto.


Ahora pasaré a crear las páginas HTML, comenzaré con la página de Inicio.

Página Inicio

En esta página voy a diseñar una cabecera o encabezado (header) en donde puede ir el logo o el nombre de la organización, un menú de navegación, un banner, 3 secciones debajo del banner, un formulario de suscripción al boletín (newsletter) y el footer (pie de página), todo ello lo colocaré en mi archivo index.html.

Header

Como en toda página comenzamos con el header, entonces agrego el siguiente código HTML.


Si abro mi archivo index.html en el navegador, se debería ver así:

Banner

Mi banner del home va tener una imagen, un texto de introducción al Post y un botón para continuar leyendo el Post.


Si voy a mi navegador y vuelvo a abrir el archivo index.html debería de verse el header y debajo de este el banner:

Secciones

Ahora añadiré 3 secciones debajo del banner.


Entonces si voy a mi navegador y vuelvo a abrir el archivo index.html debería de verse las 3 secciones debajo del banner:

Boletín (Newsletter)

Aquí agregaré un formulario con un campo de texto y un botón.


Vuelvo a abrir en mi navegador el archivo index.html debería de verse debajo de las 3 secciones el formulario del boletín (newsletter)

A cada sección le he colocado una imagen de  fondo, esto es para darle vida al diseño.

Footer

Y por último agregaré el footer, a este le colocaré 4 columnas con sus opciones correspondientes.


Nuevamente vuelvo a cargar el archivo index.html en el navegador y debo ver el footer debajo del boletín (newsletter)

Bien hasta aquí terminamos con todos los elementos de la Página Home.

Material Design nos permite usar sus elementos y combinarlos con nuestros propios estilos CSS, yo para mantener el estándar he colocado al inicio de los nombres de clases la abreviatura mdl que significa material design.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capítulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente Parte de este tutorial crearé la página Nosotros.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.