Juez automático para la evaluación de problemas de programación en los primeros cursos de estudios de informática

Juez Automático para la Evaluación de Problemas de Programación en los Primeros Cursos de Estudios de Informática Trabajo de Fin de Grado, Facultad de Informática, Universidad Complutense de Madrid Curso 2012-2013 Realizado por Jéssica Martín Jabón, Javier Martín Moreno-Manzanaro y Pablo Suárez Díaz Proyecto dirigido por Marco Antonio Gómez Martín y Pedro Pablo Gómez Martín Autorización Los abajo firmantes Jéssica Martín Jabón, Javier Martín Moreno-Manzanaro y Pablo Suárez Díaz, matriculados en el TRABAJO DE FIN DE GRADO de la Facultad de Informática, autorizamos a la Universidad Complutense de Madrid (UCM) a difundir y utilizar con fines académicos, no comerciales y mencionando expresamente a sus autores, tanto la presente memoria: “Juez Evaluador de Problemas de Programación”, como el código, los contenidos audiovisuales, la documentación y el prototipo desarrollado durante el curso académico 2012-2013 bajo la dirección de los profesores Marco Antonio Gómez Martín y Pedro Pablo Gómez Martín en el Departamento de Ingeniería del Software e Inteligencia Artificial, y a la Biblioteca de la UCM a depositarlo en el Archivo Institucional E-Prints Complutense con el objeto de incrementar la difusión, uso e impacto del trabajo en Internet y garantizar su preservación y acceso a largo plazo. Jéssica Martín Jabón Javier Martín Moreno-Manzanaro Pablo Suárez Díaz 46928476-N 50231006-H X3612644B En Madrid a 21 de junio de 2013 Agradecimientos Para nosotros, la realización de este proyecto ha supuesto un reto así como el inicio de un camino de autoaprendizaje e investigación. Sin embargo, la satisfacción de haber alcanzado nuestros objetivos (o al menos algunos de ellos), compensa el esfuerzo empleado. La consecución de esa satisfacción, y la madurez adquirida en este y otros proyectos, se la debemos en parte a los profesores (casi todos) que hemos tenido a lo largo de nuestro periplo universitario, y muy especialmente a nuestros directores de este Trabajo de Fin de Grado, Marco Antonio Gómez Martín y Pedro Pablo Gómez Martín, cuya guía ha sido imprescindible. También tenemos que agradecer a varios compañeros, sus opiniones y críticas (constructivas en la mayoría de casos), que nos echaron una mano para identificar algunos fallos y corregirlos en pos de una mejora de nuestro proyecto. Por último, y aunque sirva para terminar el tópico que forman estas líneas, queremos dar las gracias a nuestras familias. A nuestros padres, hermanos y otros allegados, que han ocupado los roles de mecenas, cuidadores, animadores y muchos otros con tal de brindarnos apoyo en nuestro camino hasta el final de manera incondicional. Muchas gracias a todos. Pablo, Jéssica y Javier. Resumen Muchos de los participantes en concursos de programación, entrenan resolviendo problemas típicos de libros de texto, sin embargo, cada vez más, se impone la necesidad de acceso a problemas y evaluaciones de los mismos, a través de la red de redes. En este proyecto, tratamos de resolver esa necesidad, así como de conseguir un mayor calado académico al usarlo como herramienta en un entorno docente real, con usuarios reales, que puedan realizar esos entrenamientos a los que nos referíamos de manera fácil y cómoda, interactuando simplemente con un interfaz web. Palabras Clave AJAX cURL Desafíos de Programación Juez Automático Juez Evaluador Juez On-line JSON PHP Servicios web Web Abstract Many contestants in programming competitions are trained by solving typical algorithm problems from their books, due to this, it is needed a platform through the world wide web that allows users to reach for these exercises and check their skills on them by keeping statistics of the currently solved problems. This project is about to change a reality, to accomplish more student implication by using it as a significant tool. One of our goals is to provide to Universidad Complutense de Madrid with an implement in a learning environment, rising this institution to the same level of other important Universities that have their own online-judges. Keywords AJAX cURL Programming challenges Automatic Judge Evaluator Judge On-line Judge JSON PHP Web Services Web -"No hay preguntas sin respuestas, sólo preguntas mal formuladas"- Morfeo en TheMatrix ÍNDICE Contenido 1.- Introducción ............................................................................................................................. 9 1.1.- Justificación ....................................................................................................................... 9 1.2.- Objetivos ........................................................................................................................... 9 1.2.1. - Expectativas de uso docente en la UCM ................................................................. 10 1.2.2. - Expectativas de uso externo ................................................................................... 10 1.3. - Resumen ......................................................................................................................... 11 2-Estado del arte ......................................................................................................................... 12 2.1. - UVa OnlineJudge [uHunt] (http://uva.onlinejudge.org) ................................................ 12 2.1.1. - Necesidad de registrar ............................................................................................ 12 2.1.2. - Distribución interfaz ................................................................................................ 13 2.1.3. - Ver envíos en tiempo real ....................................................................................... 14 2.1.4. - Clasificación de los problemas ................................................................................ 15 2.2. - Light OJ (www.lightoj.com) ............................................................................................ 16 2.2.1. - Necesidad de registrar ............................................................................................ 16 2.2.2. - Distribución interfaz ................................................................................................ 16 2.2.3. - Ver envíos en tiempo real ....................................................................................... 18 2.2.4. - Clasificación de los problemas ................................................................................ 18 2.3. - Sphere online judge (http://www.spoj.pl.) .................................................................... 19 2.3.1. - Necesidad de registrar ............................................................................................ 19 2.3.2. - Distribución interfaz ................................................................................................ 20 2.3.3. - Ver envíos en tiempo real ....................................................................................... 21 2.3.4. - Clasificación de los problemas ................................................................................ 21 2.4. - Olimpiada Informática Española (http://olimpiada-informatica.org/) .......................... 22 2.4.1. - Necesidad de registrar ............................................................................................ 22 2.4.2. - Distribución interfaz ................................................................................................ 23 2.4.3. - Ver envíos en tiempo real ....................................................................................... 23 2.4.4. - Clasificación de los problemas ................................................................................ 23 2.5 Jutge.org (www.jutge.org) ................................................................................................ 25 2.5.1 Distribución de la página ............................................................................................ 25 2.5.2 Envíos en tiempo real ................................................................................................. 26 2.6 FLOP (Free Laboratory Of Programming) .......................................................................... 27 3. - Arquitectura del Sistema ....................................................................................................... 29 3.1. Servicios Web ................................................................................................................... 29 3.2. PHP + JavaScript ............................................................................................................... 29 3.3 TOMCAT ............................................................................................................................ 31 4.- Estudio de Navegación ........................................................................................................... 32 4.1. - Distribución general ....................................................................................................... 32 4.2. - Estadísticas (Últimos Envíos) .......................................................................................... 34 4.2.1. - Código enviado ........................................................................................................ 35 4.3. - Problemas ...................................................................................................................... 36 4.3.1. - Lista de Volúmenes ................................................................................................. 36 4.3.2. - Lista de Problemas .................................................................................................. 37 4.3.3. - “Mini-site” de un problema .................................................................................... 37 5. - Implementación .................................................................................................................... 41 5.1. - jQuery ............................................................................................................................. 41 5.1.2. Características (solo destacaremos las utilizadas en este proyecto) ........................ 42 5.1.3. Uso............................................................................................................................. 42 5.1.4. Función $() ................................................................................................................. 42 5.1.5. Función $.getJSON (). ................................................................................................ 44 5.2. AJAX .................................................................................................................................. 45 5.2.1. Tecnologías incluidas en Ajax .................................................................................... 46 5.3. GeSHi – Generic Syntax Highlighter (Marcador de sintaxis genérico) ............................. 47 5.4. CodeMirror ....................................................................................................................... 49 5.5. VanadiumJS ...................................................................................................................... 50 5.6. Diagramas de google ........................................................................................................ 52 5.7. Cross-site scripting ........................................................................................................... 54 5.8. cURL .................................................................................................................................. 57 5.9. MathJax ............................................................................................................................ 58 5.10. RECAPTCHA .................................................................................................................... 59 6. – Conclusiones ......................................................................................................................... 62 6.1. – Opiniones y valoraciones .............................................................................................. 62 6.2. – Valoración personal ....................................................................................................... 66 7. – Bibliografía ............................................................................................................................ 68 Introducción 9 1.- Introducción En primer lugar nos gustaría explicar los motivos por los cuales nos sentimos atraídos por este proyecto. La razón principal fue la necesidad de cursar los créditos obligatorios del Trabajo de Fin de Grado (en futuras alusiones TFG); de entre los proyectos que se ofertaban, lo primero que nos llamó la atención fueron los directores de proyecto Marco Antonio Gómez Martín y Pedro Pablo Gómez Martín. Nos entusiasmó la idea de trabajar con tan cualificados profesores con los que ya habíamos tenido trato en el pasado. En segundo lugar cuando compartieron con nosotros su idea del proyecto, la idea nos motivó aún más, ya que no sólo tendríamos la oportunidad de trabajar mano a mano con ellos sino que además podríamos contribuir con la facultad. Por último, la posibilidad de adentrarnos en las tecnologías web, nos llamó especialmente la atención, dado el uso y la proyección de futuro que tienen estas tecnologías. 1.1.- Justificación Nuestro proyecto pretende ser una fuente de conocimiento para aquellas personas que se inician en el mundo de la algoritmia. Pese a que este tipo de sistema no es novedoso en su funcionamiento, sí lo es al tipo de persona al que va dirigido. Normalmente los jueces de problemas, como el que hemos desarrollado, están destinados al entrenamiento para concursos; sin embargo nuestra aplicación sirve para aprender, con unos problemas cuyo nivel es más asequible y adecuado. De este modo también se pretende conseguir un efecto positivo que mantendrá a la gente motivada, teniendo en cuenta que serán personas que se están iniciando en este tipo de conocimiento. 1.2.- Objetivos El objetivo fundamental de este proyecto es conseguir un juez de resolución de problemas que se pueda aplicar al ámbito docente, y no sólo a concursos de programación; es decir conseguir una herramienta de apoyo en el proceso de aprendizaje necesario para formarse en el campo de la resolución de problemas de programación. Así pues, a la evaluación de problemas, se añaden ciertas funciones como la descripción de los errores o la aportación de pistas que ayuden a alcanzar la solución correcta. Además, debido precisamente al carácter docente con el que se impregna la aplicación es especialmente útil, para ser usada en asignaturas de programación en el entorno universitario, como de hecho se pretende hacer con algunos cursos de la Facultad de Informática en la asignatura de EDA (Estructuras de Datos y Algoritmos). Estado del arte 16 2.2. - Light OJ (www.lightoj.com) Este juez evaluador de problemas fue creado por Jane AlamJam. El lenguaje que se usa en esta página es el inglés, y no dispone de ninguna opción para cambiarlo. 2.2.1. - Necesidad de registrar Para tener acceso al contenido de la paginas, es necesario estar registrado y logueado, ya que de otro modo no se puede ver ningún tipo de información, ni si quiera se da la opción de ver la lista de problemas. Tan sólo aparecen dos cuadros de texto (Nick/mail y contraseña) y un enlace para ir a un formulario de registro. Como usuario es poco amigable el hecho de que no te deje navegar por la página, puesto que si estás buscando un juez evaluador de problemas, antes de ceder tus datos es preferible ver el tipo de problemas que tiene, servicios que pueden usarse, etc. 2.2.1.1. – Formulario de registro Para registrarnos en la página web es necesario introducir el nombre (no más de 100 caracteres), el nombre de una universidad (no más de 100 caracteres), seleccionar un país (están en inglés ordenados alfabéticamente), el email y para comprobar que no eres un bot te hacen una pregunta que es una operación numérica del estilo “¿Cuál debería ser el resultado de sumar 72 y 68?” para responder a la pregunta hay un campo de texto en el que se escribe la respuesta. 2.2.2. - Distribución interfaz La página consta de dos menús uno en la parte superior y otro lateral cuyas opciones cambian según la opción que hayas seleccionado en el menú superior. Estado del arte 17 Opciones del menú superior: Home: muestra la página de inicio, con un mensaje de bienvenida, también puedes ver tu perfil. Volume: permite ver los problemas (organizados por volúmenes), categorías, enviar un problema o ver tus envíos Contest: permite ver los concursos que están abiertos en ese momento además de los concursos para coger práctica. Training: para entrenar. Community: permite ver los foros. Credits: muestra quién lo ha desarrollado y unos agradecimientos. Para ver el recorrido por el menú lateral hablaré de las opciones que haya dependiendo de la opción del menú superior que se haya marcado. - Home El menú lateral se divide en dos submenús. De la primera mitad las opciones más relevantes son: MyInfo: muestra un formulario en el que se permiten cambiar los datos que introdujiste en el registro, además de añadir más información como el lenguaje de programación, la zona horaria, la institución, el país, etc. Logout: Un enlace que permite dejar de estar autentificado. La segunda mitad contiene las opciones referentes al manejo de los mensajes que se pueden intercambiar los usuarios entre sí, y no vamos a profundizar en ellas. - Volume En este submenú las opciones más destacables son: Problem set: muestra una tabla con los problemas, agrupados por volúmenes. Submit problem: muestra el formulario para enviar un problema, en el que hay que rellenar un campo para identificar el problema y el lenguaje de programación, que se rellena automáticamente con la opción que seleccionaste en tu perfil. Para enviar el código sólo es posible a través de un cuadro de texto, destinado a tal efecto. My submission: muestra una tabla con los últimos 20 envíos del usuario. Las columnas de dicha tabla son: id del envío, fecha del envío, título del problema, lenguaje de programación, uso de la CPU, uso de la memoria y veredicto. Judge status: muestra los últimos 50 envíos de todo el juez. Estado del arte 18 Ranklist: da la opción de ver diferentes rankings ordenados por usuarios. Hay varios rankings, como el de usuarios que más problemas han resuelto (en la tabla se muestra la posición del ranking, el nombre del usuario, el número de problemas resueltos y el número de problemas intentados), el de número de problemas resueltos por países, el de número de problemas resueltos por tus amigos (es igual que la tabla de los usuarios con más problemas resueltos pero sólo con los usuarios que tengas marcados como amigos). Userstatistics: muestra las estadísticas de tu usuario. En ellas aparecen los datos de tu perfil y dos tablas; una con el número de problemas resueltos, problemas enviados, total de envíos, el número de mensajes en el foro y la posición del ranking que ocupas; además de mostrar una gráfica de barras con los veredictos de tus problemas. La otra tabla muestra una lista con los id de los problemas resueltos. 2.2.3. - Ver envíos en tiempo real Puedes ver los envíos que los usuarios están realizando en tiempo real, para ello se muestra una tabla con los campos de id del envío, fecha del envío, nombre del usuario, título del problema, lenguaje de programación, uso de la CPU, uso de la memoria y veredicto. 2.2.4. - Clasificación de los problemas Los problemas están agrupados, por defecto, en volúmenes de 100 problemas cada uno pudiendo verlos además agrupados por categoría o por autor. Lo más destacable de esta última agrupación es que si seleccionamos un autor nos muestra una lista con todos los problemas que ha creado. Estado del arte 19 2.3. - Sphere online judge (http://www.spoj.pl.) Este juez es bastante amigable, el idioma que usa es el inglés y no dispone de ninguna opción para cambiarlo por otro. Es destacable la cantidad de publicidad que hay, en todas sus páginas, y además no está relacionada con el tema de los algoritmos 2.3.1. - Necesidad de registrar Es necesario autentificarse si se quiere enviar un problema, pero para todo lo demás la web te deja que navegues por ella, de hecho incluso la opción de submit la puedes pulsar y ves el formulario de envío en el que hay un cuadro de texto para escribir el código, también se puede seleccionar un archivo que tengas en el ordenador, seleccionar el lenguaje y escribir el código del problema. Pero si no estás registrado y le das a enviar te redirige a una página en la que se te recomienda crearte una cuenta y en la columna de la izquierda aparece un cuadro de login. Además también aparece en el menú la opción de ver tu perfil, la cual nos lleva a las estadísticas de nuestro usuario tales como la posición en el ranking que ocupa, los puntos conseguidos, el nick, el país, y una tabla con el número de problemas resueltos, enviados, aceptados, el número de problemas wrong answer, con error de compilación, con error en tiempo de ejecución y con tiempo límite excedido. En esta misma página también dispones de varios enlaces, uno para modificar tus datos de usuario, además también puedes pedirles trabajo y ver el historial de tus envíos. 2.3.1.1. – Formulario de registro El formulario de registro es diferente a como habitualmente son los formularios de registro. Al pulsar en la opción de registro no redirige a una página en la que sólo se nos pide un nombre de usuario. Una vez has escrito un usuario válido le das a “Continue” y te redirige a otra página en la que hay más campos que rellenar, menos el de elegir un nick que ya se eligió en la página anterior y te lo muestran, el resto de campos son: tu nombre, el email, la contraseña, el país, el lenguaje de programación, la institución y la url, aunque estos dos campos son opcionales. Además hay una serie de opciones que puedes marcar como pedir que te envíen los resultados por correo, que te manden notificaciones de eventos relacionados con spoj, etc. Estado del arte 20 2.3.2. - Distribución interfaz La página web tiene una distribución simple pero bastante amigable, consta de un menú lateral izquierdo fijo en el que se muestran todas las opciones de las que dispone la web, según la opción seleccionada cambia el contenido de la página. Register: enlaza al formulario de registro del que ya he hablado. Tutorials: esta página muestra enlaces a cuatro tutoriales sobre nuevos usuarios, problemas, problemas interactivos, problemas de concurso. También hay información de que es spoj y una pequeña guía de cómo empezar. Status: muestra una tabla con los últimos envíos, en el punto 2.3.3 hablaré de ello con profundidad Submit: enlace a la página de enviar un problema de la que ya he hablado. Problems: muestra la lista de problemas, de la organización de ellos hablaré en el punto 2.3.4. Search: es un cuadro de búsqueda de google. news: es la página principal, muestra información de concursos, número de total de envíos, número de usuarios registrados, número de problemas publicados, total de problemas, número de instituciones afiliadas, número de concursos afiliados, número de lenguajes de programación. Estado del arte 21 Contest: este enlace te redirige a una página que consta de dos tablas una con los concursos que están actualmente activos, y la otra con concursos ya terminados, en ambos los campos son código del concurso, nombre, fecha de inicio y fecha de fin. Si pulsas en el nombre de un concurso que esté abierto te redirige a otra página similar a spoj pero con la información del concurso, sino simplemente te redirige a una página con el nombre del concurso pero sin información. Ranks: Hay diferentes rankings, se muestran en forma de tabla según, usuarios, en este se valora los puntos obtenidos, además también se muestran la posición del ranking, las siglas del país, el nombre del usuario, cantidad de problemas resueltos y los puntos conseguidos, y el número de retos y los puntos conseguidos. Por países, similar al de los usuarios, etc. Foro: tiene acceso a un foro, pero es independiente de la página 2.3.3. - Ver envíos en tiempo real La página también dispone de una tabla que permite ver los envíos en tiempo real , dicha taba consta del id del envío, la fecha del mismo, el nombre del usuario que lo ha enviado, el título del problema, el resultado, el tiempo de CPU, el tiempo en memoria y el lenguaje de programación. Para que sea más intuitiva las filas de la tabla son de dos colores, verdes si el problema ha sido aceptado y naranja en cualquier otro caso. La longitud de la tabla es de veinte filas, además hay cuatro páginas más por lo que podrías ver los últimos 100 problemas enviados. 2.3.4. - Clasificación de los problemas La clasificación de los problemas se puede hacer de cinco formas, por el id del problema, por reto, por problemas para aficionados, problemas sencillos, lista de problemas de enigma. Las tablas que muestran los problemas contienen las mismas columnas, id del problema, título del mismo, código (es el que hay que introducir para hacer el envío), número de usuarios que lo han resuelto y porcentaje de acierto. Estado del arte 22 2.4. - Olimpiada Informática Española (http://olimpiadainformatica.org/) La Universidad Politécnica de Cataluña es la encargada, actualmente de organizarla. El idioma que se usa en la página por defecto es el castellano, aunque es posible modificarlo al catalán. 2.4.1. - Necesidad de registrar Es necesario registrarse y autentificarse para hacer uso del total de las opciones disponibles, no obstante sin autentificarse podemos navegar por la página ya que la mayoría de las opciones las pueden ver tanto los usuarios registrados como los que no. Además, para facilitar las cosas, en el menú lateral izquierdo, en el cual aparecen las opciones, tienen un asterisco aquellas opciones en las que para acceder a ellas es necesario estar registrado. Dichas opciones son: - Material: se despliega un submenú para poder acceder a las secciones de manuales de programación, soluciones de problemas de pruebas anteriores (OIE 2008, 2009 y 2010, aunque no están todos los problemas), videotutoriales en C++, para ayudar a iniciarte en este lenguaje y un juego en el que los usuarios pueden crear programas para que compitan con otros jugadores. - Problemas: En este enlace se puede acceder a la lista de los problemas, dispone de varias páginas, de esta forma se ven mejor los problemas disponibles. - Datos personales: enlace que te permite no sólo ver tus datos, sino que también tienes de modificarlos, como por ejemplo la contraseña, ya que cuando te creas una cuenta te mandan ellos una aleatoria. 2.4.1.1. – Formulario de registro Para acceder al formulario de registro pulsaremos en el enlace que hay encima del login “Date de alta en la web”, éste nos mostrará un formulario con campos de texto para introducir los datos solicitados, los cuales son: nombre, primer apellido, segundo apellido, DNI, fecha de nacimiento, dirección, población, provincia, código postal, teléfono, email, el idioma (puedes seleccionarlo a través de un desplegable), también te piden información académica relativa a tu centro de estudio, decir si eres alumno o profesor (ambas opciones aparecen en un desplegable), si quieres o no participar en la OIE, curso, centro docente, dirección, población, provincia, código postal, teléfono, e-mail, por último, se muestran las bases del concurso y un desplegable para decidir si las aceptas o no. No disponen de ningún mecanismo para saber si eres un bot o no, como captchas, preguntas de operaciones numéricas, etc. Estado del arte 23 2.4.2. - Distribución interfaz La página consta de una columna lateral izquierda que se divide a su vez en cuatro apartados, el primero es el menú del sitio con las opciones  Principal: que redirige a la página de bienvenida en la que se informa de los nuevos concursos, además de un enlace al foro y otro enlace al correo de la web y en el centro de la página se mencionan a los patrocinadores, así como información general de la Olimpiada Informática Española.  Más información: muestra información sobre la Olimpiada Informática, así como información específica para alumnos y para los profesores.  Concursos: se muestran información de los concursos activos así como de los ya finalizados, de estos últimos se muestra un ranking con los resultados de los tiempos y puntuación que obtuvieron los participantes.  OIE 2012OIE 2007: cada enlace muestra la normativa del concurso, así como información de cómo se organiza, fases del concurso, resultados de la fase on-line y de la fase final.  El segundo apartado permite seleccionar el idioma (castellano o catalán), el tercero es el de login en el que se deben introducir el usuario y la contraseña, por último, en el cuarto apartado se encuentra la información de contacto, es decir el email de la persona a la que debes escribir en caso de error. 2.4.3. - Ver envíos en tiempo real Está página web, no permite ver los envíos que se están produciendo en tiempo real, no obstante sí puedes ver los envíos que has realizado. De hecho, cuando envías un problema, ves, a los pocos segundos el veredicto. 2.4.4. - Clasificación de los problemas Los problemas se clasifican por 10 categorías y por concurso 32 concursos. El enlace que se encuentra en el menú principal, cuya opción es “Problemas (con juez)” sólo muestra el título de problema, el cual es un enlace al enunciado. Estado del arte 24 Estado del arte 25 2.5 Jutge.org (www.jutge.org) Para concluir con el estudio del panorama en el ámbito que nos ocupa, rescatamos otro juez creado por Omer Giménez (creador también de OIE), en el que también han colaborado Salvador Roura y Jordi Petit. En este caso realizamos un repaso más ligero, ya que consideramos que este juez, no aporta detalles especialmente novedosos con respecto a los ya expuestos. 2.5.1 Distribución de la página Lo primero que apreciamos en diferencia con el OIE, es el idioma, está en inglés y no se observa la opción de cambiarlo, como sucedía en la otra web. La página dispone de una columna lateral izquierda, en ella está el cuadro para hacer login y los enlaces disponibles sin estar autentificado. Tiene pocas opciones visible si no estás registrado, es más las únicas opciones disponibles son, enlace para acceder al formulario de registro, el cual te pide que rellenes ciertos campos como el nombre, el email, fecha de nacimiento, país, lenguaje(aquí sí que no da la opción de elegir entre varios idiomas, español, catalán, francés e inglés), un desplegable para elegir si estamos de acuerdo con la política de la web, y escribir el código de seguridad para comprobar que es una persona el que se está registrando. Otro de los enlaces, es por si has olvidado tu contraseña, también hay otro enlace para usar una cuenta de prueba por si no te quieres crear una, para ello sólo pulsas el enlace y se rellenan automáticamente los campos de usuario y contraseñas El enlace para ver los exámenes, pese a que es visible sin estar logueado, te muestra un mensaje pidiendo que te identifiques. Por último hablaré del enlace de los concursos, que sí es visible aunque no estés logueado, el enlace te muestra dos listas, uno con los concursos activos y otra con los que ya han Estudio de Navegación 32 4.- Estudio de Navegación A continuación detallamos las características del sitio web y sus opciones en cuanto a navegación se refiere. Lo primero es entender qué queremos decir cuando nos referimos a la navegabilidad web, esto es, la facilidad con la que un usuario puede desplazarse por las distintas páginas web que componen el sitio. Para alcanzar un grado satisfactorio en la experiencia de navegación se deben adoptar ciertas estrategias diseñadas especialmente para tal fin, mejorando a la vez la usabilidad global de la aplicación. Seguidamente analizamos y explicamos las decisiones tomadas a este respecto: 4.1. - Distribución general Se ha realizado una división en partes del sitio con el objetivo de aunar el contenido bajo un mismo estilo que establezca la “seña de identidad” de la aplicación y consiga hacer sentir al usuario que en entra en un espacio acotado. Así pues, disponemos de una cabecera y un pie de página no cambiantes y un lateral adaptable al usuario y su estado en la web. En la cabecera, mantenemos un menú global con el que ofrecemos acceso desde cualquier página del sitio a la información más relevante de la aplicación. En concreto permitimos volver al índice, acceder a la lista de problemas (organizada por volúmenes), ver una tabla con los últimos envíos realizados (actualizada en tiempo real) y consultar documentación acerca del sitio ofreciendo algunas guías y consejos para ayudar a aquellos usuarios más desorientados. Estudio de Navegación 33 Por otra parte, en el pie, además de los créditos sobre el estilo utilizado, incluimos un enlace “¿Quiénes somos?” que dirige a una página con algo de información sobre los “padres” de la aplicación, y un reloj que muestra la hora del servidor como referencia para visitantes foráneos. Por último, pero no menos importante, incluimos un panel lateral en el que se recogen distintas funcionalidades:  Búsqueda: Un usuario puede buscar un problema concreto desde cualquier página de la web, simplemente introduciendo su número de problema.  Login/información del usuario: En el caso de un visitante no logueado, se mostrará un pequeño formulario para ingresar nombre de usuario y contraseña y autentificarse así, en el sitio, y un enlace al formulario de registro, para aquellos usuarios que aún no se hayan dado de alta en el sistema. Una vez logueado, sin embargo, este cuadro cambiará su contenido y pasará a mostrar un mensaje de autentificación, así como sendos links para ver sus últimos envíos, hacer logout, y ver su perfil. Para facilitar la navegación es importante hacer notar que la acción de loguearse te mantiene en la misma página para mayor comodidad.  Menús: Dependiendo de la página que se visite, se mostrará un menú de navegación en la parte superior del lateral con enlaces a distintos contenidos relacionados con la página que se está viendo. Con esta organización, dejamos un sector de la pantalla despejado para mostrar los contenidos en sí. Estudio de Navegación 34 4.2. - Estadísticas (Últimos Envíos) En esta página se muestra una tabla que se actualiza en tiempo real, con la información de los últimos 20 envíos de problemas que se han recibido. Esta tabla ofrece datos de la evaluación del problema, estado y demás, pero las columnas más relevantes en cuanto a navegación se refiere son las tres primeras:  Num: Muestra el número del envío. Si el usuario está logueado y tiene además los permisos requeridos, se mostrará en forma de enlace a otra página que muestra el código fuente del problema resuelto en ese envío, facilitando así el acceso al mismo.  User: Muestra el nick del usuario que ha hecho el envío. Dicho nombre será siempre un link al perfil del usuario, que mostrará su información.  Problem: Muestra el título del problema resuelto en ese envío. De nuevo, este nombre será siempre un link a la página del problema. Con estos enlaces, se mejora notablemente la usabilidad del sitio, además de resultar más práctico y cómodo, para labores de administración. Estudio de Navegación 35 4.2.1. - Código enviado Esta página sólo es accesible por administradores (para todos los envíos), o por los usuarios autores del envío que se está viendo. Esta funcionalidad es especialmente útil de cara a la adición de futuras funcionalidades relacionadas con la formación de clases, para que los profesores tengan fácil acceso al código de los alumnos. Estudio de Navegación 36 4.3. - Problemas En esta sección detallaremos la navegación por la web entre páginas con contenidos referentes a los problemas. 4.3.1. - Lista de Volúmenes En esta página, mostramos una lista de los volúmenes que hay en el momento de la visita en forma de tabla. Los volúmenes se identifican por su número de volumen, que se mostrará dentro de un enlace, que dirige a la lista de problemas del volumen. Asimismo, se mostrarán unas estadísticas para que el usuario pueda hacerse una idea de lo fácil o difícil, que son los problemas incluidos en el volumen. Estudio de Navegación 37 4.3.2. - Lista de Problemas En esta página se muestra la lista de problemas, de nuevo en forma de tabla. Las columnas que se incluyen en esta ocasión son:  ID del problema: Es un número identificador del problema. Cada volumen consta de 100 problemas, así que para ubicar el problema rápidamente se adopta una nomenclatura en la que a cada número de problema (0-99) se antepone el número de volumen (1-N). Así pues, el volumen 3 contiene los problemas 300-399, el volumen 7 los problemas 700-799, etc.  Título: Es el título del problema. Tanto este campo, como el ID anterior son links al “mini-site” del problema. Se podría haber dejado un sólo enlace, pero de esta manera resulta más fácil llegar a la información del problema.  Estadísticas de envíos: En esta columna se muestra una pequeña barra de progreso que muestra el estado del problema en referencia a la relación “envíos con resultado AC (Accepted) / envíos totales”.  Estadísticas de usuarios: En esta columna se muestra una pequeña barra de progreso que muestra el estado del problema en referencia a la relación “usuarios que tienen al menos un envío con estado AC (Accepted) / total de usuarios que ha intentado el problema”. 4.3.3. - “Mini-site” de un problema Al seleccionar un problema, “descendemos un nivel” en la profundidad de la navegación, y la vista muestra un encabezado con el nombre del problema fijo para todas las páginas del mismo Estudio de Navegación 38 4.3.3.1 - Enunciado En esta página mostramos el enunciado del problema. Los enunciados contienen un formato concreto con las entradas y las salidas esperadas del problema. Por este motivo, lo formateamos con estilos distintos para resaltar el contenido y mejorar la comprensión de los enunciados. 4.3.3.2 - PDF En esta página, simplemente mostramos en una pestaña nueva el mismo enunciado en formato pdf, utilizando el visor del navegador. Estudio de Navegación 39 4.3.3.3 - Enviar En esta página se realizará el envío del problema. Para ello se deberá elegir el lenguaje a usar en la implementación y posteriormente escoger entre introducir el código directamente en el editor incluido, o subir un fichero con la solución a entregar. El envío sólo será posible si el usuario está logueado. Además el envío de una solución a partir de un fichero, siempre tendrá prioridad, sobre una solución introducida en el editor, en caso de haber rellenado ambas cosas, y así se hará notar mediante un aviso al elegir subir un fichero. 4.3.3.4 - Estadísticas La página de estadísticas de un problema recoge información relevante del problema. En primera instancia se podrán ver un gráfico de tarta en tres dimensiones con los porcentajes de envíos hechos en los distintos lenguajes de programación; y un gráfico de barras (horizontal) con la cantidad de envíos de ese problema de las distintas evaluaciones posibles (AC, WA, CE, etc...). A continuación se muestra, en caso de haberse logueado, el mejor envío realizado para ese problema por el usuario que ha iniciado sesión. Por último, se dispone de una tabla con los veinte mejores envíos hechos para ese problema. La información que se muestra es: posición del envío, número de envío, usuario que efectuó mandó el problema con enlace al perfil del usuario, lenguaje usado en la implementación, tiempo de ejecución, memoria usada, y fecha de envío. Estudio de Navegación 40 Implementación 41 5. - Implementación En esta sección se explicarán aquellos aspectos de implementación más relevantes, como librerías usadas, funciones importantes u otros detalles. 5.1. - jQuery jQuery jQuery 1.9 Released Desarrollador Equipo de desarrollo http://jquery.com/ Información general Diseñador John Resig Lanzamiento inicial 26 de agosto de 2006(info) Última versión estable 1.9 (info) 15 de enero de 2013; hace 2 meses Género Biblioteca Programado en JavaScript Sistema operativo Multiplataforma Licencia GPL y MIT Idiomas Inglés (documentación) En español * JQueryes una biblioteca de JavaScript que facilita la forma de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y utilizar técnicas AJAX en páginas web. JQueryes software libre y de código abierto, tiene un doble licenciamiento bajo la licencia MIT y la Licencia Publica General de GNU v2. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio. Implementación 48 Incluimos la clase php desde donde se hace uso de la funciones de la librería. Utilizamos las funciones de la clase pasándole los parámetros adecuados. Este es el resultado final. Código c++ Código java Implementación 49 5.4. CodeMirror CodeMirror es una librería externa que nos permite transformar cualquier elemento de nuestra página web en un editor de código integrado que soporta muchos de los lenguajes más utilizados en la actualidad. Compatible con los navegadores Firefox, Chrome, Safari, Opera e Internet Explorer y con soporte de HTML, CSS, PHP, C, C++, C#, Java, Perl, PHP, JavaScript, Python, Lua, Go, Groovy o Ruby, con la ayuda de su API, el editor puede ser totalmente configurado. CodeMirror incluye en su editor de código con licencia MIT el coloreado de sintaxis dependiendo del lenguaje en el que estemos escribiendo, autocompletado, vista previa de HTML,... La forma de utilizarlo es bastante sencilla, primero necesitamos el código que lo podemos descargar de la página oficial, en nuestro caso lo hemos colocado dentro de la carpeta JS. Una vez tenemos la librería dentro de nuestro proyecto enlazamos los distintos JS y CSS. El ultimo paso es marcar un textarea como elemento para aplicar el codemirror y llamar a la funcion. Este es el resultado final de la transformación del textarea en nuestro editor codemirror. Implementación 50 5.5. VanadiumJS Valida el contenido de las entradas de texto (input text y check) de los formularios HTML. Por eso decimos que trabaja de la lado-cliente, pues verifica los datos según una condición específica y luego se envía los datos al servidor. Es una herramienta que trabaja con llamadas AJAX no-obstructivas haciendo uso de jQuery. Es una utilidad poderosa e intuitiva fácil de instalar y usar tal. Respecto a la librería que hemos utilizado llamada VanadiumJS cabe destacar la sencillez de su configuración además de que es fácilmente personalizable para adaptarla a nuestras necesidades. Vamos a ver cómo funciona. Para empezar, lo primero que haremos es explicar cómo hemos de configurar la librería e instalarla. En la carpeta JS guardamos en primer lugar la librería de JQuery que podemos encontrar en su web es importante que también tengamos la librería se JQuery, en nuestro caso esta enlazada en la cabecera, como era de esperar hace uso de JQuery. En la carpeta de CSS ponemos las hojas de estilo. Es una hoja de estilos sencilla de personalizar puesto que los nombres que llevan cada uno de los estilos son bastante intuitivos. css js Finalmente en la cabecera enlazamos estos archivos. Implementación 51 Vanadium usa el atributo class de los elementos de los formularios para que en él se escriban los ajustes que sean necesarios. Veamos un ejemplo con el que se validaría un campo de texto en el que se espera un e-mail. <input id="email" name="email" type="text" class=":email"/> Se puede observar que hay un símbolo de dos puntos (:) al principio de cada ajuste. En este caso estaríamos indicando que se realizara una validación según la expresión regular de un email. Si hacemos la prueba de este código veremos que realiza la validación por cada evento que ocurre en la caja de texto, si no queremos este comportamiento se puede cambiar para que lo realice pasado un tiempo después de un evento o para que lo realice sólo cuando el campo se abandone (terminar de escribir y pasar al siguiente campo). Otro aspecto importante es que en el ejemplo anterior se podría no escribir nada en la caja de texto y pasar la validación sin problemas, si se quiere que esto sea un campo requerido habría que usar otro ajuste. <input id="email" name="email" type="text" class=":email :required : only_on_blur"/> También es posible la validación de otro tipo de campos a parte del email que va vienen implementados por defecto con la librería. Podemos encontrar en la página web del proyecto una lista de las posibilidades admitidas. Veamos por ejemplo como validar un campo típico en el que se pide que repitas la contraseña, para comprobar que has escrito lo mismo en los dos lugares. Implementación 52 Contraseña <input id="pass" name="pass" type="password" class=":password :required : only_on_blur"/> Reescriba la contraseña por seguridad<br /> <input name="repeatPass" type="password" class=":same_as;pass :required : only_on_blur"/> 5.6. Diagramas de google Para una mejor interpretación de las estadísticas hemos incorporado dos tipos de graficas: de tartas y de barras. Para la implementación de estos diagramas hemos utilizado la una api de google llamada Google charts. La api permite muchas opciones de configuración sobre las que no entraremos en detalles, basta con mencionarlas. Visualización: Gráfico de tartas 1. Visión de conjunto 2. Ejemplo 3. Carga 4. Formato de datos 5. Opciones de configuración 6. Métodos Implementación 53 7. Eventos 8. Política de datos Estas imágenes muestran una forma simple de utilizar esta api para hacer los dos tipos de graficos de tartas y de barras. Lo primero es enlazar la api a nuestra web. Una vez enlazado podemos utilizar las funciones de la api Implementación 54 En la siguiente imagen vemos como se incrustan en el html los gráficos, previamente en data1 y data2 tenemos los datos que se quieren mostrar. El resultado final es el siguiente: 5.7. Cross-site scripting XSS, del inglés Cross-site scripting es un tipo de inseguridad informática o agujero de seguridad típico de las aplicaciones Web, que permite a una tercera parte inyectar en páginas web vistas por el usuario código JavaScript o en otro lenguaje script similar, evitando medidas de control como la Política del mismo origen. Es posible encontrar una vulnerabilidad XSS en aplicaciones que tenga entre sus funciones presentar la información en un navegador web u otro contenedor de páginas web. Sin embargo, no se limita a sitios web disponibles en Internet, ya que puede haber aplicaciones locales vulnerables a XSS, o incluso el navegador en sí. XSS es un vector de ataque que puede ser utilizado para robar información delicada, secuestrar sesiones de usuario, y comprometer el navegador, subyugando la integridad del sistema. Las vulnerabilidades XSS han existido desde los primeros días de la Web. Esta situación es usualmente causada al no validar correctamente los datos de entrada que son usados en cierta aplicación, o no sanear la salida adecuadamente para su presentación como página web. Implementación 55 Esta vulnerabilidad puede estar presente de las siguientes formas: • Directa (también llamada Persistente): este tipo de XSS comúnmente filtrado, y consiste en embeber código HTML peligroso en sitios que lo permitan; incluyendo así etiquetas como <script> o <iframe>. • Indirecta (también llamada Reflejada): este tipo de XSS consiste en modificar valores que la aplicación web utiliza para pasar variables entre dos páginas, sin usar sesiones y sucede cuando hay un mensaje o una ruta en la URL del navegador, en una cookie, o cualquier otra cabecera HTTP (en algunos navegadores y aplicaciones web, esto podría extenderse al DOM del navegador). Para solucionar este problema hemos utilizado la función de php Htmlspecialchars() htmlspecialchars — Convierte caracteres especiales en entidades HTML Descripción: string htmlspecialchars ( string $string [, int $flags = ENT_COMPAT | ENT_HTML401 [, string $encoding = 'UTF-8' [, bool $double_encode = true ]]] ) Ciertos caracteres tienen un significado especial en HTML y deben ser representados por entidades HTML si se desea preservar su significado. Esta función devuelve un string con estas conversiones realizadas. Si el string de entrada pasado a esta función y el documento final comparten el mismo conjunto de caracteres, esta función es suficiente para preparar entradas para su inclusión en la mayoría de los contextos de un documento HTML. Las traducciones realizadas son: • '&' (et) se convierte en '&' • '"' (comillas dobles) se convierte en '"' cuando ENT_NOQUOTES no está establecido. • "'" (comilla simple) se convierte en ''' (o ') sólo cuando ENT_QUOTES está establecido. • '<' (menor que) se convierte en '<' • '>' (mayor que) se convierte en '>' Implementación 56 A continuación mostramos un ejemplo de un ataque de este tipo En este otro caso hemos utilizado la función htmlspecialchars Implementación 57 5.8. cURL Es una herramienta para usar en un intérprete de comandos para transferir archivos con sintaxis URL, soporta FTP, FTPS, HTTP, HTTPS, TFTP, SCP, SFTP, Telnet, DICT, FILE y LDAP. cURL soporta certificados HTTPS, HTTP POST, HTTP PUT, subidas FTP, Kerberos, subidas mediante formulario HTTP, proxies, cookies, autenticación mediante usuario+contraseña (Basic, DIgest, NTLM y Negotiate para HTTP y kerberos4 para FTP), continuación de transferencia de archivos, tunneling de proxy http y muchas otras prestaciones. cURL es open source/software libre distribuido bajo la Licencia MIT. Algunas de las funciones del curl que utilizamos en esta aplicación son las siguientes • curl_close — Cierra una sesión cURL • curl_exec — Establece una sesión cURL • curl_getinfo — Obtiene información relativa a una transferencia específica • curl_init — Inicia sesión cURL • curl_setopt — Configura una opción para una transferencia cURL curl_setopt($handle,CURLOPT_CUSTOMREQUEST,[PUT|DELETE|OPTIONS]); Esta función la empleamos para invocar a los distintos servicios web que nos proporcionan información de la base de datos. La invocamos desde php para montar las páginas que requieren información de estos WS. Ejemplos de uso: En este otro ejemplo solicitamos el HTML que contiene el enunciado de un problema Conclusiones 64 Credenciales (nombre, apellido, asignatura, cargo…) Profesor de Estructura de Datos y Algoritmos, en 2º de los grados Opinión del proyecto Me parece muy útil para que los alumnos se animen a programar, y la utilidad aumenta en la medida en que la base de problemas utilizados sea lo suficientemente amplia. Aunque lo he utilizado poco, a primera vista lo único que “mejoraría” es que no sé a qué responden los volúmenes de problemas, por lo que a priori no sé dónde me interesa entrar para comenzar a resolver problemas. Aplicación docente Para una asignatura como EDA puede resultar una herramienta muy útil, pero para que los estudiantes no pierdan el tiempo debería ser posible dirigirlos hacia los volúmenes de problemas que interesen para un tema concreto. Otra cuestión es que no se analiza la calidad del código, lo cual es importante en una asignatura como EDA. Ventajas Disponer de una amplia colección de problemas a resolver con un conjunto completo de casos de prueba que pongan a prueba la robustez (y la eficiencia) de su código. Inconvenientes Se pasan por alto todas las chapuzas que se suelen meter en el código para conseguir que funcione, aunque sea de manera eficiente. Y aunque no es un inconveniente realmente, se fomenta la idea de que el diseño de los algoritmos y la formalización no son especialmente importantes, lo cual es un poco contrario a lo que se intenta enseñar en una asignatura como EDA. Predisposición a la implantación en sus clases MUY alta. Conclusiones 65 Credenciales (nombre, apellido, asignatura, cargo…) Profesor de asignatura Metodología de la Programación en los títulos de Ingeniería (la equivalente a Métodos Algorítmicos en la Resolución de Problemas en los grados) y de Programación II en el Grado en Estadística Aplicada. Opinión del proyecto El proyecto tiene bastante interés tanto desde el punto de vista docente como del trabajo de los alumnos que lo están desarrollando. Aunque la versión del sistema que he probado todavía no está terminada, creo que es un sistema muy completo y que permite a los alumnos que lo han desarrollado aplicar técnicas muy diversas. Aplicación docente En las asignaturas de programación su utilidad es directa, porque permite a los alumnos aprender de forma autónoma. En relación con este aspecto, es importante que el alumno tenga una respuesta relevante del sistema para que pueda aprender de los errores cometidos. He añadido algunos comentarios respecto a esto en el apartado de Inconvenientes. Ventajas Aunque mi experiencia en el uso de jueces automáticos es limitada, creo que este sistema tiene características que lo hacen especialmente interesante. Por un lado, tener un servidor de corrección de programas basado en una cola de espera es interesante porque no bloquea el sistema si se quieren realizar múltiples envíos. En este caso, sería interesante tener más información del estado del servidor (en alguna de las pruebas que he realizado la única forma de saber que el servidor estaba parado ha sido esperar suficiente tiempo). Por otra parte, es muy interesante disponer de información sobre el tiempo de ejecución y la memoria consumida por otras soluciones del mismo problema. En este caso, sería interesante poder filtrar la información de usuarios (por ejemplo, solamente del usuario con el que se ha realizado el envío, o un grupo reducido de usuarios). En las pruebas realizadas no era fácil ver el ejemplo enviado en el ranking debido al gran número de datos almacenados en el sistema. Inconvenientes El inconveniente principal para su uso como aplicación docente es que no dispone de un modo en el que se indique la salida del compilador en el caso de errores de compilación, o los casos en los que no funciona correctamente el programa en el caso de respuesta incorrecta. He mostrado recientemente un sistema similar a mis alumnos en un curso de programación. Aunque no he preguntado directamente a los alumnos su experiencia con el sistema, mi impresión es que su uso ha sido bastante reducido. La falta de información sobre los Conclusiones 66 problemas que ha encontrado el juez con los programas enviados creo que es determinante en su adopción como herramienta habitual por parte de los alumnos (y los profesores). El uso de una cola de tareas pendientes es muy interesante, pero disminuye la interactividad con el usuario. Esto puede ser relevante en un entorno docente si hay muchas peticiones de corrección (por ejemplo el último día de entrega de prácticas). Aunque supongo que está fuera del ámbito de este trabajo de fin de grado, sería muy interesante que tuviera un modo de uso para el profesor en el que se puedan añadir problemas de forma sencilla. Por último, es muy importante disponer de información o documentación del sistema: los distintos estados que tiene un programa enviado, los posibles motivos por los que la respuesta puede ser incorrecta, etc. Supongo que en la versión final del sistema esta documentación estará disponible. Predisposición a la implantación en sus clases Desde mi punto de vista, para su uso en cursos de programación es fundamental que el sistema tenga un modo en el que se pueda proporcionar información adicional al alumno sobre qué es lo que está fallando (qué caso no funciona, el mensaje del error de compilación, etc). Sin esta información, su utilidad se reduce a cursos de programación avanzados. 6.2. – Valoración personal El proyecto ha logrado cumplir todos los objetivos básicos que se habían propuesto, respetando los requisitos. En los primeros momentos heredamos un prototipo implementado en su 80% en java script que desechamos tras un mes de evaluación. Esto supuso un gran reto ya que teníamos unos plazos muy ajustados de entrega debido a retrasos en el inicio de la asignatura. Volviendo la vista atrás y observando los resultados nos sentimos muy satisfechos con nuestro trabajo. Hemos provisto al juez online de una interfaz agradable, intuitiva, amigable y sin exceso de florituras, utilizando las últimas tecnologías disponibles que dan a la aplicación una apariencia actual y dinámica. Nos hemos asegurado de dotar a la página de seguridad contra los ataques maliciosos conocidos. Si analizamos las encuestas hechas a profesores de la facultad de informática de la UCM veremos que todos están muy dispuestos a utilizar la aplicación en sus clases. Esto corrobora lo expuesto en el primer párrafo de estas conclusiones, los requisitos se han cumplido. Por otra parte si vemos la opinión de los estudiantes no todos están dispuestos a utilizar la aplicación, para algunos supondría un exceso de trabajo y una herramienta de control por parte de los profesores. En lo que todos coinciden es en que es una buena herramienta para autoevaluarse, sin tener que esperar a las correcciones del profesor. Conclusiones 67 Un punto en contra que ven los docentes es el hecho de no poder evaluar la calidad del código, desafortunadamente eso no se encontraba dentro de los requisitos iniciales del proyecto pero es una interesante línea de desarrollo futuro. Aunque cuenta con algunos detractores dentro del alumnado podemos afirmar que “….” Será una herramienta tremendamente útil en la docencia, y prevemos un uso generalizado por parte de alumnos y profesores. Bibliografía 68 7. –Bibliografía  MOLLY E. HOLZSCHLAG. (2000). LA BIBLIA HTML 4. EDICIONES ANAYA MULTIMEDIA  GERMÁN GALEANO GIL, JOSÉ CARLOS SÁNCHEZ ALONSO, PABLO DÍAZ MÁRQUEZ. (2009). HTML EDICIÓN REVISADA Y ACTUALIZADA 2009. EDICIONES ANAYA MULTIMEDIA  TOMMY OLSSON & PAUL O’BRIEN. (2008). THE ULTIMATE CSS REFERENCE. SITEPOINT  LUC VAN LANCKER. (2012). JQUERY EL FRAMEWORK JAVASCRIPT DE LA WEB 2.0. EDICIONES ENI.  CLIFF WOOTTON. (2001). JAVASCRIPT PROGRAMMER’S REFERENCE. WROX PRESS  DAVID FLANAGAN. (1998). JAVASCRIPT THE DEFINITIVE GUIDE. O’REILLY  NICHOLAS C. ZAKAS, JEREMY MCPEAK, JOE FAWCETT. (2006). PROFESSIONAL AJAX. WILEY PUBLISHING  ESTEBAN TRIGOS GARCÍA. (2000). PHP 4. EDICIONES ANAYA MULTIMEDIA  DAVID SKLAR. (2005). INTRODUCCIÓN A PHP 5. EDICIONES ANAYA MULTIMEDIA  LUIS MIGUEL CABEZAS GRANADO. (2004). PHP 5 EL LENGUAJE PARA LOS PROFESIONALES DE LA WEB. EDICIONES ANAYA MULTIMEDIA.