Desarrollo Web

Los usuarios que se enfrentan al contenido de una página web, utilizan un movimiento en forma de F para buscar la información que requieren. Ese es el resultado del estudio realizado por Jacob Nielsen, publicado en su sitio useit.com.

El estudio se basó en el análisis del movimiento ojos de 232 usuarios enfrentados a 3 tipos de páginas comunes en un sitio web corporativo: un artículo, la descripción de un producto y un resultado de búsqueda.

Planos de Escaneo de Páginas

La imagen muestra en colores cuales son las áreas más vistas por los usuarios. El grado de atención es mayor en las áreas rojas, decreciendo en las amarillas (atención media) y azules (atención baja).

Algunas implicancias de este comportamiento para el arte del diseño web son:

• Los usuarios no leen el texto de la página en forma exhaustiva. Más bien realizan un escaneo de la página
• Los primeros 2 párrafos deben mostrar la información más importante, ya que existen muchas probabilidades de que estos párrafos sean leídos con más detención
• Se deben empezar los subtítulos, párrafos y elementos de lista con palabras que llamen a la lectura del resto del elemento, ya que es más probable que los usuarios lean las 2 primeras palabras que las 3 primeras

El artículo completo lo puedes leer en F-Shaped Pattern For Reading Web Content

El CSS Table Gallery es un repositorio de diseños gráficos de tablas, cuyo fin es demostrar que es posible separar el contenido de la presentación. Los diseñadores aportan hojas de estilo CSS a través de las cuales la apariencia de una tabla varía, de acuerdo al estilo elegido por el usuario. El desafío es no tocar el código HTML, sólo modificar el CSS.

Hoy aportamos nuestra propia hoja de estilos a la que pusimos por nombre Salmon, dado que sus colores están inspirados en el color naranjo del salmón, el principal producto de la zona de Puerto Montt.

Técnicamente, la hoja de estilos funciona con las versiones de Internet Explores superiores a 5, Firefox y Opera. Para los usuarios de navegadores modernos como Firefox, la experiencia es mejorada gracias al uso de efectos hover y del uso de los selectors after y before, además de agregar textos usando la propiedad content.

Vista de CSS Table Gallery usando estilo CSS Salmon.

Otros estilos previamente publicados, que podrían interesarte porque demuestran novedosos usos de CSS en tablas son:

• Two Times Table, que cambia el concepto de lo que es una tabla.
• Spread Firefox!, que muestra todo lo que Firefox puede manejar e Internet Explorer no.
• Grayed Out, que explora un posible estilo tipo Excel.

Brindar textos en un tamaño adecuado a las capacidades visuales del usuario es una principio básico de usabilidad. En este artículo se muestra como modificar el tamaño del texto en zonas específicas de una página a través de controles ubicados en la misma página.

La técnica consiste en fijar tamaños de texto que sean relativos a un elemento base y luego con JavaScript cambiar el tamaño de letra del elemento base.

Fijando tamaño de letra base

A través de una hoja de estilos especificamos el tamaño de texto por defecto al elemento body.

body{
font-size:12px;
}

Debido a la característica de herencia de los selectores CSS, todos los elementos internos al body tomarán como base éste tamaño de texto.

Ahora, se deben especificar tamaños de texto al resto de los elementos. Estos tamaños deben ser especificados en porcentaje o em, dado que necesitamos que los tamaños sean relativos.

p { font-size:100%; }
h1 { font-size:160%; }
h2 { font-size:140%; }

Preparando nuestra página

Para que nuestro script sólo cambie el tamaño de texto en una zona específica de la página (por ejemplo el cuerpo de una noticia), debemos identificar un elemento contenedor al texto que queremos cambiar. Para este ejemplo estableceremos el id de un div de la siguiente manera.

Además debemos establecer los controles que permitirán cambiar el tamaño del texto. En nuestro ejemplo crearemos 3 links para las acciones de Aumentar, Disminuir y Reestablecer tamaño del texto.

<a href="#" onClick="zoomText('aumentar','Contenido')">Aumentar</a><br />
<a href="#" onClick="zoomText('disminuir','Contenido')">Disminuir</a><br />
<a href="#" onClick="zoomText('reestablecer','Contenido')">Reestablecer</a>

En el código se llama a la función ZoomText cada vez que se hace clic en alguno de los links, para que esta función realice el cambio en el tamaño de las letras.

La función ZoomText

La Función ZoomText recibe 2 parámetros:

• Acción: indica la acción a realizar y puede tomar los valores aumentar, disminuir y reestablecer.
• Elemento: el nombre del identificador del elemento contenedor del texto a ser modificado.

El código de esta función es el siguiente.

ACTUALIZACIÓN: Se ha agregado código para limitar el tamaño máximo y mínimo de letra.

function zoomText(Accion,Elemento){
//inicializacion de variables y parámetros
var obj=document.getElementById(Elemento);
var max = 200 //tamaño máximo del fontSize
var min = 70 //tamaño mínimo del fontSize
if (obj.style.fontSize==""){
obj.style.fontSize="100%";
}
actual=parseInt(obj.style.fontSize); //valor actual del tamaño del texto
incremento=10;// el valor del incremento o decremento en el tamaño

//accion sobre el texto
if( Accion=="reestablecer" ){
obj.style.fontSize="100%"
}
if( Accion=="aumentar" && ((actual+incremento) <= max )){
valor=actual+incremento;
obj.style.fontSize=valor+"%"
}
if( Accion=="disminuir" && ((actual+incremento) >= min )){
valor=actual-incremento;
obj.style.fontSize=valor+"%"
}
}

Lo que hace el script es obtener el tamaño actual del texto en el elemento contenedor del texto. Luego dependiendo de la acción tomada cambia el valor de la propiedad fontSize de este elemento. Al cambiar el tamaño de texto en el elemento contenedor, automáticamente cambia el tamaño en los elementos internos, debido a que su tamaño ha sido especificado en forma relativa.

Para ver esta técnica en funcionamiento, sólo debes usar las opciones provistas para ello en el menú derecho de esta misma página.

Una de las grandes ventajas de trabajar con estándares (lease XHTML y CSS) y separar el Contenido de la Forma, es el hecho de que las páginas pueden verse bien en cualquier medio de difusión: Pantalla, Impresión, Palm, WebTV, etc. Como el Contenido (la página XHTML) no cambia, se puede adaptar Forma con distintas hojas de estilo CSS enfocadas a medios específicos lo que nos evita el trabajo de crear paginas para cada medio. En este artículo se explica como aprovechar el potencial de CSS para que nuestras páginas se vean bien incluso al imprimirse.

Seleccionando nuestro Objetivo

Es importante antes de empezar definir claramente que páginas necesitan estilos para impresión. Por ejemplo en nuestro sitio web, sólo los artículos de nuestro blog, por el momento, cuentan con esta característica. Se debe tener en cuenta que hay páginas del sitio que no están hechas para ser impresas, como por ejemplo la página de inicio, porque Internet obviamente es un medio muy distinto a los tradicionales.

Hojas de Estilo para Pantalla y para Impresora

El primer paso que se debe realizar es declarar en el head de nuestra página que hoja de estilos afectará un medio específico, lo que se hace de la siguiente forma.

<link href="estilos.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />

El parámetro media es lo que permite discriminar a que medio afectará la hoja de estilos correspondiente. En nuestro caso tenemos una hoja de estilos para el medio "screen", que es la pantalla de computador común y corriente, y otra hoja para el medio "print".

Esta es la forma más fácil de trabajo y es la que ocuparemos en este artículo. Sin embargo, es muy usado que que la hoja de estilos general afecte a todos los medios incluyendo el medio print (especificando media="all" en vez de media="screen" o simplemente no especificando medio), por lo que la hoja de estilos de impresión debe trabajar eliminando el formateo de la hoja de estilos general. Ése es un proceso epecífico para cada sitio por lo que no ha sido ocupada esa opción en este artículo.

Ocultando lo indeseado

Ahora empezamos a trabajar en nuestra hoja de estilos para la impresión. El primer paso consiste en ocultar las zonas de nuestra página que en una impresión normal no debieran ser vistas, como por ejemplo: Barras de Naveagación, Menús, Breadcrumbs, Cuadros de Herramientas, Formularios, etc. En este punto hay que aclarar que estamos trabajando sobre una página bien estructurada que sigue los estándares HTML o XHTML, de otro modo el asunto se hace más difícil.

Suponiendo que tenemos 3 divs para ocultar: #Encabezado, #Menu y #Publicidad, debemos declarar en nuestra hoja de estilos, lo siguiente:

#Encabezado, #Menu, #Publicidad{
  display: none;
}

Debemos hacer esto con cada elemento que deseemos ocultar.

Ajustando todo al Área Imprimible

Debemos ahora hacer que nuestro contenido se ajuste exactamente al ancho de la hoja que se usará para impresión. El ancho puede variar dependiendo del tipo de hoja, por lo que el ancho de nuestros elementos contenedores (por ejemplo un div #container) debe ser relativo, lo que se consigue con la siguiente declaración.

body, #container{
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

Podríamos haber especificado width:100%, pero según la experiencia de Eric Meyer mostrada en el Artículo ALA's New Print Styles, es preferible ocupar auto. Es preciso aplicar float:none para eliminar un problema de los navegadores Mozilla con elementos flotantes.

Tipografía para impresión

Es el momento ahora de trabajar sobre el texto. Debemos llevar todos nuestros textos a una fuente de fácil lectura. En mi experiencia la fuente Arial en tamaño 10 puntos es una buena opción, pero puedes considerar subir el tamaño a 11 o 12 puntos.

body, p, td, th{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  color: #000;
  background: #fff;
}

Nota que aparte de ajustar el tipo de letra y su tamaño, hemos especificado el color negro y el fondo blanco como valores por defecto. Para dar una mejor apariencia al documento, podemos especificar un tipo de letra distinto para los títulos.

h1, h2, h3, h4, h5, h6{
  font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
}

Podemos cambiar el color de otros elementos para que resalten en nuestro documento

blockquote, pre, code, cite{
  color:#666;
}

Otros Ajustes

Lo presentado anteriormente es un formateo básico. Tu sitio web seguro necesitará otros ajustes, por lo que debes tener en cuenta los siguientes puntos:

• Las imágenes de fondo no son impresas por los navegadores, por lo que no debes ocuparlas.
• Las tablas se muestran sin fondo y sin líneas de separación por lo tanto debes especificar un estilo para ellas como por ejemplo:

  table{
  border-collapse:collapse;
}
td, th{
  border:1px solid #666;
}

• Puedes crear texto específico para la impresión, como por ejemplo un pie de página con la información de derecho de autor del material. Como no queremos que se vea en pantalla ocupas la propiedad display: none pero esta vez en la hoja de estilos de la pantalla.

Más Información

Visita el sitio web de Eric Meyer, o sus artículos en A List Apart: Going to Print y ALA’s New Print Styles. Si te interesa puede conocer otros tipos de medios distintos a screen y print en la página Media Types de la W3C.

Imagina que has creado el mejor diseño de tu vida. Obviamente tiene dimensiones precisas. Lo programas y lo revisas en Firefox y todo anda perfecto, sin embargo tu mamá lo ve en su computador y el diseño luce horrible. ¿Qué ha pasado? Es Internet Explorer nuevamente echándote a perder la vida.

Para ser exactos las versiones 5.x y 6 en Quirks Mode de Internet Explorer se apartan de los estándares W3C al renderizar en pantalla los elementos de bloque que tienen un ancho o alto fijo. (Para el ejemplo esta puede ser sólo una de las causas posibles, pero es la más común).

El Problema

Digamos que tenemos la siguiente declaración:

.boxModel{
  width:200px;
  padding:10px;
  border:5px;
  margin:10px;
}

Navegadores apegados a los estándares (e incluso IE 6 en Standar Mode) utilizan la siguiente fórmula para calcular las dimensiones del elemento:

Ancho Total = width + padding + border + margin.= 250px.
Ancho del Contenido = width = 200px


 

Sin embargo IE ocupa la siguiente fórmula:

Ancho Total IE=  widht + margin = 220 px.
Ancho del Contenido =  width – padding – border = 170px


 

La solución

Para solucionar esto, debemos crear una nueva declaración, un parche ubicado después de la declaración original en nuestra hoja de estilos, el que para el ejemplo, sería así:

* html .boxModel{
  width:230px;
  w\idth:200px;
}

El selector * html .boxModel es visto sólo por IE 5.0 hacia arriba (incluído 6). Los ingenieros de Microsoft crearon para su navegador un elemento (representado por el asterisco *) que contiene al elemento html, elemento que no existe en el estandar de la W3C por lo que navegadores como Firefox u Opera no lo reconocen, pero sí IE.

Ahora, para contrarrestar la mala interpretación e IE 5.x, la propiedad width de nuestro parche toma el valor de la siguiente fórmula:

Ancho para parche = width + padding + border

Sin embargo, como este código es visto también por IE 6 (el cual en Standard Mode interpreta bien el box model), debemos hacer que éste reciba un ancho de 200px, por eso se agrega w\idth:200px. ¿Más magia? El backslash entre la w y la i, hace que esta propiedad sea visible sólo por IE 6, con lo que damos el valor correcto del ancho al elemento.

Ancho para parche (w\idth) = width

Hay que hacer notar que todo lo que se ha mostrado para el ancho del elemento es válido también para el alto, aunque generalmente los diseñadores prefieren que sea el contenido el que determine el alto en sus diseños.

Un problema muy común cuando se trabaja con bloques div, es el de especficar una altura mínima para ellos. Esta situación se da generalmente cuando se tiene una imagen que flota junto a un texto que lo acompaña; si el texto no tiene la altura de la imagen, el contenido de la página que esté bajo el texto, también se mostrará a la derecha de la imagen, debido a que el div que los contiene toma la altura del texto.

La solución es especificar una altura mínima para un cuadro (div) que contenga a la imagen y el texto.

Código XHTML

<div class="box">
  <img src="img-ejemplo.gif" width="100" height="125" />
  <p>Colocar aquí el contenido para class "box"</p>
</div>

Un div sirve como contenedor de una imagen y un párrafo de texto. No puede ser más simple.

Código CSS

.box{
  min-height: 125px;
  height: auto !important;
  height: 125px;
  padding:5px;
}

.box img{
  float:left;
}
.box p{
  margin-left:135px;
}


Las líneas destacadas son las que establecen la altura mínima al contenedor. La propiedad min-height, establece una altura mínima para un elemento; esta propiedad no funciona en Internet Exploreres, ya que en realidad entiende el atributo hight como un min-height, por lo tanto establecemos height: 125px. Para que los navegadores que si entienden correctamente los atributos height y min-height, como Firefox, no tengan una altura fija (ya que hemos establecido que la altura es 125px), ocupamos height: auto !important, estableciendo una altura automática y dándole mayor prioridad a esta declaración sobre la otra a través de la declaración !important (que no es entendida por Internet Explorer).

El cambio siempre es difícil. Sobre todo si llevas mucho tiempo haciendo las cosas de una forma. Lo que vamos a ver ahora es uno de esos cambios difíciles, pero que tienen tremendos beneficios. Este artículo está pensado sólo como un punto de inicio en el uso de CSS + HTML.

El desafío es el siguiente: "Transformar una página diagramada con tablas en HTML puro, a una página semánticamente correcta diagramada a través de CSS"

La forma común (o usando tablas para la Diagramación)

Vamos a ocupar el ejemplo típico de una página estructurada en 3 áreas principales: un encabezado, el cuerpo o contenido y el pie de página. Esta página diagramada con tablas, muestra el ejemplo más común. Los colores se han utilizado para diferenciar los distintos bloques que la conforman.

A través de HTML puro, crear esta diagramación implica construir un tabla con 3 filas. En la fila superior (Encabezado)se inserta una segunda tabla con dos filas, una para el nombre del sitio y otra para la barra de navegación. En la fila del medio (Contenido), se inserta una tercera tabla, la que da la separación entre el menú y el contenido mismo. Finalmente, en la fila inferior, no agregamos tablas pero eventualmente es así.

Pueden ver el código fuente del ejemplo de página diagramada con tablas, para observar que es extremadamente confuso realizar mantención en el código. Consideremos además que este es un ejemplo muy simple.

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#CCCCCC">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><font size="7">Nombre de mi Sitio</font></td>
</tr>
<tr>
<td>Inicio | Servicios |Quienes Somos | Cont&aacute;ctenos </td>
</tr>
</table>
</td>
</tr>
<tr valign="top">
<td width="200" bgcolor="#FFFF99">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><strong>MENU</strong></td>
</tr>
<tr>
<td>Opci&oacute;n 1</td>
</tr>
<tr>
<td>Opci&oacute;n 2 </td>
</tr>
<tr>
<td>Opci&oacute;n 3 </td>
</tr>
<tr>
<td>Opci&oacute;n 4 </td>
</tr>
<tr>
<td>Opci&oacute;n 5 </td>
</tr>
</table>
</td>
<td width="427"><p> Lorem ipsum dolor ... </p></td>
</tr>
<tr bgcolor="#33CCFF">
<td height="19" colspan="2">Todos los derechos reservados Tecnostart.cl </td>
</tr>
</table>

Esto se debe a que las tablas no fueron creadas para diagramar sino para tabular datos. En este punto debemos darnos cuenta que a través de este modo de diagramar estamos ocupando elementos HTML tanto para publicar contenido, como para dar forma al contenido. Estamos ocupando tablas para dar posición (es decir formato) a nuestro contenido. Y ahí está precisamente el error.

Pero entonces, ¿como puedo reemplazar las tablas de manera que la construcción sea lógica y separe el contenido de la forma?. Aquí es donde entra a la cancha nuestro compañero: Las Hojas de Estilo o CSS.

La forma inteligente y óptima (o usando CSS)

HTML se ocupa de entregar el contenido y CSS de dar formato al contenido. Así de simple.

Debemos escribir código HTML simple y luego a través de hojas de estilo CSS hacemos que quede lindo.

El desafío es construir igual o mejor, el ejemplo anterior, pero esta vez sin tablas, usando HTML y CSS. El resultado se puede ver aquí. Puedes ver también la hoja de estilo que da el formato al ejemplo.

Analicemos la página HTML

<head>
<link xhref="estilo-ejemplo.css" rel="stylesheet" type="text/CSS" />
</head>

Esta línea dentro del head, indica que se debe vincular la hoja de estilo "estilo-ejemplo.cssS", al documento HTML. Este paso es fundamentamental en la separación de contenido y forma porque en el documento HTML escribimos sólo el contenido y en el documento CSS escribimos código para dar forma.

<body>
<div id="Encabezado">
Elementos del Encabezado
<div id="BarraDeNavegacion">
Elementos de la Barra de Navegacion
</div>
</div>
<div id="Menu">
Elementos del Menu
</div>
<div id="Contenido">
Contenido de la pagina
</div>
<div id="PieDePagina">
...
</div>
</body>

En esta parte aparece otro elemento fundamental: la etiqueta DIV. Una etiqueta DIV, representa un bloque de código. La técnica es agrupar en forma lógica los elementos de una página dentro de etiquetas DIV, para luego darles forma a través de CSS. La propiedad id, representa un identificador de cada bloque DIV y nos permitirá hacer ajustes precisos sobre ellos en nuestra hoja de estilos.

Analizando la Hoja de Estilos CSS

Si nuestra hoja de estilos está vacía, nuestra página se verá mas o menos así

Se aprecian claramente los cuatro bloques principales, mas un quinto dentro del bloque Encabezado. Queda claro que sólo hay contenido y de ahora en adelante no vamos a tocar nuestro código HTML, sino que trabajaremos en nuestra hoja de estilos.

Lo primero que haremos será dar posición y forma a los bloques. Queremos que menú sea menos ancho y que se ubique en el lado izquierdo de la página. Además el contenido debe ir al lado derecho del menú.

#Encabezado{
background-color:#CCCCCC;
padding:5px;
}
#Contenido{
background-color:#FFFFFF;
margin-left:200px;
}
#Menu{
background-color:#FFFF99;
padding-left:5px;
width:195px;
float:left;
}
#PieDePagina{
clear:both;
background-color:#33CCFF;
}

Explicamos un poco el código.

Las propiedades del Encabezado indican que el color de fondo será #CCCCCC y tendrá un relleno de 5 pixeles.

El contenido tendrá un color de fondo #FFFFFF y un margen de 200 pixeles desde el borde izquierdo de la página

El menú tendrá un color de fondo #FFFF99, un relleno al lado izquierdo de 5 pixeles y un ancho interno de 195px (195 + 5= 200 px). La línea float:left, nos indica que el bloque Menu va a ubicarse al lado izquierdo de la pantalla y permitirá que los demás elementos aparezcan a su lado derecho. Esto hace posible que el contenido esté al lado derecho del menú.

El Pie de Página tiene la propiedad clear:both, lo que indica que se borrarán todas las secuencias float anteriores. Esto hace para que el pie de página se muestre bajo el menú y el contenido, de otra forma se mostraría bajo el contenido, pero al lado del menú si este fuera más largo que el contenido. Además hemos especificado que el color de fondo sea #33CCFF.

Ahora nuestra página se ve así

Podemos retocar el estilo visual de nuestra página a través de otras líneas en nuestra hoja de estilo.

body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

#Encabezado h1{
margin:0px;
font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
font-size:300%;
font-weight:normal;
}

#Encabezado #BarraDeNavegacion a{
padding-right:10px;
color:#FF0000;
text-decoration:none;
}
#Encabezado #BarraDeNavegacion a:hover{
font-weight:bold;
}

#Menu h2{
margin:0px;
font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
font-size:150%;
font-weight:normal;
}
#Menu ul{
margin:0;
padding:0;
list-style:none;
}

Finalmente la página queda así

Queda como tarea para el lector averiguar como se relaciona este código CSS con los elementos de la página.

Se puede mejorar la página haciendo que el fondo del bloque Menú se extienda hasta el pié de página, pero eso queda para otra ocasión.

Centrar el contenido de una página en la pantalla es fácil de hacer utilizando tablas, pero sin ellas, es decir, usando CSS, la cosa es un poco misteriosa, sin embargo esta ultima opcion es la más elegante. El código es el siguiente.

<HTML>
<head>
<style type="text/css">
body{
text-align:center;
margin:0 auto;
}
#contenedor{
margin: 0 auto;
text-align:left;
width:70%;
}
</style>
</head>
<body>
<div id="contenedor">
el contenido de tu página acá
</div>
</body>
</HTML>

El DIV #contenedor es necesario para alinear el texto nuevamente a la izquierda, ya que en por la regla que dimos al body, el texto queda centrado.

Existe una excelente página, www.xtragoogle.com donde están agrupados todos los servicios que ofrece Google.

En Tecnostart, somo expertos en el uso de Google para promocionar su empresa y ganar nuevos clientes. Conozca más sobre nuestro servicio de Promoción y Posicionamiento de Sitios en Google.

Alguna vez terminaremos de sufrir quienes construímos sitios web ("cuando nadie use Internet Explorer" dirá mas de alguno). Cuando tengamos CSS 3 completamente operativo en los principales navegadores, será mucho más fácil plasmar en código lo que hemos imaginado.

El Módulo de Fondos y Bordes , de la nueva especificación, trae lo que siempre he querido, Múltiples Imágenes de Fondo para un elemento. Cuantas horas de trabajo nos lleva crear cuadros con bordes redondeados o con degradados, tratando de mantener una semántica más o menos simple en nuestro código. Bueno con esto todo es mucho más fácil.

Otra novedad, por lo menos para mi, es la posibilidad de ocupar Imágenes en los Bordes. Un gran aporte en la simplicidad del código.

Una última novedad es la propieda de Crear Sombras para los elementos. Actualmente, está implementado de forma independiente en Internet Explorer y Mozilla, pero una unificación nos ayudaría a mejorar fácilmente el diseño de nuestras páginas.

Puede ver más novedades de esta especificación en su página oficial.

Actualización: El sitio CSS3.info tiene una vista previa a algunas de las nuevas propiedades y selectores, además de informar el estado de soporte de los navegadores para estas ellas.