Maqueta Web.
En este tópico, trataremos sobre Maquetas Web, esperamos abordar de una forma sencilla y amigable este tema que es muy relevante en el desarrollo de un sitio Web.
En éste breve paso a paso para principiantes, se abordará cada fase del maquetado de la siguiente manera:
- Prototipos de baja fidelidad.
- Prototipos de alta fidelidad.
- Hojas de estilos.
- Maqueta Final.
Muchos dasarrolladores web, quizás por su gran experiencia en la industria del desarrollo, puede que pasen por alto estos pasos iniciales en el desarrollo web o también se puede dar el supuesto que por ahorrar un poco de tiempo en dicho desarrollo, tiende a no visualizarse estas fases de forma clara, sino que muchos presentan el producto final (La Maqueta Web).
Antes de entrar en profundidad y de echar un poco de código es relevante definir lo que es una Maqueta web. Éstas son consideradas como Diagramas de Presentación, cuyo objeto o propósito es generar una referencia visual de la estructura, organización e interacción de la página y/o sitio web.
Dentro de lo que concierne a la maqueta Web, es importante recalcar una breve sugerencia: cuando se realiza el desarrollo de una página o sitio web, debe realizarse un prototipo antes de desarrollar la web, es mejor dejar los parámetros y alcance del proyecto definidos antes de desarrollar la página o el sito en sí. Recuerden sí requiere algún tipo de modificación a la página o sitio, es más fácil hacerlo en el prototipo, menos costoso y genera un ahorro de tiempo significativo, que hacerlo directamente en el producto ya desarrollado.
Una vez dado esa pequeña recomendación, vamos a ir desarrollando el tema de una forma teórica con su respectivos ejemplos.
Hablemos de
Prototipos de baja fidelidad: son considerados como dibujos estáticos, dentro de éstos se tienen las técnicas:
- Sketching: Se trata de un bosquejo con lápiz y papel, busca transmitir una idea clara de lo que desea, es muy útil en entrevistas iniciales con el cliente o reuniones internas con el equipo de trabajo.
Para ejemplificar lo que venimos tratando en este tópico, un amigo me pidió que diseñara su maqueta web y en la conversación inicial salió este sketching. (Ver imagen 1)
Imagen 1. Sketching Proyecto Maqueta Web
Es recomendable utilizar ésta tipo de técnica para luego pasar a un prototipo más elaborado. Siguiendo con la labor recomendada sobre la maqueta web, se utilizó la técnica siguiente para realizar un bosquejo mejor elaborado de lo que se estaba solicitando:
- Wireframes: es un prototipo de baja fidelidad pero mejor elaborado, donde se puede visualizar con mayor claridad la estructura, inventario de los elementos que conformarán la página o sito web, cabeceras, listas, etiquetas de los vínculos o títulos, ubicación de cada elemento de la página, entre otros.
Siguiendo con el ejemplo se tiene que en la imagen número 2 y 3, se muestra el uso de esta técnica, el como será la estructura de la página web y los elementos que la conforman respectivamente.
Imagen 2. Estructura de la Web.
Imagen 3. Diseño más elebaroado.
Por un tema de espacio y que no se pierda el enfoque de lo que se quiere dar a conocer a través de cada ejemplo mostrado en las imágenes, sólo se colocó los comentarios y se identifican cuatro elementos de la página, es importante que para efectos de presentarlos al cliente, deben estar inventariados todos los elementos que conforman la página web.
Como última técnica del prototipado de baja fidelidad, se tiene los Storyboard: secuencias de wireframes. En esta técnica se presentan todos las páginas (wireframes) que conforman el sitio, de tal forma que nuestro cliente pueda apreciar como será el sitio al ser desarrollado.
Observen el menú allí se puede visualizar la secuencia de los wireframes,
Imagen 4. Diseño de Storyboard (1)
Imagen 5. Diseño de Storyboard (2)
Imagen 6. Diseño de Storyboard (3)
¡En hora buena!, culminado el prototipo de baja fidelidad, se realiza el prototipo funcional o prototipo de alta fidelidad.
Un prototipo funcional o de alta fidelidad, le permite mostrar al cliente como funciona la página o el sitio web, se tienen código HTML, elementos posicionados en cada sección o estructura de la página como también cierta aplicación de estilos.
A partir de esta sección se ira construyendo la maqueta web, tal como se ha hecho en el prototipo de baja fidelidad.
Sí nos fijamos en la imagen 2, tenemos una estructura donde se muestra como deben ir cada elemento en la página web, Para ésto, utilizaremos el frameworks boostrap para generar el código marcado y los códigos CSS3 iniciales.
Aquí muestro una pequeña plantilla creada en HTML5, donde se puede visualizar como se ha dividido cada sección de la página web.
Imagen 7. Plantilla en Código Html5
Este código creará una división en el navegador, mostrando bloques alineados uno debajo del otro, de forma vertical. tal como se muestra en la imagen siguiente. (No posee estilos y se muestra como lo entiende el navegador)
Imagen 8. Plantilla Vista del Navegador
Si aplicamos un poco de estilos css, lograremos que se vea como la imagen número 2, tal como fue pautado en las fases iniciales de desarrollo, ésta tomaría el siguiente aspecto.
Primero mostraremos el código css y luego la representación en el navegador.
/*Permite dar un estilo inicial de Caja Flexibles a la maqueta Web
Es importante recalcar que el diseño Web dentro de sus fines deben ser
de tipo responsive, adaptativo a cualquier dispositivo */
/*Estilos del Cuerpo de la Paqina Web
Aqui se le indica a un largo de 85% de toda resolucion del dispisivo
y una altura del 75%, margenes izquierdo y derechos de forma automatica.*/
body{
width: 85%;
height: 75%;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-color: #d0d0d0;
}
/*Se le da esilo al container principal que esta dentro del cuerpo de la página Web (body)*/
#flex-contanier {
background-color: #c1c1c1;
width: 100%;
height: 100%;
}
/*Se ha declarado estilos individuales para cada sección
tal como se muestra en la seccion del header */
header{
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction:row;
border: 1px solid #dcdcdc;
}
/*Toda sección que este instanciando a la clase header heredaran el mismo color e linea border y margen interno padding*/
.header{
background-color: #c1c1c1;
border: 1px solid #dbdbdb;
padding: 5px;
}
#logo {
flex:2;
}
#buscar{
flex:1;
}
/*Estilos de la barra de navegación e inclusive los de la seccion de redes sociales*/
nav {
display: flex;
display: -webkit-flex;
border: 1px solid #dcdcdc;
}
.nav{
background-color: #c1c1c1;
border: 1px solid #dbdbdb;
padding: 5px;
}
#menu {
flex:2;
}
#redess{
flex:1;
}
/*Estilos de la sección principal, aqui se mostraran todos los contenidos del sitio*/
section{
margin-left: 5px;
}
.main-container{
background-color: #c1c1c1;
text-align: justify;
}
#main-container{
width: 100%;
height: 400px;
}
/*Estilos de la sección institucional*/
footer{
border: 1px solid #dcdcdc;
}
.footer{
background-color: #c1c1c1;
border: 1px solid #dbdbdb;
padding: 5px;
text-align: center;
}
Imagen 9. Estructura base de nuestra Maqueta Web.
Una vez, diseñado y elaborado la estructura base de nuestra Maqueta Web, procedemos a agregar estilos y algunas funcionalidades que serán parte de nuestra prototipo de alta fidelidad, llamado Mockups, es importante recordar que en esta fase el diseño debe ser similar o con pocos cambios necesarios, que fueron discutidos y acordados en la etapa del prototipo de baja fidelidad.
Aquí Nuestra Maqueta.
Código HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Es una Prueba</title>
<meta name"viewport" content="width=divice-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/estilo.css" type="text/css">
</head>
<body>
<div id="flex-container">
<header>
<div id="logo" class="header"> <img src="img/logo.png"></div>
<div id="buscar" class="header">
<form action ="#">
<input type="search" name="Buscar" autofocus placeholder="Buscar">
<input class="buscar" type="image" src="img/buscar.png" value"" name"buscar">
</form>
</div>
</header>
<nav>
<div id="menu" class="nav">
<li><a class="active" href="">Inicio</a></li>
<li><a href="">Servicios</a></li>
<li><a href="">Preguntas</a></li>
<li><a href="">Contacto</a></li>
<li><a href="">Quíenes Somos</a></li>
</ul>
</div>
<div id="redess" class="nav">
<li><a href=" " target="_blank"><img alt="Nuestro Twitter" height="25" src="img/twit.png" title="siguenos en Twitter"/></a></li>
<li><a href=" " target="_blank"><img alt="Nuestro Canal YouTube" height="25" src="img/you_tube.png" title="siguenos en nuestro canal"/></a></li>
<li><a href=" " target="_blank"><img alt="Contáctanos" height="25" src="img/email.png" title="Nuestro correo"/></a></li>
<li><a href=" " target="_blank"><img alt="siguenos en rhrobertd@gmail.com" height="25" src="img/face.png" title="siguenos en facebook"/></a></li>
</ul>
</div>
</nav>
<section>
<div id="main-container" class="main-container">
<p> contenedor Principal</p>
</div>
</section>
<footer class="footer">
<p id="f1">Copyright - @wifi</p>
<p id="f2">SMS y Llamadas por Whatsapp +58 - 04265610275</p>
<li><a href="">Contacto</a></li>
<li><a href="">Quíenes Somos</a></li>
</ul>
</p>
</footer>
</div>
</body>
</html>
Código de Estilos Css.
/*Permite dar un estilo inicial de Caja Flexibles a la maqueta Web
Es importante recalcar que el diseño Web dentro de sus fines deben ser
de tipo responsive, adaptativo a cualquier dispositivo */
/*Estilos del Cuerpo de la Paqina Web
Aqui se le indica a un largo de 85% de toda resolucion del dispisivo
y una altura del 75%, margenes izquierdo y derechos de forma automatica.*/
body {
font-family: 90% Arial;
width: 85%;
height: 75%;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
/*Se le da esilo al container principal que esta dentro del cuerpo de la página Web (body)*/
#flex-contanier {
background-color: #c1c1c1;
width: 100%;
height: 100%;
}
/*Se ha declarado estilos individuales para cada sección
tal como se muestra en la seccion del header */
header{
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction:row;
border: 1px solid #dcdcdc;
/*Esta condición de estilos es para poder generar el efecto difuminado o gradiente del fondo en el banner*/
background: -moz-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 8%, rgba(102,102,102,1) 19%, rgba(71,71,71,1) 28%, rgba(44,44,44,1) 38%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 82%, rgba(19,19,19,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(76,76,76,1)), color-stop(8%, rgba(89,89,89,1)), color-stop(19%, rgba(102,102,102,1)), color-stop(28%, rgba(71,71,71,1)), color-stop(38%, rgba(44,44,44,1)), color-stop(51%, rgba(0,0,0,1)), color-stop(82%, rgba(17,17,17,1)), color-stop(100%, rgba(19,19,19,1)));
background: -webkit-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 8%, rgba(102,102,102,1) 19%, rgba(71,71,71,1) 28%, rgba(44,44,44,1) 38%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 82%, rgba(19,19,19,1) 100%);
background: -o-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 8%, rgba(102,102,102,1) 19%, rgba(71,71,71,1) 28%, rgba(44,44,44,1) 38%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 82%, rgba(19,19,19,1) 100%);
background: -ms-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 8%, rgba(102,102,102,1) 19%, rgba(71,71,71,1) 28%, rgba(44,44,44,1) 38%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 82%, rgba(19,19,19,1) 100%);
background: linear-gradient(to right, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 8%, rgba(102,102,102,1) 19%, rgba(71,71,71,1) 28%, rgba(44,44,44,1) 38%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 82%, rgba(19,19,19,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 );
color:#ffffff;
}
/*Toda sección que este instanciando a la clase header heredaran el mismo color e linea border y margen interno padding*/
.header{
border: 0px solid #dbdbdb;
padding: 5px;
}
#logo {
flex:2;
}
#buscar{
flex:1;
float: right;
vertical-align: middle;
text-align: right;
padding: 20px;
}
/*Estilos de la barra de navegación e inclusive los de la seccion de redes sociales*/
nav {
display: flex;
display: -webkit-flex;
border: 0px solid #dcdcdc;
background-color: #000000;
color:#ffffff;
}
.nav{
font-family: Arial;
font-size: 12px;
border: 0px solid #dbdbdb;
padding: 0px;
}
#menu {
flex:2;
}
/*Se crean los estilos para el menú*/
#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
#menu li {
float: left;
border-right: 1px solid #bbb;
}
#menu li:last-child {
border-right: none;
}
#menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#menu li a:hover {
background-color: #333333;
}
.active {
background-color: #c50717;
}
/*Se crean los estilos para las redes sociales*/
#redess{
flex:1;
}
#redess ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
#redess li {
float: right;
border-right: 0px solid #bbb;
}
#redess li:last-child {
border-right: none;
}
#redess li a {
display: block;
color: white;
text-align: center;
padding: 5px 5px;
text-decoration: none;
}
/*Estilos de la sección principal, aqui se mostraran todos los contenidos del sitio*/
section{
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction:row;
border: 1px solid #dcdcdc;
padding: 0px;
}
.main-container{
text-align: justify;
border: 1px solid #dbdbdb;
padding: 5px;
}
#main-container{
width: 100%;
height: 400px;
}
/*Estilos de la sección institucional*/
footer{
display: flex;
display: -webkit-flex;
border: 1px solid #dcdcdc;
background-color: #111111;
color:#ffffff;
}
.footer{
border: 1px solid #dbdbdb;
padding: 0px;
text-align: justify;
}
#f1 {
flex:2;
}
#f2{
flex:1;
}
.footer ul{
list-style-type: none;
}
.footer li a{
color: white;
text-decoration: none;
}
.buscar{
width: 20px;
height: 20px;
}
En la imagen siguiente se presenta la Maqueta Web vista desde el Navegador.
Imagen 10. Maqueta Web (Mockups)
Espero sea de utilidad.. No olviden dejar sus comentarios y sugerencias, son realmente importante para mí.
Gracias. Saludos.
