INSTITUTO POLITCNICO NACIONAL

CENTRO DE ESTUDIOS CIENTIFICOS Y

TECNOLOGICOS No. 3
ESTANISLAO RAMREZ RUIZ




INFORME TECNICO DESARROLLADO
DURANTE LA OPCION CURRICULAR
PROYECTO INFORMATICO


TUTORIAL WEB DE LA UNIDAD DE APRENDIZAJE INGLES I
PRACTICAS

TESINA
QUE PARA OBTENER EL TTULO DE:
TCNICO EN COMPUTACIN

PRESENTAN:
LPEZ MARTNEZ ELITZABETH MONSERRAT
MORA MARTNEZ CAROLINA YANET
PREZ ARTEAGA GABRIELA ALEJANDRA
PREZ BRAVO RICARDO


ASESOR:
LIC. GABRIELA OROZCO MAGALLON
ECATEPEC DE MORELOS, A JUNIO DE 2014.

ndice...................................................................................................i
Dedicatoria
Agradecimientos
Introduccin
Planteamiento del Problema
Objetivos
Justificacin
Alcances y Limitaciones

Capitulo I. Marco Terico
1.1 Antecedentes Histricos del Proyecto
1.2 Conceptos Tericos
1.2.1 MySQL
1.2.2 JavaScript
1.2.3 Multimedia
1.2.4 HTML
1.2.5 HTML5
1.2.6 Dreamweaver
1.2.7 PHP
1.2.8 Flash
1.2.9 Fireworks
1.2.10 Photoshop
1.2.11 MovieMaker
1.2.12 Metodologas de Desarrollo para Webs

Captulo II. Anlisis y Planificacin del Proyecto Web
2.1 Anlisis de la Informacin
2.1.1Caractersticas
2.1.2 Tcnicas de Recoleccin de Datos
2.1.3 Modelado y Diagramacin
2.1.3.1 Modelo de Casos de Uso
2.1.3.2 Diagrama de Flujo de Datos
2.2 Especificacin de Requerimientos del Sistema
2.2.1 Introduccin
2.2.2 Propsito
2.2.3 Alcance
2.2.4 Definiciones, Acrnimos y Abreviaturas
2.2.5 Referencias
2.2.6 Descripcin Global
2.2.6.1 Perspectivas del Producto
2.2.6.2 Concepto de Operaciones
2.2.6.3 Conceptos de Interfaz de Usuario
2.2.7 Interfaces de Hardware
2.2.8 Interfaces de Software
2.2.9 Interfaces de Comunicacin
2.2.10 Restricciones de Memoria
2.2.11 Requerimientos de Adaptacin del Sitio
2.2.12 Funciones del Producto
2.2.13 Caractersticas del Usuario
2.2.14 Restricciones
2.3 Planificacin del Proyecto del Proyecto Web
2.3.1 Calendarizacin de Actividades del Proyecto Web
2.4. Anlisis Costo-Beneficio del Proyecto Web
2.5 Anlisis de Factibilidad del Proyecto Web
2.5.1 Estudio Operativo
2.5.2 Estudio Tcnico
2.5.3 Estudio Econmico

Captulo III: Diseo y Desarrollo del Proyecto Web

3.1 Mapa de Sitio
3.2 Estructura Bsica
3.3 Pirmide de Requisitos de Diseo del Proyecto Web
3.4 Lineamientos para el Diseo de un Proyecto Web
3.5 Diseo de las Interfaces Grficas del Usuario
3.6 Codificacin del Proyecto Web
Captulo IV: Implementacin y Mantenimiento del Proyecto Web

4.1 Introduccin a la Implementacin del Proyecto Web
4.1.1 Metas de la Implementacin
4.1.2 Actividades de la Implementacin
4.1.3 Proceso de la Implementacin
4.2 Pruebas del Proyecto del Web
4.2.1 Tipos de Pruebas Web
4.3 Mantenimiento del Proyecto Web
4.3.1 Introduccin al Mantenimiento del Proyecto Web
4.3.2 Aspectos de Mantenimiento del Proyecto Web
4.3.4 Tipos de Mantenimiento del Proyecto Web
4.3.5 Tcnicas de Mantenimiento del Proyecto Web
Conclusiones ........................................................................................................
Glosario ................................................................................................................
Bibliografa ...........................................................................................................
Anexos:
Anexo A: Manual de Usuario




Dedicatorias

LPEZ MARTNEZ ELITZABETH MONSERRAT


Esta tesina va a dedicada a mis padres, ya que fueron un gran pilar para que yo terminara
mis estudios como Tcnica en Computacin, de aquellos desvelos que me acompaaban y
por todo su apoyo econmico y emocional que me ofrecieron.
De igual manera a mis amigos y compaeros que me acompaaron en mi estancia en el
plantel, ya que ellos me ayudaron cuando ms lo necesitaba, adems de ensearme los
valores que son el compaerismo, el respeto y la responsabilidad.
Tambin est dedicada para los profesores que me impartieron clase durante mi estancia,
ya que me ayudaron tanto emocional y escolarmente a dar lo mejor de m y no darme por
vencida.
Y por ltimo, est dedicada a la institucin que me acogi durante tres aos, al Instituto
Politcnico Nacional en la Vocacional nmero 3 Estanislao Ramrez Ruiz, es un orgullo
estar en esta escuela medio superior y por ensearme y aprender tantos aprendizajes
tanto escolares y sentimentales.
MORA MARTNEZ CAROLINA YANET


Este documento, as como, el proyecto en el plasmado y explicado quisiera dedicarlo
especialmente a mis padres, tener el privilegio y el honor de conservar a esas dos
personas que me forjaron un carcter lleno de liderazgo, de responsabilidad y sobre todo
de lucha me hace sentir una de las personas ms afortunada del mundo. Mis padres
ayudaron a construir de m a una pequea con ganas de salir adelante, con ganas de
superarse a s misma y al mundo da con da, gracias a ellos comprend que las cosas jams
sern fciles de conseguir y que tenemos que luchar y esforzarnos por conseguir nuestras
metas y sueos. As mismo me gustara dedicar este proyecto a mis amigos y compaeros
que durante mis trayectoria escolar estuvieron conmigo, y me dieron el privilegio y el



honor de formar parte de sus vidas, tener la fortuna de poder llamarlos amigos significa
algo muy importante para m como persona, como estudiante y sobre todo como amiga
poder trabajar con personas como ellos, conocer la responsabilidad, el respeto, el tener
que trabajar en equipo y aprender a hacerlo fue una experiencia que no cambiara por
nada, les dedico este trabajo porque para m fue un privilegio poder trabajarlo a su lado,
buscar ideas, plantear problemas, preparar todo para presentarlo, y tener tiempo para
charlar eso fue formidable.
Me gustara dedicar este proyecto tambin a todos y cada uno de los profesores de las
unidades de aprendizaje que apoyaron en la realizacin de este proyecto y a las unidades
de aprendizaje que nos dieron las bases para su buen funcionamiento y desarrollo.
Tambin quiero dedicar este proyecto a la profesora de la Unidad de Aprendizaje
Proyecto Informtico, que nos estuvo apoyando en la realizacin del mismo, siempre se
mantuvo pendiente de que el trabajo estuviese siendo bien hecho y que las aplicaciones,
as como, las actividades que nos corresponden se desarrollarn correctamente.
A si mismo quiero dedicar este trabajo al Centro de Estudios Cientficos y Tecnolgicos No.
3 Estanislao Ramrez Ruiz, por brindarme un espacio en sus instalaciones y por cada
momento que pase en el porque me llevo aprendizajes bueno y malos pero de todos y
cada uno de ellos aprend demasiado.

Prez Arteaga Gabriela Alejandra


Dedico este proyecto a todos aquellos que creyeron en m y tambin a los que no lo
hicieron, a aquellos que esperaban mis triunfos y mis fracasos. Este proyecto no hubiera
sido posible sin muchas personas que han ayudado a que mi espritu no se rinda, a que
siga adelante y vea ms all de las cosas comunes.
Primeramente, esto es para mis padres, aquellos que me han apoyado
incondicionalmente en todo, que han cuidado de m, que han forjado mis actitudes y
valores desde que tengo memoria y que me han brindado la educacin pese a cualquier
adversidad, los quiero con toda mi alma.
Esto es para mi hermano, el que me ha escuchado y aconsejado, que me muestra que no
estoy sola cuando yo lo creo as, que me ha enseado las dos caras de la vida, que me ha



traspasado sus conocimientos empricos y tericos, que me protege y apoya, sin ti nada
sera lo mismo.
Tambin se los dedico a mis amigos, esas personas que siempre estn apoyando y
siempre estn ah para rer, llorar y cantar conmigo, saben que los aprecio y valoro cada
momento que he vivido con ellos.
Se lo dedico a esa persona que ha sido mi apoyo, a aquel que me levant del suelo
cuando ca, que cada da se esfuerza por recuperar todo mi espritu mientras me muestra
la felicidad emergida de la nada, l sabe que no tendra las mismas fuerzas sin su apoyo.
Igualmente, este proyecto est dedicado a mis profesores, a todos los que han ayudado a
que me forjara, a que fuera la persona que soy ahora. Sin ellos yo no tendra los
conocimientos, las ideas y los planes a futuro que tengo ahora.
Y finalmente, quiero dedicarlo al Centro de Estudios Cientficos y Tecnolgicos #3
Estanislao Ramrez Ruiz por darme el honor de estudiar mi educacin media superior
en sus instalaciones, por darme todos los recursos para cambiar mis ideas y cambiar mi
futuro, por darme ese orgullo de ser Politcnica, por dejarme con sed de aprendizaje.

PREZ BRAVO RICARDO


Este trabajo est dedicado a todas aquellas personas que han credo en m y tambin a las
que no lo han hecho, hoy en da he demostrado que fui, soy y ser capaz de salir adelante,
s que siempre poder contar con todo el apoyo de mi familia, de mis padres, de mi
hermana, de todos mis amigos que han estado ah para cuando los necesite y s que
seguirn ah, as como yo estoy aqu.

Pero un agradecimiento ms grande va hacia mis padres, mis tos, mis primos, mis amigos,
en especial a mi Madre, Padre, Mi ta Araceli que fue una de las personas que ms ha
credo en m, as mismo mi prima Lidia Paola que me brind apoyo y mis abuelos quienes
me han apoyado sobre todas las cosas.

Para ustedes Gracias






Agradecimientos

Gracias a ellos hemos podido lograr llegar hasta donde estamos, su apoyo y fortaleza
nos han forjado un carcter de liderazgo, un carcter en donde nosotros como
alumnos, como estudiantes y como hijos hemos aprendido que realizando todo con
dedicacin y entrega podemos llegar hasta donde nos propongamos.

As mismo tambin se les agradece a los profesores que apoyaron en la realizacin de
todas y cada una de las unidades de aprendizaje que entraron dentro de dicho
proyecto implementadas dentro del mismo, ya que adems de utilizar unidades de
aprendizaje que estn dentro de la carrera Tcnico en Computacin utilizamos
unidades dentro del mbito de las materias humansticas, bsicas y tecnolgicas.

No podemos descartar a la profesora de la Unidad de Aprendizaje Proyecto
Informtico, la Lic. Gabriela Orozco Magalln, quien durante la realizacin de dicho
Proyecto siempre se mantuvo al borde de cada actividad realizada dentro del mismo,
siempre fue perseverante y respetuosa a la hora de llegar a la toma de decisiones
respetando la decisin que el equipo y el grupo en general tomara.
Agradecemos a los integrantes del mismo equipo quienes fueron perseverantes en la
realizacin del proyecto y de las actividades especficas asignadas.
El trabajo en equipo realizado fue de manera respetuosa y coordinada cada quien
realizo las actividades que le corresponden entregndolas en tiempo y forma.

Agradecemos tambin, al plantel Cecyt No 3 Estanislao Ramrez Ruiz, quien nos
recibi dentro de sus instalaciones dando y haciendo de nosotros estudiantes
perseverantes, exitosos y nos aporta las herramientas necesarias para jams
rendirnos.

No es malo soar, lo malo es dejar de hacerlo
No importa si das mucho o poco siempre y cuando hayas dado lo mejor




Introduccin
Como parte de los procesos de enseanza-aprendizaje y de acuerdo con el
Modelo Educativo Institucional, el objetivo de la Unidad de Aprendizaje Proyecto
Informtico es precisamente implementar el trabajo colaborativo e
interdisciplinario, que busca principalmente la integracin de los conocimientos y
habilidades adquiridos por los alumnos a lo largo de la Carrera de Tcnico en
Computacin.
Proyecto Informtico se genera como un plan multidisciplinario que busca crear en
los alumnos una participacin colaborativa, participativa y activa, mediante el
desarrollo de las competencias genricas y profesionales alcanzadas, lo que
constituye parte de su formacin acadmica.

El desarrollo de proyectos multidisciplinarios e integrales ha permito una
perspectiva innovadora y creativa en el rendimiento acadmico de los estudiantes,
ya mediante la aplicacin de estrategias didcticas por el mtodo de proyectos, se
ha logrado el trabajo en equipo y colaborativo en el desarrollo de las diversas
actividades que se realizan durante el proceso de creacin del proyecto.

Adems, otro punto importante, es el hecho de que los alumnos, desarrollan las
competencias en el uso de las Tecnologas de la Informacin y la Comunicacin,
como herramientas que les permitir integrar todos conocimientos adquiridos y
aplicarlos en un proyecto integrador.
Asimismo, en el mbito educativo se ha hecho presente el apoyo de herramientas
virtuales interactivas que permitan a los estudiantes introducirse en el contenido
de diversos temas relacionados con su formacin acadmica, mediante la
utilizacin de tutoriales web que puedan enriquecer sus tareas, investigaciones y
trabajos escolares, siendo de esta forma una de las formas de obtener
aprendizajes autnomos, que les permitan reforzar y ampliar sus conocimientos en
diferentes ramas del saber educativo.
En este sentido, es que el Centro de Estudios Cientficos y Tecnolgicos No. 3
Estanislao Ramrez Ruz, busca formar espacios virtuales en los que sus
estudiantes se apoyen para buscar nuevas alternativas de conocimientos de forma
dinmica, creativa y atractiva para los alumnos. En este centro de estudios se
trabaja con lo que se conoce como Politutoras de algunas de las unidades de
aprendizaje que se cursan en este plantel, pero a la fecha no cuentan con
recursos virtuales o tutoriales web que puedan auxiliar los jvenes de esta
institucin educativa en nuevos ambientes de aprendizaje va web.




En base a lo anterior, se propone la creacin de Tutoriales Web que integre los
contenidos temticos de cada una de las Unidad de Aprendizaje de los
Programas de Estudios del Cecyt No. 3, especficamente se desarrollar el
Tutorial Web Ingls I, Practicas de las Unidades Didcticas 1 y 2 con el fin
de apoyar a los estudiantes y profesores en las actividades de aprendizaje de una
forma dinmica e interactiva y que a los alumnos les resulte ms fcil de
comprender los temas que se revisan en clase y si quedan dudas, aclararlas y
reforzarlas mediante ejercicios, practicas, cuestionarios, videos, animaciones, etc.,
que les permitan robustecer los aprendizajes vistos en clase.

Para el desarrollo del proyecto se pretenden aplicar herramientas de programacin
de alto nivel que le proporcionen diseo y funcionalidad al Tutorial Web Ingls I,
Practicas de las Unidades Didcticas 1 y 2, presentando elementos de diseo
con CSS, Dreamweaver Fireworks, Photoshop, MoviMaker, JavaScript que le
den navegabilidad, animacin, video y sonido a los componentes de la pgina
web. PHP y MySQL se utilizaran para generar funcionalidad y manejo de la
informacin en el registro de los usuarios.

El contenido el proyecto contendr cuatro captulos en los que se describen las
diferentes actividades a desarrollar en el proyecto, aplicando para ello la
metodologa seleccionada y sus fases respectivas.

En el captulo uno se muestra los antecedentes y conceptos tericos que
fundamentan el desarrollo del proyecto web.

En el captulo dos se exponen la planeacin, calendarizacin, anlisis
costo/beneficio, anlisis de factibilidad, especificacin de requerimientos, el
anlisis, modelado y diagramacin del proyecto del proyecto web.

En el captulo tres se explican los elementos de diseo, mapa de sitio, estructura,
requisitos de calidad en el diseo, las interfaces graficas de usuario y la
codificacin del proyecto web.

En el captulo cuatro se plasman las actividades y procesos relacionados con las
fases de implementacin y mantenimiento del proyecto web.



Planteamiento del Problema
El Centro de Estudios Cientficos y Tecnolgicos No. 3 Estanislao Ramrez Ruz,
busca formar espacios virtuales en los que sus estudiantes se apoyen para buscar
nuevas alternativas de conocimientos de forma dinmica, creativa y atractiva para los
alumnos, a la fecha no cuentan con recursos virtuales o tutoriales web que puedan
auxiliar los jvenes de esta institucin educativa en nuevos ambientes de aprendizaje
va web.

En la actualidad algunas de las unidades de aprendizaje se trabajan con proyectos
denominados politutorias, que sirven como apoyo en el desarrollo de actividades de
aprendizaje y prcticas para los estudiantes de este centro de estudios. Sin embargo,
se hace necesario contar con ms herramientas tecnolgicas que permitan generar
espacios virtuales en los que los alumnos y docentes cuenten con materiales dinmicos
e interactivos que les apoyen en el desarrollo de los contenidos temticos, actividades
de aprendizaje, prcticas y ejercicios en las diferentes unidades de aprendizaje de los
programas de estudios del Cecyt No. 3.

















Objetivos

Objetivo General:
Desarrollar un Tutorial Web de la Unidad de Aprendizaje Ingls I, con el objeto de
apoyar el aprendizaje de los alumnos de primer semestre del Centro de Estudios
Cientficos y Tecnolgicos No. 3 Estanislao Ramrez Ruz, presentando los
contenidos temticos, actividades de aprendizaje y prcticas de las Unidades
Didcticas 1 y 2 de forma ms dinmica e interactiva.

Objetivos Especficos:

Realizar la planificacin y actividades del proyecto web.
Implementar la metodologa de desarrollo del proyecto web.
Generar el plan de recursos del proyecto web.
Elaborar la documentacin del proyecto, aplicando estndares de calidad del
proyecto web.
Crear una base de datos que permita al usuario registrarse para ingresar al
Tutorial Web.
Generar un formulario de comentarios para el usuario, mediante una base de
datos.















Justificacin
El Centro de Estudios Cientficos y Tecnolgicos No. 3 Estanislao Ramrez Ruz,
busca formar espacios virtuales en los que sus estudiantes se apoyen para buscar
nuevas alternativas de conocimientos de forma dinmica, creativa y atractiva para los
alumnos, a la fecha no cuentan con recursos virtuales o tutoriales web que puedan
auxiliar los jvenes de esta institucin educativa en nuevos ambientes de aprendizaje
va web.
En base a lo anterior, se propone la creacin de Tutoriales Web que integre los
contenidos temticos de cada una de las Unidad de Aprendizaje de los Programas de
Estudios del Cecyt No. 3, especficamente se desarrollar el Tutorial Web Ingls I,
Practicas de las Unidades Didcticas 1 y 2, con el fin de apoyar a los estudiantes y
profesores en las actividades de aprendizaje de una forma dinmica e interactiva y que
a los alumnos les resulte ms fcil de comprender los temas que se revisan en clase y
si quedan dudas, aclararlas y reforzarlas mediante ejercicios, practicas, cuestionarios,
videos, animaciones, etc., que les permitan robustecer los aprendizajes vistos en clase.

El Tutorial Web Ingls I, Practicas de las Unidades Didcticas 1 y 2, ser una
pgina que apoye el aprendizaje de los contenidos temticos de los alumnos de primer
semestre del Centro de Estudios Cientficos y Tecnolgicos No. 3, Estanislao Ramrez
Ruz, en la unidad de aprendizaje Ingls I, mediante el desarrollo de competencias
que permitan el alumno aprender de una forma dinmica e interactiva los temas,
actividades de aprendizaje, prcticas y ejercicios relacionados con cada una de las
unidades didcticas del programa de estudios correspondientes.
En el Tutorial Web Ingls I, Practicas de las Unidades Didcticas 1 y 2, pretende
ser desarrollado completamente con elementos de diseo que cumplan con los
requisitos de calidad, de acuerdo con las mtricas de documentacin que permitan que
los estudiantes se apoyen de una herramienta que les facilite el desarrollo de sus
actividades de aprendizaje y ejercicios de manera ms prctica y utilizando elementos
de animacin que generen un mejor entendimiento de los temas. El Tutorial Web se
divide en diferentes enlaces a las unidades didcticas que conforman el programa de
estudios de Ingles I.
Para el desarrollo del proyecto se pretenden aplicar herramientas de programacin de
alto nivel que le proporcionen diseo y funcionalidad al Tutorial Web Ingls I,
Practicas de las Unidades Didcticas 1 y 2, presentando elementos de diseo con
CSS, Dreamweaver Fireworks, Photoshop, MoviMaker, JavaScript que le den
navegabilidad, animacin, video y sonido a los componentes de la pgina web. PHP y



MySQL se utilizaran para generar funcionalidad y manejo de la informacin en el
registro de los usuarios.
Alcances y Limitaciones

Alcances de Software

El Tutorial Web es capaz de interactuar con el usuario mediante elementos de
video, sonido y animaciones en el idioma ingls, pero aun siendo configurable
para trabajar con otros idiomas, como pueden ser: francs, japons, italiano,
alemn o chino con solo instalar el archivo requerido que contiene el lxico para
cada idioma.

El Tutorial Web capaz de sintetizar no solamente mensajes de voz pregrabados,
sino de sintetizar cualquier texto escrito en el idioma ingls, mediante videos.


El Tutorial Web tiene la capacidad de accionarse la utilizacin de barras,
botones, cajas de texto, animaciones, los cuales son accionados mediante las
interfaces comunes del Windows (teclado y ratn).

El Tutorial Web puede incorporar un asistente de ayuda al usuario a
familiarizarse rpidamente con el programa, haciendo su utilizacin ms amena
y relajada.


El Tutorial Web proporciona contenidos dinmicos, mediante elementos
interactivos que presenta la herramienta prezzi, dndole vistosidad y un diseo
atractivo a las interfaces grficas del usuario.

Alcances de Hardware

El Tutorial Web requiere de Windows 8 como plataforma funcional.
El Tutorial Web requiere una capacidad 16 MB de RAM y 20 MB.
El Tutorial Web requiere de un servidor acorde con la capacidad de memoria y
procesamiento para su implementacin.
El Tutorial Web requiere de los dominios correspondientes para su
implementacin y funcionamiento, acordes con los recursos tcnicos solicitados.










Limitaciones

Limitaciones de Software

El Tutorial Web no sea capaz de interactuar con el usuario mediante elementos
de video, sonido y animaciones en el idioma ingls, pero aun siendo configurable
para trabajar con otros idiomas, como pueden ser: francs, japons, italiano,
alemn o chino con solo instalar el archivo requerido que contiene el lxico para
cada idioma.

El Tutorial Web no sea capaz de sintetizar no solamente mensajes de voz
pregrabados, sino de sintetizar cualquier texto escrito en el idioma ingls,
mediante videos.


El Tutorial Web no tenga la capacidad de accionarse la utilizacin de barras,
botones, cajas de texto, animaciones, los cuales son accionados mediante las
interfaces comunes del Windows (teclado y ratn).

El Tutorial Web no pueda incorporar un asistente de ayuda al usuario a
familiarizarse rpidamente con el programa, haciendo su utilizacin ms amena
y relajada.


El Tutorial Web no proporcione contenidos dinmicos, mediante elementos
interactivos que presenta la herramienta prezzi, dndole vistosidad y un diseo
atractivo a las interfaces grficas del usuario.


Limitaciones de Hardware

No contar con Windows 8 como plataforma funcional.
No contar con la capacidad de memoria y procesamientos requeridos para su
funcionamiento.
No contar con un servidor acorde con la capacidad de memoria y procesamiento
para su implementacin y funcionamiento.



No contar con los recursos econmicos para la contratacin de los dominios
correspondientes para su implementacin y funcionamiento, acordes con los
recursos tcnicos solicitados.










Captulo 1:
Marco Terico

















2.1 Antecedentes Histricos del Proyecto Web
En un principio las pginas web eran slo texto, pero a medida que ha evolucionado la
tecnologa, tanto los ordenadores como las redes de telecomunicaciones, se ha
generado nuevas formas de desarrollar la web.
La inclusin de imgenes fue la evolucin ms significativa, pero tambin debemos
mencionar el video y la animacin, o los espacios 3D, lo que aporta valores estilsticos,
de diseo y de interactividad jams imaginados antes.
El diseo de pginas web se ha desarrollado a medida que ha evolucionado Internet.
En 1992 slo haba alrededor de 50 sitios web. Las ltimas estadsticas nos
confirmaban que actualmente rondan los 8.000 millones de sitios web, a los que
diariamente se les suma a raz de 4400 por da.
Rpidamente, su importancia alcanzar las mismas cotas que la televisin o el
telfono. Datos recientes estiman que hay alrededor de 2 mil millones de pginas
colgadas y se espera que en los prximos aos llegue a los 8 mil millones, excediendo
el nmero de habitantes del planeta. Sin embargo, slo una fraccin de este nmero es
visitado habitualmente por la mayora de los usuarios (slo alrededor de 15.000 sitios
webs, el 0,4% del total).
A partir de estos datos se puede entender la necesidad de concentrar los esfuerzos
para atraer y mantener la atencin de los usuarios. Junto con un desarrollo efectivo de
la estructura web y del contenido, el diseo y el uso del color son la llave para atraer y
ser identificado, formando vnculos en el subconsciente del usuario y generar
esquemas para captar y fidelizar a nuevos visitantes.
Al mismo tiempo que la evolucin de los aparatos y de su introduccin en los hogares,
tambin ha aumentado la calidad de las transmisiones a travs internet y ha bajado su
precio. A medida que la tecnologa ha solventado estas dificultades, ya no nos
encontramos con problemas de forma sino de contenido.
As tambin, en el mbito educativo se ha hecho presente el apoyo de herramientas
virtuales interactivas que permitan a los estudiantes introducirse en el contenido de
diversos temas relacionados con su formacin acadmica, mediante la utilizacin de
tutoriales web que puedan enriquecer sus tareas, investigaciones y trabajos escolares,



siendo de esta forma una de las formas de obtener aprendizajes autnomos, que les
permitan reforzar y ampliar sus conocimientos en diferentes ramas del saber educativo.
En este sentido, es que el Centro de Estudios Cientficos y Tecnolgicos No. 3
Estanislao Ramrez Ruz, busca formar espacios virtuales en los que sus estudiantes
se apoyen para buscar nuevas alternativas de conocimientos de forma dinmica,
creativa y atractiva para los alumnos. Este centro de estudios se trabaja con lo que se
conoce como politutorias de algunas de las unidades de aprendizaje que se cursan en
este plantel, pero a la fecha no cuentan con recursos virtuales que puedan auxiliar los
jvenes de esta institucin educativa.
2.2 Fundamentos Tericos
2.2.1 MySQL
2.2.2 JavaScript
2.2.3 Multimedia
2.2.4 HTML
2.2.5 HTML5
2.2.6 Dreamweaver
2.2.7 PHP
2.2.8 Flash
2.2.9 Fireworks
2.2.10 Photoshop
2.2.11 MovieMaker
2.2.12 Metodologas de Desarrollo para Web
























Captulo 2:
Anlisis y Planeacin del Proyecto Web















2.1 Anlisis de Informacin
2.1.1 Caractersticas
Dentro de las organizaciones, el anlisis de sistema se refiere al proceso de examinar
la situacin de una empresa con el propsito de mejorarla con mtodos y
procedimientos ms adecuados.
El anlisis es el proceso de clasificar de interpretar hechos, diagnosticar problemas y
emplear la informacin para recomendar mejoras al sistema.
El anlisis de sistemas de informacin especifica qu es lo que el sistema debe hacer.
El anlisis de sistemas no es:
El estudio de una empresa para buscar procesos ya existentes con el propsito
de determinar cules deben ser automatizadas y cules deben ser manuales.
Determinar los cambios que deberan efectuarse.
El analista debe recolectar informacin para reconocer la situacin de la empresa,
luego deber modelar el sistema usando diagramas y otras herramientas.
2.1.2 Tcnicas de Recoleccin de Datos

Las tcnicas para la recoleccin de la informacin deben ser estudiadas por el analista
ya que cada una de stas presenta caractersticas especiales.

Por lo tanto, se debe elegir la tcnica ms adecuada para cada situacin. Estas
tcnicas pueden usarse de manera combinada para lograr mejores resultados.

Tcnicas:

Entrevistas.
Cuestionarios.
Observacin.
Revisin de documentos.




Cuando se est por iniciar la recoleccin de datos, el analista debe plantearse las
siguientes preguntas:

Qu se va a examinar?
A quines se examinar?
Cmo se va a examinar?
Cul es la dimensin de la muestra?

Cuando se tiene gran cantidad de elementos a examinar es recomendable seleccionar
una muestra representativa que ofrezca resultados similares a la revisin de todos los
elementos.

2.1.3 Modelado y Diagramacin

2.1.3.1 Modelo de Casos de Uso

Los analistas y diseadores utilizan con frecuencia los modelos basados en diagramas
para:

Comunicar ideas
Generar nuevas ideas y posibilidades.
Probar ideas y realizar predicciones.
Comprender las estructuras y relaciones.

Los modelos pueden ser de sistemas empresariales ya existentes o pueden ser de
nuevos sistemas informticos. Si un sistema es muy sencillo, podr ser modelado
utilizando un nico diagrama y escribiendo descripciones textuales. Para contextualizar
la funcionalidad del Tutorial Web de las Unidades Didcticas 1 y 2, se utiliza el
diagrama de Casos de Uso como se muestra en la figura 2.1.3.1.







Fig. 2.1.3.1 Diagrama de Casos de Uso Global del Tutorial Web Ingls I Practicas de las
Unidades Didcticas 1 y 2

Diagrama Casos de uso: General
1. El usuario analiza el cuestionario.
2. El usuario elige la respuesta ms convincente de acuerdo a sus
conocimientos adquiridos.
3. La aplicacin evala las respuestas contestadas contra las respuestas
correctas.
4. La aplicacin asigna un puntaje.
5. La aplicacin externa un mensaje dependiendo el puntaje obtenido.
6. La aplicacin termina las tareas.

2.1.3.2 Diagrama de Flujo de Datos Global del Proyecto Web
Para los diseadores de tcnicas de un modelado, las tcnicas debern favorecer e
imponer el uso de algunas reglas generales.

Simplicidad de representacin: slo tienen que mostrar lo que necesitan.
Consistencia interna: dentro de un grupo de diagramas.
Plenitud: mostrando todo lo que se tiene que mostrar.
Representacin jerrquica.



Ingresar a la pgina principal
Consultar Temario























Fig. 2.1.3.2 Diagrama de Actividades Global del Tutorial Web Ingls I Practicas de las Unidades
Didcticas 1 y 2
Diagrama de Flujo de Datos Generar Cuestionario
1. Se genera el cuestionario.
2. Se obtienen las respuestas del usuario.
3. Se comparan las respuestas del usuario con las respuestas correctas.
4. Se asigna un puntaje dependiendo a la comparacin.
5. Se despliega un mensaje dependiendo al puntaje.
6. Se reinicia o termina.






Fig. 2.1.3.2 Diagrama de Actividades Global del Tutorial Web Ingls I Prcticas de las Unidades
Didcticas 1 y 2









2.2 Especificacin de Requerimientos del Tutorial Web
2.2.1 Introduccin
2.2.2 Propsito
Este documento proporciona todos los requerimientos para el Tutorial Web Ingls I
Prcticas de las Unidades Didcticas 1 y 2.



2.2.3 Alcance
Este documento cubre los requerimientos para la versin 0.01 del Tutorial Web
Ingls I, Practicas de las Unidades Didcticas 1 y 2. En l se mencionarn
algunas caractersticas probables de versiones futuras. El propsito es guiar a los
desarrolladores en la seleccin de un diseo adecuado para la aplicacin a escala
completa.
2.2.4 Definiciones, Acrnimos y Abreviaturas
Acrnimo o abreviatura Definicin
Requerimientos C
Declaracin de los requerimientos de la
aplicacin expresados en forma clara para el
cliente.
Pgina Web
Es un documento o informacin electrnica
capaz de contener texto, sonido, vdeo,
programas, enlaces, imgenes, y muchas otras
cosas, adaptada para la llamada World Wide
Web, y que puede ser accedida mediante un
navegador.
Tutorial
Son sistemas instructivos de autoaprendizaje
que pretenden simular al maestro y muestran al
usuario el desarrollo de algn procedimiento o
los pasos para realizar determinada actividad.
Enlace
Hipervnculo, una referencia en un documento
de hipertexto a otro documento o recurso.
Ingls
Es una lengua germnica insular que surgi en
los reinos anglosajones de Inglaterra y se
extendi hasta el norte en lo que se convertira
en el sudeste de Escocia.
Tabla 2.2.4 Definiciones, Acrnimos y Abreviaturas

2.2.5 Referencias
Descripcin del diseo del software (DDS) para el Tutorial Web Ingls I,
Prcticas de las Unidades Didcticas 1 y 2, versin 1.0.
Plan de administracin del proyecto de software (PAPS) para el Tutorial Web
Ingls I, Prcticas de las Unidades Didcticas 1 y 2, versin 1.0.
Plan de documentacin del usuario de software (PDUS) para el Tutorial Web
Ingls I, Prcticas de las Unidades Didcticas 1 y 2, versin 1.0.
Documentacin de pruebas de software (DPS) para el Tutorial Web Ingls I,
Prcticas de las Unidades Didcticas 1 y 2, versin 1.0.
2.2.6 Descripcin Global



El Tutorial Web Ingls I, Practicas de las Unidades Didcticas 1 y 2, ser una
pgina que apoye el aprendizaje de los contenidos temticos de los alumnos de primer
semestre del Centro de Estudios Cientficos y Tecnolgicos No. 3, Estanislao Ramrez
Ruz, en la unidad de aprendizaje ingls I, mediante el desarrollo de competencias que
permitan el alumno aprender de una forma dinmica e interactiva los temas,
actividades de aprendizaje, prcticas y ejercicios relacionados con cada una de las
unidades didcticas del programa de estudios correspondientes.
En el tutorial web Ingls I, pretende ser desarrollado completamente con elementos de
diseo que cumplan con los requisitos de calidad, de acuerdo con las mtricas de
documentacin que permitan que los estudiantes se apoyen de una herramienta que
les facilite el desarrollo de sus actividades de aprendizaje y ejercicios de manera ms
prctica y utilizando elementos de animacin que generen un mejor entendimiento de
los temas. El Tutorial Web se divide en diferentes enlaces a las unidades didcticas
que conforman el programa de estudios de Ingles I.
En las primeras versiones de este Tutorial Web se identificaran la especificacin de
requerimientos del usuario y de la aplicacin web, por medio de la generacin de
prototipos evolutivos para la obtencin de requerimientos especficos.
La naturaleza del proyecto es totalmente con fines didcticos y que apoyen el trabajo
de los alumnos de forma dinmica e interactiva. Se espera que las versiones iniciales
cumplan con los elementos de animacin, video y sonido.
Con el tiempo, el tutorial web deber ser adaptable, de manera que los usuarios
puedan enviar sus actividades a los profesores de forma virtual.
2.2.6.1 Perspectiva del Producto
El Tutorial Web Ingls I, Prcticas de las Unidades Didcticas 1 y 2, pretende
satisfacer la necesidad de los alumnos del Cecyt No. 3 en la Unidad de Aprendizaje
Ingls I. Asimismo, intenta apoyar en el desarrollo de las actividades de aprendizaje
de tal forma que los estudiantes tengan un apoyo de fcil acceso y confiable en la
informacin que se presenta en el mismo.
Se desea que el Tutorial Web Ingls I, Prcticas de las Unidades Didcticas 1 y
2, sea atractivo para ambos sexos. El diseo y la documentacin del Tutorial Web, lo
harn conveniente para expandir y modificarse en un futuro de ser necesario. Se
espera que el Tutorial Web Ingls I, Prcticas de las Unidades Didcticas 1 y 2,
se use como una aplicacin innovadora y creativa y que sirva como plataforma para
otras aplicaciones del mismo contexto.
2.2.6.2 Concepto de Operaciones



Para especificar los flujos de informacin que se presentan en el Tutorial Web Ingls
I, se deben modelar mediante el desarrollo de diagrama de Flujo de Datos que
realizan las siguientes operaciones:
1. El usuario ingresa a la pgina principal.
2. El usuario consulta el contenido temtico de la pgina principal.
3. El usuario realiza las actividades de aprendizaje.
4. El usuario realiza las prcticas y ejercicios del temario.
5. El usuario sale del tutorial web.














Fig. 2.2.6.2 Diagrama de Flujo de Datos que representa las operaciones del Tutorial Web Ingls
Prcticas de las Unidades Didcticas 1 y 2

2.2.6.3 Conceptos de Interfaz de Usuario
Concepto de interfaz de usuario para establecer la funcionalidad del sistema. Al
establecer las funciones de las pginas que interactan con el Tutorial Web.
Ingresar a la pgina principal
Consultar Temario
Realizar Actividades de
Aprendizaje
Realizar prcticas y ejercicios de
las Unidades Didcticas 1 y 2

no
si
Salir



Para obtener la atencin de los usuarios es fundamental el uso de colores llamativos,
animaciones y contenido multimedia que apoyen al desarrollo de las aplicaciones, con
este fin, se realizaron durante una lluvia de ideas diversos bosquejos que ayudaran en
el diseo.






Fig. 2.2.6.3 Bosquejos de las Pantallas Preliminares del Tutorial Web Ingls I Prcticas de las
Unidades Didcticas 1 y 2!

2.2.7 Interfaces de Hardware
Ninguna

2.2.8 Interfaces de Software
NOMBRE DESCRIPCIN PROPSITO



SISTEMA
OPERATIVO
Windows XP, Windows Seven, Windows 8 El ordenador debe contar
con algn sistema
operativo que soporte
grficos pesados para la
correcta visualizacin de
todo el contenido
multimedia y la
interaccin de
cuestionarios.
NetBeans 7.3
I
Plataforma compiladora, constructora y
depuradora, se dice que es un entorno de
desarrollo integrado (IDE), modular, de base
estndar (normalizado). Se necesita de un JDK
para la compilacin de los programas ejecutados
dentro del IDE.
Compilar, construir,
depurar y ejecutar
aplicaciones hechas en
lenguaje Java.
Java Java es un lenguaje basado en C++, es un
lenguaje simple orientado a objetos, distribuido,
interpretado, slido, seguro, con arquitectura
neutra, portable, de alto desempeo, multiusos,
dinmico. Perfecto para el desarrollo de
aplicaciones.
Necesario para
programar aplicaciones.

2.2.9 Interfaces de Comunicacin
Ninguna
2.2.10 Restricciones de Memoria
A continuacin se describen las principales interfaces de la aplicacin con el Software.


Requerimientos de los Sistemas Operativos antes mencionados:
Para Windows Seven



>> Procesador de 32 bits (x86) o 64 bits (x64) a 1 gigahercio (GHz) o ms.
>>Memoria RAM de 1 gigabyte (GB) (32 bits) o memoria RAM de 2 GB (64 bits).
>>Espacio disponible en disco rgido de 16 GB (32 bits) o 20 GB (64 bits).
>>Dispositivo grfico DirectX 9 con controlador WDDM 1.0 o superior.
Para Windows 8
>>Procesador: 1 gigahertz (GHz) o superior compatible con PAE, NX y SSE2.
>>RAM: 1 gigabyte (GB) (32 bits) o 2GB (64 bits).
>>Espacio en disco duro: 16 GB (32 bits) o 20 GB (64 bits).
>>Tarjeta grfica: dispositivo grfico Microsoft DirectX 9 con controlador WDDM.

Las caractersticas mencionadas anteriormente son las necesarias para que el
ordenador en el cual se ejecuten las aplicaciones no tenga ninguna complicacin a la
hora de utilizarlas.
2.2.11 Requerimientos de Adaptacin del Sitio
Ninguna
2.2.12 Funciones del Producto
Caso de uso Iniciar formulario del Cuestionario Quiz 1
Actor: Alumno
1. El alumno analiza el cuestionario.
2. El alumno elige la respuesta ms convincente de acuerdo a sus
conocimientos adquiridos.
3. El administrador evala las respuestas contestadas contra las respuestas
correctas.
4. El sistema web asigna un puntaje.
5. El sistema web externa un mensaje dependiendo el puntaje obtenido.
6. El sistema web termina las tareas.
7. De otra manera, el sistema web permite reiniciar la plataforma para comenzar
de nuevo.





Fig. 2.2.12 Diagrama de Caso de Uso Iniciar formulario del Cuestionario para Quiz 1

Diagrama Casos de Uso: Quiz 2
1. El alumno analiza un vdeo animado con sonido.
2. El alumno analiza las diferentes preguntas sobre el video mostrado.
3. El alumno contesta las preguntas rellenando el formulario correspondiente.
4. El alumno enva sus respuestas a revisin.
5. El sistema web compara las respuestas recibidas con las correctas.
6. El sistema web asigna un puntaje y genera un mensaje.




Fig. 2.2.12.1 Diagrama de Caso de Uso Iniciar formulario del Cuestionario para Quiz 2

2.2.13 Caractersticas del Usuario
Se espera que la edad del usuario este entre 14 - 18 aos, ya que est elaborado con
el fin de ayudar a los alumnos del CECyT #3 Estanislao Ramrez Ruiz.
2.2.14 Restricciones
El Tutorial Web Ingls I de las Unidades Didcticas 1 y 2, debe operar en una PC
con Windows XP o superior, a una velocidad mnima de 100Mz. Se debe contar con
un navegador con JavaScript, debe tener controladores Java y Flash instalados para la
visualizacin de Applets y animaciones. Se recomienda altamente abrir el tutorial en
Google Chrome, Mozilla Firefox y/ Opera.
2.3 Planificacin del Proyecto
La planificacin de un proyecto, es necesaria para dar una distribucin en el tiempo de
las actividades a realizar para generar el proyecto web, as como los recursos
necesarios.
El objetivo de la planificacin de proyectos es obtener una distribucin de las
actividades en el tiempo y una utilizacin de los recursos. Cumpliendo con las
condiciones exigidas como son: Plazo de ejecucin, tecnologa a utilizar, recursos
disponibles, etc.



En concreto esto es una programacin de actividades y una gestin de recursos para
obtener un objetivo de coste cumpliendo con las condiciones exigidas por el programa.
2.3.1 Calendarizacin de Actividades
La calendarizacin de proyectos es el proceso de decidir cmo se organizar el trabajo
en un proyecto como tareas separadas, y cundo y cmo se ejecutarn dichas tareas.
Se estima el tiempo calendario para completar cada tarea, el esfuerzo requerido y
quin trabajar en las tareas identificadas. Tambin hay que estimar los recursos
necesarios para completar cada tarea.
El calendario de proyecto inicial se elabora por lo general durante la fase de arranque
del proyecto. Durante la planeacin del desarrollo, este calendario se afina y modifica.
El calendario inicial se utiliza para planear cmo se asignarn las personas al proyecto
y comprobar el avance de ste frente a los compromisos contractuales.
La calendarizacin en los proyectos implica dividir el trabajo total de un proyecto en
tareas separadas y estimar el tiempo requerido para complementar cada tarea. Por lo
general, las tareas deben durar al menos una semana, pero no ms de dos meses.
La calendarizacin de proyectos puede representarse simplemente en una tabla u hoja
de clculo que indique las tareas, el esfuerzo, la duracin esperada y las dependencias
entre las tareas.
Para el desarrollo del proyecto se elabor el calendario de actividades que se llevaran
a cabo en el proceso de creacin del Tutorial Web Ingls de las Unidades Didcticas 1
y 2.




Fig. 2.3.1 Calendarizacin de Actividades del Tutorial Web Ingls I Prcticas de las Unidades 1 y
2

2.4 Anlisis Costo/Beneficio
Un anlisis costo-beneficio tiene como objetivo mostrar cuantitativamente la relacin
que existe entre los costos de llevar a cabo las mejoras al sistema y los beneficios que
obtendr la empresa por ello.
Los costos incluyen el equipo, programas, tiempo de los analistas y
programadores, materiales, etctera.
Los beneficios se reflejan en la productividad, reduccin de costos de operacin,
incrementos de la satisfaccin de los empleados, mejorar el servicio al cliente,
etctera.
Anlisis Costo-Beneficio
COSTOS BENEFICIOS
Costos de equipo Imagen Corporativa $
Expansiones de Hardware
que tengan soporte a las
ltimas tecnologas de
diseo
Satisfaccin de usuarios $
Costos de Software Incrementos en productividad $
Programas $ Mejor servicio a usuarios $
Parches de programas $ Reduccin de costos $
Costos de Operacin $
Sueldos y Honorarios $ $
Compra de dominio para
servidor de datos (por ao)
$ $
Costos de Personal
Capacitacin $
Instalacin $
Total de Costos $ Total de Beneficios $

Fig. 2.4 Anlisis Costo-Beneficio del Tutorial Web Ingls I Prcticas de las Unidades Didcticas 1
y 2





2.5 Anlisis de Factibilidad
Se define como factibilidad a la averiguacin previa que concreta si es posible
desarrollar e implementar un proyecto o un sistema de informacin.
Esta evaluacin es la que precisa el proyecto se realizar, pospondr o en su defecto
se cancelara.
2.5.1 Estudio Operativo
La factibilidad operativa se refiere a la posibilidad de xito que podra o no llegar a
tener un proyecto a la hora de implementarlo y ser manejado por los trabajadores en la
empresa.
1. Los usuarios estn de acuerdo con el nuevo Tutorial Web?

Los usuarios si estn de acuerdo con el Tutorial, ya que consideran que es una
excelente herramienta virtual para apoyar el aprendizaje de ingls I, de forma
dinmica e interactiva.

2. Trabajaran con el Tutorial Web cuando se haya terminado e instalado?

Los usuarios consideran que si trabajarn con el proyecto propuesto, ya que
podrn reforzar su aprendizaje de forma virtual, ya que podrn practicar
mediante videos interactivos.

3. Los usuarios han participado en la planeacin y desarrollo del proyecto?

Si, desde el inicio del proyecto han estado en comunicacin constante con los
desarrolladores con el fin de generar los requerimientos del cliente y del sistema
adecuadamente.

4. Mejorar la integracin en otras reas?
Si, ya que en un futuro podrn integrar las actividades que realizan en una base
de datos para almacenar sus prcticas, ejercicios y actividades de aprendizaje.
2.5.2 Estudio Tcnico
Entre los aspectos tcnicos que se deben investigar durante el estudio de factibilidad,
se incluyen los siguientes:





1. Existe o se puede adquirir la tecnologa necesaria para cubrir las
demandas del nuevo proyecto?

Si existe la tecnologa necesaria para llevar a cabo el nuevo proyecto, se cubren
los requerimientos de hardware y software.

2. Si se desarrolla el Sistema Puede crecer con facilidad?
Se pretende que proyecto crezca paulatinamente y que sirva como plataforma
para desarrollar las unidades de aprendizaje de todos los programas de estudio
del Cecyt No. 3.
3. Existen garantas tcnicas de exactitud, confiabilidad, facilidad de acceso
y seguridad de los datos?

Si, ya que se aplican los estndares y mtricas de calidad correspondientes que
cubren las necesidades de los usuarios.

3.5.3 Estudio Econmico
Un sistema que puede desarrollarse desde el punto de vista tcnico y que adems se
utilice, si se llega a instalar, debe de ser una buena inversin para la organizacin.
Los beneficios financieros deben igualar o superar a los costos que tiene como
propsito:
1. El costo de llevar a cabo la investigacin completa del proyecto.

El costo de la investigacin y obtencin de requerimientos del proyecto se
estima aproximadamente en 25,000.

2. El costo del hardware y software para el proyecto que se est
considerando.

El costo de estos recursos se estiman aproximadamente en:

















Captulo 3:
Diseo y Desarrollo del
Proyecto Web




















El diseo de sistemas es la etapa del desarrollo donde se define cmo resolver el
problema usando un programa de computadora. La creatividad del diseador convierte
a esta etapa en un arte.
El diseo consta de dos secciones bsicas
Diseo externo
Diseo interno
El diseo externo se refiere a la seccin del programa que est expuesta y que ser, de
hecho, la manera en que el usuario conocer al sistema. El diseo externo consiste de:
Diseo de salidas
Diseo de entradas
Diseo de interfaz de usuario
Diseo de base de datos
El diseo interno se refiere a la seccin que los programadores necesitarn para poder
codificar el programa. El diseo interno consiste de:
Diseo de la estructura del sistema
Diseo de los algoritmos de los procesos

El diseador debe empezar con el diseo externo para verificar con el usuario el
cumplimiento de los requerimientos del sistema. Cuando el diseo externo ha sido
aprobado por el usuario, entonces comenzar a disear la parte interna del sistema.








3.1 Mapa de Sitio del Tutorial Web

Este es un elemento muy necesario en el desarrollo de proyectos web, ya que nos
proporciona una lista de las pginas de un sitio web accesibles por parte de los
buscadores y los usuarios. Puede ser tanto un documento en cualquier formato usado
como herramienta de planificacin para el diseo de una web como una pgina que
lista las pginas de una web (ya realizada), organizadas comnmente de forma
jerrquica. Los mapas de sitio ayudan a la navegacin por ofrecer una vista general
del contenido de un sitio de un simple vistazo.

(Insertar mapa de sitio del proyecto)

3.2 Estructura Bsica del Tutorial Web

Uno de los puntos relevantes a tener en cuenta dentro del desarrollo web, cmo se
organiza su estructura? o lo que es lo mismo, Qu tipo de jerarqua va a tener la
pgina?
Se deben concretar los contenidos que se seleccionaran en la pgina de presentacin
y a qu y cuntas pginas se vincularn, adems de especificar de qu modo se har.
Es importante realizar el dibujo del diagrama que se seguir en funcin del nmero de
pginas concretando los vnculos entre stas.
Es importante que la navegacin en la web sea rpida y sencilla intentando evitar
vnculos que lleven a pasos intermedios (tener que pasar por la pgina principal para
llegar a una pgina determinada pudiendo hacerlo directamente).













3.3 Pirmide de Requisitos de Diseo del Tutorial Web





DISEO DE
LA INTERFAZ
DISEO
ESTATICO
DISEO DE
CONTENIDO
DISEO DE NAVEGADOR
DISEO ARQUITECTONICO
DISEO DE COMPONENTES



Fig. 3.3 Pirmide de Requisitos de Calidad de Diseo del Tutorial Web Ingles I
Prcticas de las Unidades Didcticas 1 y 2

3.4 Lineamientos para el Diseo del Proyecto Web
Para el diseo web, se sugiere seguir ciertos lineamientos aprovechando herramientas
y ejemplos como gua. Entre estos tenemos:
Uso de herramientas profesionales
Estudio de otros sitios web
Uso de los recursos que ofrece la web
Examinar sitios web de diseadores profesionales
Uso de las herramientas que ha aprendido
Consulta de libros
Revisin de ejemplos de pginas web
Elaboracin de plantillas propias
Uso de plug-ins, audio y video con moderacin
Diseo con anticipacin
Dentro del diseo con anticipacin se toma en cuenta:
1. Estructura: Disear la estructura de un sitio Web es uno de los pasos ms
importante en el desarrollo de un sitio Web profesional. Hay que pensar en las
metas y objetivos. Para poder disear y mantener una estructura slida, un
administrador Web se puede beneficiar del uso de una de las tantas
herramientas de diagramacin y mapeo de sitios Web disponibles.

2. Contenido: El contenido es crtico. Se debe proporcionar algo importante a los
visitantes del sitio Web, como algunas sugerencias oportunas, informacin
importante, cualquier actividad que sean interactivas y lleve a los usuarios de un
modo de navegacin a uno interactivo.

3. Texto: El texto es importante, cada pgina Web debe tener un ttulo. Las
palabras significativas deben estar en la primera fase que aparece en la pgina
Web. Es importante la escritura clara.

4. Grficos:

Uso de formatos de imagen JPEG o GIF, el mantener el fondo de manera simple
permite asegurar que los usuarios puedan leer claramente el texto y se pueda
ver claramente sobre l.

ficos de apariencia profesional para usarlos en las pginas.

Mantener imgenes grficas pequeas el uso de marcas y botones de
navegacin tales como atrs, arriba, correo electrnico y adelante. El uso de



estas imgenes en cache mejora la velocidad con que el navegador puede
cargar una pgina.

Examinar el sitio Web en una variedad de monitores y resolucin de pantallas. Las
escenas y el texto de que tiene buena apariencia en un monitor de alta calidad podran
no tener el mismo aspecto para otros que usan equipos de baja calidad.

5. Estilo de presentacin:

Proporcionar una pantalla de entrada. La pg. de inicio debe contener varias
opciones, parecido a un men.

Diseo de botones y posicin en el lado izquierdo o en la parte superior de la
pantalla. Esos llevan a la vinculacin en otras pgina en el mismo sitio Web o a
diferentes sitos.

Mantener el nmero de grficos a un mnimo razonable. Toma ms tiempo
descargar un sitio muy cargado de grficos.


Para los ttulos el uso de fuentes grandes y con color.

Uso de imgenes y botones interesantes para los vnculos.

Uso de tablas para mejorar el diseo.

Se puede usar la misma imagen grfica en varias pginas Web. La consistencia se
mejora y as las pginas se cargaran ms rpido ya que la computadora almacena las
imgenes en cache y no debe cargarla nuevamente.

Evitar el uso excesivo de animacin, sonido y otros elementos.

6. Navegacin: Es importante que el usuario navegue con facilidad y encuentre la
informacin que desea.

La regla de los tres (3) clics: Un usuario debe poder desplazarse de la pgina en que
actualmente est a la pgina que contiene la informacin que necesita en solo tres clics
del ratn.

Promocin: Promover el sitio Web. El envi de el sitio Web a varios motores de
bsqueda ayuda en la promocin, La inclusin de palabras clave llamadas
metaetiquetas, ayuda para vincular las peticiones de bsqueda del sitio Web no se
limite solo a los motores de bsqueda.

Es importante el diseo adecuado de pantallas. Estos ayudan a la realizacin de los
objetivos globales del diseo.




Los cuatro lineamientos para el diseo de pantallas son:

1. Mantener la sencillez de la pantalla: La pantalla slo debe mostrar lo que sea
necesario para emprender una accin particular.

2. Mantener consistente la presentacin de la pantalla: Si los usuarios estn
trabajando desde los formularios impresos las pantallas deben seguir lo que se muestra
en papel. La informacin debe estar relacionada lgicamente y se debe agrupar de
forma consistente.

3. Facilitar el movimiento del usuario entre las pantallas y pginas desplegadas:
Es importante el fcil movimiento de una pgina hacia otra, como se menciona
anteriormente en la regla de los 3 clics. El usuario debe tener la sensacin que est
navegando en otra pgina nueva.

Hay 3 formas de ilusin de movimiento fsico que se desarrollan en las pantallas:

Desplazamiento usando flechas de las teclas de PgDn (Av Pg)
Ventanas emergentes sensibles al contexto
Dilogo en pantalla.

4. Crear pantallas atractivas: Las pantallas deben atraer a los usuarios hacia ellos y
deben atrapar su atencin. Esta meta se realiza con el uso de un rea bastante abierta
que incluye los campos de entrada de datos de manera que la pantalla logre una
apariencia atractiva. El uso de flujos lgicos en el diseo de las pginas desplegables y
el organizar el material permite aprovechar la forma en que trabajan las personas de
manera que puedan desenvolverse con facilidad.

3.5 Diseo de las Interfaces Grficas del Usuario
El diseo de la interfaz de usuario tiene como objetivos:
Incrementar la efectividad y eficiencia del sistema
Incrementar la productividad del usuario
El sistema es eficiente y efectivo cuando las acciones que se pueden realizar estn
expresadas en forma clara y lgica. El usuario incrementa su productividad cuando el
sistema le permite capturar un gran nmero de transacciones en forma rpida y
efectiva.
La interfaz de usuario incluye:
La navegacin dentro del sistema
La retroalimentacin a los usuarios



Las consultas a las bases de datos
Para disear una eficiente navegacin de acuerdo al tipo de usuario, el diseador
puede elegir cualquiera de los siguientes tipos de interfaz:
Mens
Pregunta y respuesta
Lenguaje natural
Llenado de formas
Lenguaje de comandos
Interfaz Grfica de Usuario
Manipulacin directa
Los mens consisten en una lista de acciones que permite al usuario realizar
cmodamente una seleccin
La interfaz de pregunta y respuesta se usa para agilizar el dilogo con el usuario.
El lenguaje natural consiste en el uso del idioma cotidiano para dar las instrucciones al
sistema como si se hablara con otra persona.
El llenado de formas consiste en presentar en la pantalla una forma tpica con la que el
usuario ya est familiarizado, pues le ser fcil comprender la informacin que se
presenta.
(Insertar pantallas del proyecto web)

3.6 Codificacin del Tutorial Web

El cdigo fuente de un programa informtico es un conjunto de lneas de texto que
son las instrucciones que debe seguir la computadora para ejecutar dicho
programa. En el cdigo fuente de un programa esta descrito por completo su
funcionamiento

Insertar cdigo de pantalla principal y dos o tres ms















Captulo 4:
Implementacin y Mantenimiento
del Proyecto














4.1 Introduccin a la Implementacin
La implementacin se refiere a programacin. Unidad se refiere a la parte ms
pequea de la implementacin a la que se dar mantenimiento por separado y
puede ser un mtodo individual o una clase.
4.1.1 Metas de la Implementacin
El propsito de la implementacin es satisfacer los requerimientos de la manera que
especifica el diseo detallado. Aunque el diseo detallado debe ser suficiente como
documento contra el que se programa, es comn que el programador examine
todos los documentos anteriores al mismo tiempo (arquitectura, requerimientos D y
requerimientos C), para ayudar a disminuir las inconsistencias entre documentos.
4.1.2 Actividades de la Implementacin
Para llevar a cabo las actividades de implementacin para el proyecto se requiere
implementar lo siguiente:
Implementar en partes

Usar diseo detallado
Aplicar estndares de cdigo
Crear modelos de implementacin

4.1.3 Proceso de la Implementacin

Para llevar a cabo el proceso de implementacin del proyecto se pretende aplicar
los siguientes pasos para definir las fases de implementacin.

Definir estndares del cdigo
Paquete de marco de trabajo
Paquete de aplicacin
Implementacin de Mtodos
Requerimientos
Diseo detallado
seudocdigo?
diagramas de flujo?
Inspeccionar unidades
Realizar pruebas de unidades








4.2 Pruebas del Proyecto del Web
Las pruebas de software, en ingls testing son los procesos que permiten verificar y
revelar la calidad de un producto de software. Son utilizadas para identificar
posibles fallos de implementacin, calidad o usabilidad de un programa de
ordenador o videojuego. Bsicamente es una fase en el desarrollo de software
consistente en probar las aplicaciones construidas.
Las pruebas de software se integran dentro de las diferentes fases del ciclo del
software dentro de la Ingeniera de software. As se ejecuta un programa y mediante
tcnicas experimentales se trata de descubrir que errores tiene.
4.2.1 Tipos de Pruebas Web
Pruebas unitarias
Pruebas funcionales
Pruebas de integracin
Pruebas de validacin
Pruebas de sistemas
Caja blanca (sistemas)
Caja negra (sistemas)
Pruebas de aceptacin
Para llevar a cabo el proceso de pruebas del proyecto, se aplicaron las pruebas de
funcionalidad, integracin y validacin del tutorial web:
Prueba de validacin se aplic con el fin de probar uno de sus
componentes durante o al final de proceso de desarrollo para determinar si
satisface los requisitos marcados por el usuario, dando como resultado que
el producto que se desarrollo es correcto, de acuerdo con los requerimientos
del proyecto.

Pruebas funcionales se aplic con la finalidad de probar las entradas y
salidas de los datos vlidos y no validos o errneos.





Pruebas de integracin se aplic con la finalidad de verificar a progresin
ordenada de pruebas que van desde los componentes o mdulos y que
culminan en el sistema completo.

Para llevar a cabo las pruebas de integracin se sigui el siguiente orden:

La forma de preparar casos
Las herramientas necesarias
El orden de codificar y probar los mdulos
El coste de la depuracin
El coste de preparacin de casos
4.3 Mantenimiento del Proyecto Web
Es una de las actividades ms comunes en la ingeniera de software, es el proceso
de mejora y optimizacin del software despus de su entrega al usuario final, as
como tambin la correccin y prevencin de los defectos.
El mantenimiento es tambin una de las fases en el ciclo de vida de desarrollo de
sistemas, que se aplica al desarrollo de software. La fase de mantenimiento es la
fase que viene despus del despliegue (implementacin) del software en el campo.
4.3.1 Introduccin al Mantenimiento del Proyecto Web
El mantenimiento de software de un producto consiste en las actividades realizadas
sobre la aplicacin una vez entregado el producto. El mantenimiento de software se
describe como: el proceso de modificar un sistema o componente de software
entregado para corregir defectos, mejorar el desempeo o algn otro atributo, o
adaptarlo al cambio del entorno.
Se sabe que el mantenimiento consume entre el 40% y 90% de los costos del ciclo
de vida de las aplicaciones.
4.3.2 Aspectos de Mantenimiento del Proyecto Web
Administracin
Difcil definir el retorno sobre la inversin
Proceso
Se requiere una amplia coordinacin para manejar el flujo de solicitudes de
mantenimiento
Tcnica
Debe cubrirse todo el impacto de los cambios



Las pruebas son muy costosas en comparacin con la utilidad de cada
cambio.
Las pruebas concretas son ideales pero costosas
Todava se requieren las pruebas de regresin



4.3.3 Proceso de Mantenimiento del Proyecto Web
Para seguir el proceso de mantenimiento del proyecto se aplic el siguiente proceso
aplicando los estndares establecidos para ello.
1. Disear el mantenimiento
1b. Asegurar la sustentabilidad
1c. Planear la transicin al mantenimiento
1d. Planear la logstica posterior a la entrega
2. Determinar el alcance del mantenimiento
todo tipo?
slo correctivo?
correctivo limitado
3. Identificar quien da mantenimiento
Interno?
Contratado?
4. Desarrollar plan de mantenimiento
Cambiar procedimiento de aprobacin de control
Apoyo tcnico
5. Estimar costos
6. Realizar mantenimiento
4.3.4 Tipos de Mantenimiento del Proyecto Web



Es necesario distinguir entre acciones de mantenimiento que reparan defectos y las
que mejoran la aplicacin, y para ello se aplican los tipos de mantenimiento:
Reparacin Correctiva
Identificar defecto y eliminarlo
}
Reparacin Adaptable
Cambios obtenidos al operar los cambios en sistema, hardware o DBMS.
Mejoras
Perfeccionamiento
Cambios que resultan de las solicitudes de los usuarios
Preventivas
Cambios hechos al software para facilitar el mantenimiento
4.3.5 Tcnicas de Mantenimiento del Proyecto Web













Cdigo de
sistema
Impacto Mximo
Diseo
detallado
Cdigo de
funcin
Cdigo de
Mdulo
Arquitectura
Especificaciones
de interfaz
Defecto de requerimientos
insertado aqu






Fig. 4.3.5 Tcnica de Impacto Mximo para Mantenimiento del Tutorial Web Ingls I Prcticas de
las Unidades Didcticas 1 y 2





















Fig. 4.3.5 Tcnica de Impacto Mnimo para Mantenimiento del Tutorial Web Ingls I Prcticas de
las Unidades Didcticas 1 y 2

Impacto Mnimo
Diseo
detallado
Cdigo de funcin
Defecto insertado aqu
Cdigo de
Mdulo
Arquitectura
Especificaciones
de interfaz
Requerimientos

Cdigo de
sistemas









Conclusiones
El desarrollo del Tutorial Web Ingls I Practicas de las Unidades 1 y 2 nos permito
aplicar las competencias genricas y profesionales adquiridas durante la Carrera de
Tcnico en Computacin, ya que cada una de las Unidades de Aprendizaje sirvi para
conformar las fases del proceso del proyecto. En l se pudo aplicar lenguajes de
programacin para el desarrollo de pginas web, modelado y diagramas de flujos de
dato, animaciones, videos, elementos de diseo, hardware y software, aplicacin de
metodologas de desarrollo de proyectos informticos, todos estos aprendizajes fueron
fundamentales para realizar el proyecto, los cuales fueron adquiridos en las diferentes
unidades de aprendizaje de la Carrera.
Asimismo, la creacin del Tutorial Web Ingls I Prcticas de las Unidades 1 y 2 ,
sirvi para llevar a cabo el proyecto Titulacin como Tcnicos en Computacin, lo cual
significa un paso muy importante en nuestra vida acadmica y en un futuro en la vida
profesional.
De la misma manera, consideramos que con la elaboracin del presente Proyecto Web
nos permiti desarrollar un trabajo multidisciplinario y colaborativo en donde se
integraron los conocimientos adquiridos en las diferentes Unidades de Aprendizaje
durante el semestre y a travs de la Carrera de Tcnico en Computacin.
Finalmente, en el trabajo documental se lograron conocimientos, habilidades, destrezas
y actitudes que nos apoyaran en nuestros estudios a Nivel Superior y en el mbito
laboral.














Glosario de Trminos





























Bibliografa

1. Pressman Roger. (2012). Ingeniera de Software Un enfoque prctico. Editorial
Mc Graw-Hill. Sptima edicin.
2. Braude J. Erik. (2010). Ingeniera de Software Una perspectiva orientada a
objetos. Editorial Alfaomega. Quinta edicin.
3. Whitten Bentley. (2012). Anlisis de Sistemas Diseo y Mtodos. Editorial Mc
Graw-Hill. Sptima edicin.



























ANEXOS




























MANUAL DE USUARIO
ANEXO A












Contenido

Introduccin
Objetivo
Requerimiento de Hardware y Software
Desarrollo
What you see is what you get
Press Start
Alphabet Soup
Conclusiones
Glosario



Introduccin

Este manual pretende ser una gua de uso de las Prcticas de las unidades I y II
respectivamente. Dentro de su contenido podremos observar los aspectos ms
esenciales para poder manejar las prcticas de una manera muy fcil dentro de la
plataforma.

Las prcticas son aplicaciones diseadas en lenguaje Java, con el objeto de
complementar los datos capturados para la teora de dichas prcticas en lo referente a
los temas que se brindaron y las rbricas correspondientes a la materia conocida como
Ingls I.

Los temas de dichas prcticas son: Expresiones de Cortesa e Informacin Personal
respectivamente, las prcticas permiten al usuario interactuar un poco acerca de los
temas que se brindan en la teora, y de esta manera permitir un mejor entendimiento de
los mismos.

La presentacin animada de este manual se encuentra disponibles en la pgina
www.ptia.260mb.org. Dicha presentacin puede ser utilizada de manera separada o
como complemento al material presentado en este manual.





























Objetivo

El objetivo de este Manual de Usuario es proporcionar al usuario elementos que le
permitan conocer la funcionalidad de las interfaces grficas del usuario de forma
detallada, explicando paso a paso cada una de las pantallas de salida y entrada,
correspondientes a las prcticas de las Unidades I y II de las Unidad de Aprendizaje
Ingls I.























Requerimientos de Hardware y Software

Hardware:
Equipo de Computo ( CPU, Monitor, Teclado, Mouse, Auriculares), Internet
Software:
Tener instalado en tu equipo de cmputo algn navegador (recomendado
Google Chrome). Si no se cuenta con este navegador solo instale Adobe Flash
Player.








































4.0 Desarrollo

Dentro de las prcticas existen distintos nombres tales como PRESS PLAY y WHAT
YOU SEE IS WHAT YOU GET. En el siguiente apartado, se explicar el
funcionamiento de cada uno de ellos.

4.1 What you see is what you get

El objetivo de este tipo de esta prctica es invitar al usuario a utilizar las
habilidades de listening (escuchar audios y entender el contenido de los
mismos), Reading (comprender las diferentes preguntas mediante la lectura de
las mismas) y vocabulary (hacer uso del vocabulario aprendido para entender
distintas preguntas).


Al abrir el cuestionario, primeramente nos aparecer una alerta donde
nos explicar la manera en la cual usaremos el cuestionario. (Figura 1.1
Alerta de Inicio)





Figura 1.1 Alerta de Inicio
La prctica se resuelve de forma
lineal, debemos observar
atentamente el video que esta al
principio de la prctica.



Posteriormente, proseguimos con
contestar las preguntas dando clic en la
correcta. Las respuestas que marques
se distinguen por un crculo negro.



No puedes marcar ms de dos
incisos en cada respuesta. Solo
existe una respuesta correcta.


Al terminar de contestar, tienes dos
opciones, obtener tu resultado o
reiniciarlo.
Al presionar Resultado del test ,
una alerta se desplejara
indicando su puntuaje total y un
mensaje para usted.


Al presionar Reiniciar test , una
alerta se desplejara indicando que el
test se volvera a iniciar eliminando
todas sus respuestas.






Press Start

El objetivo de este tipo de esta prctica es invitar al usuario a utilizar las
habilidades Reading (comprender los dilogos de los personajes) y vocabulary
(hacer uso del vocabulario aprendido para entender las conversaciones), as
mismo, el jugador tendr que hacer uso de su lgica para acertar en las
diferentes escenas que se le plantearn.






Al abrir la pgina, una alerta le
invitar a jugar.

La pgina principal se presentar
igualmente de manera lineal. Existen
distintos botones en la pantalla
principal del juego.
- Empezar (START)
- Instrucciones
(INSTRUCTIONS)
- Crditos (CREDITS)

Da clic en la que sea de tu agrado.


Al dar clic en Instructions te dar
las instrucciones para jugar.
Al dar clic en Credits te dar los
nombres de los desarrolladores del
programa.





Al presionar Start, el juego dar
comienzo.
Tendrs una escena, en la parte
inferior veras dos botones, uno rojo y
uno azul. El ROJO ser para indicar
que la conversacin escenificada es
formal y el AZUL indicar que la
conversacin escenificada es
informal.


Tu puntaje se ver en la parte
superior izquierda.

Alphabet Soup
El objetivo de este tipo de esta prctica es invitar al usuario a utilizar su
vocabulary (hacer uso del vocabulario aprendido) para encontrar las distintas
palabras escondidas en la sopa de letras.





Al iniciar la aplicacin, se te pedirn unos
permisos para utilizar Java en tu
ordenador, dar clic en EJECUTAR.
Posteriormente, la plataforma se
cargara y te pedir seleccionar un
idioma.


Al cargar, la aplicacin se ver as. Solo resta hacer clic en la primera letra donde
se encuentra la palabra y hacer otro clic al final de la palabra.

La palabra seleccionada se ensombrecer.



















Conclusiones

Esta es una aplicacin que permite establecer un recorrido global acerca de la temtica
empleada en los ejercicios de teora de la plataforma, no hay que olvidar que est
basando bajo las reglas generales establecidas para el mejor funcionamiento de cada
una de las actividades antes mencionadas, no podemos establecer conclusiones
generales acerca de este manual ya que el usuario puede comprenderlo de la manera
ms factible para l.

La aplicacin es de alta interactividad para el usuario y es por eso que permite realizar
simulaciones que puede ofrecer ideas claras sobre el sistema manejado.

Al mismo tiempo se hace un uso constante de la temtica utilizada un uso inconsciente
de la misma puede ofrecer datos que en absoluto tengan relacin con un sistema real.





















Glosario