! " # ! !

$ % " ! & ' (

' & $

)* + ,-

% ' & . /' 01 $

& 1 $

+ & 2 !3!3*33

,' 41 5 "5 & & ' & ' & 5 3& 67"% " 5 & $

6 $

0!3!5 ' & ' & 5 3& 67$

7& ' !3!3

% $

!2 33% & 6 7 & $

S quien eres 6 Sobre FrontPage 2002 XP 6 Cmo utilizar el libro y el CD-ROM 6 Aplicando lo aprendido 7 Cmo est organizado el libro 7 Sobre el autor 7 Competencias bsicas recomendadas 7 Recursos de aprendizaje 8

Ejemplos, 8 CD-Web, 8 Demostraciones en video, 8

Introduccin 9 Tipos de pginas web 9 La interfaz de FrontPage 2002 XP 11 Descripcin de los componentes 11 Las opciones de la Barra Views 12

Leccin 1 Conceptos bsicos 13 El directorio web, 14 La pgina index, 15

Pginas pre-configuradas, 16 Editando contenido, 17

Proyecto especial, 18

Leccin 2 Creando enlaces 20 La herramienta hyperlink, 21 Ventana hyperlink, 22 Tipos de enlaces, 23 Proyecto especial, 31

Ideas prcticas..., 33

!

Leccin 3 Creando tablas 34 La funcin de las tablas, 35 Modificando tablas, 37 Insertando filas y columnas, 39 Propiedades de una celda, 40

Propiedades de la pgina, 41 Proyecto especial, 44 Ideas prcticas..., 46

Leccin 4 Trabajando con grficos 47 Introduccin, 48 Insertando grficos, 49 Propiedades de los grficos, 52 Proyecto especial, 58 Ideas prcticas..., 60

Leccin 5 Editando grficos 61 Introduccin, 62 Herramientas especiales, 63 Mapas de imgenes (hot-spots), 65 Efecto especial Thumbnail, 67

Leccin 6 Los componentes 69 Introduccin, 70 Hover button, 71 Marquee, 72

Banner Ad Manager, 74 Hit counter, 77

Proyecto especial, 78

Leccin 7 Trabajando con texto 79 Introduccin, 80 Atributos del texto, 80 Atributos del prrafo, 83 Atributos de vietas y otros, 84

Atributos de bordes y otros, 84

"

Efectos dinmicos HTML, 85 Proyecto especial, 87 Ideas prcticas..., 88

Leccin 8 Creando formularios 89 Introduccin, 90 Formularios prediseados, 91 Campos de un formulario, 93 Propiedades de los campos, 99

Recogido de datos, 100 Ideas prcticas..., 105

Leccin 9 Pginas con marcos 106 Introduccin, 107 Ventajas de los marcos, 108 Desventajas de los marcos, 109 Marcos prediseados, 109 Ideas prcticas..., 114

Leccin 10 Insertando temas 115 Introduccin, 116 Temas (themes), 116 Efecto Page banner, 118 Bordes compartidos, 119

Barra de navegacin, 122

Leccin 11 Publicando el portal y ms 127 Introduccin, 128 Mi computadora personal, 128 Proveedor de Servicios de Internet (ISP), 129 La direccin del portal, 129

Servidor de pginas web, 129 Herramienta Publish, 131 Aplicaciones especiales, 133

#

$%&

Quienes muestran un inters muy especial por disear pginas web, son personas que tienen ideas para compartir. Cualquiera que sea tu idea, lo importante es que deseas representar grficamente la misma y compartirla con otras personas. Usualmente, cuando ests entusiasmado para iniciar el proceso de crear tus pginas web, tambin surgen muchas inquietudes. Muchas de stas, desaparecern a travs del estudio de este libro, y otras dependern de tu inters y empeo en practicar el programa y afinar tus destrezas.

Haz un inventario de tus ideas, organiza y resume las mismas en un papel. Este es el primer paso para visualizar tus pginas web. Aprende a valorar tus esfuerzos, no solamente cuando termines de crear una pgina, sino tambin cuando puedas apreciar todas las pginas como elementos individuales, que unidos dan forma y sentido a todo el portal. La perseverancia debe estar presente en ti, para cuando las cosas se tornen un poco difcil, sta te guiar hasta el final.

En mi opinin personal, el diseo de pginas web, como prctica profesional, tambin ha sufrido (paradjicamente) el embate tecnolgico. Los servicios gratuitos para construir pginas web en Internet proliferan. stos venden la idea de que crear pginas web es algo sencillo y fcil. Quizs, aprender a manejar las funciones si lo sea, pero crear pginas web efectivas en estilo y contenido, es algo que slo se obtiene con el estudio serio y cuidadoso...y con la ayuda del artista que todos tenemos dentro.

Te auguro una experiencia de aprendizaje distinta y positiva con este libro. Las ideas que ya tienes, junto a tu entusiasmo son las herramientas principales que necesitas. Espero que aprendas disfrutando y practicando. Te deseo xito.

$

El programa FrontPage 2002 XP presenta marcadas diferencias en relacin a sus versiones anteriores. Los cambios en el programa responden tambin al cambio en las versiones del Sistema Operativo de Windows. No obstante, el programa sigue siendo fiel a la idea de facilitar la creacin de pginas web. La interfaz es intuitiva y amigable. El sistema de ayuda es muy completo y efectivo. Los cambios (sin mencionarlos especficamente) son ms bien para mejorar la eficiencia del manejo del programa. Si esta es tu primera experiencia con FrontPage 2002 XP, te sugiero que no prestes atencin a las versiones anteriores. Concentra tus esfuerzos aprendiendo esta ltima versin, y cuando surgan nuevas versiones, ya estars preparado para aprenderlas y manejarlas.

'( )*'+,-

El libro contiene ejercicios de prctica y ejemplos. El CD-ROM provee videos que te mostrarn como realizar los ejercicios. El recurso de los videos demostrativos es un elemento efectivo para el aprendizaje, y muchos libros tutoriales carecen del mismo. Este libro, marca una gran diferencia, porque se cre pensando en las necesidades prcticas del lector que desea aprender viendo ejemplos concretos. Los videos sern de gran ayuda para tu experiencia de aprendizaje. Obviamente, debes crear una atmsfera de estudio apropiada (ajustada a tus preferencias). Quizs estudiando junto a tu taza de caf o refresco preferido, las horas pasen rpido y en menos de lo que piensas, ya estars diseando tus pginas web. Eso s, debo advertir, que las computadoras no se llevan muy bien con los lquidos ni las comidas. Este asunto, queda ante su consideracin.

.

/

No existe mejor garanta de aprendizaje que la prctica. En el proceso de aprendizaje, encontrars tropiezos que despus se convertirn en piedras para subir peldaos. Por lo tanto, al practicar lo ledo, complementars tu aprendizaje de forma bien positiva. Haz los ejercicios cuidadosamente, repasa las instrucciones, consulta con el sistema de ayuda del programa, habla con personas que estn aprendiendo el programa o con expertos. Todas estas gestiones, junto a la prctica, te aadirn conocimiento y destrezas.

'( )

En libro contiene once lecciones, las cuales incluyen ejercicios de prctica. Adems, se provee un ejercicio que se conoce como proyecto especial. Este ejercicio est distribudo a travs de diferentes lecciones. El propsito del proyecto especial es que cumplas con los requisitos especficos que el mismo requiere, y que luzca similar al ejemplo que se muestra en el CD-ROM. Cada leccin tiene unas palabras claves que te ayudarn a entender mejor. Si alguna de las palabras no te es familiar, encontrars en el CD-ROM enlaces a diccionarios en Internet para buscar el significado.

$

Hablar de uno mismo no es fcil. Los dems te ven de una forma ms objetiva. Pero debo presentarme. Soy una persona que cree en el talento de los dems. S, por experiencia, que muchas personas piensan que crear pginas web est reservado para unos pocos. Quizs hasta piensen que solamente pueden ser espectadores de lo que ocurre en el mundo tecnolgico. Yo soy de los que piensan que hay oportunidades para todos. Con un poco de ingeniosidad, podemos dejar vaca la silla del espectador y convertirnos en protagonistas de los cambios tecnolgicos. Y de quines ustedes piensan que los creadores de los programas toman las sugerencias para mejorar sus productos?..exactamente...de nosotros los usuarios!. Mis cortos, pero intensos aos de experiencia, ayudando a otros a entrar en el campo de la tecnologa, me han ayudado a comprender mejor a mis estudiantes; conocer donde se encuentran y conducirlos hasta donde quieran llegar.

Poseo un Bachillerato en Artes en Telecomunicaciones de la Universidad del Sagrado Corazn, una Maestra en Artes en Computacin Educativa de la Universidad Interamericana de Puerto Rico, y una Certificacin Profesional en Programacin Multimedios del NRI Schools (Mc Graw Hill). He dictado diferentes cursos y adiestramientos en varias Instituciones de Educacin Superior y agencias del gobierno. Finalmente, me considero una persona que desea compartir con otros sus conocimientos y ayudar a quienes ven en la tecnologa un pase al futuro. Si deseas compartir algn comentario, puedes escribirme a: orengo@caribe.net o visitar la pgina web http://www.interactivemediapr.com

'( (

Para obtener un mejor provecho del libro, se espera que el usuario tenga los siguientes conocimientos bsicos: manejo de Windows (98, Me, XP), crear carpetas, guardar archivos, arrastrar archivos entre carpetas, conectarse y navegar el Internet, transferir grficos de Internet a su computadora y el uso del Copy & Paste.

0

El libro tiene como propsito ensearle a disear pginas web de manera fcil y amena. A travs de una serie de ejercicios, usted adquirir las destrezas necesarias para manejar el programa FrontPage 2002 XP. Adems, el libro contiene los siguientes recursos para asistirlo en el proceso de aprendizaje:

3 # 8 " 1

% 9)*$

- !! %

" (! ( $ -

(! 1 ! (

$

- : % 9)*'

0

! ; $ -

< 8 0 # $

4 ( ' !& 1

1 = $1 > $ - ! 1 !

# 8 ( $

Nota: Verif ique que su computador tenga instalado el navegador grf ico Internet Explorer, ya que ser necesario para complementar el aprendizaje de FrontPage 2002 XP. Este programa puede ser adquir ido gratis en la pgina web de la compaa Microsoft.

1

Cuando diseamos pginas de Internet, estamos creando un documento en formato html. HTML son las siglas de Hyper Text Markup Language. Este es el lenguaje de programacin de las pginas de Internet. La ventaja del programa FrontPage, , es que no requiere experiencia en programacin. FrontPage se conoce como un editor grfico de pginas web, porque, mediante iconos y funciones accesibles en la barra de men, facilita la creacin de documentos auto-programados en HTML.

Y cul es la idea principal de un documento HTML? La idea principal es crear enlaces entre documentos. Hoy da, debido a los avances en programacin, se programan enlaces hacia distintos tipos de archivos tales como: fotos, videos, animaciones, etc. Todos los documentos (o pginas web) enlazados mediante vnculos (hyperlinks) comparten una pgina principal. En FrontPage , esta pgina se conoce como index.html, y es la pgina principal. Observe el ejemplo.

Existen diferentes tipos de pginas web. Las mismas se clasifican segn su contenido. Las ms destacadas son las pginas de servicios mltiples, educativas, periodsticas y comerciales. Observe los ejemplos en la prxima pgina.

9999999999

0 - $

?+ 4

999999999

99999999999

@ ,0

-A B

99999999999

99999999999

@ ,0

-A

99999999999

Servicios Mltiples

Ofrecen servicios de bsqueda de informacin, informacin sobre el cl ima en dist intos pases, fotos, videos, not ic ias, funciones para hacer traducciones, etc.

Educativas

Ofrecen lecciones, act ividades de aprendizaje, juegos educat ivos, evaluaciones de sof tware y juegos, l ibros, videos, lecturas de inters y guas para maestros, entre otros.

Comerciales

Venta de equipos electrnicos, l ibros, ropa, etc. Las transacciones se real izan principalmente en l nea. Otras pginas de este t ipo, slo promocionan sus productos o servic io, s in real izar ventas.

Informativas

Se especializan en ofrecer not icias de todo t ipo; encuestas, anlis is de temas de inters social, econmico y polt ico, etc.

- ($ & C C 5 5 5 $ 1 $ !

- ($ & C C 5 5 5 $ 1 ' & $ !

- ($ & C C 5 5 5 $ ' $ !

- ($ & C C 5 5 5 $ 5 ' 2 ! $ !

La interfaz de FrontPage 2002 es similar a la de otros programas de Office 2000 como Word, Excel, PowerPoint y Access. Observe la pantalla principal de FrontPage 2002 y conozca los componentes bsicos del programa.

!"

Herramienta Funcin A D

1 3

( $

! & 1

! & 1 & ! $

1 $

A

1 3 !

!E < $

7 F !

+

1 3 !

$

+ D

! 1 !

! " ?+ 4 ' 1 5 $

0 !

! < ! :

$

? 1 $

A D

! & 1 & !

A

7

+

!

+

+ D

0 !

Las opciones de la barra de vistas (Views) se activan al hacer un clic sobre ellas, pero tambin pueden ser activadas desde la barra de men (Menu Bar) oprimiendo View y escogiendo una de las opciones. Observe las funciones de las distintas herramientas de la barra de vistas.

!#$% &

En adicin, a las barras Standard y Formatting, existen otras barras de herramientas las cuales se accesan desde la barra de men escogiendo View > Toolbars. Se recomienda que las barras Standard y Formatting permanezcan activas mientras se utiliza el programa. As, el diseador tendr acceso inmediato a las herramientas de uso ms frecuente. Explore como accesar las diferentes barras de herramientas de FrontPage. Es muy importante, que se familiarize con todas las barras de herramientas y sus distintas funciones. As, podr sacar un mximo provecho del programa.

Herramienta Funcin

!

& 1 & ! $

!# & 1 '

$

% 3!

& 1 ' 1 : = & ' 2 >$

1 8

$

8

# 1 : = & ' 2 >$

0

# $

23

- 5

4 <

93

-

'

1 8

4

5

67

89:

;

!

La creacin de una carpeta o directorio, es un paso indispensable antes de comenzar a disear las pginas web. Esta carpeta incluir todos los archivos de las pginas creadas. Los archivos referidos son los html (las pginas web), las fotos, las ilustraciones, carpetas de funciones especiales, y los archivos de sonido, si aplican. Este directorio se conoce en FrontPage como el directorio web.

En trminos funcionales, el guardar los archivos en el directorio web, permite el uso de funciones especiales del programa. El siguiente ejercicio consiste en la creacin de un directorio web.

"

8 $

Properties > Cell. Las propiedades que pueden ser modificadas son : Layout, Borders y Background (Figura 3.8).

!

Figura 3.7 Ejemplo de una celda.

Figura 3.8 Ventana Cell Properties.

Figura 3.6 Ejemplo de columnas modificadas.

!

A*

Horizontal alignment Se utiliza para determinar el alineamiento horizontal del contenido de la celda.

Vertical alignment Se utiliza para determinar el alineamiento vertical del contenido de la celda.

B

Color Permite modificar el color del borde de la celda.

B9

Color Permite modificar el color del fondo de la celda. Adems, provee la opcin Use background picture para insertar una foto en el fondo de la celda.

En ocasiones, ser necesario modificar ciertas propiedades que corresponden a la pgina y no a la tabla creada. Exploremos las opciones modificables en una pgina web.

Las pginas web, al igual que las tablas, tienen sus propiedades. Un ejemplo de una propiedad de la pgina es la barra de ttulo o el fondo (background). Para accesar la ventana de propiedades de una pgina, seleccione en la barra de men: File > Properties. Observe la ventana Page Properties (Figura 3.9).

!

Nota: La ventana de propiedades de la pgina puede ser activada al oprimir el botn derecho del mouse sobre la pgina y escoger Page Properties.

!

En la ventana Page Properties consideremos las opciones: General y Background.

C

En el encasillado Title (Figura 3.9) se indica el nombre de la pgina. Este es el nombre que aparecer en la barra de ttulo de la pgina web. Adems, este nombre ayuda al visitante a identificar la pgina al marcarla como favorita en el navegador de pginas web.

La opcin Background sound (Figura 3.9) es para insertar un sonido a la pgina. El sonido se escuchar al descargar la pgina y se puede configurar para que suene durante un periodo especfico de tiempo. Los formatos de archivos de sonidos aceptados por FrontPage son: wave, midi, real, aiff y au.

Figura 3.9 Ventana Page Properties (Opcin General).

Nota: Obtenga una gran variedad de archivos de imgenes y sonidos en la galera oficial de recursos de Office. Visite: http://dgl.microsoft.com

!

B9

La opcin Background picture (Figura 3.10) facilita insertar una imagen como fondo de la pgina. Debe oprimir el botn Browse para localizar el archivo grfico (foto, ilustracin, etc.). Si selecciona la opcin Watermark la imagen del fondo ser esttica. Esto significa que, el fondo de la pgina web ser una imagen fija aunque el texto y los grficos se deslicen a travs de la misma.

Enable hyperlink rollover effect Active esta opcin para crear un efecto visual sobre los enlaces. Visite la opcin Rollover style para ver los diferentes tipos de efectos.

Colors La opcin Background es para aplicarle un color slido a la pgina y la opcin Text hace lo propio por el texto.

Figura 3.10 Ventana Page Properties (Opcin Background).

!!

Get background information from another page Active esta funcin para utilizar el fondo de otra pgina en la pgina actual. Por ejemplo, si usted utiliza un fondo para la pgina principal, y desea el mismo fondo para una nueva pgina, active esta opcin.

*!

En el siguiente ejercicio incluiremos en el proyecto las funciones practicadas en esta leccin.

( =

!#

@

4

Planifique la creacin de una tabla, con sus respectivas filas y celdas. Mantenga el diseo de la tabla simple y consistente, a travs de todo el portal.

1

2 En una hoja de papel, simule una tabla y ubique: el ttulo, los sub-ttulos, el men de opciones, los grficos y el texto, entre otros elementos.

3 Utilice diferentes tonalidades de un mismo color para distinguir reas de la tabla. Si prefiere, puede utilizar diferentes colores combinados adecuadamente.

4 Localice en Internet pginas en las cuales pueda observar el uso creativo de tablas. Este ejercicio le ayudar mucho a aprender sobre las diferentes estructuras de tablas.

5 Practique el uso de la barra Tables. Las herramientas de esta barra son las que le ayudarn a disear o a modificar las tablas.

!.

23

0 8

0 3

3

'

1 8

>

;

( ;

5

!0

Los grficos son elementos importantes en las pginas de Internet. Estos pueden ayudar al cibernauta a entender mejor el mensaje que se desea transmitir. Adems, junto al texto de la pgina, los grficos tienen el potencial de atraer la atencin, reforzar la informacin y crear un contraste visual. Por otro lado, el uso excesivo de grficos podra afectar la comunicacin efectiva de nuestro mensaje.

Los dos tipos de grficos ms utilizados en el Web (y los ms funcionales en los navegadores grficos) son GIF (Graphic Interchange Format) y JPEG (Joint Photographic Experts Group). Los grficos GIF son los preferidos para crear animaciones. Este formato permite combinar mltiples imgenes en un slo archivo para crear el efecto de animacin. Los grficos en formato GIF no tienen ms de 256 colores (8-bit color). Observe la Figura 4.1.

Los grficos en formato JPEG pueden mostrar millones de colores (24-bit color). Este formato es el preferido para resaltar detalles y colores ntidos. Adems, el formato JPEG tiene un radio amplio de compresin, lo que significa una descarga rpida de las imgenes en las pginas web. Observe la Figura 4.2.

Figura 4.1 Los grficos GIF son los preferidos

para crear animaciones. stos no tienen ms de 256 colores.

Figura 4.2 Los grficos JPEG son los preferidos para resaltar detalles y colores ntidos. Pueden mostrar millones de colores.

!1

Las fuentes de acceso a los grficos pueden ser variadas. Por ejemplo, el Internet ofrece muchos grficos (algunos gratis, otros no), discos compactos (CDs) de galera de imgenes, y a travs de un digitalizador de imgenes (scanner) podemos crear ms grficos. Por otro lado, FrontPage tiene su propia galera de imgenes (clip arts) la cual comparte con los programas de Office.

Al insertar imgenes de la galera de FrontPage, la pgina web crear un vnculo a esa imagen en su ubicacin actual. Por lo tanto, al guardar la pgina, el archivo de la imagen ser aadido como un elemento adicional en la columna Folder List. El programa activar la ventana Save Embedded Files (Figura 4.3). Esta ventana le indicar la necesidad de guardar la imagen en el directorio web correspondiente.

Si la imagen a ser utilizada es de una fuente externa, como un CD-ROM, entonces la misma, debe ser copiada en el directorio web. As, evitamos que al publicar las pginas web, las imgenes no aparezcan y sean sustituidas por un recuadro vaco. El archivo de la imagen siempre debe estar contenido en el directorio web.

Figura 4.3 Ventana Save Embedded Files.

"

!$

!

6 !

' 1 3! # !!$

. " 2" " 3

Figura 5.5 Herramientas Hot-spots.

##

# Web Component > Dynamic Effects > Banner Ad Manager > Finish. Observe la Figura 6.4.

'$# 5. &

Figura 6.4 Ventana Banner Ad Manager Properties.

."

#

.#

.' $

El Hit Counter se caracteriza por incluir en la pgina web un recuadro que indica las veces que su pgina ha sido visitada. Cabe sealar que este componente requiere el uso de las extensiones de FrontPage.

Para crear un Hit Counter seleccione: Insert > Web Component > Hit Counter > Finish > Ok. Observe la Figura 6.7.

Un hit counter, o contador de visitas, es una herramienta muy til, para quienes desean medir las visitas recibidas en su portal. Durante el transcurso del tiempo, luego de haber publicado su portal, observar, en el contador, el flujo de personas que visitan su portal. Estos datos los podr comparar, por ejemplo, mensualmente, y as medir el alcanze de su portal.

1

Figura 6.7 Ventana Hit Counter Properties.

Nota: En Internet, encontrar portales que ofrecen distintos modelos de contadores de visitas. Visite el portal de sparklit; http://www.sparklit.com

.0

*!

En el siguiente ejercicio incluiremos en el proyecto algunas de las funciones practicadas en esta leccin.

#

< '

.1

23

0 8

<

3

1 '

'

-3 !?+ 4

1 8

78:

;

;

6(

0

La palabra escrita constituye uno de los aspectos ms visibles e importantes de una pgina web. El fundamento de Internet es precisamente el flujo de informacin basada, principalmente, en texto. Aunque los medios grficos y sonoros son importantes, estos slo deben complementar la palabra escrita.

Es importante practicar los aspectos de la buena redaccin tales como: claridad, consistencia y precisin, entre otros. Quizs, una buena recomendacin sera, considerar el que una persona diestra en redaccin y estilo nos ayude. El Internet se caracteriza por mucha informacin, y a veces, encontraremos portales donde la informacin es inexacta, de pobre calidad y sin credibilidad. Por tal razn, debemos esforzarnos por hacer la diferencia.

FrontPage dispone de varias herramientas para manejar el texto. De hecho, muchas de estas herramientas son idnticas a las del programa Word de Office.

El aadir nfasis a travs de los atributos del texto de la pgina web, es una forma de mantener al visitante interesado en la lectura. Por ejemplo, el texto en itlico capta la atencin porque su forma contrasta con el texto convencional. Por otro lado, el estilo negrilla (Bold) da nfasis porque contrasta con el espesor del texto convencional. Otros aspectos a considerar son los siguientes:

El texto a color (excepto el color negro) no resulta apropiado en las pginas web porque puede confundirse con un vnculo.

El texto en MAYSCULA es muy usado, pero es uno de los mtodos menos efectivos para lograr nfasis tipogrfico.

5!(

0

Dejar espacios entre ttulos y prrafos facilita la lectura.

Las vietas (bullets) ayudan a resaltar informacin importante.

La barra de formato (Formatting Toolbar) contiene las opciones para determinar los atributos de la tipografa. Por ejemplo, el color del texto, el tamao y los estilos como Bold, Italic, Underlined, son algunos de estos atributos. Sin embargo, prrafos completamente en negrilla, pierden el efecto de contraste y pueden resultar incmodos para leer.

Por otro lado, a travs de la barra de herramientas de men (Format > Font) podemos modificar otros atributos al texto. Observe la Figura 7.1.

En la opcin Character Spacing podemos modificar el espacio entre letras. Esta opcin permite determinar cun separadas o unidas estarn las mismas.

Figura 7.1 Ventana para modificar atributos al texto.

0

Explore los distintos efectos que se pueden aplicar al texto de su pgina web. El rea de Preview le permitir observar el tipo de letra seleccionado, as como cualquiera de los efectos. Cabe sealar que existen tres categoras de letras: serif , sans serif, y script.

A$;3

La letra serif se caracteriza por lneas o curvas ubicadas en los extremos. Este tipo de letra se recomienda para los prrafos porque es ms legible. Observe algunos ejemplos:

Times New Roman

Chris Courier New

A$$;3

La letra Sans serif se caracteriza por no tener lneas ni curvas en los extremos. Este tipo de letra, se recomienda para ttulos. Observe algunos ejemplos:

Arial !

5

A$3

La letra Script se caracteriza por su estilo parecido al manuscrito. Observe algunos ejemplos:

Typemaker

Artisan LightWave PaintStroke

0

Como regla general, se recomienda utilizar entre dos o tres tipos de letra en un mismo documento. Para que el diseo de la tipografa luzca consistente, utilice la misma combinacin de tipografa en todas sus pginas web. As, reforzar el mensaje y la apariencia general del portal. Las letras Times New Roman y Arial son las preferidas para pginas web.

Un aspecto tcnico importante que debe conocer es el siguiente: si la computadora del visitante no tiene los archivos del tipo de texto utilizado en su pgina, el navegador sustituir esta tipografa. Por ejemplo, si usted utiliz la letra Artisan para el ttulo de pgina, y la misma no est instalada en la computadora del usuario, ser sustituda por otro tipo de letra segn la configuracin del sistema.

Se recomienda que utilice un programa editor grfico como Photoshop o Paint Shop Pro para crear ttulos atractivos. La ventaja principal, adems de las funciones grficas inherentes, es que evitar el reemplazo de la tipografa. Los archivos grficos, no dependen de los archivos tipogrficos de la computadora.

Una vez contamos con texto en la pgina web, podemos modificar ciertos atributos que aplican a los prrafos. Para accesar las opciones seleccione en la barra de men: Format > Paragraph. Las opciones para aplicar a prrafos consisten en alignment, indentation y spacing. Explore cada una de estas opciones y observe el efecto que aplican en los prrafos.

5!

Nota: El tipo de letra es parte importante del mensaje. Utilice el tipo de letra que mejor se ajuste al estilo del mensaje de su pgina web.

0!

Una de las formas de enfatizar informacin importante es mediante el uso de vietas (bullets). FrontPage provee tres estilos de vietas: Picture Bullets, Plain Bullets y Numbers. Observe la Figura 7.2.

Para accesar estas opciones, seleccione en la barra de men: Format > Bullets and Numbering. Las opciones para aplicar a las pginas, son vietas basadas en imgenes, las tradicionales y las numricas . Explore cada una de estas opciones y observe su efecto en las pginas.

Las pginas web pueden contener bordes para enfatizar la informacin. La funcin de Borders and Shading provee una forma prctica de crear los bordes. Observe la Figura 7.3.

5462!!3

Figura 7.2 Ventana para escoger estilos de vietas (Bullets).

5

0"

Para accesar estas opciones, seleccione en la barra de men: Format > Borders and Shading. Las opciones para aplicar a las pginas son recuadros con distintos tipos de bordes (incluyendo los colores de los bordes), y colores del fondo del recuadro (Shading). Explore cada una de estas opciones, y observe su efecto en las pginas.

Utilice los recuadros, como elementos llamativos en la parte superior o inferior de las pginas. Si desea, puede insertar un vnculo (hyperlink) al recuadro. Esto aade una funcin interactiva al mismo. Una vez seleccionado el recuadro, oprima la herramienta Hyperlink y proceda a indicar la direccin del enlace (externo o interno).

Los efectos dinmicos HTML pueden ser aplicados al texto o a las imgenes. Estos efectos aaden un elemento llamativo y ameno a las pginas web. Los distintos movimientos y efectos capturan la atencin del usuario. Observe la Figura 7.4.

Figura 7.3 Ventana para escoger estilos de bordes y fondos.

'" 1 .

0#

Una vez tenemos texto o imgenes en la pgina, podemos aplicar cualquier efecto DHTML. Como podemos observar en la imagen anterior, los efectos DHTML se encuentran en una barra. Para accesar los efectos seleccione en la barra de men: Format > Dynamic HTML Effects.

Escriba en una pgina nueva el ttulo Efectos Dinmicos HTML. Seleccione el texto como aparece en la imagen anterior. Observe la activacin de las opciones: On y Apply. Las opciones se detallan a continuacin.

On: Indica el tipo de evento que activar el efecto. Click: al oprimir una sola vez. Double click: al oprimir dos veces. Mouse over: al pasar del apuntador sobre el elemento. Page load: al cargar la pgina.

Apply: indica el efecto disponible segn el evento seleccionado.

Choose Settings: indica las configuraciones disponibles segn el efecto seleccionado.

Remove effect: elimina el efecto aplicado.

Figura 7.4 Barra DHTML Effects.

0.

Explore con los efectos disponibles y aada un toque dinmico a sus pginas web. Recuerde no utilizar tantos efectos en una misma pgina, ya que esto reducira su efectividad.

.

00

@

4

Divida la informacin en prrafos cortos (no ms de cinco oraciones). Al usuario le resulta cmodo encontrar la informacin que necesita en prrafos cortos.

1

2 Trate de no cambiar drsticamente el color de las letras. El usuario podra confundir el texto a color con un enlace. Es ms efectivo utilizar el color negro para el texto.

3 Realice pruebas en diferentes computadoras para evaluar la funcionalidad del texto utilizado. As, podr anticipar problemas y hacer los ajustes necesarios.

4 Las pginas web se dividen en dos zonas. La zona 1 es la parte de la pgina que el usuario ve inmediatamente. La zona 2 requiere mover la pgina para accesarla.

5 Presente en la zona 1 la informacin y los enlaces ms importantes. En la zona 2 presente la informacin y los enlaces en segundo orden de importancia.

01

"#23

0 8

!

%! 3!

!

)

1 8

$

;( 8;( :

( 8; :

8( :

8 :

5

1

Es importante conocer que nuestro portal est siendo visitado por las personas a quienes fue originalmente dirigido. De esto depende gran parte del xito de nuestro esfuerzo. Sin embargo, es ms importante conocer a quienes visitan nuestro portal. Cmo se llaman?, Cules son sus preferencias?, Qu piensan sobre nuestro portal (en cuanto al servicio, producto, etc.)?. Estas y otras interrogantes pueden ayudarnos a conocer mejor a los visitantes. As, estaremos bien informados para evaluar la efectividad de nuestro portal y hacer las modificaciones que sean necesarias.

Un formulario es la herramienta ideal para obtener informacin de los cibernautas. Ahora bien, se debe tener en cuenta que el formulario depende de la disposicin de las personas para utilizarlos. Nadie est obligado (y esto es positivo) a proveer informacin en un formulario. Por lo tanto, para que un formulario sea efectivo, hay que disearlo cuidadosamente, de tal forma, que invite al usario a llenarlo.

En el formulario, solicite principalmente aquella informacin pertinente, y considere no solicitar informacin sensitiva. Un buen ejercicio es ponerse usted en lugar del cibernauta. Piense en los datos que usted no estara dispuesto a compartir, como por ejemplo: nmero de seguro social, sueldo, direccin fsica, condiciones de salud, etc. En fin, no intimide al usuario al pedir datos insignificantes que realmente no son necesarios. Un formulario bien diseado invita a los cibernautas a llenarlo voluntariamente.

Los formularios requieren las extensiones del programa en el servidor web. Para probar la funcionalidad del formulario, primero debemos publicarlo al servidor web. Antes de proceder en detalle con la creacin de formularios, observe la Figura 8.1, la cual muestra un ejemplo de un formulario en una pgina web.

1

Los formularios prediseados o plantillas, conocidos como templates, consisten en una serie de formularios prediseados. Usted como diseador debe evaluarlos y realizar los cambios que estime necesario. Observemos un formulario prediseado.

Seleccione en la barra estndar: File > New > Page or Web. El panel de tareas (Task pane) abrir. Seleccione Page Templates. Observe la Figura 8.2.

Al seleccionar esta opcin observar los diferentes documentos prediseados. Observe la Figura 8.3.

Figura 8.1 Ejemplo de un formulario.

Figura 8.2 Men para accesar documentos prediseados.

" !6

1

Algunos de estos documentos son pginas de Internet regulares, mientras otros, son formularios. Seleccionemos el formulario Feedback Form.

Como podr observar, el formulario Feedback Form ya est diseado. El mismo est escrito en el idioma ingls, sin embargo, lo podemos modificar. Realice un ejercicio simple editando el contenido del formulario Feedback Form. Identifique las reas donde hay texto y modifique las instrucciones, las preguntas, etc. Las plantillas de formularios son para modificarlas con gran facilidad. Lo importante es ajustar el contenido del formulario segn sea necesario.

La parte superior del formulario tiene un comentario. Si oprime dos veces sobre el mismo, abrir la ventana para modificar su contenido. Aqu, puede indicar informacin importante para usted en relacin al formulario. Los comentarios no son visibles cuando la pgina se observa en el navegador grfico (browser). Observe la Figura 8.4.

Figura 8.3 Ventana de plantillas (Templates).

1

Si desea insertar un comentario en un formulario, seleccione en la barra de men: Insert > Comment. Escriba el comentario y oprima Ok.

Un campo (field) es el rea del formulario donde el usuario escribe un dato. Comencemos la creacin de un formulario que incluya varios de los campos de mayor utilidad. El siguiente ejercicio incluye diferentes tipos de campos.

0

1!

El botn Submit se utiliza para el envo de los datos y el botn Reset borra los datos escritos para reiniciar el proceso. Los datos que solicitemos en un formulario sern escritos por el usuario en los campos.

Los botones Submit y Reset pueden ser editados. Seleccione el botn Submit y oprima dos veces. Observe la Figura 8.6.

En el encasillado Value / label se modifica el texto que aparece en el botn. Sustituya la palabra Submit por Enviar. Oprima Ok. Realice el mismo procedimiento para el botn Reset. Sustituya la palabra Reset por Borrar. Oprima Ok. Los botones lucirn como se muestra en la Figura 8.7.

Ubique el cursor antes del botn Enviar. Oprima Enter en el teclado, dejando al menos tres espacios entre el tope del formulario y los botones.

Figura 8.5 rea de un formulario y botones Submit y Reset.

Figura 8.6 Ventana Push Button Properties.

Figura 8.7 Botones modificados.

1"

Suba el cursor hasta el inicio del formulario. Insertaremos en el formulario el campo: Textbox. Esta es una herramienta muy utilizada en los formularios para solicitar: el nombre, la direccin, el telfono y el correo electrnico de los visitantes.

Campo: Textbox (utilice la misma pgina del ejercicio anterior). < -

< 1 $

$7!E1 $

!< ) ! 8 $

En la Figura 8.8 se muestran las dos reas donde el usuario podr escribir su nombre y su correo electrnico. El largo de los campos puede ser extendido. Seleccione el campo, y mediante los recuadros, ample hasta obtener el tamao deseado.

Ahora, incluiremos en el formulario un campo para facilitar el envo de comentarios. Ubique el cursor debajo de la palabra e-mail.

Campo: Text Area (utilice la pgina del ejercicio anterior). < -; ": $

$

< 1 ( 3$

1#

En la Figura 8.9 se muestra el rea donde el usuario puede redactar sus comentarios. El ancho y el largo del campo pueden ser modificados. Seleccione el campo, y arrastrando los recuadros, ample hasta obtener el tamao deseado.

Ahora, incluiremos en el formulario un campo para que el usuario indique si desea recibir ms informacin.

Campo: Checkbox (utilice la pgina del ejercicio anterior). < 7 !E1 ) - & $

1 & $

< -

B $ B $ : $ C "$

La Figura 8.10 muestra donde el usuario puede activar este campo.

Figura 8.9 Herramienta Text Area.

Figura 8.10 Herramienta Checkbox.

1.

Ahora, incluiremos en el formulario el campo Option Button para que el usuario nos indique si desea recibir informacin en ingls o en espaol.

Campo: Option Button (utilice la pgina del ejercicio anterior).

10

Campo: Drop-Down Box (utilice la pgina del ejercicio anterior). < 6 ( ! ($

< -4 $ :@" $

< 7A E1 0 .0 % $

!< *1 3! ! $

-!

$

* ! 1

! 1 = R$B >$

* !8 ' $

En este ejercicio incluiremos un grupo de opciones: los das de la semana. Adems, incluiremos una instruccin dirigida al usuario.

"< - 8 ) - $ :@" = R$B />$

Figura 8.12 Ventana Drop-Down Properties.

Figura 8.13 Ventana Add Choice.

11

#$

< 7 8 *1 R$B Q$

< - 8 4 + ! ! !

$

!< - 8 . + 8

1 $

Figura 8.16 Ventana Form Properties.

"< * !8

*1 R$B P$

#< - 8 @ +3! & 1 < $

.< 7 8 1 $ @ "!(

8 "! ! $

- 8 @

3 ! $

0< 7., $

*1 R$B R$

Figura 8.17 Ventana Saving Results.

Figura 8.18 Ventana para configurar el recogido de datos en un mensaje de correo electrnico.

1< - 8 .@ +3!

!( 8 $

< 7 8 1 $ @ + !(!

! $

< - 8 4 $ 5 +3 3!(

8 $

< - 8 , . + 8 1

!( 8 $

< * ! & $

;( 8';( :

La pgina de confirmacin se utiliza para indicarle al usuario que el formulario fue procesado. Esta pgina, aparece luego que el usuario oprime el botn Enviar en el formulario. Usted puede disear una pgina de confirmacin segn su necesidad, o utilizar un modelo provisto por FrontPage. Esta pgina cumple un propsito importante, ya que orienta al usuario, una vez el formulario es completado.

'( 8$7 :

Los campos guardados son aquellos que usted identific mientras desarrollaba el formulario (explicado anteriormente). La opcin Saved Fields, indica los campos del formulario con sus respectivos nombres. Si alguno de los campos no aparece en este listado, debe ir a las propiedades del campo e identificarlo, y verificar que sea aadido.

#+!, )-.

'=2>( =(

!

%23

0 8

D ( !

1 ( !

1 8

&

( 8;( :

8( :

;)

( 6(

7?86*9:

"

Las pginas web usualmente se disean en una dimensin. stas son las pginas que, aunque contienen muchos vnculos, estn construdas en un slo documento. stas son pginas sin marcos (o frames como se les conoce). La Figura 9.1 muestra un ejemplo.

Por otro lado, existen pginas que son de mltiples dimensiones. stas son las que, a travs de una interfaz fraccionada, proveen acceso a diferentes pginas web. La Figura 9.2 muestra un ejemplo.

Figura 9.1 Ejemplo de una pgina web sin marcos.

Figura 9.2 Ejemplo de una pgina web con marcos. Observe la columna a la derecha. Esta rea es un marco que consiste en una serie de vnculos. El rea principal de la pgina es otro marco. Observe las barras deslizables.

#

El visitante de una pgina con marcos (frames) observar una interfaz multidimensional en una pgina. Cada una de las reas que conforman los marcos, puede ser programada con enlaces, fotos, animaciones y efectos. Esto es posible, ya que cada una de las reas son pginas web individuales (documentos html). La Figura 9.3 muestra un ejemplo.

Los marcos ayudan a presentar informacin importante en un mismo lugar de la pgina. Por ejemplo, un marco puede contener la tabla de contenido del portal. Cuando el usuario seleccione un tpico, la tabla de contenido siempre estar presente en ese marco.

Un marco es un buen lugar para presentar, por ejemplo, el logo de un negocio o anunciar un evento importante. Este marco puede ser programado con un vnculo (hyperlink) para brindar ms informacin al usuario en otra pgina. Adems, una pgina puede contener ms de un marco. Sin embargo, debemos tener en cuenta lo que algunos consideran ser desventajas de las pginas web con marcos.

Figura 9.3 Las reas sealadas son documentos html individuales. El conjunto de los documentos es tambin un documento html individual. En este ejemplo, tenemos un total de cinco (5) documentos html.

& !

& !

& !

& !

& !

%

.

Una de las desventajas principales que presentan las pginas con marcos, es que no son compatibles con todos los navegadores grficos (browsers). Adems, el uso de marcos puede dificultar la navegacin: principalmente cuando el usuario desea utilizar el botn de retroceso (back) en el navegador y se desorienta. Finalmente, el uso de ms de dos marcos tiende a cargar visualmente la pgina. Adems, hace tediosa la tarea de actualizacin, y la pgina puede tardar ms tiempo en descargar.

FrontPage contiene varios modelos prediseados de pginas con marcos. Desarrollemos un ejercicio con uno de estos modelos de pginas con marcos.

1 $

< -1

= S $K>$

. 6

Figura 9.4 Ventana de plantillas de pginas con marcos (frames).

4!"

0

!< 7 ) $

* !*2 $

*1 S $T $

"< ! != 5 >

4 1 +

#$

- !

!$

0 ' !$

1$

Figura 9.8 Ejemplo de la pgina diseada con marcos.

Cuando oprima sobre la opcin Descripcin en el men, la pgina de la derecha cambiar a la pgina que contiene solamente el ttulo Descripcin. El men siempre estar presente en el marco de la izquierda. Repita este procedimiento para cada uno de los temas presentados en el men. Observe la Figura 9.9.

Evale durante el proceso de planificacin de su portal, si es necesario fragmentar la pgina con marcos. Si por el contrario, resulta ms prctico crear su portal en una sola dimensin (sin marcos); probablemente est simplificando su trabajo como diseador. Adems, al usuario le resultar ms cmodo navegar su portal.

#+!, )-.

'=2>( =(

Figura 9.9 Ejemplo de la pgina activando el enlace Descripcin.

@

4

Se recomienda no utilizar ms de dos marcos (frames) en las pginas web. Si considera necesario incluir tres marcos o ms, provea pocos elementos en cada uno.

1

2 Provea informacin relacionada en cada uno de los marcos. Por ejemplo, si el marco A hace referencia a los pueblos de Puerto Rico, el marco B presenta datos de cada pueblo.

3 Mantenga consistencia en el uso de los colores de los marcos. Si utiliza un color azul ail en el marco A, aplique un color azul suave al marco B (o utilice el mismo color).

4 Evite presentar enlaces en cada uno de los marcos. Es ms apropiado utilizar un marco como tabla de contenido, y otro marco para abundar sobre los temas individualmente.

5 Provea al usuario las opciones de ver su portal con marcos o sin marcos. La pgina principal ser el lugar donde el usuario escoger la opcin deseada.

'

23

0 8

+ !=+ & !>

-3HI

A !

A 1 8

1 8

(

( 86( :

(

7

5

!

Los temas se conocen en FrontPage como Themes. Tambin, nos podemos referir a los temas como plantillas grficas. Estas plantillas consisten en una serie de combinaciones de imgenes y colores. Cada tema incluye su propio estilo de botones, bullets y banners entre otros. Los temas se pueden aplicar solamente a una pgina o a todas las pginas contenidas en un portal.

Los temas estn ligados funcionalmente a las herramientas Navigation y Hyperlinks de la Barra Views. Por ejemplo, si utiliza un tema para desarrollar su portal web, podr crear una barra de navegacin mediante la herramienta Navigation. En esta leccin, disearemos un portal con un tema. Simularemos un portal que ofrece informacin sobre algunos municipios de Puerto Rico.

Realice un directorio web llamado: Ejercicio de temas.

< - !E - $

*1 B $B $

Figura 10.1 Ventana de temas Themes.

" 2/" 3

"