heartopera38

Resumen: Mega guía punto por punto sobre cómo vertebrar y organizar una página web. Te enseñamos a hacer estructuras escalables y fáciles de mantener en el tiempo.

Cuando los sitios son pequeños, la carencia de una estructura ordenada posiblemente pueda pasar desapercibida o los inconvenientes originados sean menores. Mas a medida que el lugar medra, la aparición de nuevos ficheros, contenidos, secciones, formularios, etcétera, irán haciendo cada vez más compleja la funcionalidad del sitio.

Sin embargo, es posible
hacer una planificación de la estructura del sitio desde los inicios, de manera que el desarrollo del mismo se haga de forma ordenada y sin producir dificultades, tanto a los usuarios como al webmaster.

Para hacernos una idea del
concepto de estructura web, imaginemos una colección de libros de una editorial. Estas colecciones acostumbran a estar formadas por libros con dimensiones y encuadernación idénticas, a fin de que se tenga la
sensación visual de que se trata de una unidad, por más que se trate de una serie de libros independientes, de autores y temáticas diferentes.

Lo mismo sucede con los sitios web. Los grandes portales suelen emplear cierta unidad visual para dar a entender al usuario que se encuentra en el mismo lugar, aunque según la categoría puedan estar hablando de diferentes temas.

Índice de contenidos

Ventajas de diseñar la estructura de una web

Al igual que en otras disciplinas, el diseño web ha ido evolucionando hasta llegar a ciertos criterios estándares. En el caso de la
estructura de las páginas webtenemos bastante información para delimitar una guía clara.

• Desde el punto de vista del usuario, tiene el beneficio de
  hacer predecibles los sitios, dejando un rápido acceso a todo sin necesidad de realizar búsquedas por toda la página.
• Desde el punto de vista de los diseñadores, salvo pequeños cambios que pueden realizarse, por lo general esta importante parte del diseño tiene una
  guía de trabajomuy clara.

Estructura general del diseño de una web

La imagen siguiente es un esquema típico de una página web. Se debe tener en cuenta que este esquema padece variaciones, aunque generalmente son pequeñas.

La gran mayoría de las páginas web tienen divisiones o secciones similares.

Lo frecuente es que, en la parte superior de la página se encuentre una
cabecera, seguido de un
cuerpo principalque acostumbra a estar flanqueado por una
columna lateral(tanto a la izquierda como a la derecha) o bien dos columnas laterales, seguidas al final de la página por un
pie de página.

Cabecera

De todas y cada una de las
partes de la estructura del diseño web, el encabezado es la que mayor tendencia tiene a repetirse entre páginas de un mismo sitio.

Aún cuando el lugar tenga importantes diferencias en estructura y contenido entre sus páginas, si sostiene una unidad visual en su encabezado, los usuarios percibirán la sensación de unidad que la página web requiere.

La
cabeceraes una franja horizontal que ocupa todo el ancho de la página en la parte superior de exactamente la misma.

Ahora vamos a explicar las partes que forman la cabecera.

Logotipo

A la izquierda del encabezado suele ubicarse eldel lugar, que ocupa un área esencial en el mismo.

Esta imagen
debe tener un link a la página primordial del sitio, en tanto que es uno de los estándares más respetados por los diseñadores y una de las maneras que tienen los usuarios de volver al inicio.

Zonas de navegación

Desde el final del logo, ocupando el centro y la zona derecha de la cabecera, habitualmente se sitúan una serie de zonas de navegación.

En la
zona superior, se hallan ciertos links generales de la página, como acceso a usuarios registrados, registros de usuarios nuevos, acceso a perfiles, etcétera, así como ayudas y buscadores web internos. La zona más ancha en general se halla ocupada por el título de la página, nombre de empresa, eslogan, etc.

La
zona inferiordel encabezado se emplea para ubicar el, uno de los elementos más importantes a la hora de ayudar a los usuarios a hallar las páginas componentes del sitio web.

Dependiendo de la complejidad del lugar, puede encontrarse solo uno de estos sistemas de navegación o los 2. diseño pagina negocio /p>

Buscador

Otra forma de colaborar con la exploración del lugar por parte de los usuarios es la instalación de un.

También es aquí donde los usuarios procuran este género de precio por creacion de pagina web , en tanto que convencionalmente es aquí donde la mayoría de los diseñadores los ubican, si bien en algunos casos, puede encontrarse en la parte superior de ciertas columnas laterales.

Columnas laterales

El cuerpo primordial de una página web, en el diseño moderno se halla dividido. Una de estas divisiones, consiste
una o dos columnas laterales.

Este tipo de columnas, se emplean para ubicar algunos elementos importantes de la página, como,
navegación interna, publicidad, informaciones auxiliares y contenidos secundarios.

Cuando se emplea
una única columna, es indistinto para los usuarios si se coloca a derecha o izquierda del contenido, de acuerdo a estudios sobre el comportamiento de usuarios de sitios web, ya que su ubicación no plantea dificultad alguna.

En el en el caso de que el diseño requiera el
empleo de 2 columnas, pueden ubicarse una a cada lado del cuerpo primordial de la página o bien las dos a uno de los lados, siendo también indiferente en este caso si se ubican a la derecha o bien a la izquierda del contenido primordial.

Los usuarios, dado el empleo continuo de estos elementos para esta función, acostumbran a buscar zonas de navegación en este género de columnas, con lo que resulta uno de los mejores lugares para
colocar menús secundariosal menú principal de la cabecera.

A continuación, vemos algunos ejemplos de columnas laterales:

Área de contenido principal

Esta zona del diseño de la página, es la que menos reglas tiene respecto de su diseño, ya que el hecho de que en ella se hallen los contenidos principales de la página, el diseño depende en gran medida de exactamente los mismos, sobre todo en lo tocante al género de contenidos, la cantidad, la disposición que se quiere emplear, etc.

Sin embargo, hay que estimar ciertas reglas esenciales y que, salvo rarísimas ocasiones, han de ser seguidas al pie de la letra.

• En la parte superior de esta área se debe
  colocar elentre etiquetas <h1>, en tanto que este título tiene lasque los usuarios entonces emplearán en sus búsquedas y será de gran importancia para que los buscadores web indexen la página en forma adecuada.
• En caso de que los contenidos sean muchos y haya que hacer desplazamientos importantes cara abajo, es de mucha utilidad poner al final del área algún género de
  salto al inicio, para eludir que el usuario deba efectuar grandes desplazamientos.
• En el caso de que se empleen varias páginas para cobijar contenidos relacionados, tanto al inicio de la página como al final de la misma es de enorme utilidad poner un
  navegador de páginas(del tipo
  Página precedente 1 – 2 – tres … Página siguiente) a fin de que la navegabilidad entre ellas sea sencilla.

Pie de página

Finalmente, debajo de todas y cada una de las secciones, se pone una faja horizontal en cuyo interior se colocan algunos elementos esenciales, como el autor, copyright, acceso a distintas políticas del sitio y temas legales, datos de contacto, links a sitios relacionados, enlaces internos, etc.

Diseño de la estructura de las plantillas de un lugar web

Un sitio no es una unidad real, sino que se trata de una serie de páginas independientes. El término de unidad de un sitio está dado por la unidad conseguida a través del diseño. Esta unidad implica necesariamente que el diseño tenga
coherencia visual.

Es poco práctico y una gran pérdida de tiempo establecer diseños diferentes para páginas o bien secciones de un mismo lugar.

Esto se consigue empleando
plantillas de diseño, esto es, la repetición de un mismo diseño con variación prácticamente en forma exclusiva en los contenidos.

Sin embargo, existe la posibilidad de que algunas secciones o bien páginas del sitio requieran un tratamiento especial, con lo que seguramente el diseñador necesitará efectuar más de una plantilla, que en general son variaciones de una misma plantilla original.

Dónde iniciar el diseño de la plantilla

Todo diseñador novato tiene la tendencia natural de iniciar el diseño de un sitio edificando la página inicial.

Sin embargo, la página inicial es una página con características singulares, por lo que si lo que se desea es establecer una unidad visual del sitio, lo adecuado sería comenzar por las páginas cuyo diseño se repetirá. Esto quiere decir, que lo mejor es
comenzar diseñando las páginas interiores.

Luego, el método debería seguir con las variaciones que algunas de las páginas interiores requieren, finalmente en el diseño de la página inicial.

Las páginas interiores han de ser diseñadas teniendo presente cuáles son sus funciones:

1. 
   Páginas puramente de contenido:en un weblog son los posts, en una tienda los productos, en una web corporativa las distintas páginas con información.
2. 
   Páginas cluster o bien de navegación: son páginas con listas de enlaces a otras páginas. El ejemplo típico son las categorías en los weblogs o bien las.
3. 
   Páginas secundarias: son páginas especiales que sirven de apoyo a páginas más pilar de la página web. Como ejemplos pueden ser página de contacto, legales, de suscripción a un boletín de noticias, etc.
4. : la página principal del lugar. Como hemos dicho, esta página puede tener una estructura diferente siempre y cuando sostenga eldel resto del sitio.

En casos de sitios muy complejos, puede ser necesario establecer
plantillas secundariaspara niveles diferentes de estructura.

Algunas páginas web, por razones denecesitan establecer entradas opciones alternativas al sitio, lo que se llaman.

Por ejemplo, la página web de una cadena de supermercados, durante el período que dura una oferta singular, necesita que sus visitantes ingresen por otra página de comienzo, que contiene los detalles de la oferta. Esta landing que funciona como entrada opción alternativa, necesita tener una clara
vinculación visualcon el resto del sitio, y además debe orientar al visitante a fin de que acceda a la página primordial del sitio.

La página de inicio

La
estructura de la página de inicio, aunque tiene características singulares que hay que tener en consideración, cuando los pasos precedentes ya han sido resueltos, resultará sensiblemente más fácil de realizar que si se hubiese empezado el diseño por ella.

Latiene 4 elementos por los que está compuesta. Cada uno de ellos de estos elementos es importante, si bien la relevancia y la relación que tienen entre ellos es variable de un tipo de lugar a otro.

Los elementos son los siguientes:

1. 
   Principio de identidad
   
2. 
   
   
3. 
   Enfoque del contenido
   
4. 
   Herramientas
   

El diseño de una página de inicio debe siempre y en toda circunstancia contemplar estos cuatro elementos constitutivos, aunque la relevancia que debe darse a cada uno de ellos de ellos está relacionada con lo que el visitante querrá hallar en el lugar cuando ingrese.

Un ejemplo notable es la diferencia que existe entre las páginas de comienzo de los buscadores web Google y Yahoo!. Al paso que la página de inicio del buscador de Google se centra prácticamente exclusivamente a la
navegación, la página de inicio de Yahoo resalta otros elementos, como noticias señaladas (
contenido) y otros servicios (
herramientas).

Otras páginas se deben centrar más en la
imagen corporativa(principio de identidad), si bien caso de que no se trate de marcas plenamente reconocibles por tener una enorme presencia, debe agregarse además breves
comentarios explicativosque orienten al usuario en lo que encontrarán en el sitio.

Si no se tiene una marca reconocible a simple vista por cualquier usuario, la simple presencia de un logo, por bien diseñado que esté, no será suficiente para que el usuario sepa que es lo que encontrará en el resto del lugar.

Menú de navegación principal

Los
menús principales, aquellos más visibles, normalmente situados cerca de la cabecera de la página, deben estar destinado a enseñar las secciones más apetecibles por los visitantes que ingresan a la página por vez primera.

Esto se debe a que los usuarios habituales de un sitio, por norma general conocen en qué secciones pueden encontrar la información que buscan, al tiempo que los usuarios que ingresan por primera vez, han de ser rápidamente orientados a las secciones que precisan.

Como articular los ficheros de una página web

Cuando nos empezamos en el, tendemos a meditar que la
estructura de los ficheros y directoriosen que se halla organizada nuestra página, resulta de importancia menor.

Nada más lejos de la realidad, resulta esencial para quien administra el sitio,
tener una estructura ordenada, en tanto que a la hora de introducir cambios, añadir nuevos contenidos, etc., la labor puede resultar mucho más simple, con el consiguiente
beneficio en tiempo y costes.

Esto de forma indirecta favorece a los usuarios, dado que todo el tiempo que se ahorre en tareas que pueden facilitarse, puede invertirse en contenidos.

Si en algún momento se pretende hacer una reforma en la página, aumentar sus secciones, etc., la labor se ve enormemente simplificada si los ficheros que componen el lugar se hallan ordenados y su contenido puede ser fácilmente
identificablea través del nombre del fichero o del directorio.

También tiene beneficios en el. En este enlace puedes ahondar mas en aspectos relacionados con el.

Semántica de los archivos

La
organización semántica de un lugar webtiene como finalidad facilitar la labor de acceder a los diferentes ficheros y directorios que lo componen, de forma tal que cualquier persona, incluyendo al propio autor, no deba hacer grandes esfuerzos para localizar cada uno de los componentes del lugar.

Quizá para una pequeña página web con unas pocas páginas, esto pueda parecer excesivo, mas no lo es para un sitio con miles y miles de páginas.

La falta de una
planificacióny
estructuraciónde los archivos del lugar en sus inicios, puede hacer muy compleja la administración del mismo con el tiempo.

Nombre de las páginas, ficheros y directorios

Procura utilizar nombres del archivo y directorio gráficos, que sean comprensibles a simple vista. Procura evitar símbolos raros o cualquier texto que sea difícil recordar en un futuro qué significa.

De esta forma se facilita la comprensión de los archivos y directorios componentes de una página web.

Estructura eficaz y facilidad de mantenimiento

Algo que su empleo se ha visto de manera notable aumentado en los últimos años, es la utilización de
archivos separadosy en tanta cantidad como funciones deban cumplir.

Esto también tiene la finalidad de facilitar su mantenimiento, a lo que se añade la posibilidad de realizar trabajos por secciones sin que la totalidad de la página se vea perjudicada.

Por ejemplo, un sitio compuesto por muchas páginas, puede requerir varios estilos diferentes, lo que aún en los casos cuyas diferencias sean menores, se emplean varios ficheros.

Este género de divisiones de los archivos, son usuales en
, si bien también se emplean para, php, etcétera Todo esto favorece enormemente la organización de los archivos del sitio y reduce la cantidad de código que debe escribirse.

También resulta muy importante, la colocación de los archivos en directorios que se encuentren en un orden lógico, puesto que esto también colabora en la simplificación de los trabajos de mantenimiento y reforma.

Importancia de las URL descriptivas

Otra razón para emplear nombres gráficos en ficheros y directorios, es que todos son parte de la URL, elemento que tienen muy en consideración los rastreadores de los motores de búsqueda.

Esto agrega la posibilidad de emplear la URL como lugar donde colocar lasde nuestros contenidos, lo que facilita la clasificación por la parte de los buscadores web, y en consecuencia, colabora en el posicionamiento del sitio en ellos.

Imaginemos dos URL’s bien diferentes, una compuesta por el nombre del lugar y una serie de directorios y ficheros con nombres complejos, y otra URL con nombre del sitio, los archivos y directorios con títulos descriptivos:

• :sitiocomplejo548.com/efs54/jlv.
• :sitiosimple.com/categoria/palabras-clave.

¿Con cuál de las agencia de posicionamiento en google en madrid que los motores de búsqueda tendrán menos dificultades para clasificar los contenidos, y por tanto indexarla y colocarla en las SERP’s? Evidentemente, la segunda opción es la más correcta.

Los buscadores pueden emplear la URL como
primer elemento a analizary es de las mejores formas de incluir palabras clave.

Estructura HTML básica de las páginas web

Cuando el diseñador toma los contenidos y los introduce en el cuerpo del documento, mediante el empleo de etiquetas
o
XHTMLy jerarquiza exactamente los mismos.

• Mediante el uso de las etiquetas
  h1,
  h2,
  h3, etc., podrá establecer títulos y diferentes grados de subtitulado para cada una de las secciones del texto.
• Mediante el uso de la etiqueta
  <p>hará las divisiones necesarias en el texto, y dará énfasis a las partes más importantes del mismo a través de el empleo de etiquetas elaboradas para esa finalidad, como
  <strong>y
  <em>.

La estructuración semántica del contenido tiene una relevancia vital, tanto en la presentación del contenido como en la
optimizaciónpara los motores de búsqueda, con lo que debe ser cuidadosamente planificada y elaborada.

Marcado semántico de los contenidos

Las páginas web se encuentran escritas en lenguaje HTML, que tiene una serie de etiquetas que permiten clasificar y ordenar en niveles diferentes y estructuras al contenido. Esto es lo que denominamos el
marcado semánticode los contenidos.

La aplicación deen los contenidos, mucho más allá de su utilidad desde el punto de vista estético, tiene la finalidad fundamental de
permitir ordenar los contenidos.

Así por ejemplo, la posibilidad de aplicar elementos como título1, título2, título3, párrafos, listas, etc.:

See the Penby LaWebera.es () on.32567

El orden que se impone a través de las distintas etiquetas en código HTML corresponde a una jerarquización de los diferentes contenidos.

Así por poner un ejemplo, la oración contenida en una etiqueta
h1es la más importante de todo el contenido, en tanto que define al contenido mismo, por ser su título.

Esta jerarquización, además de facilitar la lectura de los contenidos por la parte de los usuarios, posibilita a losencontrar la información más relevante para clasificar y ordenar la página web, lo que tiene suma importancia para el posicionamientode exactamente la misma.

Consejos finales para el diseño de un buen layout o estructura web

El espacio y el espacio en blanco en el layout

• Procura que tu web se vea bien en cualquier resolución de pantalla, para ello deberás.
• Utiliza todo el espacio libre, pero se flexible: El uso de un tamaño relativo (fluido) en determinadas secciones del diseño de tu páginas web es una buena práctica. Por poner un ejemplo en la zona primordial del contenido, de modo que se expanda y contraiga para amoldarse a la ventana del navegador, mejorando la.
• Usa elpara definir los espacios: si deseas diseñar una página responsive pero que tenga un ancho máximo, ¿por qué noy mejorar así su presentación.

Mira el ejemplo que se propuso en una guía anterior, ¿qué te semeja mejor?:

A la vez que centras la página en el navegador, puedes ponerle un color de fondo diferente al lugar, como se ve en el ejemplo.

Esto mejorará la apariencia de tu página web con los cambios de resolución que se producen de un usuario a otro.

Las grandes resoluciones (por encima de 1400px, por servirnos de un ejemplo) mostrarán parte de la ventana de navegación con el color de fondo que hayas escogido, mientras que los navegadores con resoluciones más pequeñas mostrarán menos o bien ningún color de fondo.

Imágenes y gráficos en tu estructura web

Alinea las imágenes

Uno de los fallos de diseño más comunes en diseñadores novatos es introducir las imágenes en una página de cualquier manera sin meditar en el layout (estructura). Esto visualmente no queda realmente bien, puesto que por defecto las imágenes se alinean a la izquierda, resulta mucho más agradable verlas centradas.

Con un simple código de un par de líneas puedes centrar tus imágenes. Este código va en tu hoja de estilos:

Proporción de los gráficos y texto en una página

Es fácil dejarse llevar por la enorme cantidad de imágenes y animaciones disponibles, mas si te pasas, puedes hacer que resulte muy difícil de leer o bien aun molesto.

Alineación del layout

A continuación tienes los ejemplos más típicos de alineación en los layouts.

Mira estos casos de ejemplo y juzga por ti cuál es el género de alineación para la estructura de tu sitio web más adecuado:

Y con estos consejos acabamos esta mega guía de cómo vertebrar y organizar una página web. Espero que después de leerla tengas más claro como hacer estructuras web escalables y fáciles de sostener.