Está en la página 1de 59

UNIVERSIDAD POLITCNICA DE FRANCISCO I.

MADERO
INGENIERA EN SISTEMAS COMPUTACIONALES
DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP)
DOCUMENTO FINAL COMO REQUISITO PARA OBTENER EL GRADO DE INGENIERO EN SISTEMAS COMPUTACIONALES

PRESENTA: STEVEN PAUL GRANADOS VILLEDA CITLALLI SELENE OLVERA CANO ABIMELEC PREZ RODRGUEZ OSCAR SILVA ARTEAGA
ASESOR INDUSTRIAL: LIC. JOSEFINA CRUZ PREZ ASESOR ACADEMICO: M.T.I ADRIAN BENJAMN CARMONA MANILLA

TEPATEPEC, FRANCISCO I. MADERO, HGO., JUNIO 2013

UNIVERSIDAD POLITCNICA DE FRANCISCO I. MADERO

INGENIERA EN SISTEMAS COMPUTACIONALES


DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP)
DOCUMENTO FINAL COMO REQUISITO PARA OBTENER EL GRADO DE INGENIERO EN SISTEMAS COMPUTACIONALES

PRESENTA: STEVEN PAUL GRANADOS VILLEDA CITLALLI SELENE OLVERA CANO ABIMELEC PREZ RODRGUEZ OSCAR SILVA ARTEAGA

M.T.I ADRIN BENJAMN CARMONA MANILLA ASESOR ACADEMICO

LIC. JOSEFINA CRUZ PREZ ASESOR INDUSTRIAL

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

DEDICATORIA
.Grato es el deber para quienes aprenden y para quienes ensean cuando se pertenece a una sociedad como la nuestra, exuberante en su pluralidad de races y respetuosa del incuestionable derecho de todo ser humano de educarse.. Porque solo la superacin de nuestros ideales nos ha permitido comprender cada da ms, la difcil misin de ser padres, todos nuestros logros, estmulos y superacin se los debemos a ustedes. A nuestros amigos, porque su nimo de contribuir al estudio y prctica de este proyecto fue la base para que concretar nuestro deseo de superacin. A nuestros profesores, quienes se encargaron de compartir sus conocimientos y quienes nos condujeron de forma acertada para la elaboracin de nuestro proyecto. A nuestros hermanos quienes tuvieron la confianza de contribuir en nuestra formacin profesional y quines son y han sido el motivo de sobresalir. Porque parte esencial de este trabajo, recae en nuestros padres, hijos, hermanos, maestros y amigos, quienes encargados de fortalecer el arraigo de nuestro aprendizaje fueron motivo de nimo para concluir satisfactoriamente este primer logro de los que con seguridad seguirn estando presentes en nuestras vidas. Fueron todos ellos quienes con su disposicin incondicional estuvieron presentes a lo largo de nuestra formacin y quienes se encargaron de revertir los paradigmas que pudieran obstaculizar el desarrollo de nuestros mejores deseos. Esto ser lo mejor de su herencia, lo reconocemos y se los agradeceremos eternamente, en adelante pondremos en prctica nuestros conocimientos y el lugar que en nuestra mente ocup la prctica, ahora ser esto de ustedes, por todo el tiempo que les robamos pensando en nosotros.

Con amor agradecimiento para ustedes Generacin 2010-2013 Ingeniera en Sistemas Computacionales

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

AGRADECIMIENTO

Al finalizar un trabajo tan arduo y lleno de dificultades como el desarrollo de una tesis que te lleva a concentrar la mayor parte del mrito en el aporte que has hecho. Sin embargo, el anlisis objetivo te muestra inmediatamente que la magnitud de ese aporte hubiese sido imposible sin la participacin de personas que han facilitado las cosas para que este trabajo llegue a un feliz trmino. Por ello, es para nosotros un verdadero placer utilizar este espacio para ser justos y consecuentes con ellas, expresndoles nuestro agradecimientos. Queremos expresar nuestro gran agradecimiento a nuestros padres ya que ellos fueron un gran factor en el mbito durante nuestra carrera quienes nos impulsaron para poder culminar una ingeniera al igual que a nuestros seres queridos Finalmente, un agradecimiento a los que fueron nuestros profesores durante nuestra preparacin en la escuela por brindarnos su conocimiento apoyo y comprensin muchas gracias por todo.

ING. STEVEN PAUL GRANADOS VILLEDA ING. CITLALLI SELENE OLVERA CANO ING. ABIMELEC PREZ RODRGUEZ ING. OSCAR SILVA ARTEAGA

ii

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

RESUMEN
DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP) STEVEN PAUL GRANADOS VILLEDA CITLALLI SELENE OLVERA CANO ABIMELEC PREZ RODRGUEZ OSCAR SILVA ARTEAGA Autor UNIVERSIDAD POLITCNICA DE FRANCISCO I. MADERO M.T.I. ADRIN BENJAMN CARMONA MANILLA Asesor Acadmico DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP) El uso de las Tecnologas de la Informacin y Comunicacin (TICs) ha tenido un impacto significativo en diversos sectores y mbitos de la sociedad humana. Las cuales fungen como excelentes opciones para el aprendizaje de los estudiantes dentro de cualquier sistema educativo, pero el inapropiado manejo de estas y la falta de capacitacin para su correcto uso ha provocado dependencia y ocio en los estudiantes. Por lo tanto el rea de Informtica del CENHIES decidi crear un compendio de libros electrnicos (e-books) los cuales han sido seleccionados y autorizados por los programas educativos que rigen la institucin, los cuales se integrarn a una aplicacin informtica utilizando la tecnologa web. Esta aplicacin servir como herramienta auxiliar para facilitar el aprendizaje en los estudiantes para formar conocimientos solidos o reafirmar conocimientos previos. Palabras clave: tics, sociedad humana, sistemas educativos, libros electrnicos (e-books), aplicacin informtica, tecnologa web.

iii

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

ABSTRACT

ELABORATION OF WEB AND DESKTOP APPLICATIONS (WEB TOP). The use of Information Technology and Communication (TICs) has had a significant impact in different sectors and areas in human society, which work as excellent tools for students learning in any educational system, but the inappropriate use of them and lack of preparation for their correct use has caused dependency and idleness in students. Therefore, the computer area at CENHIES, decided to create a compilation of electronic books (e-books), which have been selected and authorized by the educational programs that govern the institution, and will be integrated to a computer application using web technology. This application will be used as a helpful tool to make students learning easy, to build solid knowledge, or reinforce previous knowledge Keywords: tics, human society, educative systems, electronic books (e-books), informative applications, web technology.

iv

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

INDICE

DEDICATORIA ............................................................................................................................. i AGRADECIMIENTO ....................................................................................................................ii RESUMEN.................................................................................................................................... iii ABSTRACT .................................................................................................................................. iv INDICE ...........................................................................................................................................v LISTA DE FIGURAS ................................................................................................................. viii ABREVIATURAS USADAS ....................................................................................................... ix 1. INTRODUCCIN .................................................................................................................... 1 1.1.1 Antecedentes ..................................................................................................................... 2 1.1.2 Situacin actual ................................................................................................................. 3 1.1.3 Misin .................................................................................................................................. 3 1.1.4 Visin................................................................................................................................... 4 1.1.5 Principios ............................................................................................................................ 4 1.1.6 Valores ................................................................................................................................ 5 1.1.7 Localizacin geogrfica .................................................................................................... 6 Figura 1 ......................................................................................................................................... 6 1.2 PLANTEAMIENTO DEL PROBLEMA ............................................................................... 7 1.3 JUSTIFICACIN ................................................................................................................... 8 1.4 OBJETIVO GENERAL ......................................................................................................... 9 1.5 OBJETIVOS ESPECFICOS .............................................................................................. 9 2.1 VISIN GENERAL ................................................................................................................... 10 2.1.1 QU ES UNA BIBLIOTECA VIRTUAL? .................................................................... 11 2.1 MARCO CONCEPTUAL.................................................................................................... 11 3. METODOLOGA ................................................................................................................... 18 3.1.1 VISIN GENERAL .......................................................................................................... 19 REQUISITOS FUNCIONALES. .............................................................................................. 19 CONSTRUCCIN DE PROTOTIPOS. .................................................................................. 20 DIAGRAMAS DE CASO DE USO. .................................................................................... 22 v

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP). Figura 2 ....................................................................................................................................... 22 Figura 3 ....................................................................................................................................... 23 3.1.2 DIAGRAMA DE PROCESO. ..................................................................................... 24 Figura 4 ....................................................................................................................................... 24 3.1.4 SINTAXIS E INTERFACES ........................................................................................... 25 Figura 5 ....................................................................................................................................... 25 Figura 6 ....................................................................................................................................... 26 Figura 7 ....................................................................................................................................... 26 Figura 8 ....................................................................................................................................... 27 Figura 9 ....................................................................................................................................... 27 Figura 10..................................................................................................................................... 28 3.1.5 MANUAL DE USUARIO ................................................................................................. 28 Figura 11..................................................................................................................................... 29 3.1.6 OPCIN DE LIBROS ..................................................................................................... 29 Figura 12..................................................................................................................................... 29 Figura 13..................................................................................................................................... 30 Figura 14..................................................................................................................................... 30 Figura 15..................................................................................................................................... 31 Figura 16..................................................................................................................................... 31 Figura 17..................................................................................................................................... 32 Figura 18..................................................................................................................................... 32 Figura 19..................................................................................................................................... 33 Figura 20..................................................................................................................................... 33 Figura 21 .................................................................................................................................. 34 4. RESULTADOS Y DISCUSIN ........................................................................................... 35 Creacin de libros digitales...................................................................................................... 35 Los libros hechos en una aplicacin web .............................................................................. 35 Diccionario rae y diccionario bilinge ..................................................................................... 35 MDULOS ................................................................................................................................. 36 LIBROS VIRTUALES................................................................................................................ 36 Figura 22..................................................................................................................................... 36 Figura 23..................................................................................................................................... 37 vi

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP). DICCIONARIO RAE Y DICCIONARIO BILINGE .............................................................. 37 Figura 24..................................................................................................................................... 37 Figura 25..................................................................................................................................... 38 CALCULADORA........................................................................................................................ 39 Figura 26..................................................................................................................................... 39 CONCLUSIONES...................................................................................................................... 41 CITAS BIBLIOGRAFCAS ....................................................................................................... 42

vii

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

LISTA DE FIGURAS
Figura1 .......................................................................................................................................... 6 Figura 2 ....................................................................................................................................... 22 Figura 3 ....................................................................................................................................... 23 Figura 4 ....................................................................................................................................... 24 Figura 5 ....................................................................................................................................... 25 Figura 6 ....................................................................................................................................... 26 Figura 7 ....................................................................................................................................... 26 Figura 8 ....................................................................................................................................... 27 Figura 9 ....................................................................................................................................... 27 Figura 10..................................................................................................................................... 28 Figura 11..................................................................................................................................... 29 Figura 12..................................................................................................................................... 29 Figura 13..................................................................................................................................... 30 Figura 14..................................................................................................................................... 30 Figura 15..................................................................................................................................... 31 Figura 16..................................................................................................................................... 31 Figura 17..................................................................................................................................... 32 Figura 18..................................................................................................................................... 32 Figura 19..................................................................................................................................... 33 Figura 20..................................................................................................................................... 33 Figura 21. ...................................................................................... Error! Marcador no definido. Figura 22..................................................................................................................................... 36 Figura 23..................................................................................................................................... 37 Figura 24..................................................................................................................................... 37 Figura 25..................................................................................................................................... 38 Figura 26..................................................................................................................................... 39

viii

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

ABREVIATURAS USADAS

Ticss: Tecnologas de Informacin y Comunicacin. Web top: Es un escritorio virtual en la web. e-book: Libro electrnico. CENHIES: El Centro Hidalguense de Estudios Superiores. e- duca: Nombre otorgado a la aplicacin web, compuesta por el prefijo e de electrnico y la palabra educar. Web: Sistema de documentos de hipertexto. Html: HyperText Markup Language (lenguaje de marcado hipertextual). Html5: (HyperText Markup Language, versin 5) lenguaje de marcado hipertextual versin 5. Javascript: Lenguaje de programacin interpretado. Css3: Hojas de estilo en cascada. Pdf: Portable document format, formato de documento porttil). Api: Interfaz de programacin de aplicaciones. Browser: Designar un navegador web o de Internet. Ftp: File Transfer Protocol, (Protocolo de Transferencia de Archivos). Host: Computadoras conectadas a una red.

ix

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

CAPTULO I

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

1. INTRODUCCIN
Actualmente las computadoras y diversos dispositivos electrnicos nos facilitan las tareas y trabajos cotidianos adems de jugar un papel importante en la mejora del aprendizaje de estudiantes de diversos niveles educativos. Esta manera de difusin de informacin otorga ventajas sobre otros medios y mtodos de enseanza, pero debido a ciertos factores como son la sofisticacin de las tecnologas multimedia e interactivas y la falta de capacitacin hacia los usuarios finales han arrojado resultados no deseables, provocando desinters de los estudiantes o mermando el aprendizaje de los mismos. El desarrollo de las Tecnologas de Informacin y Comunicacin (TICSs), unido a los esfuerzos contemporneos en el desarrollo de nuevos sistemas de enseanza-aprendizaje, ha influenciado en la adopcin de tecnologas para el desarrollo de aplicaciones educativas, as como en la rpida expansin de stas hacia aplicaciones basadas en Web. Hoy en da las aplicaciones web han tenido un gran crecimiento en cuanto a usabilidad se refiere debido a ciertas ventajas que se presentan frente al software de escritorio; entre las que destaca la compatibilidad multiplataforma y el menor consumo de recursos de hardware, ya que esta aplicaciones se ejecutan con uniformidad desde una computadora de escritorio hasta dispositivos mviles como son tabletas electrnicas o telfonos inteligentes El presente trabajo consiste en el desarrollo de una aplicacin informtica haciendo uso de la tecnologa Web. Esta aplicacin servir como herramienta auxiliar para facilitar el aprendizaje en los estudiantes y motivar la prctica de la lectura, aprovechando la portabilidad de los libros electrnicos (e-books), con los cuales se espera que sean aprovechados por los estudiantes para la realizacin de tareas e investigaciones y trabajos en clase. Para el desarrollo de la aplicacin se aprovecharon las ventajas que ofrece el lenguaje HTML5 (lenguaje de marcado de hipertexto versin 5) debido a que esta versin se ejecuta nativamente en cualquier dispositivo que cuente con un navegador web, as como como la potencia y simplicidad de JavaScript y CSS3 (hojas de estilo en cascada) para el diseo Web usando hojas de estilo. 1.2 NOMBRE
DE LA ESCUELA

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Centro Hidalguense de Estudios Superiores. Dentro de la oferta educativa que ofrece el Centro Hidalguense de Estudios Superiores (CENHIES) se encuentran siete licenciaturas las cuales son: Administracin, Comunicacin, Contadura, Derecho, Diseo Grfico, Psicologa, Turismo.

1.1.1 Antecedentes
El Centro Hidalguense de Estudios Superiores, CENHIES, abri sus puertas por primera vez a la juventud de Mxico, el 23 de agosto de 1993, gracias al entusiasmo y creatividad de su fundador el empresario y abogado Leonardo Ramrez lvarez. En esa ocasin, se llev a cabo la ceremonia inaugural con la presencia del Doctor Ral Carranc y Rivas, padrino de la Institucin, quien dirigi a los asistentes un gran discurso y devel una placa que dice: "El ilustre jurisconsulto Dr. Ral Carranc y Rivas, abri las puertas del Centro Hidalguense de Estudios Superiores a la Juventud de Mxico, el 23 de agosto de 1993". El personal de la Institucin qued integrado por un Director General, que fue el Licenciado Antonio Mota Rojas, una secretaria y una intendente, as como veinticinco docentes, entre los que se encontraban el fundador, Licenciado Leonardo Ramrez lvarez, el Director General, as como numerosos profesores con gran trayectoria profesional y acadmica. La labor docente del Licenciado Leonardo Ramrez lvarez por el lapso, hasta ese entonces, de treinta aos de servicio, hizo posible que cuando CENHIES inici labores, tuviera una inscripcin de 300 alumnos que provenan de todas las regiones del Estado de Hidalgo y de algunas otras Entidades Federativas de la Repblica Mexicana.

Originalmente CENHIES, se ubic en un inmueble de la calle de Guerrero 503 altos, en la ciudad de Pachuca, Hidalgo, pero para el 18 de abril de 1995, se inici la construccin de las actuales instalaciones, estrenndose el primer mdulo el 10 de agosto de ese mismo ao, con una conferencia impartida por el entonces Gobernador del Estado de Hidalgo, Licenciado Jess Murillo Karam. En la actualidad tiene instalaciones modernas y lujosas, que le permiten cumplir exitosa y satisfactoriamente su labor. La oferta educativa inicial de CENHIES, fue de 5 licenciaturas: Derecho, Psicologa, Ciencias de la Comunicacin, Administracin de Empresas y Contadura. En 1996, la ampli, esta vez en el nivel de Preparatoria. En 1999, incluy la educacin bsica
2

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

de Secundaria. En 2002 se extendi la oferta educativa a las maestras en: Educacin y Psicologa de la Salud; especialidades en: Psicologa Educativa, Psicologa de la Salud y Derecho de Amparo. Posteriormente, en 2003, se increment la oferta a las licenciaturas en Diseo Grfico y Administracin de Empresas Tursticas. En el 2004, a la especialidad en Mercadotecnia. En el 2008, a la maestra en Mercadotecnia. En el 2010, a la especialidad en Derecho Penal. En el ao 2011, a la especialidad en Recursos Humanos. En el 2012, a las maestras en Derecho Constitucional y Amparo as como a la de Derecho Penal y Procedimientos Orales y a la especialidad en Diseo Grfico Interactivo. En general, CENHIES tiene una proyeccin mayor para los prximos aos con la finalidad de satisfacer las necesidades educativas de los jvenes mexicanos. De esta forma CENHIES asume su compromiso social en el marco de un proceso de consolidacin institucional, como formador de futuros profesionales. Sin embargo, a pesar de la alta calidad de sus docentes, administrativos y directivos, de lo impresionante de sus instalaciones, de sus completos laboratorios y talleres, CENHIES es una institucin educativa que est en pleno proceso de consolidacin, porque en palabras de su Rector: "Educar con calidad requiere ms de lo que hemos hecho y tenemos".

1.1.2 Situacin actual


Dentro de la oferta educativa que ofrece el Centro Hidalguense de Estudios Superiores (CENHIES) se encuentran siete licenciaturas las cuales son: Administracin, Comunicacin, Contadura, Derecho, Diseo Grfico, Psicologa, Turismo.

1.1.3 Misin
Es misin del Centro Hidalguense de Estudios Superiores formar integralmente a sus estudiantes, a travs de programas educativos de calidad en los que el aprendizaje centrado en el estudiante constituya el fundamento para la formacin y desarrollo de conocimientos, habilidades, actitudes y valores, y una slida preparacin acadmica, cientfica e investigativa, que se demuestre en un excelente desempeo disciplinar, interdisciplinar y transdisciplinar, que con una actitud crtica y creativa les permita comprender los retos de la sociedad contempornea como una oportunidad para contribuir al desarrollo estatal, nacional e internacional.

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

1.1.4 Visin

Mejor institucin educativa privada del estado de hidalgo, mediante la formacin integral de sus egresados y la alta calidad acadmica de sus programas y profesorado, lo que La visin del centro hidalguense de estudios superiores para el ao 2020 es llegar a ser la permitir consolidar un modelo educativo vanguardista que condicione su proyeccin social

1.1.5 Principios
El Centro Hidalguense de Estudios Superiores tiene como principios: Organizacin. La organizacin y la asignacin de funciones tendrn como fin garantizar y fortalecer a la institucin. Direccin. El desarrollo de los procesos acadmicos, administrativos y los dems requeridos para el cumplimiento de la misin de la institucin, estar orientado y dirigido por el Consejo Acadmico y el Rector, con el fin de garantizar la unidad de criterio y la efectividad de las polticas institucionales. Correspondencia y Pertinencia. La organizacin interna establecer claramente la dependencia jerrquica, la interaccin tcnica y las funciones de acuerdo con la naturaleza y misin de sus dependencias y unidades. Coordinacin. La organizacin y desarrollo de funciones por parte de las distintas instancias y dependencias que conforman la institucin, estarn orientados a coordinar y armonizar la gestin, de tal manera que exista unidad de criterios en el desarrollo, gestin y logro de la misin y fines de la misma. Prevalencia. Las dependencias de la institucin orientarn su quehacer a alcanzar los objetivos misionales, de tal manera que las reas de apoyo estarn al servicio de los procesos y actividades misionales. Evaluacin de la gestin. La institucin contar con un sistema de indicadores de gestin y control de calidad que permita la evaluacin y el mejoramiento permanente de los estndares relacionados con sus actividades misionales. tica. La gestin de la institucin estar orientada por valores como la transparencia, la equidad, la justicia, la responsabilidad, la rectitud y la inclusin; propender por el mejoramiento institucional, con miras a obtener un impacto positivo en el Estado y en el pas.
4

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Convivencia y buen trato. La institucin reconoce y respeta el pluralismo y la diferencia. Todas las actividades dentro del seno de la misma debern desarrollarse sobre la base del respeto y consideracin por la dignidad y los derechos del otro, a travs de relaciones cordiales, armnicas y de buen trato. Idoneidad. La institucin garantizar que las personas que se vinculen con ella en forma permanente o temporal, cumplan con los requisitos establecidos para el cumplimiento idneo de las funciones para las cuales se vinculan. De igual manera sus miembros ejercern sus funciones procurando alcanzar los ms altos estndares en su desempeo.

1.1.6 Valores
El Centro Hidalguense de Estudios Superiores tiene como valores: mbito intelectual: amor a la verdad, al estudio y a la preparacin intelectual. mbito moral: honestidad y exigencia personal. mbito conductual: orden, disciplina, respeto, responsabilidad. mbito fsico: respeto y cuidado de su salud fsica y mental. mbito social: vocacin de servicio, compromiso y solidaridad.

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

1.1.7 Localizacin geogrfica


Ubicada en blvd Luis Donaldo Colosio # 101 Pachuca Hgo

Figura 1

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

1.2 PLANTEAMIENTO DEL PROBLEMA


La gran cantidad de informacin disponible en Internet, as como la complejidad que presentan algunos artculos a los que los usuarios acceden, hacen crtico que el desarrollo de aplicaciones y sitios educativos basados en Web deban contemplar no solo aspectos de funcionalidad sino tambin de usabilidad y del mismo modo ofrecer informacin verdica y confiable tomando en cuenta que estas aplicaciones no solo deben tener como objetivo poner a disposicin de los usuarios informacin exacta, sino orientar adecuadamente a los estudiantes en la bsqueda, guiando por los caminos ms apropiados de acuerdo a los objetivos o a los conocimientos previos de los estudiantes. Actualmente en el departamento de Biblioteca del Centro Hidalguense de Estudios Superiores no cuenta con un medio o plataforma virtual para poder visualizar o descargar informacin requerida para sus investigaciones. Por otra parte se cuenta con material digital como son documentos en formato pdf y algunos libros electrnicos (e-books), los cuales vienen como extra adquiriendo el libro fsico impreso. Las investigaciones y la informacin recabada para tareas y trabajos en clase provienen directamente de internet, la cual en la mayora de los casos solo se copia y se pega en el editor de textos para poder imprimirla sin que el estudiante se tome un momento para leer dicha informacin. Por lo anterior es necesario el uso de una herramienta web, que contenga libros, artculos e informacin, seleccionada por los profesores de las respectivas reas, buscando que la enseanza sea homognea y slida.

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

1.3 JUSTIFICACIN
Actualmente el uso de los libros impresos como fuente de informacin e investigacin ha sido desplazado de lugar, debido al crecimiento acelerado de Internet en los ltimos aos, pero debido a que es muy difcil ameritar de uno en uno cada artculo informativo que es alojado en internet diariamente, el uso de Internet como fuente de informacin puede causarnos problemas a la hora de acreditar fielmente la informacin que nosotros buscamos, trayndonos problemas a la hora de realizar investigaciones acadmicas y profesionales. Otra de las razones significativas de que el uso de los libros impresos estn decayendo es por la introduccin lectores de libros electrnicos los cuales ofrecen practicidad y portabilidad al contrario de un libro fsico, sin mencionar que dichos lectores nos permiten almacenar y comprar va Internet varios ttulos de libros, los cuales cuestan solo una fraccin de lo que cuesta un libro fsico. Aprovechando las ventajas que en libro electrnico (e-book) nos ofrece se decidi optar por el desarrollo de una plataforma web la cual fungir como una mini biblioteca virtual usando la bibliografa electrnica con la que cuenta la Biblioteca del Centro Hidalguense de Estudios Superiores los cuales se han adquirido de manera legal, sirviendo de acervo bibliogrfico para los estudiantes de nivel superior. Adems la aplicacin web contara con recursos multimedia extras para ayudar a los estudiantes; como lo es una calculadora cientfica y un diccionario de espaol a ingls. La aplicacin web desarrollada es necesaria para brindar informacin oportuna y eficiente para los usuarios de la institucin. La aplicacin Web nombrada e-duca pretende ser un espacio dinmico para el trabajo de investigacin, donde la informacin se renueva y enriquezca constantemente. Servir de apoyo tanto al proceso de aprendizaje del estudiante como a la investigacin.

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

1.4 OBJETIVO GENERAL


Desarrollar una aplicacin Web que sirva para el acceso a la informacin

acadmica mediante libros electrnicos y elementos multimedia para el servicio de los estudiantes de nivel superior en CENHIES.

1.5 OBJETIVOS ESPECFICOS


Desarrollar una aplicacin funcional en etapa de prototipo.

Determinar los requerimientos con base en la recopilacin y anlisis de informacin del rea de informtica.

Seleccionar las herramientas para determinar cmo se va a desarrollar.

Crear libros electrnicos a partir de un convertidor para pasar de libros en formato pdf a libro electrnico.

Desarrollar los mtodos,

libros, diccionario, diccionario bilinge y calculadora que

son los mens que se plasmarn en la aplicacin web, con los lenguajes de programacin Html, Html5, Css, Java Script.

Programar la aplicacin en Html integrando cada una de las herramientas que se desarrollaron.

CAPTULO II

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

2.1 VISIN GENERAL


Se propone realizar una herramienta web educativa como apoyo al aprendizaje y la lectura en estudiantes de nivel superior. El trabajo a desarrollar tendr los siguientes mdulos: libros, diccionario, diccionario bilinge, constitucin y calculadora. La herramienta web es meramente de apoyo, no se busca modificar ni suplir mtodos o modelos educativos adems de ser interactiva y dinmica para captar el inters de los estudiantes.

La usabilidad, para este caso se define por una pregunta sobre si una aplicacin Web educativa es lo suficientemente buena para satisfacer las necesidades y requerimientos del usuario. Es decir, la usabilidad corresponde al grado de

aceptacin prctica de un sitio Web educativo. De este modo, para que un sitio Web pueda ser utilizado para alcanzar alguna tarea, tiene que cumplir con criterios de utilizacin (es decir referido a la funcionalidad: puede hacer lo que se necesita) y usabilidad (se les facilita el uso de la aplicacin web a los estudiantes). La usabilidad considera los aspectos de un sitio Web educativo con el que el usuario puede interactuar y sus principales criterios de evaluacin (aprendizaje,

operatividad, comunicacin contenido, etc.). Por ejemplo, el sitio debe cumplir una funcionalidad de presentar determinado tipo de contenido, pero este contenido debe ser presentado de una manera atractiva y sencilla al usuario y que adems el aprendizaje de su uso y navegacin sea intuitiva y fcil, para llevar a cabo un proceso de aprendizaje rpido y eficaz

10

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

2.1.1 QU ES UNA BIBLIOTECA VIRTUAL?


Un Sistema innovador de educacin, orientado a mejorar la comunicacin, incentivar el aprendizaje interactivo y personalizado, el anlisis crtico y enfatizar el trabajo individual y en equipo, a travs de Internet. Un medio para que el estudiante pueda cursar asignaturas desde la Red, enviar preguntas concretas o participar en grupos de discusin, obtener navegar a travs de las pginas electrnicas y

bibliografa, material didctico, simulaciones y videos. Todo esto le

proporciona, al estudiante, mayor riqueza de conocimientos y reduce la distancia geogrfica.

2.1 MARCO CONCEPTUAL

Adobe Dreamweaver CS6: Es una aplicacin en forma de estudio (basada en la forma de estudio de Adobe Flash) que est destinada a la construccin, diseo y edicin de sitios, videos y aplicaciones Web basados en estndares. Es el programa ms utilizado en el sector del diseo y la programacin web, por sus funcionalidades, su integracin con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estndares del World Wide Web Consortium.

API: (del ingls Application Programming Interface) es el conjunto de funciones y procedimientos (o mtodos, en la programacin orientada a objetos) que ofrece cierta biblioteca para ser utilizado por otro software como una capa de abstraccin. Son usados generalmente en las bibliotecas.

Aplicacin Web: En la ingeniera de software se denomina aplicacin web a aquellas herramientas que los usuarios pueden utilizar accediendo a un servidor web a travs de Internet o de una intranet mediante un navegador. Es una aplicacin

11

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

software que se codifica en un lenguaje soportado por los navegadores web en la que se confa la ejecucin al navegador. Browser: (Navegador): programa para acceder a diversos servicios de Internet, como la www, los servidores de FTP, los grupos de noticias o el correo. Son una solucin "todo en uno" muy fcil de usar.

CSS (Cascading Style Sheet): hojas de estilo. Las hojas de estilo (CSS) se usan con el HTML para establecer de forma general en un sitio colores, Fuentes tipogrficas, tamaos y otros elementos como parte de las plantillas (templates) sobre las que el contenido se escribe o se codifica.

Domain Name: dominio, es el nombre que representa direcciones IP o pginas web en particular. Por ejemplo, microsoft.com es un dominio, y asociadas a dicho dominio hay cientos de pginas. Hay un nmero limitado de sufijos que pueden ser asociados con los nombres de los dominios, como por ejemplo .gov, .com, o .edu.

Framework: mejora la escalabilidad y el rendimiento de aplicaciones gracias a caractersticas mejoradas como el almacenamiento en cach, el desarrollo de aplicaciones y la actualizacin con ClickOnce.

Flip PDF Professional: es una utilidad para crear libros electrnicos basados en Flash con la pgina de la vida real, como tirar efecto.

Ventajas:

Editar pginas PDF importados con incrustacin nativo de Flash o de vdeo YouTube. Se puede aadir enlaces de pginas y vnculos incluso por correo electrnico. Insertar msica de fondo, lbum de imgenes. Contiene acciones de JavaScript.
12

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Incluso distribuirlo en CD / DVD ROM, todo sin tener que pagar regalas. Puede crear su propio estilo, Incluso puede configurar una contrasea para controlar quin puede ver su pgina en lnea de volteo eBook. El software incluye 3 diferentes plantillas y temas diferentes para la rpida creacin. Personalizar la barra de herramientas para permitir o no permitir a los usuarios imprimir, descargar o compartir su pgina de volteo eBook. Modificar la altura y anchura para que su pgina de volteo eBook paisaje o formato retrato.

Host: un host, literalmente anfitrin, es un ordenador directamente conectado a una red y que efecta las funciones de un servidor, y alberga servicios, como correo electrnico, grupos de discusin Usenet, FTP, o World Wide Web) accesibles por otros ordenadores de la red.

Host Name: nombre de sistema central. Todo ordenador que est conectado directamente a Internet tiene una identificacin numrica, denominada direccin IP, y un nombre, llamado host name. La mayora de la gente que utiliza el Internet no necesita saber el host name de un ordenador para conectarse a l.

HTML: es el lenguaje de marcado predominante para la elaboracin de pginas web. Es usado para describir la estructura y el contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes.

Ventajas: Es el lenguaje de formateo para los navegadores web. Es fcil de entender y utilizar Su uso es muy extendido
13

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

HTML5: define los nuevos estndares de desarrollo web, tanto para equipos de escritorio, como para dispositivos mviles y telfonos celulares. Se abren las puertas para nuevas opciones de diseo y dinmica de informacin. Ventajas: Es nativo, y por tanto independiente de plugins de terceros. Es decir, no pertenece a nadie, es opensource. Es ms semntico, con etiquetas que permiten clasificar y ordenar en distintos niveles y estructuras el contenido. Adems, incorpora metadatos de manera ms formal, favoreciendo el posicionamiento SEO y la accesibilidad. El cdigo es ms simple lo que permite hacer pginas ms ligeras que se cargan ms rpidamente favoreciendo la usabilidad y la indexacin en buscadores. Ofrece una compatibilidad mayor con los navegadores de dispositivos mviles. Incluye la etiqueta de dibujo canvas, que ofrece ms efectos visuales. Ofrece soporte a codecs especficos. Posibilita la insercin de vdeos y audio de forma directa. Permite la geolocalizacin del usuario. Algo muy til para el marketing mvil. Tiene la capacidad de ejecutar pginas sin estar conectado. Incorpora nuevas capacidades Javascript que aumentan la capacidad de almacenamiento. Dispone de nuevas capacidades CSS3 como posibilidad de usar cualquier fuente o tipografa en HTML, columnas de texto, opacidad, transparencia, canales alpha, contraste, saturacin, brillo, animaciones de transicin y transformacin, bordes redondeados, gradientes, sombras, etc. Permite realizar diseos adaptables a distintos dispositivos (web, tablets, mviles).

14

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Http: (HyperText Transport Protocol, Protocolo de Transferencia de Hipertexto). El protocolo usado en la WWW para transmitir las pginas de informacin entre el programa navegador y el servidor. Internet: todas las computadoras conectadas a redes que a su vez se conectan entre ellas conforman la (el) internet. Intranet: un intranet es un Internet interno diseado para ser utilizado en el interior de una empresa, universidad, u organizacin. Lo que distingue a un intranet del Internet de libre acceso es el hecho de que el intranet es privado. Gracias a los intranets, la comunicacin y la colaboracin interna son ms fciles.

IP: Protocolo de Internet.

Javascript: fue desarrollado por Netscape y es similar a Java. Se trata de un sistema de programacin que permite presentar contenidos dinmicos e interactividad en un sitio web y que interacta con el HTML.

Jsp: JavaServer Pages (JSP) es una tecnologa basada en el lenguaje Java que permite incorporar contenido dinmico a las pginas web. Los archivos JSP combinan HTML con etiquetas especiales y fragmentos de cdigo Java. JSP es un acrnimo de Java Server Pages, que en castellano vendra a decir algo como Pginas de Servidor Java. Es una tecnologa orientada a crear pginas web con programacin en Java (ORACLE, 2011).

El cdigo fuente de una pgina JSP contiene:

Directivas: Indican informacin general de la pgina, como puede ser importacin de clases, pgina a invocar ante errores, si la pgina forma parte de una sesin, etc.

Declaraciones: Sirven para declarar mtodos o variables. Scriptlets: Cdigo Java embebido. Expresiones: Expresiones Java que se evalan y se envan a la salida.
15

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Tags JSP: Etiquetas especiales que interpreta el servidor.

Libro electrnico: Un libro electrnico, libro digital, ciberlibro, tambin conocido como e-book, eBook, o eco libro, es una versin electrnica o digital de un libro o un texto publicado en la World Wide Web o en otros formatos electrnicos. Tambin suele denominarse as al dispositivo usado para leer estos libros, que es conocido tambin como e-reader o lector de libros electrnicos.

Navegador: es un programa de software que permite al usuario visualizar pginas web. Existen muchos tipos de navegadores, siendo los ms conocidos Internet Explorer, Firefox, Opera, Safari Google Chrome.

Navigation: navegacin, se refiere a cmo el sistema de mens, botones y barras de herramientas funciona dentro de un sitio web.

Objeto: concepto, o cosa con lmites ntidos y significados para el problema en cuestin, una instancia de una clase.

Orientado a Objetos (OO): una estrategia de desarrollo de software que organiza el software como un conjunto de ob-jects proyectos que contienen la estructura de datos y el comportamiento. (Abreviado OO.)

Pgina Web: una pgina web es un documento creado en formato HTML (Hypertext Markup Language) que es parte de un grupo de documentos hipertexto o recursos disponibles en el World Wide Web. Una serie de pginas web componen lo que se llama un sitio web.

Permalink: enlace permanente, los blogs presentan varios artculos en una misma pgina con un URL general. Cuando cada artculo se archiva, el URL cambia. Cada artculo tiene un enlace permanente.

16

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

PDF (formato de documento porttil): formato de almacenamiento de documentos digitales. Es un tipo compuesto de (imagen vectorial, mapa de bits y texto).

Script: en trminos simples, un script (literalmente: guin) es una instruccin que lleva a una pgina de internet a ejecutar una accin. Es un lenguaje de programacin que se emplea para crear parte de una pgina web o toda la pgina. Los scripts le indican a los robots y motores de bsqueda cmo proceder.

Servidor: Es una computadora que, formando parte de una red, provee servicios a otras computadoras denominadas clientes.

Servicios: acceso a pginas Web, directorios de FTP, correo, etc.

Sub-ndice triplete: un mtodo de especificar una seccin de matriz por medio del subndice Inicial y final. Valores enteros y un paso opcional (o incremento).

Sub-objeto: parte de un objeto de datos que pueden hacer referencia o definidos de forma independiente de otras partes.

Subprograma de Cabecera: un bloque de cdigo al principio de un subprograma definicin, incluye el nombre, y la lista de argumentos, si los hubiere

URL: (Uniform Resource Locator, Localizador Universal de Recurso) es el nombre que reciben las diversas cosas e informacin que se pueden encontrar en la Red: pginas Web (http), archivos (ftp) o grupos de noticias (mail).

WWW: (World Wide Web, la telaraa mundial) es una red mundial de pginas de informacin hipertexto, por la que se puede circular mediante un navegador Web.

17

CAPTULO III

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

3. METODOLOGA
En este captulo se describe la metodologa empleada para el desarrollo de la aplicacin Web, en donde se detallan los diagramas de Lenguaje Unificado de Modelado (UML siglas en ingls) diagramas de proceso y se hace referencia al cdigo que conforma la aplicacin. Adems se describen los mdulos que contiene la aplicacin web. Se explica el funcionamiento sobre las interfaces as como su uso a manera de una pequea introduccin para el administrador y el usuario final. Como primera instancia se obtuvieron los requerimientos para el anlisis (dichos argumentos fueron otorgados por el departamento de informtica de CENHIES) y diseo,

Las herramientas utilizadas para el desarrollo de la aplicacin web fueron:

Adobe Dreamwevaer CS6: El software de diseo web Adobe Dreamweaver CS6 proporciona una interfaz visual intuitiva para la creacin y edicin de apps para dispositivos mviles y sitios web.

Flip PDF Professional: es una utilidad para crear libros electrnicos basados en Flash con la pgina de la vida real, como tirar efecto.

JavaScript: Lenguaje de programacin usado para la creacin de pginas web dinmicas.

18

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

3.1.1 VISIN GENERAL


Primeramente se debe hacer mencin de que la aplicacin va a ser administrada por los encargados de la biblioteca del CENTRO HIDALGUENSE DE ESTUDIOS SUPERIORES por lo que su administracin debe ser sencilla e intuitiva, la cual solo va enfocada a visualizar los libros electrnicos (e-books) y el acceso a los mdulos llamados calculadora y diccionario. Tambin se tiene en cuenta que los usuarios finales son un grupo totalmente heterogneo, por lo que la usabilidad de la interfaz debe ser lo ms clara y fcil de usar que sea posible. En cuanto a las funciones que realizar la Web, sern de administracin de la propia aplicacin (introduccin de datos o de lectura de datos) por lo que cada libro o herramienta que conforma la aplicacin Web se manda a llamar por medio de hipervnculos.

REQUISITOS FUNCIONALES.
Los requerimientos son una descripcin de las necesidades o deseos de la aplicacin Web a desarrollar. En la siguiente lista se dan los requisitos funcionales que ha de cumplir la aplicacin agrupados segn el tipo de usuario que necesitar dichas funcionalidades:

1. Administrador: Dar de alta un nuevo libro: Se almacena un nuevo archivo que contendr el libro electrnico para ser llamado mediante un hipervnculo.

Borrar un libro: Elimina un libro en caso de que el ejemplar ya no sea til o que cometa errores en la aplicacin. Crear nuevo hipervnculo: Crea un nuevo hipervnculo, una vez que ya se haya subido el archivo del libro electrnico.

19

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

2. Alumno: Consultar el catlogo de libros que hay en existencia: permite ver los libros citados por los profesores de asignatura para todos los alumnos. Consultar los libros electrnicos: permite consultar los libros seleccionados por el alumno para su lectura. Consultar las herramientas diccionario y diccionario bilinge y calculadora: permite consultar un pequeo diccionario en espaol y un diccionario espaol ingls. Por ltimo se encuentra una calculadora con funciones bsicas para los alumnos.

3. Profesor: Indica, autoriza y provee de la bibliografa al Administrador de la aplicacin para que ser usada y visualizada por los alumnos. Consultar los libros electrnicos: permite consultar los libros seleccionados para su lectura.

CONSTRUCCIN DE PROTOTIPOS.
El prototipos del sistema que se presenta a continuacin es un modelo a escala de lo real, pero no funcionando al 100% ya que no se ha concluido como un producto final, debido a que no se llev cabo un profundo anlisis sobre las necesidades del sistema debido al plazo de tiempo dedicado. Proporcionando una retroalimentacin temprana por parte de los usuarios acerca del Sistema. Durante la fase de anlisis se usa para obtener los requerimientos del usuario. En la fase de diseo se usa para ayudar a evaluar aspectos acerca de la implementacin seleccionada.

20

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

CARACTERSTICAS: El prototipo es una aplicacin que funciona. Los prototipos se crean con mayor rapidez y un menor grado de dificultad que un sistema completo. Los prototipos evolucionan debido a los requerimientos que se necesiten sobre la marcha (programacin externa, XP)

REQUISITOS DE LA INTERFAZ DE USUARIO.

Hay que tener en cuenta que esta aplicacin web ha de ser usada por todo tipo de usuarios utilizando conexiones de velocidad distintas. Por ello se ha de optimizar el apartado del diseo (debido a que imgenes con resoluciones altas son de mayor tamao) grfico, as como la informacin de ida y vuelta al servidor, para que no resulte excesivamente lenta la navegacin por la aplicacin.

ESPECIFICACIONES DE USABILIDAD La aplicacin ha de ser suficientemente intuitiva para que pueda ser utilizada por usuarios sin conocimientos informticos elevados debido que Administrador ser los encargados de biblioteca en turno. Ha de ponerse especial cuidado en optimizar la usabilidad de las tareas a realizar por los usuarios ya que son totalmente heterogneos, por lo que se puede dar el caso que sea un usuario sin ningn tipo de conocimiento informtico. Para esto se ha optado por utilizar una interfaz grfica simple, con botones no demasiado pequeos y lo suficientemente descriptivos como para que el usuario pueda saber intuitivamente para que sirven. Por otro lado, el hecho de que las funciones de estos usuarios sean exclusivamente para consulta y visualizacin (ya que el usuario; en este caso estudiante no modifica nada), evita el uso incorrecto de la aplicacin.
21

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

DIAGRAMAS DE CASO DE USO.


Los diagramas de casos de uso describen el comportamiento del sistema web, desde la perspectiva del usuario. Condicionan los requisitos funcionales del sistema, representando las funciones que la herramienta puede ejecutar. Son fciles de interpretar y muy tiles en la comunicacin con el usuario final.

Administrador (Bibliotecario)

Docente

Usuario (Estudiantes)

Niveles de usuario Realizacin propia.

Figura 2

22

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Entrar a pantalla de inicio Eleccin de opcin Men de libros digitales


Usuario

Uso de diccionario Uso de diccionario bilinge Lectura de la constitucin digital Uso de la calculadora

Diagramas de caso de uso de actividades de usuario Realizacin propia. Figura 3


23

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

3.1.2 DIAGRAMA DE PROCESO.

Ingresar a la pantalla de inicio

Eleccin de alguna opcin

Seleccin de libro

Diccion ario Error Insertar palabra

Diccionario Bilinge

Uso de calculador a

Lectura de constitucin

Lectura de libro Palabra Encontr ada Mostrar significado de la palabra

Mostrar significad o de la palabra

Fin Realizar operaci n Fin

Fin

Fin

Error

Fin

Figura 4

24

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

3.1.4 SINTAXIS E INTERFACES

Men principal de la aplicacin web (impresin de pantalla), realizacin propia. Figura 5

<!doctype html> <html> <head> <meta charset="utf-8"> <title>E-duca</title> <link href="css/estilos.css" rel="stylesheet" type="text/css"><!-- Se llama el formato de la pgina que se encuentra en un css --> </head>

<!-- Cabecera --> <header id="cabecera"> </header> <!-- Menu --> <nav id="menu"> <ul>

25

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

<li><a href="libros/libros.html"> <!-- lnea donde llama a la pgina de seleccin de libros --> <div id="icono1"></div><!-- muestra el icono donde tendr acceso a la pgina de seleccin de libros --> LIBROS </a></li>

Galera de portadas de libros electrnicos (impresin de pantalla), realizacin propia. Figura 6

<link rel="stylesheet" type="text/css" href="css/styles.css" /><!-- se llama una hoja de estilo donde tiene el formato de la pgina -->

Animacin de transicin al cambiar portadas de libros (impresin de pantalla), realizacin propia. Figura 7

26

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

<div id="slideShowContainer"> <!-- se llama el formato de imagen de portada --> <div id="slideShow"> <!-- se llama la animacin de transicin al cambiar de portada--> <ul> <li><a href="libro2/index.html"><img src="img/photos/1.jpg" width="100%" alt="Fish" /></a></li><!se da el formato de la imagen de portada as como el tamao y el link a donde se encuentra el libro digital que se va abrir al darle un clic sobre la imagen-->

Caja de texto del diccionario RAE, donde se introduce la palabra que se desee buscar (impresin de pantalla), realizacin propia. Figura 8 opc=prompt('INTRODUCE LA PALABRA QUE DESEE BUSCAR');<!-- una caja de mensaje donde se pide la palabra que se requiere buscar y se guardara en la variable --opc--- -->

Insercin de la palabra que se desea saber su significado (impresin de pantalla), realizacin propia.

Figura 9

27

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

switch(opc)<!-- buscar la variable opc en los case y si se encuentra mostrara el resultado si no mostrar un mensaje de error --> { case 'ALGORITMO': <!-- la palabra ALGORITMO est en un case y mostrar el resultado en este caso el significado de la palabra -->

Significado de la palabra buscada (impresin de pantalla), realizacin propia.

Figura 10 document.writeln('<div class="exito"><!-- se llama un formato donde contiene una caja de color donde mostrar el significado de la palabra -><b>ALGORITMO</b><p align="left"> (Del r. al-huwarizmi , sobre nombre del matemtico Abu Yfar Abenmusa, influido por el gr. arithmos, nmero y el cast. logaritmo. )</p> <p align="left"> s.m. MATEMTICAS Conjunto de reglas operatorias cuya aplicacin permite resolver un problema mediante un nmero finito de operaciones. </p> </div>'); <!-- significado de la palabra -->

3.1.5 MANUAL DE USUARIO


Pantalla principal Se podr elegir una de las 5 opciones las cuales son: 1. 2. 3. 4. 5. Libros. Diccionario. Diccionario bilinge. Constitucin. Calculadora.
28

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Men principal de la aplicacin web (impresin de pantalla), realizacin propia.

Figura 11

3.1.6 OPCIN DE LIBROS


Para acceder a los libros virtuales daremos clic sobre el icono que lleva por nombre LIBROS.

Men principal de la aplicacin web (impresin de pantalla), realizacin propia. Figura 12

29

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Al elegir esta opcin nos llevara a la siguiente pantalla: 1,2 Navegadores. Donde aparecern las portadas de los libros y podrs elegir la portada del libro que desees visualizar digitalmente. 3 Al darle clic sobre la portada te llevara al contenido del libro elegido.

Al darle clic podrs regresar a la pgina principal

Galera de portadas de libros electrnicos (impresin de pantalla), realizacin propia. Figura 13 Al acceder al libro, el contenido del libro aparecer de forma digital como se muestra en la figura de abajo.
Te llevara a la ltima pgina. Te mandara a la primera pgina.

Al darle clic podrs regresar al men de seleccin de libros.

Pondr el libro al tamao de la pantalla.

Libro electrnico (impresin de pantalla), realizacin propia.


Cambio de pgina de una en una.

Figura 14

30

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Men principal de la aplicacin web (impresin de pantalla), realizacin propia. Figura 15

Al elegir la opcin de diccionario se abrir la siguiente pgina.

Al darle clic podrs regresar a la pgina principal.

Introducir la palabra que desea saber el significado.

Caja de texto del diccionario RAE, donde se introduce la palabra que se desee buscar (impresin de pantalla), realizacin propia.

Figura 16

31

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Al darle en el botn de aceptar se mostrara el significado de la palabra que se introdujo.


Al darle clic podrs introducir una nueva palabra. Al darle clic podrs regresar a la pgina principal.

Significado de la palabra buscada (impresin de pantalla), realizacin propia. Figura 17 Al seleccionar el icono de DICCIONARIO BILINGUE se mostrara la siguiente pgina.

Al darle clic podrs regresar a la pgina principal. Introducir la palabra que deseas traducir del espaol al ingls.

Caja de texto del diccionario RAE, donde se introduce la palabra que se desee traducir (impresin de pantalla), realizacin propia. Figura 18

32

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Al darle en el botn de aceptar se mostrara la traduccin de la palabra deseada, as como un ejemplo del uso de la palabra.
Al darle clic podrs introducir una nueva palabra. Al darle clic podrs regresar a la pgina principal.

Significado de la palabra buscada (impresin de pantalla), realizacin propia. Figura 19 Al seleccionar la opcin de CALCULADORA.

Men principal de la aplicacin web (impresin de pantalla), realizacin propia.

Figura 20

Aparecer una pgina donde contiene una calculadora sencilla.


33

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Al darle clic podrs regresar a la pgina principal.

Calculadora sencilla (impresin de pantalla), realizacin propia.

Figura 21

34

CAPTULO IV

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

4. RESULTADOS Y DISCUSIN
Los resultados que obtuvimos fueron favorables para la institucin al igual que para nosotros ya que las expectativas que implanto la universidad sobre la aplicacin web se cubrieron con xito cubriendo los siguientes puntos:

Creacin de libros digitales


Se crearon libros digitales que anteriormente solo tenan un formato pdf obteniendo una mejor y atractiva visibilidad del libro Al elaborar los libros electrnicos se crea una lectura atractiva

Los libros hechos en una aplicacin web


Se procur no manejar base de datos siendo as que los libros digitales as como el resto de las herramientas se encuentran dentro del mismo cdigo HTML.

Diccionario rae y diccionario bilinge


El significado de las palabras as como la traduccin de ellas se encuentran dentro de un cdigo HTML con la ayuda de un script obteniendo como el resultado el evitar manejar base de datos como MySQL y SQL, ya que la opcin de bsqueda se manipula por una sentencia switch.

35

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

MDULOS

LIBROS VIRTUALES
El men principal se compone por una galera de imgenes (en este caso las portadas de los libros) en el cual podr seleccionar el libro deseado y al darle clic abrir una nueva pgina con el contenido del libro virtual.

Men de seleccin de libros electrnicos (impresin de pantalla), realizacin propia.

Figura 22

36

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Libro electrnico (impresin de pantalla), realizacin propia.

Figura 23

DICCIONARIO RAE Y DICCIONARIO BILINGE


Al seleccionar la opcin de Diccionario y Diccionario Bilinge, saldr un recuadro en el cual podr uno insertar la palabra que uno desea saber el significado (en el caso de diccionario REA), o la traduccin de la palabra al idioma de ingls (en caso del diccionario Bilinge).

Caja de texto del diccionario RAE, donde se introduce la palabra que se desee buscar (impresin de pantalla), realizacin propia.

Figura 24

37

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

Significado de la palabra buscada (impresin de pantalla), realizacin propia.

Figura 25

38

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

CALCULADORA
La opcin de CALCULADORA se mostrar en una pgina diferente una calculadora sencilla donde se podrn realizar operaciones bsicas

Figura 26 AL desarrollar la aplicacin se encontraron algunas limitantes por parte de la institucin como: El pagar un alojamiento para la biblioteca virtual, ya que no saben el alcance que podra tener el uso de libros virtuales EL uso de un servidor Los docentes no estn capacitados para el uso de lenguajes de programacin No se encuentra una red de internet para cubrir por completo la institucin

Es por eso que la creacin de aplicacin se us lenguajes de programacin estndar, de un uso fcil e entendible, como lo es HTML. De esta manera la

39

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

aplicacin puede ser portable, usada en una lap como desde una USB sin usar algn servidor, programa extra o algn plugin.

40

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

CONCLUSIONES
Como se revis y se llev a la prctica a lo largo de este trabajo, se ha visto como estas TICs tienen cada da una nueva aplicacin dentro de la agilidad de las sociedades, aunque no solamente ha permeado de manera tcnica y prctica, sino que ha llegado a la conciencia de los distintos sectores sociales con acceso a estas tecnologas. En este caso se trat de una biblioteca digital, importante recurso documental que adems de facilitar el acceso a informacin de forma rpida, eficiente y eficaz, fue que creada y desarrollada para fortalecer a partir de objetivos sectoriales, el desarrollo y utilizacin de tecnologas de la informacin y la comunicacin en el sistema educativo para apoyar el aprendizaje de los estudiantes, ampliar sus competencias para la vida y favorecer su insercin en la sociedad del conocimiento. Se puede concluir que este tipo de pginas electrnicas ofrecen un gran potencial para promover el desarrollo econmico y social, y lo que representa el nuevo paradigma de la informacin mediante el uso de las TICs, implica y requiere un anlisis serio como el anterior que tome en cuenta las condiciones propias de cada sociedad que utilice indicadores ms reflexivos. Se valora as mismo, el esfuerzo y el aprovechamiento que solo a travs de esta prctica fue posible, gracias a la aplicacin y difusin de todos los conocimientos adquiridos en la ingeniera que permitieron sin duda, demostrar una vez ms la posibilidad de presentar trabajos con calidad que demuestren y ofrezcan las ventajas y oportunidades que tiene la tecnologa para cualquier usuario que tenga inters en acrecentar su conocimiento personal. Finalmente, adems del reconocimiento y del esfuerzo que implican este tipo de proyectos, significa en gran medida, haber podido demostrar todo lo que a lo largo de esta carrera se ha aprendi y se puso en prctica para dejar dicho que aun viviendo en condiciones adversas, puede pensarse en mejorar la calidad educativa que se logra solo a partir de propuestas nuevas que sean integrales a las necesidades de la poblacin.
41

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

CITAS BIBLIOGRAFCAS
Ralph Moseley Manuales avanzados Madrid, Mc Graw-hill, 2007. 400p Oros cabello, Juan Carlos, Diseo de pginas web con HTML, JavaScript y Css, 2a edicin. Rusia, RA-MA Editorial, 2008, 368p. Vara, J.M. Lpez Sanz, Marcos Verde Marn, Jennifer Snchez, Diana Marcela Jimnez. Desarrollo web en entorno servidor CFGS-. Rusia, RA-MA EDITORIAL, 2012, 190P. Christophe Aubry Thierry Pupier- Julien wittmer. Dreamweaver Css, Flash Cs3. Ediciones En, E.UA 2008, 784p. Michael Zalewski. LA web enredada. Madrid. Ediciones Mayo 2009. 736p David Parsons. Programacin Madrid. Ediciones Mayo 2009. 736p. Carlos meza Arquiigo. Aplicacin del sistema de informacin geogrfica en el modelamiento del rio Ucayali Lima. Imprenta de la universidad Nacional Mayor de san marcos.2011. 128p. Oros, Juan Carlos. Gua prctica de HTML, JavaScript y css1. Alfa omega Grupo. 2009. 68p. Francisco Javier Moldes Teo. Java SEG. Anaya multimedia.2007.304p. Robn Nixon. HTML5 programacin. Madrid. Noviembre 2011. 432p. Pedro CM, CSS Blog.es, (http://www.cssblog.es/ventajas-e-incovenientes-oll usarcss/) consultado 21/04/2013. Slideshare, Desarrollo de Aplicaciones web

http://www.slideshare.net/emiliobg/desarrollo-de-aplicaciones-web-20-con-gwt Monografas.com. S.A. Biblioteca virtual. Introduccin.

42

DESARROLLO DE APLICACIONES WEB Y DE ESCRITORIO (WEB TOP).

http//www.monografias.com/trabajos14/bibliovirtual/bibliovirtual.5html?fbreg=1)

consultado 25/05/13 Grupo de construccin de software Paradigma, revista electrnica

https://ingenieria.uniandes.edu.co/noticias/559-revista-paradigma-invitacion-apublicar

43

44

También podría gustarte