Para utilizar los marcos en HTML necesitamos un par de etiquetas:

Transcripción

1 Anexo: frames, iframes, ventanas, temporizadores. 1. Uso de frames con JavaScript Los frames permiten colocar colocar diversas páginas en una sola. Los frames (marcos) eran muy usados en el desarrollo de páginas web con HTML. De ser una etiqueta no estándar paso a ser soportada por todos los navegadores y formar parte de las especificaciones de HTML. Los frames quedaron completamente en desuso a partir de (2011) ya que desarman el contenido de un sitio y complican la accesibilidad, la usabilidad y el posicionamiento. Los Iframes todavía se siguen usando por ejemplo para insertar contenido de otros sitios como GoogleMaps, Facebook, Twitter, pero ya se está reemplazando por las nuevas etiquetas y atributos html5 Para utilizar los marcos en HTML necesitamos un par de etiquetas: <frameset> esta etiqueta indica al navegador que la página contiene frames. Los principales atributos son cols, rows. <frame> esta etiqueta define las características de cada marco. Los principales atributos: Atributo frameborder marginheight marginwidth name Descripción Define si mostrar o no el borde del marco. Permite cambiar los márgenes verticales del marco. Permite cambiar los márgenes horizontales del marco. Asigna nombre al marco. CFGS: DESARROLLO DE APLICACIONES WEB 1/10

2 noresize scrolling src Impide que el usuuario redimensione el marco. Permite posicionar o no una barra de desplazamiento en el Indica la URL del documento que contendrá el marco. JavaScript permite manipular frames. Un frame puede hacer referencia a otro frame utilizando las propiedades frames, parent y top del objeto window. Para modificar un elemento de un frame: parent.nombre_marco.document.propiedad. Todos los frames tienen la propiedad parent que referencia al objeto que contiene a dicho frame. Ejemplo frame: EjemploframeIzquierda.html: CFGS: DESARROLLO DE APLICACIONES WEB 2/10

3 EjemploframeDerecha.html: CFGS: DESARROLLO DE APLICACIONES WEB 3/10

4 2. Uso de iframes en JavaScript Una etiqueta hermana de la etiqueta Frame actualmente más usada, porque resulta más útil y menos problemática que los propios frames. Se trata de iframe, un tag incluido a partir de las especificaciones de HTML 4.0. iframe viene de inline frame, en castellano también se les llama frames flotantes. Un iframe sirve para crear un espacio dentro de la página donde se puede incrustar otra web. La diferencia principal entre iframe y frame es que iframe no necesita una declaración de los espacios de los frames o frameset, por que se incrusta en el código HTML de la página. El iframe, no provoca problemas de navegación, como los que ocurren con los frames si no accede a través del frameset. Y, al no existir el frameset, los iframe no tienen problemas a la hora de indexar la página en los motores de búsqueda. CFGS: DESARROLLO DE APLICACIONES WEB 4/10

5 Definir un iframe: <iframe src="pagina_fuente.html" width=290 height=250>texto para cuando el navegador no conoce la etiqueta iframe</iframe> Atributos del iframe: Atributo Descripción class Define atributos del aspecto del iframe mediante hojas de estilo. frameborder Define si mostrar o no el borde del iframe (1,0). height Indica la altura del iframe. Id Indica el identificador del iframe. margin Indica la alineación del iframe. marginheight Permite indicar los márgenes verticales del iframe. marginwidth Permite cambiar los márgenes horizontales del marco. Name Asigna nombre al iframe. noresize Impide que el usuuario redimensione el marco. scrolling Permite posicionar o no una barra de desplazamiento en el iframe. Src Indica la URL del que mostrarça en el iframe. Style Define atributos del aspecto del iframe mediante hojas de estilo. Width Indica la anchura del iframe. Definir iframe con unos cuantos atributos más: <iframe name=miframeflotante src="colabora.htm" width=400 height=550 frameborder="0" scrolling=yes marginwidth=2 marginheight=4 align=left>tu navegador no soporta frames!!</iframe> Ejemplo iframe: CFGS: DESARROLLO DE APLICACIONES WEB 5/10

6 CFGS: DESARROLLO DE APLICACIONES WEB 6/10

7 CFGS: DESARROLLO DE APLICACIONES WEB 7/10

8 3. Uso de ventanas. Temporizadores Ejemplo_objeto_window_moveTo.html: En el siguiente ejemplo se crea una nueva ventana y se mueve esta aleatoriamente 10 veces antes de cerrarla. CFGS: DESARROLLO DE APLICACIONES WEB 8/10

9 Ejemplo_objeto_date_reloj.html: En el siguiente ejemplo se crea un temporizador que nos muestre un reloj en la página. CFGS: DESARROLLO DE APLICACIONES WEB 9/10

10 Ejemplo_objeto_window_date_BarraProgreso.html: En el siguiente ejemplo se crea una barra de progreso que se incrementa cada segundo aumentando su anchura de 10 en 10 hasta llegra a 500 momento en que comienza de nuevo, también permite parar el temporizador y salir de la página mediante dos botones. CFGS: DESARROLLO DE APLICACIONES WEB 10/10