Diseño de la estructura de una página web de 0 a 100 |
Resumen: Mega guía punto por punto sobre cómo estructurar 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 probablemente pueda pasar desapercibida o los inconvenientes originados sean menores. Mas conforme el sitio medra, la aparición de nuevos archivos, 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 compilaciones suelen 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. Los grandes portales suelen emplear cierta unidad visual para dar a comprender al usuario que se halla en el mismo lugar, si bien según la categoría puedan estar hablando de diferentes temas.
Índice de contenidos
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.
La imagen siguiente es un esquema típico de una página web. Se debe tener en cuenta que este esquema sufre variaciones, si bien por norma general son pequeñas.
La gran mayoría de las páginas web tienen divisiones o secciones afines.
Lo usual 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 dos columnas laterales, seguidas al final de la página por un
pie de página.
De todas 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 web requiere.
La
cabeceraes una franja horizontal que ocupa todo el ancho de la página en la parte superior de la misma.
Ahora vamos a explicar las partes que forman la cabecera.
A la izquierda del encabezado acostumbra a ubicarse eldel sitio, que ocupa un área esencial en el mismo.
Esta imagen
debe tener un link a la página principal 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 regresar al comienzo.
Desde el final del logotipo, ocupando el centro y la zona derecha de la cabecera, a menudo se sitúan una serie de zonas de navegación.
En la
zona superior, se hallan ciertos enlaces generales de la página, como acceso a usuarios registrados, registros de usuarios nuevos, acceso a perfiles, etcétera, así como ayudas y motores de búsqueda internos. La zona más ancha por lo general se encuentra ocupada por el título de la página, nombre de empresa, eslogan, etc.
La
zona inferiordel encabezado se emplea para situar el, uno de los elementos más esenciales en el momento de ayudar a los usuarios a hallar las páginas componentes del sitio web.
Dependiendo de la complejidad del sitio, puede encontrarse solo uno de estos sistemas de navegación o los dos.
Otra forma de cooperar con la exploración del sitio por parte de los usuarios es la instalación de un.
También es aquí donde los usuarios procuran este tipo de elementos, puesto que convencionalmente es aquí donde la mayoría de los diseñadores los ubican, aunque en algunos casos, puede encontrarse en la parte superior de ciertas columnas laterales.
El cuerpo principal de una página web, en el diseño moderno se encuentra dividido. Una de estas divisiones, consiste
una o bien dos columnas laterales.
Este género de columnas, se emplean para situar algunos elementos importantes de la página, como,
navegación interna, publicidad, informaciones auxiliares y contenidos secundarios.
Cuando se emplea
una única columna/citiface.com/es/webs-con-newsletter">webs con newsletter >, es indiferente para los usuarios si se pone a derecha o izquierda del contenido, conforme a estudios sobre el comportamiento de usuarios de sitios, en tanto 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 ambas a uno de los lados, siendo también indiferente en este caso si se ubican a la derecha o a la izquierda del contenido principal.
Los usuarios, dado el uso continuo de estos elementos para esta función, suelen buscar zonas de navegación en esta clase de columnas, por lo que resulta uno de los mejores lugares para
colocar menús secundariosal menú principal de la cabecera.
A continuación, vemos ciertos ejemplos de columnas laterales:
Esta zona del diseño de la página, es la que menos reglas tiene respecto de su diseño, puesto que el hecho de que en ella se hallen los contenidos primordiales 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 desea emplear, etc.
Sin embargo, hay que estimar algunas reglas esenciales y que, salvo rarísimas ocasiones, deben ser seguidas al pie de la letra.
Finalmente, debajo de todas y cada una de las secciones, se pone una faja horizontal en cuyo interior se colocan algunos elementos importantes, como el creador, copyright, acceso a diferentes políticas del sitio y asuntos legales, datos de contacto, enlaces a sitios relacionados, enlaces internos, etc.
Un sitio no es una unidad real, sino se trata de una serie de páginas independientes. El término de unidad de un lugar 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 enorme pérdida de tiempo establecer diseños diferentes para páginas o bien secciones de un mismo sitio.
Esto se consigue empleando
plantillas de diseño, esto es, la repetición de un mismo diseño con variación casi 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, por lo que seguramente el diseñador necesitará efectuar más de una plantilla, que por lo general son variaciones de una misma plantilla original.
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 especiales, por lo que si lo que se quiere es establecer una unidad visual del lugar, lo correcto sería comenzar por las páginas cuyo diseño se repetirá. Esto desea decir, que lo mejor es
comenzar diseñando las páginas interiores.
Luego, el método debería seguir con las alteraciones que ciertas páginas interiores requieren, para finalizar en el diseño de la página inicial.
Las páginas interiores deben ser diseñadas teniendo presente cuáles son sus funciones:
En casos de sitios muy complejos, agencia seo sant cugat establecer
plantillas secundariaspara diferentes niveles de estructura.
Algunas páginas web, por razones denecesitan establecer entradas alternativas al lugar, lo que se llaman.
Por ejemplo, la página web de una cadena de supermercados, durante el período que dura una oferta especial, necesita que sus visitantes ingresen por otra página de comienzo, que contiene los detalles de la oferta. Esta landing que funciona como entrada alternativa, necesita tener una clara
vinculación visualcon el resto del sitio, y además debe orientar al visitante para que acceda a la página principal del sitio.
La
estructura de la página de inicio, aunque tiene características singulares que hay que tomar en consideración, una vez que los pasos anteriores ya han sido resueltos, resultará sensiblemente más fácil de efectuar que si se hubiera empezado el diseño por ella.
Latiene 4 elementos por los que está compuesta. Cada uno de ellos de estos elementos es importante, aunque la relevancia y la relación que tienen entre ellos es variable de un tipo de lugar a otro.
Los elementos son los siguientes:
El diseño de una página de comienzo debe siempre y en toda circunstancia contemplar estos 4 elementos constitutivos, aunque la relevancia que debe darse a cada uno 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 Google y Yahoo!. Al tiempo que la página de comienzo del buscador de Google se centra casi únicamente 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 absolutamente identificables por tener una enorme presencia, debe agregarse además breves
comentarios explicativosque orienten al usuario en lo que encontrarán en el lugar.
Si no se posee una marca identificable 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 sitio.
Los
menús principales, aquellos más perceptibles, normalmente ubicados cerca de la cabecera de la página, deben estar destinado a mostrar 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 lugar, normalmente conocen en qué secciones pueden localizar la información que buscan, al paso que los usuarios que ingresan por primera vez, han de ser rápidamente orientados a las secciones que necesitan.
Cuando nos comenzamos en el, tendemos a pensar que la
estructura de los archivos y directoriosen que se halla organizada nuestra página, resulta de importancia menor.
Nada más lejos de la realidad, resulta importante para quien administra el sitio,
tener una estructura ordenada, puesto que en el momento de introducir cambios, agregar nuevos contenidos, etc., la labor puede resultar mucho más simple, con el consecuente
beneficio en tiempo y costes.
Esto de manera indirecta favorece a los usuarios, puesto que todo el tiempo que se ahorre en tareas que pueden simplificarse, puede invertirse en contenidos.
Si en algún momento se pretende hacer una reforma en la página, aumentar sus secciones, etcétera, la labor se ve enormemente simplificada si los ficheros que componen el sitio 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 link puedes profundizar pero en aspectos relacionados con el.
La
organización semántica de un lugar webtiene como finalidad facilitar la tarea de acceder a los diferentes archivos y directorios que lo componen, de forma tal que cualquier persona, incluyendo al propio creador, no tenga que hacer grandes esfuerzos para encontrar cada uno de ellos 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 de páginas.
La falta de una
planificacióny
estructuraciónde los ficheros del sitio en sus inicios, puede hacer muy compleja la administración del mismo con el tiempo.
Procura usar nombres del archivo y directorio descriptivos, que sean comprensibles a simple vista. Procura eludir 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 ficheros y directorios componentes de una página web.
Algo que su empleo se ha visto de manera notable incrementado 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 efectuar trabajos por secciones sin que la totalidad de la página se vea perjudicada.
Por ejemplo, un sitio web compuesto por muchas páginas, puede requerir múltiples estilos diferentes, lo que aún en los casos cuyas diferencias sean menores, se emplean varios ficheros.
Este tipo de divisiones de los ficheros, son usuales en
, si bien también se emplean para, php, etcétera Todo esto favorece enormemente la organización de los ficheros del sitio y reduce la cantidad de código que debe escribirse.
También resulta fundamental, 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.
Otra razón para emplear nombres descriptivos en archivos y directorios, es que todos ellos son parte de la URL, elemento que tienen en consideración los rastreadores de los buscadores.
Esto agrega la posibilidad de emplear la URL como lugar donde poner lasde nuestros contenidos, lo que facilita la clasificación por la parte de los buscadores, 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 archivos con nombres complejos, y otra URL con nombre del sitio, los ficheros y directorios con títulos descriptivos:
¿Con cuál de las dos piensas que los motores de búsqueda tendrán menos dificultades para clasificar los contenidos, y en consecuencia indexarla y ponerla en las SERP’s? Obviamente, la segunda opción es la más adecuada.
Los buscadores web pueden emplear la URL como
primer elemento a analizary es de las mejores formas de incluir palabras clave.
Cuando el diseñador toma los contenidos y los introduce en el cuerpo del documento, a través de el uso de etiquetas
o
XHTMLy jerarquiza exactamente los mismos.
La estructuración semántica del contenido tiene una importancia vital, tanto en la presentación del contenido como en la
optimizaciónpara los motores de búsqueda, por lo que debe ser esmeradamente planificada y elaborada.
Las páginas web se hallan 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 poner un 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 ejemplo, la frase contenida en una etiqueta
h1es la más importante de todo el contenido, ya que define al contenido mismo, por ser su título.
Esta jerarquización, además de facilitar la lectura de los contenidos por 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 la misma.
Mira el ejemplo que se propuso en una guía precedente, ¿qué te semeja mejor?:
A la vez que centras la página en el navegador, puedes ponerle un color de fondo diferente al sitio, 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 una parte de la ventana de navegación con el color de fondo que hayas escogido, al tiempo que los navegadores con resoluciones más pequeñas mostrarán menos o bien ningún color de fondo.
Uno de los errores de diseño más comunes en diseñadores novatos es insertar las imágenes en una página de cualquier manera sin pensar en el layout (estructura). Esto visualmente no queda muy bien, pues por defecto las imágenes se alinean a la izquierda, resulta mucho más agradable verlas centradas.
Con un simple código de dos líneas puedes centrar tus imágenes. Este código va en tu hoja de estilos:
Es fácil dejarse llevar por la gran cantidad de imágenes y animaciones disponibles, pero si te pasas, puedes hacer que resulte muy difícil de leer o bien aun molesto.
A continuación tienes los ejemplos más típicos de alineación en los layouts.
Mira estos casos y juzga por ti mismo cuál es el tipo 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.
| Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |
