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.
