Вы находитесь на странице: 1из 10

Unidad 2: Cómo crear un sitio Web a través de un editor de código

Tema 1. Introducción a FrontPage para crear un sitio Web

En el módulo anterior se vieron las principales consideraciones que se deben tomar en


cuenta para diseñar y desarrollar un sitio Web y se mencionó que existen 3
herramientas básicas que permiten construir páginas Web:

         HTML, fue el primer lenguaje y el mas usado que permite desarrollar sitios
Web.

         Editores de código, que son paquetes de software que facilitan el desarrollo a


través de la edición y generación de código HTML.

         Procesadores de texto con características especiales que convierten el texto a


código HTML.

Como se mencionó, es muy común utilizar una combinación de herramientas en el


desarrollo de sitios, pero en esta ocasión utilizaremos FrontPage debido a la sencillez
que ofrece.

¿Qué es FrontPage?

FrontPage es un paquete desarrollado por Microsoft y cuyo objetivo es facilitar el


desarrollo de páginas y sitios Web. Una ventaja que ofrece es que utiliza un editor
WYSIWYG (What You See Is What You Get) lo que permite que se produzcan páginas
Web sin necesidad de tener conocimientos previos  del código HTML, por el contrario 
el paquete lo genera de manera automática.

FrontPage ofrece herramientas que permiten administrar los sitios Web a través de
carpetas que pueden ser organizadas para almacenar los elementos utilizados en los
sitios, además permite importar y exportar archivos.

La publicación de los sitios Web creados en FrontPage es muy sencilla, el único


requisito es que la computadora cuente con el software de servidor Web y las
extensiones de FrontPage (FrontPage Server Extensions), las cuales habilitan las
herramientas de administración de FrontPage.

Para unificar los conceptos, cuando se mencione el término sitio WEB  nos referimos


al conjunto de carpetas que contienen páginas Web y todos los elementos que se
incluyen en ellas como: imágenes, gráficas, videos y bases de de datos, en
cambio PÁGINA WEB es un documento independiente que forma parte del sitio.

El software de servidor de Web funciona como si fuera un archivero electrónico el cual


permite los sitios Web puedan ser accedidos desde Internet. Cada carpeta en la
jerarquía de carpetas de un servidor Web se deriva de la carpeta principal o raíz.
Cuando un navegador manda la dirección de la carpeta o el URL,  el servidor carga el
archivo que se encuentra en dicha dirección. Comúnmente el nombre del archivo de
dicha dirección es index.htm o default.htm, dependiendo del servidor de Web que se
esté utilizando, generalmente se usa html en los ambientes de Unix y Microsoft
y htm en el ambiente de las computadoras personales.
¿Cómo empezar a trabajar con FrontPage?

1.      Selecciona el botón  Start o Inicio de la barra de tareas

2.      Selecciona la opción All Programs o Todos los programas del menú Inicio

3.      Selecciona la opción Microsoft Office, el cual muestra los paquetes de


software que forman parte de Office (FrontPage forma parte de Office)

4.      Finalmente escoge la opción de Microsoft OfficeFrontPage 2003 (este


proceso puede variar un poco de computadora a computadora). El proceso se
muestra en la figura 1. Al terminar aparece la pantalla inicial de FrontPage,
como se ve en la figura 2.

Como se aprecia, aparece una pantalla con una hoja en blanco para empezar a escribir
los elementos que formarán parte de una página del sitio Web que se va a desarrollar.

Como se aprecia en la figura, en la parte inferior aparecen 4 vistas, las cuales nos
permiten visualizar de diferente manera el contenido de la página. Por omisión aparece
seleccionada la vista Design.  A continuación se explican cada una de las vistas de las
páginas:

         Design: en la vista de diseño, es donde podemos introducir el contenido de


una página de la misma manera en que trabajamos con un procesador de texto.

         Split: muestra una página dividida en dos partes, en la cual, la mitad de la


página permite escribir el contenido de la misma (vista Design) y la segunda
mitad, nos muestra el código en html que se está generando.

         Code: nos muestra el código en html de la página web que se está


desarrollando. En esta vista se pueden introducir o editar las instrucciones en
html.

         Preview: nos muestra una vista final de cómo se visualizará la página en el


momento en que esta sea publicada en un servidor.

En este caso, la página no forma parte de un sitio (es una página independiente), por
lo que antes de empezar a desarrollar el contenido de la página debemos definir el sitio
Web que desarrollaremos.

Cómo crear un sitio Web.


Para empezar a desarrollar el sitio Web, es necesario haber realizado con anterioridad
la planeación y el diseño del mismo de tal forma que se genere como resultado un
plano de la estructura jerárquica que tendrá el sitio y  y de esta forma poder reflejarlo
en FrontPage. Tomaremos como ejemplo el ejercicio usado en el módulo anterior, en el
cual después de haber analizado e investigado todas las variantes, se llegó a la
estructura jerárquica siguiente:
En nuestro ejemplo vamos a desarrollar un sitio a la medida. Después de haber
entrado a FrontPage realiza lo siguiente:
1. Selecciona del menú  File la opción New,  en la parte derecha de la pantalla
aparece elPanel de tareas o Task pane, en donde se muestran las diferentes
opciones que existen para crear una página nueva o un nuevo sitio Web.
Selecciona la opción One page web site…
2. Aparece una ventana que nos muestra los diferentes tipos de sitios que se
pueden crear.
 
Diferentes tipo de sitios que se pueden crear
 
Plantilla Descripción
One Page Web Crea un sitio web que contiene una página en
blanco llamada index.htm, la cual es la página
inicial del sitio.
Corporate Presence Wizard Crea un sitio web que contiene páginas ejemplo
que se pueden personalizar para una compañía.
Customer Support Web Crea un sitio web que contiene páginas ejemplo
para compañías que proporcionan soporte a los
clientes, particularmente para compañías de
software.
Database Interface Wizard Crea un sitio web que se puede conectar a una
base de datos de la cual se pueden agregar, ver,
actualizar y borrar registros.
Discussion Web Wizard Crea un sitio web que contiene un grupo de
discusión con la secuencia de la misma, una tabla
de contenidos y capacidades de búsqueda de
texto.
Empty Web Crea la estructura de carpetas de un sitio web sin
páginas.
Import Web Wizard Crea un sitio web que contiene páginas que se
importan de otros lugares, tales como otro sitio
web o del disco duro.
Personal Web Crea un sitio web que contiene páginas ejemplo
que una persona puede personalizar para
promover sus intereses y sitios web favoritos.
Project web Crea un sitio web que contiene páginas ejemplo
para una lista de miembros, programación,
estatus y un archivo de discusión relacionados a
un proyecto específico.
SharePoint-based Team Web Crea un sitio web con herramientas que pueden
Site ser utilizadas por un grupo de personas que
trabajan juntas en un proyecto. Incluye un
calendario, una biblioteca para compartir
documentos, una lista de tareas y una lista de
contactos.
3. En la pantalla que aparece, haz clic en el ícono que dice One Page Web para
crear un sitio Web que contendrá una página y escribe C:\Mis documentos\My
Webs\ElZapatito en el recuadro que dice Specify the location of the new
web (esta es la dirección completa dentro de tu computadora en la que deseas
guardar el sitio Web que se esta creando. ElZapatito es el nombre del sitio) y
haz clic en OK.
Esto hará que FrontPage cree un sitio Web de una página  llamado ElZapatito, el cual
tendrá una página llamada index.htm, que será la página principal del sitio web o
home page. Recuerda que esta página será la primera que se muestre en el navegador
en el momento que el sitio web sea publicado en Internet, por lo que es importante
que no la borremos o le cambiemos el nombre. El sitio Web tendrá la siguiente
apariencia.

Vistas de FrontPage.
Como se aprecia, en la parte inferior de la ventana del sitio, aparecen las diferentes
vistas que FrontPage proporciona para visualizar y administrar los archivos, carpetas e
hipervínculos que forman los sitios Web que se crean en él. Para tener acceso a ellas,
se debe oprimir el botón de cada vista. A continuación se describen brevemente cada
uno de ellos.
 Vista Folders: como ya se mencionó un sitio Web está compuesto de folderes
que agrupan los diferentes elementos que forman el sitio. En esta vista se
puede apreciar la jerarquía de carpetas que forman el sitio Web. El folder
principal es el folder del sitio Web y de ahí se derivan todos los
folders necesarios. FrontPage agrega  por definición dos folders cada vez que se
crea un sitio, el folder _private y el folder images. La  creación y eliminación de
carpetas es muy sencilla.
 
 Vista Remote Web Site: sincroniza los archivos entre este sitio web y otro sitio
web remoto.
 
 Vista Reports: en esta vista se muestra un listado de los archivos,
hipervínculos y otros elementos del sitio Web que nos permite llevar una mejor
administración del sitio Web y analizar su contenido.
 
 Vista Navigation:  esta vista muestra la estructura de navegación que tiene el
sitio Web, es decir la forma en que están integradas las páginas que forman
parte del sitio.
 
 Vista Hyperlinks: esta vista muestra un panorama general de todos los
hipervínculos que existen entre las páginas Web del sitio.
 
 Vista Tasks: en esta vista se puede llevar un control de todas las tareas que se
necesitan realizar cuando se está desarrollando un sitio Web. Esta vista permite
agregar tareas, asignarle prioridades, definir responsables y finalmente, cuando
la tarea es terminada, es posible borrarla.
 
El uso de estas vistas depende en gran medida de la manera en que se les asigne la
importancia que cada una tiene para una mejor administración de las actividades
necesarias para desarrollar el sitio Web. Posteriormente se hará referencia a ellas.
¿Cómo obtener ayuda en FrontPage?
FrontPage incluye un muy amplio sistema de ayuda que nos proporciona información
acerca de los diferentes comandos e instrucciones. Los pasos para obtener ayuda son:
1. Haz clic en el botón  de la barra de herramientas, oprime la tecla F1  o
selecciona la opción Microsoft Office FrontPage Help del menú Help.
Cualquiera de las opciones que hayas escogido, aparecerá el asistente de ayuda,

2. Escribe el tema sobre el  cual deseas obtener ayuda. El único inconveniente es


que debes escribir el tópico en inglés. Escribe Open Web y haz clic en el botón
de . Aparecerá una lista con los diferentes tópicos que existen para ese tema.

3. Selecciona el tema específico que deseas consultar y aparecerá información


detallada acerca de dicho tema. Haz clic en el botón de Open a web page y
aparecerá la información existente sobre dicho tema.
 

                                      
5. Una vez que hayas leído la información, haz clic en el botón  Close para salir del
sistema de ayuda.
FrontPage también proporciona ayuda a través del World Wide Web si estás trabajando
conectado a Internet:
1. Haz clic en el menú de Help
2. Selecciona la opción  Office on the web
3. Se establece la conexión con el sitio web de FrontPage
 
¿Cómo cerrar un sitio Web?
Una vez que el sitio Web fue creado, su manejo es tan simple como el manejo de
cualquier archivo. Cuando se termina de trabajar con el sitio, debes cerrarlo y en ese
momento FrontPage guarda inmediatamente los cambios en él sin necesidad de que el
usuario tenga que hacerlo.
1. Haz clic en el menú de File
2. Haz clic en la opción Close Site
3. Haz clic en File y después en Exit
Se cierra el sitio y se cierra FrontPage.
¿Cómo abrir un sitio Web que ya existe?
Los sitios Web se pueden abrir de diferentes maneras, pero la manera más común es:
1. Haz clic en el menú de File
2. Haz clic en la opción Open Site…
3. Busca el sitio Web que deseas abrir y selecciónalo
Si se quiere abrir un sitio Web que ya está publicado en Internet se deben seguir los
siguientes pasos:
1. Haz clic en el menú de File
2. Haz clic en la opción Open Site…
3. Escribe la dirección completa o URL en el cuadro de texto Site Name
En cualquiera de los dos casos se abre el sitio Web en pantalla listo para ser editado.
En esta sección se vio como crear un sitio Web y como obtener ayuda, en  la siguiente
sección empezaremos a trabajar con el manejo y la  edición de páginas.

 
Figura 1: Cómo iniciar FrontPage

5.      Selecciona el botón  Start o Inicio de la barra de tareas

6.      Selecciona la opción All Programs o Todos los programas del menú Inicio

7.      Selecciona la opción Microsoft Office, el cual muestra los paquetes de


software que forman parte de Office (FrontPage forma parte de Office)

8.      Finalmente escoge la opción de Microsoft OfficeFrontPage 2003 (este


proceso puede variar un poco de computadora a computadora). El proceso se
muestra en la figura 1. Al terminar aparece la pantalla inicial de FrontPage,
como se ve en la figura 2.

Figura 2: Pantalla inicial de FrontPage

Como se aprecia, aparece una pantalla con una hoja en blanco para empezar a escribir
los elementos que formarán parte de una página del sitio Web que se va a desarrollar.

Como se aprecia en la figura, en la parte inferior aparecen 4 vistas, las cuales nos
permiten visualizar de diferente manera el contenido de la página. Por omisión aparece
seleccionada la vista Design.  A continuación se explican cada una de las vistas de las
páginas:

         Design: en la vista de diseño, es donde podemos introducir el contenido de


una página de la misma manera en que trabajamos con un procesador de texto.

         Split: muestra una página dividida en dos partes, en la cual, la mitad de la


página permite escribir el contenido de la misma (vista Design) y la segunda
mitad, nos muestra el código en html que se está generando.

         Code: nos muestra el código en html de la página web que se está


desarrollando. En esta vista se pueden introducir o editar las instrucciones en
html.

         Preview: nos muestra una vista final de cómo se visualizará la página en el


momento en que esta sea publicada en un servidor.

En este caso, la página no forma parte de un sitio (es una página independiente), por
lo que antes de empezar a desarrollar el contenido de la página debemos definir el sitio
Web que desarrollaremos.
Cómo crear un sitio Web.
Para empezar a desarrollar el sitio Web, es necesario haber realizado con anterioridad
la planeación y el diseño del mismo de tal forma que se genere como resultado un
plano de la estructura jerárquica que tendrá el sitio y  y de esta forma poder reflejarlo
en FrontPage. Tomaremos como ejemplo el ejercicio usado en el módulo anterior, en el
cual después de haber analizado e investigado todas las variantes, se llegó a la
estructura jerárquica siguiente:
 

Figura 3: Estructura Jerárquica de la empresa "El Zapatito"


 
En nuestro ejemplo vamos a desarrollar un sitio a la medida. Después de haber
entrado a FrontPage realiza lo siguiente:
4. Selecciona del menú  File la opción New,  en la parte derecha de la pantalla
aparece elPanel de tareas o Task pane, en donde se muestran las diferentes
opciones que existen para crear una página nueva o un nuevo sitio Web.
Selecciona la opción One page web site…

Figura 4: Cómo crear un sitio web de una página


5. Aparece una ventana que nos muestra los diferentes tipos de sitios que se
pueden crear.
 
Diferentes tipo de sitios que se pueden crear
 
Plantilla Descripción
One Page Web Crea un sitio web que contiene una página en
blanco llamada index.htm, la cual es la página
inicial del sitio.
Corporate Presence Wizard Crea un sitio web que contiene páginas ejemplo
que se pueden personalizar para una compañía.
Customer Support Web Crea un sitio web que contiene páginas ejemplo
para compañías que proporcionan soporte a los
clientes, particularmente para compañías de
software.
Database Interface Wizard Crea un sitio web que se puede conectar a una
base de datos de la cual se pueden agregar, ver,
actualizar y borrar registros.
Discussion Web Wizard Crea un sitio web que contiene un grupo de
discusión con la secuencia de la misma, una tabla
de contenidos y capacidades de búsqueda de
texto.
Empty Web Crea la estructura de carpetas de un sitio web sin
páginas.
Import Web Wizard Crea un sitio web que contiene páginas que se
importan de otros lugares, tales como otro sitio
web o del disco duro.
Personal Web Crea un sitio web que contiene páginas ejemplo
que una persona puede personalizar para
promover sus intereses y sitios web favoritos.
Project web Crea un sitio web que contiene páginas ejemplo
para una lista de miembros, programación,
estatus y un archivo de discusión relacionados a
un proyecto específico.
SharePoint-based Team Web Crea un sitio web con herramientas que pueden
Site ser utilizadas por un grupo de personas que
trabajan juntas en un proyecto. Incluye un
calendario, una biblioteca para compartir
documentos, una lista de tareas y una lista de
contactos.
6. En la pantalla que aparece, haz clic en el ícono que dice One Page Web para
crear un sitio Web que contendrá una página y escribe C:\Mis documentos\My
Webs\ElZapatito en el recuadro que dice Specify the location of the new
web (esta es la dirección completa dentro de tu computadora en la que deseas
guardar el sitio Web que se esta creando. ElZapatito es el nombre del sitio) y
haz clic en OK.

Figura 5: Creación de un sitio web


Esto hará que FrontPage cree un sitio Web de una página  llamado ElZapatito, el cual
tendrá una página llamada index.htm, que será la página principal del sitio web o
home page. Recuerda que esta página será la primera que se muestre en el navegador
en el momento que el sitio web sea publicado en Internet, por lo que es importante
que no la borremos o le cambiemos el nombre. El sitio Web tendrá la siguiente
apariencia.

Figura 6: Sitio Web El Zapatito


 
Vistas de FrontPage.
Como se aprecia, en la parte inferior de la ventana del sitio, aparecen las diferentes
vistas que FrontPage proporciona para visualizar y administrar los archivos, carpetas e
hipervínculos que forman los sitios Web que se crean en él. Para tener acceso a ellas,
se debe oprimir el botón de cada vista. A continuación se describen brevemente cada
uno de ellos.
 Vista Folders: como ya se mencionó un sitio Web está compuesto de folderes
que agrupan los diferentes elementos que forman el sitio. En esta vista se
puede apreciar la jerarquía de carpetas que forman el sitio Web. El folder
principal es el folder del sitio Web y de ahí se derivan todos los
folders necesarios. FrontPage agrega  por definición dos folders cada vez que se
crea un sitio, el folder _private y el folder images. La  creación y eliminación de
carpetas es muy sencilla.
 
 Vista Remote Web Site: sincroniza los archivos entre este sitio web y otro sitio
web remoto.
 
 Vista Reports: en esta vista se muestra un listado de los archivos,
hipervínculos y otros elementos del sitio Web que nos permite llevar una mejor
administración del sitio Web y analizar su contenido.
 
 Vista Navigation:  esta vista muestra la estructura de navegación que tiene el
sitio Web, es decir la forma en que están integradas las páginas que forman
parte del sitio.
 
 Vista Hyperlinks: esta vista muestra un panorama general de todos los
hipervínculos que existen entre las páginas Web del sitio.
 
 Vista Tasks: en esta vista se puede llevar un control de todas las tareas que se
necesitan realizar cuando se está desarrollando un sitio Web. Esta vista permite
agregar tareas, asignarle prioridades, definir responsables y finalmente, cuando
la tarea es terminada, es posible borrarla.
 
El uso de estas vistas depende en gran medida de la manera en que se les asigne la
importancia que cada una tiene para una mejor administración de las actividades
necesarias para desarrollar el sitio Web. Posteriormente se hará referencia a ellas.
¿Cómo obtener ayuda en FrontPage?
FrontPage incluye un muy amplio sistema de ayuda que nos proporciona información
acerca de los diferentes comandos e instrucciones. Los pasos para obtener ayuda son:
2. Haz clic en el botón  de la barra de herramientas, oprime la tecla F1  o
selecciona la opción Microsoft Office FrontPage Help del menú Help.

Cualquiera de las opciones que hayas escogido, aparecerá el asistente de ayuda,

3. Escribe el tema sobre el  cual deseas obtener ayuda. El único inconveniente es


que debes escribir el tópico en inglés. Escribe Open Web y haz clic en el botón
de . Aparecerá una lista con los diferentes tópicos que existen para ese tema.

4. Selecciona el tema específico que deseas consultar y aparecerá información


detallada acerca de dicho tema. Haz clic en el botón de Open a web page y
aparecerá la información existente sobre dicho tema.
 

                                      
6. Una vez que hayas leído la información, haz clic en el botón  Close para salir del
sistema de ayuda.
FrontPage también proporciona ayuda a través del World Wide Web si estás trabajando
conectado a Internet:
4. Haz clic en el menú de Help
5. Selecciona la opción  Office on the web
6. Se establece la conexión con el sitio web de FrontPage
 
¿Cómo cerrar un sitio Web?
Una vez que el sitio Web fue creado, su manejo es tan simple como el manejo de
cualquier archivo. Cuando se termina de trabajar con el sitio, debes cerrarlo y en ese
momento FrontPage guarda inmediatamente los cambios en él sin necesidad de que el
usuario tenga que hacerlo.
4. Haz clic en el menú de File
5. Haz clic en la opción Close Site
6. Haz clic en File y después en Exit
Se cierra el sitio y se cierra FrontPage.
¿Cómo abrir un sitio Web que ya existe?
Los sitios Web se pueden abrir de diferentes maneras, pero la manera más común es:
4. Haz clic en el menú de File
5. Haz clic en la opción Open Site…
6. Busca el sitio Web que deseas abrir y selecciónalo
Si se quiere abrir un sitio Web que ya está publicado en Internet se deben seguir los
siguientes pasos:
4. Haz clic en el menú de File
5. Haz clic en la opción Open Site…
6. Escribe la dirección completa o URL en el cuadro de texto Site Name
En cualquiera de los dos casos se abre el sitio Web en pantalla listo para ser editado.
En esta sección se vio como crear un sitio Web y como obtener ayuda, en  la siguiente
sección empezaremos a trabajar con el manejo y la  edición de páginas.