DISEO DE SITIOS WEB PROYECTO EXAMEN FINAL

PRESENTADO POR: DARWIN ANDREY CESPEDES JIMENEZ CODIGO: 1104704493

PRESENTADO A: ING. MAURICIO PERDOMO VARGAS

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD ESCUELA DE CIENCIAS BASICAS TECNOLOGIA E INGENIERIA CERES LIBANO 2013

TABLA DE CONTENIDO
INTRODUCCION _________________________________________________________________ 3 OBJETIVOS _____________________________________________________________________ 4 DESARROLLO DE LA ACTIVIDAD ____________________________________________________ 5
a) Conceptualizacin del problema. ______________________________________________________ 5 b) Definir los objetivos del Sitio Web._____________________________________________________ 5 c) Definir el modelo de desarrollo web que se usara para el proyecto. __________________________ 5 d) Definir el tipo de usuarios para el cual estar creado el sitio. ________________________________ 5 e) Definir el tipo de estructura que tendr el Sitio Web. ______________________________________ 7 f) Nombre del dominio que registrara para el Sitio Web a crear. _______________________________ 7 g) Extensin del dominio (org. Com. Gov edu.) u otras que pueda tener el sitio. __________________ 7 h) Tipo de lenguajes usados para la construccin del sitio (HTML, PHP, JSP, CSS) u otros que pueda usar en la construccin del Sitio Web. ________________________________________________________ 7 i) Definir si su proyecto requiere una conexin a base de datos y definir el tipo de DBMS que usara para el proyecto. _________________________________________________________________________ 7 j) Definir si el proyecto establece la configuracin de cuentas de correo institucionales para el cliente, definir si se usara un cliente nativo de correo del proveedor de Hosting o si se usara un servicio de correo por dominio de proveedores como Google o Outlook. _________________________________ 8 k) Definir los parmetros del Servicio de Hosting y Dominio se contrataran para el proyecto, la respuesta se debe sustentar con la siguiente informacin: ____________________________________ 8 l) Definir la paleta o combinacin de Colores, los tipos y estilos de fuentes y los posibles estilos que a nivel general define el proyecto para la pgina principal o Index del Sitio Web. ___________________ 9 m) Definir los tems de men, su ubicacin en la pgina principal y subpginas del Sitio Web y los contenidos generales que tendr el sitio Web para los visitantes. ______________________________ 9 n) Definir un Gancho o valor agregado propuesto para el sitio? _______________________________ 12 o) Definir qu aspectos de accesibilidad web debe poseer el Sitio como apoyo a visitantes que sufran de algn tipo de discapacidad fsica _____________________________________________________ 12 p) Definir si se deben establecer elementos de algunas de las fases propias de la poltica Gobierno en lnea del Mintic, para ser implementadas en el Sitio Web. ___________________________________ 12 q) Por ltimo se definir un presupuesto estimado para el desarrollo y ejecucin del proyecto de diseo del Sitio Web propuesto. ______________________________________________________________ 13

CONCLUSIONES ________________________________________________________________ 14 BIBLIOGRAFIA _________________________________________________________________ 15

INTRODUCCION

Este documento demuestra el trabajo realizado en el examen final para el proyecto del curso diseo de sitios web. El proyecto consiste en el desarrollo del sitio web de la escuela Fanny Hartmann, sede del Colegio Institucin Educativa Tcnica Isidro Parra, situada en el municipio del Lbano, Tolima. El fin de la creacin del sitio es dar una informacin completa sobre la escuela y los servicios que ofrece. La web tendr informacin que hace referencia a la localizacin, sus alumnos, profesores, directivos y proyecto pedaggico. La pagina contara con diferentes tipos de usuarios, estarn los usuario que no estn registrados, estos son aquellos que solo visitaran la pagina para obtener informacin sobre la escuela y estarn los usuarios registrados, ellos podrn acceder a una mayor cantidad de informacin de la sede, dentro de los usuarios registrados estn los usuarios alumnos, usuarios padres y usuarios profesores, ellos podrn ver la lista de alumnos y docentes, as como tambin las respectivas notas en cada asignatura, el otro usuario corresponde al del administrador que ser el encargado de administrar la base de datos del sitio.

OBJETIVOS

Apropiar las diferentes competencias establecidas por el curso diseo de sitios web, las cuales son fundamentales y necesarias para la realizacin del proyecto en forma ordenada y eficaz, el cual se basa en el diseo de un sitio para la escuela Fanny Hartmann sede de la Institucin Educativa Tcnica Isidro Parra.

DESARROLLO DE LA ACTIVIDAD
a) Conceptualizacin del problema. El problema planteado es el desarrollo del sitio web de la escuela, pues la sede no cuenta con ningn espacio de forma virtual, que pueda dar a conocer las instalaciones de la escuela, un calendario de eventos o la informacin pertinente sobre cada estudiante o directivo. La funcionalidad del proyecto debera ser: Mostrar la informacin general de la sede. Permitir a los alumnos visualizar las materias y profesores. Permite a los profesores realizar consultas sobre los alumnos, modificar las notas y faltas de asistencia. Permite al administrador del sitio modificar el contenido de la base de datos.

b) Definir los objetivos del Sitio Web.

OBJETIVO GENERAL Disear e implementar el sitio web para dar a conocer el proceso de formacin y capacitacin en la escuela Fanny Hartmann sede de la Institucin Educativa Tcnica Isidro Parra. OBJETIVOS ESPECIFICOS Analizar e identificar las herramientas y requisitos para la implementacin del sitio web. Crear un boceto del sitio web utilizando la herramienta de Dreamweaver para tener una idea ms clara de cmo se visualiza el sitio web. Implementar el diseo del sitio web en internet para dar a conocer las instalaciones, servicios, informacin de contacto y proyectos pedaggicos.

c) Definir el modelo de desarrollo web que se usara para el proyecto. El modelo incremental ser el elegido para trabajar en este proyecto ya que nos permite trabajar en el producto central, modificando el plan anterior hasta tener el producto completo, adems de buscar las caractersticas indicadas por el cliente pues podemos dar muestra del trabajo que se est realizando para que nos den su valoracin. d) Definir el tipo de usuarios para el cual estar creado el sitio. Segn el usuario que se encuentre conectado as mismo la pgina les proporcionara diferentes funciones.

Usuario Annimo La pgina mostrara un par de cajas de texto, donde el usuario ha de colocar el nombre de usuario y su contrasea para autenticarse de esta forma podr ingresar a funciones ms avanzadas de la pagina. Usuario Registrado La pgina muestra un botn para que el usuario cierre sesin, cuando se pulse en l nos enviara de nuevo a la pgina de inicio. Dentro de los usuarios registrados tendremos diferentes tipos de usuarios los cuales son:

Usuarios alumno/padre. Muestra el grado de escolaridad al que pertenece el alumno, las materia que ve y el horario de cada materia (da de la semana, hora de inicio y hora en que termina). Muestra la lista de nombres y apellidos de alumnos que comparten clase con el alumno conectado. Muestra la lista de profesores que dan clase al alumno conectado (nombre, apellidos y materias dictadas). Muestra la lista de materias con su respectiva nota actual as como el promedio del alumno. Muestra las faltas de asistencia del alumno conectado (fecha y si tiene justificacin o no).

Usuario Profesor. Muestra el listado de materias que imparte el profesor y los nombres y apellidos de los alumnos que las reciben. Muestra el listado de asignaturas que imparte el profesor conectado, como la opcin de seleccionar una asignatura y un estudiante para colocarle su respectiva nota. Lista las asignaturas impartidas por el profesor y da la opcin de seleccionar un alumno de ellas, para modificar una falta de asistencia.

Usuario Administrador. Podr dar de alta y bajas las asignaturas. Podr dar de alta y bajas a los usuarios. Tendr la opcin de modificar los datos de usuario. Tendr la opcin de modificar los datos de las asignaturas.
6

e) Definir el tipo de estructura que tendr el Sitio Web. Para el sitio web de la escuela Fanny Hartmann utilizaremos el tipo de estructura jerrquica, pues se acomoda ms a las exigencias del usuario, adems permitir al visitante saber en qu lugar del sitio se encuentra y la facilidad de navegar con botones que ascienden o descienden por la estructura del sitio. f) Nombre del dominio que registrara para el Sitio Web a crear. El dominio para la escuela Fanny Hartmann ser www.fannyhartmann.edu.co g) Extensin del dominio (org. Com. Gov edu.) u otras que pueda tener el sitio. Al tratarse de una entidad educativa la cual promueve procesos pedaggicos de formacin a estudiante y profesores, as como todos los sitios web de instituciones educativas, universidades o colegios la extensin de dominio que se utilizara es .edu y por tratarse de localizacin se utilizara .co (Colombia). h) Tipo de lenguajes usados para la construccin del sitio (HTML, PHP, JSP, CSS) u otros que pueda usar en la construccin del Sitio Web. Para este proyecto utilizaremos los lenguajes HTML, CSS y Javascript, HTML nos proporcionara el esqueleto de cada pgina, CSS nos ayudara a ajustar la presentacin en el navegador dndole una mejor apariencia sin modificar el cdigo HTML y Javascript nos ayudara a ejecutar funciones en el cliente y hacer mas agile la pagina. Internamente la web har uso de PHP 5 para programacin en el servidor y MySQL como base de datos de apoyo.

i) Definir si su proyecto requiere una conexin a base de datos y definir el tipo de DBMS que usara para el proyecto. El proyecto contara con una base de datos que permita analizar mejor la informacin de los alumnos y profesores, con el fin de relacionarlos a los datos como nombres, materias, notas y asistencias de esta forma se llevara un mejor control de la educacin y una mejor calidad de servicio a los usuarios. Datos a que se necesitan almacenar: administrador alumno alumno_asignatura asignatura falta_asistencia horario curso
7

nota profesor El tipo de DBMS que se usara para este proyecto ser el modelo de red.

j) Definir si el proyecto establece la configuracin de cuentas de correo institucionales para el cliente, definir si se usara un cliente nativo de correo del proveedor de Hosting o si se usara un servicio de correo por dominio de proveedores como Google o Outlook. Sabemos que para poder acceder a fondo en un sitio web y tener uso de mas servicios o actividades, necesitamos registrarnos y para eso debemos hacerlo con nuestro correo, pero partiendo de que el sito ser diseado para usuarios de una escuela donde la educacin llega hasta el grado quinto de primaria y los estudiantes no sobrepasan los 12 aos de edad y que algunos de sus padres se les dificulta el uso de la tecnologa, el sitio no contara al momento de ingresar con la opcin de correo, de esta forma para poder acceder, los usuarios solo necesitaran colocar el nombre de estudiante o profesor y como contrasea el numero de documento de identidad. k) Definir los parmetros del Servicio de Hosting y Dominio se contrataran para el proyecto, la respuesta se debe sustentar con la siguiente informacin:

Nombre del Proveedor de Hosting seleccionado. CUBO Nombre del Plan de Hosting seleccionado. NARANJA Tipo de servidor (Compartido o Dedicado) Dedicado Tipo de SO del servidor (Windows o Linux) Linux Ancho de banda para transferencia mensual que ofrece el plan 10 GB Espacio de almacenamiento en servidor que ofrece el plan 5 GB

Numero de dominios y sub dominios que permite crear y gestionar el plan seleccionado Ilimitados Numero de base de datos que permite crear y gestionar en el servidor, el plan seleccionado Ilimitadas Numero de cuentas de correo que permite crear y gestionar en el servidor el plan seleccionado Ilimitadas l) Definir la paleta o combinacin de Colores, los tipos y estilos de fuentes y los posibles estilos que a nivel general define el proyecto para la pgina principal o Index del Sitio Web.

El Index contara con fondo color blanco para toda la pagina, un banner creado en flash en la parte superior, donde se mostrara fotos de eventos realizados, noticias importantes de la escuela y actividades por realizar, donde se utilizara un tipo de fuente Times New Roman, tamao 14, color verde por ser as el color de la institucin. Para los botones se utilizara el mismo tipo de fuente y mismo tamao de letra pero con color negro y fondo color blanco. El resto de texto de la pgina seguir contando con el mismo tipo de fuente, un tamao de 14 para los ttulos y de 12 para los prrafos, el color a utilizar ser negro.

m) Definir los tems de men, su ubicacin en la pgina principal y subpginas del Sitio Web y los contenidos generales que tendr el sitio Web para los visitantes. La pgina de principal contara en la parte superior izquierda con la informacin de la fecha, debajo se ubicara el banner, en la parte inferior de este se colocaran los botones con men en cascada, en la parte derecha las cajas de ingreso para los usuarios registrados y como pie de pagina la informacin de contacto con la institucin.

10

11

n) Definir un Gancho o valor agregado propuesto para el sitio? Pienso que por tratarse de una escuela y no de una empresa que distribuya o venda algn producto o servicio, el valor agregado que puede ofrecer el sitio web, es dar a los usuarios una informacin oportuna y verdadera de los sucesos de la escuela, as como brindar un tipo de multimedia que haga que el usuario se sienta agradable al navegar por la pagina. o) Definir qu aspectos de accesibilidad web debe poseer el Sitio como apoyo a visitantes que sufran de algn tipo de discapacidad fsica. Es verdad que muchas personas tienen acceso a internet y dentro de ellas se encuentran las personas con algn tipo de discapacidad visual, motriz, auditiva, cognitiva, neurolgico, habla y para lograr que el acceso al sitio web sea mejor utilizaremos las pautas de accesibilidad al contenido en la web (WCAG) que son las siguientes:

Proporcione alternativas equivalentes para el contenido visual y auditivo. Asegrese de que los textos y grficos son comprensibles cuando se vean sin color. Utilice marcadores y hojas de estilo y hgalo de tal forma que facilite la accesibilidad. Identifique siempre el idioma usado. Asegure que las tablas tienen los marcadores necesarios para transformarlas mediante navegadores accesibles y otras aplicaciones de usuario. Asegrese de que las pginas son accesibles incluso con navegadores antiguos, accesos lentos o incluso cuando se est desconectado. Asegrese de que las pginas que se mueven puedan ser detenidos o parados. Asegure que la interfaz de usuario sigue los principios de un diseo accesible: funcionalidad de acceso independiente del dispositivo, teclado operable, voz automtica, etc. Utilice caractersticas que permitan la activacin de los elementos de la pgina a travs de diversos dispositivos de entrada. Proporcione informacin de contexto y orientativa para ayudar a los usuarios a entender pginas o elementos complejos. Proporcione mecanismos claros de navegacin Asegure que los documentos son claros y simples para que puedan ser ms fcilmente comprendidos.

p) Definir si se deben establecer elementos de algunas de las fases propias de la poltica Gobierno en lnea del Mintic, para ser implementadas en el Sitio Web.

Proponer las polticas de administracin, mantenimiento y desarrollo de los dominios de Internet bajo los cdigos pas correspondientes a Colombia.

12

Liderar procesos de investigacin que permitan identificar tecnologas de informacin innovadora y emergente a nivel mundial y evaluar la viabilidad de su adopcin en la industria de Tecnologas de la Informacin Nacional. Promover y facilitar la competencia, calidad de servicios y proteccin de los usuarios en el Sector en materia de Tecnologas de la Informacin contando con la participacin de los ciudadanos. Evaluar la viabilidad tcnica y presupuestal de los proyectos de Tecnologas de la Informacin de acuerdo con los lineamientos dados por el Viceministerio de Tecnologas de la Informacin.

q) Por ltimo se definir un presupuesto estimado para el desarrollo y ejecucin del proyecto de diseo del Sitio Web propuesto.

El costo es considerado de acuerdo a las horas de trabajo que se necesitaron para realizar el proyecto as como los gastos de mantenimiento y sostenimiento de que son necesarios para el funcionamiento del sitio web.

CONCEPTO Hosting, registro de dominio anual Creacin sitio web Administracin anual Total

COSTE $ 129.000 $ 500.000 $ 1.250.000 $ 1.879.000

13

CONCLUSIONES
Durante la realizacin del proyecto pude comprobar la importancia de los conocimientos adquiridos en el transcurso del curso diseo de sitios web. La realizacin de este proyecto me ha mostrado como es el trabajo de un programador de web profesional, ya que se trata con el cliente trabajando sobre los requerimientos especficos dados para la pagina, as como el cumplimento de plazos especficos para la entrega del proyecto.

14

BIBLIOGRAFIA
Modulo diseo de sitios web. Jorge Eduardo Salazar Ziga, Orlando Puentes Andrade. http://cubo.com.co/hosting

http://www.imaginamos.com/

http://www.creacion3w.com/

http://html.hazunaweb.com/102.php

http://www.innovacionate.com/buenas-practicas/47-estructuras-de-un-sitioweb.html

http://www.smooth-step.com/diseno-web/guia

http://www.w3c.es/Prensa/2012/nota121015_wcag2pas

http://www.w3c.es/Divulgacion/GuiasBreves/Accesibilidad

http://www.slideshare.net/wilmeraman/modelo-de-diseo-web

http://www.creandotusitio.com/modelos.htm

http://www.webestilo.com/guia/estruct2.php3

http://www.spip.net/es_article2609.html

http://www.mintic.gov.co/

15