• Página 1 de 3
  • 1
  • 2
  • 3
  • »
Moderador del foro: ZorG  
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Configuración del diseño de otros elementos de la web
Configuración del diseño de otros elementos de la web
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 12:44 PM
Estilos de CSS para el calendario

Code
/* Calendar Style */
.calmonth {text-align:right; }
.calwday {border:1px outset; background:#D9D775; width:17px;}
.calwdayse {border:1px outset; background:#D9D775; width:17px; font-weight:bold;}
.calwdaysu {border:1px outset; background:#D9D775; width:17px; font-weight:bold; color:#FF0000;}
.calmday {border:1px inset; background:#F5F5F5;}
.calmdaya {border:1px inset; background:#F5F5F5; font-weight:bold;}
.calmdayis {border:1px outset; background:#EFEFEF;}
.calmdayisa {border:1px outset; background:#EFEFEF;font-weight:bold;}
a.calmonthlink:link {text-decoration:none; color:#938D4A;}
a.calmonthlink:visited {text-decoration:none; color:#938D4A;}
a.calmonthlink:hover {text-decoration:underline; color:#938D4A;}
a.calmonthlink:active {text-decoration:underline; color:#000000;}
a.calmdaylink:link {text-decoration:underline; color:#938D4A;}
a.calmdaylink:visited {text-decoration:underline; color:#938D4A;}
a.calmdaylink:hover {text-decoration:underline; color:#000000;}
a.calmdaylink:active {text-decoration:underline; color:#000000;}
/* -------------- */

Cómo cambiar el aspecto de la barra de desplazamiento

Quote
scrollbar-3dlight-color
Configura el color de los límites derecho e izquierdo de la barra de desplazamiento, su deslizador y flechas.
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-arrow-color
Configura el color de las flechas en los botones de la barra de desplazamiento.
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-base-color
Configura el color del deslizador y botones-flechas de la barra de deslizamiento.
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-darkshadow-color
Configura el color de la “sombra” del deslizador y botones del desplazamiento de la barra de desplazamiento (color de los límites derecho e inferior).
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-face-color
Configura el color del deslizador y botones del desplazamiento de la barra de desplazamiento.
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-highlight-color
Configura el color de la parte “alumbrada” del deslizador y botones del desplazamiento de la barra de desplazamiento (color de los límites izquierdo y superior).
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-shadow-color
Configura el color de la parte “no alumbrada” del deslizador y botones del desplazamiento de la barra de desplazamiento (colores de los límites derecho e inferior). No confundir con el color de la “sombra” que es el efecto de scroll-darkshadow-color.
Se apoya por el Internet Explorer a partir de 5.5

scrollbar-track-color
Configura el color de la parte efectiva de la barra de desplazamiento, o sea, aquella su parte por la cual mueve el desplazador.
Se apoya por el Internet Explorer a partir de 5.5



El código estándar $LOGIN_FORM$ puede no convenir para cada diseño, o tú simplemente no quieres que la marca “Recordar” siempre sea activa, o tal vez quieras ir practicando la configuración del diseño... El siguiente ejemplo es pa’ ti.

Quote
<form method="POST" name="loginform" action="http://YOUR_SITE_URL/index/">

Login: <input type="text" name="user" size="20" style="width:100px" maxlength="25">
Password: <input type="password" name="password" size="20" style="width:100px" maxlength="15">
<label for="rem"><input id="rem" type="checkbox" name="rem" value="1" checked>remember</label>

<input type="submit" value="Log in »">

<input type="hidden" name="a" value="2"><input type="hidden" name="redirect" value="0">

</form>

<a class="forRegLink" href="javascript://" onClick="window.open('http://YOUR_SITE_URL/index/5','reminder','top=0,left=0,width=300,height=140'); return false;">Forget password</a>
<a class="forRegLink" href="$REGISTER_LINK$">Registration</a>

<script type="text/javascript">document.loginform.redirect.value=window.location.href;</script>

Explicaciones:

Quote
<form method="POST" name="loginform" action="http://YOUR_SITE_URL/index/">

código obligatorio donde solamente es necesario cambiar la dirección de tu web.

Quote
Login: <input type="text" name="user" size="20" style="width:100px" maxlength="25"> Password: <input type="password" name="password" size="20" style="width:100px" maxlength="15">

campos para introducir el login y la contraseña del usuario, el aspecto e inscripciones pueden cambiarse, a excepción de name="user" и name="password"

Quote
<label for="rem"><input id="rem" type="checkbox" name="rem" value="1" checked>remember</label>

bandera que indica si necesita el usuario poner cookie prolongado para que no necesite introducir la contraseña una vez más. Se lo puede quitar, o hacer inactive, es decir, borrar la palabras “checked”.

Quote
<input type="submit" value="Log in »">

botón para enviar el formulario, lo puedes cambiar como quieras, lo principal es que el tipo sea (type=”submit”)

Quote
<input type="hidden" name="a" value="2"><input type="hidden" name="redirect" value="0">

Campos obligatorios ocultos del formulario, sin primer campo el formulario no funcionará, el segundo campo es necesario para la redirección a la página de donde introdujeron el login. Estos tags deben preceder al tag de cierre del formulario </form> (consultar la documentación sobre HTML).

Quote
</form>

tag obligatorio, debe pasar después de todos los tags descritos arriba.

Quote
<a class="forRegLink" href="javascript://" onClick="window.open('http://YOUR_SITE_URL/index/5','reminder','top=0,left=0,width=300,height=140'); return false;">Forget password</a> <a class="forRegLink" href="$REGISTER_LINK$">Registration</a>

Enlaces para el registro y recordatorio de la contraseña, los puedes cambiar a tu gusto, puedes eliminar pero mejor que queden (lee los artículos sobre usabilidad).

Quote
<script type="text/javascript">document.loginform.redirect.value=window.location.href;</script>

Javascript que otorga al campo oculto “redirect” la dirección de la página siguiente, gracias a esto un usuario puede entrar y regresar a la página corriente. Este código debe seguir después del formulario de entrada. Si esta función no se requiere, puede estar en desuso.



De misma manera se puede cambiar también otras variables que exponen el código NTML grande si lo deseas cambiar a tu gusto (por ejemplo: formulario de encuesta, búsqueda etc).

Y una cosa más (seguro de que es más importantísima): en caso de que no hayas comprendido lo escrito aquí, esto significa que todavía es temprano trabajar en uCoz... Ven leyendo artículos sobre HTML.
Para poner una imagen en vez del botón “Entrar” hay configurar el clase loginbutton

Code
.loginbutton{background: url('pictures/logm.gif'); border: 1px solid #000000; color: #ffffff; font-size:7pt;}

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 2 | 1:28 PM
CÓDIGO ÚNICO $URI_ID$

Algunos usuarios están interesados cómo se puede añadir el texto a una página que está ausente en “Gestión de diseño”.
Para poder añadir el texto a tales páginas, la franca que hay que utilizar los operadores condicionales de manera debida.
El código expuesto abajo será una especie de plantilla:

Quote
<?if($URI_ID$='PÁGINA')?>TEXTO<?endif?>

PÁGINA – valor del código $URI_ID$
TEXTO – texto necesario
$URI_ID$ (código único para cada página) se puede conocer así:

• pasar a la página requerida (por ejemplo, página de adición de las noticias);
• elegimos en la barra de administrador CONSTRUCTOR LISTA DE VARIABLES DE LA PÁGINA$URI_ID$
Para la página de adición de las noticias del sitio el código es $URI_ID$ = nwAdd0.
Por lo tanto, para poner un texto en la página de adición de las noticias necesitamos:

Quote
<?if($URI_ID$='nwAdd0')?>TEXTO<?endif?>

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 3 | 1:58 PM
Qué es en realidad el buen diseño web

Un sitio comercial en donde el buen aspecto debe predominar y mantener una línea de diseño coherente con una imagen corporativa preestablecida. Pero para una aplicación web destinada a cientos o miles de usuarios y que tiene interacción con el usuario todo cambia.

Hace un tiempo, charlando con amigo programador que me mostraba un proyecto que quería lanzar, noté que si bien la idea del sitio era muy interesante y el funcionamiento intuitivo y usable el diseño o aspecto general era demasiado austero, dicho en otras palabras; era horrible. Con buenas intenciones le dije que podía diseñarle algo mejor, hacer una maqueta y que modifique luego él.

Mi asombro fue cuando negó mi ofrecimiento y me dijo que un sitio austero y sencillo tiene más posibilidades que un sitio muy elaborado en diseño. Me pareció “medio incorrecta” su observación y pasé a otro tema. Siempre pensé que un sitio debe cautivar por su aspecto.

Sin embargo la idea me quedó en la cabeza, una cosa obviamente es un sitio comercial en donde el buen aspecto debe predominar y mantener una línea de diseño coherente con una imagen corporativa preestablecida. Pero para una aplicación web destinada a cientos o miles de usuarios y que tiene interacción con el usuario todo cambia.

Últimamente me he dado cuenta de que los usuarios de aplicaciones ya no quieren las cosas bonitas, porque eso les transmite la idea inconsciente de “comerciabilidad”; se le transmite la idea de que algo en el fondo quieren venderle, de que algo le van a cobrar. Digo esto después de “encuestar” a muchos usuarios que son fanáticos de aplicaciones simples, casi sin diseño. Hice esto porque estoy desarrollando una aplicación junto con un amigo y deseaba saber que es lo que realmente quieren los usuarios.

Descubrí lo siguiente:

El sitio debe ser funcional: el sitio debe responder siempre a lo que el usuario espera, nunca debería defraudarlo. El usuario entra con una idea fija en la cabeza, lograr o encontrar algo, si no lo logra se verá engañado calificando el sitio como poco útil o poco preciso. La garantía es que nunca más vendrá. En cambio si el sitio cumple nos aseguramos un lugar en sus favoritos.

El diseño debe ser usable: muchos siempre han pensado que un sitio usable es uno que tiene tipografías grandes y colores llamativos. Nada más lejos, un sitio usable tiene solamente lo que necesita el usuario, nada más. No sobra ningún vínculo y se destaca de manera visual lo que más necesita. Todo está a su alcance con el menor esfuerzo visual.

El diseño debe ser sencillo: creo que esto es lo más importante y al mismo tiempo lo más difícil de lograr. Como diseñadores tenemos una tendencia de cargar las cosas para estilizarlas, pero a veces cometemos el error de entorpecer o saturar el aspecto de un sitio.

El ojo del usuario se concentra en pocas cosas, mientras más ornamentos u objetos tenga más demorará en encontrar cada cosa.

El diseño debe “hablar”: El usuario debe poder identificar y generar un esquema en un pantallazo de como se compone el sitio y como deberá moverse en el mismo. Esto se logra aplicando los principios de la usabilidad y utilizando recursos visuales de una manera muy sutil. Por ejemplo, se debe determinar claramente lo que es contenido dinámico de lo que es estático. Esto es parte sensible en la navegación general.

Debe estar bien programado: la buena programación ayuda a la sencillez y a la velocidad de carga, creo que el contar con una buena programación es importantísimo. Mientras en menos cosas intervenga el usuario más adicto se hará a la aplicación o al sitio que navega. Por ejemplo, el otro día estaba utilizando un sitio que permitía subir trabajos de diseñadores, cuando hacía el upload de imágenes la aplicación me dijo que las imágenes deberían tener determinado ancho en píxeles. Automáticamente salí del sitio y busqué otra aplicación porque no tenía ganas de editar cada imagen. Mientras más fácil hagamos la vida del usuario más cariño le tomará a tu sitio.

Un sitio bien programado también es muy rápido. No precisas tampoco meter AJAS por todos lados, debe existir equilibrio.

El diseño no precisamente debe ser llamativo: Flickr, Youtube, Facebook, realmente no poseen un gran diseño, más bien son austeros y apuntan al uso del texto medianamente estilizados para lograr un buen diseño, pero no impresionan a nadie. La verdad es que ganan por la utilidad del mismo. Cuando conocí youtube hace unos tres años, me dije que este sitio era un fracaso por el diseño pobre que tenía, que equivocado que estaba.

El diseño debe se utilizable, no debe porque despistar al usuario ni mucho menos distraer la atención principal. En el caso de flickr nada sobra ni nada falta. Creo que es el mejor modelo de donde nos podemos agarrar.

Simple pero no desagradable: Muchos en el afán de lograr la máxima simpleza rayan la austeridad absoluta o el mal gusto, descuidando combinaciones de colores, tamaños de tipografías y espacios de blancos. Se debe buscar el equilibrio, esa es la clave.

Alguien dijo que el buen diseño pasa totalmente desapercibido, no nubla ni distrae al usuario.

Estas son mis observaciones, la verdad es que son muchos los factores que inciden en el éxito de un sitio, pero como siempre digo, si pensamos en el perfil de usuario que visitará el sitio estaremos muy cerca de lograr siquiera que nos vuelvan a visitar.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 4 | 5:27 PM
El proceso de diseño de un sitio Web

1. ¿Qué se busca al diseñar un sitio Web?
Veamos cuales son nuestros objetivos al diseñar un sitio.

Observemos primero el hecho de que en los computadores personales, muchas cosas son similares entre sí. Distintos programas funcionan de manera muy similar. Típicamente el primer elemento de la barra de menú es "File ..." o "Archivo ...", y el último es "Help ..." o "Ayuda ...". Esto porque poco a poco la gente se ha ido acostumbrando a trabajar en ambientes así, le es cómodo pasar de un programa a otro y aprender a aprovechar las nuevas funcionalidades.

En el World Wide Web, ocurre un proceso muy similar. Casi siempre hay botones "Home", un botón para enviar correo electrónico al diseñador o al que mantiene la página, una tabla de contenidos, etc. existen elementos comunes y un cierto estándar "de-facto" acerca de como funcionan los sitios.

Lo que pasa es que cuando una persona llega por primera vez a un sitio, ocurre un proceso muy rápido en que la persona aprende a navegar por él. Esto ocurre en los primeros 2 o 3 minutos, y es crucial que éste aprendizaje sea lo más expedito posible para la persona que llega. Muchos sitios incluso proveen de una página de ayuda que explica que tipo de ayudas de navegación se usan y cómo moverse adecuadamente. Es por ello que conviene adherirse al "estándar", por lo menos en cuanto a la estructuración de los contenidos y tratar de producir un sitio Web que responda a las características que el usuario promedio esperaría.

Además, las personas están mucho más acostumbradas a los libros, en que la información se presenta en forma lineal, que a la navegación hipermedial que requiere una mayor atención por parte del usuario.

El proceso de diseño Web que se debería contar con una serie de etapas que permitan transformar pedazos de información dispersos, o en el mejor de los casos un conjunto de información estructurada de manera lineal, en un sitio que haga que al usuario sentirse cómodo y encontrar lo que busca de la manera más rápida posible.

Por último, veamos de qué cosas se quejan más a menudo los usuarios del Web

1. De la velocidad de transferencia
2. De la capacidad para organizar la información que bajan (download) a su computador
3. Del tiempo que pierden en encontrar lo que buscar

Contra el segundo ítem no hay mucho que se pueda hacer, ni de que preocuparse a menos que se esté ofreciendo información para ser bajada al computador del usuario bajo la forma de un archivo comprimido o algo similar. Contra el primer y tercer ítem si hay se puede hacer mucho, por medio de un diseño cuidadoso.

2. Etapas del diseño Web
Estas son algunas etapas que se sugieren para diseñar eficientemente un sitio; es conveniente no comenzar a escribir ninguna línea de código HTML antes de completar las primeras etapas.

I. Delimitación del tema
Esta es la etapa crucial, se define de qué se va a tratar el Web, que cosas se incluirán y qué no. También es el momento para definir tanto las audiencias (normalmente es mas de una) y los objetivos (intentando priorizar entre objetivos primarios y secundarios).

Si no se evalúa adecuadamente la cantidad de tiempo que se dispone contra la cantidad de tiempo requerida para elaborar un sitio de la magnitud deseada, el resultado puede ser desastroso. Muchos proyectos Web fracasan porque comienzan a crecer y crecer sus especificaciones, sin que haya detrás un trabajo ordenado de delimitación de contenidos.

Obsérvese lo siguiente: la mayoría de los sitios que son premiados con distinciones como "Lo mejor de ...", "La mejor página de la semana ...", "Top 5% del Web", son sitios que se dedican a temas muy específicos. La gente no quiere un montón de sitios que tengan referencias a otros lugares, la gente lo que busca es el contenido.

II. Recolección de la información
En esta etapa se recolecta la información que se va a poner en el Web, de acuerdo a la especificación hecha en la etapa anterior. Es conveniente asociarse con alguien como un "proveedor de contenido", puesto que como mencioné antes hay mucha gente que si bien le tiene aversión a los computadores y que dispone de valiosísima e interesante información. Las organizaciones en general producen grandes cantidades de información, también en esta etapa hay que delimitar cuanta de la información histórica, que ya no es relevante, sera incluida en el sitio web, por ejemplo, se puede definir que la información de mas de 3 años de antigüedad no sera incluida, etc.

III. Agregación y descripción
Una vez que tenemos la información que irá en el sitio, comenzamos una clasificación apropiada . Aquí hay que encontrar un adecuado balance entre la linealidad y la jerarquización.

Aplicamos una clasificación de tipo lineal a fragmentos de información que requieren que la persona que los lee vaya avanzando poco a poco en el conocimiento de algo, como en un libro. Usualmente los pondremos en una misma página, usando FRAMES o una técnica similar si se estima apropiado. Aplicamos una clasificación de tipo jerárquica a trozos de información que sean complementarios o que dependan uno de otro, como secciones y subsecciones. Usualmente los pondremos en diferentes páginas.

Es importante aqui no centrarse en una única forma de clasificar los documentos. Una serie de descriptores tienen que ser definidos. Ademas, un mismo documento puede pertenecer a varios valores de un mismo descriptor. Si nos encontramos en esta etapa discutiendo sobre si un elemento de informacion va en una u otra parte, es que estamos cometiendo un error: debe ir en todas las partes donde un usuario razonable esperaría encontrarlo.

IV. Estructuración
En este punto se estructura la manera en que se unen las diferentes páginas, de acuerdo a la agregación de contenidos realizada en la etapa anterior. Se provee de ayudas para la navegación, de enlaces que permitan la jerarquización que diseñamos y de enlaces entre elementos de una misma jerarquía si se desea.

También es importante proveer de indices para cada descriptor que haya sido diseñado.

Desde este punto en adelante se puede trabajar en la implementación HTML propiamente tal.

V. Metáfora
Existen muchas páginas que esperamos sean accesadas desde diferentes partes de nuestro servicio (por ejemplo: un glosario o una ayuda). Quizás en alguna parte del documento mencionamos a otra página y sería interesante que el usuario pudiera hacer click en esa referencia para ir a la página que estamos referenciando.

A esta etapa le llamamos "metáfora" pues permite referirse a una misma entidad (en este caso, una página HTML) en diferentes contextos. Estas paginas deben ser diseñadas cuidadosamente puesto que seran importantes para los usuarios al permitirles "saltar" dentro del sitio desde zonas logicamente distantes.

VI. Diseño y estilo gráfico
Un estilo gráfico adecuado puede ser algo importantísimo a la hora de hacer que la persona que nos visita se sienta cómoda, y como una manera de alivianar el contenido y hacerlo más digerible. Un sitio por mas contenido que tenga si no tiene un buen diseño gráfico difícilmente lograra un lugar destacado entre otros sitios del mismo tipo.

En cuanto a la cantidad y tamaño de las imágenes, hay que adoptar un equilibrio. Hay sitios que se basan casi por completo en grandes y lentas imágenes GIF, otros que se ven bastante pobres pues son casi sólo texto, con lo que se desaprovechan los métodos multimediales . El esquema que se adoptará, (que se encuentra en algún lugar entre ambos extremos) varía de diseñador a diseñador y es un punto importante a considerar.

Otro punto importante en la etapa de definición de la parte gráfica, es intentar en lo posible mantener una cierta coherencia gráfica, y atreverse a innovar en cuanto a ella. Un color de fondo, un fondo o una distribución interesante de los elementos dentro de una página es algo que no se olvida con facilidad.

VII. Ensamble final
En este punto concretamos el diseño, con los últimos enlaces que sean necesarios e incorporamos el estilo gráfico a las páginas, se ensambla el sitio con una portada que sea capaz de presentar en una sola página física al menos lo más relevante del sitio, se instalan links hacia la página personal del autor y/o su dirección de correo electrónico.

VIII. Testeo
Finalmente, es necesario revisar la coherencia general del sitio, que no hayan links "rotos" que no conduzcan a ninguna parte; revisar la redacción y ortografía de las páginas, hacer los ajustes necesarios para separar las páginas que sean demasiado extensas en páginas más pequeñas.
Para esta etapa, lo mejor es tratar de buscar usuarios que vayan a utilizar el sitio en la practica, y si eso no es posible, ponerse en el lugar de las personas que vean los documentos, y seguir los pasos que suponemos que ellos seguirán.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 5 | 12:56 PM
El balance en el diseño web

Este principio del diseño web se refiere al equilibrio que guardan los elementos que componen la página. La forma en que se disponen los elementos de la página influye notoriamente en el estilo y el carácter de la página.

Existen tres tipos de balance:
Simétrico – este tipo de balance se ve en los casos en que los diferentes elementos componentes de la página web se encuentran dispuestos de acuerdo a alguna de las clases de simetría.
Asimétrico – es cuando los elementos componentes se colocan balanceados pero sin seguir ninguna simetría.
Fuera de balance – en estos casos, los elementos son colocados en forma desbalanceada dentro de la página.

Balance simétrico
Si bien existen muchos tipos de simetría, el diseño web tiene algunas particularidades que hacen poco útiles algunas de ellas. Estas características particulares del diseño web están referidas básicamente a la forma en que se muestran las mismas en los navegadores, lo que hace que los diseñadores web tengan la necesidad de adaptarse a estos requerimiento, adoptando solo aquellos elementos aplicables a este tipo de visualización.

La resolución de pantalla más empleada en la actualidad es de 1024 x 768 píxeles. A estas dimensiones se deben quitar las barras de herramientas, las barras de desplazamiento (scrollbar), etc., lo que hace imposible incluir todo el contenido de una página en este espacio. Esto quiere decir que los usuarios de la mayoría de las páginas web se deban desplazar en forma vertical por la misma, así que resulta fácilmente comprensible que emplear una simetría horizontal en la web es bastante difícil.

Características del balance simétrico
Disponer de los elementos de una página web en forma simétrica brinda una sensación de ordena. Otra característica importante es que permite que la disposición de estos elementos sea “predecible”, haciendo que el diseñador pueda guiar al visitante por la página en la forma que desee para asegurarse la mejor visibilidad de los elementos más importantes de la misma.

Simetría horizontal
Como está descrito anteriormente, la simetría horizontal es bastante rara en el diseño web. Sin embargo, en algunos casos en que, como en una página principal (home), todo el contenido de la misma puede ser incluida sin necesidad de que el usuario deba emplear las barras de desplazamiento, el diseñador puede basar su creación en la simetría horizontal.

A continuación les mostramos un ejemplo de una página inicial completamente simétrica en el plano horizontal.

En ella vemos que el menú está compuesto por líneas horizontales que abarcan la totalidad del ancho de la página y que el logotipo se encuentra ubicado en el pie de la página y también se encuentra dispuesto de acuerdo a la simetría horizontal del resto de la composición.

Simetría vertical
Al igual que en el caso anterior, es bastante difícil que un diseñador base su creación en la simetría vertical exclusivamente. Sin embargo, se pueden apreciar algunos casos en que excelentes diseños son construidos en base a este tipo de ordenamiento de los contenidos.

Una página web basada en simetría vertical implica que sus contenidos se encuentran distribuidos en dos o más columnas más o menos definidas que ocupan todo el largo de la página. En algunos casos, luego de establecer un encabezado horizontal se emplean columnas para ordenar el contenido. Tal es el caso del siguiente ejemplo, donde puede verse claramente que el contenido principal de la página se encuentra dividido en dos columnas simétricas, debajo de un encabezado horizontal.


Click on the image to view it in full size.

Un caso llamativo es el siguiente ejemplo, donde el contenido de la página, incluyendo el logotipo y títulos, se encuentran en tres columnas simétricas perfectamente definidas:

Como puede verse, el contenido de la página, incluyendo logotipo, textos e imágenes, se encuentran dispuestos en tres columnas perfectamente simétricas del mismo ancho. Para completar la simetría, los espacios que separan las columnas también son simétricos en el plano vertical.

Simetrías vertical y horizontal combinadas
También es posible observar ejemplos de diseños web hechos combinando las simetrías horizontal y vertical. El empleo de simetrías proporciona sobriedad, elegancia y claridad a los diseños.

Un ejemplo donde el empleo de la combinación de la simetría vertical y la horizontal se ve muy claramente lo tenemos en la siguiente imagen:

Este excelente diseño nos muestra como el logotipo, el menú, las imágenes y enlaces se distribuyen en ocho cuadros perfectamente simétricos, tanto en el plano horizontal como en el vertical. Este tipo de diseños se emplean en forma más asidua en los últimos años.

Simetría radial
En algunos casos, los diseñadores optan por otro tipo de simetría para ordenar los componentes de las páginas, como la simetría radial. La disposición de los elementos en este tipo de simetrías es en forma circular en torno a un centro ocupado por una imagen o texto o en forma de espiral. Dado la naturaleza de este tipo de simetrías, solo se emplea en casos en que la página no supere las dimensiones de una pantalla, ya que en caso contrario, gran parte del diseño se pierde.

El siguiente ejemplo pertenece a una captura de pantalla de una página de inicio, donde se puede apreciar claramente el centro ocupado por una imagen, los rayos de sol que marcan nítidamente el diseño circular, y el título, que acompaña la simetría radial con que está diseñada la página.


Click on the image to view it in full size.

Balance asimétrico
Con este nombre designamos al tipo de balance en el que los diferentes elementos que componen una página web se encuentran equilibrados o balanceados pero sin seguir un patrón simétrico. Este tipo de balance es uno de los preferidos en la actualidad, ya que otorga gran libertad de creación, pero también constituye un gran desafío para el diseñador, ya que equilibrar elementos sin compensación simétrica es más difícil al no contar con el apoyo de elementos que balanceen el diseño por contraposición.

Sin embargo, a pesar de los retos que este sistema de equilibrio plantea, permite al diseñador colocar los componentes de una página en sitios más adecuados para dirigir el ojo del visitante hacia los puntos de la página que más le interese mostrar, cumpliendo de esta forma con otro de los requisitos que todo buen diseño debe cumplir.

En la siguiente imagen podemos ver un diseño en el que, si bien cuenta con una estructura geométrica definida, no se cumple ninguna de las simetrías. Está conformado por dos columnas de diferente ancho de las cuales, la que se encuentra más a la izquierda es la más relevante por poseer el contenido, es la más ancha, mientras que la más angosta cuenta con los elementos de navegación y otros accesorios.

Fuera de balance
Yendo aún más lejos en la libertad de diseño se encuentran las páginas fuera de balance o sin equilibrio. Esto se hace en forma deliberada, buscando la efectividad visual. Es un verdadero desafío lograr que una página que no tiene balance o equilibrio se vea bien, siendo un concepto muy avanzado en el diseño y que requiere gran experiencia.

Un ejemplo de página sin balance es el siguiente, donde el creador ha decidido romper el equilibrio tanto horizontal como vertical, consiguiendo un efecto de arte abstracto muy llamativo.

Conclusión
Cada uno de los métodos de balancear o no una página web es válido. El diseñador debe tener en cuenta el tipo de página web que está creando para elegir si su página será balanceada o no, si será simétrica o no. No existen reglas definidas en ninguna clase de creación, por lo que solo nuestra capacidad de imaginación puede ser el límite. Algunos ejemplos de excelentes diseños pueden verse en la siguiente página y también en este sitio.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 6 | 5:37 PM
El contraste en el diseño web

Se llama contraste a las diferencias que existen entre dos elementos relacionados y es uno de los principios de diseño web. El contraste puede ser mayor o menor en la medida que mayores o menores sean las diferencias de estos elementos. Esto quiere decir que dos elementos que tienen pocas diferencias entre sus atributos tienen un contraste bajo, mientras que dos elementos cuyos atributos se diferencias mucho, tienen un alto contraste.

El empleo del contraste en el diseño web resulta muy importante para atraer la atención del usuario. Una página web cuyos elementos tienen poco contraste no atraerá la atención de los posibles usuarios, mientras que una web que emplea un contraste evidente para destacar sus elementos más importantes, atraerá fácilmente la atención. El contraste es uno de los métodos empleados para dirigir la atención del usuario de la página hacia determinados elementos. En el siguiente ejemplo, una misma imagen se muestra con dos contrastes diferentes. Es fácil determinar que, a pesar de ser la misma imagen y tener el mismo tamaño y color, la primera en llamar la atención es la imagen de la derecha, cuyo contraste es más marcado que el de la imagen de la izquierda.

Si en una página web se desea resaltar un objeto contrastándolo con los demás elementos que lo circundan, no necesariamente hay que oscurecerlo, agrandarlo, deformarlo o cambiar su color. El contraste, tal como ya lo definimos, es la diferencia entre los distintos elementos, por lo que también es posible cambiar los atributos de los elementos circundantes, de forma que a pesar de no haber realizado cambios en el objeto logramos destacarlo por contraste.

Tipos de contraste

Existen cuatro tipos de contraste:

• Contraste de tono
• Contraste de color
• Contraste de contorno
• Contraste de escala

Contraste de tono
De todas las propiedades de color (tono, matiz y croma), el tono es el que brinda mayores posibilidades de empleo para manejar el contraste entre diferentes elementos, por lo que también resulta el más usado. Un ejemplo notable de la utilización de variaciones de tono para destacar los diferentes elementos podemos verlo en la siguiente imagen:


Click on the image to view it in full size.

En la imagen anterior puede apreciarse que el menú se encuentra distribuido por toda la página y tienen la misma forma y tamaño que el resto de los cuadros en que se encuentra dividida la misma. La diferenciación de los elementos del menú está basada en variaciones de tono. Si posamos el puntero en alguno de estos elementos, podremos ver que para destacar el elemento que se está por seleccionar, también los diseñadores han empleado variaciones tonales.

Contraste de color
Otra de las posibilidades de contrastar objetos es a través del empleo de diferentes colores, logrando lo que se denomina contraste de color. Este tipo de contraste, bien empleado, da muy buenos resultados, pero también puede dar lugar a resultados desagradables si no se emplea con buen criterio.

La combinación de colores en diferentes elementos en una web no solo tiene la finalidad de embellecer el conjunto, sino que además posibilita destacar elementos. La combinación de elementos con colores fríos y cálidos es la forma más corriente de lograr el mencionado destaque. Mientras que los colores fríos (verdes y azules) tienden a dar pasividad y dan un aspecto regresivo al objeto, los colores cálidos (rojos y amarillos) son más agresivos y brindan a los objetos un aspecto expansivo. Esto quiere decir que si empleamos adecuadamente la combinación de colores fríos y cálidos, podemos lograr que un objeto se destaque sobre los demás.

En el siguiente ejemplo podemos apreciar una página web que se encuentra diseñada sobre un fondo de color neutro, cuyo logotipo no presenta grandes diferencias de tamaño ni de tono respecto de los demás elementos de la página. Los diseñadores han logrado resaltar el logotipo de la página web mediante el empleo del color.


Click on the image to view it in full size.

Contraste de contorno
Una forma sencilla de destacar los elementos entre sí, es el empleo de variaciones en el contorno. Las formas irregulares o abstractas atraen más la atención visual que las figuras sencillas y geométricas.

Si colocáramos algunas imágenes con un contorno geométrico (cuadrado, círculo, rectángulo, etc.) junto a una imagen cuyo contorno es irregular y sin otro tipo de diferencias entre ellas, lograremos que la vista de quien observe el conjunto se pose en primer lugar en la última.

El siguiente es un ejemplo notable del empleo del contraste de contorno. En la imagen aparece una página web en cuyo diseño aparecen varios elementos con colores llamativos, alto contraste y tamaños similares. Sin embargo, el logotipo es lo primero que llama la atención, debido a su forma irregular que contrasta claramente con el resto de la página que tiene trazados marcadamente geométricos.


Click on the image to view it in full size.

Contraste de escala
La utilización de escala o tamaño diferente para resaltar determinados elementos es una de las formas más conocidas y sencillas de conseguir el contraste. Es lógico que si colocamos un elemento de mayor tamaño que otros, aún cuando sean similares en otros atributos, éste elemento se destacará del resto, y que cuanto mayor sea la diferencia de escala, mayor será el contraste.

En el siguiente ejemplo, vemos la imagen de una página web diseñada con poco contraste de color, de forma o de tono. El nombre del juego promocionado logra destacarse del resto claramente, debido a que se encuentra a una escala mayor que el resto de los elementos que componen esta página.


Click on the image to view it in full size.

Conclusión
Los ejemplos anteriores muestran la aplicación de un tipo de contraste para diferenciar elementos entre sí. Sin embargo, lo más frecuente es que el realce de los elementos más importantes se haga a través del empleo de más de un tipo de contraste combinados.

Pero hay que destacar que es muy fácil emplear incorrectamente el contraste. Uno de los errores más frecuentes es emplear contrastes excesivos, desfavoreciendo la estética general de la página. Otro error frecuente es que, por desconocimiento de estos conceptos, terminan destacándose elementos que no son los más importantes de la página. El uso del contraste, como cualquier otra técnica, debe ser practicado para conseguir buenos resultados.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 7 | 5:57 PM
Énfasis en el diseño web

En muchos diseños web, la simple disposición de textos, imágenes, videos y cualquier otro elemento no es suficiente para conseguir que el usuario dirija la atención hacia los elementos que consideremos más importantes. La atención de las personas que navegan por Internet es de apenas algunos segundos, lo que implica que el diseñador debe lograr captar la atención del usuario, que éste se sienta atraído y no se retire de la página en unos segundos.

Este es uno de los motivos para emplear el énfasis en nuestros diseños. Otro motivo para aplicar este principio del diseño es diferenciar elementos semejantes entre si, resaltando aquellos que, dentro de su misma especie, se desee destacar de los otros. Por ejemplo, si tuviéramos que incluir un texto con gran extensión, la atención del usuario seguramente no pasará de las tres o cuatro primeras líneas, por lo que la lectura deberá simplificarse y agregarse elementos destacados para que el lector pueda hacer una rápida recorrida. Es muy probable que, tras esta breve recorrida empleando las ayudas aplicadas en el texto, el usuario considere que lo que allí se encuentra es lo que necesita y prosiga con una lectura más detenida del texto.

Lo mismo sucede con las imágenes. Una larga colección de imágenes similares difícilmente pueda atraer la atención de un internauta, por lo que será necesario destacar alguna o algunas de estas imágenes para que quien ingrese en nuestra página tenga una idea resumida del tipo de contenidos que allí encontrará.

El énfasis es uno de los métodos más adecuados para conseguir el necesario resaltado de algunos elementos de un grupo de elementos homogéneos.

Clasificación de elementos según el énfasis
De acuerdo al énfasis que el diseñador emplee en los diferentes elementos que componen una página, éstos se pueden clasificar en tres grupos:
• Elementos dominantes
• Elementos sub-dominantes
• Elementos subordinados

Elementos dominantes
Son aquellos elementos que, dada su importancia respecto del resto de los contenidos, se destacan aplicando énfasis por encima del resto. A continuación mostramos un ejemplo de elemento dominante:


Click on the image to view it in full size.

En este ejemplo, podemos apreciar dos elementos que por su énfasis pueden considerarse como dominantes: el título “creative services” y la imagen de la botella. Seguramente, al ver esta imagen, estos dos elementos hayan sido los primero en los que hayamos detenido nuestra atención, lo que ha sido el deseo del diseñador de la página. El mismo ha logrado este efecto gracias al correcto empleo del énfasis, consiguiendo colocar estos elementos en el primer plano de la composición.

Para lograr convertir a un texto como elemento dominante, el diseñador puede emplear varios atributos sobre los cuales aplicar la diferencia, como tamaño, color, tipografía, posición o una combinación de ellos.

En cuanto a las imágenes, al igual que con el texto, basta con variar algunos de los atributos de las mismas, como tono, color, tamaño, posición o una combinación de las mismas, para convertirla en uno de los elementos dominantes de la página.

Hay que destacar que la cantidad de elementos resaltados también resulta muy importante. Cuantos más elementos con atributos similares coloquemos en una página, menos se destacarán unos de otros. Si en la imagen anterior colocáramos una cantidad mayor de texto resaltado, el texto que es dominante dejaría de serlo ya que estaríamos haciéndolo homogéneo con otros elementos.

Elementos sub-dominantes
A la hora de interesar al visitante de la página, es necesario que luego de conseguir su atención gracias a los elementos dominantes, podamos guiarlo a través de los restantes elementos de forma tal que mantenga el interés en lo que exponemos y se interese por ver otros contenidos.
Para ello utilizamos otros énfasis menores que los de los elementos dominantes, pero mayores que los que empleamos en el resto de los elementos de la página. En el caso de los textos, podríamos definirlos como subtítulos y textos resaltados. En la siguiente imagen vemos una página web donde se ha distribuido el texto en varios párrafos, cada uno con su subtítulo.


Click on the image to view it in full size.

Elementos subordinados
Llamamos elementos subordinados a dos tipos de elementos. Unos son aquellas informaciones anunciadas por los elementos dominantes y sub-dominantes, como textos complementarios o ampliatorios. Otros son elementos que completan una composición de imágenes, embelleciendo la página o ayudando a resaltar a los elementos principales.

Estos elementos subordinados deben tener atributos de menor resalte que los de los tipos anteriores, de forma que la diferencia con aquellos colabore en resaltar su importancia.

El énfasis conseguido en los elementos dominantes y sub-dominantes depende en gran medida de la correcta utilización de los atributos de los elementos subordinados. En la imagen que empleamos en el ejemplo anterior, vemos que el tamaño de los textos subordinados es mucho menor, lo que permite que los subtítulos y títulos se destaquen.

Sin embargo, hay que tener presente que los elementos subordinados contienen información necesaria para completar el mensaje que se desea entregar, por lo que su legibilidad debe ser muy buena.

Conclusión
La aplicación de diferentes grados de énfasis resulta de extrema importancia en el diseño web. Gracias a ello la página en construcción puede verse heterogénea, llamando la atención de los usuarios sobre aquello que puede hacer que el mismo decida quedarse viendo el resto de los contenidos. El énfasis contribuye en gran medida también en laestética de la página. Veamos un ejemplo donde la aplicación de diferentes grados de énfasis son el elemento principal del diseño:


Click on the image to view it in full size.

En este diseño se puede apreciar que la aplicación de diferentes grados de énfasis en el texto conforma la estética del diseño de la página. La utilización de diferentes tamaños, colores y tipografías hacen a la totalidad del diseño, además de dar el mensaje textual. A la izquierda aparecen los elementos dominantes, mientras que a la izquierda los elementos sub-dominantes conforman el logotipo, el menú y algunos subtítulos, mientras que los elementos subordinados completan el mensaje.

Además de dar un mensaje claro, cada tipo de elemento tiene importancia desde el punto de vista estético. Esto demuestra claramente que el énfasis que se da a cada elemento resulta importante, tanto en el diseño estético de la página como en la claridad del mensaje.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 8 | 11:51 AM
Un elemento clave en el éxito de una página web: la navegabilidad

Una de las razones por las que los usuarios de Internet seleccionan los sitios de su preferencia es la facilidad con la que pueden acceder a los diferentes contenidos y poder navegar en forma sencilla entre las diferentes páginas, secciones, etc. Todo diseñador debe tener en cuenta que el usuario debe sentirse cómodo mientras permanece en el sitio. Esta facilidad de manejo del sitio es una de las razones por las cuales las personas deciden volver o no a un sitio determinado.

Imaginemos que ingresamos en un sitio de ventas. Seleccionamos la sección a la cual queremos ir, el artículo que deseamos ver, buscamos la forma de pago que más nos convenga, y nos encontramos con que este producto no nos interesa. Cuando decidimos volver a buscar otro producto, nos encontramos con que estamos en un callejón sin salida. Luego de pensarlo unos segundos, decidimos emplear el botón “volver” de nuestro navegador. Seguramente nos sentiremos incómodos y posiblemente ni siquiera iniciemos una segunda búsqueda, por lo que nos largaremos del sitio sin haber comprado absolutamente nada.

Esta situación no es ficticia. Muchos usuarios de Internet se ven enfrentados a este tipo de situaciones, cuyo resultado siempre es el mismo: la frustración del usuario y la búsqueda en otro sitio de lo que se encontraba buscando. Si no queremos que nuestro sitio también resulte un fracaso, deberemos seguir algunos preceptos básicos de navegabilidad, asegurando de esta forma que nuestros futuros usuarios sepan siempre donde se encuentran y como ir a cualquier parte de nuestro sitio.

Menú de navegación
Todos conocemos la importancia de los menúes de navegación. Su importancia radica en que permite que los usuarios pueden seleccionar la parte de nuestro sitio que desean visitar. La navegabilidad de un sitio se ve ampliamente beneficiada con la aplicación de uno de estos menúes en cada una de las páginas de nuestro sitio, ya que permite al usuario desplazarse al menos por las principales secciones del mismo.


Click on the image to view it in full size.

En las imágenes del ejemplo, vemos que a pesar de ser capturas de pantallas de distintas páginas y secciones de un mismo sitio, el menú de la columna izquierda se encuentra en todas ellas, elemento que nos permitirá desplazarnos a cualquier otra parte del mismo sitio cuando lo deseemos.

Evitar el empleo de botones “volver”
En algunos sitios se puede ver que cuando se llega a ciertas secciones o páginas, la única alternativa que se presenta al usuario que se encuentra en ella es la de hacer click en un botón “volver” o “atrás”. Este tipo de navegación termina siendo desagradable para la mayoría de los usuarios, ya que para leer otro artículo debe seguir al menos dos pasos. Veamos un ejemplo:

Imaginemos que cada una de las páginas tuvieran como alternativa de salida el botón “volver”, si hubiéramos accedido a la página 1 y nos quisiéramos desplazar a la página 4, deberemos hacer click en el botón volver de la página 1, otro en el de la página “sección 1”, para luego retomar la ruta. Toda esta peripecia pudo haber sido evitada si el diseñador del sitio hubiera tenido en cuenta los principios elementales de la navegabilidad.

Volver en un click a la página principal
Algo que resulta particularmente útil para hacer sencilla la navegabilidad de un sitio y que no requiere implementaciones importantes, es instalar algún enlace a la página de inicio desde todas las demás páginas del sitio. Esto da seguridad al usuario y facilita el reinicio de la navegación por el sitio en caso de haberse extraviado.

Una de las formas más sencillas de hacer esto es hacer que el logotipo tenga un enlace a la página principal del sitio. Este método es conocido por casi todos los usuarios de Internet, por lo que los mismos esperarán que el logotipo de todos los sitios se comporten de esta forma.
También puede implementarse algún botón especial para esta función, el que es conveniente se encuentre en un lugar fácilmente visible y cuya función sea reconocible al primer golpe de vista por los usuarios.

Una sección, un menú
Cuando el contenido del sitio 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 menú de este tipo.


Click on the image to view it in full size.


En esta tienda virtual, el acceso a cada sección del sitio se encuentra en la parte superior, a la derecha del logotipo. Para facilidad de los visitantes, se ha implementado en este sitio un menú lateral a la izquierda, que permite navegar por las diferentes páginas de las secciones.

Otra forma de conseguir algo similar es el empleo de menúes desplegables. Esta solución debe ser cuidadosamente empleada, ya que es bastante frecuente ver sitios donde el empleo de estos menúes es dificultoso. De todas formas, algunos sitios consiguen muy buenos resultados empleando este tipo de soluciones, como en el siguiente sitio:


Click on the image to view it in full size.

Regla de los tres clicks
Una forma de ver si la navegabilidad de un sitio es lo suficientemente buena, es verificar cuantos clicks se deben hacer para llegar a cualquier parte del sitio. Si se superan los tres clicks, es porque la navegabilidad es mala.

Sin embargo, a pesar de que con hacer dos clicks se llegue a cualquier parte del sitio, el paradigma de la navegabilidad es poder acceder desde cualquier parte del sitio a otro con solo hacer un click, aunque no siempre es posible. En este último caso, recordar la regla antes descrita será lo más prudente.

Carga de los links
Seguramente todos tenemos algunos sitios favoritos, a los cuales accedemos con frecuencia. En estos casos, generalmente tratamos de ingresar lo más rápidamente que sea posible a la sección que nos interesa, lo que hacemos empleando el sistema de navegabilidad implementado. El tiempo que demora en cargar la página nos encuentra con la vista fija en el lugar donde estará el link sobre el que haremos click.

Si hemos experimentado esto, sabremos por experiencia propia que algo que resulta muy agradable a usuarios frecuentes es que los links sea lo primero que aparece ante la vista. Por lo tanto, es conveniente que en los sitios web se desplieguen en primer lugar los links, algo que los usuarios frecuentes agradecemos mucho.

Conclusión
El diseño de una página web no solo tiene como cometido presentar buenos contenidos en una presentación bella. También debe hacer que dichos contenidos sean fácilmente accesibles por el público que la visita. Una buena navegabilidad puede ser la diferencia entre tener usuarios frecuentes o no. Es posible que una persona, en el afán de obtener ciertos contenidos, soporte algunas peripecias en la web. Lo que seguramente no lograremos con una mala navegabilidad es que este usuario desee volver a nuestro sitio.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 9 | 2:46 PM
Diseñar una página web para varias resoluciones de pantalla

Una de las dificultades más importantes a la que se enfrentarán los diseñadores web es la cantidad de resoluciones de pantalla diferentes que emplean los usuarios de Internet. El diseñador empleará un monitor y un navegador que se encuentran adaptados a sus necesidades y posibilidades, pero esto no debe ser motivo para interpretar que todos los usuarios pueden llegar a emplear la misma resolución.

Muy por el contrario, los usuarios de Internet emplean una gama bastante amplia de resoluciones de pantalla. Las resoluciones pueden ser 640 x 480, 800 x 600, 1024 x 768, 1280 x 1024 o superiores. Se podría suponer que bastaría con tomar la resolución de pantalla más empleada y diseñar nuestra página web para que se vea bien en esta resolución. Sin embargo, el tema no es tan sencillo. La siguiente estadística muestra la evolución del empleo de las distintas resoluciones de pantalla desde el año 2000 hasta el 2010.

Estadística de uso de resoluciones de pantalla

Como puede apreciarse en la tabla anterior, el uso de resoluciones de pantalla de 640 x 480 es en la actualidad nulo o un valor muy cercano a ello, mientras que la tendencia a emplear una resolución de 800 x 600 viene descendiendo y los usuarios que la emplean ya son muy poco más del 1%. La tendencia general es de un aumento del empleo de resoluciones de pantalla superiores a 1024 x 768. Teniendo en cuenta esto, podríamos pensar que lo correcto sería diseñar páginas web para que se vean bien en este tipo de resoluciones. Sin embargo, no es posible despreciar a los millones de usuarios (más del 20%) que todavía emplean la resolución de pantalla 1024 x 768, aunque si es despreciable las cifras de usuarios con resoluciones menores.

El objetivo de una página web debe ser alcanzar a conformar a la mayor cantidad de usuarios posibles, por lo que dejar de lado al 20% de los usuarios parece una medida poco recomendable. El diseñador web deberá hacer su trabajo de forma tal que le permita llegar con un buen diseño a los usuarios con diferentes resoluciones de pantalla.

Posibles soluciones
Una de las soluciones posibles, aunque no la mejor, es realizar la página para la menor de las resoluciones de pantalla (en la actualidad, teniendo en cuenta que puede despreciarse el número de usuarios que emplean resoluciones menores, sería de 1024 x 768) y dejar márgenes auto en CSS.

Con este código CSS, el contenedor principal de la página web que estaremos diseñando tendrá un ancho de 800 píxeles y se ubicará en el centro, mientras que el espacio restante de la pantalla, cuyo tamaño dependerá de la resolución de pantalla del usuario, estará ocupado con el fondo que hayamos establecido para toda la página a uno y otro lado del contenedor. Esta solución, si bien es bastante sencilla y efectiva, no siempre resulta del agrado de los diseñadores, debido a que en resoluciones de pantalla muy grandes, los espacios que quedan a ambos lados del contenedor principal son muy grandes, pudiendo perjudicar la estética general del sitio. A continuación se verá un ejemplo donde una página web que emplea este método se ve en dos resoluciones de pantallas diferentes. La primera captura de pantalla corresponde a una resolución de 1024 x 768 pixeles, mientras que la segunda corresponde a una resolución superior:


Click on the image to view it in full size.

Existe otra solución, la que si bien es la más efectiva, puede resultar algo complicada, sobre todo para los principiantes. Sin embargo, la efectividad de su empleo hace que sea necesario que todo aspirante a diseñador web conozca el funcionamiento y consiga, mediante la práctica, el dominio de este sistema. Se trata de los denominados diseños elásticos. Tal como su nombre indica, este tipo de diseños tiene la capacidad de adaptarse a diferentes resoluciones de pantalla.

El principio de funcionamiento es bastante sencillo, aunque llevarlo a la práctica puede resultar bastante más complicado. Se trata de basar las dimensiones de los diferentes elementos en porcentajes. Esto quiere decir que si le damos a una caja un ancho de 20%, esta ocupará un espacio igual al referido porcentaje. De esta forma, cada uno de los elementos podrá verse en el mismo lugar sea cual sea la resolución de la pantalla. La siguiente captura de pantalla pertenece a un sitio web que emplea este tipo de diseño:


Click on the image to view it in full size.

Pasos básicos a seguir para hacer un diseño elástico
El primer paso es seleccionar la resolución de pantalla mínima para la cual se diseñará la página web. Teniendo en cuenta los datos estadísticos presentados más arriba, lo conveniente es que se diseñe para 1024 x 768 pixeles. Una vez realizado el layout, comenzamos a proceder tal como haríamos para realizar un diseño de dimensiones fijas, solo que debemos establecer las dimensiones de las cajas y las imágenes en porcentajes. Esta es el secreto de los diseños elásticos. Sin embargo, queda un aspecto importante para resolver: las fuentes.

El problema de las fuentes es que no es posible o muy dificultoso el empleo de porcentajes para establecer su tamaño. En este caso, lo conveniente es el uso de una unidad llamada “em” cuya medida está relacionada con la altura de la fuente empleada. Como 1 em es igual a la altura de la fuente, su dimensión real dependerá del tamaño del elemento padre. Por ejemplo, si establecemos en el “body” un tamaño de fuente, 1 em será igual a al tamaño determinado, mientras que 1.2 em será un 20% mayor y 0.8 em será un 80% del tamaño de la fuente original. Esta unidad de medida, puede ser empleada en otros elementos, aunque su uso más frecuente está relacionado con el tamaño de las fuentes.

Conclusión
Siempre debemos pensar en nuestros futuros usuarios a la hora de comenzar un diseño web. Esto implica necesariamente pensar que no todos emplean los mismos ordenadores ni los mismos monitores, lo que hace que no todos puedan ver del mismo modo un sitio diseñado con parámetros fijos. Es bastante frustrante abrir un sitio y ver que no se encuentra diseñado para que nuestro equipamiento lo muestre en forma correcta. Un visitante conforme puede volver.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 10 | 2:32 PM
Elementos de diseño web: la línea

El diseño web se encuentra compuesto por varios elementos, cuya procedencia y destino son variados y todos ellos son parte importante de todo diseño. La línea, la forma, el color, la textura y la tipografía hacen que cada diseño se vea en una forma particular y participan de la idea general que se quiere dar.

Cada uno de estos elementos puede colaborar en el mensajes que se quiere transmitir. Todo elemento colocado en un diseño debe colaborar en la idea que se desea transmitir. La línea, como cualquiera de los demás elementos, debe estar acorde con el resto del diseño, de forma tal que se acompase con la idea.

A pesar de la simpleza de la línea, este elemento es esencial en todo diseño y por sí misma puede transmitir sentimientos e ideas, lo que hace que pueda formar parte del mensaje general. Veamos algunos ejemplos.

En la vida cotidiana recibimos muchos mensajes transmitidos a través de las líneas, como señales de tránsito, alertas y avisos. Las siguientes imágenes son una muestra de ello, las que seguramente todos conocemos y pocas veces somos capaces de advertir que se trata de sencillos mensajes transmitidos a través de líneas.

En los símbolos que aparecen en la imagen anterior, podemos ver símbolos nacionales (o de idiomas), matemáticos, astrológicos, religiosos, señales de tránsito y símbolos monetarios, todos los cuales son fácilmente identificables a pesar de estar compuestos por líneas, en su mayoría extremadamente simples. Para la mayoría de la gente estas simples líneas tienen un significado e inclusive pueden representar sentimientos.

En el diseño de páginas web, la línea adquiere además otras connotaciones, ya que pueden servir como elementos que contribuyan con la estructuración y organización, resaltado y destaque de diferentes contenidos, como veremos a continuación.

La línea en la estructura del diseño
La separación de los contenidos es esencial para conseguir claridad en el mensaje. Dos contenidos de características similares que se encuentren próximos, corren el riesgo de perder visibilidad, lo que requiere que el diseñador separe estos elementos. Una de las formas más simples pero a la vez más efectivas de hacer esto es a través de líneas.

La estructura de una página web puede ser marcada con mucha mayor claridad cuando se emplean líneas para separar los diferentes componentes de la estructura. En la siguiente captura de pantalla podremos ver un ejemplo claro:


Click on the image to view it in full size.

En este excelente diseño, la simplicidad es el motivo principal. Para conseguir resaltar algunos elementos y separar otros, el diseñador empleó líneas horizontales, algunas sencillas y otras dobles, consiguiendo un efecto minimalista que hoy en día se encuentra de moda. En otros diseños podremos apreciar también el empleo de líneas verticales para separar columnas o como bordes para separar y estructurar los diferentes contenidos.

Empleo de líneas para resaltar objetos
A la hora de resaltar o destacar algunos contenidos, existen muchas formas de hacerlo. Una de ellas es la utilización de líneas, que pueden simplemente estar subrayando un texto o formando un contorno en torno a cualquier contenido. Es una práctica bastante habitual, en la que los diseñadores seleccionan un tipo de línea para conseguir un contraste con el resto de los contenidos de la página.

Hemos seleccionado la siguiente imagen (una captura de pantalla) para mostrar como un diseñador web ha empleado líneas para conseguir que algunos elementos de esta página se destaque del resto de los contenidos.


Click on the image to view it in full size.

En la página que hemos tomado como ejemplo, en la parte superior encontramos un sencillo menú de navegación. Encima de cada uno de los links que allí encontramos, puede apreciarse una línea bastante ancha de color, cuya finalidad es atraer la atención de los usuarios hacia el menú y facilitar de esta forma la navegación.

En el mismo ejemplo, cada una de las imágenes que se muestra en la página se encuentra bordeada por una gruesa línea blanca, que provoca una clara separación visual del fondo. De no haberse empleado este recurso, la visibilidad de las imágenes habría disminuido considerablemente, afectando la estética general de la página.

Como emplear los atributos de las líneas
Como elemento simple que es, la línea posee pocos atributos, por lo que las variaciones que pueden aplicarse en ella son pocas. Sin embargo, el hecho de que la línea sea un elemento simple, la variación de cualquiera de sus atributos genera diferencias muy notorias y, por consiguiente, efectos muy disímiles.

Longitud y grosor de la línea

A la hora de seleccionar una línea para incluir en un diseño, podremos optar por diferentes longitudes para conseguir el mismo efecto, pero con una notable variación estética. Una línea que atraviese la página en todo su ancho puede ser empleada para dividir en secciones o separar el encabezado del resto de la página, mientras que una línea con iguales atributos, excepto porque su longitud es mucho más corta, puede ser empleada para determinar el final de un texto.

Lo mismo sucede con los grosores. En el ejemplo siguiente, una línea gruesa tiene un cometido diferente del resto de las líneas que en este diseño podemos apreciar. La línea gruesa es la que se emplea para separar al encabezado de la página del resto de los contenidos, mientras que líneas más finas separan los diferentes contenidos entre si.


Click on the image to view it in full size.

El color de la línea

Al igual que otros elementos, el atributo color sirve en las líneas como elemento decorativo y como elemento diferenciador. El contraste es un principio de diseño que puede emplearse aún en aquellos elementos más simples que componen una página web, por lo que el contraste conseguido a través del color, puede hacer que ciertos elementos decorados o separados con líneas puedan obtener una diferenciación.

Tipo de línea

Las líneas pueden ser simplemente una secuencia de puntos ordenados, que en un golpe de vista identificaremos como una línea. Es el caso de las líneas punteadas o compuestas por guiones, empleadas con mucha frecuencia en el diseño de páginas web. Otro tipo de línea, aunque empleado con mucho menos frecuencia, es la línea irregular, como las que veremos en el ejemplo siguiente, acompañadas de líneas regulares:


Click on the image to view it in full size.

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 11 | 1:56 PM
Elementos de diseño web: la forma

Uno de los elementos de diseño web (al igual que en diseño gráfico y otros tipos de diseño) es la forma. Su importancia radica en la estrecha relación que tiene este elemento con el mundo real. Basta con mirar en nuestro rededor para notar que la forma es el elemento más fácilmente distinguible y el más abundante. Además, resulta mucho más sencilla la interpretación de los mensajes visuales que otros, y la forma es el de más sencilla captación de todos los elementos visuales.

Como forma nos referimos a la figura espacial de los cuerpos, por lo que necesariamente tiene dos o tres dimensiones. En el diseño web pueden representarse las formas en su estado natural a través de las imágenes, o emplearse representaciones abstractas de las mismas. Esto se logra gracias a la capacidad humana de abstraer. A pesar de que el diseño web tiene dos dimensiones, gracias a la utilización de luces y sombras un elemento de dos dimensiones puede brindar la sensación de un elemento de tres dimensiones o representarlo en forma abstracta.

La forma es empleada en muchas ocasiones como método de lograr una comunicación sencilla y de fácil interpretación. En el diseño web muchas veces es necesario transmitir mensajes en forma rápida, para lograr atraer la atención del usuario hacia ciertos puntos o darle a entender donde se encuentran determinados objetos con facilidad.

El empleo extendido de la forma por parte de diseñadores y programadores ha hecho que muchos símbolos e íconos basados en la forma sean de comprensión sencilla, facilitando de esta manera el acceso de los usuarios a los diferentes medios, opciones y servicios que contiene la web.

Tipos de forma y su utilización en el diseño web
Las formas pueden dividirse en tres tipos básicos: las formas geométricas, las formas naturales y las formas abstractas. Las formas geométricas es en lo primero que pensamos cuando se habla de formas. No son frecuentes en la naturaleza dada la regularidad de las mismas. Los cristales son uno de los pocos ejemplos de formas geométricas naturales. El empleo de la forma geométrica en todo tipo de diseño es muy frecuente, dado que generalmente se trata de objetos simétricos y regulares, lo que brinda a quien lo contempla, sensación de seguridad, orden y prolijidad. Las formas geométricas más usuales en el diseño web son el cuadrado, el rectángulo, el triángulo y el círculo. La página que mostramos a continuación es un ejemplo de empleo de la forma geométrica.


Click on the image to view it in full size.

Las formas naturales también tienen un empleo frecuente, ya que permite una rápida asociación con un mensaje. La mayoría de las formas naturales empleadas en el diseño web son extraídas de imágenes. La siguiente página web nos muestra un ejemplo de ello:


Click on the image to view it in full size.

Las formas abstractas constituyen el terreno menos explorado, aunque en los últimos años se ha producido un incremento en su empleo, gracias a la aparición de nuevas tendencias en el diseño, asociadas a tendencias artísticas como el arte abstracto o el pop art. Dentro de esta categoría también se incluyen aquellos elementos creados para representar algo sin emplear una imagen del mismo.

Un claro ejemplo de esto son los íconos, que sirven para que los usuarios reciban el mensaje de que desde allí se puede acceder a un contenido, mediante una representación gráfica basada en una forma. El siguiente es un ejemplo de utilización de formas abstractas:


Click on the image to view it in full size.

En este ejemplo, el logotipo está formado por una forma que es la abstracción de un corazón. Si bien todos sabemos que se trata de un corazón, en realidad no es la imagen de un corazón, sino de una representación abstracta del mismo. Muchas formas abstractas son símbolos empleados universalmente y se las emplea para enviar a los usuarios un mensaje de fácil comprensión.

Utilidad de la forma en el diseño web
Como cualquier otro elemento de diseño web, la forma puede emplearse de muchas formas y en múltiples funciones. El único límite con que cuenta el diseñador es el límite que tenga su propia imaginación.

La forma puede servir como método para agregar interés al diseño. La forma como elemento decorativo es un excelente recurso y puede utilizarse como fondo, como decoración de espacios en blanco o para ilustrar contenidos. La repetición de una o varias formas da lugar a motivos que pueden ser empleados como fondo de diseño. Este es el fundamento de los pattern o fondos decorativos.

También sirve como forma de mantener el interés. Si, por ejemplo, una página web debe presentar un texto extenso, la utilización de formas como elemento decorativo puede hacer que el lector no pierda el interés al extenderse en la lectura. Las listas no ordenadas, llevan al inicio de cada ítem algún tipo de forma. Lo más frecuente en este tipo de decoraciones es el uso de formas geométricas, aunque también pueden emplearse formas naturales (una hoja, una flor, un animal, etc.).

Otra función aplicable a la forma es la de organizar o separar elementos. La separación entre contenidos y secciones se ve enormemente enriquecida con la aplicación de formas. Así el diseñador puede organizar la página en secciones y separar los elementos entre si, algo que resulta imprescindible para brindar, además de dar un aspecto ordenado, una división entre los diferentes elementos que permita una mejor visibilidad de los mismos.

Algo que resulta imprescindible en todo buen diseño, es dirigir la vista del usuario por las secciones que el diseñador entiende que son más importantes. La utilización de formas como elemento para dirigir la vista del usuario es muy recurrente en el diseño de páginas web, ya que los atributos de la forma son ideales para llamar la atención de los lectores hacia aquellas secciones de mayor interés. La colocación de una forma colorida y llamativa junto a un texto, dirigirá fácilmente la atención del usuario hacia el mismo.

La forma tiene una serie de atributos que permiten al diseñador explorar una gran cantidad de posibilidades, tanto desde el punto de vista decorativo como medio para entregar un mensaje al usuario. Esto se debe en parte a que tenemos la tendencia natural a interpretar mejor los contenidos visuales. De todos los elementos de diseño, la forma es el que mayor cantidad de posibilidades ofrece al diseñador.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 12 | 11:41 AM
Estructura de páginas web: Marcado semántico de contenidos

El orden en la estructura de un sitio web es tan importante como el estado de orden en que se encuentre una habitación. Al comienzo, cuando los muebles y objetos que se encuentran en la habitación son escasos, no nos ocasionará mayores dificultades encontrar y emplear cualquiera de los objetos que hay en ella. Sin embargo, en la medida que la cantidad de objetos que se encuentren en la habitación crezca, las dificultades serán cada vez mayores hasta que sea prácticamente imposible acceder o utilizar un objeto.

Lo mismo sucede con las páginas web. Cuando los sitios son pequeños, la falta de una estructura ordenada posiblemente pueda pasar desapercibida o los inconvenientes originados sean menores. Pero a medida que el sitio crece, la aparición de nuevos archivos, contenidos, secciones, formularios, etc., hará haciendo cada vez más compleja la funcionalidad del sitio.

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

Marcado semántico de los contenidos
Si observamos un libro, veremos en él una estructura lógica ordenada del contenido del mismo. Esto se consigue mediante la aplicación de algunos elementos que permiten al editor hacer que los contenidos se vean en un determinado orden que facilita el acceso a los mismos por parte de los lectores.
Del mismo modo, las páginas web se encuentran escritas en lenguaje HTML, que tiene una serie de etiquetas que permiten clasificar y ordenar en diferentes niveles y estructuras al contenido. Esto es lo que denominamos el marcado semántico de los contenidos.

La aplicación de etiquetas HTML en 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.:

El orden que se impone a través de las diferentes etiquetas HTML corresponde a una jerarquización de los diferentes contenidos. Así por ejemplo, la frase contenida en una etiqueta h1 es la más importante de todo el contenido, ya que define al contenido mismo, por ser su título. El HTML fue pensado desde su origen como una herramienta para jerarquizar los contenidos web. En el ejemplo anterior, vemos un código HTML donde se ha dado una jerarquización a textos de ejemplo. El resultado es el siguiente, en el que se ve como diferentes partes del contenido adquieren diferentes jerarquías gracias al empleo de las etiquetas HTML:

Título principal o de primera magnitud
Título secundario de segunda magnitud
Título de tercera magnitud

Párrafo o división de texto que termina en un punto y aparte, es decir, diferente de la oración o enunciado que termina en un punto y seguido. Un párrafo, como es este caso, puede estar formado por varias oraciones diferentes.

Lista sin orden
• Cada ítem no se encuentra numerado
• Se emplea cuando el contenido no tiene por qué tener un orden determinado

Lista ordenada
1. Los ítems aparecen numerados
2. Se usa cuanto el contenido tiene un orden específico

Esta jerarquización, además de facilitar la lectura de los contenidos por parte de los usuarios, posibilita a los motores de búsqueda encontrar la información más relevante para clasificar y ordenar la página web, lo que tiene gran importancia para el posicionamiento de la misma.

Estructura del documento HTML o XHTML
Cada documento HTML o XHTML debe contar con los siguientes elementos:
• Estructura del documento en HTML (<head>, <body>, <div>, <span>, <p>, etc.)
• Contenido del documento (principalmente textos, pero también imágenes, videos, música, etc., que se encuentran alojados en el propio sitio).
• Marcado semántico de los contenidos, para dar jerarquía a cada uno de los contenidos, darle una estructura determinada y transmitir un significado lógico.
• Presentación visual de los contenidos (empleando hojas de estilo en cascada o CSS), para que los contenidos luzcan de una forma determinada.
• Enlaces a otros contenidos, propios de la página o externos.
• Aplicación de elementos interactivos en otros lenguajes (javascript, ajax, asp, etc.).

Estructura del documento
Todo documento HTML o XHTML está dividido en dos partes fundamentales. Esta división es invisible para los usuarios, los que reciben únicamente lo que se encuentra contenido en una de estas divisiones. La primera es el encabezado, que se encuentra enmarcado por las etiquetas <head> y </head>, cuyo contenido no es visible para los usuarios, pero que representa una parte fundamental para el correcto funcionamiento del sitio, ya que tiene toda la información necesaria para los navegadores y los motores de búsqueda.

En el encabezado de la página se declara la norma de código en la que se encuentra escrito el documento (HTML o XHTML, la versión de los mismos, si su aplicación es estricta o transicional, etc.), el tipo de dispositivo para el cual fue creado (navegador web, teléfono móvil, iPod), contiene el título del documento, los enlaces a las hojas de estilos o la hoja de estilo en si, enlaces a scripts o los scripts mismos en otros lenguajes de programación, además de otras informaciones importantes para los navegadores o los motores de búsqueda, como el lenguaje de los contenidos (español, inglés, etc.), descripción, palabras clave, etc.

El cuerpo del documento es donde se encuentra la parte visible del mismo, o sea, donde se encuentran los contenidos destinados a los usuarios del sitio. Es en el cuerpo del documento donde se produce la estructuración del contenido mediante el empleo de las etiquetas HTML. Además de la jerarquización de los contenidos, se realiza aquí, mediante el empleo de CSS, la estructuración visual de la página y la presentación visual de los contenidos, es decir, dónde y cómo se verán cada uno de los contenidos.

Marcado semántico del contenido
Cuando el diseñador toma los contenidos y los introduce en el cuerpo del documento, mediante el empleo de etiquetas HTML o XHTML marca la estructura del contenido y jerarquiza los mismos.

Mediante el empleo 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 empleo de la etiqueta <p> hará las divisiones necesarias en el texto, y dará énfasis a las partes más importantes del mismo mediante el uso de etiquetas elaboradas para esa finalidad, como <strong> y <em>.

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


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 13 | 1:21 PM
Estructura de páginas web: Cómo hacer para que lo importante aparezca primero

Cuando nos encontramos optimizando una página web para los buscadores, una de las cosas que debemos tener en cuenta es que aquellos contenidos de mayor importancia deben ser los primeros en aparecer, no solo visualmente, sino además en el código HTML. Esto está relacionado con el funcionamiento de los robots de búsqueda.

Los buscadores necesitan clasificar las páginas web de acuerdo a su contenido, lo que implica necesariamente un análisis de los mismos. Pero estos robots que hurgan en las páginas web no analizan la totalidad del código de cada página, sino que tienen un límite y solo analizan los primeros contenidos.

Es por ello que resulta muy importante que las páginas web cuenten dentro de sus primeras líneas aquellos contenidos que resulten más relevantes. Sin embargo, esto que parece sencillo, muchas veces choca con la intensión de los diseñadores de maquetar la página siguiendo cierto orden.

Por ejemplo, si un diseñador desea que la página tenga una cabecera, dos columnas a la izquierda y el cuerpo principal con el contenido a la derecha, podría parecer que es imposible hacer que el contenido principal aparezca entre las primeras líneas del código HTML. Sin embargo, empleando algunas características de CSS, esto es posible.

Cómo maquetar una página para que el contenido importante aparezca primero
A continuación mostraremos como es posible hacer que los contenidos más relevantes de la página aparezcan en los primeros lugares del código HTML, empleando para ello el float de CSS. Sin entrar en demasiados detalles, ya que no es la finalidad de este artículo explicar como funciona la propiedad float, podemos resumir que esta propiedad hace que el elemento salga del flujo del HTML para posicionarse a la izquierda o derecha de otros elementos adyacentes, alterando el orden en que se encuentran escritos en el código HTML.

Para poder explicarlo de mejor forma, escribiremos un código de ejemplo y su resultado visual, que podrán probarlo utilizando el mismo código escrito en bloc de notas, guardando el archivo como .html o .htm y abrirlo en su navegador para visualizar los resultados.

Código básico
Lo primero que haremos será ordenar los contenidos dentro del HTML en el orden que deseamos. Luego, empleando CSS le daremos el orden visual. El código de ejemplo es el siguiente:

Quote
<html>
<head>
<title>Página de ejemplo</title>
<!-- Vínculo al archivo CSS -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h3>Cabecera</h3>
</div>
<div id="contenido">
<div id="caja">
<div id="primero">
Contenido principal
</div>
<div id="segundo">
Contenido de segundo orden
</div>
</div>
<div id="tercero">
Contenido de tercer orden
</div>
</div>
<div id="pie">
Pie de página
</div>
</div>
</body>
</html>

Como se puede apreciar, además del código HTML, deberemos escribir, en otro archivo aparte, una hoja de estilo independiente, a la que llamaremos estilo.css y que contendrá el código CSS. En este código HTML podemos ver que el contenido principal de la página, se encuentra inmediatamente después de la cabecera, es decir, en los primeros lugares del código.

En el archivo CSS, daremos los primeros atributos a los diferentes div’s, de forma que la página adquiera una forma visible y donde los contenidos aparezcan separados. El siguiente código es el que aparecerá en el archivo estilo.css:

Quote
/* Archivo base css de ejemplo */
/* Lo siguiente se emplea para resetear los valores por defecto de los navegadores */
html, body { margin:0; padding:0; border:none; }
/* Definición de los estilos básicos */
/* Contenedor general. Se determina el ancho y los márgenes automáticos */
#contenedor {
width:80%;
margin: auto;
}
/* Estilo de los otros contenedores */
#cabecera, #pie {
background: #cbcbcb;
}
#pie {
clear: both;
}
#primero {
background: #fb9f9f;
}
#segundo {
background: #fdc08b;
}
#tercero {
background: #fdeb8b;
}
#cabecera, #pie, #primero, #segundo, #tercero {
padding: 1.25em 2%;
margin: 0.4em 0;
}
#cabecera{ margin-bottom: 0; }
#contenido { padding: 0; }

Con esto, ya es posible visualizar la página, la que encontraremos que se encuentra diagramada en una única columna y los diferentes contenidos aparecen alineados en forma vertical. Esto se debe a que el proceso de maquetación aún no ha comenzado, y la página se verá de la siguiente manera:

Empleando el ejemplo anterior, si deseáramos maquetar la página con una columna a la izquierda y el contenido principal a la derecha, deberíamos dejar el tercer contenedor debajo de los anteriores y ocupando todo el ancho de, para lo que podríamos escribir, debajo del CSS básico que ya hemos escrito, las siguientes líneas de código (debe observarse que en cada uno de los ejemplos que daremos, el código HTML no será modificado).

Quote
/* Diseño a dos columnas con el contenido principal a la derecha */
#primero {
float: right;
width: 65%;
margin-left: 1%;
display: block;
height: 190px;
}
#segundo {
float: left;
width: 26%;
display: block;
height: 190px;
}
#tercero {
clear: both;
width: 96%;
}

La siguiente imagen es el resultado del código descrito. En la caja de color rosa aparece el contenido principal, aunque visualmente no ocupe esa posición, ya que la columna de la izquierda aparece antes.

A continuación veremos un ejemplo donde la columna aparece a la derecha y el contenido principal de la página estará a la izquierda:

Quote
/* Diseño a dos columnas con el contenido principal a la izquierda */
#primero {
float: left;
width: 65%;
margin-right: 1%;
display: block;
height: 190px;
}
#segundo {
float: right;
width: 26%;
display: block;
height: 190px;
}
#tercero {
clear: both;
width: 96%;
}

Teniendo en cuenta que los contenidos se encuentran jerarquizados en tres escalas diferentes, es posible organizarlos en tres columnas, como en los dos casos que exponemos a continuación, donde las dos columnas se colocan sobre uno de los lados (en un ejemplo a la derecha y en el otro a la izquierda) y el contenido principal en el opuesto:

Quote
/* Diseño a tres columnas con el contenido principal a la izquierda */
#primero {
float: left;
width: 50%;
margin-right: 1%;
display: block;
height: 260px;
}
#segundo {
float: left;
width: 18%;
margin-right: 1%;
display: block;
height: 260px;
}
#tercero {
float: left;
width: 18%;
display: block;
height: 260px;
}

Quote
/* Diseño a tres columnas con el contenido principal a la izquierda */
#primero {
float: right;
width: 50%;
margin-left: 1%;
display: block;
height: 260px;
}
#segundo {
float: right;
width: 18%;
margin-left: 1%;
display: block;
height: 260px;
}
#tercero {
float: right;
width: 18%;
display: block;
height: 260px;
}

La forma en que se decida maquetar la página, no impide en modo alguno que podamos colocar los contenidos en el orden que creamos más conveniente. Empleando adecuadamente las propiedades CSS, es posible establecer el diseño deseado sin necesidad de realizar grandes modificaciones en el código HTML.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 14 | 1:09 PM
Estructura de una página web: Estructura del diseño

¿Qué es un sitio web? Un sitio web es una serie de páginas individuales, que pueden o no tener alguna conexión temática. Sin embargo, tendemos a pensar en los sitios web como si se tratara de una unidad. Esto está sustentado en base a dos grandes criterios, que son los enlaces que permiten la formación de cierta cohesión, y la unidad visual, que en definitiva es lo que brinda al usuario la sensación de unidad del sitio.

Para hacernos una idea de estos conceptos, imaginemos una colección de libros de una editorial. Estas colecciones suelen estar formadas por libros con dimensiones y encuadernación idénticas, para 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 disímiles. 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 un sitio determinado.

Al igual que en otras disciplinas, el diseño web ha ido evolucionando hasta llegar a ciertos criterios estándares. Desde el punto de vista del usuario, tiene la ventaja hacer predecibles a los sitios, permitiendo 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 regla general esta importante parte del diseño ya se encuentra prácticamente resuelta.

Estructura del diseño web
La gran mayoría de las páginas web tienen divisiones o secciones similares. Lo usual es que, en la parte superior de la página se encuentre un encabezado, seguido de un cuerpo principal que suele 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. La imagen siguiente es un esquema típico de una página web. Se debe tener en cuenta que este esquema sufre variaciones, aunque normalmente son pequeñas.

El encabezado
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. Aun cuando el sitio tenga grandes diferencias en estructura y contenido entre sus páginas, si mantiene una unidad en su encabezado los usuarios percibirán la sensación de unidad que el sitio requiere.

El encabezado es una faja horizontal que ocupa todo el ancho de la página en la parte superior de la misma. A la izquierda del encabezado suele ubicarse el logotipo del sitio, que ocupa un área importante dentro del mismo, aunque suelen haber diferencias importantes de un sitio a otro. Esta imagen debe tener un enlace a la página principal del sitio, ya que es uno de los estándares más respetados por los diseñadores y una de las formas que tienen los usuarios de volver al inicio.

Desde el final del logotipo, ocupando el centro y la zona derecha del encabezado, frecuentemente se sitúan una serie de franjas de diferentes grosores. En la faja superior, se encuentran algunos enlaces generales de la página, como acceso a usuarios registrados, registros de usuarios nuevos, acceso a perfiles, salidas, etc., así como ayudas y buscadores internos. La zona más ancha generalmente se encuentra ocupada por el título de la página, nombre de empresa, slogan, etc.

La zona inferior del encabezado se emplea para ubicar los links de navegación y las etiquetas de navegación, uno de los elementos más importantes a la hora de ayudar a los usuarios a encontrar 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; por ejemplo, cuando el sitio está dividido en secciones, uno de ellos está destinado a estas divisiones, mientras que el otro sirve para navegar dentro de cada sección, aunque pueden emplearse otros métodos de clasificación de los contenidos y por consiguiente, otros métodos de organizar la navegación interna.

Otra forma de colaborar con la exploración del sitio por parte de los usuarios es la instalación de un buscador interno. También es aquí donde los usuarios buscan este tipo de elementos, ya 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 alguna de las columnas laterales. A continuación, mostramos un ejemplo de la aplicación de un buscador interno en el encabezado.

Columnas de exploración
El cuerpo principal de una página web, en el diseño moderno se le encuentra dividido. Una de estas divisiones, consiste una o dos columnas de exploración. Este tipo de columnas, se le emplea para ubicar algunos elementos importantes de la página, como enlaces externos, navegación interna, publicidad, informaciones adicionales y contenidos secundarios.

Cuando se emplea una única columna, es indistinto para los usuarios, de acuerdo a estudios sobre el comportamiento de usuarios de sitios web, ya que su ubicación no plantea dificultad alguna. En el caso de que el diseño requiera el empleo de dos columnas, pueden ubicarse una a cada lado del cuerpo principal 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 la información de contacto en este tipo de columnas, por lo que resulta uno de los mejores lugares para ubicar los datos de contacto. A continuación, vemos algunos ejemplos de columnas de exploración:

Área de contenido
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 encuentren los contenidos principales de la página, el diseño depende en gran medida de los mismos, sobre todo en lo que respecta al tipo de contenidos, la cantidad, la disposición que se desea emplear, etc. Sin embargo, hay que considerar algunas reglas importantes y que, salvo muy raras ocasiones, deben ser seguidas al pie de la letra.

En la parte superior de esta área se debe emplazar el título entre etiquetas <h1>, ya que este título tiene las palabras clave que los usuarios luego emplearán en sus búsquedas y será de gran importancia para que los buscadores indexen la página en forma correcta. Además, los usuarios buscarán en este punto el título de lo que se expone, siendo de extrema importancia que el mismo sepa a qué contenidos está accediendo.

En caso de que los contenidos sean muchos y haya que hacer desplazamientos importantes hacia abajo, es de mucha utilidad colocar al final del área algún tipo de salto al inicio, para evitar que el usuario deba realizar grandes desplazamientos. En el caso de que se empleen varias páginas para albergar contenidos relacionados, tanto al inicio de la página como al final de la misma es de gran utilidad colocar un navegador de páginas (del tipo Página anterior 1 – 2 – 3 … Página siguiente) para que la navegabilidad entre ellas sea sencilla.

Pie de página
Finalmente, debajo de todas las secciones, se coloca una faja horizontal en cuyo interior se colocan algunos elementos importantes, como el autor, copyright, acceso a diversas políticas del sitio y asuntos legales, datos de contacto, enlaces a sitios relacionados, enlaces internos, etc.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 15 | 12:48 PM
8 Consejos para el diseño de un buen layout o estructura web

Al crear un diseño de web, uno de los aspectos más importantes es el diseño del layout (estructura). Mucha gente tiene en cuenta la importancia de hacer un buen layout y como hacerlo (CSS, tablas, frames, etc), pero los conceptos básicos de diseño web son a menudo ignorados por completo.

El espacio y el espacio en blanco en el layout
1. Mantén una resolución de pantalla como objetivo, pero no te cierres: Aunque la mayoría de los usuarios se han alejado hace tiempo de la clásica resolución de 800×600, no la pierdas de vista cuando hagas el layout o estructura de tu diseño web, procura que tu web también se vea bien en ella aunque diseñes para resoluciones de 1024×768 o mayores. Si no tienes en cuenta resoluciones de navegador inferiores puedes estar dejando de lado a un porcentaje de usuarios nada despreciable.

2. Utiliza todo el espacio disponible, pero se flexible: El uso de un tamaño relativo (fluido) en determinadas secciones del diseño de tu páginas web (por ejemplo en la zona principal del contenido), de modo que se expanda y contraiga para adaptarse a la ventana del navegador, lo hace más usable, mejorando la experiencia del usuario.

3. Usa el color para definir los espacios: si quieres diseñar una página con anchos fijos, ¿por qué no centrar la web en la pantalla del navegador y mejorar así su presentación? Mira el ejemplo que se propuso en una guía anterior, ¿qué te parece 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 web con los cambios de resolución que se producen de un usuario a otro. Las grandes resoluciones (por encima de 1024×768) mostrarán una parte de la ventana de navegación con el color de fondo que hayas elegido, mientras que los navegadores con resoluciones más pequeñas mostrarán menos o ningún color de fondo.

Imágenes y gráficos en tu estructura web
4. Alinea las imágenes: 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, 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 CSS:

Quote
img {
display: block;
margin: auto;
}

5. Proporción de los gráficos y texto en una página: Es fácil dejarse llevar por la gran cantidad de imágenes y animaciones disponibles, pero si te pasas añadiendo imágenes a tu web, puedes hacer que resulte muy difícil de leer o incluso molesto.

Ancho del texto
6. Piensa en el ancho del texto: con esto me refiero a cuántas palabras se muestran como promedio en una línea de texto. La mayoría de personas pueden leer cómodamente alrededor de 7 a 11 palabras en una línea. Con más palabras el texto se vuelve difícil de leer, con menos se vuelve incoherente y distraen los saltos de línea.

7. No te recomiendo que centres el texto: Una de las técnicas que primero se aprenden cuando se construyen páginas web es el uso de la etiqueta center (para centrar estructuras), y lo típico es empezar a centrar todo sin medida. Sin embargo, centrar un texto en HTML y que quede bien es complicado, y además conseguir que se lea con facilidad mucho más. Un consejo, no centres el texto, utiliza el justificado o mejor, simplemente no lo toques (déjalo alineado a la izquierda como viene por defecto). Prueba con justificar el texto, tal vez sacies tu ansia por centrar y centrar:

Quote
p {text-align: justify}

Alineación del layout
8.
Cuida la alineación de cada parte de tu sitio: La mayoría de los desarrolladores web, cuando piensan en la alineación piensan en el atributo align o en la propiedad CSS float y similares. Pero la alineación de los elementos de la página es más que justificar o no el texto o flotar un menú a la izquierda o a la derecha. La alineación proporciona el marco estructural de un diseño web. La alineación puede afectar a la experiencia del navegante en tu web y a la efectividad de la misma en lograr sus objetivos.

A continuación tienes los ejemplos más típicos de alineación en los layouts. Mira estos ejemplos y juzga por ti mismo cuál es el tipo de alineación para la estructura de tu sitio web más adecuado (o que más te gusta):


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Configuración del diseño de otros elementos de la web
  • Página 1 de 3
  • 1
  • 2
  • 3
  • »
Búscar: