La Estructura Web

La estructura de la web es la forma de organizar los diferentes elementos dentro de la página. Las páginas web han evolucionado mucho, y lo siguen haciendo, pero la mayoría suele tener una estructura básica reconocida por el usuario: header, body y footer.

Existen muchos Frameworks (herramientas de código abierto) que aportan plantillas con estructuras básicas para la web. Uno de los más reconocidos es Bootstrap por su amplia variedad de programaciones en HTML, CSS y JS para desarrollar proyectos responsive. Puedes encontrar, menús de navegación barras de progreso, carruseles… Es muy fácil de utilizar, pero siempre teniendo unos conocimientos básicos de programación.

La plantilla básica para empezar una web en HTML sería algo así (he explicado un poco lo que significada cada etiqueta):

<!DOCTYPE html> 

<html lang="es"> 

<head> 

<title>Titulo de la web</title> 

<meta charset="utf-8" /> 

<link rel="stylesheet" href="estilos.css" />

<link rel="shortcut icon" href="/favicon.ico" />

</head>

<body>

<header>

<h1>Mi sitio web</h1>

<p>Mi sitio web creado en html5</p>

</header>

<section>

<article>

<h2>Titilo de contenido<h2>

<p> Contenido (ademas de imagenes, citas, videos etc.) </p>

</article>

</section>

<footer><!—Pie de página-->

Copyright

</footer>

</body>

</html>

Como habréis visto, para comentar en HTML se utiliza:  y para CSS /*comentario*/

Partes de la estructura web

Header:

Parte superior de la web que ocupa todo el ancho de la página. En ella, se suele incluir el logotipo o nombre de la empresa, el menú de navegación, el buscador interno de la web y las migas de pan.

Body:

Es el cuerpo de la web donde se coloca todo el contenido principal de la página. El contenido cambia en función de la página interna de la web, mientras que los demás elementos quedan inmóviles.

Sidebar:

Barra lateral de la web que se aprovecha para poner las categorías, menús de navegación y demás Widgets. Puede ir a la derecha, a la izquierda o a ambas partes de la web. Normalmente se utiliza para los blogs, sin embargo, como opinión personal, yo prefiero no ponerlos ya que restan importancia al body (las entradas), que es lo que realmente importa en un blog.

Footer:

Pie de la página. Se ubica en la parte inferior de la web y es donde se pone información adicional de la empresa, como el aviso legal y de cookies, derechos de copyright, el sitemap, las redes sociales y teléfono.

Los elementos que se incluyen en cada parte de la web, son orientativos y variables en función del objetivo que quiera transmitir cada negocio.

Si quieres saber más sobre cómo hacer un prototipo web, visita las fases del prototipado

Elementos a tener en cuenta:

-Espacios negativos: son aquellos espacios en blanco que se dejan en la web para que el usuario note la página limpia, sencilla y no se agobie. Es tan importante como cualquier otro elemento.

-Tipografía: En relación a lo que quiera transmitir la empresa, se elige una tipografía u otra. En Google Fonts tienes hasta 600 tipos diferentes, todas gratuitas. Si tienes dudas sobre qué tipografía elegir visita mi anterior post tipografías para web

-Iconos: Son muy útiles para explicar una frase con un simple dibujito, se usan especialmente en la sección de la web dedicada a “Cómo lo hacemos”. Existen varias webs que te ofrecen iconos gratuitos, como por ejemplo,Flaticon

-Colores: Es muy importante elegir una buena combinación de colores y no muchos, ya que si no la web va a parecer una feria. Hay diferentes combinaciones siguiendo las reglas cromáticas:

*Análogos: aquellos colores que se encuentran al lado dentro del círculo cromático. Ejemplo: rosa, rojo y naranja.

*Monocromáticos: diferentes tonos y niveles de saturación dentro de un mismo color.

*Complementarios: los que se encuentran opuestos en el círculo cromático, es decir, colores que hacen contraste. Ejemplo rojo y verde.

Para ver los colores utiliza la herramienta de Adobe Color

Adaptar la web al móvil : principios de usabilidad web

Hoy en día más del 80% de la población usa más el móvil que el ordenador. La web tiene que estar adaptada al móvil. No basta sólo con que sea responsive y se adapte a los diferentes tamaños de pantalla, si no que hay que hacer un nuevo diseño pensando primero en el móvil “mobile first”.

Os doy algunos consejos:

-Poner menos texto y más grande.

-Evitar que el usuario tenga que escribir.

-Aumentar la velocidad de carga de la web utilizando menor cantidad de imágenes o que éstas pesen menos.

-Utilizar scroll infinito.