Entradas etiquetadas ‘diseño’

Avanzada CSS Propiedades del texto

13 de Septiembre de 2010

Hay muchas propiedades CSS para usar en las hojas de estilo. Estas son las propiedades del texto y cómo usarlas.

Propiedades del texto

word-spacing – define la cantidad de espacio entre las palabras.

  • Word-spacing: normal;

hace el espacio entre palabras.

  • Word-spacing: 15 mm;

Añade 15 mm de espacio entre las palabras.

Especificar la longitud, la altura de la fuente con ems, píxeles, picas, puntos, pulgadas, centímetros o milímetros.

espaciado entre letras - define la cantidad de espacio entre cada letra. Esto generalmente se denomina “seguimiento en el diseño de impresión.

  • Espaciado entre letras: normal;

permite el seguimiento normal para esta fuente.

  • Espaciado entre letras: 1 mm;

Añade 1 mm entre cada letra.

  • Espaciado entre letras:-1px;

Reduce el seguimiento de 1 píxel entre cada letra.

Especificar la longitud, la altura de la fuente con ems, píxeles, picas, puntos, pulgadas, centímetros o milímetros.

text-decoration - define la decoración del texto.

  • Text-decoration: none;

Quita todas las decoraciones sobre el texto. (Utilizado en <a> etiquetas a quitar el subrayado.)

  • Text-decoration: overline;

Pone una línea sobre el texto.

  • Text-decoration: underline;

Pone una línea debajo del texto.

  • Text-decoration: line-through;

Pone una línea a través de la línea media del texto.

  • Text-decoration: blink;

Hacer un abrir y cerrar de texto dentro y fuera. (No se admite en los navegadores que no sean derivados de Netscape.)

texto transformación - define el caso del texto.

  • El texto-transform: capitalizar;

Realiza la primera letra de cada palabra en mayúscula.

  • El texto-transform: mayúsculas;

Transforma el texto en mayúscula.

  • El texto-transform: minúsculas;

Transforma el texto en minúsculas.

  • El texto-transform: none;

Elimina todas las transformaciones del texto.

texto-align – define cómo el texto se alineará en la página.

  • El texto-align: left;
  • El texto-align: right;
  • El texto-align: center;
  • El texto-align: alcance;

Alinear el texto para que quede al ras con ambas partes del documento.

text-indent define la cantidad de la primera línea del texto que debe tener una sangría.

  • El texto-guión: 15mm;
  • El texto-guión: 5%;

Especifica la longitud de la fuente con ems, píxeles, picas, puntos, pulgadas, centímetros o milímetros.

line-height
define la cantidad de espacio entre líneas de texto. Esto se llama normalmente líder en el diseño de impresión.

  • Line-height: 1.5;

Sin una unidad, el número se supone que se multiplicará por la altura de la línea estándar para esta fuente.

  • Line-height: 5 mm;
  • Line-height: 10%;

Hay muchos más estilos, pero aquí ya tenemos algunos que podemos usar en nuestra hoja de estilos.

Avanzada CSS Propiedades de fuente

13 de Septiembre de 2010

Hay muchas propiedades CSS para usar en las hojas de estilo. Éstos son algunas de las características más populares de como usarlas.

Propiedades de la fuente

font-family – define la familia de fuentes que el texto debe mostrar en pulgadas (Nota: si el equipo que ve la página no tiene la fuente especificada, el navegador la intentará adivinar. Esto puede causar efectos extraños. Lo mejor es el uso normal  de fuentes, o fuentes genéricas.)

Para definir las familias específicas de la fuente, escribiremos los nombres de la familia en el orden que lo deseemos en la pantalla. Separe cada familia con una coma:

font-family: arial, ginebra, Helvetica, sans serif;

Para definir una familia de fuentes genéricas:

font-family: serif;

Las familias de fuentes genéricas incluidas en el sistema actual son:

  • Serif

font-family: serif;

  • Boton

font-family: sans-serif;

  • Monospace

font-family: espacio sencillo;

  • Cursiva

font-family: letra cursiva; ”

  • Fantasía

font-family: fantasy;

font-size - define el tamaño de la fuente. El tamaño de fuente puede ser especificado como un tamaño exacto, un tamaño relativo, con una longitud o un porcentaje (del espacio existente).

Para definir el tamaño exacto, simplemente especificar el tamaño en una de las siguientes medidas:

  • Ems

font-size: 13em;

  • Píxeles

font-size: 13px;

  • Picas

font-size: 13pc;

  • Puntos

font-size: 13pt;

  • pulgadas

font-size: 13IN;

  • centímetros

font-size: 13cm

  • milímetros

font-size: 13 mm

Hay siete tamaños estándar en los documentos HTML y XML, podemos definir su tipo de letra basado en los tamaños, así (texto estándar de tamaño medio):

  • Xx-small

font-size: xx-small;

  • X-small

font-size: x-small;

  • Pequeño

font-size: small;

  • Mediano

font-size: medio;

  • Grande

font-size: grande;

  • X-large

font-size: x-large;

  • Xx-large

font-size: xx-large;

Para definir el tamaño de letra en relación con el texto que lo rodea, podemos simplemente decir:

font-style - define si la fuente está en cursiva, oblicua, o normal.

  • Cursiva

font-style: italic;

  • Oblicua

font-style: oblicua;

  • Normal (por defecto)

font-style: normal;

font-variant - define si la fuente es normal o pequeña.

  • Small-caps

font-variant: small-caps;

  • Normal (por defecto)

font-variant: normal;

font-weight - define el grado de oscuridad o la luz del texto.

  • Negrita

font-weight: bold;

  • Audaz

font-weight: más audaces;

  • Más ligera

font-weight: más ligero;

  • 100

font-weight: 100;

  • 200

font-weight: 200;

  • 300

font-weight: 300;

  • 400

font-weight: 400;

  • 500

font-weight: 500;

  • 600

font-weight: 600;

  • 700

font-weight: 700;

  • 800

font-weight: 800;

  • 900

font-weight: 900;

  • Normal (por defecto)

font-weight: normal;

Avanzada CSS

13 de Septiembre de 2010

¿Cómo se crea en realidad una hoja de estilo?

Hay tres partes de una hoja de estilos:

  • Selector

el elemento o categoría y título de id a la que el estilo se aplicará

  • La propiedad

la información sobre cómo dar formato a la selección

  • Valor

el estilo concreto que debe aplicarse a la propiedad en el selector

Por ejemplo, si deseamos que todos los párrafos usen misma fuente, se utiliza el siguiente CSS:

p {
font-family : arial;
}

  • P

el selector. Todo el texto en el <p> / p> se ve afectado por este estilo

  • Font-family

la propiedad. Todos los textos tendrán la font-family cambiada

  • Arial

el valor. La fuente de la familia será “Arial”

Como se puede ver arriba, el formato de una declaración de estilo es:

selector {
property : value ;
property2 : value ;
}

Agrupe sus estilos para cada selector, juntos en llaves

{}

Luego separar la propiedad de los valores por dos puntos

:

Por último, al final de cada declaración de estilo con un punto y coma

;

(Nota: el punto y coma sólo se requiere para separar múltiples estilos, pero es una buena idea incluirlo en todo momento. A continuación podemos agregar más estilos.)

La selección es por lo general una etiqueta HTML, pero también podemos crear identificadores y clases. Estos tipos de selectores se utilizan cuando no se está seguro del estilo que vamos a utilizar. Por ejemplo, puede que quiera una clase de estilo  para “resaltar” el color de fondo a amarillo. No importará qué etiqueta se puso de relieve.

.highlight {
background-color : #ffff00;
}

Entonces, para usar ese estilo, establezeremos la clase en las etiquetas de HTML:

<h2> Este título se pone en relieve </ h2>

O simplemente podemos usar el

<span> </ span>

etiqueta para definir el texto exacto que se destacó.

Colores corporativos

1 de Agosto de 2010

Vamos a echar un vistazo a las paletas de colores de algunas empresas bien conocidas. Lo que es interesante es que muchas de estas gamas de colores se basan en paletas de colores muy monocromáticas con un solo acento de color. Esto puede ser una forma muy efectiva para resaltar elementos. Y como pueden ver, en las páginas de Apple y Adobe, se utilizan colores muy neutros como el gris o el negro como base principal de su gama de colores lo hace que los colores de las imágenes de su producto destaquen.
A continuación vamos a ver alguna de esas paletas.

Paleta Facebook

facebook

Colores:

  • # 3b5998
  • # 8b9dc3
  • # F7f7f7
  • # Dfe3ee

Descripción:

Paleta de color monocromático azul. La paleta de Facebook tiene un color de base muy popular de color azul y crea una paleta a su alrededor. Casi todos los colores en la página son de un color azul, incluso los grises del fondo tienen algún tinte azul.

Paleta MySpace

mySpace

Colores:

  • # 2358b8
  • # 82aad3
  • # 313246
  • # c9d0d6

Descripción:

Paleta de colores monocromáticos en azul. MySpace utiliza una paleta de color bastante oscuro en sus colores, pero todos se centran en el color azul. El fondo de la mayor parte de la página es de color blanco, que hace que el azul oscuro destaque más.

Paleta Youtube

youtube

Colores:

  • # D02525
  • # 595757
  • # 0033cc
  • # Ebebeb

Descripción:

Una combinación de colores bicromática utilizando dos de 3 colores triádicos – rojo y azul. YouTube se basa en la década de rojo y negro del mismo logotipo para ofrecer una imagen de marca  en la página. Pero también hay una gran cantidad de azul en todas partes.

Paleta Flickr

flirk

Colores:

  • # 0063dc
  • # Ff0084
  • # 999999

Descripción:

Flickr utiliza colores análogos, rosa y azul en su paleta para el logotipo. El gris es muy neutro y sirve para mostrar tanto el contenido de las páginas como el logotipo.

Paleta Adobe

adobe

Colores:

  • # Ff0000
  • # 343434
  • # 454545
  • # E9e9e9

Descripción:

La paleta de colores de Adobe es bastante llana – gris oscuro y rojo como acentuado. Los grises oscuros son muy neutrales y esta paleta funciona bien para resaltar los productos que tienen sus propios colores.

Paleta Apple

apple

Colores:

  • # 979797
  • # 666666
  • # Eeeeee
  • # 000000
  • # 0088cc

Descripción:

Apple apuesta por los grises neutros, negros y blancos para destacar la mayor parte de su página. Además, los grises monocromáticos hacen que los colores de los productos de Apple se destaquen aún más.

Paleta Microsoft

microsoft

Colores:

  • # 5ca5d8
  • # 013655
  • # F0f8fc
  • # 4e7dc2
  • # 007734

Descripción:

Microsoft tiene una paleta de azules y las utiliza para acentuar y poner relieve. Se trata de una paleta muy monocromática. Casi no hay blanco en la página, y lo blanco que hay se utiliza para hacer la navegación más fácil de leer.

¿Es la paleta de colores web del navegador realmente necesaria?

31 de Julio de 2010

¿Qué es una paleta de colores Web?
Uso de la paleta de colores del navegador es una opción segura que necesitamos cuando estamos creando una página Web o una imagen Web. Es especialmente importante que sepamos cuáles son las consecuencias de no usarla.

Por ejemplo, podríamos utilizar el color #dddddd para el fondo de una tabla. En el monitor probablemente se vmostraría como un gris claro neutro y agradable. Pero cuando lo viéramos en el monitor de un amigo, podría parecer muy diferente. Dependiendo de cómo interpretase su monitor el color podría parecer gris o podría verse verde o de algún otro color.

Esto se debe a que #dddddd no es un color con explorador seguro. Los colores seguros para el navegador son los 216 colores que se pueden ver en el PC de 8-bits y en los monitores de Macintosh y tienen el mismo aspecto, o casi el mismo. Si utilizamos la paleta de colores seguros para el navegador al menos sabremos que en todas las máquinas se verán iguales.

¿Qué es el tramado?
Cuando un monitor se encuentra con un color que no puede mostrar de forma nativa, trata de igualar de la mejor manera posible. Los monitores muestran elementos como puntos diminutos en la pantalla, y los colores nativos se muestran con todos los puntos del el mismo color. Aparece un color interpolado con algunos puntos como un color, otros puntos como otro color, y así sucesivamente para intentar igualar el color solicitado.

Hoy en día la mayoría de ordenadores vendidos se venden con monitores y tarjetas de video que pueden soportar millones de colores. Sin embargo, en muchos de estos sistemas el valor predeterminado es de 640×480 píxeles en la pantalla y 256 colores. Muchas personas no saben que pueden cambiar esta configuración, y mucho menos saben cómo hacerlo.

Los colores que funcionan bien en la mayoría de los navegadores
Si usas colores los que aparecen en esta página, tu página web se verá igual en los monitores que pueden mostrar 256 colores o más, en las plataformas Macintosh y PC.

colores_seguros

Páginas splash (intro). Pros y Contras

13 de Junio de 2010

¿Qué es una Página Splash?

Una página Splash es una página de introducción a su sitio Web antes de la página principal (home).
El usuario llega a esa página antes de que se le dé permiso de ingresar a la verdadera página principal.

Se caracterizan por ofrecer una o dos de las siguientes características:

  • Gráfico o logotipo
  • Animación o películas flash
  • Elección de la forma de entrar en el sitio (flash / no flash, etc)
  • Requisitos técnicos (navegador, versión, etc)

Las páginas Splash suelen ser muy populares, especialmente entre algunos diseñadores, ya que son una manera de mostrar sus habilidades en Flash y otras tecnologías en una sola página. Pero antes de salir corriendo a construir su propia página de bienvenida, debes considerar todos los pros y los contras.

Pros de páginas Splash

  • Las páginas Splash son de carga rápida, reciben toda la información rápidamente en la primera página sin necesidad de desplazarse.
  • Las páginas Splash se aseguran de que sus usuarios vean la animación flash al menos una vez.
  • Son una excelente manera de mostrar tu trabajo.
  • Las páginas Splash permiten a sus usuarios a elegir la tecnología del sitio que quieren.
  • Utilizan el servidor de logs para ver el desglose de sus clientes reales.

Contras de páginas Splash

  • La usabilidad de una página de bienvenida es completamente nula.
  • A muchos usuarios no les gustan las páginas de bienvenida y según estudios el 25% de los visitantes deja el lugar después de ver una página de ingreso.
  • Las páginas Splash rompen los motores de búsqueda. Dado que muchas páginas de bienvenida, solo incluyen una animación en flash no es posible la optimización para los motores de búsqueda y si se añade contenido a la página de comentarios puede ser penalizado por spamdexing.
  • La animación puede ser repetitiva. A los usuarios que hayan visto el flash mas de una vez, ya no les apetece volver a pasar por el de nuevo, pero si se ha olvidado de incluir la opción “saltar” no tendrán mas remedio que hacerlo y eso será doblemente molesto.


Mi Opinión de las páginas Splash

Me parecen molestas, y no creo que las ventajas de elegir el sitio que mejor se adapte a mi navegador sea mayor que el fastidio de pasar por ellas.
Relentifica y entorpece el proceso comunicacional, puede llegar a frustar al visitante (especialmente si es un visitante asiduo) y agrega un paso extra para que el usuario pueda llegar al contenido que busca de dicho sitio web.
Personalmente, no las recomiendo. Pero una vez que hayas revisado todos los pros y los contras, debes tomar su propia decisión.

Cuándo utilizar formato JPEG o GIF para imágenes Web

13 de Junio de 2010

Las imágenes GIF

Utilizaremos archivos GIF para las imágenes que tienen un número reducido de colores.
Los archivos GIF se reducen siempre a no más de 256 colores.  El algoritmo de compresión para los archivos GIF es menos complejo que para los archivos JPEG.

El formato GIF no es apropiado para imágenes fotográficas o imágenes con gradiente de colores por su número limitado de colores.

Imágenes JPEG

Utilizaremos imágenes JPEG para fotografías e imágenes que tienen millones de colores. JPEG utiliza un algoritmo de compresión complejo que le permite crear gráficos más pequeños aunque nos hace perder algo de la calidad de la imagen. A esto se llama una “pérdida” de compresión, porque parte de la información de la imagen se pierde cuando la imagen se comprime.

El formato JPEG no se adapta a las imágenes con texto, grandes bloques de color sólido, y formas simples con bordes nítidos. Esto es porque cuando la imagen se comprime,el guardado no es tan agudo como lo sería con otro formato.

Las imágenes PNG

El formato PNG se desarrolló como un reemplazo para el formato GIF. Los gráficos PNG tienen una tasa de compresión mejor que las imágenes GIF que dan como resultado imágenes más pequeñas que el mismo archivo guardado como un archivo GIF. Los archivos PNG ofrecen una transparencia alfa.

Las imágenes PNG y GIF no son muy adecuadas para las fotografías. Es posible obtener en torno al tema de bandas que afecta a las fotografías guardadas como archivos GIF con colores reales, pero esto puede dar lugar a imágenes muy grandes. El otro problema con PNG es que sus características especiales no están bien soportadas por Internet Explorer.

Aspectos básicos del diseño Web Colocación y Posición de los elementos.

6 de Junio de 2010

Cuando se comienza un nuevo diseño, no importa la metodología, estamos comenzando desde una página en blanco.
No hay nada en la página web – así que lo primero que haremos es poner algo en ella.

Pero, vamos a pensar en la colocación de los elementos o los vamos a colocar  sin ton ni son?
Un buen diseñador no permite que la posición y colocación se produzca de forma aleatoria.
Primero hay que pensar en:

  • Lo que es el elemento
  • Cómo el elemento se refiere a los objetivos de la página
  • Donde el elemento encaja con los demás elementos de la página

El elemento que se está colocando

Hay muchos elementos comunes en una página Web, tales como: titulares, navegación, imágenes, contenidos textuales y administrativos. Saber lo que es cada elemento,ayuda a determinar donde debe ser colocado en la página. Por ejemplo, normalmente no pondríamos un título de página Web en la parte inferior de la página. La navegación se encuentra generalmente en la izquierda o en la parte superior y la administración se encuentra más comúnmente en la parte inferior.

El elemento en relación a los objetivos

Si conocemos los objetivos y las metas de la página esto será fundamental para su colocación.
Normalmente los anuncios se encuentran en lugares similares en las páginas Web.  Si el objetivo es hacer que la gente haga clic en ellos, los colocaremos en lugares donde históricamente la gente mira y haga clic para así cumplir con nuestros objetivos.


Dónde están los otros elementos de la página

De alguna manera esto parece ser la parte más evidente del diseño – después de todo si ya tenemos un logotipo en la parte superior izquierda, no vamos a colocar contenido en la parte superior de la misma. Pero también hay que pensar en el contexto de sus posiciones. Colocar un bloque de anuncios en medio de un bloque de texto implica un sentido de conexión entre los dos elementos. La colocación de una línea horizontal después de un título o línea puede crear un sentimiento de desconexión entre el título y el contenido. Donde situemos los elementos puede marcar la diferencia.


Encontrar los puntos de interés en tu página

Los puntos de interés son los puntos centrales de un diseño – los lugares donde el ojo es atraído. Al cambiar el espacio en torno a esos puntos de interés puede afectar la manera en que esos temas se ven en la página.

Por ejemplo, una imagen puede ser el punto focal de tu página Web.  Puedes optar por centrar la imagen en la página, pero eso es aburrido y plano. En su lugar puedes jugar con los otros elementos en la página y cambiar los márgenes alrededor de la imagen para crear un diseño que aumente el interés en el dibujo.

Vamos a poner un ejemplo usando tres elementos: un titular, una foto, y una leyenda. Podemos elegir centrar todos los elementos pero con eso conseguiremos un diseño aburrido y no tendremos una jerarquía visual clara. Nuestro ojo será atraído por la imagen porque es una imagen, no por la posición que tiene en el diseño.

DEBIAN_center

Con sólo hacer un par pequeños cambios en la posición de los elementos y de los márgenes alrededor de la imagen, el diseño resultante es más atractivo a la vista. Debido a que el espacio entre el título y la imagen es diferente al de la leyenda y el espacio de la imagen, tenemos la sensación de que el título pertenece a la imagen.

DEBIAN_center_2

¿Por qué buena Navegación es importante?

25 de Febrero de 2010

La navegación web es uno de los elementos más cruciales en la determinación de la eficacia de un sitio web.
Para que la navegación web se eficaz, ante todo debe tener sentido. Si bien siempre hay espacio para la creatividad, los sitios web bien diseñados tienden a tener esquemas de navegación similar.

Un diseñador de páginas web siempre debe tener en cuenta la finalidad básica de la web y la audiencia prevista en el diseño de los elementos de navegación. La mayoría de sitios web existentes tienen a bien informar al visitante sobre un producto o servicio o vender realmente ese producto o servicio. Por lo tanto, hay algunas pautas básicas a seguir:

Asegurémonos de que todos los elementos de la navegación están claros y que los vínculos tienen el uso de las convenciones estándar de los enlaces, tales como botones, menús, subrayando del texto o cambio de color en el ratón.

Cuando no utilicemos los enlaces convencionales, hay que indicar explícitamente al visitante que se trata de un enlace. Por ejemplo, supongamos que diseñamos una página web en la que se utiliza un mapa que muestra distintas ciudades y deseamos que el usuario haga clic en el nombre de la ciudad para obtener información sobre la misma. Hemos de asegurarnos de informar al usuario que haga clic en el nombre de la ciudad para obtener más información acerca de ella.

Recuerde la regla de los “Tres clics”. Los estudios han demostrado que la mayoría de los usuarios no suelen hacer clic en más de tres enlaces para obtener la información que desean. Así, cada página del sitio web debe ser accesible dentro de esos tres clics.

No se recomienda el uso de flash o de otro tipo de página de bienvenida en el sitio web. Hay que mantener el diseño de la página web de sencillo y atractivo. Pero si decidimos usar uno, asegurémonos de usar la etiqueta META REFRESH, que permita al visitante saltar la página de inicio después de unos segundos y proporcionar  un botón en el que pueda hacerse clic, claramente marcado para que el visitante puede pasar la página de entrada e ir directamente a su página de inicio, de lo contrario un gran porcentaje de los visitantes no volverán jamás. Recuerde que la mayoría de los visitantes buscan información, no entretenimiento.

Elementos de navegación

Top Menús - La barra de menú de la página normalmente se encuentra debajo de la cabecera que contiene el logotipo del sitio. Estos elementos de menú pueden ser individuales, menús desplegables, o con ampliación. Cada elemento del menú puede ser representado por un gráfico o solo de texto.

Lateral izquierdo de navegación – La navegación del lado izquierdo normalmente se implementa como la columna A o área de texto en la parte superior izquierda de la página web. Al igual que el menú superior, cada elemento puede ser un simple enlace o un menú en expansión.

Lateral derecho de navegación – La navegación del lado derecho no se utiliza muy a menudo, pero cuando se utiliza, se implementa como una columna o área de texto en la parte superior derecha de la página web. La mayoría de los diseñadores utilizan esta área para la publicidad en lugar de navegación del sitio.

Menús de fondo – Los menús de fondo pueden ser una barra de menú o pie de página.

Elementos importantes de navegación

Enlaces – Todas las páginas del sitio web deben estar dentro de dos o tres clics de la página de inicio. Las páginas importantes se deben estar a un clic. El tipo de sitio web  determina los vínculos que son más destacados.

Cajas de inicio de sesión - Las cajas de inicio de sesión deben ser bien visibles. Los lugares comunes son parte superior izquierda, arriba a la derecha o dentro de la cabecera de la página.

Carros de la compra - Si usted usamos un carrito de compra para vender productos, debemos mostrar el botón de compra en un lugar destacado sobre cada página. La localización más común es la parte superior derecha justo debajo o como parte de la cabecera.

Botones de Orden – Si utilizamos botones de orden individual deben ser grandes y visibles. Usaremos el menor número de clics para entrar a la página.

Barra de migas – La barra de migas, son los vínculos o representación gráfica de dónde nos encontramos. La barra de migas generalmente está situada en la parte superior izquierda de la página justo debajo de la cabecera. Cada palabra es un enlace a la página anterior. Suelen estar en esta forma: Inicio-> Artículos-> Marketing

Enlaces externos – Los enlaces externos pueden ser utilizados en cualquier lugar, pero son más utilizados dentro de las áreas de texto de la página web. Pueden ser referencias a más información que se encuentra en otro sitio, a los productos recomendados, o para cualquier otra cosa.

Anuncios – Los anuncios son normalmente gráficos o texto con un hipervínculo asociado. Los anuncios pueden ser colocados en cualquier lugar de una página web, pero normalmente se utilizan sólo en el banner, por el lado derecho de la página, debajo de los elementos de navegación en el margen izquierdo, en la parte inferior de la página o intercalados en las zonas de ensayo de las página. Los estudios demuestran que los anuncios “por encima de la tapa” son más eficaces.
( “Por encima de la tapa” se refiere a la zona de una página web que es visible sin tener que desplazarse.)

Elementos descargables – Si ofrecemos elementos descargables, tales como archivos de audio, video o pdf, asegurémonos de informar al usuario del tamaño del archivo o si hay una aplicación para utilizar el archivo. Si se necesita una aplicación, proporcionaremos un vínculo a la aplicación. Por ejemplo, proporcionaríamos un vínculo de Acrobat, si estamos ofreciendo archivos PDF.

Mapa del Sitio - Un mapa del sitio es una buena forma de la distribución de todo el sitio para sus visitantes. Es sólo una lista jerárquica de cada página del sitio.

Resumen

Un sistema de navegación bueno puede aumentar el número de páginas vistas por cada visitante. Esto a su vez puede aumentar las suscripciones, los clientes, ventas, los miembros  y hacer que el sitio web sea más exitoso.

Alineación en el diseño de una página Web

19 de Noviembre de 2009

La mayoría de los desarrolladores Web, cuando piensan en la alineación piensan en el atributo o la propiedad CSS. Pero la alineación de los elementos de la página es tan importante como si el texto está justificado o su imagen flota a la izquierda. La alineación proporciona el marco estructural de un diseño. La alineación puede afectar el estado de ánimo de la página, así como su eficacia para conseguir su mensaje.

Pero el diseño de la página puede ser tan estructurado, con un sistema rígido que es evidente, o puede ser más sutil. Si entendemos cómo alinear los elementos de manera efectiva en la página web, seremos capaces de romper las reglas de una manera eficaz también.

Estas imágenes muestran una página Web con tres simples elementos y cómo podemos diseñar dichos elementos de la página para crear diseños diferentes.

alineamiento_izquierda

La alineación a la izquierda es, probablemente, la alineación más común en cualquier diseño. Es organizada y segura. Proporciona un ambiente conservador para cualquier diseño, ya que es confortable y familiar.

alineamiento_derecha

El alineado a la derecha es similar a la alineado a la izquierda en la que todos los elementos están de acuerdo pero alineados en el lado derecho del contenedor. Esta disposición es un poco menos común que la alineación a la izquierda, y proporciona una sensación de diseño menos conservador.

La forma más sencilla de hacerlo es con propiedades CSS, movemos los elementos a la derecha y luego los obligamos a permanecer por debajo de otros en el flujo del documento.

alineamiento_centrado

El centrado en las alineaciones es popular en el diseño web, especialmente con los diseñadores noveles. El centrado proporciona un enfoque convencional, pero hay que tener cuidado, ya que si centramos el diseño puede parecer plano y aburrido, a menos que lo hagamos realmente bien. Cuando la alineación está perfectamente equilibrada, no hay nada que el ojo pueda enfocar, de modo que el diseño se ve plano.

El centrado es fácil de hacer. Sólo tenemos que utilizar el CSS para alinear los distintos elementos de la página Web.

Algo que recordar cuando se utilizan las alineaciones de centrado, es que los grandes bloques de texto pueden ser muy difíciles de leer.

“En caso de duda, no centremos”.

alineamiento_justificado

El justificado de los diseños es muy similares a  los diseños centrados, pero en lugar de tener un borde dentado en el elemento de texto, se centra en ambos lados. Los diseños justificados tienen un aspecto más formal y sencillo que los diseños centrados, y pueden crear un diseño más elegante.
Los diseños justificados utilizan las mismas técnicas de centrado que la alineación centrada, también se añade la propiedad text-align al estilo de cualquier bloque de texto para justificarlo.

alineamiento_notanbueno

Hay una sutil diferencia entre esta imagen y la imagen de página de alineación centrada. En este ejemplo, la imagen y el título están muy centrados en el diseño -, pero el texto está alineado a la izquierda. El texto no coincide con la alineación del resto de la página.
En la página siguiente ofrecemos una sugerencia de cómo solucionar este problema.

alineamiento_marco

Este diseño utiliza un centrado de elementos en un punto. En cambio, hay un borde visible alrededor del texto. Esto resuelve el problema que teníamos en el ejemplo anterior, porque está claro que el cuadro de texto es lo que está centrado.
Este diseño también tiene la ventaja de resolver el problema del textos centrados que son difíciles de leer.

alineamiento_mixto

La estructura de este diseño esta creada por la asociación de los diferentes elementos. Por ejemplo, las líneas de cabecera con la parte inferior de la imagen. El bloque de texto se alinea en la misma línea vertical como el titular.
La mayoría de los diseñadores Web prefieren este tipo de diseño porque ofrece más interés en el mismo. No es tan conservador como las alineaciones a la izquierda o a la derecha y tampoco es tan plano como un diseño centrado.