Introducción al diseño web

Técnicas

Herramientas

Aunque hay buenas herramientas visuales para crear páginas web, como Dreamweaver, y otras no tan buenas, como Frontpage, los profesionales suelen seguir escribiendo ellos mismos el código con editores de texto porque les permite una cercanía casi artesanal con su trabajo.

Una página web se puede escribir con un editor de texto sencillo, como el Bloc de notas de Windows o el Simple Text de los antiguos Macs. No obstante, hay editores de texto algo más avanzados que ayudan a los diseñadores web coloreando los diferentes elementos y ayudando a ver las cosas de forma más clara. Hay editores gratuitos, como Codepad, o de pago, como Ultraedit. Esto en Windows; para Mac tenemos BBedit de pago, Text Wrangler gratis y SubEthaEdit y SkEdit por muy poco dinero, mientras que en entornos Linux podemos usar Vim (también disponible para otras plataformas) o Bluefish, ambos software libre. Y estos son sólo unos pocos de todos los que hay.

Para transmitir las páginas de nuestro ordenador a un servidor y ponerlas a disposición pública, necesitaremos un cliente de FTP. En Windows tenemos también opciones gratuitas, como SmartFTP, y libres, como Filezilla. En Mac existen Fetch, Transmit, RBrowser y mi preferido, Cyberduck; en Linux también hay variedad: por ejemplo, Pure-FTPd o QuFTP (libres).

Otro elemento crucial es tener varios navegadores para probar las páginas antes de “subirlas” al servidor. En entornos Windows es habitual tener una copia de Internet Explorer, que preferiblemente debe ser la 5.5 o la 6, que son las más usadas actualmente. En Mac la versión más moderna es la 5.2.

Después es muy recomendable instalar algún navegador de la familia de Mozilla, la principal alternativa a Internet Explorer: Mozilla, Firefox,
K-Meleon, Camino… También es interesante contar con un navegador de texto, como el mencionado Lynx. Finalmente, todo navegador adicional que se quiera usar para probar las páginas vendrá bien. En evolt hay un archivo con montones de navegadores, en todas las versiones y para distintas plataformas. Personalmente, creo conveniente tener también algún navegador de la familia KHTML/WebCore, como Konqueror, Safari, Shiira… y Opera.

Hay otras pequeñas utilidades que pueden venir bien como html tidy, que sirve para corregir nuestros posibles errores en la codificación. Pero como vamos a codificar bien, seguramente no nos harán falta ;) de todas formas, tener una copia por ahí estaría bien. También está bien un comprobador de enlaces como Xenu, aunque podemos podemos recurrir igualmente al servicio del WDG. Esto sirve para comprobar que todos los enlaces de nuestras páginas llevan a algún sitio, evitando mosqueos de los visitantes y manteniendo la calidad de nuestro sitio.

Estructura

Sintaxis

El xhtml sirve para estructurar el texto, para indicarle al navegador qué parte del texto es un párrafo, cuál va en negrita y qué clase de documento es,entre otras cosas. Esto se concreta en el uso de unas etiquetas delimitadas por los signos < y >. Estas etiquetas normalmente necesitan una apertura y un cierre, como en <strong> texto resaltado </strong>, pero hay unas pocas que empiezan y terminanen sí mismas, como <img src="imagen.jpg" />. Date cuenta de que en cualquier caso tienes que escribir la etiqueta en minúsculas, y que los atributos de la etiqueta tienen que ir entre comillas.

Es muy importante también respetar el orden de las etiquetas o tags. Por ejemplo, esto estaría mal: <strong><em>prueba</strong></em>, porque se cierra la primera etiqueta antes de haber cerrado la segunda. Lo correcto sería: <strong><em>prueba</em></strong>. Si abrimos una etiqueta dentro de otra, tenemos que cerrar la que está “dentro” antes que la “contenedora”.

Definición del documento

Lo primero de todo es escribir el encabezado que define qué clase de documento vamos a escribir. Para nuestra primera página usaremos el formato xhtml estricto, y colocaremos estas líneas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es” lang=”es”>

Esta declaración ayuda al navegador a procesar mejor la información que contiene el documento, además de avisarle de que está escrito en español (es). Si el texto es en inglés pondremos xml:lang="en" lang="en", eu para euskera, fr para francés y así sucesivamente.

Podemos usar otras definiciones de documento, si no queremos o no podemos ser tan puristas:

xhtml transicional, que acepta elementos del html antiguo ya descartados en el xhtml.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

xhtml con marcos, para definir páginas que hagan uso de los infames frames.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Cabecera (head)

Ahora definimos la información invisible del documento.

Apertura de la cabecera
<head>
Abrimos la etiqueta head, la cabecera.
Título del documento
<title>Título de la página</title>
Aquí definimos el nombre del documento que se verá en la barra superior del navegador.
Enlace a la hoja de estilo
<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />
Con esta línea enlazamos el documento a una hoja de estilo.
Definición del juego de caracteres
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Aquí le decimos al navegador que utilice el juego de caracteres adecuado para quepuedan verse bien los acentos, las eñes… tanto si estamos en un navegador occidental como en uno coreano, ruso…
Asociar icono a la página
<link rel="shortcut icon" href="icono.ico" />
Esto sirve por si queremos que el documento esté asociado a un icono, que aparecerá en la barra de direcciones del navegador y en la lista de favoritos, si el navegador lo soporta. El icono puede ser un fichero ico de Windows o un simple gif o png, siempre que sus medidas sean de 16×16 píxels.
Cierre de la cabecera
</head>

Con esto cerramos la etiqueta head, la cabecera.

Cuerpo (body)

A la hora de organizar el contenido de la página hay que pensar semánticamente, jerarquizando y ordenando el texto según su mayor y menor importancia y significado.

Elementos de bloque (block)

Dividiremos el texto en bloques, y los bloques en párrafos.

Cada bloque tendrá un título, para cuya definición usaremos las etiquetas <h1></h1>, <h2></h2>… y así hasta <h6></h6>, según la importancia del bloque.

Cada bloque se divide en párrafos, que se señalan con las etiquetas <p> al principio y </p> al final. Si el párrafo entero es una cita, lo encerraremos dentro de la etiqueta <blockquote> </blockquote>.

A veces nos encontraremos con que hay unidades lógicas, bloques de información divididos en varios párrafos pero que queremos agrupar. Entonces usaremos las etiquetas <div> y </div>. Esta agrupación no es evidente en un primer momento, pero aplicando estilos a estas etiquetas podremos hacer que esa agrupación sea visible. Por ejemplo, encerrando varios párrafos en un recuadro de un color. Este elemento también se emplea para crear algo similar a las capas que tenemos en programas tipo Photoshop.

Elementos dentro de los bloques (inline)

Una vez dentro de cada párrafo, hay una serie de etiquetas que nos sirven para marcar el texto y convertirlo, efectivamente, en hipertexto, con todas las ventajas que esto conlleva.

Salto de línea
<br />
Señala un salto de línea en el mismo párrafo, como cuando le damos a la tecla enter para saltar a la siguiente línea en un editor de texto.
Énfasis
<em></em>
Indica que un determinado texto, encerrado entre la primera y la segunda etiqueta, es importante. Visualmente se suele representar con una cursiva: énfasis.
Énfasis fuerte
<strong></strong>
Se trata de otra clase de énfasis, más notable. Así, podemos jerarquizar palabras clave en un texto, indicando las más importantes con un énfasis fuerte y las menos importantes con un énfasis sencillo.
Cita
<cite></cite>
<q cite="fuente de la cita"></q>
Marca que el texto es una cita de otra fuente. Es preferible usar la etiqueta q (short quote, cita corta) porque ésta nos permite añadir cite como atributo, indicando así la fuente de la cita.
Acrónimo
<acronym title="eXtended Hyper Text Markup Language">xhtml</acronym>
Con esta etiqueta, al pasar el ratón por encima del textoxhtml, aparece el contenido del atributo title. Como dice el nombre de la etiqueta, ésta se usa en el caso de acrónimos. Es un recurso interesante de cara a aclarar términos confusos, al igual que otras etiquetas como abbr.
Abreviatura
<abbr title="Presidente">Pte.</abbr>
Funciona de la misma forma que la etiqueta anterior, aunque en este caso se usa con abreviaturas: Pte.
Definición
<dfn>Definición.</dfn>

Marca el texto como una definición dentro de un párrafo más amplio. No hay que confundirlo con las listas de definiciones.

Código
<code>código</code>
Señala que el texto etiquetado es código de programación o edición. Por ello hay que convertir los símbolos: por ejemplo, > en &gt;, las llamadas entidades de caracteres. De otra forma, el navegador interpretará ciertos símbolos como código interpretable y no como texto.
Dirección
<address>Calle Máximo Izpilicueta, 12</address>
Señala que el texto etiquetado es una dirección.
Texto en otro idioma
<span xml:lang="en">My taylor is rich.</span>
Marca el texto My taylor is rich, señalando que está escrito en una lenguadistinta a la del resto del documento, en este caso inglés (en).Lista completa de códigos de idiomas.
Enlace hipertextual a otro documento
<a href="http://pagina.com/">enlace</a>
Marca el texto enlace con un enlace a http://pagina.com/, de modo quecuando alguien pulse sobre el texto, el navegador irá a la página enlazada. En lugar de un texto puede usarse una imagen o cualquier otro elemento. Puede usarse también el atributo title para proporcionar al usuario información sobre a dónde le lleva el enlace.
Enlace hipertextual a otro punto del documento
<a href="#x">Ir al punto x</a>
Hiperenlaza el texto Ir al punto x con una parte de la misma página (en la que está el hiperenlace) a la que previamente hemos marcado como “x”. Este punto “x” se marca colocando el atributo id="" en cualquier elemento: párrafos, imágenes, encabezados… por ejemplo: <p id="x">. Esto es útil, por ejemplo, para hacer un índice con enlaces a distintas partes del documento activo.
Imagen
<img src="imagen.jpg" alt="texto alternativo" />
Coloca una imagen en el texto, en este caso imagen.jpg. Si no se encuentra el gráfico, o el navegador no puede leerlo, colocará como alternativa el texto “texto alternativo”.
Agrupación de elementos dentro de un bloque
<span>uno dos tres</span>

span tiene una función parecida a la de la etiqueta div, contener un grupo de elementos para agruparlos. La diferencia es que la etiquetadiv se usa para elementos de bloque (párrafos, cabeceras…), mientras que span se usa para elementos que van dentro de los bloques.

Listas

Existen formas de definir diferentes tipos de listas:

Listas desordenadas
<ul></ul>
Abre y cierra una lista sin orden concreto. Suele mostrarse como una lista con varios puntos. Por ejemplo:
  • Elemento 1
  • Elemento 2
Listas ordenadas
<ol></ol>
Abre y cierra una lista ordenada. Se muestra habitualmente con una numeración o una serie de letras, mostrando una sucesión ordenada de elementos. Por ejemplo:
  1. Elemento 1
  2. Elemento 2
Elemento de lista
<li></li>
Abre y cierra un elemento de una lista, sea esta ordenada o no.
Lista de definiciones
<dl></dl>
Lista de definiciones. Ésta misma es una lista de definiciones.
Término a definir
<dt></dt>
Término a definir dentro de una lista de definiciones.
Definición de lista
<dd></dd>
Definición del término anterior en la lista.

Cierre del documento

Al término del documento, lo cerramos con las etiquetas de cierre del cuerpo y del código: </body></html>

Validación y depuración del código

Una vez que ya tenemos la página terminada, hay que ir alvalidador de código del W3C para comprobar si está correctamente codificada y bien formada. Lo mejor para esto es tener la página ya “colgada” en algún servidor, pero también se puede subir nuestra página al validador. Veremos cómo se colocan las páginas en Internet más adelante, en Poniendo la página en internet.

También podemos usar el validador del WDG, que nos permite pegar nuestro código en un un formulario y analizarlo sin subir ficheros.

Si el validador te da error, comprueba que tu código cumple los requisitos delxhtml, que recordamos una vez más:

  • Tiene que haber un prólogo y un elemento raíz, es decir, hay que colocar la definición del tipo de documento y las etiquetas <html> y </html>
  • Todas las etiquetas tienen que estar correctamente anidadas: si una etiqueta se abre antes que otra, y la contiene, debe cerrarse después de cerrarse esa otra. Por ejemplo, <blockquote> <p> ejemplo </p> </blockquote> es correcto, mientras que <blockquote> <p> ejemplo </blockquote> </p> no lo es.
  • Todas las etiquetas tienen que estar correctamente formadas:
    • Todas las etiquetas se abren con <[etiqueta]> y se cierran con </[etiqueta]> (excepto las etiquetas img, br y otras que se colocan sólo en la cabecera, como meta).
    • Todas se escriben con minúsculas.
    • Las etiquetas vacías, como <br /> y <img />, tendrán el formato <[etiqueta] />, dejando un espacio en blanco antes de la barra y el signo de cierre de etiqueta.
    • Si las etiquetas tienen atributos o modificadores, éstos van separados por espacios, seguidos por un signo igual y los valores entrecomillados (sin espacios en blanco entre el igual y las comillas). Por ejemplo, <a href="http://pagina.com"> </a>

Extensiones multimedia

Las principales tecnologías multimedia de la web son Quicktime, Real y Flash. Dentro de esta introducción no vamos a ver cómo funciona cada uno de estos elementos, sólo cómo incrustarlos correctamente en nuestras páginas.

Usaremos la etiqueta <object>, pensada para incluir en la página contenido no textual. Por ejemplo:

<object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300">
        <param name="movie" value="movie.swf" />
        <img src="noflash.gif" width="200" height="100" alt="texto" />
</object>

Una de las ventajas de introducir la animación Flash con este código es que podemos especificar alternativas a la animación, si el visitante no tiene instalada la extensión Flash. En primer lugar se especifica el tipo de archivo que es, en este caso: application/x-shockwave-flash. Por supuesto, hay muchos más tipos de ficheros. Después se introduce la dirección donde está el archivo y el tamaño de la animación o vídeo en píxeles.

Introducimos la etiqueta param para especificar que se trata de una película o animación (movie) y le decimos al navegador dónde está la película.

Todo lo que se meta después servirá como alternativa al contenido principal en caso de no encontrarse o no poder ser reproducido. En este ejemplo se ha colocado una imagen, que, si a su vez fuera imposible de ver, sería sustituida por el texto indicado en el atributo alt.

Este método funciona bien en los navegadores actuales (Internet Explorer 6, Netscape 6, Mozilla…), pero en los navegadores antiguos no lo hará, ya que no soportan correctamente la etiqueta <object>. Esto compensa porque, aunque se pierde compatibilidad hacia atrás, se gana accesibilidad. No obstante, si comprobamos que, por ejemplo, en Internet Explorer 5, un navegador ampliamente utilizado aún, no funciona y es crucial que lo haga, tendremos que colocar algún pedazo de código que nos arruinará la perfección absoluta del código. Pero a veces hay que tomar esas decisiones.

Presentación

Una vez escrito, estructurado e hipertextualizado el texto, llega el momento de darle estilo al documento. En la parte anterior escribimos una línea en el encabezado (header) que decía así: <link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />. Con esta línea le decimos al navegador que, en la misma carpeta que el documento xhtml, hay otro documento llamado estilo.css que contiene instrucciones sobre el aspecto del documento.

La tecnología css nos permite controlar muchos aspectos de la presentación, tales como colores, tipografías,posicionamientos… y no sólo de cara a la presentación en pantalla, sino tambiénen la impresión o incluso en la presentación para navegadores de voz (hojas deestilo aurales).

Sintaxis

Las hojas de estilo son documentos en formato de texto simple grabados con la extensión .css. No requieren encabezamientos ni declaraciones especiales en su apertura. Un ejemplo de hoja de estilo:

body { margin: 0px;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 12px; }
h1 { font-family: Georgia, "Times New Roman", serif;
     font-style: italic; }
a:link { color: #ff9900; text-decoration: none; }
a:hover { color: #ffffff; background-color: #ff9900; text-decoration: none; }

Una hoja de estilo define cómo se verán en pantalla (o en el papel, o en los dispositivos de voz…) los diferentes elementos que hemos colocado en el documento xhtml.

Selectores

Cualquier elemento xhtml puede usarse como selector.

Una definición sencilla se compone así:

selector { propiedad: valor; }

Primero se escribe el nombre la etiqueta (por ejemplo body), seguida de las definiciones de estilo agrupadas entre corchetes ({}) y separadas por puntos y comas (;). Intenta colocar el código de forma que luego sea cómodo revisarlo.

Selectores de clase

Si queremos que un selector no se comporte igual siempre, podemos usar las clases: se usan colocando un punto y el nombre de la clase inmediatamente después del selector. Ejemplo:

selector.clase { propiedad: valor; }

Claro que para que esto tenga efecto sobre la etiqueta XHTML tendremos que aplicar el atributo class dentro del documento XHTML. Por ejemplo:

<p class="nombre_de_la_clase"> texto </p>

En este caso, la clase sólo se puede aplicar al selector al que se haya asociado. También puede usarse la clase sin poner selector, y en ese caso puede aplicarse a cualquier etiqueta XHTML. En este caso escribiríamos:

.clase { propiedad: valor; }

Selectores de identidad

Los selectores de identidad sirven para aplicar estilo a elementos individuales, concretos. Si los selectores de clase se definían con un punto, los selectores de identidad se definen con una almohadilla o sostenido:

#nombre { propiedad: valor; }

Al igual que las clases, tienen que tener referencia en el documento XHTML para que se aplique:

<p id="nombre"> texto </p>

Estos selectores individuales vienen muy bien porque, agrupando elementos dentro de etiquetas div y posicionándolos mediante css, tenemos un equivalente web de las capas a las que estamos tan acostumbrados en programas como Adobe Photoshop.

Agrupar selectores

Si queremos aplicar una serie de propiedades a diferentes selectores, los agrupamos colocándolos en una lista separados por comas. Por ejemplo, así:

h1, h2, h3, h4, h5, h6 { propiedad: valor; }

Selectores contextuales

Podemos combinar diferentes selectores para conseguir efectos localizados. Por ejemplo, si queremos que el texto etiquetado con énfasis (em) dentro de los párrafos (p) tenga una característica especial, lo indicaremos así:

p em { propiedad: valor; }

Así, el texto con énfasis (em) fuera de los párrafos no seguirá
esta norma.

Declaraciones

Hasta ahora hemos visto qué podemos hacer con los selectores, que son la primera parte de cada definición. La segunda parte es la declaración, que es donde se especifica cómo queremos que se vea la etiqueta nombrada mediante el selector. La declaración consta de propiedades y valores:

selector { propiedad: valor; }

Herencias, padres e hijos

Hay un concepto muy importante a la hora de escribir hojas de estilo: la herencia. Por la misma estructura de xhtml hay elementos que están subordinados a otros: hay elementos “padre” y elementos “hijo”. Por ejemplo, la etiqueta body contiene a todas las demás. Entonces, cuando aplicamos una propiedad a body, la heredan todas las etiquetas que están contenidas en él. Así, si en body especificamos que el color del texto sea verde, éste será verde en todos los párrafos, cabeceras… etc, del documento.

No obstante, estas herencias se aplican sólo por defecto; es decir, cuando no especifiquemos nada concreto para el resto de los elementos. Si definimos que los párrafos tengan texto azul, esta orden sobreescribe la precedente.

Hay casos en los que las propiedades no se heredan, aunque son bastante lógicos: por ejemplo, cuando especificamos un margen para el cuerpo del documento, los párrafos no lo heredan.

Comentarios

Al igual que en xhtml, podemos escribir comentarios en las hojas de estilo CSS. Sólo hay que colocar una barra y un asterisco al principio del comentario y viceversa al final:

/* comentario */

Etiquetas de bloque

Ahora ya podemos estudiar los elementos que modifican la presentación de los elementos de bloque (cuerpo, cabecera, listas, citas de bloques y párrafos) con los distintos valores que pueden tomar.

Color de fondo
background-color: #000000;

Determina el color de fondo del elemento. No olvidemos el símbolo de sostenido o almohadilla antes del código hexadecimal. También pueden usarse los nombres de los colores en inglés, prescindiendo entonces del sostenido o almohadilla. Es preferible, no obstante, usar los códigos hexadecimales.

Imagen de fondo
background-image: url(imagen.jpg);
Especifica si queremos una imagen de fondo en el elemento.
Repetición del fondo
background-repeat: repeat;

Especifica si queremos que la imagen se repita (repeat), que no se repita (no-repeat), que se repita sólo horizontalmente (repeat-x) o que sólo lo haga verticalmente (repeat-y).

Posición del fondo
background-position: top left;
Indica dónde queremos que se posicione la imagen de fondo. El primer valor será la posición en horizontal, y el segundo la posición en vertical. Pueden usarse valores numéricos o palabras en inglés (left, center, right, top, bottom y middle).
Margen
margin: 0px;
Determina la distancia entre el elemento que estamos definiendo y el resto de elementos a partir del borde.
Borde
border: medium dotted white;
Fija cómo será en grosor (primer valor), trazo (segundo) y color el borde del elemento. Sólo lo usaremos si queremos que el borde sea igual en sus cuatro lados. Los posibles valores de grosor son: thin (delgado), medium (medio) y thick (grueso); los más frecuentes de trazo, dotted (a puntos), dashed (a rayitas), solid (línea continua) y none (sin borde).
Espaciado o margen interno
padding: 5px;
Marca los píxeles de relleno de la caja en las cuatro direcciones. Es como el margen pero interno.

Texto

Respecto a la presentación del texto, lo normal es que lo definamos dentro de la etiqueta body de forma general, aplicándose así por defecto al resto de elementos. Después, si queremos, ya cambiaremos los atributos de algún elemento en particular. No hay por qué definir todo en todas las etiquetas, sólo lo que es distinto del resto de la página. Las principales propiedades que afectan al texto son:

Color de fondo
background-color: #000000;
Igual que los elementos de bloque.
Familia tipográfica
font-family: Arial, Helvetica, sans-serif;

Indica una lista de tipos de letra a usar. Si no se encuentra uno, se usará el siguiente en la lista, y así sucesivamente. Al final se suele colocar un nombre genérico para que el sistema use un tipo de letra de ese estilo si no encuentra ninguno de los indicados.
Los nombres genéricos de tipos de letra son:

Nombre clave Traducción Ejemplo
serif Con serifa Ejemplo de letra con serifa
sans-serif Sin serifa, de palo seco Ejemplo de letra sin serifa
cursive Cursiva o caligráfica Ejemplo de letra cursiva
fantasy Decorativa Ejemplo de letra decorativa
monospace Monoespaciada, de anchura fija Ejemplo de letra monoespaciada

Tienes más información sobre tipografías y web más adelante en este mismo documento.

Tamaño de letra
font-size: 12px;

Define el tamaño de letra. Puede usarse una altura en píxels o en las otras medidas que permiten las hojas de estilo, o bien usar un tipo de medidas que se adaptan a la pantalla y navegador del lector: small, medium y large. Para valores más pequeños o más grandes pueden añadirse x- al valor: así, para letras extra grandes usaremos xxx-large (el máximo de x son tres).

Estilo de letra
font-style: italic;
Nos permite ajustar el estilo de la letra: normal o italic (cursiva).
Variación de letra
font-variant: small-caps;
small-caps hace que el texto aparezca en versalita. normal lo deja así, normal.
Grosor de letra
font-weight: bold;
Permite marcar el texto como bold (negrita), bolder (negrita más marcada), lighter (fina) o normal.
Alineación del texto
text-align: justify;
Determina la alineación del texto: left (izquierda), center (centro), right (derecha), justify (justificado).
Decoración del texto
text-decoration: none;
Permite subrayar (underline), tachar (line-through), marcar (overline) o no hacer nada (none).
Sangría
text-indent: 5%;
Sirve para sangrar la primera línea del párrafo.
Transformación del texto
text-transform: capitalize;
Permite presentar el texto en mayúsculas (uppercase), minúsculas (lowcase), versalitas (capitalize) o dejar tal cual el texto (none).

Listas

En las listas, además de todos los elementos anteriores, hay algunas propiedades específicas:

Imágenes en lugar de puntos
list-style-image: url(http://sitio.com/graficos/lista.png);
Si cuando definamos la etiqueta ul colocamos este código, sustituiremos los típicos círculos por el gráfico que está guardado en la dirección indicada. Si quisiéramos definir los círculos de segundo nivel (dentro de la lista) lo que haríamos sería incluir, como si de una etiqueta más se tratara: ul ul {list-style-image: url(direccion), y así sucesivamente.
Puntos dentro o fuera del bloque
list-style-position: outside;
Define si los guiones o los ordinales se sitúan dentro del bloque de texto (inside) o fuera del mismo (outside).
Tipo de puntos
list-style-type: circle;
Si preferimos seguir con los tradicionales círculos, números… podemos definir con esta propiedad el aspecto. Los posibles valores en las listas no ordenadas son disc (disco), circle (círculo) y square (cuadrado). En las listas ordenadas podemos elegir decimal (números arábigos), lower-roman (números romanos en minúculas), upper-roman (números romanos en mayúsculas), lower-alpha (números griegos en minúculas) y upper-alpha (números griegos en mayúsculas).

Dinamismo en los hiperenlaces

En el mundo físico, cuando empujamos una puerta o apretamos un botón, éstos reaccionan. En entornos gráficos se busca imitar esto para que sean más fáciles de usar. El caso típico de elemento interactivo en la web es el hiperenlace, y por eso se buscan formas de que resalte sobre el resto del texto. Una forma es que cuando se pasa el cursor del ratón por encima, éste cambie de forma de una flecha a una mano.

Con las hojas de estilo podemos definir qué pasará cuando el cursor del ratón pase sobre el hiperenlace, cómo aparecerá cuando ya haya sido visitado, etc… Para hacer todo esto, usaremos las siguientes propiedades:

a:link {}
Define el estado del enlace cuando no haya sido visitado aún y el cursor no esté encima.
a:hover {}
Define el estado del enlace cuando el cursor esté por encima.
a:active {}
Define el estado del enlace cuando se está pulsando sobre él.
a:visited {}
Define el estado del enlace que ya ha sido visitado.

Estos elementos (:link, :hover, :active y :visited) se llaman pseudo-clases y pueden usarse con cualquier elemento, no sólo enlaces. No obstante, la aplicación general es algo que no soportan todos los navegadores aún: Internet Explorer 6 sólo reconoce las pseudo-clases que se usan con la etiqueta >a<, es decir, los enlaces.

Posicionamiento CSS

Una vez sabemos todo esto sobre css podemos empezar a utilizar los atributos de posicionamiento. Gracias a ellos, podemos colocar el texto y las imágenes donde queramos, de una forma bastante flexible.

Coordenadas del elemento (ejes x e y)
top, bottom, left y right
Especifican la distancia entre el objeto con respecto al elemento que lo contiene: arriba, abajo, izquierda y derecha. Se suele poner un valor vertical y otro horizontal, para que el posicionamiento sea visible. El valor puede especificarse en cualquier medida fija (px, pt, em…) o en un valor porcentual (%).
Ajuste del contenido
overflow
Indica qué sucede si el contenido de un elemento (por ejemplo, una caja de texto) excede el área que tiene asignado. Valores: visible, saca el texto sobrante de la caja; hidden, oculta todo lo que sobresalga de la caja; scroll, coloca una barra de movimiento a la derecha de la caja; y auto, lo deja a elección del navegador.
Posición en el eje z
z-index
Posicionando los objetos, éstos se superpondrán alguna vez. Esta propiedad permite asignar un orden de prioridades, mostrándose en primer lugar las que tengan un número más alto y al fondo las que tengan el más bajo (que puede ser 0).

Validando la hoja de estilo

Al igual que en xhtml, antes de dar por terminada una hoja de estilo hay que pasarla por un validador para comprobar que la hemos escrito correctamente. E igual que en el caso del xhtml, tenemos las opciones del W3C y del WDG.

Ten en cuenta que, aunque escribas una hoja de estilo perfecta, hay navegadores
que todavía no soportan algunos atributos, o no lo hacen correctamente. Por eso,
intenta emplear sólo los atributos más básicos. Y si tienes que emplear alguno más
avanzado, que no suponga una gran pérdida de posibilidades para los usuarios de
navegadores que no lo soportan.

Imágenes, color y tipografías para la web

Imágenes como contenido

Cuando se introdujo la posibilidad de colocar imágenes como parte de páginas web, el objetivo era que fueran puramente explicativas o complementarias al texto: es decir, parte del contenido. Sin embargo, pronto comenzaron a usarse las imágenes como pura decoración, rompiendo con el propósito inicial de la etiqueta xhtml img.

Esto fue comprensible en su momento porque sólo había una forma de colocar imágenes en las páginas, fueran éstas contenido o decoración. Pero actualmente, gracias a las hojas de estilo css, pueden separarse perfectamente ambos tipos de imágenes, usando las hojas de estilo para definir las imágenes decorativas y el xhtml para las imágenes que son contenido.

Imágenes para la web

Al principio de la web, la lentitud de las comunicaciones obligaba a economizar el ancho de banda, lo que se traducía en introducir el menor número de imágenes posible y que, a la vez, estas imágenes fueran lo más pequeñas posible. Entonces se hizo imprescindible el uso de tecnologías de compresión, como las que incorporan los formatos GIF o JPEG. Cada tecnología tiene un funcionamiento característico que la hace mejor o peor según la tarea.

GIF

El formato GIF soporta paletas de hasta 256 colores, y transparencias simples. Utiliza el algoritmo LZW para comprimir las áreas de color sólido, preservando los pequeños detalles. Por eso se conoce como compresión sin pérdida (lossless). Este tipo de compresión hace que los GIF sean aptos para representar tipografías, logotipos e ilustraciones sencillas. Este formato está soportado por todos los navegadores gráficos desde 1995.

JPEG

JPEG soporta paletas de varios millones de colores, lo que lo hace perfecto para imágenes fotográficas. Carece de transparencia y, al igual que GIF, está muy difundido.

La compresión JPEG funciona descartando selectivamente datos de la imagen. Empieza eliminando datos que no son perceptibles, pero si se comprime demasiado se produce un efecto feo (generalmente por debajo del nivel 6). Ya que se eliminan datos, a la compresión JPEG se la llama compresión con pérdida (lossy).

Aunque se suele preferir este formato para las imágenes fotográficas, si la nitidez es importante hay que recurrir a GIF. JPEG tiende a suavizar las imágenes al comprimirlas.

PNG

El formato PNG se creó como una alternativa abierta y potente para los gráficos de internet. Puede sustituir tanto a GIF como a JPEG, ya que tiene versiones de 8 y de 24 bit. Soporta transparencias más sofisticadas (de canal alfa) y proporciona imágenes perfectamente nítidas, no como JPEG.

Entonces, si PNG es tan superior a GIF y JPEG, ¿por qué no está tan difundido? uno de los motivos es que los PNG de 24 bit suelen ser más grandes que los JPEG equivalentes. Pero sobre todo es porque el soporte que ha tenido no ha sido suficiente hasta hace poco, e incluso todavía Internet Explorer 6 para Windows no lo soporta correctamente. Sin embargo el resto de navegadores actuales (Netscape Navigator, Mozilla, Opera, Konqueror, Safari…) lo hacen. Así que es cuestión de tiempo poder usar PNG sin más problemas.

El color

En la época en que nació la web, lo más común eran las tarjetas VGA, que mostraban un máximo de 256 colores en pantalla. De estos 256 colores, los sistemas operativos se apropian de 40, dejando libres 216 para los programas. Así, los navegadores podrían disponer de 216 colores. Con estos 216 colores se definió la paleta segura para la web, o web-safe, que garantiza que en lo que tu ordenador es rojo sea rojo también en los ordenadores de los
demás.

No obstante, la cantidad de personas conectadas a internet con sistemas de 256 colores es ínfima en la actualidad, así que pueden usarse muchos más colores que los aquí expuestos. Programas como Adobe Photoshop permiten convertir los valores cromáticos en valores RGB (por ejemplo, rgb: 256 256 256) o hexadecimales (por ejemplo, #ffffff). También pueden usarse nombres de colores en inglés, como red, blue, green… pero se recomiendan los valores hexadecimales.

Tipografías

La tipografía para la web no es ni mucho menos una ciencia exacta. Todos los sistemas no tienen los mismos tipos instalados, así que suele hacerse necesario especificar una lista de tipos de reserva, en caso de que el tipo preferido no se encuentre. No obstante, hay una serie de tipos que están suficientemente extendidos como para usarlos con cierta tranquilidad. Según el estudio de Code Style del 25 de junio de 2005, son:

  • Arial
  • Arial Narrow
  • Arial Black
  • Comic Sans MS
  • Courier
  • Courier New
  • Lucida Console
  • Impact
  • Tahoma
  • Trebuchet MS
  • Verdana

Es interesante consultar de vez en cuando estas estadísticas para saber qué tipos podemos usar con una cierta seguridad. Aunque esa seguridad no sea del 100% jamás.

Hojas de estilo para la impresora

Hemos comentado que las hojas de estilo ofrecen muchas posibilidades a la hora de presentar el contenido en pantalla, pero también nos permiten cambiar la presentación para otros medios. Es especialmente interesante aplicar hojas de estilo a la hora de imprimir, ya que lo que es necesario para navegar en pantalla no tiene por qué serlo a la hora de leer en papel. Por ejemplo, mientras que en pantalla es preferible usar la medida de píxels (px) o ems (em), en el papel es mejor usar los puntos (pt), ya que es la medida propia del medio impreso.

También podemos prescindir de barras de navegación, ya que en el papel carecen de sentido. Los enlaces a otras páginas deben señalarse de alguna forma porque en el papel no se puede pinchar. Una forma de hacer esto es diciéndole al navegador que imprima la dirección a la que apunta el enlace tras este, encerrándola entre paréntesis. Hay muchas posibilidades.

Comportamiento

Igual que no hemos profundizado en la creación y edición de contenidos multimedia, tampoco vamos a hacerlo en la programación de Javascript, dom o php, ya que son temas muy amplios que merecen ser tratados más profundamente.

¿Significa esto que no podemos usar Javascript o php en nuestras páginas? por supuesto que no. Hay muchas páginas que ofrecen código de forma libre con instrucciones claras y fáciles para introducir el código en nuestras páginas, así que podemos aprovechar este código. Sólo unas ideas básicas:

Mientras Javascript y DOM se ejecutan en el ordenador del visitante, PHP, los CGI, los SSI… se ejecutan en el servidor. Esto nos afecta decisivamente, porque mientras que los Javascript o el DOM dependen del soporte que les ofrezca el navegador del visitante, los que se ejecutan en el servidor nos permiten hacer muchas cosas sin que importe el navegador del visitante. Esto tiene algo malo también, ya que consumen bastante capacidad de proceso del servidor. Y poder ejecutar código en el servidor es algo que normalmente se paga.

Así que la opción más habitual es utilizar Javascript. A la hora de usarlo hay que hacerlo con cuidado, ya que ciertos códigos crean problemas de accesibilidad: no todos los navegadores soportan Javascript ni lo hacen de la misma forma, y algunos visitantes pueden tenerlo desactivado. Por eso hay que hacer las cosas de forma que, en el peor de los casos (navegador de texto sin soporte de Javascript), la información siga siendo accesible.

Poniendo la página en la Red

Para dar más o menos por terminado el proceso, hay que colocar la página web en un servidor, desde donde será accedido por los visitantes. A la hora de colocar la página en el servidor debemos conocer una serie de convenciones, muchas de ellas derivadas de que la gran mayoría de los servidores ejecutan sistemas operativos Unix.

En Unix, al contrario que en Windows, cuentan las mayúsculas y las minúsculas: es decir, Archivo.txt es un archivo distinto a archivo.txt. También hay que tener cuidado con los nombres largos de ficheros, los espacios y los caracteres extraños; lo mejor es poner nombres cortos a los ficheros, usar como mucho guiones y no emplear ni espacios, ni signos especiales, ni caracteres locales como vocales acentuadas o eñes.

También hay que tener en cuenta que las rutas en Unix se escriben con la barra /, no con la barra invertida como en Windows. Son muy útiles las rutas relativas: por ejemplo, si quiero enlazar una imagen a un documento y están ambos en la misma carpeta, vale con poner el nombre del fichero. Si la imagen está dentro de una carpeta llamada, por ejemplo, graficos, la enlazaremos como graficos/fichero.jpg. Si el archivo está en una carpeta a un nivel superior, usaremos una barra con dos puntos: ../fichero.jpg. Y si el gráfico está en una carpeta en un nivel superior, ../graficos/fichero.jpg.

Cuando subamos archivos a un servidor UNIX, debemos tener cuidado de si son subidos en modo ascii o en modo binario. Normalmente, el programa de ftp gestiona esto de forma transparente, pero saberlo no es malo :) deben subirse en binario ficheros gráficos y ejecutables: jpg, gif, png, exe… y en ASCII el resto.

Finalmente, en UNIX hay una forma de gestionar los accesos a los ficheros mediante los llamados permisos. Así se determina si un fichero lo puede leer, escribir y/o ejecutar (en el caso de que fuera ejecutable) sólo el usuario que lo creó, sólo el grupo de usuarios al que pertenece el usuario que lo creó, o cualquiera. Hay muchas combinaciones pero no es necesario aprenderlas. Seguramente sólo tengamos que tocar los permisos cuando instalemos programas en nuestro servidor, y en esos casos lo habitual es que nos indiquen qué debemos poner.

Páginas: 1 2 3 4

This entry was written by Carlos Rioja, posted on 2004-03-23 at 15:12, filed under Trabajos y etiquetado , .