Cómo estructurar su contenido para una mejor página de inicio

Los desarrolladores profesionales web comienzan los proyectos recopilando todo su contenido y, en funci³n de su audiencia y meta principal, organizando ese contenido en secciones l³gicas basadas en la relevancia para la audiencia objetivo. Esta fase de arquitectura de informaci³n generalmente termina con la creaci³n de un mapa del sitio web.

El sitio web que estar¡ realizando en este curso probablemente constar¡ de solo 5-6 secciones o p¡ginas. Como estamos comenzando peque±os, no nos preocupamos por crear un mapa del sitio web, aunque aprender¡ c³mo hacerlos en DGM 2740 - Dise±o web. En su lugar, vamos a confiar en nuestro dise±o de la estructura de la p¡gina para asignar impl­citamente la estructura del sitio.

Objetivos b¡sicos para el dise±o de la p¡gina

Mientras que un mapa de sitio web describe c³mo se organizan todas las p¡ginas de un sitio, podemos usar marcos de alambre est¡tico (aka esquemas de p¡gina) para describir c³mo se organizan todos estos elementos informativos dentro de las p¡ginas web individuales. Un marco de alambre est¡tico es un solo dibujo de una plantilla de p¡gina individual que muestra los componentes informativos, especialmente la navegaci³n, que aparecer¡ en una p¡gina en una forma aproximada para que los componentes de navegaci³n puedan documentar y evaluarse. El dibujo puede sugerir un dise±o visual b¡sico, pero no se compromete con ninguna apariencia espec­fica.

Mientras que claramente no es el dise±o gr¡fico (aspecto de superficie y cayendo) de las p¡ginas web, un buen marco de alambre est¡tico puede ayudarlo a planificar c³mo usar¡ su "Screen Real Estate" a medida que comienza a trabajar en el dise±o gr¡fico. El marco de alambre est¡tico es como un primer borrador de su dise±o, uno que se centra en la usabilidad y la colocaci³n de elementos principales.

Marcos de alambre est¡tico y usabilidad

La usabilidad se refiere a lo f¡cil que es para un usuario obtener lo que quiere de una p¡gina web. Desde el punto de vista de la usabilidad tenga en cuenta que la mayor parte de su p¡gina debe utilizarse para el contenido que sea m¡s relevante para la audiencia prevista. En trminos generales, la simplicidad gana sobre la complejidad. Eche un vistazo a Google. Esto no quiere decir que no puede tener mucho contenido o recursos en su sitio, es solo que todos deben cumplir un prop³sito espec­fico.

La usabilidad Freak Jakob Nielson dice que "como regla general, el contenido debe explicar al menos la mitad del dise±o de una p¡gina, y preferiblemente m¡s cerca del 80%". Al pasar el contenido, es importante tener en cuenta siempre su audiencia objetivo.

Qu buena estructura de p¡gina puede lograr

Una buena estructura de p¡gina conduce a un dise±o de buena informaci³n, lo que ayuda a los usuarios a encontrar y digerir la informaci³n a la que han venido. El buen dise±o tambin puede transmitir un sentido de profesionalismo. Puede parecer que no importa lo que pueda hacer su sitio si las personas se apagan por el aspecto y la sensaci³n de su sitio que no pueden soportar estar all­. Considere estos beneficios de un buen dise±o:

  • involucrando a los lectores
  • Directando el lector Atenci³n
  • nfasis de informaci³n
  • cierta cantidad de credibilidad y validez
  • pistas sobre c³mo navegar y usar el sitio

Descargue un navegador moderno:

Introducci³n: En comparaci³n con el texto liso tradicional, una p¡gina web tiene m¡s estructura. Las p¡ginas web tambin se consideran datos semiestructurados. La estructura b¡sica de una p¡gina web es su estructura DOM4 (modelo de objeto de documentos). La estructura DOM de una p¡gina web es una estructura de ¡rbol, donde cada etiqueta HTML en la p¡gina corresponde a un nodo en el ¡rbol DOM. La p¡gina web se puede segmentar por algunas etiquetas estructurales predefinidas. Las etiquetas ºtiles incluyen {p} (p¡rrafo), {tabla} (tabla), {ul} (lista), [H1} ~ {H6} (encabezado), etc. Por lo tanto, la estructura DOM se puede usar para facilitar la extracci³n de informaci³n.

Desafortunadamente, debido a la flexibilidad de la sintaxis HTML, muchas p¡ginas web no obedecen las especificaciones HTML W3C, lo que puede resultar en errores en la estructura del ¡rbol DOM. Adem¡s, el ¡rbol DOM se introdujo inicialmente para la presentaci³n en el navegador en lugar de la descripci³n de la estructura sem¡ntica de la p¡gina web. Por ejemplo, aunque dos nodos en el ¡rbol DOM tienen el mismo padre, los dos nodos podr­an no estar relacionados m¡s sem¡nticamente entre s­ que a otros nodos. Figura 10. Muestra una p¡gina de ejemplo. La Figura 10. (a) muestra parte de la fuente HTML (solo mantenemos el c³digo de la columna vertebral), y la Figura 10. (B) muestra el ¡rbol DOM de la p¡gina. Aunque tenemos un mensaje de texto de descripci³n circundante para cada imagen, la estructura de Dom Tree no identifica correctamente las relaciones sem¡nticas entre diferentes partes.

En el sentido de la percepci³n humana, la gente siempre ve una p¡gina web como objetos sem¡nticos diferentes en lugar de como un solo objeto. Algunos esfuerzos de investigaci³n muestran que los usuarios siempre esperan que ciertas partes funcionales de una p¡gina web (e., Enlaces de navegaci³n o una barra de publicidad) aparezcan en ciertas posiciones en la p¡gina. En realidad, cuando se presenta una p¡gina web al usuario, las se±ales espaciales y visuales pueden ayudar al usuario dividir inconscientemente la p¡gina web en varias partes sem¡nticas. Por lo tanto, es posible segmentar autom¡ticamente las p¡ginas web utilizando las se±ales espaciales y visuales. Sobre la base de esta observaci³n, podemos desarrollar algoritmos para extraer la estructura de contenido de la p¡gina web basada en informaci³n espacial y visual.

Desarrollo y diseño de sitios web.

¿Está ejecutando un negocio pequeño en o cerca de Nottingham, contratarme para que trabaje con usted para crear un sitio web de Goodlooking, atractiva que los clientes aman.

Desarrollo y diseño de sitios web.
Utilizamos cookies
Utilizamos cookies para asegurarnos de que le brindamos la mejor experiencia en nuestro sitio web. Al utilizar el sitio web, usted acepta nuestro uso de cookies.
PERMITIR COOKIES.