Como Crear una Página Web con Material Design – Parte 4 (Final)

Material Design Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo Github

En la parte anterior llamada Como Crear una Página Web con Material Design – Parte 3 creamos el contenido para la página Servicios, que constaba con 6 bloques de servicios y mantuvimos los breadcrumbs, el header, menú de navegación, el newsletter y el footer, en esta cuarta y última parte, crearemos la página Contacto con sus elementos respectivos, vamos con ello.

Partes


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

Asimismo te invito a escuchar el Podcast: “Con Que Lenguaje De Programación Comenzar Para El Desarrollo Web”:

Spotify:Sound Cloud:

Bien ahora continuemos con el Post: Como Crear una Página Web con Material Design – Parte 4 (Final).

Al igual que en la página Nosotros y Servicios para la página Contacto usaré el breadcrumb (miga de pan) que creamos en la Parte 2 el cual sirve de guía al usuario para que sepa en que lugar de la página se encuentra. 

Para el breadcrumb usaré los mismos estilos CSS, ya que es el mismo diseño y solo cambio el texto a Contacto.

Ahora crearemos el contenido de la página Contacto.

Página Contacto

No olvidemos que el Header y el Footer que creamos en la Parte 1 de este tutorial, se usan para todas las páginas, lo único que cambia ese el contenido del medio de cada página. 

Voy a colocar un mapa el cual lo he obtenido desde Google Maps y me brinda un código con un elemento iframe que mostrará una determinada ubicación.

Si voy al navegador debería ver el mapa de Google Maps dentro de la página Contacto.

Debajo del mapa voy a colocar 2 columnas, en la primera columna del lado izquierdo irá un formulario de contacto.

Si voy al navegador debo de ver el formulario de contacto debajo del formulario y al lado izquierdo. He agregado el atributo required a los campos del formulario, excepto el campo teléfono.

Ahora al lado derecho del formulario de contacto, voy a colocar los datos de contacto de la organización.

Entonces si voy al navegador debo de ver el formulario de contacto al lado izquierdo y los datos de contacto al lado derecho.

Puedes ver que a cada dato o información de los datos de contacto le he colocado un icono que exprese esa información, tu puedes cambiar los iconos, solo busca en la galería de iconos de Material Design el que más te agrade o encaje con tu diseño.

Recuerda que los estilos CSS los colocaré en el repositorio GitHub con el resto de código de esta página web, estos estilos son mis estilos personalizados y son aparte de los estilos de Material Design.

Tal como mencione al inicio de la creación de la página Servicios, 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.

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.

Y bien hasta aquí termina este tutorial, al inicio de cada Parte del tutorial, he colocado una Demo y en esta cuarta y última parte, he colocado el código del proyecto alojado en un repositorio de GitHub.

Conclusión

En este tutorial has aprendido a diseñar un sitio web, creando diferentes elementos en cada página, tu puedes guiarte de este tutorial y crear sitios o proyectos web más complejos.

Nota (s)

  • 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.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments