DISEÑO DE UN PORTAL WEB DINÁMICO PARA EL LICEO BOLIVARIANO VICENTE CAMPO ELÍAS DE TUCANÍ, MUNICIPIO CARACCIOLO PARRA OLMEDO ESTADO MÉRIDA

Transcripción

1 DISEÑO DE UN PORTAL WEB DINÁMICO PARA EL LICEO BOLIVARIANO VICENTE CAMPO ELÍAS DE TUCANÍ, MUNICIPIO CARACCIOLO PARRA OLMEDO ESTADO MÉRIDA Autores: Brs.: Freitez Yenys Serrano Areliz Tucaní, Octubre 2008

2 9 APROBACIÓN DEL TRABAJO ESPECIAL DE GRADO Quiénes suscriben, el Profesor Ing. Narciso Roa, Titular de la Cedula de Identidad NºV , y la Profesora Ing. Yadira Márquez, Titular de la Cedula de Identidad NºV , en condición de tutores Académicos, designados por el Área de Informática, adscrito al Departamento de Tecnología, del Instituto Universitario Tecnológico de Ejido Extensión Tucaní (IUTE), y el profesor Ing. Enrique Mora. Titular de la Cedula de identidad Nº V , en condición de Tutor Industrial hacen constar, que el Trabajo Especial de Grado presentado por las Bachilleres: Serrano Jaimes Areliz Margarita y Freitez Olivar Yenys Jakeline. Titulares de la Cedula de Identidad NºV , como uno de los requisitos para optar al Título de Técnico Superior Universitario en Informática, reúne las condiciones y méritos suficientes para ser APROBADO, con una calificación de puntos. Tutor Académico Ing. Narciso Roa C.I.NºV Tutor Académico Ing. Yadira Márquez C.I.NºV Tutor Industrial Ing. Enrique Mora C.I.NºV

3 10 DISEÑO DE UN PORTAL WEB DINÁMICO PARA EL LICEO BOLIVARIANO VICENTE CAMPO ELÍAS DE TUCANÍ, MUNICIPIO CARACCIOLO PARRA OLMEDO ESTADO MÉRIDA Autores: Brs.: Freitez Yenys Serrano Areliz Tucaní, Octubre 2008

4 11 REPÚBLICA BOLIVARIANA DE VENEZUELA MINISTERIO DEL PODER POPULAR PARA LA EDUCACIÓN SUPERIOR INSTITUTO UNIVERSITARIO TECNOLÓGICO DE EJIDO EXTENSIÓN TUCANÍ DEPARTAMENTO DE TECNOLOGIA ÁREA DE INFORMÁTICA DISEÑO DE UN PORTAL WEB DINÁMICO PARA EL LICEO BOLIVARIANO VICENTE CAMPO ELÍAS DE TUCANÍ, MUNICIPIO CARACCIOLO PARRA OLMEDO ESTADO MÉRIDA Autores: Brs.: Freitez Yenys Serrano Areliz Tutor Académico: Ing. Enrique Mora Tucaní, Octubre 2008

5 12 DEDICATORIA A Dios Todopoderoso por guiarme en el camino del saber y por permitirme enfrentar cada obstáculo que se me presentaba a lo largo de mi carrera. A mis padres: Claudio Serrano y María de Serrano por el apoyo incondicional y la confianza depositada en mí, este logro es también de ustedes. Los Amo. A todos mis hermanos, en especial a mi hermanita Rosalinda Serrano, Por confiar en mí y creer que todo se logra cuando se hace el sacrificio del Aprendizaje. Areliz Serrano. A: Nuestro Padre Dios que me permitió alcanzar esta meta. Mi Madre Graciela Olivar por brindarme siempre el amor y el apoyo en.. todo momento. Mi Padre Arbenis Freitez por ser mi guía y ejemplo a seguir, hermanas.. Yusmar, Yusney y hermano Gabriel que de alguna manera estuvieron... allí ayudándome. Yenys Freitez.

6 13 AGRADECIMIENTOS Al: Instituto Universitario Tecnológico de Ejido Extensión Tucaní Liceo Bolivariano Vicente Campo Elías A: Ing. Yadira Márquez por su apoyo incondicional más que una....profesora una Amiga. Ing. Enrique Mora Ing. Narciso Roa T.S.U Noralida Márquez Ing. Miguel Benítez y a Todos nuestros compañeros de clases que de alguna manera u otra nos apoyaron a lo largo de la carrera Mil Gracias!

7 14 ÍNDICE GENERAL Pág. DEDICATORIA AGARADECIMIENTO RESUMEN INTRODUCCIÓN CAPÍTULOS I PLANTEAMIENTO DEL PROBLEMA Contexto y Descripción de la necesidad Tecnológica Objetivos General Específicos Importancia y Justificación 9 11 II MARCO TEÓRICO TECNOLÓGICO Antecedentes Teóricos y Tecnológicos Bases Teóricas y Tecnológicas III DISEÑO TECNOLÓGICO Descripción del Diseño Tecnológico 47 IV IMPLEMENTACIÓN Y PRUEBAS DEL DISEÑO TECNOLÓGICO 55 CONCLUSIONES RECOMENDACIONES BIBLIOGRAFÍA

8 15 DISEÑO DE UN PORTAL WEB DINÁMICO PARA EL LICEO BOLIVARIANO VICENTE CAMPO ELÍAS DE TUCANÍ, MUNICIPIO CARACCIOLO PARRA OLMEDO ESTADO MÉRIDA. RESUMEN Autores: Brs. Freitez Yenys Serrano Areliz Tutor Industrial: Ing. Enrique Mora Fecha: Octubre de 2008 El presente trabajo de investigación se encuentra orientado en la elaboración de un portal web dinámico para el Liceo Bolivariano Vicente Campo Elías. Que tiene como objetivo general diseñar un portal web dinámico y como específicos diagnosticar la necesidad de desarrollar el portal web y recabar información de la institución, también diseñar la interfaz grafica y la base de datos de manera interactiva y hospedar el sitio en un servidor de páginas web a fin de publicarlo en Internet. Esto con el fin de brindar información referente de la institución a cualquier usuario a través de un medio tan visitado como es la internet, igualmente encontraremos en el capítulo II la metodología aplicada tomada del libro Diseño de páginas Web propuesta por J. Mariano González Romano y J. Manuel Cordero Vaslle para el diseño de un sitio web además las bases teóricas los modelos de organización lógica de un sitio Web como lo son: modelo lineal, modelo en rejilla, modelo por jerarquías y modelo en tela de araña (web). Mientras que en el capítulo III encontramos la descripción del diseño tecnológico, tipo de investigación los cuales consideramos tecnológica, documental o bibliográfica y aplicada; las técnicas e instrumentos utilizados en la recolección de la información (la entrevista, la observación directa, el análisis documental) y la metodología aplicada a través de las fases para el diseño de un sitio web: definir los objetivos del sitio, la estructura de la pagina, diseñar la interacción del usuario, la interfaz grafica, la pruebas y evaluación de las páginas. Finalmente encontramos el capítulo IV, los resultados obtenidos, las pantallas del sitio del portal web alojadas en un servidor local (localhost) y subidas a internet a través de un servidor gratuito con la aplicación FileZilla Client y logrando obtener la dirección electrónica htpp://lbvicentecampoelias.site90.net y seguidamente las conclusiones, recomendaciones y bibliografía.

9 16 INTRODUCCIÓN Los avances tecnológicos de hoy han permitido nuevas oportunidades para difundir la información de manera veraz, eficaz y oportuna gracias a internet, la cual se hace imprescindible en las organizaciones principalmente educativas y así proyectarse a través de una página web en el ámbito mundial, de aquí nace la necesidad de diseñar un portal web dinámico para el L.B. Vicente Campo Elías que permita mantener información actualizada de la institución a los usuarios. Por consiguiente la presente investigación está dividida en cuatro capítulos, el capítulo I está conformado por el planteamiento del problema, el cual trata sobre los motivos que llevaron a resolver el problema; seguidamente se encuentran los objetivos, la justificación e importancia del por qué se realiza la investigación, las cuales sirven al lector para saber de manera precisa que se busca hacer, la importancia que tiene y la precisión en cuanto a espacio y tiempo de la investigación. Mientras que capítulo II se encuentra conformado por los antecedentes de la investigación que son las referencias que se encontraron acerca de otros trabajos de investigación y de la vinculación que estos tienen con el presente estudio; asimismo se encuentra la bases teórica, que son las diferentes teorías que sirven de apoyo a la investigación; por último se encuentran el marco conceptual que son los términos o conceptos que se abordan en la investigación. Seguidamente encontramos el capítulo III está conformado por el diseño tecnológico, en el cual se encuentra el tipo de investigación, las técnicas e instrumentos que se utilizarán para la recolección de información y la metodología aplicada propuesta por J. Mariano González Romano y J. Manuel Cordero Vaslle en su libro Diseño de páginas Web el cual constituye las fases para el diseño del portal web.

10 17 Posteriormente el capítulo IV permite mostrar los resultados obtenidos a través de la evaluación y pruebas de las páginas web y las bases de datos en un servidor local (localhost), asimismo muestra el sitio web desde internet gracias a un servidor gratuito que sirvió de gran aporte a la presente investigación. Finalmente se presentan las conclusiones y recomendaciones pertinentes para la institución.

11 18 CAPÍTULO I PLANTEAMIENTO DEL PROBLEMA Internet es una red de redes a escala mundial de millones de computadoras interconectadas entre sí, aproximadamente apareció por los años 60 gracias a la arpanet, se le llamó primero arpanet y esta fue realizada para cumplir función de investigación, su uso se popularizó a partir de la aparición de la Word Wide Web. Internet fue desarrollada por el ejército norteamericano y la implementación en la investigación académica y comercial, estuvo dirigida a usuarios que tenían acceso a la red, lo que permitía leer y descargar datos, virtualmente acerca de cualquier tema desde cualquier parte del mundo. Diferentes instituciones dedicadas a la educación de nuestro país como el continente entero, tratan de estar a la vanguardia en el mundo de la tecnología y el Internet, esta le permite proyectar su institución, reflejar lo que son, a que se dedican, su propósito, a través de medios de difusión denominadas páginas web, este es el caso del Liceo Bolivariano Vicente Campo Elías, que es el tema de nuestra investigación. Actualmente el Liceo Bolivariano Vicente Campo Elías no cuenta con un medio de comunicación eficiente como lo es un sitio web oficial, que suministre información al usuario acerca de su funcionamiento, planta física, personal de la institución, becados, requisitos de ingreso, entre otros, y al

12 19 público en general, además permitirá que cualquier usuario pueda conectarse y obtener información de esta prestigiosa institución. Que se encuentra ubicado el sector la Inmaculada, calle principal vía Santa María, Municipio Caracciolo Parra Olmedo, Tucaní Estado Mérida, a causa de dicho problema se plantea el diseño de un portal web que le proporcionará al usuario un sin fin de beneficios al igual que a cualquier organización como lo son: brindar información completa y actualizada, como por ejemplo: s u historia, periodo de inscripciones, sobre sus docentes, objetivos, misión, visión, actividades culturales, entre otros. Partiendo de esto nos planteamos en diseñar un portal web para el Liceo Bolivariano Vicente Campo Elías de Tucaní, Municipio Caracciolo Parra y Olmedo Estado Mérida.

13 20 Objetivos de la Investigación Objetivo general: Diseñar un portal web dinámico para el Liceo Bolivariano Vicente Campo Elías de Tucaní, Municipio Caracciolo Parra Olmedo, Estado Mérida. Objetivos específicos: Diagnosticar la necesidad de desarrollar el portal web y recabar información del liceo bolivariano Vicente Campo Elías. Diseñar la interfaz grafica y la base de datos de manera interactiva. Hospedar el portal web en un servidor de páginas web a fin de publicarlo en Internet.

14 21 Importancia y Justificación El diseño Web es una actividad que consiste en la planificación, diseño e implementación de páginas web. No es simplemente una aplicación del diseño convencional sobre Internet, ya que requiere tener en cuenta aspectos tales como: navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo. El diseño es la comunicación textual (contenidos) existente en Internet una faceta visual, lo que obliga a pensar una mejor estructuración de los mismos en este soporte. Todo esto teniendo en cuenta el nivel de programación en el diseño de las aplicaciones y del impacto visual que se quiere generar en el usuario. Para el nuevo diseño de sitios web del Liceo Bolivariano Vicente Campo Elías, se utilizará una serie de técnicas e instrumentos cómo lo son: la entrevista, la observación directa y el análisis documental; que permitan aplicar nuevas tecnologías y tendencias que se manejan actualmente en el ambiente de la programación web, para así lograr diseñar una página web que ofrezca al usuario información actualizada del periodo de inscripciones, docentes, actividades escolares, calendario escolar y becados, así de esta manera evitando la tediosa tarea de brindar información personalizada a mas de representantes. Finalmente el presente investigación es de gran importancia porque, por medio de él se hará una valiosa contribución al Liceo Bolivariano Vicente Campo Elías brindándole al usuario información clara y confiable de la institución, a través del portal web.

15 22 CAPITULO II MARCO TEÓRICO- TECNOLÓGICO Antecedentes de la investigación En diferentes instituciones y empresas sean elaborado proyectos de grado sobre diseño de sitios web dinámicos permitiendo reflejar información importante para el público en general y que de alguna u otra manera proporcionan ayuda para el diseño y terminación de proyectos que se desarrollan con la misma similitud. Por esta razón se llevó a cabo una revisión de diferentes proyectos referentes al tema, permitiendo encontrar una gran ayuda para el desarrollo del sitio Web que aquí proponemos. Márquina, A. (2006) elaboró una investigación que lleva por título Diseño de un sitio Web informativo para el instituto universitario de tecnología Dr. Cristóbal Mendoza, esta investigación tuvo su origen en la necesidad que tenía el instituto de mantenerse en el margen informativo que el mismo requería. El objetivo general fue diseñar un sitio Web informativo que permita dar a conocer el instituto al público en general. El tipo de investigación empleada fue la aplicada, descriptiva y documental; basándose para la recolección de la información, en las técnicas de observación y revisión documental, obteniéndose como resultado una serie de planteamientos en los cuales se basó el diseño de un nuevo sitio Web adaptado a las necesidades del instituto.

16 23 Esta investigación tiene su justificación en que actualmente con el avance de la tecnología y en particular la Internet, las diversas empresas e instituciones requieren de promoción institucional para dar a conocer los servicios que pueden prestar al público interesado, de una manera rápida y directa, siendo precisamente un sitio web la forma más adecuada para lograr ese cometido. Marlon, O. (2003) elaboró una investigación que lleva por título Sitio Web informativo para la dirección de educación, cultura y deporte del estado Mérida, esta investigación buscó la solución al problema informativo que esta institución presentaba. El objetivo general fue diseñar un sitio Web informativo para servir a los docentes como centro de atención, que permita solicitar los servicios básicos al educador y sus instituciones. Para el desarrollo de este proyecto se aplicaron las técnicas de investigación documental, de campo y aplicada. Estos aspectos fueron evaluados en el presente trabajo, realizando un análisis previo de cada situación a través de técnicas de investigación y recolección de datos que permitieron satisfacer esta necesidad, lográndose esto a través de la realización de un sitio Web informativo. La vinculación que tiene este problema con la investigación actual es la aplicación de las técnicas de investigación documental, de campo y aplicada que permitirán satisfacer las necesidades de la realización del sitio Web. Dugarte y García (2002), presentan una investigación titulada Diseño y creación del sitio Web del Instituto Universitario Tecnológico de Ejido. Este proyecto tuvo como finalidad incrementar las funciones y actividades, que incluya información general de este importante centro universitario, así como también darse a conocer en el mundo global de la Internet. El objetivo general fue diseñar, desarrollar e implementar un sitio Web informativo y

17 24 dinámico para el Instituto Universitario Tecnológico de Ejido en el Estado Mérida. Para el diseño de la pagina web utilizaron: Macromedia 8, DreamDrever 8 y de estos programas obtuvieron una página web dinámica y de gran interacción con el usuario permitiendo así una comunicación bilateral entre hombre-maquina. Los trabajos antes citados de forma breve son de gran importancia para la investigación en curso, ya que ayudan a enfocar el presente estudio hacia el mejoramiento de la problemática que en un momento determinado se observó y poder establecer un punto de partida para el desarrollo de lo que será el sitio Web que se está planteando en dicho estudio. Bases Teóricas y Tecnológicas Protocolos de Internet Según Powell (2001) dice que Internet es una red compuesta por miles de redes independientes pertenecientes a instituciones públicas, centros de investigación, empresas privadas y otras organizaciones (p.65). Estas redes comparten unas normas que aseguran la comunicación entre ellas: son los denominados protocolos Internet. Según Powell (2001) dice que: Existen diversos protocolos en función del tipo de comunicación que se establece entre las máquinas. El protocolo HTTP (HyperText Transfer Protocolo) es la base de la Web. La Web es un sistema que facilita el acceso a los distintos recursos que ofrece Internet a través de una interfaz común basada en el hipertexto (p.67).

18 25 La web se ha hecho enormemente popular con la aparición de unos programas dotados de interfaces gráficas amigables que permiten a cualquier persona acceder a los documentos de la red: son los conocidos navegadores. Entre los cuales están: Internet explore, nestcape, mozilla, entre otros. El hipertexto y la Web Según Powell (2001) dice que: El hipertexto es un texto con enlaces. Los documentos de hipertexto pueden contener enlaces, que son referencias a otras partes del documento o a otros documentos. El término hipertexto fue acuñado por Ted Nelson en Sus orígenes se remontan a 1945, año en el que Vannevar Bush propuso un sistema llamado Memex, una especie de biblioteca automatizada que nunca llegó a construirse (p.89). El hipertexto supone una ampliación del concepto habitual de texto al permitir que una serie de documentos enlazados unos con otros y posiblemente ubicados en lugares remotos aparezcan formando una unidad. El elemento básico de la Internet es la página web, es un documento que contiene enlaces de hipertexto a otros documentos relacionados que pueden estar localizados en la propia máquina o en máquinas remotas. El protocolo de la Web especifica un formato para escribir los documentos que forman parte de ella: el Hypertext Markup Language (HTML).

19 26 Páginas web El HTML es el lenguaje básico utilizado la cual constituye una fuente de información y accesible mediante un navegador de Internet, esta página puede contener textos, imágenes, sonidos, videos e incluso mundos 3D y animación; así como elementos que permiten una comunicación activa entre el usuario e información. Al respecto, Powell (2001) expresa que: El concepto de página es el verdadero corazón de un sitio web. En su forma más sencilla, una página es lo que aparece en la ventana de un explorador (p.303). Una página es igual a una dirección URL. Un usuario teclea una dirección URL y aparece un documento en la ventana. Actualmente las cosas, no son tan sencillas; una dirección URL puede cargar varios documentos en la ventana del explorador y la llamada página web podría estar dividida en muchas ventanas más pequeñas o frames (marcos). Hoy día una pantalla, podría ser una mejor analogía, pero lo que tenemos es pagina, es muy poco probable que cambie. Elementos de una página web En una página Web pueden colocarse distintos tipos de elementos. Los más habituales son: Texto Imágenes Animaciones Audio y vídeo Mapas sensibles

20 27 Escenas de realidad virtual Programas Enlaces El texto puede aparecer en forma de párrafo o de lista. Entre sus características están el tipo de letra, el tamaño, el color y la justificación. Existen distintos estilos de texto predefinidos: texto normal, realzado, encabezamiento, dirección, etc. En una página web el texto no tiene la misma importancia que en un documento escrito, ya que es más difícil leer texto en una pantalla que hacerlo en un papel. De todas formas sigue siendo el elemento predominante en la mayoría de las páginas web. Las imágenes fueron utilizadas inicialmente para proporcionar información visual complementaria al texto escrito (gráficos y fotografías), para facilitar la navegación por la página (íconos, flechas, botones) o como simples elementos decorativos para hacer ésta más atractiva (fondos, boliches, líneas de separación). Actualmente sin embargo, las imágenes son una parte fundamental en el diseño de una página, utilizándose para crear elementos de uso frecuente tales como barras de navegación, menús o botones rollover (imágenes que cambian de aspecto al pasar el ratón por encima de ellas). A veces el uso que se le hace a las imágenes puede pasar inadvertido para el visitante de una página. Las animaciones contribuyen a dar un aspecto dinámico a la página, y permiten crear desde las habituales pancartas animadas hasta menús desplegables. Son muy populares las animaciones Gif, que se pueden crear fácilmente usando alguno de los numerosos programas gratuitos o shareware disponibles en la red. Además existen sitios que reúnen grandes

21 28 cantidades de gif animados listos para ser utilizados en las páginas. En cuanto al audio y al vídeo, ambos medios pueden ser incluidos sin problemas en una página web, aunque hay que tener en cuenta que tanto los clips de sonido como las secuencias de video han de descargarse completamente en la computadora local antes de poder disfrutar de ellos. Dado a que ambos medios suelen ser habitualmente de gran tamaño, el tiempo de espera puede resultar excesivo. Hay que cuidarse, pues, de usarlos gratuitamente, ya que pueden disparar el tiempo de descarga de la página y ahuyentar a los visitantes. Los mapas sensibles, también llamados mapas de imágenes, son un tipo particular de imágenes que disponen de zonas activas tales que al hacer clic con el ratón sobre ellas se active algún enlace. Los mapas sensibles constituyen una alternativa a los menús o barras de navegación, por lo que suelen ser frecuentes en la página principal de un sitio web. Una página Web también puede incorporar escenas de realidad virtual. Estas escenas se construyen mediante lenguaje especial, el VRML (Virtual Relity Modeling Languaje), que permiten modelar escenas tridimensionales que los navegadores interpretarán si disponen del componente adecuado. Estas escenas pueden representar mundos tridimensionales por los que el usuario puede navegar. La realidad virtual tiene muchas y fantásticas aplicaciones en la web, aunque para que sean plenamente operativas hay que esperar a que las velocidades de transmisión sean lo suficientemente altas, debido al elevado flujo de datos que conllevan.

22 29 Si con todos los medios anteriores no se es capaz de obtener un determinado efecto en la página, siempre se tiene la opción de incluir un programa. Esta es quizás la forma más versátil de añadir contenido multimedia a una página web, aunque también la más costosa, ya que exige disponer de conocimientos de programación. Por último, los enlaces pueden estar asociados a cualquiera de los elementos anteriores y son los responsables de la auténtica potencia de las páginas web. Los enlaces permiten saltar de una página a otra sin importar el lugar donde éste se encuentre. De esta manera se puede consultar un gran número de documentos relacionados con un mismo tema y que puede estar disperso por todo el planeta. Alternativas para crear páginas Web: Utilizar un editor de páginas Web Programar directamente en HTML Guardar en formato HTML un documento creado con otra aplicación. Es muy importante realizar una buena planificación antes de comenzar a crear páginas Web. Herramientas auxiliares Programas de diseño gráfico, para la creación y el tratamiento digital de imágenes y fotografías (PaintShop Pro, Adobe Photoshop, Corel PhotoPaint, Macromedia Fireworks).

23 30 Editores de mapas sensibles, para crear mapas de imágenes (Mapedit). Programas de animación, para crear animaciones GIF (GIF Construction Set) o vectoriales (Macromedia Flash). Programas de edición de audio (GoldWave, Sonic Foundry SoundForge) y vídeo (Adobe Premiere), para editar audio y vídeo digital. Programas de modelado 3D (Kinetix 3D Studio, CorelWEB.WORLD, 3D Webmaster), para incluir mundos virtuales en VRML. Conversores de formatos gráficos y de texto, para incorporar a un documento HTML documentos realizados con otros programas y almacenados en diferentes formatos (Graphics Workshop). Analizadores de vínculos, para comprobar los enlaces entre las páginas. Entornos de desarrollo de programas, para escribir código HTML, Java, JavaScript o VBScript (Eclipse). Programas de FTP, para la transferencia de las páginas al servidor Web (SSH Secure File Transfer, WS_FTP). Crear una página Web no consiste simplemente en recopilar una serie de textos, imágenes, sonidos, etc. (lo que se llama el contenido) e irlos insertando en la página. Diseñar una buena página, y más aún un sitio Web completo, conlleva la realización de una serie de tareas previas. Martínez, (2006). Herramientas para hacer una Pagina Web. Extraído el 16 de enero de Disponible en: Tipos Específicos de sitios Web Existen numerosas formas de clasificar los sitios: por su audiencia, por su frecuencia de cambio o por su estructura. Sin embargo, estas clasificaciones pueden ser a veces demasiado abstractas. Realizar un breve análisis de los

24 31 tipos de sitios resultará útil, aunque solo sea para clasificar y respetar las diferencias entre los distintos sitios. Nos referimos solamente a los sitios públicos, pero podría hacerse también la clasificación de los sitios privados de intranet. Powell (2001), piensa que: "Una forma muy general de clasificar los sitios seria: sitios, de informativos, entretenimiento, comerciales de exploración, artísticos y personales: Informativos: La finalidad general de los sitios informativos, es la distribución de información. Los sitios de las administraciones del estado, los educativos, los de noticias, los de organizaciones sin ánimo de lucro, los de grupos religiosos o los diversos grupos de orientación social se consideran que son sitios informativos. Aunque estos sitios pueden tener una finalidad comercial, su finalidad mas importante es informar, independientemente del hecho de que se produzca una transacción. Es difícil abarcar el tipo de audiencia de esto sitios, puesto que depende mucho del tipo de información ofrecida. Todo lo que puede decirse es que la audiencia del sitio estará compuesta por cualquiera que tenga interés en ver la información proporcionada. La finalidad de un sitio informativo varía enormemente. Un sitio en una universidad, asociado con un determinado aula, podría intentar formar a los visitantes sobre algún tema determinado, como, por ejemplo, historia de España. Un sitio informativo, perteneciente a un determinado grupo religioso,

25 32 social o político, podría tener como finalidad principal convencer a la gente para que se afilie o done algo a la organización. Los sitios de noticias podrían tener como finalidad principal informar a la gente sobre los hechos actuales de una manera útil, de forma que la gente confíe en la fuente lo suficiente para que los sitios de noticias puedan vender la "atención de los visitantes". Un sitio de la administración del Estado puede tener como finalidad principal informar a los ciudadanos sobre cambios en determinadas leyes, convencerles para que se alisten a un servicio civil o militar o, incluso, conseguir que voten en un determinado sentido. La coincidencia entre los sitios comerciales e informativos puede ser grande, pero recuerde siempre que la diferencia principal es que los sitios comerciales están mucho más orientados hacia la economía de los sitios informativos. Los sitios informativos pueden construirse según criterios que no tengan mucho sentido, más o menos declarado, que trata de aumentar los beneficios de la empresa, y su finalidad es, con frecuencia, más predecible. Sitios Comerciales: Los sitios comerciales son los que se construyen fundamentalmente para fomentar los negocios de alguna empresa. Generalmente, la audiencia principal de un sitio comercial esta formada por los clientes actuales y potenciales de la empresa. Una audiencia secundaria incluye los inversores actuales y potenciales, los posibles empleados y terceras partes interesadas, tales como medio de comunicación o incluso los competidores. La finalidad de la difusión de información es intentar que las personas compren un producto un servicio de la empresa. El método puede ser una aproximación directa, intentando persuadir al usuario, o una aproximación

26 33 indirecta, ofreciendo información útil, que creara una relación de confianza entre la empresa y el posible cliente. Entretenimiento: Los sitios de entretenimiento son, generalmente, sitios comerciales, pero tienen una consideración especial. La finalidad de un sitio de entretenimiento es, simplemente, entretener a sus visitantes. En cierto modo, venden entretenimiento. En otras palabras, tratan de vender una experiencia agradable. Aunque los sitios comerciales, tales como los de comercio electrónico, desean que el visitante tenga una experiencia positiva o incluso entretenida, el entretenimiento no es más que un objetivo secundario. Un sitio que vende ropas, podría disponer de un explorador de la jungla que entretuviera a los visitantes con historias sobre tierras lejanas; el fondo del asunto es que la experiencia ayude a vender ropa. Si no se vende ropa, el sitio no funciona. En el caso de un sitio de entretenimiento, la finalidad es vender la experiencia misma. La creación de una experiencia entretenida - cuando se visita un sitio web, cuando se juega con un videojuego o cuando se ve una película - no es algo que pueda crearse con facilidad. Mantener al espectador ocupado y feliz puede ser difícil y no es siempre tan formulista como pudiera pensarse. Por ejemplo Hollywood se esfuerza continuamente en entender porque algunas películas creadas para el éxito fracasan, mientras que una película de una productora independiente triunfa. La novedad es lo único que parece vender siempre. Si una historia se parece demasiado a algo que una persona ha experimentado antes, parecerá aburrida. Los sitios web que se construyen para entretener tienen que romper con lo convencional para tener éxito.

27 34 Navegacionales: Un sitio navegacionales el que tiene como finalidad ayudar a la gente a no perderse en Internet. Estos sitios se llaman portales, puesto que sirven como centros principales que apuntan a otros destinos. Definición: Un portal es un sitio que sirve como punto de partida principal para un viaje en línea del usuario y le ayuda a encontrar información y el mayor de numero de tareas posibles para animar al usuario a permanecer en el o, al menos, a que vuelva a visitarse. Los sitios navegacionales también incluyen motores de búsqueda o directorios de sitios que, casualmente, constituyen con frecuencia la medula de muchos portales. Comunidad: Un sitio de comunidad es aquel cuya finalidad es crear un punto central para que los miembros de una determinada comunidad se congreguen y se relacionen. Los visitantes vienen al sitio, que, con frecuencia, es de naturaleza muy informal, no solo en busca de contenido interesante, sino a relacionarse con otras personas con una disposición parecida. Los sitios de comunidad son muy interactivos y, a menudo, se generan dinámicamente y se personalizan. El contenido de estos sitios varía mucho, igual que el de un sitio informativo.

28 Algunas comunidades pueden ser muy abiertas en cuanto a su afiliación, dedicándose a amplios grupos demográficos, tales como las mujeres en general. Otras comunidades son más cerradas y se dedican a un número más selecto de individuos, tales como los estudiantes universitarios asiáticoamericanos en California del Sur. Los sitios de comunidad y los sitios informativos y comerciales a veces se solapan. La diferencia principal entre los sitios puramente informativos y los comerciales y los de comunidad es, simplemente la capacidad de relacionar entre si a los visitantes. Si, con el tiempo, se generaliza la posibilidad de relacionarse con los visitantes de otro sitio, se acabara perdiendo la distinción especial de los sitios de este tipo. Artístico: Un sitio artístico es aquel que es puramente la expresión del individuo o artista. La finalidad del sitio podría inspirar, iluminar o entretener a los espectadores. En algunos casos, el sitio podría ser simplemente el resultado del intento de expresar los deseos del artista. Puede que a ellos no les importe lo que piense el espectador sobre el sitio. Mientras que el sitio haga feliz al artista, tendrá éxito. Los sitios artísticos están dirigidos al usuario únicamente en el sentido que estimula la reflexión, y pueden evitar las convenciones o la lógica. Personal: Igual que un sitio artístico, un sitio personal (con frecuencia denominado "página personal") es, frecuentemente, una expresión de su creador. Las páginas personales pueden crearse para informar a los amigos o a la familia,

29 36 o sencillamente para aprender nuevas técnicas, tales como HTML. Algunas páginas personales parecen ser santuarios para sus creadores, en un vano intento de hacerse famosos a través de la web. Otras páginas personales son meros resúmenes, útiles cuando se busca trabajo, para informar a un potencial empleador. En cierto modo, la finalidad de una página personal es personificar al individuo en la web. Desgraciadamente, este concepto puede ser bastante peligroso. Aunque está muy claro que no hay que mostrar el número de la tarjeta de crédito, el de la seguridad social o el número de las cuentas bancarias en su página personal, el número de detalles incluidos en muchas páginas personales asusta. Mucha gente presenta detalles íntimos de sus vidas, desde fotos de los amigos o familiares literalmente, su diario. Aunque este exhibicionismo en línea podría parecer inocuo, piense que existen personas que están al acecho en la red.~ Los usuarios deberían pensar que declarar todos sus gustos y sus aversiones de forma pública, en forma de una página personal, es hacer que se cumpla el sueño de muchos mercaderes. Es fácil la construcción de perfiles a partir de esa información, "y puede dar como resultado la recepción de una gran cantidad de correo basura y de correo electrónico basura. Piense que editar una página personal Web no es muy diferente de incluir información en un tablón de anuncios de la plaza de la ciudad Usted nunca sabe quién va a ver esa información ni que harán con ella. Tipos de sitios Web Existen muchas variedades de sitios Web, cada uno especializándose en un tipo particular de contenido o uso, y puede ser arbitrariamente clasificados de muchas maneras. Unas pocas clasificaciones pueden incluir:

30 37 Sitio de empresa: usado para promocionar una empresa o servicio. Sitio de comercio electrónico: para comprar bienes, como Amazon.com. Sitio de Base de datos: un sitio donde el uso principal es la búsqueda y muestra de un contenido específica de la base de datos como la Internet Movie Database. Sitio directorio: un sitio que contiene contenidos variados que están divididos en categorías y subcategorías, como el directorio de Yahoo!, el directorio de Google y el Open Directory Project. Sitio de descargas: estrictamente usado para descargar contenido electrónico, como software, demos de juegos o fondos de escritorio. Sitio de juego: un sitio que es propiamente un juego o un "patio de recreo" donde mucha gente viene a jugar, como MSN Games, Pogo.com y los MMORPGs VidaJurasica, Planetarion y Kings of Chaos. Sitio de información: contiene contenido que pretende informar a los visitantes, pero no necesariamente de propósitos comerciales. La mayoría de los gobiernos e instituciones educacionales y sin ánimo de lucro tienen un sitio de información. Sitio de noticias: Similar a un sitio de información, pero dedicada a mostrar noticias y comentarios. Sitio buscador: un sitio que proporciona información general y está pensado como entrada o búsqueda para otros sitios. Un ejemplo puro es Google, y el tipo de buscador más conocido es Yahoo!. Martínez, (2006).Tipos de sitio web. Extraído el 16 de noviembre de Disponible en:

31 38 Tipos comunes de sitios Web Existen tres categorías generales de sitios web: sitios públicos, sitios extranet y sitios intranet Definición: Un sitio web público, un sitio web de Internet, un sitio web externo o, sencillamente, un sitio web, es un sitio cuyo acceso no está restringido explícitamente a ningún tipo de usuarios. Un sitio web externo es, en cierto sentido, un lugar público, abierto a todo el que quiera visitarlo en Internet. No todo el mundo querrá visitar el sitio - pero no existe ninguna limitación sobre quién puede visitarle. En el otro extremo del espectro se encuentra el sitio web intranet, generalmente solo intranet. Un sitio intranet es, generalmente, privado y, con frecuencia, solo esta disponible para los usuarios de determinada red privada. Definición: Un sitio Web intranet es un sitio que está reservado a una determinada organización y generalmente funciona dentro de una red privada, en vez de hacerla directamente en Internet. En una posición intermedia entre un sitio web externo y una intranet se encuentran sitios semiprivados, denominados generalmente extranet. Definición: Un sitio extranet es un sitio Web al que puede acceder una clase limitada de usuarios, pero a la que se accede a través de Internet. Un ejemplo de una extranet podría ser un sitio de abastecimiento a los

32 39 socios de una empresa o a los distribuidores. La limitación del acceso a un sitio extranet puede variar desde la sencilla "seguridad por oscuridad», que consiste en no utilizar una dirección o un número de puerto de servidor Web notorios, hasta la restricción de páginas al explorador visitante mediante una clave o una dirección IP. La diferencia principal entre estas tres diferentes categorías de sitios es la audiencia. Los sitios web públicos están completamente abiertos, mientras que los extranet e intranet son más exclusivos. Cuanto más privado sea el sitio, mayor conocimiento deberá tener su diseñador sobre los potenciales usuarios. Según se indica en los capítulos 2 y 3, conocer a los usuarios de un sitio es crucial para diseñar el sitio. Piense que para una intranet privada, el diseñador puede reunirse físicamente con los potenciales usuarios del sitio y conocer las capacidades de cada uno de ellos, desde su sofisticación como usuarios de PC, hasta el equipo o el explorador que utilizan. En el otro extremo del espectro se encuentra el sitio Web público. Los diseñadores de sitios públicos conocen muy poco de sus usuarios, raramente consiguen contactar directamente con ellos y, con frecuencia, tienen poca información sobre sus capacidades. Yahoo!. Martínez, (2006).Tipos comunes de sitio web. Extraído el 16 de noviembre de Disponible en:

33 40 Diseño de un sitio Web Fases del diseño: Definir los objetivos del sitio Definir la estructura de las páginas Diseñar la interacción con el usuario Diseñar la interfaz gráfica Definir los objetivos del sitio La respuesta a las preguntas a quién va dirigido el sitio Web? y qué va a ofrecer el sitio Web a sus visitantes? determina los contenidos del sitio, tanto en el fondo (la información que se va a publicar) como en la forma (los tipos de medios que se van a utilizar para mostrar esta información). Definir la estructura de las páginas La información que se va a publicar en el sitio se estructura en páginas independientes conectadas entre sí. La estructura más típica para un sitio Web es la de árbol, con una página principal en la raíz del mismo y las demás páginas repartidas en los diferentes niveles. Diseñar la interacción con el usuario Se diseña un mecanismo de navegación que permita al visitante desplazarse cómodamente por las páginas. También se decide la interacción basada en formularios y scripts dinámicos.

34 41 Diseñar la interfaz gráfica Se diseña el aspecto visual del sitio Web, eligiendo un estilo global de diseño, diseñando cada una de las páginas y los elementos gráficos comunes a todas ellas. En esta fase es muy recomendable la creación de una o varias hojas de estilo que permitan agrupar en un sólo punto todos los estilos de presentación de las páginas, haciendo mucho más fácil su posterior mantenimiento. Es muy interesante el uso de metáforas, que son representaciones visuales cercanas al usuario y relacionadas con el tema de la página (ejemplo: inmobiliaria). Creación de las páginas Tras las cuatro fases anteriores ya se puede pasar a la creación de las páginas individuales del sitio con las herramientas adecuadas. También se deberá decidir si se van a usar tecnologías más complejas como los lenguajes de servidor o los programas CGI, o el acceso a bases de datos, que exigen ciertos requisitos por parte del servidor Web. La etapa final Una vez creadas las páginas aún quedan una serie de tareas importantes por hacer: Comprobar a fondo las páginas para detectar posibles errores antes de su publicación. Realizar pruebas de usabilidad. Transferir las páginas a su ubicación definitiva en el servidor Web.

35 42 Dar de alta la página en distintos buscadores. Pavon, (2008). Diseño de un sitio web. Extraído el 19 de mayo de 2008 Disponible en: http//. Definición de servidor En informática, un servidor es un tipo de software que realiza ciertas tareas en nombre de los usuarios. El término servidor ahora también se utiliza para referirse al ordenador físico en el cual funciona ese software, una máquina cuyo propósito es proveer datos de modo que otras máquinas puedan utilizar esos datos. Un servidor sirve información a los ordenadores que se conecten a él. Cuando los usuarios se conectan a un servidor pueden acceder a programas, archivos y otra información del servidor. En la web, un servidor web es un ordenador que usa el protocolo http para enviar páginas web al ordenador de un usuario cuando el usuario las solicita. Cliente Web Es un programa con el que el usuario interacciona para solicitar a un servidor web el envío de páginas de información. Estas páginas se transfieren mediante el protocolo HTTP. Las páginas que se reciben son documentos de texto codificados en lenguaje HTML. El cliente Web debe interpretar estos documentos para mostrárselos al usuario en el formato adecuado. Cuando lo que se recibe no es un documento de texto, sino un objeto multimedia (vídeo, sonido) no reconocido por el cliente Web, éste debe activar una aplicación externa capaz de gestionarlo.

36 43 Servidor Web Es un programa que está permanentemente escuchando las peticiones de conexión de los clientes mediante el protocolo HTTP. Funciona de la siguiente manera: si encuentra en su sistema de ficheros el documento HTML solicitado por el cliente, lo envía y cierra la conexión; en caso contrario, envía un código de error y cierra la conexión. También se ocupa de controlar los aspectos de seguridad. Transferencia de páginas Web 1. El usuario especifica en el cliente Web la dirección (URL) de la página que desea consultar 2. El cliente establece la conexión con el servidor Web 3. El cliente solicita la página o el objeto deseado 4. El servidor busca la página solicitada en su sistema de ficheros. Si la encuentra, la envía al cliente; en caso contrario, devuelve un código de error. 5. El cliente interpreta los códigos HTML y muestra la página al usuario. 6. Se cierra la conexión. Es probable que la página solicitada se cree en el momento de su petición. La conexión siempre se libera al terminar la transmisión de la página. Además, se establece una conexión independiente para cada documento u objeto que se transmite. La transferencia en sentido contrario (del cliente al servidor) es menos frecuente, pero también es posible. Para realizarla existen varias alternativas.

37 44 Metodologías para la realización de un Sitio Web Estructura del sitio Hay dos tipos de estructura en cualquier sitio web: la lógica y la física. La estructura lógica reseña como se relacionan entre si los documentos y define los vínculos entre documentos. La estructura física describe donde se encuentra realmente un documento, mostrando, por ejemplo, el camino al directorio del documento en un servidor Web o su situación en una base de datos. Premisa: La estructura lógica de un sitio web es más importante para el usuario que su estructura física. Modelos de organización lógica de un sitio Web: Existen cuatro formas principales de organización lógica de los sitios web: Modelo Lineal Modelo en Rejilla Modelo por Jerarquías Modelo en Tela de Araña (Web) Modelo Lineal La estructura lineal es la más familiar de todas las estructuras, porque la información impresa tradicional tiende a seguir este tipo de organización. La presentación de la información de una forma lineal es, con frecuencia, muy

38 45 útil cuando se analiza un procedimiento paso a paso, pero hay ocasiones en las que puede necesitarse algún tipo de información suplementaria. Dentro de la estructura lineal encontramos: Lineal Básica: una organización lineal pura facilita la progresión ordenada a través del cuerpo de la información, según se muestra en el Cuadro Nº 1. Cuadro nº 1 Lineal básica. Fuente: Diseño de Páginas web, Mc Graw Hill osborne. Lineal con Alternativas: es útil para presentar la información en un orden predeterminado, proporciona al usuario pocas posibilidades de relacionarse con la información para que, finalmente, lleve al usuario a otra página dentro de la secuencia, según se muestra en el Cuadro Nº 2. Cuadro nº 2 Lineal con alternativas. Fuente: Diseño de Páginas web, Mc Graw Hill osborne Lineal con Opciones: es adecuada cuando tiene que conservarse el camino general, pero hay que dar cabida a ligeras variaciones, tales como saltarse determinadas páginas. La idea básica de un sitio con este tipo de estructura se muestra en el Cuadro Nº 3.

39 46 Cuadro nº 3 Lineal con opciones. Fuente: Diseño de Páginas web, Mc Graw Hill osborne. Lineal con Caminos Laterales: permite algunos desvíos controlados. Aunque el usuario puede tomar un corto desvío lateral, la estructura le obliga a regresar al camino principal. Sin embargo, cuando se añaden muchos caminos laterales, la estructura comienza a parecerse más a una estructura jerarquizada, o en árbol, como se muestra en el Cuadro Nº 4. Cuadro nº 4 Lineal con caminos laterales. Fuente: Diseño de Páginas web, Mc Graw Hill osborne. Modelo en Rejilla Una rejilla es una estructura lineal doble, en la que sus elementos se relacionan tanto vertical como horizontalmente. Puesto que una rejilla tiene una organización espacial, es ideal para conjuntos de elementos que están relacionados entre si; sin embargo, una estructura pura en rejilla es, hasta ahora, poco frecuente en la web. Cuando está bien diseñada, una rejilla

40 47 ofrece orientación horizontal y vertical para que el usuario no se sienta perdido dentro del sitio como se muestra en el Cuadro Nº 5. Cuadro nº 5 Rejilla. Fuente: Diseño de Páginas web, Mc Graw Hill osborne. Modelo por Jerarquías La estructura hipertextual más común en la web es la jerárquica, o en árbol. Aunque esta estructura no puede proporcionar la estructura espacial de una rejilla o la predecibilidad y control de una estructura lineal, la estructura jerárquica es muy importante porque puede modificarse para esconder o mostrar tanta información como se desee. Esta estructura comienza con una página raíz que, frecuentemente, es la página principal del sitio o sección. La página principal o raíz de un sitio con estructura en árbol sirve como pagina <<de referencia>> y, como tal, con frecuencia, su aspecto es muy diferente del de las otras páginas del sitio. Las páginas de referencia del sitio son clave para una exploración con éxito. Dentro de la estructura jerárquica encontramos: Árboles Estrechos: un árbol estrecho ofrece solamente unas pocas opciones, pero pueden ser necesarios muchos clic para alcanzar el destino

41 48 final; en esta organización predomina la profundidad sobre la anchura como se muestra en el Cuadro Nº 6. Cuadro nº 6 Árboles estrechos. Fuente: Diseño de Páginas web, Mc Graw Hill osborne. Árboles Anchos: un árbol ancho o jerarquía ancha se basa en una amplia gama de opciones. Su desventaja principal es que puede presentar demasiadas opciones porque sus páginas contienen numerosas posibilidades de elección como se muestra en el Cuadro Nº 7. Cuadro nº 7 Árboles anchos. Fuente: Diseño de Páginas web, Mc Graw Hill osborne. Árboles Web: la realidad de la web es que las estructuras jerárquicas puras típicas se utilizan muy poco. En un árbol perfecto no existen vínculos cruzados y, para alcanzar otras partes del árbol, es necesario retroceder. Como ejemplo se muestran en los cuadros nº 8 y 9, correspondientes a estructura jerárquica sencilla y estructura jerárquica con vínculos de retroceso. Cuadro nº 8

42 49 PÁGINA PRINCIPAL ACERCA DE PRODUCTOS Historia Robots NOTICIA S CONTACTO Publicación de prensa 1 Publicación de prensa 2 Biografías Butler Publicación de prensa 3 Entrenador Tom PSVS Jim Estructura jerárquica sencilla. Fuente: Diseño de Páginas web, Mc Graw Hill osborne. Modelo en Tela de Araña (Web) La estructura de un sitio en el que cada una de sus páginas estas vinculadas a todas las demás se denomina malla completa. Como ejemplo de una estructura en malla completa para un sitio con cinco páginas se muestra en el Cuadro Nº 10 Cuadro nº 10 PÁGINA PRINCIP AL Estructura en tela de araña. Fuente: Diseño de Páginas web, Mc Graw Hill osborne

43 50 Organización del sitio puede no encajar fácilmente en ninguna de las formas más estructuradas, aunque algunos podrán argumentar que la confusa estructura web pura puede hacer que el usuario no se concentre y hace difícil que los participantes se formen un plano mental del sitio. A continuación mencionamos un conjunto de conceptos utilizados en la internet para el diseño Web: Macromedia Dreamweaver 8: es un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente el código HTML como si prefiere trabajar en un entorno de edición visual, Dreamweaver le proporciona útiles herramientas que mejorarán su experiencia de creación Web. Las funciones de edición visual de Dreamweaver permiten crear páginas de forma rápida, sin escribir una sola línea de código. No obstante, si prefiere crear el código manualmente, Dreamweaver también incluye numerosas herramientas y funciones relacionadas con la codificación. Además, Dreamweaver le ayuda a crear aplicaciones Web dinámicas basadas en bases de datos empleando lenguajes de servidor como ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP y PHP. Macromedia Fireworks 8: es la solución perfecta para diseñar y producir elementos gráficos para la web. Se trata del primer entorno de producción que afronta con éxito los grandes retos de los diseñadores y desarrolladores de gráficos web. Fireworks puede utilizarse para crear, editar y animar gráficos web, añadir interactividad avanzada y optimizar imágenes en entornos profesionales. En Fireworks es posible crear y modificar imágenes vectoriales y de mapa de bits en una sola aplicación. Todo es modificable en

44 51 todo momento. Y el flujo de trabajo puede automatizarse para satisfacer las necesidades de cambio y actualización que de otra forma exigirían una enorme dedicación. Fireworks se integra con otros productos de Macromedia, como Dreamweaver, Flash, Free Hand y Director, y con otros editores HTML y aplicaciones gráficas de uso frecuente para ofrecer una solución web global. Los elementos gráficos de Fireworks pueden exportarse fácilmente con código HTML y Java Script adaptado al editor de HTML que se utilice. Macromedia Flash 8: es la herramienta estándar de edición profesional para la creación de publicaciones Web de gran impacto. Tanto si crea logotipos animados, controles de navegación de sitios Web, animaciones de gran formato, o aplicaciones Web o sitios Web completos usando Flash, descubrirá que por su capacidad y flexibilidad, Flash es el medio ideal para desarrollar su propia creatividad. APACHE: (Acrónimo de "a patchy server"). Servidor web de distribución libre y de código abierto, siendo el más popular del mundo desde abril de 1996 es el servidor de páginas web. Un servidor de páginas web es un programa que permite acceder a páginas web alojadas en un ordenador. Es el más utilizado seguido de Microsoft Information Services. Nosotros vamos a emplear el servidor HTTPD de Apache por múltiples razones como disponibilidad, facilidad de instalación, pocos recursos necesarios, precio, disponibilidad del código fuente, MySQL: es un gestor de bases de datos SQL (Structured Query Language). Es una implementación Cliente-Servidor que consta de un servidor y diferentes clientes (programas/librerías).podemos agregar, acceder, y procesar datos grabados en una base de datos. Actualmente el gestor de

45 52 base de datos juega un rol central en la informática, como única utilidad, o como parte de otra aplicación. Es un software de código abierto esto quiere decir que es accesible para cualquiera, para usarlo o modificarlo. Podemos descargar MySQL desde Internet y usarlo sin pagar nada, de esta manera cualquiera puede inclinarse a estudiar el código fuente y cambiarlo para adecuarlo a sus necesidades. PHP: (acrónimo de PHP: Hypertext Preprocessor ), PHP es un lenguaje de script incrustado dentro del HTML. La mayor parte de su sintaxis sido tomada de C, Java y Perl con algunas características especificas de si mismo. La meta del lenguaje es permitir rápidamente a los desarrolladores la generación dinámica de paginas. Además PHP es un lenguaje de propósito general. Es normalmente usado como un lenguaje de script embebido en HTML para su uso en la web, pero puede también puede usarse como un lenguaje de script para shell o hasta como un lenguaje para escribir aplicaciones con ventanas, con PHP-GTK. phpmyadmin: es una herramienta que permite administrar bases de datos MySQL (un popular gestor de bases de datos) empleando un navegador, tanto para administrarla local como remotamente. phpmyadmin permite crear o eliminar bases de datos; crear, eliminar o alterar tablas; eliminar, editar o agregar campos; ejecutar consultas SQL, etc. algunas de la Características de phpmyadmin más relevantes son: Multiplataforma, Multilenguaje (más de 50),Licencia GPL, está escrito en PHP. Por lo que gracias a esta sencilla y potente herramienta, podemos administrar nuestro servidor MySQL de forma rápida, eficaz y cómoda, desde páginas web que nos presentan todas las opciones que precisamos para mantener y gestionar nuestras bases de datos y tablas.

46 53 FileZilla: es una aplicación para la transferencia de archivos por FTP. Es una aplicación gratuita y de código abierto, que comenzó como un proyecto en una clase de computación en enero de Fue iniciado por Tim Kosee junto con dos compañeros más. Permite transferir archivos desde una computadora local, hacia uno o más servidores FTP (y viceversa) de forma sencilla. A partir de su versión , FileZilla utiliza internamente Unicode, y por lo tanto no se ejecuta en Windows 9x ni ME. Permite transferencia también utilizan protocolos HTTPS, SSH, y FTPS.Es uno de los clientes FTP más utilizados junto con WS_FTP y CuteFTP. HTML: acrónimo inglés de HyperText Markup Language (lenguaje de marcas hipertextuales), lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas Web. Hiperenlace: (también llamado enlace, vínculo, hipervínculo o liga) es un elemento de un documento electrónico que hace referencia a otro recurso, por ejemplo, otro documento o un punto específico del mismo o de otro documento. Código fuente: es un conjunto de líneas que conforman un bloque de texto, escrito según las reglas sintácticas de algún lenguaje de programación destinado a ser legible por humanos. Navegabilidad: es la facilidad con la que el usuario puede desplazarse por todas las páginas que componen un sitio Web, y ello es posible gracias al conjunto de recursos y estrategias de navegación diseñados para conseguir

47 54 un resultado óptimo de localización de la información y de orientación para el usuario. Interactividad: es la relación que se establece entre los seres humanos y las máquinas, esto es, el método por el cual un usuario se comunica con el ordenador, sea local o remoto. Mapas sensibles: son imágenes que presentan múltiples enlaces según la zona donde se sitúe el cursor. Programa: es la unión de una secuencia de instrucciones que una computadora puede interpretar y ejecutar, para ello se usan lenguajes de programación que sirven para programar la secuencia de instrucciones requerida. Formato: es lo que permite a una aplicación interpretar los datos crudos en un archivo. En otras palabras, un formato es un modo de representación de estos datos. Interfaz gráfica de usuario: es un método para facilitar la interacción del usuario con el ordenador o la computadora a través de la utilización de un conjunto de imágenes y objetos pictóricos (iconos y ventanas) además de texto. HTTP: Protocolo de transferencia de hipertexto, (HyperText Transfer Protocol) es el protocolo usado en cada transacción de la Web (WWW). Hipertexto: es el contenido de las páginas Web, y el protocolo de transferencia es el sistema mediante el cual se envían las peticiones de acceso a una página y la respuesta con el contenido.

48 55 Vínculo: es una conexión desde un recurso Web a otro. Aunque es un concepto simple, el vínculo ha sido una de las principales fuerzas que ha hecho posible el éxito de la Web. Script: en el lado del cliente es un programa que puede acompañar a un documento HTML o que puede estar incluido en él. El programa se ejecuta en la máquina del cliente cuando se carga el documento, o en algún otro instante, como por ejemplo cuando se activa un vínculo. Castellanos, (2007). Glosario de Términos. Extraído el 25 de noviembre de 2007.Disponible...en:

49 56 CAPÍTULO III DISEÑO TECNOLÓGICO Descripción de Diseño Tecnológico Tipo de Investigación La realización de un proyecto o tesis de grado incluye la exploración en diferentes tipos de investigación, las técnicas, instrumentos y los procedimientos que han sido utilizados para llevar a cabo la realización del trabajo especial de grado. Es por ello que es preciso realizar una revisión de la información necesaria, que permita plasmar un análisis lógico del tema y de esta manera lograr la solución del problema. Para el diseño y desarrollo del sitio web del Liceo Bolivariano Vicente Campo Elías de la población de Tucaní, consideramos los siguientes tipos de investigación: Tecnológica: se considera que en la investigación se utilizaran herramientas tecnológicas (hardware y software), para el diseño del sitio web. Documental o Bibliográfica: como su nombre lo indica obedece de la información recabada de todo tipo de documentos, donde se realizo recolección de datos más relevante y factible del tema, que permitió la elección de! y delimitación del tema investigado, en libros, la web y otros trabajos realizados de sitios web. Aplicada: una investigación es aplicada, activa o dinámica, ya que sus resultados pueden aplicarse de inmediato en la solución del problema, más que la sobre formulación de teoría. Concierne a un grupo particular más bien que a todo en general, es decir consiste en el estudio y aplicación de la

50 57 investigación a problemas concretos, se dirige a una aplicación inmediata y no al desarrollo de teorías. De acuerdo con esta definición de la investigación aplicada, podemos decir que hemos recolectado información concisa y detallada del Liceo Bolivariano Vicente Campo Elías, proveniente directamente del personal docente y administrativo de esta institución, y así determinar los objetivos concretos que se proponen para el diseño del sitio web. Técnicas e Instrumentos Utilizados en la Recolección de la Información Existen diferentes herramientas y métodos que se deben utilizar para un trabajo de investigación, con la finalidad de recopilar datos necesarios que permitan obtener la información confiable y así saber las necesidades, requerimientos de la institución educativa, logrando así posibles soluciones. Para este trabajo de investigación se utilizaron métodos y técnicas para la recolección e información requerida para el diseño del sitio web, como son: la entrevista, la observación directa y el análisis documental. La Entrevista: es una conversación dirigida con propósito específico basado en un formato de preguntas y repuestas, en el cual se debe tener en cuenta el problema específico y los objetivos que se deben llevar en la entrevista. Por medio de esta técnica se logro tener información necesaria de la institución, realizando así una serie de preguntas al personal que labora en esta casa de estudio de forma abierta y directa, de esta manera logramos obtener los requerimientos del usuario y así poner en marcha el diseño del sitio web. La Observación Directa: puede definirse como el uso sistemático de nuestros sentidos en la búsqueda de los datos que se necesitan para resolver un problema de investigación; a través de esta técnica se logro

51 58 obtener información de una manera rápida pero no detallada, observando las actividades académicas y diarias del personal administrativo, docente y estudiantado de esa institución, permitiendo ver con mayor claridad el problema que se presenta. El Análisis Documental: según Reyes (2003) el análisis documental consiste en: "... evaluar la información obtenida, para lo cual debe considerarse aspectos tales como: confiabilidad de la fuente y relevancia de la información, su actualidad o vigencia y si esta es o no suficiente". Esta técnica se desarrollo al analizar la información recopilada de libros y proyectos ya realizados referentes al tema, es importante ya que permite tener bases muy firmes sobre la información concerniente a la investigación en cuestión. Metodología Aplicada Para la realización del sitio web del L.B. Vicente Campo Elías se tomo en cuenta la metodología de diseño de un sitio web propuesta por J. Mariano González Romano y J. Manuel Cordero Vaslle en su libro Diseño de páginas Web, en este modelo se seguirán una serie de fases que son necesarias para crear paginas eficientes y fáciles de utilizar, esta siguientes: 1. Definir los Objetivos del sitio. 2. Definir la estructura de a página. 3. Diseñar la interacción del usuario. 4. Diseñar la interfaz gráfica. 5. Creación de las Páginas. 6. Pruebas y evaluación de las Páginas. fases son las

52 59 1. Definir los Objetivos del sitio: A la hora de crear un sitio web es necesario, primero definir cuáles son sus objetos en nuestro caso el sitio web desarrollado es de tipo informativo dirigido a brindar información completa y actualizada de la institución, principalmente a la población estudiantil del Municipio Caracciolo Parra Olmedo. Así mismo incursionar en el mundo llamado Internet, de esta forma aumentar su matrícula estudiantil, al tener ya planteado los objetivos fue más fácil la elaboración del diseño, ya que concretamente se enfoca en las necesidades de nuestro portal web, de este modo se determinaron los contenidos del sitio; tanto en el fondo (información que se publicó) como en la forma(los tipos de medios que se utilizaron para mostrar esta información). 2. Definir la Estructura de las Páginas: La estructura de un conjunto de páginas web es muy importante, ya que una buena distribución permitirá al usuario visualizar todos los contenidos de una manera fácil y clara. En este punto de la investigación se procedió a recopilar toda la información necesaria, para después darle la estructura correcta a nuestro portal web, fue conveniente realizar un esquema sencillo en el que se dibujo un organigrama con todas las partes del sitio, distribuyendo correctamente el texto, las imágenes, los vínculos a otros documentos y otros objetos multimedia que se consideraron pertinente, de esta manera se evitaron rectificaciones necesarias, trabajo inútil y pérdida de tiempo. El tipo de estructura utilizada es una mezcla de lineal y jerárquica, que le brinda al usuario las mayores posibilidades de interacción y permite tener el contenido organizado jerárquicamente y la vez acceder a las páginas de forma lineal a través de los vínculos de siguiente y anterior.

53 2.1. Estructura del Sitio Web Página de Inicio Quiénes Somos? Docentes Historia Docentes Homenajes Misión Visión Hojas de Vida Estudiantes Admisión Eventos Calendario Escolar Galería Becados Actividades Recreativas Estructura Organizativa Modelo lineal con Jerarquía, Fuente: Diseño de Páginas web, Mc Graw Hill osborne. Tu Firma

54 3. Diseñar la Interacción con el Usuario: Al tener ya planteada la estructura de la página web fue necesario diseñar mecanismo de navegación para que el usuario pudiera desplazarse más fácilmente por la página. El diseño utilizado permite al usuario acceder a toda las páginas, para facilitar la navegación se diseñaron botones y menús emergentes utilizando para ello el potente editor grafico de Fireworks 8, posteriormente estos fueron exportados a Dreamweaver 8 que fue el editor HTML escogido para el diseño del portal. 4. Diseñar la Interfaz Grafica: En esta etapa se diseño el aspecto visual del sitio web con Fireworks; se eligió un encabezado de rectángulo redondeado y sobre el se le agrego el escudo de la institución junto con el nombre, además se trabajo con las propiedades activos-estilos, debajo de este encabezado se ubica la botonera, que se diseño con un menú emergente con enlaces a todas las páginas del sitio y en la parte inferior se sitúan estos mismos vínculos pero en formato de texto. A la izquierda de la página, se ubica una columna a la cual se le agregó banners y links hacia otras páginas, como son los de Fundacite, Gobierno en Línea, Ministerio del Poder Popular para la Educación, Infocentro. Además el color predominante en el diseño es el azul con un fondo blanco que facilita la lectura del texto al visitante y a los botones de color naranja. El tipo de fuente utilizado es la tipo Arial negro de 12 pixeles, los vínculos tienen la misma fuente de la página pero en blanco. Por último se diseñaron los elementos gráficos comunes a todas las páginas como los botones barras de navegación e imágenes de fondo.

55 62 5. Creación de las Páginas: En este punto se comenzaron a crear cada una de las páginas que conformarán el sitio web. Para el diseño, codificación y desarrollo del portal se utilizo el editor HTML de Macromedia Dreamweaver 8, en el cual se creó el sitio con la serie de páginas, con las imágenes, enlaces en texto en la parte final de cada una, además definimos la información y el lugar de la misma en cada página. Por otro lado, la aplicación Fireworks 8 sirvió para diseñar los botones y otros elementos gráficos que se utilizaron en la página principal y en las demás. Para la creación de las bases de datos, se llevo a cabo tomando en cuenta el Modelo Entidad-Relación para luego diseñar las tablas en PHP (Hypertext Preprocessor ), PHP es un lenguaje de script incrustado dentro del HTML, con la interfaz grafica de phpmyadmin el cual es una herramienta que permite administrar bases de datos MySQL (un popular gestor de bases de datos), luego se llevo a cabo la revisión de las bases de datos con el fin de localizar errores y así corrigiendo todas la irregularidades detectadas en las pruebas. Logramos ver las páginas y el funcionamiento de las bases de datos en el servidor web local (localhost) que se instalo junto con el paquete AppServ Open Project for Windows donde encontramos Apache Web Server Versión 2.2.8, PHP Script Language Versión 5.2.6, MySQL Database Versión b, phpmyadmin Database Manager Versión Pruebas y Evaluación de las Páginas: Con la ayuda del usuario final se logro llevar a cabo las pruebas y evaluación completa del sitio web antes de ser usado en internet, conociendo las

56 63 críticas de los mismos. Además de evaluar si los requerimientos y objetivos planteados fueron logrados; esto gracias al alojamiento gratis del sitio en que nos permito subir el sitio a internet a través de FileZilla el cual es una aplicación para la transferencia de archivos por FTP gratuita y de código abierto; logrando así con el objetivo de hospedar el portal web en un servidor de páginas web a fin de publicarlo en internet, cuyo dominio nos asigno

57 64 CAPITULO IV IMPLEMENTACIÓN Y PRUEBAS DEL DISEÑO TECNOLÓGICO Resultados Obtenidos Una vez obtenidos los resultados del sitio web del Liceo Bolivariano Vicente campo Elías, observamos que permite a cualquier usuario obtener información, acerca de esta institución en este sitio web podremos ver su historia, misión visión, estructura organizativa, proceso de admisión, docentes, galería, sus actividades y estos a su vez contienen otros enlaces (links) con más información en efecto estos resultados nos dan una visión general y clara de lo que es la institución. Igualmente debe señalarse que este sitio web contiene dos (02) Bases de Datos; una de ellas tiene como objetivo brindar información de los docentes que imparten clases dentro de la Institución y su función es Registrar, Modificar, Consultar y Eliminar los datos de los docentes; y la otra base de datos permite ver los comentarios dejados por los usuarios que visiten la pagina. Estructura y Descripción del Sitio La estructura de un conjunto de páginas web es muy importante, ya que una buena estructura permitirá al lector visualizar todos los contenidos de manera fácil y clara. La estructura de este sitio web se encuentra realizada de forma Lineal-Jerárquica. Este tipo de organización permite al usuario en qué lugar de la estructura se encuentra, además de saber que, conforme se adentra en la estructura obtiene información más específica y que la información más general se encuentra en los niveles superiores, por esta razón y por la gran

58 65 variedad de páginas que contiene este sitio web, presentaremos la explicación de la estructura en forma de módulos, tomando siempre como base la pagina principal (index.html) y sus respectivas conexiones. Como sabemos la pagina principal es la más importante es por ello que debemos hacer referencia, ya que es la primera impresión que causa el usuario, en cuanto al diseño a los colores, al tipo de información que contiene y los diferentes enlace de información en esta página podremos ver Quiénes Somos?, Misión Visión, Estructura Organizativa, Docentes, Homenajes, Hoja de Vida, Calendario Escolar, Estudiantes, Becados, Proceso de Admisión y tu Firma; además encontramos una breve reseña histórica de quien fue Vicente Campo Elías y a su vez los enlaces de textos en la parten inferior de la pagina. Página 1. (Página Principal).

59 66 Página 2. Botón Quiénes Somos? Al hacer click en este botón podrás encontrar información detallada de la historia, Misión Visión, como también su Estructura Organizativa de la Institución y como se encuentra constituida. Historia:

60 67 Misión Visión: Estructura Organizativa:

61 68 Página 3. Botón Docentes: En esta página se puede conocer las especialidades de los docentes que imparten clases en la institución y homenajes a los docentes destacados, como también podrás encontrar en la página principal un enlace con usuario y contraseña para ingresar a la base de datos de los docentes, con el cual se ingresa a regístrate, una pantalla donde permite registrar tus datos actualizados, asimismo hay una serie de comandos que acceden a crear nuevo registro, modificar registro, eliminar registro y consultar registro. Regístrate, Crea o Actualiza tus Datos:

62 69 Ingresa tus Datos: Aquí muestra si los datos del Docente fueron Registrados:

63 70 Modifica tu Registro: Consulta o Modifica un Registro:

64 71 Esta pantalla muestra si el registro fue Actualizado: Eliminar un Registro:

65 72 En esta pantalla permite Eliminar un docente registrado: Aquí te permite visualizar si el Registro fue borrado:

66 73 Mientras que esta página nos permite conocer los docentes de la institución a través de su Hoja de Vida:

67 74 Página 4. Botón Estudiantes: Esta página permite observar el Calendario Escolar, como también podrás ver todos los estudiantes becados. Calendario Escolar:

68 75 Becados:

69 76 Página 5. Botón Admisión En esta página permite ver al usuario el periodo de Inscripciones como también los requisitos para ingresar a la institución. Admisión: Página 6. Botón Eventos: En esta página podrás observar la galería de fotos de los eventos realizados a lo largo del año escolar, como los cierre de proyectos, la semana aniversario entre otros, que se realizan en el Liceo Bolivariano Vicente Campo Elías a lo largo del año escolar.

70 77 Galería:

71 78 Página 7. Botón Tu Firma En esta pantalla le permitirá al visitante de este sitio web, dejar su comentario el cual será almacenado exitosamente en la base de datos. Deja tu Comentario: Tus datos fueron almacenados con éxito: