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

7 minuto(s)

Demo

En la parte anterior llamada Como Crear una Página Web con Material Design – Parte 1 desplegamos Material Design y diseñamos la Página Principal con sus elementos Header, Banner, Secciones, Boletín (Newsletter) y el Footer, estos elementos los he definido para este tutorial, recuerda que tu puedes colocar los elementos que necesites, en esta Parte 2 vamos a continuar con la creación de las siguiente páginas del sitio web.

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: “Razones Por Las Cuales Te Cuesta Aprender A Programar”:

Spotify: Sound Cloud:

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

Breadcrumbs de Navegación

Para Ofrecer una mejor experiencia al usuario, es importante guiarles en que lugar de la página web se encuentran, esto es útil para los usuarios que tienen poca experiencia navegando en páginas webs.

Este elemento lo vamos agregar a la página Nosotros, Servicios y Contacto, en el Home no es tan necesario, ya que el usuario puede distinguir que esta en el Home, mirando la url en la barra de navegación del navegador web.

Entonces agrego el siguiente código HTML para colocar un breadcrumb de navegación.


He creado un archivo llamado estilos.css en donde colocaré mis estilos personalizados, para darle un mejor aspecto al breadcrumb y demás elementos, agrego las siguientes propiedades CSS a las clases HTML correspondientes.


Entonces si voy al navegador debería poder ver el Breadcrumb de navegación.

Bueno ahora pasaré a crear la página Nosotros, en la Parte 1 de este tutorial creamos el header, menú de navegación, footer o pie de página y una sección para suscribirse al boletín (newsletter), estos 4 elementos los vamos a usar en las demás páginas, entonces solo nos enfocaremos en crear el contenido interior de las páginas restantes, la página que toca diseñar ahora es Nosotros, vamos con ello.

Página Nosotros

En esta página voy crear un encabezado h1 con el texto Nosotros y también un bloque de texto en donde se explica acerca de la empresa u organización, entonces agrego el siguiente código HTML.


Si voy al navegador, debería de ver el los breadcrumbs de navegación que hice al inicio y el texto de encabezado h1 Nosotros y el texto acerca de la empresa u organización.

Ahora voy a diseñar 3 bloques que contienen texto sobre la misión, visión y el objetivo de la empresa, puedes ver que en todos los contenidos de texto, estoy usando texto Loremp Ipsum, el cual es un texto de demostración, tu puedes cambiar este texto por tu propio texto, no hay problema, te dejo la herramienta a la cual puedes acceder en este enlace. (El enlace puede continuar estando disponible o no, esto no depende de mi, si no de los desarrolladores u organización que da soporte a esa página, si no esta disponible tu puedes crear manualmente un texto de demostración, no hay problema.)

Bueno comenzaré diseñando el bloque Misión, agrego un encabezado de texto h3, una imagen que expresa dicha información y el texto sobre la misión de la empresa u organización, coloco el siguiente código HTML.


Si voy al navegador, debería de ver el primer bloque Misión.

El siguiente bloque es Misión, igual que en el bloque anterior agrego un encabezado de texto h3, una imagen que expresa dicha información y el texto sobre la visión de la empresa u organización, coloco el siguiente código HTML.


Entonces  voy al navegador y debería de ver 2 bloques el de Misión y luego el de Visión.

El último y tercer bloque es Objetivos y la estructura también es similar a los 2 bloques anteriores, solo cambia el contenido, entonces agrego el siguiente código HTML.


Ahora entonces tengo 3 bloques: Misión, Visión y Objetivo.

Tal como mencione antes de iniciar la creación de la página Nosotros, en la Parte 1 de este tutorial ya realice la creación del header, menú de navegación, footer o pie de página y una sección para suscribirse al boletín (newsletter), estos 4 elementos los uso en las demás páginas, entonces solo nos enfocaremos en crear el contenido interior de cada página.

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

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 Servicios.
  • Los estilos CSS los colocaré en el repositorio GitHub, para no hacer muy amplio el tutorial y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 
  • 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.