5 consejos para una eficiente navegación

1. 1. Fácil de encontrar (muy fácil)

   Los usuarios de Internet son impacientes, y no van a recorrer un sitio muy grande si no pueden encontrar su camino. La navegación debe ser un elemento destacado de su diseño. Puesto que a menudo ocupan un espacio mucho menor que otros elementos, debe destacarse lo suficiente como para que no se pierda entre un mar de contenido. La localización más común es la parte superior de la página, ya que los usuarios no deberían desplazarse hacia abajo en su sitio para navegar cómodamente.

2. 2. Mantener coherencia

   La navegación del sitio debe aparecer en la misma ubicación en cada página de un sitio. También debe mantener el mismo estilo, tipografía y colores. Esto permitirá a los usuarios a acostumbrarse a un sitio y que se sienten cómodos navegando. Si la navegación saltara desde lo alto a la izquierda, desapareciera, o cambiara los colores de una sección a otra, los visitantes frustrados tienen más probabilidades de irse a otra parte.

3. 3. Elegir nombres de secciones acordes

   Los nombres de las secciones de un sitio, deben establecerse claramente. Oscuro, las palabras generales como "recursos" y "herramientas" deben evitarse cuando sea posible, ya que sólo conducen a los usuarios a hacer clic en varios vínculos antes de encontrar lo que buscan. Manténgase apegado a los nombres de sección obvias como "noticias" y "podcasts" para evitar confusiones.

4. 4. Menos es Más

   Demasiados vínculos de navegación pueden ofrecer al usuario demasiadas opciones. Una larga lista de opciones puede impedir al visitante entrar en las áreas de contenido más importantes de su sitio. En su lugar, tenga en cuenta los menús desplegables que descomponen los vínculos de nivel superior en sub-secciones. Es común tener hasta tres opciones de navegación para los sitios basados en amplio contenido (por ejemplo, una navegación principal, una para las cuentas de usuario, y otra en la parte inferior de avisos legales). Para sitios más simples, tales como un portfolio, es mejor una sola opción de navegación.

5. 5. Recuerde a los usuarios en donde se encuentran

   Una vez que un usuario hace clic en una sección del sitio, es una buena idea para recordar dónde están. Use un método consistente para resaltar la sección en la que un visitante se encuentra, tal como un cambio en el color o la apariencia.

Horizontal o Vertical?

En el artículo Navegación horizontal vs. navegación vertical, ¿cuál funciona mejor? Sebastián Thüer explica a través del artículo original Top Navigation vs Left Navigation: Which Works Better?, las ventajas y desventajes de los distintos tipos de navegación en un sitio web.

Scanning

La navegación lateral es más rápida y eficiente para los usuarios que pueden identificar dos elementos por cada vez que fijan la vista. Es decir, para un menú con 6 elementos bastan que el usuario solo fije 3 veces la mirada.

Espacio en página

Obviamente, la navegación horizontal ocupa menos lugar y ayuda a optimizar el espacio en la página con lo cual es una alternativa que adquiere fuerza cuando hay mucho contenido para mostrar.

Jerarquía

En la navegación horizontal los ítems ubicados a la izquierda tienen mucho peso visual porque suele ser el inicio de los recorridos de lectura. En cambio, las listas verticales no implican necesariamente una jerarquía visual porque el sentido natural de lectura es de izquierda a derecha.

Visibilidad

Las barras horizontales ganan en visibilidad porque suelen situar al comienzo de la página y el usuario sabe fácilmente como localizarlas. Por el contrario, los menús laterales no están siempre en la misma posición y el usario tiene que buscarlos dentro de la página.

Tipo de contenido

En general, la navegación lateral funciona mejor en los sitios con contenidos generales dirigido a una audiencia amplia. Como no tiene implicita una jerarquía, los usuarios pueden determinar con mayor facilidad cuál es su contenido preferido. En cambio, los sitios con contenidos especializados se benefician de las barras horizontales porque -dentro de este contexto- ayudan a definir la jerarquía.

Cuando se trata de diseño, existen muy pocas probabilidades en las que el enfoque sea 100% efectivo para todos los casos. Encontrar el criterio que es mejor para usted y sus usuarios, requiere una comprensión del contexto en cuestión. Si usted no entiende el contexto, no entenderá el diseño.

Avast es uno de los mejores o el mejor software antivirus del momento. De la firma checa Alwil Software. Cuenta con varias versiones, que cubren desde el usuario doméstico y gratuito hasta el corporativo. La empresa ofrece descuentos muy importantes a escuelas, ONGs, organizaciones caritativas, Administraciones Públicas, etc. para ayudar a estas instituciones a la protección de sus equipos de la manera más económica posible. leer más.

En algún momento entre ahora y diciembre, avast! registrará su usuario 100.000.000

Este afortunado usuario podrá ganar un viaje con todos los gastos pagados a Praga, República Checa, casa de avast.

El Doctype

Es importante especificar el Doctype en todos los documentos HTML, a fin de que el navegador sepa qué tipo de documento recibe.

En HTML 4.01 es necesaria una referencia a un DTD (HTML 4.01), porque se basa en SGML. HTML 5 por el contrario no se basa en SGML, y no requiere una referencia a un DTD, pero igualmente es necesario el doctype para que los navegadores se comporten como debieran.

Declaración de Doctype en Html 4

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Declaración de Doctype en XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

En HTML 5 la declaración de Doctype es realmente simple:

<!DOCTYPE HTML>

HTML 5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios Web modernos. Algunos de ellos son técnicamente similares a <div> <span> y etiquetas, pero tienen un significado semántico, por ejemplo <nav> (navegación de bloque del sitio web) y <footer>. Tales etiquetas facilitarían la indexación por los motores de búsqueda y manipulación de los dispositivos de pantalla pequeña o lectores de voz para los discapacitados visuales. Otros elementos proporcionan nuevas funcionalidades a través de una interfaz, como <audio> y <video>.

La mayoría de las páginas HTML 4 incluye una variedad de estructuras comunes, tales como cabeceras, pies de página o columnas. En la actualidad, es bastante común para marcarlas utilizar elementos <div>, aplicando una descriptiva clase (<div class="contenedor-principal">) o id (<div id="encabezado">) a cada una.

HTML 4 carece de los elementos necesarios para describir la semántica de los elementos que componen un documento. HTML 5 mejora este problema mediante la introducción de nuevos elementos para la representación de cada una de las diferentes secciones.

Nuevos atributos que aparecen en la nueva versión:

• media: Para conseguir una mayor consistencia con el link en los elementos <a />
  
• ping: Especificacremos una lista separada por espacios donde produciremos un ping cuando se siga el enlace, para los elementos <area /> y <a />
  
• target:  Disponible para mejorar la consistencia con el elemento <a />.
• autofocus: Destinado para indicar el elemento <input /> (no hidden), <select />, <textarea /> o <button /> que ha de coger el foco al cargar la página.
• form: Atributo para <input />, <ouput />, <select /> <textarea />, <button /> y <fieldset /> que permite que se sococien con un simple formulario.
• replace: atributo para <input /&gt; <button /> y <form /> que le afectará cuando el contenido del elemento sofra algún cambio.
• data: Para <form />, <select /&gt; y <datalist />.
• required: Para elementos <input /> (Excepto hidden e image) y <textarea />, indica que el campo es obligatorio.
• inputmode: Atributo para <input /> y <textarea />.
• disabled: Para <fieldset />, permite desactivar el fieldset completo.
• autocomplete, min, max, pattern, step: Para elementos <input /> permite delimitar las posibilidades de nuestros elementos de entrada.
• list: Para elementos <datalist /> y <select />.
• template: Para <input /> y <button /> podrá usarse para repetir templates.
• scoped: Para elemento <style />, permitirá usar hojas de estilo "scoped" ??
• async: Para el elemento <script /> el ajax hecho atributo.

Elementos que pasan a ser obsoletos en la nueva versión:

• acronym
• applet
• basefont
• big
• center
• dir
• font
• frame
• frameset
• isindex
• noframes
• noscript (solo en XHTML5)
• s
• strike
• tt
• u

Atributos eliminados:

• rev y charset en <link /> y <a />
• target en <link />
• nohref en <area />
• profile en <head />
• version en <html />
• name en <map />
• scheme en <meta />
• archive, classid, codetype, declare y standby en <object />
• valuetype en <param />
• charset en <script />
• summary en <table />
• header, axis y abbr en <td /> y <th />

Hace un tiempo se ha lanzado la nueva versión del mejor navegador del medio, Mozilla Firefox 3.5, con nuevas capacidades tales como el soporte para algunas de las nuevas extensiones multimedia que incorpora HTML5, que son <video> y <audio>, que nos permitirán visualizar archivos multimedia sin tener que contar con un plugin extra, ya sea Flash, QuickTime o cualquier otro.

La web se hace mayor y a partir de ahora HTML no será sólo texto sino que también podrá incluir multimedia de forma nativa. Aunque pueda parecer una tontería las ventajas son notables ya que nuestro navegador no depende de terceras aplicaciones para ofrecernos estas capacidades.

La forma más sencilla de incrustar un vídeo es utilizar un elemento de video y permitir que el navegador por defecto proporcione una interfaz de usuario. El marcado para insertar el video sería algo como:

<video src="video.ogv" controls poster="poster.jpg"
  width="320" height="240">
   <a href="video.ogv">Download movie</a>
</video>

Integrar audio en una página es muy fácil y se logra utilizando el elemento de audio. La mayoría de los atributos son comunes entre los elementos de audio y video, aunque por razones obvias, el elemento de audio carece de ancho, alto y poster.

<audio src="music.oga" controls>
    <a href="music.oga">Download song</a>
</audio>

Ventajas de utilizar HTML

• Compatible con los navegadores existentes
• Los autores ya están familiarizados con la sintáxis
• Conveniente sintaxis, por ejemplo, los autores pueden omitir algunos valores de atributos y etiquetas

Beneficios de la utilización de XHTML

• La estricta sintáxis XML alienta a los autores a escribir bien el marcado, lo que significa que el mantenimiento posterior sera más fácil
• Se integra directamente con otros vocabularios XML, como MathML y SVG
• Permite el uso de procesamiento de XML, que algunos autores utilizan como parte de su edición y / o la publicación de los procesos

HTML 5 o XHTML 5?

Si actualmente se utiliza XHTML 1.x es normal pensar en utilizar XHTML 5, la versión compatible con XML de HTML 5. Sin embargo si el sitio web consta de una audiencia/público general esto no es tan así. XHTML 5 debe ser enviado con un tipo de MIME de XML (como application / xhtml + xml), e incluso IE8 todavía no es compatible con esta característica. No obstante, todas las características de codificación XHTML (elementos de escritura en minúsculas, rectificación de anidación, el cierre de etiquetas o elementos opcionales que agregan significado) son compatibles con HTML 5.

Cordialmente,
La Administración