Diseño y Programación de Computadoras: Programación Web con CSS III

Hasta ahora hemos estado manejando “cajas” cuyo contenido es simplemente texto. Sin embargo, si HTML hubiera manejado puro texto, sin incluír imágenes, habría sido una cosa sumamente aburrida y los únicos que estarían usando Internet serían tal vez en su mayoría los profesionistas y académicos acostumbrados a leer cientos de libros con pura información textual. ¿Qué tiene que decir CSS con respecto al manejo de imágenes?

Primero que nada, una imagen es invocada por cualquier navegador mediante la etiqueta HTML de imagen <img> en la cual necesariamente se tiene que especificar con el atributo “src” (source) el lugar en donde se encuentra almacenada la imagen que puede ser un archivo fotográfico “.jpg”, un archivo de imagen gráfica “.gif”, o inclusive un archivo portátil de redes “.png” (las imágenes en archivos de mapas de bits “.bmp” no son muy favorecidas en virtud de que al no usar ningún tipo de compresión las imágenes “bitmaps” tienden a ser archivos pesados cuyo tamaño resulta oneroso en términos del espacio requerido tanto para su almacenamiento como para su transmisión vía Internet). El formato usado es el siguiente (obsérvese que usamos al final de la línea una etiqueta autocerrante como se acostumbra hacerlo en el HTML moderno):

Usaremos la siguiente fotografía para fines de demostración, la cual está en formato “.jpg” y tiene una resolución de 540 por 413 pixeles:

A continuación se presenta una página Web la cual, si se pone en una misma carpeta (directorio) con la fotografía de arriba que tiene por título “Damita.jpg”, y se abre con un navegador actualizado, reproducirá la fotografía poniéndola en la esquina superior derecha de la ventana del navegador, a 20 pixeles debajo del tope (top) y a 40 pixeles del borde derecho (right) de la ventana del navegador:

Así pues, con CSS podemos “estilizar” cualquier imagen poniéndole cualquier tipo de borde que queramos y del color que sea, y la podemos posicionar en cualquier parte de la ventana del navegador. Después de todo, la imagen sigue siendo una “caja” que puede ser manejada como tal por CSS.

En el ejemplo de manipulación de imágenes que acabamos de ver, pudimos aplicarle un mismo y único estilo a la etiqueta de imagen <img> porque sólo había una imagen a ser manejada. Pero si vamos a tener varias imágenes sobre las cuales queremos aplicar diversos tipos de estilos, entonces tenemos que usar identificadores para hacer una distinción. Se había afirmado ya que con los identificadores “id” y “class” se le puede dar un nombre diferente y distintivo a cualquier elemento dentro de una página Web, y las imágenes no son ninguna excepción. En este caso, el formato de sintaxis a seguir es algo como lo siguiente:

Supóngase que al elemento general de imagen <img> le queremos dar un borde rectangular sólido de tres pixeles con color azul, y con un margen de espaciamiento externo de 5 pixeles. Entonces la regla de selección a usar será:

img {
border: 3px solid blue;
margin: 5px;
}

Esto tendrá el efecto de ponerele a todas las imágenes fotográficas que haya en la página Web un borde rectangular exterior azul de 3 pixeles de grosor, poniendo un margen de espaciamiento entre este elemento de imagen y los demás elementos de la página igual a 5 pixeles (invisible, desde luego).

En el ejemplo que veremos a continuación, pondremos varias fotografías en la página redimensionando la imagen original a varios tamaños. Para esto, un valor de propiedad que nos resultará útil es el valor auto, el cual nos permite cambiar el tamaño de la imagen que será mostrada por el navegador de modo tal que la proporción usada en el redimensionamiento horizontal será la misma proporción usada en el redimensionamiento vertical. Asignando el valor “auto” ya sea a la propiedad de anchura horizontal width o a la propiedad de altura height permite que el navegador haga un cómputo determinando qué valor debe tener la otra propiedad para que se mantenga igual y constante la “razón de aspecto” de la imagen (la proporción que hay entre la anchura y la altura originales) al cambiarle a la imagen su tamaño (si la altura es reducida a la mitad, con la propiedad auto el navegador deberá determinar que también la anchura debe ser reducida a la mitad para que la imagen no se deforme al ser cambiadas sus dimensiones horizontal y vertical. Ejemplos de la aplicación de esto son:

img.foto1 {
width: 200px;
height: auto;
}

img.foto2 {
width: auto;
height: 200px;
}

De cualquier modo, aún con el riesgo de deformar la imagen original, algunos navegadores permiten fijar por separado tanto la anchura como la altura de la imagen:

img.foto3 {
width: 150px;
height: 150px;
}

Usando como ejemplo el archivo fotográfico dado arriba con el nombre “Damita.jpg”, podemos escribir el código HTML de la siguiente página Web en la cual la ventana principal del navegador será subdividida con etiquetas <div> en dos grandes secciones que actuarán a manera de “renglones” (de imágenes):

Si se guarda el texto anterior en un archivo al cual se le dé la extensión “.html” y se abre con un navegador actualizado, se obtendrá en la ventana principal del navegador algo como lo siguiente:

Podemos ver que en el primer “renglón” de imágenes que se debe formar en la página Web al ser abierta con el navegador, la primera imagen fotográfica (de izquierda a derecha) es la imagen original, la más grande, en sus dimensiones originales, mientras que las restantes tres imágenes han sido reducidas disminuyendo progresivamente mediante la acción de la propiedad de anchura width y dejándole al navegador con la propiedad auto la tarea de determinar la altura adecuada para mantener la proporción debida. En el segundo “renglón” de imágenes, a la primera fotografía se le han especificado tanto anchura como altura, dándoseles valores iguales pese a que la imagen original es de anchura y altura diferentes, y se puede apreciar la distorsión que ocurre al no dejarle al navegador la tarea de hacer un ajuste automático. Las restantes tres imágenes del segundo renglón de imágenes han sido reducidas disminuyendo progresivamente la propiedad de altura height dejándole al navegador con la propiedad auto la tarea de determinar la anchura horizontal adecuada para mantener la proporción debida. (En pantallas de tamaño chico posiblemente no se alcancen a apreciar los dos “renglones” de imágenes al ser reacomodadas las imágenes incluso verticalmente una encima de otra para dar cabida a todo el contenido de la página.)

Con imágenes de tamaño reducido que sean lo suficientemente chicas, podemos usarlas como el “índice” de catálogo para permitir que cuando el usuario haga “clic” en cualquiera de esas imágenes pueda ser enlazado y llevado hacia otra página Web relacionada con la imagen usada como índice. Pero esta acción llevada a cabo con el Mouse ya no es algo que caiga dentro del ámbito de CSS (lo más que puede hacer CSS es cambiar la forma del tipo de cursor cuando sea posicionado dentro de cada imagen-índice), se trata de algo que debe ser manejado como un evento mediante el lenguaje de programación JavaScript (o mediante el lenguaje Java)

Se espera que con los ejemplos que hemos visto el lector haya quedado convencido de que es posible manejar con CSS tanto elementos HTML que contengan texto como elementos HTML que contengan imágenes, acomodando todo en la página Web de muchas maneras dependiendo de la creatividad del programador Web.

Una propiedad que resulta útil para poner elementos HTML lado-a-lado (en lugar de la alineación obligada de arriba hacia abajo elemento-por-elemento que era la única opción posible cuando el lenguaje de marcado HTML apareció por vez primera) es la propiedad de flotación float. Esta propiedad nos permite tomar una presentación como la siguiente:

y reacomodar los primeros dos elementos (la imagen y el primer párrafo de texto) lado-a-lado de la siguiente manera:

La propiedad float puede tener tres valores: “left” (izquierda), “right” (derecha) y “none” (ninguna flotación).

A continuación, usando el archivo fotográfico de muestra dado arriba con el nombre de archivo “Damita.jpg”, se presenta el código fuente HMTL mostrando la propiedad float en acción. Como lo hicimos en las dos muestras de captura de imagen dadas arriba, usaremos en este ejemplo el texto tomado de un material popular de relleno usado en los borradores de prueba de los tipógrafos e impresores conocido como Lorem ipsum, se trata de un párrafo inspirado en un texto en Latín atribuído a Marco Tulio Cicerón pero con palabras alteradas, añadidas o removidas intencionalmente para que tal párrafo carezca de sentido, ya que el objetivo de este material de relleno de prueba es evitar que el lector desvíe su atención tratando de ponerse a leer el texto en lugar de fijarse en las demostraciones de los estilizados empleados; agregándose que el “Lorem ipsum” es usado frecuentemente en plantillas Web como un relleno temporal de un espacio que sera ocupado posteriormente con el verdadero texto final para el cual será usada la plantilla. (Si los estudiosos del Latín intentan traducir el “Lorem ipsum” al Castellano, terminarán con pura jerigonza absurda y sin sentido):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/1999/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />

<title>Flotacion de elementos HTML</title>

<style type='text/css'>

img {
width: 200px;
height: auto;
float: left;
margin: 10px;
border: 5 px solid black;
}

p {
font: 12px sans-serif;
}

</style>

</head>

<title>Flotacion de elementos HTML</title>

</head>

<body>

<div>

<img src='Damita.jpg' alt='foto de jovencita' />

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
</p>

</body>

</html>

Si se guarda el código fuente HTML anterior en un archivo con un nombre apropiado y se abre con un navegador, se verá que la imagen <img> es flotada hacia la izquierda (left), lo cual ocasiona que el contenido de texto del primer párrafo <p> (o bien el contenido de texto de los dos párrafos <p> , ello depende de la anchura horizontal que se le dé a la ventana del navegador) que siguen a la imagen (en el código fuente HTML) sea colocado a la derecha de la imagen.

Un elemento flotado siempre es tratado como un elemento de bloque. Cuando un elemento <div> es flotado, sus dimensiones cambian de modo tal que se expando lo suficiente para acomodar el contenido dentro del mismo. Usualmente, las dimensiones de un elemento <div> son expandidas para llenar el espacio horizontal de la ventana del navegador, lo cual significa que el elemento <div> ocupa el espacio reservado al equivalente de una línea horizontal completa que va de un borde interior de la ventana del navegador al otro borde interio. Sin embargo, cuando el elemento <div> es flotado, este ajuste (expansión) del espacio que ocupa no ocurre. Esto lo podemos comprobar con el siguiente código fuente en el cual el elemento <div> (el cual contiene una imagen <img> y un párrafo de texto, o sea un elemento <p>) antecede otros dos párrafos que le siguen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/1999/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />

<title> Flotacion de un elemento <div> </title>

  <style type='text/css'>

img {
margin: 10px;
border: 10px solid rgb(200,200,200);
}

p {
font: 12px sans-serif;
}

div#elementocompuesto {
text-align: center;
border: 10px solid lime;
background: lightpink;
margin: 5px;
  float: left;
}

</style>

</head>

<title> Flotacion de un elemento <div> </title>

</head>

<body>

  <div id="elementocompuesto">
<img src='Damita.jpg' alt='foto de jovencita' />
<p>La primavera se alegra con la juventud</p>
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
</p>

</body>

</html>

PROBLEMA: Guárdese el código fuente que se acaba de dar bajo un nombre de archivo apropiado y ábrase con un navegador. Hecho esto, bórrese en el código fuente la línea que se encarga de llevar a cabo la flotación del elemento <div> destacada en fondo amarillo:

float: left;

y guárdese el nuevo código volviendo a abrir la página con un navegador ¿Cuál es la diferencia entre ambos resultados dados por el navegador?

El ejemplo que se acaba de proporcionar debe dilucidar la diferencia básica entre el uso de la etiqueta <p> y la etiqueta <div>. Si el contenido entre ambas etiquetas es puro texto y no se usa atributo alguno, entonces ambas etiquetas son equivalentes y no producen diferencia alguna (de hecho, muchas páginas Web usan liberalmente las etiquetas <div> para enmarcar párrafos de texto en lugar de las etiquetas <p>). Sin embargo, las etiquetas <div> pueden hacer algo que no pueden hacer las etiquetas de párrafo <p>, pueden tener como contenido texto e imágenes, y son por lo tanto de un alcance mucho más amplio y de mayor utilidad que las etiquetas HTML de párrafo <p>. Ello se debe a que las etiquetas <div> son usadas para subdividir en varias secciones distintas lo que se va a poner en la ventana del navegador.

Con CSS, no sólo podemos ponerle bordes a las imágenes y posicionarlas o flotarlas a nuestro antojo dentro de una página Web. También podemos usar imágenes para darle a toda la ventana del navegador (o a un elemento dentro de la ventana del navegador) un fondo. Para esto usamos la propiedad CSS de fondo background-image así como la propiedad background-repeat que se encarga de “repetir” una imagen chica cuantas veces sea necesario para que a manera de mosaicos cubra el fondo de la ventana del navegador. Podemos resumir estas dos propiedades de con la siguiente tabla:

**Las propiedades de fondo**
Propiedad	Valores	Ejemplos
background-image	url("") ¦ ninguno	background-image: url("damita.jpg");
background-repeat	no-repeat repeat-x repeat-y repeat	background-repeat: repeat-x

Si usamos la siguiente imagen como “mosaico”:

llamándola “mosaico.jpg”, y la ponemos en una misma carpeta (directorio) con el siguiente texto HTML guardado como página Web en esa carpeta:

entonces al abrir la página se tendrá un texto con una imagen de fondo, formado precisamente por una serie de mosaicos acomodados horizontal y verticalmente uno tras otro hasta llenar la ventana principal del navegador:

Seguramente el lector habrá visto ya muchas páginas que usan este efecto CSS para proporcionar un trasfondo de imagen al texto (aunque no se acostumbra poner el texto dentro de una caja rectangular, dejando en cambio que la ventana principal del navegador sea la que actúe como caja contenedora). Este es otro efecto que antes de la llegada de CSS no era posible obtener con el etiquetado HTML tradicional.

El fondo de imagen que se produce en el ejemplo que acabamos de ver alcanza a todos los elementos HTML que pueda haber dentro de la página, en virtud de haberse usado la propiedad background-image para definir al selector “body” que es todo el cuerpo de la página, y es por ello que dentro de la caja en donde se tiene un párrafo de texto también se ejerce el mismo trasfondo. ¿Y si queremos que dentro de un elemento haya un trasfondo diferente o que no haya trasfondo alguno? En tal caso podemos lograrlo especificándolo para tal elemento contenido dentro del cuerpo de la página. Si usamos la propiedad de color de fondo background-color para definir un fondo blanco en la caja que encierra el párrafo de texto, lo cual equivale a hacer el siguiente cambio sencillo en la regla de selección que corresponde al elemento <p>:

p {

font-family: arial;
border: 5px solid red;
width: 300px;
height: 480px;
padding: 8px;
background-color: white;

}

entonces al abrir la página con un navegador encontraremos que adentro de la caja ya no hay un piso de mosaicos como el que hay afuera de la misma, el texto tendrá un fondo blanco, aunque podemos especificar también un fondo de color claro como:

background-color: antiquewhite;

De hecho, dentro del elemento <p> podemos usar también la propiedad background-image para especificar otro tipo de enmosaicado:

background-image: url(mosaicoalterno.jpg);

La situación en este último caso se torna interesante. Para toda la página se especifica como trasfondo cierto tipo de mosaico, mientras que para un elemento-párrafo <p> adentro de la página se especifica otro tipo de mosaico, habiendo una propiedad con valores conflictivos actuando sobre el elemento <p>. Aquí es en donde entra en acción lo que se entiende por “cascada”, el método mediante el cual CSS determina cuál de varios valores conflictivos en las propiedades, en este caso la propiedad background-image, debe tomar precedencia, y puesto que la norma indica que entre más específica sea una regla tanto mayor debe ser la prioridad que se le concede, la imagen de fondo especificada para el interior de la caja tomará precedencia dentro de la misma sobre la imagen de fondo especificada para toda la página.

Al querer hacer las cosas de un modo más profesional recurriendo a CSS, es aconsejable no descuidar otros detalles que pueden demeritar la calidad del trabajo. Uno de tales detalles es el uso de caracteres en Castellano que no se usan en el idioma Inglés. Tales detalles son las letras que llevan acento o diéresis así como la letra “ñ” que tiene puesta encima una tilde:

á é í ó ú ü ñ

usadas en palabras como:

águila
café
así
Rococó
Marilú
antigüo
año

El teclado básico en idioma Inglés carece de provisiones para tales detalles (las máquinas fabricadas para los países de habla hispana de hecho usan otro teclado diferente a los teclados usados en Norteamérica) en virtud de que en dicho idioma no se usan ni los acentos ni las diéresis ni la “ñ”, y el conjunto básico de 128 caracteres ASCII usados como referencia para la fabricación de los teclados de las primeras computadoras domésticas no tiene espacio para la representación de tales caracteres. En un principio, y para poder representar tales caracteres en archivos de texto, el conjunto básico de caracteres ASCII fue extendido para darle cabida a otros 128 caracteres incluyendo aquellos caracteres propios del Castellano así como algunos caracteres del alfabeto griego y símbolos matemáticos. De este modo, a la letra “á” se le asignó (arbitrariamente) el equivalente numérico ASCII 160 (A0 hexadecimal), a la letra “é” se le asignó el equivalente ASCII 130 (82 hexadecimal), a la letra “í” se le asignó el equivalente ASCII 161 (A1 hexadecimal) y así sucesivamente. El problema es que una cantidad cada vez mayor de navegadores no reconocen los símbolos del conjunto ASCII extendido (aunque siguen reconociendo todos los símbolos del conjunto ASCII básico), y cuando abren páginas Web elaboradas con caracteres tomados del conjunto ASCII extendido (a veces por copiado y empastado, otras veces manteniendo oprimida la tecla “Alt” del teclado a la vez que se oprime la secuencia numérica del caracter ASCII que se quiere obtener en el bloc de notas) simplemente ponen un símbolo desagradable como el siguiente:

o como el siguiente (algunos sistemas operativos y plataformas se limitan a dibujar una cajita vacía sin contenido alguno):

que dice haber encontrado algo que no reconoce y que dificulta la lectura.

Al caracter no-reconocido de hecho se le asigna en la norma ISO-Latin-1 una entidad numérica: la entidad “�” que es lo mismo (usando notación hexadecimal en lugar de notación decimal precediendo el equivalente hexadecimal con la “x” que en ISO-Latin-1 se interpreta como una indicación de que se trata de un número hexadecimal) que la entidad “�”, dando origen a los símbolos “FFDD” puestos dentro de la cajita que representa un símbolo no-identificado, un caracter cuyo valor es desconocido para el navegador que está trabajando bajo el supuesto de que todos los símbolos y caracteres que están llegando pertenecen al Unicode (compatible con la norma ISO-Latin-1), indicándose así que el valor es desconocido o no es representable en Unicode tratándosele como un símbolo especial no reconocible por el navegador. Podemos “forzar” la aparición del símbolo en cualquier navegador instalado en casi cualquier plataforma intercalando precisamente la entidad “�” en los lugares en donde esperaríamos que ocurren tales efectos:

Tomar caf� sin cafe�na a�o tras a�o es lo �ptimo.

Al usar entidades tomadas de la norma ISO-Latin-1, en lugar de obtenerse lo anterior el navegador reconocerá todos los caracteres e imprimirá lo siguiente (lo cual dicho sea de paso debe aparecer completo y en forma correcta en todos los navegadores):

Tomar café sin cafeína año tras año es lo óptimo.

Es posible que el lector de páginas Web elaboradas en Castellano se haya encontrado ya con estos descalabros que en mucho demeritan la calidad de la presentación. El problema no fue impericia en la creación de muchas de tales páginas, ya que los primeros navegadores sí reconocían los caracteres del conjunto ASCII extendido (además de siempre reconocer los caracteres del conjunto ASCII básico, lo cual no ha cambiado), pero dejaron de reconocerlos cuando empezó la gran transición hacia la convención Unicode. Esto tiene un remedio, y el remedio consiste en revisar todo el código fuente de tales páginas Web problemáticas y reescribir los caracteres no-reconocidos usando los caracteres especiales tomados no del código ASCII extendido sino de la norma ISO-Latin-1 (reproducida entre los anexos puestos al final de ésta obra). De este modo, los caracteres ASCII son reemplazados con entidades que están consignadas en la norma ISO-Latin-1. Para la letra con acento “á” usamos la entidad “á” mientras que para la letra con acento “é” usamos la entidad “é” y así sucesivamente; para la letra “ñ” podemos usar la entidad “ñ” y para la letra “ü” podemos usar la entidad “ü”:

águila

café

antigüo

año

Se estima que alrededor del mundo hay decenas de miles (quizá cientos de miles) de páginas Web en Castellano que requieren ésta corrección extensa, aunque antes de emprender esta pesada tarea los programadores Web de sitios en Castellano bien harían en probar sus creaciones en navegadores en ambas versiones tanto en Castellano como en Inglés (desafortunadamente, cuando se instala un navegador en una máquina, no se puede instalar en dos idiomas distintos en una misma máquina, y la alternativa es tener una máquina con un sistema operativo en Inglés en ella y otra máquina con un sistema operativo en Castellano en ella), teniendo cuidado de activar (en el sistema operativo) la opción de idioma (en caso de que la haya) tanto a Inglés como a Castellano. En todo caso, lo importante a tener en cuenta es que el uso de los caracteres de la norma ISO-Latin-1 es algo que nunca falla, todos los navegadores reconocen tales entidades porque son universales.

Otra fuente de errores al tratar de ser ortográficamente “correcto” en Castellano en la construcción de sitios Web consiste en elaborar el código fuente de una página Web en un editor de texto, correcto en todos sentidos en lo que a la ortografía concierne, y al guardar el archivo olvidarse de tomar en cuenta de que precisamente para evitar este tipo de situaciones se le presentan al programador varios formatos de codificación para el almacenamiento de dicho archivo. En un sistema operativo Windows, por ejemplo, el bloc de notas típico presenta en su borde inferior una lista de opciones bajo un título como “encoding” (codificación):

Se se guarda el archivo en la forma predeterminada (ANSI, que es la que corresponde al código ASCII) creyendo (como muchos lo hacen) que esta codificación por ser la predeterminada es la mejor para lo que se está discutiendo aquí, no se guardará el texto en ninguna de las otras codificaciones como como “Unicode”, “Unicode big endian” o “UTF-8”, y al no hacer tal cosa se estará incurriendo en el error indicado. Pero... ¿cuál de las otras opciones de codificación conviene seleccionar? En esto nos puede ayudar lo que especificamos a un lado de la cabecera DOCTYPE (si la hay). Si se tiene algo como:

allí mismo se le está indicando al navegador que debe tratar todos los caracteres bajo la convención UTF-8, y en tal caso el código fuente deberá ser necesariamente un archivo “.html” que fue guardado desde el bloc de notas o el editor de texto precisamente con los caracteres codificados como caracteres UTF-8. La opción “Unicode” también puede funcionar, y es precisamente la que embona con la norma ISO-Latin-1. Se agregará aquí que quienes tienen más experiencia en la solución de este tipo de problema son los asiáticos en virtud de que ninguno de sus caracteres (chino, japonés, etc.) están disponibles ni siquiera en el código ASCII básico o extendido.

Lo anterior es en lo que toca a lo que es enviado desde un sitio Web a las máquinas de los usuarios que se conectan a dicho sitio. Sin embargo, este es un problema no de una sola vía sino de dos vías, sobre cuando en una página Web se le piden datos al usuario tales como su nombre, y al enviar sus datos al servidor Web intenta ser “ortográficamente correcto” y en vez de enviar su nombre eliminando los acentos y las “ñ” toma tales caracteres (por copiado y empastado) de un editor de texto que tiene codificado su nombre en código ASCII extendido, remitiendo algo así como “Andrés Piñeiro González” enviándole al servidor Web varios caracteres que no forman parte de la norma ISO-Latin-1. Esto, desde luego, también tiene solución, y la solución consiste en incorporar en el código CGI (o Perl, o Ruby, etcétera) del servidor Web alguno de varios algoritmos disponibles para recibir y procesar todos los caracteres y símbolos que están llegando al servidor Web enviados por el usuario, transformando los caracteres de su equivalente en código ASCII extendido a su equivalente bajo la norma ISO-Latin-1 en lugar de descartarlos reemplazándolos con la famosa cajita FFFD.

En relación a las cosas que se pueden hacer con cualquier texto que forme parte del contenido de una página Web, veremos un efecto que de hecho era algo que se podía obtener en las ya obsoletas máquinas de escribir mecánicas mediante un ajuste que se hacía con una palanca reguladora. Aprovecharemos el tema para repasar el uso de una unidad de longitud que resulta útil en el manejo de textos con CSS: la unidad em, la cual deriva su nombre de la letra “M” mayúscula (la letra “M” en inglés se pronuncia precisamente como “em” en español) que por su altura y por su anchura que imaginamos iguales es representativa de un caracter alfabético con máxima altura y máxima anchura. Algo que tiene una longitud “4em” tendrá una longitud igual a cuatro tantos del tamaño de los caracteres del texto que están siendo utilizados, y es por lo tanto una unidad relativa. Tal vez no esté claro en la mente de algunos lectores en dónde puede ser de utilidad el uso esta unidad relativa. Una forma de darle mayor claridad a una aplicación práctica este tipo de unidad es tratando de reproducir en el texto puesto en la pantalla del monitor el efecto del “texto en doble espacio” mediante el cual el espaciado entre dos líneas de texto cualesquiera de un texto es ampliado intercalando entre cada par de líneas de texto un espacio vacío equivalente en altura no a una línea de texto sino a dos líneas de texto (vacías), lo cual era (y sigue siendo) usado en documentos legales y oficiales e inclusive en presentaciones de mercadotecnia (las máquinas de escribir mecánicas del pasado tenía una palanca de ajuste para lograr obtener este espaciado adicional entre las líneas de texto). Antes del advenimiento de CSS, este efecto era imposible de obtener usando el etiquetado de marcado HTML convencional. En CSS podemos dar este espaciado con la ayuda de la propiedad line-height (altura de línea):

**La propiedad line-height**
Propiedad	Valores	Ejemplo
line-height	normal ¦ número longitud ¦ porcentaje	line-height: 2.5em;

Pondremos en práctica esta propiedad con un ejemplo. Para ello, fórmese la siguiente regla de estilos:

p {

font: 12px arial;
border: 4px solid green;
background: lightyellow;
padding: 3px;
margin: 8px;
line-height: 3em;

}

Esta regla de estilo afectará a todos los elementos <p> de la página, o sea a todos los párrafos, poniéndole a cada elemento <p> un borde verde y poniéndole al texto del párrafo un fondo amarillo.

A continuación, tenemos como ejemplo una página HTML que incorpora esta estilización a dos párrafos separados (para el primer párrafo se ha tomado nuevamente algo del texto conocido como Lorem ipsum):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/1999/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />

<title>Texto a doble espacio</title>

<style type='text/css'>

p {
font: 12px arial;
border: 4px solid green;
background: lightyellow;
padding: 3px;
margin: 8px;
line-height: 3em;
}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>

<p>
El autor Aaron Weiss afirmó en una ocasión en su libro
<i>JavaScript ¡Fácil!</i> publicado por Prentice-Hall en
1997 que con JavaScrpt una persona normal y ordinaria
familiarizada con Internet puede crear páginas Web con la
elegancia de un gurú experimentado, agregando que no hacen
falta signos cabalísticos, lenguajes extraños ni costosos
compiladores; y que basta con un poco de sentido común y
una mente abierta. Esto puede ser cierto para aplicaciones
básicas del lenguaje JavaScript que ciertamente no es
extremadamente rígido y formal y es muy tolerante en lo
que a la sintaxis se refiere. Sin embargo, hay aplicaciones
más sofisticadas en las cuales la cantidad de código
JavaScript es extenso y en las cuales es más fácil incurrir
en equivocaciones y hasta en errores de lógica.
</p>

</body>

</html>

PROBLEMA: Guárdese el código anterior en un archivo, y ábrase dicho archivo en un navegador habilitado para manejar CSS. ¿Qué es lo que se lleva a cabo?

La ejecución de lo que se acaba de proporcionar tendrá el efecto de poner en la pantalla dos párrafos separados, con cada párrafo de texto enmarcado en un borde de color verde y con el fondo de cada caja de texto siendo de un color amarillo. En cada párrafo, el espaciamiento entre las líneas de texto es el conocido como “doble espacio”. El texto de hecho está espaciado al cuádruple, con una altura de línea de 3em (cuádruple porque el tipo de fuente del texto que se imprime usa un tamaño igual a 1em). Considerando que el multiplicador de “em” puede ser un número fraccionario como 2.35 permitiendo muchos otros tipos de espaciamiento entre las líneas de texto, esto permite un “ajuste fino” capaz de satisfacer las exigencias del más estricto especialista en artes gráficas.

Algunos creadores de páginas Web que están acostumbrados a usar y a pensar en distanciamientos absolutos en pixeles, cada uno de los puntos luminosos de color que se pueden apreciar viendo muy de cerca cualquier pantalla, tal vez se sientan algo incómodos con el uso de las dimensiones “em” para lo que tenga que ver con el texto puesto en la pantalla y sus espaciamientos relativos, y tal vez prefieran seguir usando el pixel “px” en lugar de la dimensión relativa “em” para todo lo que será mostrado en la página Web. Si el tamaño especificado de la fuente de texto es de 12 pixeles, un “em” será una unidad de medición igual a 12 pixeles. Pero ¿por qué no seguir usando pixeles en lugar del “em”? El problema con los pixeles es que, siendo unidades absolutas, no pueden ser sujetos a un escalamiento de acuerdo a las preferencias de los usuarios. Además de que, al menos en lo que al texto se refiere, siempre es más fácil trabajar con múltiplos relativos de algo (“el doble de”, “el triple de”, “2.25 veces mayor”) que tener que estar haciendo cálculos para determinar en unidades absolutas valores como 137 pixeles, 54 pixeles, etcétera. Y si se trata de imprimir una página Web sin tomar en cuenta que los puntos de resolución de una imagen en la pantalla luminosa no necesariamente (de hecho, nunca) corresponden directamente con los puntos de resolución en la impresora, si no se le permite al navegador hacer un escalamiento (para fines de impresión) de lo que tenga que ver con la parte textual, entonces el resultado de la impresión tal vez no sea lo que se esperaba (afortunadamente, las impresoras más modernas han logrado corregir y compensar las diferencias de resoluciones entre la pantalla luminosa y la impresora). En todo caso, es aconsejable usar el dimensionamiento relativo con unidades “em” en lo que tenga que ver con las cajas contenedoras de texto y el texto en sí, y usar el dimensionamiento absoluto con pixeles para otras cosas tales como el posicionamiento de las cajas de imagen en la pantalla.

Y ya que estamos metidos de lleno en lo que tiene que ver con las propiedades CSS, la ocasión es propicia para repasar el asunto de las listas, tanto las listas no-ordenadas como las listas ordenadas. Las etiquetas de las listas no-ordenadas <ul> (al igual que las etiquetas de las listas ordenadas <ol>) son elementos HTML, y en la evolución conjunta de HTML y de CSS se les ha agregado la capacidad de poder ser también estilizadas. ¿Pero de qué tipo de estilización estamos hablando? La más obvia: el tipo de “balas” (bullets) que son puestas al principio de cada artículo de una lista usadas tanto para fines decorativos como para enfatizar el hecho de que se trata de una lista. Aquí hace su aparición la propiedad de estilo de lista list-style-type:

**La propiedad list-style-type**
Propiedad	Valores	Ejemplo
list-style-type	disc ¦ circle ¦ square none ¦ decimal	list-style-type: square;

A continuación se tiene una página Web completa en la cual se pone en práctica las estilizaciones usadas para escoger el tipo de “bala” a ser usada en listas no-ordenadas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html "lang="en">

<head>

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />

<title>Ejemplos de balas en listas no-ordenadas</title>

<style type='text/css'>

.bala-disco {
list-style-type: disc;
}

.bala-circulo {
list-style-type: circle;
}

.bala-cuadrado {
list-style-type: square;
}

.bala-ninguna {
list-style-type: none;
}

</style>

</head>

<body>

<h2>Ejemplo de bala disco</h2>

<ul class="bala-disco">
<li>Manzanas</li>
<li>Duraznos</li>
<li>Peras</li>
<li>Mangos</li>
</ul>

<h2>Ejemplo de bala círculo</h2>

<ul class="bala-circulo">
<li>Doberman</li>
<li>Labrador</li>
<li>Dalmata</li>
<li>Boxer</li>
</ul>

<h2>Ejemplo de bala cuadrado</h2>

<ul class="bala-cuadrado">
<li>Madrid</li>
<li>Lisboa</li>
<li>Washington</li>
<li>Londres</li>
</ul>

<h2>Ejemplo de ninguna bala</h2>

<ul class="bala-ninguna">
<li>Varicela</li>
<li>Rubeola</li>
<li>Sarampión</li>
<li>Viruela</li>
</ul>

</body>

</html>

Hay dos puntos relevantes para aprender aquí. El primero es que podemos usar el atributo de clase class dentro de la etiqueta de listado no-ordenado <ul>, y el segundo es que podemos cambiar a nuestro antojo el tipo de bala usado para distinguir cada artículo dentro de la lista, inclusive podemos pedir que no se muestre bala alguna. En CSS podemos dar otros valores a la propiedad list-style-type, entre ellos el valor “decimal”, con el cual pondremos una jerarquía numérica a la lista de artículos en la lista. Sin embargo, esto es contrario al contexto de una lista no-ordenada en la cual ninguno de los artículos de la lista está priorizado sobre el otro. Esto, desde luego, no lo puede anticipar CSS, puesto que no puede adivinar lo que el creador de una página Web tenga en mente, cosas como ésta recaen por completo en el sentido común del programador.

¿Qué tan a fondo podemos ir en la estilización del contenido de una página Web? Hasta donde queramos (esto supone que el navegador es un navegador actualizado y de amplio uso capaz de reconocer todas las convenciones del CSS más reciente). En la lista no-ordenada anterior, podríamos haber ido aún más adentro estilizando de alguna manera cada artículo de la lista con sus propios identificadores, teniendo algo como lo siguiente:

<ul>
<li class="solventes">agua</li>
<li class="solventes">alcohol</li>
<li class="solventes">aceite</li>
<li class="adelgazadores">thinner</li>
</ul>

Todas, absolutamente todas las etiquetas HTML usadas para crear páginas Web, pueden ser objeto de estilización CSS. Inclusive las etiquetas <html> que son la raíz del árbol de jerarquías de los elementos HTML y que pueden ser consideradas como fundamentales no se escapan de ser objeto de estilización, y repasando algunas páginas Web que circulan en Internet podemos encontrar reglas de selección como la siguiente que fija la estilización para una página Web completa:

html {
height: 100%;
background-color: #EEE;
background-image: linear-gradient(top, #233, #FFF);
}

Sin embargo, en lo que toca a los elementos particulares interiores que forman parte de la página, aunque se haya impuesto una estilización CSS para toda la página Web de cualquier modo al ir de lo general a lo particular podemos imponer estilizaciones CSS localizadas, aplicables a los elementos HTML que forman parte de la página, y habiendo sido dada la regla de selección que se tiene arriba se le puede agregar la siguiente regla de selección para la parte <body> de la página:

body {
margin: 0 auto;
padding: 5px;
border: 20px solid #FF0;
border-top: none;
font: Verdana, Arial, Helvetica, sans-serif;
}

Considérese la siguiente página Web:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Una cascada de estilos</title>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/1999/xhtml1/DTD/xhtml1-strict.dtd">

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />

<title>Una cascada de estilos</title>

<style type='text/css'>

html {
height: 100%;
background-color: #EEE;
background-image: linear-gradient(top, #233, #FFF);
}

body {
margin: 0 auto;
padding: 5px;
border: 20px solid #FF0;
border-top: none;
font: Verdana, Arial, Helvetica, sans-serif;
}

p {
font-family: sans-serif;
border: 5px solid red;
width: 300px;
height: 480px;
padding: 8px;
background: #FFF;
}

</style>

</head>

<body>

<p>Esta es una demostracion de una cascada de estilos</p>

</body>

</html>

El borde grueso de color amarillo que aparece en torno al interior de la página está especificado por la regla de estilos dada para la etiqueta <body> con el selector “body” con la propiedad “border” fijada con el color “#FF0”, especificándose con el valor “none” dado a la propiedad “border-top” que no haya borde amarillo en la parte superior. El color gris plateado para todo el interior de la página está especificado con la propiedad “background-color” recibiendo un valor “#EEE” dado para la etiqueta <html> con el selector “html”. Sin embargo, este color gris plateado no es puesto en el interior de la caja de bordes rojos en virtud de que el estilo CSS de esta caja para los elementos de párrafo <p> de la página tiene especificado un color de fondo blanco con la propiedad “background” recibiendo un valor “#FFF”. Sin embargo, si en la regla de selección para los elementos <p> se borra la línea:

background: #FFF

y se vuelve a abrir la página, se verá que también en el interior de la caja para los elementos <p> se tendrá como color de fondo un gris plateado.

El hecho de que podamos estilizar prácticamente cualquier cosa en el interior de una página que tenga etiquetas HTML nos invita a repasar uno de los recursos más importantes usados para dar contenido a las páginas Web: las tablas. La estilización puede alcanzar incluso hasta las celdas individuales de una tabla, en donde podemos meter no únicamente texto sino hasta imágenes. Después de todo, cada celda de una tabla puede ser considerada como una “cajita”, un elemento HTML más a nuestra disposición. Las estilizaciones de las tablas HTML es algo que amerita ser considerado por separado dándole la importancia que merece, pero para darnos una idea del grado de sofisticación al que se puede llegar, considérese algo que seguramente el lector habrá encontrado frecuentemente al abrir páginas Web de periódicos enlínea: los calendarios. Generalmente, en estos calendarios se muestra una “hoja de calendario” con un mes completo, dentro de los cuales se puede escoger cierto día para marcar la fecha en un campo o para ir hacia una página Web que corresponde a la fecha seleccionada. Resulta que cada una de estas “hojas de calendario” como la siguiente hoja (tomada del ajustador de tiempo interno de máquina del sistema operativo Windows XP):

es una tabla de seis renglones y siete columnas (uno de los renglones se usa para distinguir los días como Lunes, Martes, Miércoles, etc.). Existe una gran variedad de formas en las cuales se pueden implementar tales calendarios mediante tablas HTML (hay bastante información y código sobre este tema disponibles en Internet), y con la ayuda de JavaScript podemos darle interactividad a cada uno de los “días” dentro de la hoja de un calendario para que al hacer “clic” con el Mouse dentro de cierto día se ejecute cierta acción (por ejemplo, cargar en una página nueva o en una pestaña de página nueva el contenido de algún artículo o noticiero). Estas son precisamente las técnicas usadas por los profesionales para impartir respetabilidad a sus creaciones.

De este modo, manipulando todo lo que sea manipulable a través de una etiqueta HTML, podemos seguir empujando nuestras estilizaciones hasta el límite recorriendo varios caminos, aunque es importante tener precaución en la aplicación de propiedades CSS que nos pueden llevar a situaciones contradictorias (tratar de meter una cajita HTML dentro de otra cajita HTML de menor tamaño es apenas una de las muchas equivocaciones posibles). Y de nueva cuenta, corresponde al programador Web el saber aplicar el sentido común para evitar caer en pifias o en cosas que si bien tal vez puedan ser manejadas de algún modo por el navegador que está usando para llevar a cabo sus pruebas tal vez no embonen en los demás navegadores ocasionando incluso un rechazo total de la página con la negativa a descargar el contenido de un enlace.

Quizá el área de mayor contención en la aplicación de CSS se ubique en la elaboración de materiales para ser vistos no en computadoras domésticas o laptops con pantallas grandes sino en dispositivos portátiles pequeños tales como los teléfonos inteligentes de pantalla chica. Todos los materiales que puedan ser obtenidos de Internet que quepan en la pantalla de un dispositivo portátil indudablemente podrán ser obtenidos y vistos también en una computadora doméstica con una pantalla grande, pero lo opuesto no es necesariamente cierto, no todo lo que sea elaborado para ser visto en una computadora doméstica podrá ser accesado en un dispositivo portátil de pantalla pequeña. Tomando en cuenta la gran cantidad de personas que están obteniendo toda su información Internet a través de dispositivos portátiles, tal vez el programador Web quiera elaborar materiales con este mercado de usuarios en mente. Y para la presentación de sus materiales en dispositivos portátiles, CSS puede ser de utilidad, aunque hay que tener cuidado de no estirar demasiado las posibilidades de CSS para algo para lo que el contenido presentacional no fue diseñado. En una situación así, es recomendable descargar de la Web emuladores (simuladores) de dispositivos portátiles para tener una idea sobre cómo se verá en un dispositivo portátil cierta página Web estilizada con CSS. Suponiendo, por ejemplo, que queremos ver cómo se verá en la pantalla de un teléfono inteligente Nokia una página que se ha diseñado para proporcionar información acerca de costos de alojamiento y hoteles disponibles en cierta ciudad, una vez elaborada la página y hay que correr la simulación usando el emulador del teléfono Nokia, lo cual nos dará una idea sobre lo que tenemos que modificar o incluso remover así como lo que se puede dejar sin ocasionar muchos problemas al ser descargado en un teléfono Nokia. Lo malo es que hay una gran variedad de teléfonos inteligentes, cada uno con sus propias capacidades, además de la marca Nokia (como el dispositivo móvil Blueberry, además de otros tales como el iPad), que vuelve poco fácil el poder establecer un denominador común en este rubro. Aquí, al igual que en los tiempos en que empezaron a ser usadas y programadas las primeras computadoras, es imposible hablar de convenciones universales y es necesario experimentar para tratar de encontrar ese común denominador en lo que pueda ser si no la totalidad al menos una mayoría de los dispositivos móviles que están siendo usados “allá afuera”.

domingo, 19 de enero de 2014

Programación Web con CSS III