Manual de Frontpage 97

8/9/2019 Manual de Frontpage 97

1/45

www.microshopnet.net

Pgina 1

INTRODUCCINInternet y el World Wide Web

Ciertamente en nuestros das somos testigos de una revolucin en las comunicaciones; un eventotan 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 informacinactualizada 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. No es en vano queactualmente hay 100 millones de personas en la comunidad virtual, y con proyecciones de llegar a

500 millones hasta fin de siglo.

Internet es un conjunto de servicios distribuidos alrededor del mundo, que pueden accederse desde

cualquier computador conectado a la red. Las conexiones pueden ir desde econmicas lneastelefnicas y mdems, hasta muy costosas tecnologas de comunicacin que enlazan grandes

empresas y universidades.

Los mas populares servicios que Internet nos ofrece son el correo electrnico y el World WideWeb (tambin conocido simplemente como "el web"). El correo electrnico es el equivalente deuna casilla postal comn, donde usted recibe su correspondencia y a la vez puede despachar suscartas hacia todo el mundo. 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 cualquierinformacin de la empresa. La informacin que las empresas y personas ponen a disposicinpblica 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 losentornos 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. En el prximo tpico vamos a ver cmoes el funcionamiento general de los lenguajes de hipertexto.


2/45


Pgina 2

Lenguajes de Hipertexto y HTML

Qu es un hipertexto?

Un hipertexto es un texto comn, con la funcionalidad adicional de poderrelacionarsecon otros documentos, a travs de vnculos (en la terminologadel web se le conoce como hipervnculos); y de esta forma poder presentarorganizadamente una coleccin de informacin que sea fcil de examinar yusar.

Qu es el HTML?

HTML (del ingls, HyperText Markup Languaje) es un lenguaje parapreparar documentos de hipertexto; este lenguaje es el estndar para ladistribucin de informacin en el web (de ahora en adelante, pginas web).

En sus pocos aos de vida, el HTML ha sufrido varias transformacionesdesde la versin 1.0, 2.0, 3.0, 3.2 y en un futuro muy prximo el HTML 4.0;estas transformaciones han hecho de este lenguaje de hipertexto unapoderosa herramienta para distribuir cualquier tipo de informacin, con laventaja de poder presentar un entorno enriquecido de grficos, sonido einteractividad con el lector.

Antes de comenzar a crear documentos HTML es bueno realzar queaunque el lenguaje nos permite enorme flexibilidad para disear nuestraspginas web, no tiene (por lo menos hasta el HTML 3.2) todos los recursosque nos ofrece un procesador de textos de alto nivel como el MS Word, o elCorel WordPerfect por ejemplo.


3/45


Pgina 3

Conceptos de Servidores y Clientes Web

Ahora que ya sabemos que son pginas web debemos discutir como esque esta informacin se publica en Internet, o al interior de nuestrasempresas a travs de una intranet.

Para publicar nuestras pginas web necesitamos una computador, conconexin de red permanente, y con el software adecuado que se encarguede enviar la informacin cuando algn usuario se lo pida; a esta mquina,que requiere caractersticas adecuadas para sus funciones se le conocecomo "servidor web"; es en el servidor web que nosotros vamos a depositarnuestras pginas para que nuestras visitas virtuales puedan accederlas.

Por el otro lado de la historia est la comunidad de Internet, o intranets, queson quienes van a buscar la informacin que nosotros publiquemos; estaspersonas necesitan de un software especial llamado "cliente web" o

"navegador web", para poder acceder a nuestros servidores web. Entre losms populares navegadores estn el Netscape Navigator y el InternetExplorer de Microsoft.

La instalacin de un servidor web es una tarea que requiere conocimientostcnicos de tecnologa de redes y protocolos TCP/IP. En la mayora de loscasos, uno puede obtener un servidor web para publicar sus pginaspagando una cuota mensual, o algunas veces de forma gratuita. Lainstalacin de un navegador web, es por el contrario muy sencilla y puedeser hecho de forma domstica sin necesitar de un experto en el tema.

Cmo funciona el envo de pginas en Internet, o intranets?

El proceso de distribucin de informacin se realiza en las siguientesetapas :

1. El cliente pide la informacin a travs del URL : La primera etapa escuando un usuario de la comunidad Internet abre su navegador weby pide un recurso en Internet a travs de su "direccin" URL; porejemplo, http://www.cybercursos.net , etc. El navegador web entra encontacto con el servidor web donde se ubica el recurso y le hace

llegar el pedido especfico de la informacin.

2. El servidor web verifica que el recurso solicitado esta disponible, y sitodo esta OK enva la informacin de vuelta al cliente que hizo elpedido.

3. El navegador web recibe la informacin enviada por el servidor web,


4/45


Pgina 4

y la presenta en la pantalla; esta informacin (pginas web) puedecontener texto, grficos, multimedia, y puede responder activamentea las acciones del usuario haciendo que sea ms atractiva de leer.Las pginas comnmente ofrecen hipervnculos a otros recursosdonde existe informacin relacionada, estos hipervnculos puedes

activarse con un "click" del mouse y produce que un nuevo pedido deinformacin sea enviado al mismo o a otro servidor web.


5/45


Pgina 5

Guas generales para construir un web site

Antes de comenzar a ver las tcnicas para desarrollar pginas web, es til y necesario discutir

conceptos generales sobre el diseo de colecciones de informacin; de esta forma podremosprepararnos a crear organizadamente nuestro web site.

Facilidad de navegacin

Un factor importante es la forma que debemos presentar la informacin, hayque siempre tener en cuenta que a medida que la cantidad de pginaspublicadas aumenta, es cada vez ms difcil para las visitas encontrar loque necesitan. La mejor forma de ofrecer la informacin es organizarla enreas definidas, permitiendo as que la navegacin sea muy intuitiva. Si las

visitas necesitan gastar mucho tiempo para encontrar la pgina buscada,tenga por seguro que se sentir desalentada a regresar posteriormente, opeor aun, puede abandonar la bsqueda en el medio del camino. Lasimgenes son una buena alternativa para hacer que las pginas web seaauto-explicativas.

Control de flujo de navegacin

Al crear un web site piense de la misma manera que al ubicar las diferentessecciones de mercaderas en una tienda de ropa o de abarrotes. Si unadulto pretende ir a la seccin de licoreria, con seguridad en el camino noira a pasar por la seccin de juguetes o dulces; el mismo es el caso de losnios que van a la seccin de juguetes que con seguridad no pasarn por laseccin de tabacos o de ropa para adultos. El flujo de navegacin, esto es,el camino que debe seguir la visita hasta llegar a su objetivo, tiene queestar de acuerdo a los intereses del visitante, y hacer que las pginasintermedias sean atractivas y tiles a sus propsitos.

Defina cuidadosamente su pblico objetivo

Como en cualquier campaa de marketing, debe ponerse a pensar quien esel pblico primario de su web, que tipo de conexin a Internet usa paraacceder a su web y cuanto tiempo generalmente pasa al frente de suspginas. Esta informacin es muy til para definir el contenido, en texto ygrficos, de sus pginas.


6/45


Pgina 6

Cuidado con el "tamao" de las pginas

Es realmente frustrante cuando visitamos un web site, y debemos esperar

mucho tiempo, en algunos casos hasta algunos minutos, para que la pginasea completamente mostrada en la pantalla. Como veremos, las pginascompuestas de texto, grficos y multimedia, generan una muy agradableimpresin, sin embargo son ms lentas para mostrarse al visitante. Eldesarrollador puede fcilmente considerar este parmetro como criteriopara la eleccin del contenido de las pginas.

Pruebe todo su web cuidadosamente antes de publicarlo

Recuerde siempre que su pblico puede observar sus pginas desdecualquier tipo de sistema operativo (Windows 3.X, Windows 95, OS/2,MacOS, UNIX, etc..), con cualquiera de los navegadores disponibles en elmercado (Netscape Navigator 3.0, Netscape Communicator 4.0, InternetExplorer 3.0, etc..), con diferentes tipos de resolucin de pantalla (640 x 480, 600 x 800, etc..) y conectados a Internet a diferentes velocidades (9600bps, 14400 bps, 28800 bps, etc..). Estas diferencias pueden hacer que susdiseos aparezcan muy buenos para un visitante particular, sin embargoaparezcan psimos para otros; en general se recomienda probar el web enla mayor cantidad de condiciones posibles, y tratar de hallar un factorcomn para que sea correctamente presentado. Si no toma el suficiente

cuidado para alguna configuracin puede que el visitante se encuentre conuna pgina totalmente desordenada y de mal gusto, en este caso tenga porseguro que habr perdido un potencial cliente.


7/45


Pgina 7

Qu es el Front Page?

En la seccin anterior hemos visto cules son las consideraciones generales para desarrollar unproyecto web; ahora veamos uno de los productos disponibles comercialmente que nos ofrece un

conjunto de herramientas muy tiles para alcanzar nuestros objetivos : El Front Page 97 de

Microsoft .

El Front Page 97 es un aplicativo que se ejecuta en Windows 95 o Windows NT, que nos permitetener una visin completa de un proyecto web como si fuera apenas una pgina. En el Front Pagese 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.

El Explorador de FrontPage :

Es una herramienta de administracin de proyectos web; tanto de formalocal como remota; es decir, un PC con el Front Page instalado puedeadministrar un proyecto web que est publicado en cualquier otro lugar deInternet. Con el Explorador tendremos una visin general de la organizacinfsica de los archivos que componen el web, su estructura de directorios,as como la organizacin del flujo de la informacin y el control de laconsistencia de los vnculos internos y externos. Con estas ventajaspodremos rpidamente organizar e implementar nuestros proyectos para elweb.

El Editor de FrontPage :

El editor es una herramienta para el desarrollo de las pginas webindividuales que componen nuestros proyectos web; su entorno de


8/45


Pgina 8

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 lacreacin de formularios y de scripting bsico para agregarle interactividad alas pginas. El editor se integra de forma transparente a todos losnavegadores instalados en el PC, de forma de poder visualizar las pginas

en cualquiera de ellos sin tener que reconfigurar el sistema; adems ofrecela posibilidad de simular diferentes resoluciones de pantalla, para ver laspginas en la mayor cantidad de situaciones posibles.

La lista de tareas pendientes :

Una de las fabulosas utilidades del FrontPage, es la lista de tareaspendientes. Con esta lista podemos llevar un control de los servicios quetenemos por cumplir en la tarea cotidiana de desarrollo, y evita innumerablepedacitos de papel al rededor del la computadora. Adems nos provee deun mtodo de asignacin de tareas cuando el desarrollo del proyecto est acargo de un equipo de personas.

El Administrador de servidores :

Para poder instalar y configurar correctamente las extensiones de FrontPage en su servidor, el programa ofrece el Administrador de Servidores;con l podremos mantener correctamente las extensiones que se conectanal Explorador y al Editor de Front Page. El Administrador tambin nos

permite agregarle seguridad a nuestro web a travs de procesos deautenticacin de las visitas, cuando el servicio ofrecido no debe estardisponible pblicamente.

Como vemos, el Front Page es realmente una herramienta completa de desarrollo de proyectos

web que nos ser muy til para el xito de nuestros planes de trabajo.Antes de poner las manos en la masa y comenzar nuestras tareas de desarrollo discutamos unconcepto asociado : los Web de Front Page .

El Web de Front Page

Cuando nos proponemos disear el web de nuestra empresa, antes deponer las manos en la masa, debemos pensar la cantidad de trabajoinvolucrado y el tiempo disponible para realizarlo. En algunas circunstanciasel volumen de informacin es lo suficientemente grande como para ocuparmuchas horas de trabajo de un equipo completo de desarrolladores. Para


9/45


Pgina 9

estos casos el Front Page define el concepto de Web de Front Page, quepuede hacer significar un web site entero, o puede significar una partedefinida de un proyecto de mayor envergadura, que envuelva varios websde Front Page. La ventaja de esta idea es poder dividir todo el web sitepartes mas pequeas, de forma de poder asignarlas a una persona

responsable de su ejecucin. Los diferentes webs de Front Page puedenrelacionarse para formar el proyecto competo.

En el siguiente captulo vamos a ver que el desarrollo y administracinusando el Front Page est orientado a atacar un Web de Front Pagea lavez, de forma que el desarrollador se concentre en la tarea a la que fuedesignado y no se sienta perdido entre gran cantidad de pginas externas asu labor.


10/45


Pgina 10

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 MBRAM (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-ROM5. 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.X3. Microsoft Internet Explorer 3.X

Acceso a un servidor web compatible con las extensiones de FrontPage :

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)


11/45


Pgina 11

EL EXPLORADOR DE FRONTPAGEDescripcin 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 dehipervnculos):

Como podemos ver el modo de carpetas es totalmente familiar a la del explorador de Windows.

Podemos revisar el contenido de cada directorio haciendo clicksobre l en el panel izquierdo de la

ventana, el contenido se mostrar en el panel derecho, exactamente de la misma forma quetrabaja el explorador de Windows.


12/45


Pgina 12

En el modo de hipervnculos la presentacin se orienta a controlar el flujo de la informacin; conesta presentacin visual vemos claramente la forma que nuestras visitas pueden navegar en

nuestro web. Tambin podemos controlar la consistencia de los hipervnculos, tanto internos comoexternos.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. Lassiguientes opciones, Comprobar y Actualizar hipervnculos nos ofrece la comprobacin inmediatade 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 deopciones, Mostrar Editor, Lista de tareas pendientes, Mostrar imgenes tienen la misma funcinque los botones correspondientes en la barra de herramientas.

El ltimo grupo de opciones tiene un papel importante en las tareas de desarrollo. Estas opcionesnos permiten la administracin avanzada de nuestro Web. En los captulos siguientes vamos a verlos detalles de estas opciones.


13/45


Pgina 13

Las Barras de Herramientas del Explorador

Si en el Explorador de FrontPage no aparece la barra de herramientas, es por que estdesactivada; 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 partesuperior 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 activono es una pgina web, sino un Web de FrontPage ; asi todas las funciones de la barra de herramientas hacen referencia alos Webs de FrontPage, y no a las pginas que lo componen.Veamos ahora las funciones de la barra de herramientas :

NuevoWeb deFrontPage

Crea un nuevo Web de FrontPage. Cuando use esta opcinrecuerde que el FrontPage solo puede trabajar con un Web de

FrontPage simultaneamente, asi que tendr que abandonar elWeb que est actualmente desarrollando.

Abrir WebdeFrontPage

Con este botn puede abrir un Web de FrontPage existente, tantoen su propio PC, como en un servidor remoto conectado a Interneto a su intranet.

Buscar Herramienta de bsqueda de caracteres. Busca en todas laspginas web que componen el Web de FrontPage.

Ortografa Activa el servicio de correccin ortogrfica. La correccin seextiende a todas las pginas que componen el Web activo.

Verhipervnculos

Activa el modo hipervnculos del Explorador. Se usafrecuentemente para controlar el flujo en nuestro Web.

Vercarpetas

Activa el modo carpetas del Explorador. En este modo se presenta

la organizacin fsica de los archivos que componen nuestro web.

Subir unnivel

En el modo carpetas se usa para cambiar a la carpeta padre

Hipervncul

os aimgenes

En el modo hipervnculos muestra/oculta los hipervnculos aimgenes en las pginas

Hipervnculosrepetidos

En el modo hipervnculos muestra/oculta los hipervnculos

repetidos entre las pginas que componen el Web.


14/45


Pgina 14

Hipervnculos internos

En el modo hipervnculos muestra/oculta los hipervnculos a lamisma pgina

Mostrar

editor deFrontPage

Lanza el editor de FrontPage, con el podemos crear/editar las

pginas que componen nuestro Web.

Mostrarlista detareaspendientes

Lanza la lista de tareas pendientes.

Mostrareditor de

imgenes

Lanza el editor de imgenes externo. Por defecto asume el Image

Composer de Microsoft, pero se puede configurar para usarcualquier otro programa grfico

Detener Detienen la carga de un Web de FrontPage

Ayuda Muestra la ayuda en linea del FrontPage


15/45


Pgina 15

Creacin de un Proyecto Web

OK, ahora pongamos las manos en la masa y comencemos a crear nuestro primer Web deFrontPage. Al lanzar la aplicacin el FrontPage nos presenta el cuadro de dilogo Introduccin aMicrosoft FrontPage.

Desde esta ventana podremos crear nuestro primer Web de FrontPage. Para crear un Web nuevotenemos las tres opciones inferiores :

Desde un asistente o plantilla:

Quienes tienen experiencia con el uso del Microsoft Office saben la valiosaayuda que nos ofrecen los asistentes y las plantillas; en el FrontPage nosofrecen gran parte del trabajo base para nuestras tareas, como son definirla estructura de directorios y de flujo de la informacin. Nosotros podremoselegir entre los asistentes o plantillas que se adecuem mas a nuestroproblema, y luego haremos la personalizacin del modelo hasta haberalcanzado nuestra meta.


16/45


17/45


Pgina 17

Vista de un Proyecto desde el Explorador

Como ya mencionamos el Explorador nos permite observar la organizacin fsica y de flujo denuestro Web de FrontPage; ahora veamos como obtener la informacin en cada caso.

Cuando abrimos um 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, asicomo 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 pginascorrespondientemente. Podemos tambin mover una pgina especfica al centro del panel dandoun click derecho sobre el y eligiendo la opcin correspondiente.

Cuando expandimos una vista de flujo podemos ver que el "camino" que seguimos se va pintandode color negro, de esa forma podemos fcilmente simular la navegacin que pueden tomarnuestras visitas.


18/45


Pgina 18

En el modo carpetas podemos organizar la estructura de directorios del Web. El ambiente familiardel explorador de Windows nos hace mas fcil usar sus funcionalidades, por ejemplo en laordenacin de los archivos por diferentes campos. En este modo una informacin muy til es el

tamao de la pgina en bytes; esta informacin es trascendental para el desarrollo para Internet eintranets, donde las velocidades de comunicaciones son una limitacin permanente. Los trabajossobre los archivos tales como eliminacin, cambio de nombre, cambio de ubicacin, etc. son

hechas como en el exporador de Windows; en estos casos el FrontPage se encargaautomaticamente de reparar los hipervnculso que se originan por los cambios.


19/45


Pgina 19

Identificacin de Hipervnculos

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

Hipervnculos Rotos

El FrontPage puede verificar todos los hipervnculos existentes en nuestroWeb, tanto internos como externos; esto es muy til cuando hay variosusuarios con acceso de lectrura/escritura a los directorios donde colocamosnuestro proyecto. En algunas circunstancias algunos vnculos puedenpresentarse rotos por que el archivo de destino fu eliminado o movidofuera del FrontPage; esto es ms frecuente aun con hipervnculos aservidores y documentos externos.

Comprobacin de Hipervnculos

Para efectuar la comprobacin de los hipervnculos, use la opcin

Comprobar hipervnculos del men Herramientas. En el caso que severifique hipervnculos rotos el FrontPage los mostrar de la siguiente forma:


20/45


Pgina 20

En esta ventana es posible editar directamente el hipervnculo mediante elbotn Modificar vnculo, al lado derecho de la ventana, o si est escaso detiempo en ese momento, puede agregarlo a la lista de tareas pendientespara su culminacin futura.

Actualizacin de Hipervnculos

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


21/45


Pgina 21

Imgenes, URLs

Imgenes

Antes de llegar a la edicin de pginas debemos discutir algo sobre de que manera se incluyenimgenes, 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 laspginas.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 elImage Composer que viene con el CD del FrontPage. Existen muchos formatos para guardarimgenes, 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 elcaso 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.

URLsInternet es una red global de alcanze mundial; este hecho hace particularmente difcil poder ubicar

los recursos que son disponibles en esta gran red; se necesita un mtodo de ubicar los recursosy/o servicios de manera fcil y cmoda; este problema lo resuleven los URLs (del ingls UniformResource Locator). El URL es la direccin de algun recurso en Internet, de forma que puede serencontrado. La notacin para los URLs es, por ejemplo:

http://www.microsoft.com/fpage/index.html

http: Protocolo a usarse en lacomunicacin; puede ser http, ftp,gopher, wais, mailto, etc.

Www.microsoft.com: Nombre del servidor internet

Fpage: Ruta del directorio donde seencuentra el recurso, dentro delservidor especificado.

Index.html: Nombre del archivo que contieneel recurso al que hacemosdiferencia.

Cuando ponemos un archivo externo embutido dentro de nuestras pginas, este se muestra en elexplorador de FrontPage como un vnculo, sin embargo no est indicado por flechas, sino por unabolita 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 externosa las pginas, est disponible tambin en la barra de herramientas como lo discutimos antes.


22/45


Pgina 22

EL EDITOR DE FRONTPAGE

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 eleditor, podremos usar las mas comunes caracteristicas 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 elExplorador de FrontPage; en este caso se abre el editor y adems se carga la pgina para suedicin; o tambin se puede hacer uso del botn "Mostrar Editor de FrontPage" de la barra de

herramientas del Explorador.

Principales Caractersticas del Editor

Incluir informacin existente :

Al igual que los otros aplicativos de Windows 95, el Editor acepta ingreso deinformacin a travs de Copiar y Pegar, para poder incluir informacinparcial presente en algun archivo de nuestro PC. Si queremos incluir ennuestras pginas archivos enteros de la suite Office, tambin podremoshacerlo rpidamente, a travs de la operacin Arrastrar y Soltar, desde elExplorador 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 nuestroPC; adems de poder escojer la resolucin a la que queremos visulizarlo.

Navegacin similar al Web :

El Editor nos permite ir cambiando la pgina activa a travs de botones denavegacin de forma similar a los navegadores web; esto hace nuestrastareas mas fciles y rpidas, disminuyendo el tiempo de aprendizaje.


23/45


Pgina 23

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 Estandar

Barra de Herramientas Formato


24/45


Pgina 24

Propiedades de la Pgina

Antes de introducir textos e imgenes a nuestras pginas, veamos como podemos configurar suscaracteristicas generales; esto se hace a definiendo las propiedades de las pginas.

Colores :Aqui definimos el color de fondo, el color del texto, el color de loshipervnculos, asi como de los hipervnculos que ya fueron visitados.

Ttulo :El ttulo es el texto que describe el contenido de la pgina. Hay que tomarespecial cuidado al escogerlo, por que este texto se asocia a la direccincuando uns visita la elije como bookmark (favoritos); de forma que un ttuloque parece correcto en el contexto de un Web, puede ser imposible deidentificar cuando esta de forma aislada.

Sonido :

En las propiedades tambin podremos asociar un sonido de fondo a laspginas. Hay que tener especial considewracin en estos casos, por que nonecesariamente nuestros visitantes tendrn multimedia para poderreproducirla. Mas adelante discutiremos consideraciones extras sobremultimedia y Web.


25/45


Pgina 25

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 concentrarnos

primeramente en la creacin de listas, tablas, marcos, marcadores e hipervnculos.

Listas

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

Tablas

En las tablas se presenta informacin organizada en filas y columnas; el uso delas tablas es particularmente extendido en las pginas web, debido a queadems de presentar informacin, se usa como herramienta para crear estilos


26/45


Pgina 26

especiales de pginas (texto en columnas, organizacin de grficos, etc.).

Marcos

Los marcos son una distribucin especial de la ventana del navegador. Con losmarcos podemos mostrar varias pginas web simultaneamente, en la mismapantalla; y as crear efectos muy interesantes y que son muy tiles para finesde navegacin.

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.

Hipervnculos


27/45


Pgina 27

Los hipervnculos son la implementacin de los documentos de hipertexto; conellos podemos enlazar diferentes pginas web y crear sistemas de navegacin.

Acabados de presentacin

Con el FronPage tambin podemos mejorar la presentacin de nuestraspginas web, al agregarle diferentes apariencias a los prrafos y textos.


28/45


Pgina 28

Inclusin de Imgenes

Imgenes

Las imgenes son archivos externos a las pginas web; nosotros podemosincluirlas en nuestras pginas haciendo referencia a estos archivosexternos, desde nuestra pgina.

Formatos de Imgen

Para incluir imgenes en nuestras pginas web debemos usar archivos conformatos GIF o JPG; ambos son formatos con compresin de datos, deforma que son los mas adecuados para enviarlos por Internet. En la

mayoria de casos nosotros tendremos que incluir imgenes que lastenemos disponibles en otros formatos, es por eso que el FrontPage nosofrece 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)

Cuando usted guarde la pgina que contiene la imgen, el FrontPage leofrecer guardarlo en su Web de FrontPage en el formato GIF.

Ahora para incluir las imgenes podemos hacer uso de la opcin Imagendel men Insertar, o hacerlo directamente usando el botn correspondiente

de la barra de herramientas:

En ambos casos veremos el cuadro de dilogo de imgen:


29/45


Pgina 29

Aqui vemos tres pestaas disponibles para especificar el archivo quecontiene la imgen:

Web de FrontPage actual

Esta pestaa la usamos cuando la imgen ya forma parte de nuestroWeb de FrontPage. Podemos examinar el Web de FrontPage actual yelegir el archivo correspondiente.

Otra Ubicacin

Cuando el archivo de la imgen aun no forma parte de nuestro Web,debemos usar esta pestaa para ubicarlo. Si la imgen est en nuestroPC o en la red local, usamos la opcin "Desde Archivo", y examinamoslos discos hasta ubicar la imgen. Si la imgen est fuera de nuestra redlocal, usamos la opcin "Desde Ubicacin", y en el cuadro de textoponemos el URL de la imgen requerida. En ambos casos al guardar lapgina, el FrontPage importar el archivo a nuestro Web de FrontPage.

Galera de Imgenes

La mayoria de las veces nosotros vamos a necesitar grficos muycomunes, como lineas divisorias grficas, o conos diversos. ElFrontPage nos ofrece una galeria de imgenes que cubren estasnecesidades; para acceder a la galeria basta entrar en la pestaacorrespondiente y escoger de acuerdo a lo que necesitamos


30/45


Pgina 30

Propiedades de imgenes

Para tener mayor control de la forma que la imgen aparece en la pantallatenemos a disposicin el cuadro de propiedades de imgen; para entrar a

las propiedades hacemos un click-derecho sobre la imgen y elegimos laopcin "Propiedades de imgen".

Imgenes transparentes

El formato GIF ofrece la posibilidad de presentar un color comotransparente; esto quiere decir que nosotros podremos hacer que uno delos colores de la imgen deje ver el fondo de la pgina, como si fuera unvidrio. El FrontPage ofrece una herramienta para definir un color comotransparente, de forma fcil y rpida. Para hacerlo seleccionamos la imgen

en el Editor de FrontPage, damos un click en el botn de HacerTransparente de la barra de herramientas de imgen, y finalmente hacemosclick en el color de la imgen que querramos hacer transparente.


31/45


Pgina 31

Componentes WebBot

Introduccin

Hasta el momento hemos visto la forma de crear pginas web, con elobjetivo de publicarlas y distribuir informacin de forma masiva, eficiente ymuy econmica; sin embargo, no hemos tenido la posibilidad de usar elweb como recoleccin de informacin, o de la implementacin de servicios.Para ambos casos necesitamos tener programas instalados en nuestroservidor web, que sean capaces de recibir y procesar la informacin querecibimos de nuestras visitas. Este camino involucra el conocimiento dedesarrollo y de los estndares que conectan los servidores web con losprogramas externos.

Componentes WebBotEl FrontPage nos simplifica enormemente esta tarea, ofrecindonos unconjunto de programas de uso frecuente : los Componentes WebBot. Loscomponentes WebBot son aplicaciones que se instalan en el servidor web,

junto a las Extensiones de FrontPage, y que nos permiten recibir y hacerprocesos primarios de datos, adems de otras funcionalidades quediscutiremos en detalle.

Para utilizar los componentes WebBot, podemos elegir la opcinComponente WebBot, del men Insertar; o hacer click en el botncorrespondiente, de la barra de herramientas.

Veamos detalladamente los diferentes componentes WebBot que nosofrece 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


32/45


Pgina 32

Formularios HTML

Introduccin

Hemos visto como los componentes WebBot nos ofrecen un conjunto de

programas fciles de implementar, que nos permiten poner serviciosbsicos en nuestro web. En la mayora de casos nosotros necesitaremostambin utilizar interfaces de usuario, donde nuestras visitas completeninformacin y nos remitan el contenido; para tener de esta forma un mtodofcil en que nuestros visitantes interacten activamente con nuestraempresa. La creacin de estas interfaces de usuario est asociada a laaplicacin de formularios HTML, que veremos a continuacin.

Componentes de formularios

Antes de crear interfaces completas de usuario, veamos cuales son los

elementos que podemos incluir en los formularios, y como funciona cadauno de ellos.

Cuadro de texto de una lnea

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

Ejemplo

Escriba aqu su nombre completo :

Cuadro de texto con desplazamiento

Usamos este componente cuando la informacin a ser recibida puedeocupar varias lneas de texto, como es el caso de sugerencias ocomentarios.

Ejemplo


33/45


34/45


Pgina 34

Indique los idiomas que domina:

InglsEspaolFrancs

Botones de comando

Con los botones de comando ofrecemos la opcin de enviar el formulario aproceso, limpiar el contenido del formulario, y tambin de ejecutarprogramas locales en JavaScript.

Ejemplo

Enviar datosLimpiar formulario

Botn de script

Importante

En el proceso de creacin de formularios hay que tener cuidado en quetodos los componentes pertenezcan al mismo formulario, de forma que

podamos trabajar con todos los campos de forma conjunta. En el FrontPageal crear un formulario aparece una lnea a trazos, que nos indica el alcancedel formulario; todos los componentes que estn dentro de la lnea a trazosse tratarn de forma conjunta.


35/45


Pgina 35

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 deconfirmacin, 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 queluego 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 ellaincluiremos 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 delos componentes del formulario para despus poder diferenciarlos; en la pgina de confirmacinharemos uso de estos nombres, para poder repetirlos y re-enviarlos al usuario.

Ejemplo de formulario :

Nombre : (campo nombre)Apellido : (campo apellido)Telfono : (campo telfono)

Enviar datos Limpiar formulario

Pgina de confirmacin :

Gracias por llenar el formulario...Los datos recibidos fueron :

Nombre Aqu se repite el campo "nombre"

Apellido Aqu se repite el campo "apellido"

Telfono Aqu se repite el campo "telfono"

Para crear una pgina de confirmacin solo tiene que crear una pgina nueva dentro de su web deFrontPage, y darle el formato que desea; para mostrar la informacin que fue enviada en elformulario, debe hacerlo usando el componente WebBot de Campo de Confirmacin, e indicarle el

nombre del campo que quiere confirmar.


36/45


Pgina 36

Componente WebBot de guardar datos

Introduccin

Hasta el momento hemos creado nuestros formularios y las pginas deconfirmacin respectivas; aun falta indicar cual ser el programa que recibalos datos en el servidor, que los guarde para que los podamos usarposteriormente, y que llene y enve la pgina de confirmacin al cliente.

Este ltimo paso para cerrar los formularios lo hacemos con otro denuestros componentes WebBot. Hemos mencionado antes que cada unode los formularios que creamos y publicamos debe estar asociado a un"controlador" del formulario; que es un programa que se ejecuta en nuestroservidor 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.

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 deFrontPage.

2. Ubicamos el mouse dentro del formulario y damos un click-derecho;en el men que aparece, elegimos la opcin "Propiedades de

Formulario"; en ese momento aparecer el cuadro de dilogosiguiente :


37/45


Pgina 37

3. Abra el men desplegable de Controlador de Formulario y elija elComponente WebBot de Guardar Resultados.

4. Luego presione el botn de configuracin y ver un segundo cuadrode dilogo con tres pestaas

Pestaa de Resultados:

Debe especificar el archivo donde el FrontPage guardar losresultados, as como el formato que desea en la salida;opcionalmente puede incluir informacin adicional en el archivo


38/45


Pgina 38

de salida.

Pestaa de Confirmacin:

Aqu debemos indicar cual es la pgina de confirmacin quehemos creado para nuestro formulario. Opcionalmente podemosincluir otra pgina que se mostrar si la validacin del formulariono 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 pararecibir informacin de los visitantes. Abra su navegador y pruebe quetodo funcione correctamente.


39/45


Pgina 39

Validacin de campos del formulario

IntroduccinPara terminar este captulo veamos una herramienta muy til en el procesode publicacin de formularios en nuestros proyectos web. Normalmentecuando nosotros le pedimos a nuestros visitantes que ingresen su nombre,esperamos que en la caja de textos correspondiente no hayan nmeros, dela misma forma que no deberan haber letras en el campo de telfono; enalgunas oportunidades la incompatibilidades de campo se debern apenasa un error de digitacin, y es conveniente enviarle un mensaje de alerta alusuario para que pueda corregir lo que sea necesario.

Pasos realizar validacionesPara comenzar a poner validaciones en nuestros formularios debemoshacer un paso previo; en el Explorador de FrontPage elegir la opcinConfiguracin del Web del men Herramientas; en el cuadro de dilogo queaparece, entrar en la pestaa Avanzada, y en el men desplegable deSecuencias de Comandos de Validacin, elegir la opcin JavaScript y luegopresionar el botn Aceptar.

Luego de haber completado este paso previo, debemos abrir la pgina quecontiene el formulario en el Editor de FrontPage y examinar las propiedadesde los campos de formulario. Los campos donde puede asociarse unavalidacin son los de Cuadro de texto de una lnea, Cuadro de texto condesplazamiento, 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 quecorrespondan. Por ejemplo si tenemos en el formulario un Campo de textode una lnea, las opciones de validacin se presentarn de la forma:

Aqu podremos indicar si la informacin de este campo debe ser solo textoo solo nmeros, o en que rango de valores puede estar el nmero, u otrasopciones adicionales; luego que determinar la validacin a aplicar, presioneel botn aceptar, guarde el archivo y prubelo en su navegador.


40/45


Pgina 40

La validacin de formularios le agrega un toque de sofisticacin a nuestroweb, adems de aumentar la eficiencia de la atencin que le damos alusuario; recurdelo siempre al publicar formularios en Internet y en suIntranet.


41/45


Pgina 41

DISEO Y CONSTRUCCIN DE UN WEB SITE

Diseo de Colecciones

Colecciones Lineales

Tpicamente colecciones secuenciales de informacin, con principio y final,tales como libros o manuales. Este tipo de coleccin es muy confortable yfamiliar para todos, resultando en una forma eficiente y de comunicacincon nuestro pblico. La naturaleza fsica de las colecciones lineales nospermite tener una idea exacta de la cantidad de informacin disponible ynuestra ubicacin dentro de la coleccin.

Colecciones No Lineales

Como los computadores permiten acceder a la informacin de forma no

secuencial, y esto ha abierto nuevas posibilidades (aun poco explotadas) deorganizacin y presentacin de informacin; permitiendo inclusive lainteractividad con el lector y la inclusin de efectos multimedia de altacalidad.


42/45


Pgina 42

Las plantillas del Editor de FrontPage

El FrontPage ofrece una serie de plantillas que nos ayudan a crear las pginas que comunmente

aparecen en los proyectos web, como son por ejemplo: registro de visitantes, pginas deproductos, preguntas mas frecuentes, etc. Las plantillas nos ahorran una enorme cantidad detiempo de diseo y permiten darle los toques de sofisticacin que ayudan al xito de nuestras

publicaciones.Para crear una pgina web usando las plantillas debe abrir el Editor de FrontPage y escoger laopcin nuevo del men archivo; en este punto se mostrar un cuadro de dilogo donde podemos

elegir entre las diferentes plantillas disponibles.

Plantillas disponibles :

Agenda de reuniones: Crea una agenda para reuniones programadasBibliografia: Crea una pgina bibliogrfica que hace


43/45


Pgina 43

referencia a trabajos impresos o electrnicosComunicados de prensa: Crea un comunicado de prensa listo para ser

vinculado en la plantilla Directorio de

comunicados de prensaDescripcin de producto: Crea una pgina de descripcin de un producto

segn sus caracteristicas, ventajas, y

especificacionesDirectorio de comunicados de prensa: Crea un directorio que indica todos sus

comunicados de prensa, ordenados por fecha

Directorio de empleados: Crea un listado alfabtico de los empleados desu empresa, con una tabla de contenido y conhipervnculos

Directorio de oficinas: Crea una pgina con una lista de lasdirecciones de todas las oficinas de suorganizacin

Favoritos: Crea una pgina de vnculos a sus sitios webfavoritos, dividida en categorias

Formulario de comentarios: Crea una pgina a travs de la cual losusuarios pueden enviar comentarios sobre susitio web, productos u organizacin

Formulario de confirmacin: Crea una pgina de confirmacin de larecepcin de informacin a travs de unformulario

Formulario de encuesta: Crea un formulario de encuesta para recogerinformacin de los lectores y almacenarla en suservidor web

Glosario de trminos: Crea una pgina de definicin de t;rminos

relacionados, dividida alfabticamente ensecciones

Hoja tcnica de software: Crea una hoja de datos en la que se describen

las caracteristicas y ventajas de un producto desoftware

Libro de invitados: Crea una pgina en la que los visitantes de su

web pueden dejar sus comentarios en unregistro pblico de invitados

Novedades: Crea una pgina en la que se informa a losusuarios de los cambios ocurridos en su sitioweb en los dos ltimos meses, ordenados porfecha

Oportunidades de empleo: Crea un listado de posibles puestos de trabajoen su organizacin, con un formulario parapedir mas informacin

Programa de seminarios: Crea la pgina principal de una jerarquia quedescribe un seminario, utilicela con la plantillaResmen de conferencia

Pgina de bsqueda: Crea una pgina en la que los usuarios puedanbuscar palabras clave en todos los documentosde un web

Pgina de vnculos: Crea una pgina en un documento dividido jerarquicamente en secciones

Registro de productos o eventos: Crea una pgina donde los usuarios pueden

registrarse para recibir soporte tcnico o paraasistir a algn evento

Registro de usuarios: Crea una pgina en la que los usuarios puedan


44/45


Pgina 44

registrarse ellos mismos en un web protegido.Solo se puede utilizar en un web raiz.

Respuesta a las preguntas mas frecuentes: Crea una pgina de respuestas a las preguntas

mas frecuentes sobre ciuertos temasResmen de conferencias: Crea una pgina de descripcin de una

conferencia prxima; utilicela con la plantilla

programa de seminariosTabla de contenidos: Crea una pgina con vnculos a todos los

documentos de su web, mostrandola en

formato esquematizado


45/45


Estructura de Directorios

Para terminar la parte de diseo y construccin de las pginas que componen nuestro proyecto,

debemos tocar el tema de la organizacin de la informacin. De la misma forma que cuando en

nuestro computador organizamos nuestro trabajo diario en directorios, tambin debemos organizarlas pginas web que componen nuestro proyecto. A medida que el nmero de pginas y la

informacin del web se hace mas voluminosa, tenemos que contar con mejores herramientas yorganizar las cosas de forma jerarquica, para que sea posible administrar proyectos grandes.El Explorador de FronPage nos permite tener la visin jerarquica que es necesaria para lograr este

objetivo. Generalmente la estructura de directorios obedece a las divisiones ofrecidas dentro denuestro sitio web; asi, si en nuestro Home Page tenemos hipervnculos a la seccin de Servicios,Productos, Soporte y Ventas en-linea, una buena alternativa seria crear directoirios separados para

cada una de estas sub-secciones, haciendo as mas fcil para el equipo de desarrollo ubicar lainformacin cuando sea necesario.

Documents

Manual de Frontpage 97