taller de elaboracion de paginas web resumen front page

TALLER DE ELABORACION DE PAGINAS WEB con front page

Objetivos:

Crear paginas web con el programa Frontpage utilizando elementos de diseño básicos y avanzados.

Aplicar los elementos de diseño al proyecto que esta desarrollando para la clase.

Bajar de internet imágenes, sonidos, videos para insertar en las paginas de su poryecto

Elementos basicos:

1. Comentarios: sirven para proporcionar información (Insertar, comentario)2. Contadores de visitas: indica el numero de visitantes a la pagian (Insertar,

componetne,contador de visitas a la pagina)3. Fecha y hora: actualiza la informacion (Insertar, fecha y hora)4. Marquesina desplazandose: texto que fluye a lo ancho de la pagina, puede ser una

animacion realizada en flash o un gif animado.(Insertar, componente, marquesina)5. Botones activables: son imágenes que representan acciones determinadas, pueden

tener efectos cuando se posa con el mouse, cambiando de imagen por ejemplo (insertar componente boton).

6. Hipervinculos: (Insertar hipervinculo): se crean para texto, imágenes, botones. Se puede hacer tres tipos de vinculos

• Enlace con otra parte dentro de la misma pagina usando marcadores(Insertar marcadores)

• Enlace interno: A otra pagina en mi sitio web • Enlace externo: A una pagian en un sitio de la WWW • Enlace a correo• Enlace a una pagina nueva

Elementos avanzados:

1. Los marcos o frame: tienen por objeto dividir la pantalla en ventanas individuales y cada una ser una pagina independiente. Se usan para : Indices, Barra de botones, Anuncios publicitarios, derechos de autor, nostas al pie.

• Creacion de paginas con marcos: Archivo nuevo, del asistente seleccionar paginas con marco que mas le convenga de las opcines presentadas y aceptar.

Para editar un marco: Cambiar tamaño: hacer clic en los bordes y arrastarDividir marco: en marco, opcion dividir marco en filas o columnasEliminar: seleccionar la seccion a borrar y en marco opcion eliminar marco• Asociar una pagina inicial a un marco

Fanny Lopez V.Docente de Informatica Aplicada - Nucleo ComunFacultad de Ciencias de la Educación Universidad Libre

• Hacer clic en el marco con el que se quiere trabajar.• Hacer clic en el boton Establecer pagina inical, aparenciendo el cuadro crear

hipervinculo • Se puede asociar a una pagina guardada en disco duro o a una direccion URL

o a una pagina nueva • Guardar un conjunto de marcos: un conjunto de marcos esta constituido por

varias paginas: la de marcos, que mantiene las instrucciones sobre como debe aparecer y actuar el conjunto de marcos y las paginas iniciales para cada marco del conjunto de marcos. Cuando se guarda se debe guardar todas las paginas.

• Modificar las propiedades de los marcos: al hacer clac sobre un marco presenta el cuadro de dialogo de las porpiedades de ese marco, donde puede cambiar el titulo, el vinculo, el tamaño del marco, ver o no barras de desplazamiento, entre otras. En la opcion de paginas de marco se puede desactivar los bordes de los marcos en la ficha marcos en la cual se activa la casilla ver marcos

2. Creacion de mapas de imágenes: es una imagen dividida que tiene enlaces• Insertar imagen• Definir partes que seran las activas• Clic sobre la imagen para activar barra de herramientas de las propiedades de la

imagen, de alli se usaran tres botones: crear zona rectangular, circular o forma irregular. Seleccionar una de ellas y sobre la imagen se arrastra el mouse para marcar cual es la zona activa, cuando libera el boton aparece un cuadro de dialogo para crear el hipervinculo. (Nota hacer zona amplias)

3. Elementos multimedia• Sonido o musica: (Insertar, Avanzado, complemento) hay tres metodos para

incluir sonidos:- Establecer sonido como fondo, se reproduce automaticamente

cuando la pagina se carga (Archivo, propiedades, general)- Crear un enlace a un archivo de sonido de forma que el usuario

lo descargue y luego lo reproduzca en su equipo- Inscrustar controles tipo VCR que el usuario ejecuta a voluntad

• Video: (Insertar, Avanzado, componente web) (inserta ,imagen, elemento flash, o video) archivos recomendados para video son: avi, wav, midi. Se pueden colocar de dos fomas:

- Inscrustar el video de forma que aparezca en la pagina como el mismo modo de una imagen.

- Crear un enlace a un archivo de video para ser descargado por el usuario y luego reproducido en su equipo.

4. Efectos a texto e imágenes: (Formato, DHTML dinamico)• A texto: seleccionar el texto a animar y en la barra de efectos DHTML se peude

escoger 4 alternativas: - clic: animacion funciona cualdo se hace clic en el texto- doble clic: la animacion ocurre al hacer doble clic- pasar el mouse la animacion ocurre al pasar el mouse


- cargar la pagina, la animacion se activa cuando se abre la pagina• A imágenes: seleccionar imagen a animar y en la barra de efectos DHTML se

tiene las mismas alternativas anteriores para obtene intercambi de imágenes.• Transicion entre paginas(Formato, transicion de la pagina)5. Galeria de fotos: insetar componente avanzado galery verificar menu

http://fresno.cnice.mecd.es/~avaler3/index2.htm

Publicar en red9.1 Incluir la declaración del tipo de documento9.2 Conocer las etiquetas <meta>, que informan a los buscadores9.3 Aprender a transferir los archivos a un servidor

9.1 Declaración del tipo de documento

Antes de dar por terminado un documento para publicarlo en Internet, tenemos que declarar qué tipo de documento es con el fin de que los navegadores sepan en qué versión de HTML está escrito; de este modo, podemos estar más seguros de que el navegador que utilice el usuario le ofrecerá con fidelidad la página que hemos creado de la forma más parecida a como lo hemos hecho. Con la declaración del tipo de documento también contribuimos a la normalización de los lenguajes utilizados en la Red, organizando mejor de esta manera todo el flujo de millones de páginas que circulan por el ciberespacio. De este ordenamiento se ocupa un grupo de expertos reunidos entorno al World Wide Web Consortium (http://www.w3.org/), que publican distintas versiones de todos los lenguajes y códigos de Internet, y ofrecen pautas con el fin de unificar y normalizar las herramientas utilizadas en la Red.

Existen varios tipos de declaraciones del tipo de documentos (DOCTYPE). Para este curso sólo nos interesa uno de ellos, el que declara la última versión de HTML, la 4.01. El texto de la declaración hay que colocarlo al principio del documento, antes de la etiqueta <html>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

Lo importante de esta declaración es la definición del tipo de documento (DTD) que se encuentra en la dirección del World Wide Web Consortium que consta en la declaración. Existen tres versiones de esta definición: Strict, Transitional y Frameset. Las dos primeras varían poco, pero la Transitional es menos estricta, con lo cual los navegadores antiguos tienen menos problemas. La última es la que hay que utilizar cuando la página ha sido creada con marcos o frames. Así, el documento principal de este curso y el de la página con marcos del Monstruo tienen la siguiente declaración:


http://www.w3.org/

http://fresno.cnice.mecd.es/~avaler3/index2.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">

Para que esta declaración sea efectiva, el documento creado no tiene que tener errores de lenguaje HTML, por eso hay que validar el documento, es decir, confirmar que está bien escrito siguiendo las directrices del tipo de documento. Algunos programas de edición de páginas web incorporan un instrumento para ello, como el excelente editor gratuito HTML-Kit, pero lo mejor sigue siendo acudir a la página web del World Wide Web Consortium, que tiene una página donde se pueden validar los documentos HTML:

The W3C MarkUp Validation Service: http://validator.w3.org/

Los archivos que se tendrían que validar serían todos los que contienen lenguaje HTML y también los que contienen hojas de estilos (CSS).

9.2 Etiquetas que informan a los buscadores

Para terminar este curso debemos conocer el mecanismo para informar a los buscadores de que nuestra página existe y de sus contenidos. Los buscadores son potentes servidores que rastrean la Red para registrar las páginas web existentes. Si hemos terminado una página web, tenemos que transferir los archivos a un servidor donde alojarla, pero antes de eso hay que colocar unas etiquetas en el documento principal de nuestra página web para informar a dichos buscadores. Posteriormente, cuando un usuario acuda a un buscador y busque, por ejemplo, la palabra "Monstruo" o la expresión "Página web del Monstruo", obtendrá una multitud de entradas, entre ellas probablemente la de la página del Monstruo, y podrá ir a visitarla sin necesidad de saber previamente su dirección de Internet.

Esta información se ofrece mediante las etiquetas <meta>, que se colocan en la cabecera de la página principal de un sitio web, es decir, en el archivo que suele llamarse index.htm. En nuestro caso, esa información la hemos colocado en la cabecera del archivo index2.htm de los ejemplos. Veamos qué dicen esas misteriosas etiquetas:

• <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

• <meta name="description" content="Página personal del Monstruo, creada para alivio de sus penas">

• <meta name="keywords" content="monstruos, miedo, horror">

• <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">

La primera y la cuarta etiquetas <meta> han sido insertadas automáticamente por el programa. En la primera se informa del tipo de caracteres utilizado; en este caso, caracteres occidentales. En la cuarta etiqueta aparece el nombre del programa utilizado para crear la página web, que no es obligatorio declarar.

La segunda y la tercera etiqueta, en cambio, tiene que introducirlas, si lo desea, el creador de la página para informar a los buscadores del tipo de contenido que hay en esa página


http://validator.w3.org/

web. La segunda etiqueta es una descripción (description), general y concisa, de la página, y en la tercera ofrecemos palabras clave (keywords) del contenido, separadas por comas.

Desde FrontPage Express se puede realizar la redacción de estas etiquetas abriendo el menú Archivo, eligiendo Propiedades de página y pulsando en la pestaña Personalizar. En la sección Variables de usuario podemos escribir estos datos si pulsamos el botón Agregar. En el cuadro de texto Nombre escribimos la palabra "description" y en el cuadro de texto Valor escribimos la descripción. Y Después hacemos lo mismo con la palabra "keywords", como se ve en esta imagen:

9.3 Transferir los archivos al servidor

Una vez que tengamos acabada nuestra página web y dispongamos de una cuenta en un servidor, podemos transferir los archivos al ordenador del servidor. Windows dispone de un programa llamado Asistente para la publicación en web que resulta fácil de utilizar porque está compuesto de ventanas que van recabando la información necesaria que el usuario sólo tiene que teclear. Con los datos que le ofrecemos, el asistente se conecta con el servidor y transfiere los archivos al lugar que le hemos indicado. A este asistente se accede al pulsar el botón de Inicio del escritorio de Windows por la siguiente ruta:

Inicio\Programas\Accesorios\Herramientas de Internet

Pero existe un programa gratuito muy utilizado para transferir archivos a un servidor: WS_FTP. Cuando lo abrimos tenemos que pulsar el botón Connect, que está en la parte inferior izquierda de la ventana. Entonces aparece la siguiente ventana:

Lo primero que hay que hacer es pulsar el botón New para configurar una nueva conexión. Los cuadros de texto hay que rellenarlos de la siguiente manera:

• En el cuadro de texto Profile name escribimos el nombre que queramos para identificar nuestra conexión.

• En el de Host Name/Address escribimos la dirección del servidor que va a alojar nuestra página.

• En Host Type se deja el texto que aparece predeterminado: "Automatic detect". • En User ID hay que escribir el nombre de usuario. • Y en Password, la contraseña.

Después, se pulsa el botón Aceptar y desaparece esa ventana para dejar a la vista la ventana posterior, que es desde donde vamos a efectuar la transferencia de ficheros. En la parte izquierda está la sección Local System, que es una lista de archivos de nuestro disco duro en la que vamos a buscar la carpeta donde está nuestra página. La ruta aparece


en el cuadro de texto de la lista desplegable que hay en la parte superior. Cuando tengamos a la vista nuestros archivos, los marcamos con un clic del ratón mientras mantenemos apretada la tecla de mayúsculas. A continuación los transferimos al servidor apretando el botón que tiene la flecha dirigida hacia la derecha (->) y que está situado en el panel central, entre las dos ventanas. Si queremos borrar algún archivo, pulsamos el botón Delete después de destacarlo con un clic del ratón, y si queremos cambiarle el nombre, pulsamos el botón Rename.

La sección derecha de la ventana presenta la ubicación de los archivos transferidos en el servidor remoto, el ordenador donde se va a alojar nuestra página. Antes de transferir los archivos quizá haya que crear una nueva carpeta, según las condiciones que imponga cada servidor. Desde esta sección también se pueden copiar los archivos a nuestro disco duro, borrarlos y cambiar sus nombres.

Cuando hayamos terminado de transferir los archivos ya tendremos nuestra página en Internet. Y nuestro Monstruo podrá así aliviar sus penas, porque la comunicación lo libera un poco de su oscuro destino.

JavaScriptLos objetivos de la octava lección son:

8.1 Conocer el funcionamiento básico de JavaScript8.2 Actividad nº 8: Ejemplos de scripts:

8.2.1 Ventana de alerta en JavaScript8.2.2 Menú desplegable8.2.3 El rollover

8.1 Funcionamiento básico de JavaScript

JavaScript es el hermano menor del lenguaje Java. Se utiliza mucho en la creación de páginas web para conseguir que éstas sean más dinámicas. JavaScript está basado en scripts que se introducen en las etiquetas de una página web para producir los comportamientos que desea su creador. No hay que saber programar con este lenguaje para poder utilizar de forma gratuita los muchos scripts que se encuentran en páginas de Internet. Sólo hay que saber dónde ponerlos dentro del código fuente del documento. Las posibilidades que tiene el lenguaje JavaScript son amplísimas y se utilizan mucho en la Red.

A veces estos scripts se encuentran en un archivo externo con extensión JS (de JavaScript), y entonces hay que escribir una llamada en la cabecera del documento donde queremos que funcione:

<SCRIPT SRC="buscadores"></SCRIPT>

Pero en esta lección vamos a comentar varios scripts de JavaScript que se encuentran incrustados en el mismo documento. El primero de ellos se utiliza mucho en páginas web y consiste en abrir una ventana de un tamaño y características concretas al pulsar un


botón. Parte del código tiene que estar en la cabecera del documento, delimitado por las etiquetas <head> de cierre y de apertura:

<SCRIPT LANGUAGE="JavaScript"></SCRIPT>

Con la primera expresión indicamos que el lenguaje de scripts utilizado es JavaScript. Después se introduce una función que llamamos abre_ventana y que consiste en abrir (open) una ventana de un tamaño determinado (500 píxeles de ancho por 400 de alto) que, además, tendrá disponibles las barras de desplazamiento (scrollbars=yes). Esa función tendrá efecto cuando el usuario pulse el botón que se ha introducido en otra parte del documento. Dentro de la etiqueta del botón tiene que haber, por tanto, una llamada a esa función, lo que se consigue de esta manera:

<input type="button" name="ventana" value="Página del Monstruo" onClick="abre_ventana()">

Al pulsar el botón (evento onClick), llamamos a la función abre_ventana definida en la cabecera del documento. Veamos el botón:

8.2 Actividad nº8: Ejemplos de scripts

8.2.1 Ventana de alerta

Vamos a realizar ahora una sencilla actividad que nos ilustra las posibilidades de JavaScript en la creación de páginas web. Se trata de introducir un script en nuestro documento para que aparezca una ventanita dando las gracias al usuario cuando pulse el botón Enviar de la encuesta. El script lo incluimos dentro de la cabecera (<head>) del archivo monstruo.htm para que el navegador lo lea nada más cargar el documento:

<script language="JavaScript"></script>

Después, tenemos que introducir la llamada a la función "gracias" desde el formulario, es decir, cuando el usuario pulsa el botón Enviar se origina el evento onSubmit, que hay


Página del Monstruo

que incluir dentro de la etiqueta del formulario (<form>) y que consiste en que aparecerá una ventana de aviso (alert) con una frase de agradecimiento:

<form action="mailto:[email protected]" method="POST"enctype="TEXT/PLAIN" name="Formulario" OnSubmit="gracias()">

Cuando el usuario rellene el formulario y pulse el botón Enviar, surgirá la siguiente ventana:

8.2.2 Menú desplegable

Un script muy utilizado en Internet es el menú desplegable, que puede contener opciones tales como las direcciones de las secciones más importantes de una página web concreta o las direcciones de otras páginas de Internet. Se utiliza generalmente para ahorrar espacio dentro de un documento y ofrecer al usuario una forma rápida de llegar a algunos contenidos de un sitio. Un ejemplo podría ser el siguiente:

Vamos a crear un menú desplegable que contenga la dirección de nuestro archivo de fotos y las tres direcciones de las páginas que hemos considerado como enlaces de interés. El siguiente código, que corresponde al menú desplegable, lo podemos incluir en cualquier parte de nuestro documento, es decir entre las etiquetas <body> de apertura y cierre.

<form name="buscar"><select name="lista" size="1"><option value="colec2.htm">Mi colección de fotos</option><option value="http://alirburia.8m.com">Halloween.com</option><option value="http://www.halloween.com">Alirburia</option><option value="http://www.museoceramadrid.com">Museo de cera de Madrid</option></select><input type="button" value="Vamos" onClick="busqueda()"></form>

Dentro del código del botón hemos escrito, como se ve más arriba, la llamada a esta función utilizando el evento onClick (onClick="busqueda()"), que ocurre cuando el usuario hace un clic con el ratón sobre un objeto.

Y en la cabecera de la página (<head>) tenemos que colocar el siguiente script para que funcione este menú desplegable al pulsar el botón Vamos:

<script language="JavaScript"><!--function busqueda() {location=document.buscar.lista.options[document.buscar.lista.selectedIndex].value;

}//--></script>

Este menú también lo podemos crear con FrontPage Express tal y como lo hicimos en la lección de los formularios. Esta vez hay que escribir la dirección de Internet en el campo donde se tiene que especificar el valor:

El botón lo crearemos como hicimos en la lección de hipervínculos, pero ahora habrá que introducirle el código de llamada a la función que está en la cabecera. Para ello hay que pulsar el botón cuya etiqueta es Extendido...; entonces se abre la ventana de Atributos extendidos y pulsamos el botón Agregar... para introducir en la ventana que aparece el nombre del atributo (onClick) y el valor que tiene (busqueda()).

Sólo queda un pequeño detalle: nombrar el formulario para que el script funcione adecuadamente. Introducimos el cursor del ratón dentro del triángulo de línea discontinua que indica el formulario, pulsamos el botón derecho del ratón y elegimos las Propiedades del formulario. En el campo Nombre del formulario escribimos lo siguiente: "buscar", tal y como se muestra en esta imagen:

8.2.3 El rollover

Otro script que se utiliza constantemente en las páginas web es el llamado rollover, que consiste en sustituir una imagen por otra cuando el usuario coloca el puntero del ratón encima de la primera imagen que aparece en el documento, y se suele emplear como hipervínculo. El código en sí es muy sencillo. En la cabecera del documento colocamos las dos funciones que tenemos que utilizar:

<script language="JavaScript"></script>

La primera función sirve para cuando el puntero del ratón se encuentra encima de la imagen (en nuestro caso la función encima, que después incluiremos en el evento onMouseOver), que hace que se vea la segunda imagen, y otra para cuando el ratón está fuera de la imagen (fuera, incluida en el evento OnMouseOut), que hace que se vea la primera imagen. En este caso se trata de un botón de color amarillo y de borde y texto

rojos (primera imagen) cuyo color de fondo cambiará al verde cuando el usuario ponga el ratón encima:

Además, este botón servirá de hipervínculo: cuando el usuario haga clic encima de él, será conducido a otro documento; en nuestro caso, a la página del Monstruo. Para ello habrá que colocar la imagen en cualquier parte de la página y hacer un doble clic sobre ella para que se abra la ventana de Propiedades de imagen. A continuación escribiremos la ruta del archivo que queremos que se abra al pulsar la imagen, y eso lo haremos en el campo de texto llamado Ubicación. También tendremos que dar un nombre a la imagen (no al archivo, que ya lo tiene) para que el script la identifique, y para ello pulsamos el botón Extendido y agregamos name (tiene que estar en inglés) como nombre del atributo y dibujo, por ejemplo, como su valor. Allí lo escribiremos todo sin las comillas.

Sólo queda por escribir las llamadas a las dos funciones desde el código del hipervínculo de la imagen:

<a href="index.htm" onMouseOver="encima()" onMouseOut= "fuera()"><img src="imagenes/hola.gif" name="dibujo" border=0 width="89" height="34"></a>

Esto lo podremos hacer directamente sobre el código fuente o haciendo click sobre la imagen y abriendo la ventana de Modificar hipervínculos. Una vez allí pulsamos el botón Extendido... y agregamos los nombres de atributos y sus valores.


taller de elaboracion de paginas web resumen front page

Documents