Tut Creación Pags. Web UNIVERSIDAD INTERAMERICANA DE PR CENTRO DE ESTUDIOS GRADUADOS PROGRAMA GRADUADO DE ADMINISTRACIÓN COMERCIAL RECINTO DE SAN GERMÁN Tutorial para la Creación de Páginas Web con el uso de MS FrontPage / MS Word Contenido Introducción Parte I - Diseño Recopilación de Información Organización del Material Storyboard Ejemplo: Mi Página Personal Detalle de las Páginas pag-01 pag-02 pag-03 pag-04 pag-05 Parte II - Construcción con: MS FrontPage MS Word Introducción Este proyecto consiste de un trabajo de investigación, o "research paper". Como primer paso se debe seleccionar antetodo un TEMA para el proyecto. Dicho tema deberá estar relacionado a la clase y/o a computadoras o Tecnología de Información (IT), en general. Regresar a Contenido Page 1 Tut Creación Pags. Web Parte I - Diseño Recopilación de Información El siguiente paso es realizar una búsqueda bibliografica, y en teoría "agotar todos los recursos", para recopilar toda la información disponible sobre dicho tema. Esta recopilación incluye tanto las fuentes tradicionales disponibles, es decir revistas, journals, libros y todo tipo de publicación, como los medios no tradicionales, en otras palabras, material en medio electrónico ya sea en la Internet, CD-Roms, servicios de bases de datos especializadas, etc. Regresar a Contenido Organización del Material Una vez recopilada toda la información y el material necesario, se debe proceder a un proceso de organización de dicho material. Esto es importante por que, en el caso de la construcción de una Página del Web, en una parte de esta se hace necesario trabajar y preparar de forma independiente los materiales que se encuentran en diferentes medios. Lo anterior hace que sea muy fácil perder la perspectiva del proyecto y cual debe ser su producto final. Para esto se acostumbra preparar un esquema o plano de la estructura del trabajo especificando en detalle los contenidos. Regresar a Contenido Storyboard Este esquema o plano, que hace la misma función de un plano cuando se está construyendo una casa, por ejemplo, se denomina comúnmente un "storyboard" o libreto ("scrip") y es una valiosa herramienta que ayuda precisamente, a no perder la perspectiva del proyecto. Si usted ha caído en cuenta, notará que hasta el momento no se ha hablado nada de trabajar en la computadora, ni de qué programa usar o cualquier otro aspecto técnico. En realidad no tiene ningún sentido sentarnos ante una pantalla a pensar y organizar el trabajo ya que estamos perdiendo tiempo y energías. Regresar a Contenido Page 2 Tut Creación Pags. Web Ejemplo: Mi Página Personal Supongamos por ejemplo que vamos a diseñar y crear una Página Personal que queremos colocar en la red. Asumamos que ya recopilamos todo ese material sobre nosotros mismos y que en buena parte "está en nuestras cabezas", por decirlo así. Digamos que la página o portal personal va a tener una primera pantalla o "display" por donde siempre se entrará. Allí vamos a colocar un saludo y enlaces o "links"a otros segmentos que podríamos agrupar en: Datos Personales, Experiencia, Aficiones y Mi Foto. Al oprimir esos enlaces en la pantalla de entrada nos lleva a las otras pantallas. Cada una de estas va a tener al final un enlace que nos permita regresar a la pantalla inicial. El diagrama a continuación nos muestra el "storyboard"que empezaríamos a construir: Figura 1. Storyboard de "Mi Página Personal" Regresar a Contenido Detalle de las Páginas En las páginas se incluiría entonces todos los detalles del caso: Las pantallas o páginas cada una tiene un nombre o etiqueta ("label") la cual corresponde a su nombre físico en la computadora. Este nombre es el usado para crear los enlaces que permitan nevagar por el documento. (Observe que en el párrafo anterior usamos la palabra "página" no para hacer referencia al portal en total si no a una parte, sección o capítulo de este. Se usa mucho también en ese Page 3 Tut Creación Pags. Web sentido y fisicamente corresponde a un archivo en la computadora. Con esto se da a entender que el portal va a tener tantos archivos como páginas, partes o segmentos, además de aquellos de las gráficas y otros.) Identificamos entonces las páginas así: pag-01: Página Principal pag-02: Datos Personales pag-03: Experiencia pag-04: Aficiones pag-05: Foto Las figuras a continuación muestran los detalles de las páginas. Pag-02, 03 y 04, por ejemplo, contienen una tabla con los datos correspondientes. Pag-05, presenta una foto personal. Todas contienen al final un enlace para regresar a la página principal. Regresar a Contenido pag-01 Figura 2. pag-01 Página Principal Regresar a Contenido pag-02 Page 4 Tut Creación Pags. Web Figura 3. pag-02 / Datos Personales Regresar a Contenido pag-03 Page 5 Tut Creación Pags. Web Figura 4. pag-03 / Experiencia Regresar a Contenido pag-04 Figura 5. pag-04 / Aficiones Regresar a Contenido pag-05 Page 6 Tut Creación Pags. Web Figura 6. pag-05 / Foto Regresar a Contenido Impresión (formato "pdf" Acrobat Reader) Parte II - Construcción con: • MS FrontPage • MS Word Page 7