Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios.

Presentación del tema: "Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios."— Transcripción de la presentación:

1 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 DISEÑO Y PRODUCCIÓN DIGITAL Sesión 24 Módulo III: Herramientas de Producción para Medios Digitales: Herramientas de captura / Herramientas de edición Presenta: Lic. Fernando Gutiérrez C., MATI Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México

2 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Frames (Divisiones por cuadros) Con los frames es posible dividir la pantalla del navegador en varios cuadros (frames) permitiendo mostrar una dirección (URL) distinta en cada una de ellas. En cada frame se nos permite: Mostrar su propia dirección (URL), diferenciada del resto de los frames de la pantalla. De esta manera tendrán asociado un nombre, que las distinguirán del resto de los frames de la pantalla y permitirá hacer interconexiones entre los distintos cuadros.

3 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Por ejemplo, si tenemos una página que comprenda a tres frames, podríamos hacer que dos de los frames se mantuvieran fijos y uno presentara información dinámica. Quizá el frame 1 sirve menú general el 2 de submenú y el 3 donde se proyecta la información del menú o submenú. En el caso que se cambie el tamaño de la ventana, se podrá determinar si el frame se ajusta a este tamaño o mantiene su tamaño intacto. Véase la siguiente dirección: http://www.mexicocomunica.org.mx

4 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 El uso de los frames es útil para cierto tipo de documentos, pero puede llegar a dificultar la navegación. Dentro de un documento con frames no tendría gran utilidad los botones de documento previo (back) ni documento siguiente (forward), ya que ambos nos trasladarían fuera del documento con frames. Para ver el documento previo en una de los frames debemos utilizar el botón derecho del ratón sobre ella y seleccionar la opción volver en el frame (Back in Frame). Esto hace que cuando se utilicen frames haya que cuidar la correcta transición entre documentos. No todos los navegadores pueden mostrar documentos con frames, solo son interpretables por el Netscape 2.0 o superior y el Internet Explorer 3.0 o superior. Por tanto en

5 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas, usando la etiqueta. ESTRUCTURA DE FRAMES Un documento con frames se define de manera diferente a un documento normal, en este caso no se define la etiqueta BODY. Su estructura es la siguiente:

6 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Definiciones de la cabecera Definición de los frames que forman el documento y de los archivos que incluye cada una. Instrucciones HTML que se mostrará en los navegadores que no soporten frames.

7 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Dentro de la etiqueta se podrá incluir una explicación de que el documento solo es visible con el navegadores que soporten frames, o bien incluir una versión del documento que se muestre sin necesidad de frames. Definición de las frames. Con esta instrucción definiremos los frames que formarán el documento, su sintaxis es similar a la de las tablas, pero

8 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 con la diferencia de que cada división es autónoma permitiendo definir muy distintos tipos de frames. Su formato es el siguiente: COLS=Lista de las Columnas...

9 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 ROWS: Se definirá separado por comas el tamaño de cada una de las frames. De esta forma se dividirá la pantalla de forma horizontal, según cada una de las filas definidas. El tamaño del frame, puede expresarse de las siguientes formas: En valor absoluto, que indicará el tamaño en puntos de la pantalla. En este caso si todos los frames se indican de este modo, los valores se ajustarán para que los frames ocupen la totalidad del espacio de la ventana del navegador, no guardando siempre la proporción con la que se definen los frames. (NO ES PROPORCIONAL AL TAMAÑO DE LA PANTALLA)

10 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Otra forma es utilizando valores por centuales sobre el tamaño de la ventana, en este caso si los porcentajes suman un valor distinto del 100%, se ajustarán para que coincidan con el tamaño de la ventana. Se podrá combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje. (% ES PROPORCIONAL AL TAMAÑO DE LA PANTALLA) De forma relativa con el símbolo * que indica el tamaño restante de la ventana. Si se indica un frame como 200 y otro como *, el primero ocupará 200 pixeles y el segundo el espacio restante. Se puede combinar con las definiciones anteriores.

11 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Como se ha visto en el apartado anterior con la etiqueta FRAME definiremos el documento que se mostrará en un cuadro y su nombre. Esta etiqueta presenta además algunos otros atributos: <FRAME SRC="URL" NAME="Nombre de la frame" MARGINWIDTH="ancho del margen" MARGINHEIGHT="alto del margen" SCROLLING=YES | NO | AUTO NORESIZE> URL:

12 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Especifica el documento HTML o archivo que se mostrará en el frame definido. Si no se especifica documento alguno se mostrará el frame vacío. NAME: Indica el nombre del frame. Este nombre es importante ya que se usará para los hiperenlaces o ligas (normalmente en los documentos de los otros frames) para indicar el frame de destino del documento. Si no se indica el nombre solo se podrá mostrar el documento actual, sin que sea posible cambiarlo mediante hiperenlaces.

13 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 MARGINWIDTH: Indica el ancho del margen, este atributo es opcional y normalmente el navegador ajusta todos los márgenes al mismo tamaño, si se especifica su valor será en puntos de la pantalla. MARGINHEIGHT: Igual que en el caso anterior pero para el alto de los márgenes. Lo normal es no especificar ninguno de estos dos atributos.

14 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 SCROLLING: Indica si el frame tendrá o no una barra de scroll, la barra de scroll se muestra en el lateral y permite el desplazamiento por el documento, pulsando con el ratón en ella. Si toma el valor YES, siempre se mostrará esta barra, para el valor AUTO solo se mostrará si el documento no cabe en el frame presentado en pantalla, si es necesario. Y por último NO indica que en ningún caso se muestre la barra de scroll. Si no se indica nada se toma por defecto el valor AUTO.

15 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 NORESIZE: Indica que el frame no debe ser variada de tamaño por el usuario, se puede variar el tamaño de un frame situando el cursor del ratón encima y arrastrando en la dirección deseada. Con este atributo el usuario no podrá cambiar el tamaño del frame en ningún caso. Por defecto todas las frames pueden variar su tamaño. TARGET: Atributo para indicar el frame de destino, en que cuadro (FRAME) se va a presentar la información.

16 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 El uso de frames introduce un nuevo atributo a alguna de las etiquetas especificadas con anterioridad, este atributo es TARGET que indicará el frame de destino de la operación. Normalmente, en páginas sin frames, cuando se seguía un hiperenlaces este se mostraba en la misma ventana del navegador sustituyendo el documento actual. Con los frames se puede especificar que cuadro presentará la información dinámica, no necesariamente debe ser el mismo frame donde suceda el cambio. Como nombre del frame su usará el nombre que se especifico en el atributo NAME de la etiqueta FRAME. Estas instrucciones se utilizarán normalmente en los documentos que se incluyen dentro de los frames.

17 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Las etiquetas que permiten el uso de TARGET son las siguientes: BASE: Indicará el frame en el que se mostrará por defecto todos los hiperenlaces del documento actual. Se debe especificar en la cabecera del documento (HEAD).

18 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 AREA: En la definición de imágenes sensibles en el cliente, se indica el frame donde se verá el documento que se activa en la zona correspondiente de la imagen. FORM: Indicará el frame de destino del resultado del formulario.

19 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 Existen unos valores especiales de TARGET que nos permitirán definir destinos distintos a los frames definidos. Estos valores son los siguientes: TARGET="_blank": Indica que se muestre en una nueva ventana vacía, para seguir el enlace se lanza otra ventana distinta del navegador. TARGET="_self": Se mostrará en la misma ventana o frame que lo referencia, se puede usar para modificar el valor dado por BASE. TARGET="_parent": Se muestra en el frame o estructura de frames que llamó al documento actual.

20 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 TARGET="_top": Indica que se muestre en la ventana completa, eliminando la estructura de frames que tenga la ventana Ejemplo: Tecnológico de Monterrey, Campus Estado de México: Proyecto Internet

21 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 <FRAME SRC="izq.html" NAME="izquierda" MARGINWIDTH=0 MARGINHEIGHT=0 NORESIZE SCROLLING="no"> <FRAME SRC="index1.html" NAME="pantalla"

22 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 MARGINWIDTH=10 MARGINHEIGHT=10 RESIZE SCROLLING="yes">

23 Departamento de Comunicación. 2003 Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México © F. Gutiérrez, 2003 PROYECTO INTERNET Lo sentimos, pero esta página esta diseñada para programas clientes que soporten estructuras en FRAMES. Por el momento puede visitar nuestra versión sencilla en: Cámara de Diputados.