Curso HTML Capitulo 5 y 6


Posiblemente, la forma mas elegante y "profesional" de usar los links en las imagenes sea el mapa interactivo. El problema consiste en que también es la forma mas compleja y trabajosa. Si quieres saltarte este capítulo hasta que domines mejor el tema, yo lo entenderé y no te culparé por ello.

Veo que te interesa lo suficiente como para seguir leyendo, pues vamos allá. El mapa interactivo es, simplemente, un gráfico en el que hemos definido una serie de zonas. Cada una de estas zonas tiene un link asociado que enviará a donde decidamos a quien pique en él con el ratón.

El primer paso para la creación de un mapa es, logicamente, crear una imagen sobre la que trabajar, decidiendo qué zonas corresponderán a cada link. Suponiendo que hayas hecho esto (no es tan facil como parece, pero esto es un curso de Edición Extremadamente Simple de HTML, no de grafismo), el siguiente paso es poner por escrito esas zonas en la siguiente estructura:

MAP NAME=nombre
AREA SHAPE=tipo COORDS=coordenadas HREF=dirección
..
...
/MAP

¡¿Qué demonios es esto?! Ya te avisé, esto no va a ser un camino de rosas, veamoslo poco a poco:

MAP y /MAP le dicen al navegador donde empieza y acaba la definición del mapa (hasta aquí es facil). Este tag tiene una opción que es NAME=, y que sirve para darle un nombre al mapa. Nombre que luego tendremos que usar (Sin prisas, todo llegará).

AREA es un tag que no hay que cerrar y que define una zona concreta de nuestro mapa, la que, al picar con el ratón, nos linkará a un lugar concreto. O sea, que habrá tantos AREA como links queramos en nuestro mapa. Veamos sus opciones:

SHAPE= define la forma de esta zona, que puede ser: RECT (Rectangular), CIRCLE (Circular) o POLY (Un polígono cualquiera).

COORDS= indica las coordenadas de la zona que ya definimos en SHAPE=, su valor depende del tipo que escogieramos en esa opción como podemos ver abajo:

En el caso de que usaramos RECT, COORDS= indicará cuatro números separados por comas, los dos primeros son las coordenadas X e Y del vértice superiór izquierdo, y los dos últimos las coordenadas X e Y del inferior derecho.

En el caso de CIRCLE, COORDS= indicará tres números separados por comas, los dos primeros son las coordenadas X e Y del centro del circulo, y el tercero su radio.

Y en el caso de POLY, COORDS= indicará tantos pares de números separados por comas com vertices tenga el poligono. cada par indicando las coordenadas X e Y de un vertice.

HREF=, por último, indica la dirección a la que el link del area indique.

Una vez definidas las zonas, hay que situar la imagen en la peich. esto se hace como para cualquier otra imagen con link, pero con una minuscula y sutil diferencia:

A IMG SRC=grafico USEMAP=#nombre /A

USEMAP= es una opción de que hace que el browser sepa que se las vé con un mapa interactivo. y que este mapa se llama lo que hayas puesto en nombre (¡Ajá! Ya sabemos para qué servía la opción NAME= en el tag MAP)

CAPITULO 6
Bueno, llegó el momento de ponernos un poco serios. Al principio de este curso de Edición Extremadamente Simple de HTML advertí que había un par de cosas fundamentales que dejaría para después. Bueno, pues ahora es después.

Lo primero son los códigos de caracteres extendidos. Sin darnos cuenta ya hemos usado uno de ellos ¿Recordais al viejo amigo que nos permitió poner un espacio donde queríamos? Bueno, pues ese es uno de estos códigos. Aclaremos un poco las cosas:

El HTML usa caracteres de siete bits, esto significa que cada letra o signo se codifica mediante un número de siete bits. A los anglohablantes en general esto no les causa problemas de ninguna clase, puesto que todas las letras que ellos usan están dentro de las codificadas por esos siete bits. Lo malo es que a los que hablamos otros idiomas nos empiezan a faltar letras. Este es el caso, por ejemplo, de las letras Ñ, Ç, ß, Ø, Æ, y todas las vocales acentuadas de algún modo. Todas estas (y muchas otras) se codifican mediante ocho bits, y no serán reconocidas por un navegador que solo use caracteres de siete bits. Para solucionar esto se usan una serie de códigos, llamados entidades, que representan a estas letras. Todos estos códigos comienzan con el simbolo ampersand (&) y acaban con un punto y coma (;). Los mas habituales para los hispanohablantes son:

Carácter

Representación

<

<

>

>

á

á

Á

Á

é

é

É

É

í

í

Í

Í

ó

ó

Ó

Ó

ú

ú

Ú

Ú

ñ

ñ

Ñ

Ñ

Carácter

Representación

ç

ç

Ç

Ç

ü

ü

Ü

Ü

&

&

¿

¿

¡

¡

"

"

·

·

º

º

ª

ª

¬

¬

©

©

®

®

Posted by Sergio Eduardo Rodriguez Arce | en 10:04

0 comentarios:

Publicar un comentario