Las páginas web de hoy en día no serían nada sin la capacidad de mostrar imágenes. Hemos hablado de cómo estructurar contenido pero normalmente nos hemos referido a textos. Ya es hora de poder colocar en nuestras páginas web todo tipo de imágenes.
Imágenes
Habrás oído que las webs son un conjunto de hipertextos. También se dice que son archivos en formato hipermedia, una palabra que combina los conceptos hipertexto y multimedia. Es decir: las páginas web son un conjunto de archivos multimedia (que combinan diferentes formatos como texto, imágenes, audio o vídeo) enlazados entre sí de una manera lógica no lineal.
Qué formato de imagen usar
Aunque hay todo tipo de formatos para los archivos de imagen y la mayoría de los navegadores son compatibles con muchos de ellos, solo verás a tres tipos diferentes en casi todas las páginas web del mundo. Éstos son los archivos GIF, JPEG (o JPG) y PNG.
En mi opinión lo mejor es usar archivos PNG porque este formato fue inventado expresamente para las webs y permite crear partes invisibles que ayuda mucho al diseño web. Por otro lado los archivos JPEG son de peor calidad pero más ligeros, lo que nos permitiría almacenar un mayor número de imágenes en un sitio servidor con un espacio en disco escaso.
<img/>
En HTML usamos la etiqueta <img/> para insertar una imagen en nuestra web. Ésta necesita de dos atributos imprescindibles:
- src="ruta" para indicar la dirección donde el servidor debe buscar la imagen (las imágenes no las "pegamos" al texto, sino que las tenemos guardadas en alguna de las carpetas contenedoras del sitio web o en una URL específica).
- alt="texto" para escribir un texto alternativo que se mostrará en caso de que el proceso de subir la imagen de error.
Hay otros cuatro atributos que son opcionales pero muy útiles:
- width="número" nos define el ancho de la imagen. En caso de no definir también la altura, la imagen quedará escalada a proporción.
- height="número" nos define la altura de la imagen. En caso de no definir también la anchura, la imagen quedará escalada a proporción.
- ismap="nombre" y usempa="nombre" sirven para crear mapas de imagen (leer más abajo).
Por último existen otros atributos para el tratar el estilo (align, border, hspace, vspace...) pero, una vez más, mejor dejamos esas cosas para el lenguaje CSS.
¡ATENCIÓN! El atributo longdesc="dirección" ha pasado a la historia. Los navegadores ya no lo interpretan y en HTML5 está obsoleto.
Un ejemplo de imagen sería:
<img src="http://wp.granollers.cat/musiknviu/wp-content/uploads/sites/13/2014/05/logomagret.jpg" alt="Magret De Paco"/>
Y el resultado sería:
Si lo deseamos podríamos utilizar los elementos <body background="ruta"> para poner una imagen de fondo de página o <table background="ruta"> para poner una imagen de fondo de tabla. Sin embargo sería mejor dejar estas cualidades para el lenguaje CSS.
Mapas de imagen (o imagen sensible)
Son imágenes con zonas activas o sensibles que nos permiten crear un enlace pero solo en la zona activa o sensible escogida de la imagen. Puedes hacer que solo una parte de una imagen mantenga el link, o que en una misma imagen haya varias zonas activas.
Se puede procesar en el lado del cliente (usemap) o en el lado del servidor (ismap). Es recomendable usar solo el lado del cliente y por eso no voy a tratar el atributo ismap="nombre".
Lo primero que debemos hacer para crear un mapa de imagen es escribir en la etiqueta de la imagen con el atributo usemap="#nombre". La almohadilla también debes escribirla delante del nombre.
Luego entra en juego el elemanto <map name="nombre"></map> donde el atributo name debe tener como valor el mismo nombre que en usemap, pero esta vez sin la almohadilla.
En el contenido de la etiqueta debemos escribir todas las zonas activas que querramos crear con el elemento <area shape="figura" coords="coordenadas" href="url" alt="texto"/>.
- shape="figura" nos sirve para indicar el tipo de figura geométrica que tendrá la zona sensible.
- coords="coordenadas" nos sirve para indicar las coordenadas que definen la zona sensible.
- href="url" será donde escribiremos la dirección del enlace.
- alt="texto" para escribir un texto alternativo para los casos en que no sea posible la visualización de la imagen.
Y los tres tipos de figuras geométricas son:
Rectángulo:
<area shape="rect" coords="x1,y1,x2,y2" href="url" alt="texto"/>
Las dos primeras coordenadas indican el ángulo superior izquierdo del rectángulo en píxeles, y las otras dos el ángulo inferior derecho del rectángulo en píxeles.
Círculo:
<area shape="circle" coords"x,y,r" href="url" alt="texto"/>
Las coordenadas "x" e "y" indican el centro del círculo en píxeles, y la coordenada "r" el radio.
Polígono indefinido:
<area shape="poly" coords"x1,y1,x2,y2, ... xn,yn" href="url" alt="texto"/>
Éste sirve para conseguir cualquier tipo de forma geométrica. Cada grupo de coordenadas "x" e "y" son uno de los ángulos de la figura.
Usos de los mapas de imagen
No existe una razón específica para el uso de los mapas de imagen, así que sus utilidades están dentro de la imaginación del desarrollador web. Aun así ya se han usado para crear mapas geográficos o mapas de oficina, un método visual de navegación de la web (como una barra de menú especial) o una especie de portada de tu web con un mapa de las páginas del sitio web.
No hay comentarios:
Publicar un comentario
RECUERDA: ésto no es ningún tutorial, pero estaré encantado de compartir información y ayudar en medida de lo posible a cualquiera :)