Bienvenidos a DigitalBook

Menú elementos

2008-12-11T02:26:00.001-08:00

En este post veremos el aspecto del menú que contiene los posibles elementos que podemos agregar a los recursos educativos y cómo lo desarrollamos.

El menú tendrá forma de acordeón, compuesto de tres secciones. En la primera de ella encontraremos dos botones, uno de ellos para acceder a imágenes que tengamos en nuestro disco duro y el otro para acceder a una pantalla donde podremos realizar búsquedas de imágenes en Flickr (esta opción la desarrollaremos en otro post más adelante). La segunda sección nos da la opción de insertar videos y audios que tengamos en nuestra máquina. Y la última de la secciones está enfocada a figuras (círculos y cuadrados) y texto.

El aspecto que queremos conseguir es el siguiente:

En el siguiente enlace podemos encontrar la solución de ejemplo con el UserControl correspondiente a este menú. Debemos copiar los estilos que aparecen en el fichero App.xaml, el código del fichero MenuElementos.xaml y MenuElementos.xmal.cs.

Megaupload: MenuElementos.zip

La parte de funcionalidad de cada botón se puede agregar en el fichero MenuElementos.xmal.cs.

Menú principal

2008-12-11T00:53:00.001-08:00

Una vez que ya tenemos estructurado el marco de la aplicación, crearemos una barra en la parte superior como menú principal. En dicho menú recogeremos la siguiente funcionalidad:

Archivo: Nuevo, Abrir y Guardar.
Edición: Copiar, Cortar y Pegar.
Descripción: SCORM.

Además en la parte derecha de la barra colocaremos dos botones, uno de ellos para el panel de configuración y el otro para la opción de pantalla completa.

El aspecto que queremos conseguir es el siguiente:

Para ello necesitamos agregar al proyecto un nuevo Silverlight User Control. Sobre el nombre del proyecto, botón derecho: Añadir/Nuevo Elemento/Silverlight/Silverlight User Control. Y le llamaremos MenuPrincipal.

Megaupload: Menuprincipal.rar

Estructura del marco de trabajo de la herramienta DigitalBook

2008-12-06T03:55:00.001-08:00

Para comenzar con el desarrollo de la aplicación es conveniente establecer la estructura que tendrá el marco de trabajo. El marco de la aplicación tendrá el menú principal en la parte superior, el menú de elementos en el lateral izquierdo, la barra de propiedades en el lateral derecho, la barra de estado en la parte inferior y en el centro el marco donde ser visualizan las páginas.

El aspecto final que queremos conseguir es el que se muestra en la siguiente figura:

Para conseguir esta distribución y permitir que el aspecto se adapte a las dimensiones del navegador, donde más tarde se visualizará la aplicación, se dividirá el marco mediante una tabla con tres filas y tres columnas. El siguiente código lo debemos añadir en el fichero Page.xaml de la aplicación. De este modo tendremos dividido el marco tal y como queremos.

Establecemos las columnas que tendrá la aplicación con sus respectivos porcentajes de tamaño.80 indica 80 pixeles; 80* indica 80%

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

Establecemos las filas que tendrá la aplicación con sus respectivos porcentajes de tamaño

<Grid.RowDefinitions>

</Grid.RowDefinitions>

Primer paso en la implementación de DigitalBook

2008-12-06T03:13:00.001-08:00

Una vez que ya tenemos claro todo lo que queremos que nuestra aplicación debe permitirnos hacer y el modo en el que lo hará, pasaremos a la parte de implementación, donde veremos de forma rápida cómo se han desarrollado las partes y componentes más complejos y vistosos.

Todo el material que vamos a necesitar y que debemos instalar en nuestra máquina lo podemos encontrar en el site oficial de Silverlight: Get Started

Una vez que tenemos todo lo necesario para el desarrollo de aplicaciones Silverlight, seguiremos los pasos para crear una nueva aplicación.

Abrimos el Visual Studio 2008.
Creamos un nuevo proyecto: Archivo/Nuevo/Proyecto…
Seleccionamos aplicación Silverlight: Visual C#/Silverlight/Aplicación Silverlight.
Indicamos el nombre de la aplicación y el destino donde se guardará la misma.
A continuación nos preguntará que si queremos añadir un proyecto Web ASP.NET para hospedar la aplicación Silverlight que queremos crear. Marcaremos dicha opción e indicaremos un nombre.

Una vez terminados estos pasos, tendremos una solución con dos proyectos, uno de ellos correspondientes a la aplicación Silverlight y el otro a la aplicación Web ASP.NET que hospedará a la aplicación anterior.

De este modo ya podemos comenzar a trabajar en el desarrollo de DigitalBook.

Diagrama de despliegue

2008-12-06T02:20:00.001-08:00

Para este último post de diseño veremos un posible diagrama de despliegue. Daremos una posible solución a la hora de poner el sistema en producción. Si recordamos los requisitos no funcionales, en el primero de ellos se establece que se utilizará la tecnología Silverlight 2, por lo tanto el Editor RIA se desarrollará bajo una aplicación Silverlight 2 haciéndose necesaria una aplicación Web ASP.NET para hospedarla. Por otro lado, dicha aplicación web tendrá publicado un Servicio Web para el repositorio al cual se accederá desde la aplicación Silverlight. Para el componente de packaging se creará una librería de clases al igual que para el componente entidades. El despliegue de componentes lo podemos ver en la figura siguiente donde tenemos la parte del servidor y la parte del PC del usuario.

Diagrama de componentes.

2008-12-06T02:07:00.001-08:00

En este post veremos una serie de componentes que constituyen la aplicación, que será un camino para navegar hacia la implementación de la herramienta. Podemos ver en el diagrama de la figura adjunta que aparece un componente de entidades, este componente contiene las clases que son utilizadas tanto por la capa de interfaz como por la de lógica de “DigitalBook”. Se ha optado por separarlas en un componente aparte para facilitar una posible modificación de las mismas sin afectar a los demás componentes. El componente packaging es utilizado por el de lógica de negocio del repositorio. Parte de estos componentes pasarán a ser librerías de clases y otros irán incrustados dentro del fichero XAP que forma la aplicación Silverlight. Se puede ver que aparece un componente llamado SharpZipLib, el cual es una librería externa al proyecto, aporta toda la parte del trabajo con ficheros Zip.

Diagrama de secuencia. Importar imagen de Flickr

2008-11-27T10:19:00.001-08:00

Para finalizar con los diagramas de secuencia podemos ver el referente a importar imagen de Flickr en el que se muestra detalladamente cómo sería dicho proceso. El usuario introduce una etiqueta sobre la cual desea realizar la búsqueda de las imágenes. A partir de esa etiqueta se obtiene una lista de imágenes, de la cual el usuario seleccionará una. Cuando el usuario indique con el ratón el lugar donde desea colocar la imagen se creará un elemento imagen y se cargará con dicha imagen seleccionada.

Diagrama de secuencia. Añadir manifiesto

2008-11-27T10:10:00.001-08:00

El segundo diagrama de secuencia que veremos es el referente a la creación del manifiesto. Comenzaría cuando el usuario indica en el menú principal que desea añadir metadatos. El menú principal le pasará el evento al controlador, el cual hará visible el formulario SCORM. El usuario rellena los datos que se le solicitan referentes a LOM-ES y pulsa finalizar. El formulario se oculta y se le indica al controlador que importe LOM-ES con los datos que se han recogido. Este solicita al repositorio que cree el manifiesto con esos datos. El repositorio crea un objeto manifest con los datos recogidos y finalmente lo serializa en XML para obtener el fichero imsmanifest que guardará en el servidor.

Diagrama de secuencia. Abrir proyecto

2008-11-27T10:04:00.001-08:00

En el siguiente diagrama veremos el proceso de abrir un proyecto que ha sido guardado en otra ocasión. Para ello el usuario debe indicar en la interfaz, en concreto sobre el menú principal, que desea abrir un proyecto. El menú pasará el evento al controlador, el cual debe poner visible la pantalla de selección de proyectos y solicitar al repositorio un listado de los proyectos que hay guardados hasta el momento. El repositorio obtiene una lista de los mismos. El controlador recoge esa lista y la muestra en la pantalla de selección de proyectos. A continuación es el usuario el que elige cuál de ellos desea abrir. Es en ese momento en el que se oculta la pantalla de selección y se le indica al controlador el nombre del proyecto a abrir, el cual solicitará al repositorio el proyecto a cargar. Una vez recibido el proyecto, el controlador creará un libro que le dará soporte, y para cada página que contenga el proyecto, se irán creando y añadiendo al libro junto con sus elementos correspondientes en cada página.

Diagrama clases. SCORM

2008-11-09T13:13:00.001-08:00

En este post veremos una estructura de clases que nos da soporte para la creación de los manifiestos necesarios en el empaquetado SCORM. Un manifiesto que está compuesto por una serie de elementos jerarquizados. El elemento raíz es el manifest, el cual está formado por un elemento metadatos que recogerá la información del curso, un elemento organizations que establecerá las posibles organizaciones que permita el curso, un elemento resources que mantendrá las referencias a los recursos de los que conste el curso y finalmente puede tener otro conjunto de manifest. Por otro lado el elemento metadatos está formado por un esquema que puede ser DublinCore, LOM-ES u otros esquemas de metadatos que puedan existir. En nuestro caso nos centraremos en LOM-ES. El elemento organizations está compuesto de elementos organization para cada una de las organizaciones posibles. Y el elemento resources lo componen elementos resource. Podríamos seguir comentando esta jerarquía de elementos pero debido a su extensión solo bajaremos hasta este nivel. Para trabajar con esto creamos una jerarquía de clases como podemos ver en la figura siguiente:

Una vez vista la estructura general del manifiesto pasaremos a ver la parte de metadatos de LOM-ES. LOM-ES, como podemos apreciar en la figura anterior, es un esquema de metadatos. LOM-ES está formado por una serie de elementos que a su vez están compuestos de más y así sucesivamente. Como esta jerarquía es muy extensa solo bajaremos un nivel, en el podemos ver los siguientes elementos:

Diagrama clases. Modelo

2008-11-09T12:58:00.001-08:00

En este post nos centraremos en la parte de datos (Modelo) y veremos de qué clases está formada. La clase principal sería Libro, la cual representará nuestro proyecto o recurso educativo. Como se indica en uno de los requisitos, un libro está compuesto por un conjunto de páginas, las cuales a su vez se componen de elementos como pueden ser imágenes, videos o figuras. Aquí cabe indicar que los elementos de audio los trataremos como video que se trabaja completamente igual. Todos estos elementos heredan de IElemento.

Diagrama clases. Vista

2008-11-09T00:50:00.001-08:00

En este diagrama nos centraremos en la parte de la interfaz (Vista) para ver de qué clases estaría formada. En la imagen que se adjunta podemos ver que todos los componentes de la interfaz implementan la interfaz IConfigurable para permitir cambiar su aspecto cuando se realicen cambios de la configuración por deseo del usuario. Por otro lado la clase Page está compuesta de esos componentes, uno de cada tipo. En el diagrama no se ha puesto la multiplicidad en las relaciones para evitar que no sea demasiado arduo su entendimiento.

Modelo-Vista-Controlador

2008-11-09T00:44:00.001-08:00

El patrón más importante que podemos definir es el Modelo Vista Controlador (MVC), a través del cual haremos una separación entre la interfaz de usuario, la lógica de negocio y los datos de la aplicación. En nuestro caso concreto la parte de la interfaz de usuario, también conocida como Vista, se correspondería con la clase Page que será la parte con la que el usuario interactuará, y la que contiene los componentes de interfaz. La parte de lógica de negocio, también conocida como Controlador, se corresponderá con la clase Controlador y finalmente el Modelo, vendrá a ser la clase libro que mantiene el estado de la aplicación.

La forma de trabajar de este patrón sería la siguiente. El usuario interactúa con la Page, la cual pasa los eventos al Controlador. El Controlador accede al Libro, actualizándolo y modificándolo según la acción del usuario. La Page obtiene los datos directamente del Libro para modificar el aspecto de la interfaz según los cambios del Libro. El Libro no tiene conocimiento directo de la Page. Finalmente la Page espera nuevas interacciones del usuario comenzando el ciclo de nuevo.

Casos de uso

2008-11-09T00:35:00.001-08:00

En este post se mostraran los casos de uso que especifican la funcionalidad de los requisitos funcionales que se han indicado en un post anterior.

El diagrama de casos de uso donde se muestran la interacción del usuario con las funcionalidades de OBJ-01 que establece el poder crear, guardar y abrir recursos educativos es el siguiente:

Para el OBJ-02 podemos dividirlo en dos parte por un lado la funcionalidad referente a la gestión de páginas dentro de un proyecto:

Y por otro lado la referente a la inserción de elementos multimedia:

Por último y para finalizar con la funcionalidad podemos ver el diagrama de casos de uso para el OBJ-03 que especifica el empaquetado SCORM:

Requisitos no funcionales

2008-10-26T10:09:00.000-07:00

RNF-1: Se desarrollará bajo la nueva tecnología para interfaces ricas llamada Silverlight 2.

RNF-2: La herramienta debe ser en gran medida usable.

Requisitos funcionales

2008-10-26T10:01:00.000-07:00

RF-1: La herramienta debe permitir crear nuevos proyectos.

RF-2: La herramienta debe permitir guardar proyectos creados.

RF-3: La herramienta debe permitir abrir proyectos existentes.

RF-4: La herramienta debe permitir añadir página al proyecto (RE).

RF-5: La herramienta debe permitir eliminar página del proyecto (RE).

RF-6: La herramienta debe permitir añadir imagen.

RF-7: La herramienta debe permitir añadir video.

RF-8: La herramienta debe permitir añadir audio.

RF-9: La herramienta debe permitir añadir figura.

RF-10: La herramienta debe permitir importar imagen desde Flickr.

RF-11: La herramienta debe permitir crear un manifiesto a partir de unos metadatos.

RF-12: La herramienta debe permitir crear un paquete SCORM con su respectivo manifiesto, esquemas y proyecto asociado.

Objetivos de la aplicación

2008-10-21T10:35:00.000-07:00

OBJ-1: La herramienta trabajará con recursos educativos (a partir de ahora RE).

OBJ-2: La herramienta debe gestionar páginas dentro de cada RE, las cuales podrán tener elementos multimedia, entre ellos, imágenes de Flickr.

OBJ-3: La herramienta empaquetará en SCORM recursos educativos.

Lanzamiento del Blog DigitalBook

2008-06-16T00:31:00.001-07:00

Lo primero de todo darle las gracias por entrar a este rincón de la red dedicado a mi proyecto fin de carrera.
A lo largo de este blog y durante el tiempo que dure el desarrollo del proyecto iré comentando los problemas que vayan surgiendo y cómo los he podido ir resolviendo.
Os cuento brevemente en que consiste dicho proyecto para que entremos todos en contesto.
La idea buscada es extender el concepto de E-Learning a la sociedad a través de la creación de una herramienta amigable para toda aquella persona dedicada o interesada en la creación de objetos de aprendizaje. Dicha herramienta se desarrollará con la nueva tecnología que propone Microsoft llamada Silverlight.