martes, enero 31, 2012

Tutorial de desarrollo web, Parte XVII: La etiqueta iFrame


Previously, on The CubeBlog...
Parte I: Introducción
Parte II: Hola, mundo
Parte III: Estructurando el texto. Encabezados, párrafos y saltos de línea. Entidades
Parte IV: Hipervínculos e imágenes. Atributos. Rutas absolutas y relativas
Parte V: Introducción al CSS
Parte VI: Jerarquía en HTML. Herencia en CSS
Parte VII: Tablas (1). Bordes CSS (1)
Parte VIII: Tablas (2). Bordes CSS (2)
Parte IX: Identificadores y clases (1)
Parte X: Listas
Parte XI: Contenedores span y div. La instrucción display
Parte XII: Formato con HTML
Parte XIII: Formularios (1)
Parte XIV: Formularios (2)
Parte XV: Formularios (3)
Parte XVI: Formularios (4)

Bien, aquí estamos otra semana más con nuestro curso de HTML con un tema completamente nuevo, tras tanto tratar con formularios. Así que empezamos, como siempre, con la solución del último ejercicio en Google Docs, para luego comentar que esta semana vamos a ver la etiqueta <iframe>, pero, para ello, tendremos que repasar un poco conceptos de HTML ya obsoletos, el concepto de "frame".
En antiguas verisones de HTML existía una serie de etiquetas relacionadas con dicho concepto, pero a día de hoy, todas ellas (salvo el "iframe", que no funciona de la misma manera) se han eliminado. Los más veteranos en internet (o incluso aquellos no tan veteranos) recordarán páginas que preguntaban antes de entrar si queríamos entrar en la versión con frames de la página o no. En la versión "con frames" nos encontrábamos con que la ventana se dividía en varias páginas que parecían actuar individualmente. Y eso es porque lo hacían.
Para crear una página con frames en primer lugar debías crear cada una de las páginas individualmente como hemos hecho hasta ahora (usando algún atributo extra en algunos casos, pero por lo general, tal como hemos trabajado hasta el momento). Luego creabas una página en la cual lo único que se introduciría en el "body" serían las etiquetas relacionadas con "frames", de modo que dividías el cuerpo en tantas partes como el desarrollador quisiera (tanto horizontal como vertical) y le indicaría cuales de los documentos previamente creados debía aparecer en cada una de esas páginas (y algunos atributos más, que no vienen al caso ahora).
Durante la limpieza llevada a cabo en el HTML en sus últimas versiones, las etiquetas de "frames" han ido siendo eliminadas, aunque algunas versiones del HTML4 todavía lo permiten. Sin embargo, en HTML5 el "frame" como lo conocíamos los veteranos ha desaparecido, pero otra etiqueta ha tomado su lugar, "iframe", que juega con un concepto parecido al del "frame".
Gracias a la etiqueta "iframe", en vez de hacer una página compuesta por varias páginas, podemos introducir una página dentro de otra, en un hueco destinado para ello. Tomemos de ejemplo nuestra primera página, "hello_world.html". Vamos a crear una página nueva llamada "iframe.html" y vamos a introducir este código:

<!DOCTYPE html>
<html>
<head>
<title>Prueba con iframe</title>
</head>
<body>
<iframe src="./hello_world.html"></iframe>
</body>
</html>


Hacía tiempo que no introducía capturas de pantalla de los ejercicios, ¿eh?
Bueno, podemos ver como en esta nueva página hemos introducido mediante la etiqueta "iframe" la página que ya teníamos. El atributo "src" funciona del mismo modo que funcionaba en la etiqueta "img", usando una ruta (tanto relativa como absoluta) para indicar qué página usaremos. Como veis, no tiene ninguna complicación es algo muy pero que muy simple.
Pero, por supuesto, vamos a complicarlo un poco (no demasiado, no hay tanto para complicar aquí). Antes que nada, vamos a echar un vistazo a los distintos atributos que podemos usar en la etiqueta "iframe" aparte del "src":
  • height y width: Como sus nombres indican, son "altura" y "ancho" de  nuestro "iframe", expresado en píxeles. Sin mucho que explicar.
  • name: También, igual que hasta ahora, el nombre que le podemos poner al "iframe", aparte del "id". Como ocurría con los formularios, nos puede servir para programación, aunque no es su única utilidad. De hecho, un poco más adelante veremos esta otra utilidad del "name" del "iframe".
  • seamless: Este atributo, cuyo único valor posible es también "seamless" (de modo que se vería como seamless="seamless" borra los bordes del "iframe", haciendo que parezca que ambas páginas son una única página.
Para terminar con el artículo de hoy vamos a ver por qué nos será útil el atributo "name" del "iframe", además de aprender un nuevo atributo de la etiqueta "a". Este nuevo atributo es el atributo target y sirve para indicar dónde se abrirá el enlace que creemos. El atributo "target" puede tener distintos valores, según el cual funcionará de distinta manera:
  • target="_blank": uno de los más populares, abrirá el vínculo en una ventana de navegador nueva (o tal vez una pestaña nueva, dependiendo del navegador).
  • target="_self": Es el predeterminado, abre el enlace en la misma ventana (o "frame") en que se encuentre.
  • target="_parent": Aquí empieza a ser importante para los "iframes". Con esta instrucción, el enlace se abrirá en la ventana que contiene al "frame" en cuestión (sólo uno, si hay varios "iframes" unos conteniendo a otros, sólo el inmediatamente superior al que tenga el enlace será sustituido por la nueva página).
  • target="_top": Abre la página en la ventana actual, sin importar si estaba dentro de un "iframe", cogerá toda la ventana. Se diferencia del "_self" en que el "_self", si está dentro de un "iframe", la nueva página también se abrirá dentro del "iframe", y del "_parent" en que no importa cuantos "iframes" dentro de "iframes" haya, la página se abrirá siempre en la ventana completa.
Y ahora diréis "¿y para qué servía entonces el atributo name?". Tranquilos, justo vamos a eso. Los valores que he dado hasta ahora son los valores "prediseñados" para el "target", pero podemos darle valores propios. En concreto, podemos darle el valor que le hayamos dado al "name" de un "iframe". De este modo, si tenemos un "iframe" con name="pagina" podemos hacer un enlace con target="pagina". De esta manera, el enlace se abrirá dentro del "iframe" en cuestión.
Y, de momento, eso es todo por hoy. Sé que el artículo ha sido corto, pero no sólo estoy agobiado con trabajos de mi ciclo, sino que además no hay mucho más que hablar de los "iframes".

EJERCICIO

Crear una página con un "iframe" que a su vez contenga otro "iframe". El "iframe de la página superior debe ser bastante grande para que el otro se vea bien, mientras que el interior debe pasar "desapercibido" (o sea, que no se note que es un "iframe"). Finalmente, crear enlaces en todas las páginas para probar todos los posibles atributos.

Y aquí termina otra semana más el tutorial. Ya realmente nos queda bastante poco para terminar con HTML y un poco más para acabar con el CSS, pero yo creo que no lleguemos a verano sin haber empezado con JavaScript. Así que vayan preparándose. ¡Hasta la semana que viene!

No hay comentarios: