El documento habla sobre la importancia del diseño de la interfaz web para que los usuarios se queden y regresen a un sitio. Explica que elementos como menús de navegación, diseño adaptable a diferentes dispositivos y uso de colores son claves para mejorar la experiencia del usuario en un sitio web.

1. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
La interfaz web son elementos gráficos que permiten al usuario acceder a los
contenidos, navegar e interactuar. Para lograr que un usuario se quede y vuelva,
el diseño de la interfaz es importante.
Para lograr que un usuario se quede y vuelva, el diseño de la interfaz es
importante. La interfaz web son elementos gráficos que permiten al usuario
acceder a los contenidos, navegar e interactuar.
Que el usuario sea capaz de moverse con soltura y facilidad por las distintas
páginas del sitio, que encuentre lo que busca rápidamente, que no se pierda
yendo de un enlace a otro sin saber dónde está, que no quede colgado en una
página concreta sin poder navegar por otras o volver atrás… son algunas de los
aspectos que hay que cuidar en la navegación de un sitio web.
Un buen sistema de navegación es imprescindible en toda página web. Es una
parte importante de la organización de la estructura de la web.
Qué es un menú de navegación?
Es el / los elementos de la web que permite que los usuarios puedan seleccionar
la parte de nuestro sitio que desean visitar.
Cuando el contenido de la web se encuentra distribuido en secciones de varias
páginas, además de implementar un menú principal es conveniente hacer un
menú secundario para navegar por cada una de las secciones.
Algunas páginas tienen en una de sus columnas laterales un amplio menú, el cual
puede ser desplegable o no, que permite ver como se ordena el contenido de la
sección donde se encuentra. La siguiente imagen nos muestra una página donde
se ha implementado un submenú de este tipo.
Tipos de menú de navegación
El menú de una página web es la principal herramienta de navegación que le
podemos facilitar al visitante para que encuentre lo que busca. Es imprescindible
Objetivo.
Desarrollar página web con HTML
DESARROLLO

2. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
para que las personas encuentren las demás páginas de la web, además del
índice.
Los menús de navegación son básicamente listas de enlaces a las diferentes
páginas o secciones de la web. De su estructuración dependerá en gran medida
que los visitantes encuentren lo que buscan, por lo que es conveniente pensarse
dos veces cómo hacerlo antes de implementarlo en la web.
Podemos encontrar un menú horizontal o un menú vertical
Una sección, un menú
Cuando el contenido de la web se encuentra distribuido en secciones de varias
páginas, además de implementar un menú principal es conveniente hacer un
menú secundario para navegar por cada una de las secciones.
Algunas páginas tienen en una de sus columnas laterales un amplio menú, el cual
puede ser desplegable o no, que permite ver como se ordena el contenido de la
sección donde se encuentra. La siguiente imagen nos muestra una página donde
se ha implementado un submenú de este tipo.
La idea de hacer un menú visualmente atractivo, es ayudar a los visitantes a
interpretar el enlace mediantes imágenes de fácil relación. Elementos como
iconos y patrones de colores hacen que el usuario recuerde la posición de alguna
categoría o sección de su interés. Los colores son importantes para resaltar los
elementos que actualmente se encuentren activos, o son llamados con algún
evento, de esta manera el usuario podrá percatar si realmente está realizando
alguna acción y recordará la parte del menú al que accedió.
Diseño responsive
Manejar un diseño adaptable (responsive design) te permitirá proporcionar una
mejor experiencia para el usuario, previendo los problemas relacionados a las
diferentes tipos de resoluciones y tamaños de pantalla, que se presentan por la
variedad de dispositivos que se utilizan en la actualidad para desplegar páginas
web. El diseño adaptable (responsive design), se ha convertido en una
consideración casi obligatoria al momento de elaborar la estructura de un sitio
web.

3. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
Actualmente son muchos los usuarios y clientes potenciales que acceden a través
de algún dispositivo móvil, a alguna de las páginas que hemos desarrollado para
presentar un proyecto o producto, como tal debemos de proporcionar el soporte
adecuado a estos dispositivos para no tener una fuga de inversión.
Qué es el diseño responsive?
Resumiendo, se trata de diseñar una página web para varias resoluciones de
pantalla. Entendemos como sitios web responsive, aquellos que están diseñados y
desarrollados para la navegación desde cualquier dispositivo y resolución de
pantalla. Es decir, desde cualquier teléfono podemos acceder a una versión
optimizada de dicha web, sin tener la necesidad de descargar o instalar alguna
aplicación.
Técnicas para hacer un diseño responsive
Uso de viewport en la etiqueta metatag
Este metatag debe ser incluido dentro de la etiqueta “head” y debe ser representado de la
siguiente manera:
meta name="viewport" content="width”=device-width, initial-scale=”1.0"
Estructura básica de una Pagina Web

4. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
Realiza el esquema básico de una página en html 5, en el editor de tu preferencia
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device−width, initial−scale=1.0" /> <!-- Le
dice al navegador pagina reponsive -->
<title> mi primera página</title>
</head>
<body>
<!-- inicio header -->
<header>
<h2> Imagen Corporativa </h2>
</header>
<!-- fin header -->
<!-- inicio nav -->
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<!-- fin nav -->
<!-- inicio aside -->
<aside>
<div> Sidebar/ barra Lateral</div>
</aside>
<!-- fin aside -->
<!-- inicio section -->
<section >

5. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
<div>
<span>Contenido principal</span>
<article>Artículo 1</article>
<article>Artículo 2</article>
</div>
</section>
<!-- fin section-->
<!-- inicio footer -->
<footer>
Copyright
</footer>
<!-- fin footer -->
</body>
</html>
Guardar en el servidor local y luego ejecutar desde el cliente navegador web
Al ejecutar se visualiza la siguiente página web

6. Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática
Nada que ver con esto
Debido que para obtener una página con esta apariencia visual debemos
utilizar, CSS, un lenguaje de diseño gráfico pensado para crear hojas en
cascada, podrás mejor tu código HTML con funcionalidades propias de
una página web.
Te espero en la siguiente guía de CSS donde aprenderás a utilizar CSS