Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

Pgina 1 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

Indice.
Introduccin..................................................................................................................3 1 Iniciando.....................................................................................................................4 1.1 Qu es Front Page?.............................................................................................4 1.2 El Explorador de FrontPage.................................................................................4 1.3 El Editor de FrontPage.........................................................................................4 1.4 La lista de tareas pendientes................................................................................4 1.5 El Administrador de servidores...........................................................................4 1.6 El Web de Front Page..5 1.7 Requerimientos de Hardware del Front Page 97.................................................6 2. El Explorador de Front Page.....................................................................................7 2.1 Descripcin de las Caractersticas del Explorador...............................................7 2.2 Las Barras de Herramientas del Explorador........................................................9 2.3 Creacin de un Proyecto Web............................................................................11 2.4 Vista de un Proyecto desde el Explorador..........................................................12 2.5 Identificacin de Hipervnculos..........................................................................13 2.5.1 Hipervnculos Rotos..................................................................................13 2.5.2 Comprobacin de Hipervnculos................................................................14 2.5.3 Actualizacin de Hipervnculos..................................................................14 2.6 Imgenes, URLs...................................................................................................15 2.6.1 Imgenes......................................................................................................15 2.6.2. URLs..........................................................................................................15 3. El editor de Front Page..............................................................................................16 3.1 Descripcin de las Caractersticas del Editor.................................................16 3.1.1 Principales Caractersticas del Editor....................................................16 3.2 Las Barras de Herramientas del Editor...........................................................17 3.3 Propiedades de la Pgina.................................................................................17 3.4 Desarrollo de Pginas Web.............................................................................18 3.4.1 Listas......................................................................................................18 3.4.2 Tablas.....................................................................................................18 3.4.3 Marcos...................................................................................................19 3.4.4 Marcadores............................................................................................19 3.4.5 Hipervnculos.........................................................................................19 3.4.6 Acabados de presentacin......................................................................19

Pgina 2 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia 3.5 Inclusin de Imgenes....................................................................................20 3.5.1 Imgenes................................................................................................20 3.5.2 Formatos de Imagen..............................................................................20 3.5.3 Propiedades de imgenes......................................................................21 3.5.4 Imgenes transparentes.........................................................................21 3.6 Componentes WebBot...................................................................................22 3.6.1 Introduccin..........................................................................................22 3.6.2 Qu son los Componentes WebBot ?.................................................22 3.7 Formularios HTML.......................................................................................23 3.7.1 Introduccin..........................................................................................23 3.7.2 Componentes de formularios................................................................23 3.7.2.1 Cuadro de texto de una lnea.....................................................23 3.7.2.2 Cuadro de texto con desplazamiento.........................................23 3.7.2.3 Casilla de verificacin...............................................................24 3.7.2.4 Botn de opcin........................................................................24 3.7.2.5 Men desplegable.....................................................................24 3.7.2.6 Botones de comando.................................................................25 3.7.3 Pginas de confirmacin de formulario................................................25 3.8 Componente WebBot de guardar datos.........................................................27 3.8.1 Introduccin..........................................................................................27 3.8.2 Asignacin de un manejador de formulario..........................................27 3.9 Validacin de campos del formulario............................................................29 3.9.1 Introduccin..........................................................................................29 3.9.2 Pasos realizar validaciones...................................................................29 Crditos........................................................................................................................30

Pgina 3 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

Introduccin.
Ciertamente en nuestros das somos testigos de una revolucin en las comunicaciones; un evento tan importante que est cambiando nuestras costumbres en la forma de comunicarnos, as como est derrumbando las barreras que antes nos impona las distancias. Veamos unos ejemplos : En la biblioteca de alguna universidad, un alumno revisa los catlogos de la biblioteca del congreso norteamericano para poder desarrollar su investigacin. Un grupo de investigadores dispersos por el mundo llevan a cabo una tarea conjunta, mantenindose en permanente contacto a travs del correo electrnico. Reuniones virtuales de ejecutivos, ahorran una enorme cantidad de tiempo y dinero. Desde la pantalla de su computador, un agente de bolsa puede tener informacin actualizada de los movimientos de las otras bolsas en el mundo.

Estos ejemplos, y muchos ms tienen un factor en comn : Internet ; esta red de computadores de alcance mundial, le afectar, tarde o temprano, si es que ya no lo hizo. El web es el equivalente de la oficina de una empresa, donde puede poner a disposicin pblica productos, servicios, reas de soporte al cliente, y en general cualquier informacin de la empresa. La informacin que las empresas y personas ponen a disposicin pblica a travs del web, est en un lenguaje especialmente diseado para esto -el lenguaje HTML (HyperText Markup Languaje)- este lenguaje est siendo adoptado como el estndar universal para la creacin y distribucin de informacin no slo en ambientes pblicos, sino tambin en los entornos privados al interior de las compaas y las corporaciones. Actualmente tenemos una variedad de programas gratuitos y comerciales capaces de crear documentos en HTML de una manera muy fcil y rpida, Front Page es uno de ellos y de ah la importancia del presente curso, el cual le presentar de una manera sencilla y clara en las principales caractersticas de este programa. Esperamos que sea de su agrado.

Pgina 4 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

1. Iniciando.
1.1 Qu es Front Page?

El Front Page 97 es un aplicativo que se ejecuta en Windows 95 o Windows NT, que nos permite tener una visin completa de un proyecto web como si fuera apenas una pgina. En el Front Page se combina la facilidad de crear pginas web, con insertar dinamismo a las pginas a travs de scripting y al mismo tiempo una administracin global todo el proyecto (hipervnculos, navegacin, directorios, etc..). Veamos los elementos que componen el Front Page.
1.2 El Explorador de FrontPage

El explorador de Front Page una herramienta de administracin de proyectos web; tanto de forma local como remota; es decir, un PC con el Front Page instalado puede administrar un proyecto web que est publicado en cualquier otro lugar de Internet. Con el Explorador tendremos una visin general de la organizacin fsica de los archivos que componen el web, su estructura de directorios, as como la organizacin del flujo de la informacin y el control de la consistencia de los vnculos internos y externos. Con estas ventajas podremos rpidamente organizar e implementar nuestros proyectos para el web.
1.3 El Editor de FrontPage

El editor es una herramienta para el desarrollo de las pginas web individuales que componen nuestros proyectos web; su entorno de desarrollo es muy similar a los programas de la familia Office de Microsoft, lo que reduce el esfuerzo de aprendizaje. El editor nos ofrece adems la creacin de formularios y de scripting bsico para agregarle interactividad a las pginas. El editor se integra de forma transparente a todos los navegadores instalados en el PC, de forma de poder visualizar las pginas en cualquiera de ellos sin tener que reconfigurar el sistema; adems ofrece la posibilidad de simular diferentes resoluciones de pantalla, para ver las pginas en la mayor cantidad de situaciones posibles.

Pgina 5 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

1.4 La lista de tareas pendientes

Una de las fabulosas utilidades del FrontPage, es la lista de tareas pendientes. Con esta lista podemos llevar un control de los servicios que tenemos por cumplir en la tarea cotidiana de desarrollo, y evita innumerable pedacitos de papel al rededor del la computadora. Adems nos provee de un mtodo de asignacin de tareas cuando el desarrollo del proyecto est a cargo de un equipo de personas.
1.5 El Administrador de servidores

Para poder instalar y configurar correctamente las extensiones de Front Page en su servidor, el programa ofrece el Administrador de Servidores; con l podremos mantener correctamente las extensiones que se conectan al Explorador y al Editor de Front Page. El Administrador tambin nos permite agregarle seguridad a nuestro web a travs de procesos de autenticacin de las visitas, cuando el servicio ofrecido no debe estar disponible pblicamente.
1.6 El Web de Front Page

Cuando nos proponemos disear el web de nuestra empresa, antes de poner las manos en la masa, debemos pensar la cantidad de trabajo involucrado y el tiempo disponible para realizarlo. En algunas circunstancias el volumen de informacin es lo suficientemente grande como para ocupar muchas horas de trabajo de un equipo completo de desarrolladores. Para estos casos el Front Page define el concepto de Web de Front Page, que puede hacer significar un web site entero, o puede significar una parte definida de un proyecto de mayor envergadura, que envuelva varios webs de Front Page. La ventaja de esta idea es poder dividir todo el web site partes mas pequeas, de forma de poder asignarlas a una persona responsable de su ejecucin. Los diferentes webs de Front Page pueden relacionarse para formar el proyecto competo. En el siguiente captulo vamos a ver que el desarrollo y administracin usando el Front Page est orientado a atacar un Web de Front Page a la vez, de forma que el desarrollador se concentre en la tarea a la que fue designado y no se sienta perdido entre gran cantidad de pginas externas a su labor.

Pgina 6 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

1.7 Requerimientos de Hardware del Front Page 97

Para instalar el cliente Front Page 97 de Microsoft es necesario

1. Un PC 486 o superior, con 8 MB RAM (16 MB recomendado) para Windows 95, o 16 MB RAM (32 MB recomendado) para Windows NT. 2. Dispositivos multimedia si se quiere incluir multimedia en el proyecto. 3. 30 MB de espacio libre en el disco duro 4. Unidad de lectura de CD-ROM 5. Tarjeta de video VGA (SVGA recomendado) 6. Mouse 7. Conexin a Internet o intranet en el PC. Para las pruebas necesarias en las tareas de desarrollo : 1. Netscape Navigator 3.X 2. Netscape Communicator 4.X 3. Microsoft Internet Explorer 3.X Acceso a un servidor web compatible con las extensiones de Front Page : 1. Netscape Enterprise Server (para Windows NT o UNIX) 2. Netscape Fast Track Server (para Windows NT, Windows 95 o UNIX) 3. Netscape Commerce Server (para Windows NT o UNIX) 4. Netscape Communication Server (para Windows NT o UNIX) 5. Microsoft Internet Information Server (para Windows NT 3.51 y 4.0) 6. Microsoft Peer Web Services (para Windows NT-WS) 7. Microsoft Personal Web Server (para Windows 95) 8. O'Reilly Website (para Windows 95 y Windows NT) 9. NCSA (para UNIX) 10. Apache (para UNIX) 11. CERN (para UNIX)

Pgina 7 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

2. El Explorador de Front Page.

2.1 Descripcin de las Caractersticas del Explorador

El Explorador de FrontPage es el aplicativo de administracin; con l podemos ver nuestro Web de FrontPage organizado por directorios (modo de carpetas), u organizado por flujo (modo de hipervnculos):

Como podemos ver el modo de carpetas es totalmente familiar a la del explorador de Windows. Podemos revisar el contenido de cada directorio haciendo click sobre l en el panel izquierdo de la ventana, el contenido se mostrar en el panel derecho, exactamente de la misma forma que trabaja el explorador de Windows.

Pgina 8 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

En el modo de hipervnculos la presentacin se orienta a controlar el flujo de la informacin; con esta presentacin visual vemos claramente la forma que nuestras visitas pueden navegar en nuestro web. Tambin podemos controlar la consistencia de los hipervnculos, tanto internos como externos. Ahora veamos las opciones disponibles en el men de Herramientas. Las primeras tres opciones, Ortografa, Buscar y Remplazar, hacen referencia a todas las pginas del Web de FrontPage. Las siguientes opciones, Comprobar y Actualizar hipervnculos nos ofrece la comprobacin inmediata de todo la consistencia de navegacin de nuestro web; cuando usemos esta opcin el FrontPage nos indicar la existencia de hipervnculos rotos cuando estos existan. El siguiente grupo de opciones, Mostrar Editor, Lista de tareas pendientes, Mostrar imgenes tienen la misma funcin que los botones correspondientes en la barra de herramientas. El ltimo grupo de opciones tiene un papel importante en las tareas de desarrollo. Estas opciones nos permiten la administracin avanzada de nuestro Web. En los captulos siguientes vamos a ver los detalles de estas opciones.

Pgina 9 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
2.2 Las Barras de Herramientas del Explorador

Si en el Explorador de FrontPage no aparece la barra de herramientas, es por que est desactivada; puede activarla en cualquier momento desde el men Ver. La barra de herramientas del Explorador de FrontPage, a diferencia de la mayor parte de aplicativos Windows, no puede manejarse de forma flotante, as que siempre la tendr en la parte superior de la pantalla. Su apariencia y funciones son familiares a los de la suite Office 97 de Microsoft. Es bueno resaltar una vez mas que en el FrontPage el documento activo no es una pgina web, si no un Web de FrontPage; as todas las funciones de la barra de herramientas hacen referencia a los Webs de FrontPage, y no a las pginas que lo componen. Veamos ahora las funciones de la barra de herramientas : Nuevo Web de FrontPage Crea un nuevo Web de FrontPage. Cuando use esta opcin recuerde que el FrontPage solo puede trabajar con un Web de FrontPage simultneamente, as que tendr que abandonar el Web que est actualmente desarrollando. Abrir Web de FrontPage Con este botn puede abrir un Web de FrontPage existente, tanto en su propio PC, como en un servidor remoto conectado a Internet o a su intranet. Buscar Herramienta de bsqueda de caracteres. Busca en todas las pginas web que componen el Web de FrontPage. Ortografa Activa el servicio de correccin ortogrfica. La correccin se extiende a todas las pginas que componen el Web activo. Ver hipervnculos Activa el modo hipervnculos del Explorador. Se usa frecuentemente para controlar el flujo en nuestro Web. Ver carpetas Activa el modo carpetas del Explorador. En este modo se presenta la organizacin fsica de los archivos que componen nuestro web.

Pgina 10 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Subir un nivel En el modo carpetas se usa para cambiar a la carpeta padre. Hipervnculos a imgenes En el modo hipervnculos muestra / oculta los hipervnculos a imgenes en las pginas. Hipervnculos repetidos En el modo hipervnculos muestra / oculta los hipervnculos repetidos entre las pginas que componen el Web. Hipervnculos internos En el modo hipervnculos muestra / oculta los hipervnculos a la misma pgina Mostrar editor de FrontPage Lanza el editor de FrontPage, con el podemos crear / editar las pginas que componen nuestro Web. Mostrar lista de tareas pendientes Lanza la lista de tareas pendientes. Mostrar editor de imgenes Lanza el editor de imgenes externo. Por defecto asume el Image Composer de Microsoft, pero se puede configurar para usar cualquier otro programa grfico Detener Detienen la carga de un Web de FrontPage Ayuda Muestra la ayuda en lnea del FrontPage

2.3 Creacin de un Proyecto Web.

Pgina 11 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia OK, ahora pongamos las manos en la masa y comencemos a crear nuestro primer Web de FrontPage. Al lanzar la aplicacin el FrontPage nos presenta el cuadro de dilogo Introduccin a Microsoft FrontPage.

Desde esta ventana podremos crear nuestro primer Web de FrontPage. Para crear un Web nuevo tenemos las tres opciones inferiores : Desde un asistente o plantilla: Los asistentes en el FrontPage nos ofrecen gran parte del trabajo base para nuestras tareas, como son definir la estructura de directorios y de flujo de la informacin. Nosotros podremos elegir entre los asistentes o plantillas que se adecuen mas a nuestro problema, y luego haremos la personalizacin del modelo hasta haber alcanzado nuestra meta. Con el asistente para importar: Esta opcin es til cuando ya tenemos pginas creadas anteriormente y a partir de ahora queremos continuar nuestro desarrollo usando el FrontPage; el asistente le guiar paso a paso de como recuperar la informacin que ya cre, e incluirla dentro de un nuevo Web de FrontPage. Web de FrontPage en blanco: Esta es la alternativa que deberemos tomar cuando no encontramos ningn asistente o plantilla que se adecue a nuestro propsito. En este caso todo esta por hacer, asi que nuestro siguiente paso seria definir la organizacin del web, tanto de los directorios como del flujo de informacin.

Pgina 12 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia En cualquiera de los casos, el FrontPage nos preguntar el nombre del servidor donde vamos a crear el Web de FrontPage, y el nombre correspondiente. La ubicacin del servidor puede ser local o remota, bastan indicar el nombre Internet de la mquina. Si uno quiere crear un Web de FrontPage independientemente de un servidor, podr indicar un directorio local o de red en el cual crearlo.
2.4 Vista de un Proyecto desde el Explorador

Como ya mencionamos el Explorador nos permite observar la organizacin fsica y de flujo de nuestro Web de FrontPage; ahora veamos como obtener la informacin en cada caso. Cuando abrimos un Web de FrontPage, este se presenta de la siguiente manera: En el panel derecho de la ventana podemos ver los hipervnculos a los que apunta una pgina, asi como los hipervnculos desde los que se hace referencia a la pgina. podemos expandir o contraer esta vista a varios niveles usando los signos de expansin (+) o (-) de las pginas correspondientemente. Podemos tambin mover una pgina especfica al centro del panel dando un click derecho sobre el y eligiendo la opcin correspondiente. Cuando expandimos una vista de flujo podemos ver que el "camino" que seguimos se va pintando de color negro, de esa forma podemos fcilmente simular la navegacin que pueden tomar nuestras visitas.

Pgina 13 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia En el modo carpetas podemos organizar la estructura de directorios del Web. En este modo una informacin muy til es el tamao de la pgina en bytes; esta informacin es trascendental para el desarrollo para Internet e intranets, donde las velocidades de comunicaciones son una limitacin permanente. Los trabajos sobre los archivos tales como eliminacin, cambio de nombre, cambio de ubicacin, etc. Son hechas como en el explorador de Windows; en estos casos el FrontPage se encarga automticamente de reparar los hipervnculos que se originan por los cambios.
2.5 Identificacin de Hipervnculos

Para identificar el origen de un hipervnculo, basta ubicar el puntero del mouse sobre una de las pginas mostradas en el panel derecho del explorador; luego de un instante el hipervnculo se tornar rojo y aparecer en la pantalla su origen, indicando si es interno o externo.
2.5.1 Hipervnculos Rotos

El FrontPage puede verificar todos los hipervnculos existentes en nuestro Web, tanto internos como externos; esto es muy til cuando hay varios usuarios con acceso de lectrura/escritura a los directorios donde colocamos nuestro proyecto. En algunas circunstancias algunos vnculos pueden presentarse rotos por que el archivo de destino fu eliminado o movido fuera del FrontPage; esto es ms frecuente aun con hipervnculos a servidores y documentos externos.

Pgina 14 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
2.5.2 Comprobacin de Hipervnculos

Para efectuar la comprobacin de los hipervnculos, use la opcin Comprobar hipervnculos del men Herramientas. En el caso que se verifique hipervnculos rotos el FrontPage los mostrar de la siguiente forma:

En esta ventana es posible editar directamente el hipervnculo mediante el botn Modificar vnculo, al lado derecho de la ventana, o si est escaso de tiempo en ese momento, puede agregarlo a la lista de tareas pendientes para su culminacin futura.
2.5.3 Actualizacin de Hipervnculos

La opcin Actualizar hipervnculos produce que el programa actualice el Web, es decir, lo vuelva a cargar del servidor de origen. Esto nos es til cuando se han agregado o modificado el contenido de los directorios que componen el Web, con una herramienta externa al FrontPage; nuestro programa al leer el Web nuevamente verifica si existen archivos faltantes, o si hay otros archivos que al inicio de la sesin no estaban presentes.

Pgina 15 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
2.6 Imgenes, URLs 2.6.1 Imgenes

Antes de llegar a la edicin de pginas debemos discutir algo sobre de que manera se incluyen imgenes, sonido o video a las pginas. En todos estos casos estos efectos son archivos externos, a los que las pginas web hacen referencia, pero que existen de forma independiente de las pginas. Los archivos pueden ser creados por aplicaciones especializada en cada tarea; por ejemplo, los archivos grficos pueden trabajarse con aplicaciones como el Corel Draw!, Adobe PhotoShop, o el Image Composer que viene con el CD del FrontPage. Existen muchos formatos para guardar imgenes, sonido o video; para pginas web un factor importante es el tamao de los archivos, por lo que generalmente se incluyen apenas formatos que ofrecen compresin de la informacin. En el caso de archivos de imgenes los mas difundidos son el formato GIF y el formato JPG. En los captulos siguientes veremos esto en mas detalle; ahora veamos que son y como se usan los URLs.
2.6.2 URLs

Internet es una red global de alcance mundial; este hecho hace particularmente difcil poder ubicar los recursos que son disponibles en esta gran red; se necesita un mtodo de ubicar los recursos y/o servicios de manera fcil y cmoda; este problema lo resuelven los URLs (del ingls Uniform Resource Locator). El URL es la direccin de algn recurso en Internet, de forma que puede ser encontrado. La notacin para los URLs es, por ejemplo: http://www.microsoft.com/fpage/index.html http: Protocolo a usarse en la comunicacin; puede ser http, ftp, gopher, wais, mailto, etc. Www.microsoft.com: Nombre del servidor internet Fpage: Ruta del directorio donde se encuentra el recurso, dentro del servidor especificado. Index.html: Nombre del archivo que contiene el recurso al que hacemos diferencia. Cuando ponemos un archivo externo embutido dentro de nuestras pginas, este se muestra en el explorador de FrontPage como un vnculo, sin embargo no est indicado por flechas, sino por una bolita ploma y los archivo correspondientes. En general los archivos que van incrustados por el HTML se presentan de la misma manera. La opcin de ver/ocultar los archivos embutidos externos a las pginas, est disponible tambin en la barra de herramientas como lo discutimos antes.

Pgina 16 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

3. EL EDITOR DE FRONTPAGE
3.1 Descripcin de las Caractersticas del Editor

Hasta ahora hemos discutido la parte de organizacin y conceptos generales para la construccin de Webs de FrontPage; ahora veamos como construir las clulas que forman los Webs, es decir, las pginas web. Para realizar esta tarea, el FrontPage nos ofrece el Editor de FrontPage; este programa posee una apariencia muy familiar que los aplicativos de la suite Office 97. Con las facilidades que tiene el editor, podremos usar las mas comunes caractersticas de las pginas web publicadas en Internet, de una forma fcil y rpida; adems sin tener que aprender los cdigos HTML. Para lanzar el editor de FrontPage puede hacer doble-click en una pgina HTML que aparece en el Explorador de FrontPage; en este caso se abre el editor y adems se carga la pgina para su edicin; o tambin se puede hacer uso del botn "Mostrar Editor de FrontPage" de la barra de herramientas del Explorador.

3.1.1 Principales Caractersticas del Editor

Incluir informacin existente : Al igual que los otros aplicativos de Windows 95, el Editor acepta ingreso de informacin a travs de Copiar y Pegar, para poder incluir informacin parcial presente en algn archivo de nuestro PC. Si queremos incluir en nuestras pginas archivos enteros de la suite Office, tambin podremos hacerlo rpidamente, a travs de la operacin Arrastrar y Soltar, desde el Explorador de Windows. Vista previa en el programa explorador : Esta opcin, que se encuentra en el men Archivo, nos permite ver la pgina web activa en cualquiera de los navegadores instalados en nuestro PC; adems de poder escoger la resolucin a la que queremos visualizarlo. Navegacin similar al Web : El Editor nos permite ir cambiando la pgina activa a travs de botones de navegacin de forma similar a los navegadores web; esto hace nuestras tareas mas fciles y rpidas, disminuyendo el tiempo de aprendizaje.

Pgina 17 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
3.2 Las Barras de Herramientas del Editor

Si en el Editor de FrontPage no aparece la barra de herramientas, es por que est desactivada; puede activarla en cualquier momento desde el men Ver. La barra de herramientas del Editor de FrontPage posee la apariencia y funciones de la mayora de aplicativos de la suite Office 97 de Microsoft. Las principales barras de herramientas del editor de FrontPage son las siguientes: Barra de Herramientas Estndar

Barra de Herramientas Formato

3.3 Propiedades de la Pgina

Antes de introducir textos e imgenes a nuestras pginas, veamos como podemos configurar sus caractersticas generales; esto se hace a definiendo las propiedades de las pginas. Colores : Aqu definimos el color de fondo, el color del texto, el color de los hipervnculos, as como de los hipervnculos que ya fueron visitados. Ttulo : El ttulo es el texto que describe el contenido de la pgina. Sonido : En las propiedades tambin podremos asociar un sonido de fondo a las pginas. Hay que tener especial consideracin en estos casos, por que no necesariamente nuestros visitantes tendrn multimedia para poder reproducirla.

3.4 Desarrollo de Pginas Web

Ahora veamos como usar los recursos de edicin del FrontPage. En lneas generales la edicin es muy similar a la de cualquier editor de textos para Windows 95. Vamos a Pgina 18 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia concentrarnos primeramente en la creacin de listas, tablas, marcos, marcadores e hipervnculos.
3.4.1 Listas

Las listas sirven para mostrar ordenadamente una serie de items relacionados. Pueden ser numeradas, no numeradas, de definiciones, o una combinaciones de listas.

3.4.2 Tablas

En las tablas se presenta informacin organizada en filas y columnas; el uso de las tablas es particularmente extendido en las pginas web, debido a que adems de presentar informacin, se usa como herramienta para crear estilos especiales de pginas (texto en columnas, organizacin de grficos, etc.)

3.4.3 Marcos

Pgina 19 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Los marcos son una distribucin especial de la ventana del navegador. Con los marcos podemos mostrar varias pginas web simultneamente, en la misma pantalla; y as crear efectos muy interesantes y que son muy tiles para fines de navegacin.
3.4.4 Marcadores

Los marcadores son sealizadores de posiciones especficas en las pginas; se usan para poder hacer referencia a algn lugar especial de una pgina web.
3.4.5 Hipervnculos

Los hipervnculos son la implementacin de los documentos de hipertexto; con ellos podemos enlazar diferentes pginas web y crear sistemas de navegacin.
3.4.6 Acabados de presentacin

Con el FronPage tambin podemos mejorar la presentacin de nuestras pginas web, al agregarle diferentes apariencias a los prrafos y textos.
3.5 Inclusin de Imgenes 3.5.1 Imgenes

Las imgenes son archivos externos a las pginas web; nosotros podemos incluirlas en nuestras pginas haciendo referencia a estos archivos externos, desde nuestra pgina.
3.5.2 Formatos de Imagen

Para incluir imgenes en nuestras pginas web debemos usar archivos con formatos GIF o JPG; ambos son formatos con compresin de datos, de forma que son los mas adecuados para enviarlos por Internet. En la mayora de casos nosotros tendremos que incluir imgenes que las tenemos disponibles en otros formatos, es por eso que el FrontPage nos ofrece la posibilidad de trabajar con los siguientes formatos grficos : 1. CompuServ (GIF) 2. JPEG (JPG) 3. Bitmap (BMP) 4. TIFF (TIF) 5. Windows Metsfile (WMF) 6. Sun Raster (RAS) 7. Encapsulated Postscript (EPS) 8. Paintbrush (PCX) 9. Targa (TGA)

Pgina 20 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Cuando usted guarde la pgina que contiene la imagen, el FrontPage le ofrecer guardarlo en su Web de FrontPage en el formato GIF. Ahora para incluir las imgenes podemos hacer uso de la opcin Imagen del men Insertar, o hacerlo directamente usando el botn correspondiente de la barra de herramientas En ambos casos veremos el cuadro de dilogo de imagen:

Aqu vemos tres pestaas disponibles para especificar el archivo que contiene la imagen: Web de FrontPage actual : Esta pestaa la usamos cuando la imagen ya forma parte de nuestro Web de FrontPage. Podemos examinar el Web de FrontPage actual y elegir el archivo correspondiente. Otra Ubicacin : Cuando el archivo de la imagen aun no forma parte de nuestro Web, debemos usar esta pestaa para ubicarlo. Si la imagen est en nuestro PC o en la red local, usamos la opcin "Desde Archivo", y examinamos los discos hasta ubicar la imagen. Si la imagen est fuera de nuestra red local, usamos la opcin "Desde Ubicacin", y en el cuadro de texto ponemos el URL de la imagen requerida. En ambos casos al guardar la pgina, el FrontPage importar el archivo a nuestro Web de FrontPage. Galera de Imgenes : La mayora de las veces nosotros vamos a necesitar grficos Muy comunes, como lneas divisorias grficas, o conos diversos. El FrontPage nos ofrece una galera de imgenes que cubren estas necesidades; para acceder a la galera basta entrar en la pestaa correspondiente y escoger de acuerdo a lo que necesitamos.
3.5.3 Propiedades de imgenes

Para tener mayor control de la forma que la imagen aparece en la pantalla tenemos a disposicin el cuadro de propiedades de imagen; para entrar a las propiedades hacemos un clic-derecho sobre la imagen y elegimos la opcin "Propiedades de imagen".

3.5.4 Imgenes transparentes

Pgina 21 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia El formato GIF ofrece la posibilidad de presentar un color como transparente; esto quiere decir que nosotros podremos hacer que uno de los colores de la imagen deje ver el fondo de la pgina, como si fuera un vidrio. El FrontPage ofrece una herramienta para definir un color como transparente, de forma fcil y rpida. Para hacerlo seleccionamos la imagen en el Editor de FrontPage, damos un click en el botn de Hacer Transparente de la barra de herramientas de imagen, y finalmente hacemos click en el color de la imagen que querramos hacer transparente.
3.6 Componentes WebBot 3.6.1 Introduccin

Hasta el momento hemos visto la forma de crear pginas web, con el objetivo de publicarlas y distribuir informacin de forma masiva, eficiente y muy econmica; sin embargo, no hemos tenido la posibilidad de usar el web como recoleccin de informacin, o de la implementacin de servicios. Para ambos casos necesitamos tener programas instalados en nuestro servidor web, que sean capaces de recibir y procesar la informacin que recibimos de nuestras visitas. Este camino involucra el conocimiento de desarrollo y de los estndares que conectan los servidores web con los programas externos.
3.6.2 Qu son los Componentes WebBot ?

El FrontPage nos simplifica enormemente esta tarea, ofrecindonos un conjunto de programas de uso frecuente : los Componentes WebBot. Los componentes WebBot son aplicaciones que se instalan en el servidor web, junto a las Extensiones de FrontPage, y que nos permiten recibir y hacer procesos primarios de datos, adems de otras funcionalidades que discutiremos en detalle. Para utilizar los componentes WebBot, podemos elegir la opcin Componente WebBot, del men Insertar; o hacer click en el botn correspondiente, de la barra de herramientas. Veamos detalladamente los diferentes componentes WebBot que nos ofrece el FrontPage 97. Componente WebBot de Bsqueda Componente WebBot de Fecha Componente WebBot de Tabla de Contenidos Componente WebBot de Inclusin Componente WebBot de Inclusiones Temporales.

Pgina 22 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
3.7 Formularios HTML 3.7.1 Introduccin

Hemos visto como los componentes WebBot nos ofrecen un conjunto de programas fciles de implementar, que nos permiten poner servicios bsicos en nuestro web. En la mayora de casos nosotros necesitaremos tambin utilizar interfaces de usuario, donde nuestras visitas completen informacin y nos remitan el contenido; para tener de esta forma un mtodo fcil en que nuestros visitantes interacten activamente con nuestra empresa. La creacin de estas interfaces de usuario est asociada a la aplicacin de formularios HTML, que veremos a continuacin.
3.7.2 Componentes de formularios

Antes de crear interfaces completas de usuario, veamos cuales son los elementos que podemos incluir en los formularios, y como funciona cada uno de ellos.
3.7.2.1 Cuadro de texto de una lnea

En esta caja de texto podemos poner campos de informacin que ocupen solo una lnea, tales como nombres, apellidos, telfonos, etc. Ejemplo

3.7.2.2 Cuadro de texto con desplazamiento

Usamos este componente cuando la informacin a ser recibida puede ocupar varias lneas de texto, como es el caso de sugerencias o comentarios. Ejemplo

Pgina 23 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
3.7.2.3 Casilla de verificacin

Este componente es apropiado para situaciones donde slo podrn haber dos tipos de respuesta, Si o No, Activado o Desactivado, etc. Ejemplo

3.7.2.4 Botn de opcin

Usamos el botn de opcin cuando debemos elegir una alternativa entre varias opciones; al usar botones de opcin aseguramos que solo pueda ser seleccionada apenas una opcin; si se necesita aceptar selecciones mltiples deberemos usar el componente de men desplegable que veremos mas adelante. Ejemplo

3.7.2.5 Men desplegable

Este componente se usa cuando queremos dar a escoger una o ms opciones entre una serie de alternativas. Ejemplo

Pgina 24 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
3.7.2.6 Botones de comando

Con los botones de comando ofrecemos la opcin de enviar el formulario a proceso, limpiar el contenido del formulario, y tambin de ejecutar programas locales en JavaScript. Ejemplo

Importante
En el proceso de creacin de formularios hay que tener cuidado en que todos los componentes pertenezcan al mismo formulario, de forma que podamos trabajar con todos los campos de forma conjunta. En el FrontPage al crear un formulario aparece una lnea a trazos, que nos indica el alcance del formulario; todos los componentes que estn dentro de la lnea a trazos se tratarn de forma conjunta.
3.7.3 Pginas de confirmacin de formulario

Hemos visto como podemos crear formularios que nos permitirn ofrecer interfaces para que nuestras visitas nos enven informacin sobre algn tema en particular; luego de que la informacin es recibida por nuestro servidor es una buena costumbre enviar como respuesta una pgina de confirmacin, donde el visitante sienta que ha sido atendido, adems de poder verificar que no hubo errores en la informacin que remiti. En el FrontPage 97 podemos crear esta pgina de confirmacin de forma rpida, de modo que luego la asociemos a alguno de nuestros formularios y as crear un servicio de atencin automtica a travs del web. Una pgina de confirmacin no es diferente que una pgina web normal; apenas que en ella incluiremos unos elementos especiales que sern completados dinmicamente de un formulario HTML. Hemos visto que en la creacin de formularios debemos ponerle un nombre a cada uno de los componentes del formulario para despus poder diferenciarlos; en la pgina de confirmacin haremos uso de estos nombres, para poder repetirlos y reenviarlos al usuario.

Pgina 25 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia Ejemplo de Formulario:

Pgina de confirmacin:

Para crear una pgina de confirmacin solo tiene que crear una pgina nueva dentro de su web de FrontPage, y darle el formato que desea; para mostrar la informacin que fue enviada en el formulario, debe hacerlo usando el componente WebBot de Campo de Confirmacin, e indicarle el nombre del campo que quiere confirmar.

Pgina 26 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia
3.8 Componente WebBot de guardar datos 3.8.1 Introduccin

Hasta el momento hemos creado nuestros formularios y las pginas de confirmacin respectivas; aun falta indicar cual ser el programa que reciba los datos en el servidor, que los guarde para que los podamos usar posteriormente, y que llene y enve la pgina de confirmacin al cliente. Este ltimo paso para cerrar los formularios lo hacemos con otro de nuestros componentes WebBot. Hemos mencionado antes que cada uno de los formularios que creamos y publicamos debe estar asociado a un "controlador" del formulario; que es un programa que se ejecuta en nuestro servidor web; lo que debemos hacer ahora es indicarle a nuestros formularios cul ser el manejador que procese los datos que el reciba, cuando el usuario nos enve los datos.
3.8.2 Asignacin de un manejador de formulario

Para asignar un manejador al formulario, hacemos lo siguiente : 1. Abrimos la pgina que contiene el formulario en el Editor de FrontPage. 2. Ubicamos el mouse dentro del formulario y damos un click-derecho; en el men que parece, elegimos la opcin "Propiedades de Formulario"; en ese momento aparecer el cuadro de dilogo siguiente :

Pgina 27 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia 3. Abra el men desplegable de Controlador de Formulario y elija el Componente WebBot de Guardar Resultados. 4. Luego presione el botn de configuracin y ver un segundo cuadro de dilogo con tres pestaas. Pestaa de Resultados: Debe especificar el archivo donde el FrontPage guardar los resultados, as como el formato que desea en la salida; opcionalmente puede incluir informacin adicional en el archivo de salida. Pestaa de Confirmacin: Aqu debemos indicar cual es la pgina de confirmacin que hemos creado para nuestro formulario. Opcionalmente podemos incluir otra pgina que se mostrar si la validacin del formulario no tuvo xito. Pestaa de Avanzada: En esta parte podemos especificar un segundo archivo de salida, y el formato correspondiente. 5. Finalmente presione el botn OK, y el formulario estar listo para recibir informacin de los visitantes. Abra su navegador y pruebe que todo funcione correctamente.
3.9 Validacin de campos del formulario 3.9.1 Introduccin

Para terminar este captulo veamos una herramienta muy til en el proceso de publicacin de formularios en nuestros proyectos web. Normalmente cuando nosotros le pedimos a nuestros visitantes que ingresen su nombre, esperamos que en la caja de textos correspondiente no hayan nmeros, de la misma forma que no deberan haber letras en el campo de telfono; en algunas oportunidades la incompatibilidades de campo se debern apenas a un error de digitacin, y es conveniente enviarle un mensaje de alerta al usuario para que pueda corregir lo que sea necesario.
3.9.2 Pasos realizar validaciones

Para comenzar a poner validaciones en nuestros formularios debemos hacer un paso previo; en el Explorador de FrontPage elegir la opcin Configuracin del Web del men Herramientas; en el cuadro de dilogo que aparece, entrar en la pestaa Avanzada, y en el

Pgina 28 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia men desplegable de Secuencias de Comandos de Validacin, elegir la opcin JavaScript y luego presionar el botn Aceptar. Luego de haber completado este paso previo, debemos abrir la pgina que contiene el formulario en el Editor de FrontPage y examinar las propiedades de los campos de formulario. Los campos donde puede asociarse una validacin son los de Cuadro de texto de una lnea, Cuadro de texto con desplazamiento, Botones de opcin y Mens desplegables. Cada campo de formulario tiene opciones de validacin que son aplicables. Durante el desarrollo de las pginas debe elegir las opciones que correspondan. Aqu podremos indicar si la informacin de este campo debe ser solo texto o solo nmeros, o en que rango de valores puede estar el nmero, u otras opciones adicionales; luego que determinar la validacin a aplicar, presione el botn aceptar, guarde el archivo y prubelo en su navegador. La validacin de formularios le agrega un toque de sofisticacin a nuestro web, adems de aumentar la eficiencia de la atencin que le damos al usuario; recurdelo siempre al publicar formularios en Internet y en su Intranet.

Pgina 29 de 30

Universidad de Guadalajara Coordinacin General del Sistema para la Innovacin del Aprendizaje Coordinacin de Programas en Red y Educacin a Distancia

Creditos.

Gabriel Natale
Copyright 1998 [cybercursos.com.ar] Reservados todos los derechos.

Pgina 30 de 30