DISEÑO 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

2

TABLA DE CONTENIDO

INTRODUCCION _________________________________________________________________ 3

OBJETIVOS _____________________________________________________________________ 4

DESARROLLO DE LA ACTIVIDAD ____________________________________________________ 5

a) Conceptualización 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) Extensión del dominio (org. Com. Gov edu.) u otras que pueda tener el sitio. __________________ 7

h) Tipo de lenguajes usados para la construcción del sitio (HTML, PHP, JSP, CSS) u otros que pueda usar

en la construcción del Sitio Web. ________________________________________________________ 7

i) Definir si su proyecto requiere una conexión a base de datos y definir el tipo de DBMS que usara para

el proyecto. _________________________________________________________________________ 7

j) Definir si el proyecto establece la configuración 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 parámetros del Servicio de Hosting y Dominio se contratarían para el proyecto, la

respuesta se debe sustentar con la siguiente información: ____________________________________ 8

l) Definir la paleta o combinación de Colores, los tipos y estilos de fuentes y los posibles estilos que a

nivel general define el proyecto para la página principal o Index del Sitio Web. ___________________ 9

m) Definir los ítems de menú, su ubicación en la página principal y subpáginas 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 algún tipo de discapacidad física _____________________________________________________ 12

p) Definir si se deben establecer elementos de algunas de las fases propias de la política Gobierno en

línea del Mintic, para ser implementadas en el Sitio Web. ___________________________________ 12

q) Por último se definir un presupuesto estimado para el desarrollo y ejecución del proyecto de diseño

del Sitio Web propuesto. ______________________________________________________________ 13

CONCLUSIONES ________________________________________________________________ 14

BIBLIOGRAFIA _________________________________________________________________ 15

3

INTRODUCCION

Este documento demuestra el trabajo realizado en el examen final para el proyecto del curso diseño de sitios web. El proyecto consiste en el desarrollo del sitio web de la escuela Fanny Hartmann, sede del Colegio Institución Educativa Técnica Isidro Parra, situada en el municipio del Líbano, Tolima. El fin de la creación del sitio es dar una información completa sobre la escuela y los servicios que ofrece.

La web tendrá información que hace referencia a la localización, sus alumnos, profesores, directivos y proyecto pedagógico.

La pagina contara con diferentes tipos de usuarios, estarán los usuario que no están registrados, estos son aquellos que solo visitaran la pagina para obtener información sobre la escuela y estarán los usuarios registrados, ellos podrán acceder a una mayor cantidad de información de la sede, dentro de los usuarios registrados están los usuarios alumnos, usuarios padres y usuarios profesores, ellos podrán ver la lista de alumnos y docentes, así como también 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.

4

OBJETIVOS

Apropiar las diferentes competencias establecidas por el curso diseño de sitios web, las cuales son fundamentales y necesarias para la realización del proyecto en forma ordenada y eficaz, el cual se basa en el diseño de un sitio para la escuela Fanny Hartmann sede de la Institución Educativa Técnica Isidro Parra.

5

DESARROLLO DE LA ACTIVIDAD

a) Conceptualización del problema.

El problema planteado es el desarrollo del sitio web de la escuela, pues la sede no cuenta con ningún espacio de forma virtual, que pueda dar a conocer las instalaciones de la escuela, un calendario de eventos o la información pertinente sobre cada estudiante o directivo. La funcionalidad del proyecto debería ser:

- Mostrar la información 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 Diseñar e implementar el sitio web para dar a conocer el proceso de formación y capacitación en la escuela Fanny Hartmann sede de la Institución Educativa Técnica Isidro Parra.

OBJETIVOS ESPECIFICOS

- Analizar e identificar las herramientas y requisitos para la implementación del sitio

web.

- Crear un boceto del sitio web utilizando la herramienta de Dreamweaver para tener

una idea más clara de cómo se visualiza el sitio web.

- Implementar el diseño del sitio web en internet para dar a conocer las

instalaciones, servicios, información de contacto y proyectos pedagógicos.

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, además de buscar las características indicadas por el cliente pues podemos dar

muestra del trabajo que se está realizando para que nos den su valoración.

d) Definir el tipo de usuarios para el cual estará creado el sitio.

Según el usuario que se encuentre conectado así mismo la página les proporcionara

diferentes funciones.

6

Usuario Anónimo

La página mostrara un par de cajas de texto, donde el usuario ha de colocar el nombre de

usuario y su contraseña para autenticarse de esta forma podrá ingresar a funciones más

avanzadas de la pagina.

Usuario Registrado

La página muestra un botón para que el usuario cierre sesión, cuando se pulse en él nos

enviara de nuevo a la página 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 (día 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 justificación

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

opción de seleccionar una asignatura y un estudiante para colocarle su respectiva

nota.

- Lista las asignaturas impartidas por el profesor y da la opción 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 opción de modificar los datos de usuario.

- Tendrá la opción de modificar los datos de las asignaturas.

7

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 jerárquica, pues se acomoda más a las exigencias del usuario, además 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) Extensión del dominio (org. Com. Gov edu.) u otras que pueda tener el sitio.

Al tratarse de una entidad educativa la cual promueve procesos pedagógicos de formación a estudiante y profesores, así como todos los sitios web de instituciones educativas, universidades o colegios la extensión de dominio que se utilizara es .edu y por tratarse de localización se utilizara .co (Colombia).

h) Tipo de lenguajes usados para la construcción del sitio (HTML, PHP, JSP, CSS) u

otros que pueda usar en la construcción del Sitio Web.

Para este proyecto utilizaremos los lenguajes HTML, CSS y Javascript, HTML nos proporcionara el esqueleto de cada página, CSS nos ayudara a ajustar la presentación en el navegador dándole una mejor apariencia sin modificar el código 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 programación en el servidor y MySQL como base de datos de apoyo.

i) Definir si su proyecto requiere una conexión 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 información 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 educación y una mejor calidad de servicio a los usuarios. Datos a que se necesitan almacenar: administrador

alumno

alumno_asignatura

asignatura

falta_asistencia

horario

curso

8

nota

profesor

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

j) Definir si el proyecto establece la configuración 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á diseñado para usuarios de una escuela donde la educación llega hasta el grado quinto de primaria y los estudiantes no sobrepasan los 12 años de edad y que algunos de sus padres se les dificulta el uso de la tecnología, el sitio no contara al momento de ingresar con la opción de correo, de esta forma para poder acceder, los usuarios solo necesitaran colocar el nombre de estudiante o profesor y como contraseña el numero de documento de identidad.

k) Definir los parámetros del Servicio de Hosting y Dominio se contratarían para el

proyecto, la respuesta se debe sustentar con la siguiente información:

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

9

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 combinación de Colores, los tipos y estilos de fuentes y los

posibles estilos que a nivel general define el proyecto para la página 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, tamaño 14, color verde por ser así el color de la institución. Para los botones se utilizara el mismo tipo de fuente y mismo tamaño de letra pero con

color negro y fondo color blanco.

El resto de texto de la página seguirá contando con el mismo tipo de fuente, un tamaño de

14 para los títulos y de 12 para los párrafos, el color a utilizar será negro.

m) Definir los ítems de menú, su ubicación en la página principal y subpáginas del

Sitio Web y los contenidos generales que tendrá el sitio Web para los visitantes.

La página de principal contara en la parte superior izquierda con la información 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 información de contacto con la institución.

10

11

12

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 algún producto o servicio, el valor agregado que puede ofrecer el sitio web, es dar a los usuarios una información 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 algún tipo de discapacidad física.

Es verdad que muchas personas tienen acceso a internet y dentro de ellas se encuentran las personas con algún tipo de discapacidad visual, motriz, auditiva, cognitiva, neurológico, 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. Asegúrese de que los textos y gráficos son comprensibles cuando se vean sin

color. Utilice marcadores y hojas de estilo y hágalo 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. Asegúrese de que las páginas son accesibles incluso con navegadores antiguos,

accesos lentos o incluso cuando se está desconectado. Asegúrese de que las páginas que se mueven puedan ser detenidos o parados. Asegure que la interfaz de usuario sigue los principios de un diseño accesible:

funcionalidad de acceso independiente del dispositivo, teclado operable, voz automática, etc.

Utilice características que permitan la activación de los elementos de la página a través de diversos dispositivos de entrada.

Proporcione información de contexto y orientativa para ayudar a los usuarios a entender páginas o elementos complejos.

Proporcione mecanismos claros de navegación Asegure que los documentos son claros y simples para que puedan ser más

fácilmente comprendidos.

p) Definir si se deben establecer elementos de algunas de las fases propias de la

política Gobierno en línea del Mintic, para ser implementadas en el Sitio Web.

Proponer las políticas de administración, mantenimiento y desarrollo de los dominios de Internet bajo los códigos país correspondientes a Colombia.

13

Liderar procesos de investigación que permitan identificar tecnologías de información innovadora y emergente a nivel mundial y evaluar la viabilidad de su adopción en la industria de Tecnologías de la Información Nacional.

Promover y facilitar la competencia, calidad de servicios y protección de los usuarios en el Sector en materia de Tecnologías de la Información contando con la participación de los ciudadanos.

Evaluar la viabilidad técnica y presupuestal de los proyectos de Tecnologías de la Información de acuerdo con los lineamientos dados por el Viceministerio de Tecnologías de la Información.

q) Por último se definir un presupuesto estimado para el desarrollo y ejecución del

proyecto de diseño 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 COSTE

Hosting, registro de dominio anual $ 129.000

Creación sitio web $ 500.000

Administración anual $ 1.250.000

Total $ 1.879.000

14

CONCLUSIONES

Durante la realización del proyecto pude comprobar la importancia de los conocimientos adquiridos en el transcurso del curso diseño de sitios web. La realización 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 específicos dados para la pagina, así como el cumplimento de plazos específicos para la entrega del proyecto.

15

BIBLIOGRAFIA

- Modulo diseño de sitios web. Jorge Eduardo Salazar Zúñiga, 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-sitio-

web.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/