• No se han encontrado resultados

Creación y edición de Objetos de Aprendizaje

3. Antecedentes 9

3.3. Sistemas de e-learning

3.3.4. Creación y edición de Objetos de Aprendizaje

Coste: Establece si el recurso es o no de pago. LOM propone como vocabulario controlado para este metadato el siguiente: yes, no.

Derechos de copia y otras restricciones: Establece si el recurso está o no su- jeto a derechos de copia y otras restricciones. LOM propone como vocabulario controlado para este metadato, de nuevo, yes y no.

Descripción: Comentarios sobre las condiciones y derechos de uso de este re- curso

7. Relaciones

Agrupa características que describen las relaciones entre este objeto de aprendizaje y otros objetos relacionados, describiendo las relaciones existentes, si las hubiese, entre un objeto de aprendizaje y otros.

Para definir relaciones múltiples deben utilizarse varias instancias de esta categoría. Si existen varios objetos de aprendizaje con los cuales está relacionado, cada uno de ellos tendrá una instancia propia de esta categoría.

8. Anotaciones

Proporciona comentarios sobre el uso pedagógico del objeto de aprendizaje y aporta información sobre cuándo y quién creó dichos comentarios.

Esta categoría permite a los educadores compartir sus valoraciones sobre el objeto de aprendizaje, recomendaciones para su utilización, etc.

9. Clasificación

Describe el objeto de aprendizaje de acuerdo con un determinado sistema de clasifi- cación, es decir,dónde se sitúa el objeto de aprendizaje dentro de un sistema de cla- sificación concreto. Para definir múltiples clasificaciones, deben utilizarse múltiples instancias de esta categoría.

Figura 3.4: Categorías de IEEE LOM.

A continuación se encuentran detalladas:

1. General

En la fase general, se han definido los aspectos más generales como identificador de catálogo, identificador de entrada, el título, idioma, estructura, y el nivel de agregación.

2. Ciclo de Vida

En la fase del ciclo de vida, se han definido aspectos relacionados con la evolución del OA en su dinámica con el estudiante, como por ejemplo, la versión,el estado, y el tipo de contribución, entidad y fecha.

3. Técnica

En cuanto a la fase técnica, como su nombre indica, hace referencia a los aspectos más técnicos como son el formato, el tamaño que ocupa, una imagen y su url.

4. Meta-datos

En la fase de Meta-datos, se determina el tipo, fecha y entidad de contribución.

5. Uso Educativo

En la fase de uso educativo se requieren aspectos relacionados con la interacción con el estudiante como son el uso educativo, nivel de agregación, el idioma, el tipo de recurso, el contexto, etc.

Capítulo 4

Metodología

Como bien sabemos, la web ha evolucionado notablemente, desde las antiguas web tra- dicionales hasta las actuales web 2.0, se pueden apreciar números avances y cambios, pero uno destaca sobre todos: el papel del usuario.

Hasta ahora, el usuario que en la Web 1.0 era un mero espectador, pasa en la Web 2.0 a ser el protagonista.

Podemos definir la Web 2.0 como una segunda generación de webs basadas en comuni- dades de usuarios y una gama especial de servicios, como las redes sociales, los blogs, los wikis, que fomentan la colaboración y el intercambio ágil de información entre los usuarios.

De ahí la importancia del papel del usuario en estas evolucionadas webs.

El usuario es la verdadera revolución en la Web 2.0. La Web 1.0 se trataba de un grupo de páginas casi estáticas donde los usuarios podía observar contenidos predeterminados. Con la aparición de sistemas basados en web (correos electrónicos, compras en línea, foros de discusión, entre otros), la Web se convirtió en una plataforma donde estos intercambia ideas, mensajes o productos de acuerdo con sus necesidades.

Figura 4.1: Metodología

Esta enorme actividad está cambiando el mundo de las telecomunicaciones, de los medios de comunicación, del marketing, del software, del entretenimiento, etc. Claramente ha habi- do una transición de las aplicaciones tradicionales hacia aplicaciones que funcionan a través de la Web enfocadas en el usuario final.

Este proyecto, basado en un sistema tutor para el autoaprendizaje, es uno de los grandes

beneficiados del amplio abanico de posibilidades que ofrece este novedoso enfoque de las webs, pues la educación en línea es uno de los sectores donde ha existido un desarrollo limi- tado debido a ciertos prejuicios sostenidos por educadores tradicionales y estudiantes.

Sin embargo, la Web 2.0 nos da la oportunidad de desarrollar nuevos sistemas y métodos para la educación en línea, aprovechando las capacidades de interacción desarrolladas en los últimos años.

La aparición de las redes sociales, en la cual usuario de todos los perfiles comparte infor- mación y conocimientos, promueve una nueva tendencia hacia la creación de una inteligencia común y colectiva creada por y para los usuarios.

Esta novedoso enfoque de la web promueve el aprendizaje, y es cada vez mas explotado e impulsado, con el fin de de integrar a los alumnos de todas las edades y géneros en momentos clave del proceso educativo haciéndoles participes del proceso en todo momento, dejando a un lado el rol pasivo aumentando la interacción en primera persona y promoviendo de este modo la educación virtual.

4.1 Metodología

Por lo comentado anteriormente, el primer reto al que se enfrenta un desarrollador de aplicaciones web 2.0 es saber definir qué alcance debe tener el proyecto, pues no se conoce la frontera atendiendo a las necesidades de servicio que un usuario debe cubrir en cada momento, ni se asegura que permanezcan inmutables en las etapas de desarrollo.

4.1.1 Scrum

Para el desarrollo del trabajo se ha optado por utilizar la metodología SCRUM que consiste en un proyecto con entregas osprints de, de evolución gradual, en los cuales cada versión tiene que proporcionar un resultado completo.

Figura 4.2: Metodología Scrum.

Scrum es una metodología ágil y flexible para gestionar el desarrollo de software, cuyo principal objetivo es maximizar la eficiencia en e desarrollo de este proyecto.

Se basa en construir primero la funcionalidad de mayor transcendencia acorde al objetivo final y en los principios de inspección continua, adaptación, auto-gestión e innovación.

Scrum cuenta con las siguientes fases o etapas: La reunión de planificación de Sprint, los Scrums diarios, el trabajo de desarrollo, la Revisión del Sprint, y la Retrospectiva del Sprint.

Reuniones

La reunión de planificación de un Sprintes un evento de tiempo variable, en el cual se define la funcionalidad en el incremento planeado y cómo el equipo de Desarrollo levará a cabo este incremento. La salida, a su vez,consiste en definir el Objetivo del Sprint.

Es necesario una reunión y sesión con el equipo de trabajo de manera habitual para poder ponerse al tanto de la evolución de las tareas. En estas sesiones, el líder del pro- yecto, conocido también como Scrum Master, se encarga de comprobar que todas las tareas asignadas han sido realizadas y de la propuesta de nuevas tareas a los miembros del mismo.

En nuestro caso, las reuniones se han celebrado una vez a la semana donde en cada semana el Scrum Master asignaba las tareas del desarrollador y a la siguiente semana se verificaba la realización correcta de las tareas adjudicadas la semana anterior y se programaban las de las siguientes semanas.

Planteamiento

A la hora de llevar a cabo un proyecto, se plantean objetivos iniciales sin conocer con certeza los posibles problemas u obstáculos que nos vamos a encontrar.

Se decidió , realizar las entregas de forma fraccionaria, pues de este modo es posible, en tiempo real, ir descubriendo y solucionando las distintas incidencias o inquietudes que surjan hasta la entrega final delsprint.

Lista de Tareas

En esta fase, es fundamental fraccionar las conclusiones y objetivos determinados en la fase anterior en forma de tareas.

Es importante intentar ser coherente y preciso a la hora de estimar los recursos y tiem- po, para poder realizar un desarrollo de proyecto lo más lineal posible.

En este proyecto, con el apoyo de la herramienta trello1, se ha llevado a cabo una estimación y selección de objetivos realista y bastante útil a lo largo del desarrrollo del proyecto.

Demostración

Una vez cumplidos ciertas fechas u objetivos, se procedía a realizar una pequeña de- mostración, bien en pequeña reunión o video demostrativo, la cual permitía dar el visto bueno o detectar nuevas mejoras.

1https://trello.com/

Figura 4.3: Trello - Gestión de tareas Retrospectiva

Consiste básicamente en una reunión en la cual se verificaba o analizaban nuevos as- pectos a mejorar u objetivos a desarrollar, ofreciendo una valoración algo más general, creando por tanto, un plan de mejoras para ejecutar durante el siguientesprint.

4.1.2 Organización del Equipo de Trabajo

Como se comentó anteriormente, la característica principal metodología de Scrum es la división del proyecto en iteraciones de trabajo, en las cuales se ven implicados los diferentes roles implicados en el proyecto. A continuación se detalla cada uno de ellos:

Dueño del Producto (Product Owner): Representa el cliente del producto a desa- rrollar. Se encarga de maximizar el valor del producto y del trabajo del Equipo de Desarrollo, relegando, si así lo requiere, tareas al Equipo de Desarrollo aunque siendo aun así responsable de dicho trabajo.

El Dueño del Producto no necesita tener conocimiento del área de aplicación del pro- yecto; se concentra en los aspectos del negocio.

El Dueño del Producto es responsable del Backlog de Producto. El Backlog de Pro- ducto es una lista priorizada de elementos (generalmente en la forma de historias de usuario) que el cliente espera del proyecto; es la principal herramienta de planificación en Scrum. También es el responsable de hacer que cada elemento (historia del usuario) sea fácilmente entendible para el equipo Scrum y el resto de partes interesadas.

En un principio elProduct Owner (4.42) de este proyecto se trataba de Tomás Calvo, representante de la empresa interesada en el producto, BQ3. Finalmente se decidió realizar de modo independiente sin esta figura representada.

2http://managementplaza.es/blog/el-dueno-del-producto-en-scrum/

3https://www.bq.com/es/

Figura 4.4: Dueño del Producto.

Equipo de Desarrollo (Development Team):El Equipo de Desarrollo (4.54) consiste en los profesionales que desempeñan el trabajo de entregar un incremento del producto terminado, que potencialmente se pueda poner en producción al final de cadaSprint.

El Equipo de Desarrollo es multifuncional, pues debe realizar cada uno de las tareas asignadas, organizado, responsable y proactivo siendo capaz también de tomar sus propias decisiones.

ElDevelopment Teamde este proyecto se compone de tres personas:Álvaro Salinero (Desarrollo del back-end), Andrés Soto (diseño de la parte inicial del proyecto en- focada a los cursos, revisión científica y manejo de estándares) y Eimard Sobrino (Responsable delfront-end), y del diseño, desarrollando cuando es necesario labores propias delback-end)).

Figura 4.5: Equipo de Desarrollo.

Scrum Master:Las responsabilidades de Scrum Máster no se limitan al Equipo Scrum.

Son responsables además de apoyar a los diferentes miembros del proyecto a compren- der y resolver dudas acerca de las competencias que tienen que desempeñar.

El Scrum Máster por lo general dirige a la organización en su esfuerzo por adoptar esta metodología.

El Scrum Master proporciona los siguientes servicios alProduct Owner:

4http://managementplaza.es/blog/el-equipo-de-desarrollo-en-scrum/

• Encontrar técnicas para gestionar elProduct Backlogde manera efectiva.

• Entender y practicar la agilidad.

• Facilitar los eventos de Scrum según se requiera o necesite.

El Scrum Master proporciona los siguientes servicios alDevelopment Team:

• Guiar al Equipo de Desarrollo en ser autoorganizado y multifuncional.

• Ayudar al Equipo de Desarrollo a crear productos de alto valor.

• Eliminar impedimentos para el progreso del Equipo de Desarrollo.

La persona que realiza el rol de Scrum Master (4.65) es el director del proyecto:Fran- cisco Pascual Romero.

Figura 4.6: Scrum Master

4.1.3 Beneficios

Una vez detallada la metodología adoptada en el proyecto, junto con sus características principales y organización de trabajo, a continuación se van a detallar cuales son los moti- vos, ventajas y beneficios de su uso atendiendo tres aspectos o niveles: Plantilla, Procesos y Resultados.

1. A NIVEL DE PLANTILLA

Creación de roles que fomentan el trabajo en equipo.Con la diferenciación en elProduct Owner, el equipo de desarrollo y el Scrum Master se asegura que la organización del proyecto se lleve a cabo de una forma óptima y en las mejores condiciones dividiendo el trabajo.

Incremento de la motivación de los trabajadores:Los equipos de trabajo se autogestionan sus tareas con la obtención de unfeedback cada breves periodos de tiempo (sprints), alimentando la motivación para seguir llevando a cabo el desarrollo del proyecto en el camino correcto.

Fomenta la creatividad de la plantilla:breves espacios de tiempo con necesi- dad de innovar hacen sacar lo mejor de uno mismo y de un grupo de trabajo.

5http://managementplaza.es/blog/el-rol-de-scrum-master/

2. A NIVEL DE PROCESOS

Transparencia en el desarrollo de los procesos y mayor control de cada eta- pa:Se trabaja basándose en el llamadosprint backlog, un documento en el cual se especifica cómo el equipo de trabajo va a llevar a cabo las tareas durante el si- guientesprint, asignándolas de modo que todos los miembros del equipo puedan aportar sus competencias.

Feedback continua y ritmo predictible de trabajo: Se mejora la calidad del producto, pues se lleva un control continuo del desarrollo del proyecto sin afectar en ocasiones la aparición de errores.

El mayor coste de su implementación no es el de una inversión económica:

sino que viene determinado por la capacidad para gestionar y mantener organi- zado cada uno de los esfuerzos de los miembros implicados en el proyecto.

3. A NIVEL DE RESULTADOS

Mayor productividad: Una organización solidad repercute en la reducción de riesgos en todo el proceso, incrementando del mismo modo la motivación grupal.

Permite una adaptabilidad a los cambios continuos del mercado aportando así una ventaja competitiva:Se genera un producto más escalable, aumentando la capacidad de adaptarse a nuevas tecnologías y alances.

Maximiza el Retorno de la Inversión (ROI):La inversión de esfuerzo y tiempo juegan un papel fundamental en el resultado final del proyecto.

4.2 Marco Tecnológico

Como se ha comentado anteriormente, las nuevas web 2.0 requieren también la aparición de novedosos frameworks que faciliten y permitan el desarrollo de un nuevo tipo de web enfocado casi en su totalidad al usuario.

En este contexto, para este proyecto se han utilizado varias tecnologías para satisfacer los requisitos tanto del ámbitofront-endcomo deback-end.

Para ello, como base del proyecto, se ha utilizado el framework AngularJS, así como Bootstrap, HTML, CSS y GruntJS. Desde el punto de vista delback-end, se ha apoyado en la base de datos MondoDB y NodeJS.

A continuación, se ofrece conceptos y una visión más detallada acerca de estas tecnolo- gías.

4.2.1 AngularJS y derivados

Anteriormente en el ámbitofront-endde las aplicaciones web sólo se disponía de jQuery (además de otras librerías similares...) como apoyo para programar el código JS del clien- te.

Era posible manipular el Document Object Model (DOM) de una forma más sencilla, aña- dir efectos, llamadas Asynchronous JavaScript And XML (AJAX).

Todo el código JS se reflejaba en la creación de funciones dependiendo de las necesidades o requerimientos, lo que provocaba que con el tiempo el código fuera difícilmente manejable y escalable.

Por suerte surgieronframeworksque implementaban el ahora famoso patrón MVC.

En este contexto surgió, AngularJS, un framework MVC de JS para el desarrollo Web front-endque permite crear aplicaciones Single Page Application (SPA).

AngularJS permite extender el vocabulario HTML con directivas y atributos, manteniendo la semántica y sin necesidad de emplear librerías externas como jQuery para que funcione.

Uno de los motivos por los que se ha decidido hacer uso de esteframework llevar a cabo el

Figura 4.7: AngularJs

desarrollo del proyecto desde tres enfoques distintos pues permite:

Desacoplar la manipulación del DOM de la lógica de aplicación.

Desacoplar el lado cliente del lado servidor en una aplicación.

Proveer estructura para el desarrollo de una aplicación.

De este modo, llevar a cabo la integración de la partefront-endyback-endes mucho más eficiente y escalable.

Además el la vista del MVC, se encuentra respaldada en este proyecto gracias al lenguaje HTML5, CSS y Sass.

Figura 4.8: HTML, CSS y JS

HTML se trata de un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto.

Este lenguaje es encargado de aportar a base principal de la vista del modelo vista con- trolador, pues mediante un sistema que permite ordenar etiquetar los diversos elementos que forman parte de una página.

CSS es un lenguaje de estilo que define la presentación de los documentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchu- ra, imágenes de fondo, posicionamiento avanzado y muchos otros temas.

Sass simplemente es un lenguaje de apoyo para programar con CSS, el cual gracias a ser mas asertivo con sus múltiples funcionalidadesmixins, variables, funciones, herencia, nes- ting, permite llevar a cabo un desarrollo mas eficiente, preciso y escalable del proyecto.

Figura 4.9: Sass

Además, en este proyecto se ha utilizado Bootstrap, unframeworkque tiene como objetivo facilitar el diseño web y apoyo en el ámbitofront-end.

Se ha decidido utilizar básicamente para conseguir que, gracias el grid que proporciona, permitir que el diseño sea responsivo, es decir se adapte a distintas resoluciones establecien- do lasmedia queriesque se desee.

En este proyecto se ha diferenciado entre móvil (de 0 a 468px), tablet (de 468px a 992px) y escritorio (de 992px en adelante). Las tecnologías relativas al ámbitofront-end, para facilitar

Figura 4.10: Bootstrap

todo el trabajo, se ha hecho uso de un automatizador de tareas llamado GruntJS, que mediante tareas programadas facilita el trabajo al desarrollador levantando un servidor, compilando los archivos sass convirtiéndolos a CSS, minificando los archivos para que pesen menos, refrescando navegador en cada cambio, etc.

Figura 4.11: Grunt Js

Para finalizar, es fundamental mencionar la necesidad de tener instalado en la máquina en la que se vaya a llevar a cabo el desarrollo del proyecto Node Package Manager (NPM)6, Bower7 y Git8. NPM es el gestor de paquetes javascript de NodeJS por excelencia.

Gracias a él, tenemos casi cualquier librería disponible a tan solo una linea de comando de distancia, permitiéndonos utilizarla en cuestión de segundos.

En los ultimas años JS ha tomado gran importancia, pasando de ser utilizado solamente para simples validaciones de formularios del lado del cliente, a ser el responsable de la puesta en marcha de servidores con NodeJS y demás.

De este modo, para instalar de manera global Gulp en nuestra máquina simplemente habria que escribir esta sentencia en un terminal y escribir: "npm install -g grunt".

Al igual ocurre con Bower, que resulta ser un complemento ideal para el desarrollo web.

Es un sencillo programa que nos sirve para tener al día las dependencias de un proyecto para la web, en lo que respecta al desarrollofront-end, con Javascript o incluso CSS.

Se trata de un programa basado en NodeJS que se ejecuta desde la consola y que tiene un sencillo Application Programming Interface (API) de comandos útiles para realizar tareas de mantenimiento y administración de paquetes necesarios para construir un proyecto web, concretamente la parte del lado del cliente.

Con Bower es posible descargar y actualizar todo tipo de librerías, como ocurre en este proyecto con Bootstrap y sass, escribiendo en un terminal de la máquina "bower install -g bootstrap".

Figura 4.12: Gestores de paquetes Bower y npm.

6https://www.npmjs.com/

7https://bower.io/

8https://git-scm.com/