Motivacin

Nuestra motivacin es ofrecer un servicio web basado en video tutoriales que permita
una fcil difusin de contenido intramedia a cualquier tipo de usuario. Para ello, lo
acompaaremos de una seccin que explique de forma textual y con imgenes los
mismos trabajos, dejando disponible un enlace para descargar los recursos del
ejemplo. Para mantener el carcter dinmico de la aplicacin, los usuarios podrn
dejar sus comentarios y valorarlos con un rango de puntuacin.
entro del contexto, existen muy pocas alternativas web, y todas ellas estn basadas
en blogs o foros que explican un determinado tema. Para nosotros y dado los tiempos
que corren son formas primitivas para transmitir los conocimientos. Nosotros
queremos ofrecer un servicio universal que permita un fcil uso del mismo, recogiendo
todos los temas sobre el tratamiento de imgenes, y al mismo tiempo, que todo el
mundo pueda participar ofreciendo su propio conocimiento, sus opiniones, etc. !l
servicio est enfocado en primera instancia a ofrecer contenido multimedia de forma
gratuita y libre, para usuarios novatos o avan"ados.
!ste servicio se actuali"ar diariamente ofreciendo las #ltimas novedades y adems,
en un futuro, tambi$n ser%a aceptable que los propios usuarios puedan escribir sobre
un tema determinado adjuntando imgenes o videos.
e esta forma, la red de conocimiento ser d%a a d%a ms grande, y de mayor calidad
puesto que la red de usuarios puede valorar y comentar en estos temas. &omo se
puede observar la idea principal que queremos llevar a nuestro sistema es totalmente
personali"able a gusto de cualquier productor, y no por ello deja de ser un concepto
diferente o complicado. !s decir, como 'emos dic'o antes los blogs o foros suelen
configurarse para temticas variadas donde la informacin no es precisa o no recaban
todos los detalles posibles. Nuestra idea, es la contraria, ofrecer un sistema totalmente
configurable sobre una temtica concreta, de esta manera se asegura calidad
didctica, que es lo que interesa. Pero tambi$n se puede combinar distintas
implementaciones de este sistema, para desarrollar varias temticas, de aqu% la
personali"acin que se 'a comentado antes.
Nos parece un buen sistema para el aprendi"aje y formacin, totalmente escalable, y
donde todo est organi"ado de forma que a primera vista se obtenga toda la
informacin relevante.
!n definitiva es una buena alternativa que sin duda destaca por su innovacin al
aprendi"aje en entornos web y marcar un antes y un despu$s en la forma de
transmitir contenidos, de manera que se requiera una participacin ms activa por
parte del consumidor y con mayor calidad, en comparacin con otras tecnolog%as
existentes.
Descripcin
&omo 'emos explicado en la motivacin de este proyecto, es una aplicacin que va a
permitir distribuir todo tipo de contenidos, especialmente multimedia, donde los
usuarios puedas principalmente visuali"ar tutoriales escritos o videos didcticos sobre
un tratamiento particular.
Los objetivos del sistema reflejan aquellas actividades generales que la aplicacin software
debe desempear, en concreto para esta aplicacin debe:
- El sistema debe ofrecer contenido multimedia con descripciones textuales a los
usuarios.
- El sistema debe permitir realiar votaciones sobre cualquier contenido multimedia, as!
como mostrar el total de las mismas para cada cuestin.
- El sistema debe permitir realiar comentarios sobre los videos " sobre cualquier
recurso, as! como mostrarlos cronolgicamente.
- El sistema debe permitir adjuntar diferentes tipos de arc#ivos para complementar los
contenidos multimedia.
- El sistema debe ofrecer un mecanismo de b$squeda para buscar aquellos recursos que
interesan
4.- Requisitos.
En los siguientes apartados se listan los requisitos del sistema, tanto funcionales como no
funcionales, " el diagrama de caso de uso.
4.1.- Requisitos Funcionales.
Estos requisitos definen el comportamiento " los servicios que debe proveer el sistema:
Nombre IRF1 Visualizacin de videos.
Fuente/Autor %ois&s %art!ne " 'dri(n Esquivel.
escri!cin El sistema debe permitir visualiar los videos mediante un conjunto de
operaciones de interaccin con el usuario
"omentarios Los videos se subir(n a )outube por lo que se utiliar( su '*+ para la
implementacin
Nombre IRF# $estor de votaciones.
Fuente/Autor %ois&s %art!ne " 'dri(n Esquivel.
escri!cin El sistema debe facilitar la seleccin de una valoracin por cada usuario, "
mostrarlo en tiempo real en la aplicacin
"omentarios Las votaciones se realian eligiendo un n$mero del ,-,./. 0o #a" logueo.
1al ve sea necesario un captc#a.
Nombre IRF% $estor de comentarios.
Fuente/Autor %ois&s %art!ne " 'dri(n Esquivel.
escri!cin El sistema debe dar de alta un comentario por cada usuario, " mostrarlo en
tiempo real en la aplicacin
"omentarios Los comentarios requieren un nombre de usuario " la descripcin. 0o #a"
logueos. 1al ve sea necesario un captc#a
Nombre IRF4 $estor de contenido.
Fuente/Autor %ois&s %art!ne " 'dri(n Esquivel.
escri!cin El sistema debe permitir aadir nuevos temas especificando categor!as o
eliminar las existentes. 1ambi&n debe ofrecer todo tipo de #erramientas de
escritura " capacidades para adjuntar todo tipo de arc#ivos
"omentarios 2e puede utiliar alguna #erramienta 3)2+3)4 como 1in"%5E. 2olo el
administrador puede gestionar los contenidos.
Nombre IRF& '(squeda de contenido.
Fuente/Autor %ois&s %art!ne " 'dri(n Esquivel.
escri!cin El sistema debe realiar b$squedas sobre el nombre de cualquier recurso.
"omentarios 0inguno.
Nombre IRF) *istar recursos.
Fuente/Autor %ois&s %art!ne " 'dri(n Esquivel.
escri!cin El sistema debe realiar un listado de todos los recursos textuales como
audiovisuales dependiendo de unos par(metros.
"omentarios Estos par(metros vienen dados por un tipo de categor!a que se quiera
filtrar o todos.
4.#.- ia+rama de "asos de ,so.
' continuacin se muestra el diagrama de caso de uso del sistema desarrollado:
ia+rama de "asos de ,so
En primer lugar mencionar que no est(n implementados todos los casos de uso como: 6uscar o
'adir 7otacin por falta de tiempo.
4.%.- Requisitos No Funcionales.
Las restricciones sobre el comportamiento que debe soportar el sistema son:
Nombre IRNF1 ,sabilidad.
Fuente/Autor %ois&s %art!ne " 'dri(n Esquivel.
escri!cin El sistema ser( sencillo de entender " utiliar, tanto para usuarios
experimentados como para usuarios novatos.
"omentarios 0inguno.
Nombre IRNF# is!onibilidad.
Fuente/Autor %ois&s %art!ne " 'dri(n Esquivel.
escri!cin 'l ser una aplicacin web, idealmente debe estar en funcionamiento 89
#oras al d!a los : d!as de la semana.
"omentarios *uede estar fuera de servicio un m(ximo de - #ora semanal, por tareas de
mantenimiento, mejora o actualiacin.
Nombre IRNF% Accesibilidad.
Fuente/Autor %ois&s %art!ne " 'dri(n Esquivel.
escri!cin El sistema deber( ser accesible para la variedad de dispositivos disponibles
en el mercado actualmente, desde los tradicionales ordenadores personales,
#asta los $ltimos tel&fonos inteligentes " tabletas.
"omentarios 0inguno.
Nombre IRNF4 -e+uridad.
Fuente/Autor %ois&s %art!ne " 'dri(n Esquivel.
escri!cin El sistema debe estar protegido contra arc#ivos maliciosos " contra
ataques por parte de usuarios malintencionados.
"omentarios 0inguno.
Nombre IRNF& .scalabilidad.
Fuente/Autor %ois&s %art!ne " 'dri(n Esquivel.
escri!cin El sistema debe ser escalable, debe poder recoger, almacenar " mostrar
todos los datos, arc#ivos e informacin que generen tanto el administrador
como los usuarios.
"omentarios 0inguno.
4.4.- ia+rama .ntidad/Relacin.
El diagrama Entidad;<elacin utiliado para el diseo lgico de la base de datos a utiliar
es:
ia+rama .ntidad/Relacin
4.&.- Inter/az de ,suario.
Este primer prototipo representa la ventana principal de la aplicacin donde son listados
todos los videos diarios, adem(s , a trav&s de las pestaas es posible navegar a trav&s de la
aplicacin, ofreciendo distintos tipos de medios como los tutoriales. 'dem(s se muestran en
un panel asociado todas las categor!as disponibles sobre los diferentes temas multimedia
tratados.
0antalla !rinci!al de la A!licacin 1eb
!ste otro prototipo se muestra cuando el usuario se dispone a visuali"ar un
videotutorial, donde a parte del contenedor del video con todos sus controles, puede
valorar el video, dejar un comentario o visuali"ar los comentarios existentes.
0antalla !ara visualizacin de v2deos3 zona de votaciones 4 comentarios.
!l #ltimo prototipo muestra como son visuali"ados los tutoriales textuales (recursos),
de tal forma, el usuario puede leer el tema con imgenes ilustrativas del proceso y
adems puede dejar sus comentarios o leer los comentarios de los dems. *ambi$n
es posible elegir la categor%a, para visuali"ar todos los recursos que le corresponden.
0antalla !ara visualizacin de recursos3 con e5!licaciones te5tuales 4 /otos de e6em!lo.
Entorno Operativo y Arquitectura
!l sistema consistir en una aplicacin web, gu%as y videotutoriales sobre el
tratamiento de imgenes, por ello, lo primero que necesitaremos sern 'erramientas
intramedia. !n nuestro caso, y como vimos en el seminario anteriormente reali"ado, la
'erramienta intramedia elegida es +dobe P'otos'op. &on ella reali"aremos todo el
procesamiento a las imgenes que utili"aremos de ejemplo, que incluirn cambio de
dimensiones, cambios en los colores, aplicacin de filtros, e incluso modificacin de
los propios elementos que forman la imagen. e esta forma los usuarios finales,
pueden ver el tratamiento de las imgenes respecto a las originales, explicando paso a
paso como se 'a reali"ado el proceso a trav$s de las guias.
Para los videotutoriales, en caso de ser necesario, utili"aremos la 'erramienta
intramedia para v%deos +dobe Premiere Pro, de tal manera que nos permita cortar,
aadir alguna explicacin en texto sobreimpreso, transiciones, o cambiar de formato
los v%deos, para que al subirlo a la pgina del programa se puedan visuali"ar
correctamente. !legimos esta 'erramienta porque es parte de la suite +dobe
especiali"ada en la edicin de videos.
!n el caso de las 'erramientas intermedia, utili"aremos una combinacin de
reamweaver junto a ,aqetta para reali"ar todo el desarrollo de la aplicacin web con
-*,./. !sto nos permitir aadir la toda la interactividad y la interaccin que tendr el
usuario con nuestra aplicacin, utili"ando todo tipo de elementos. ,aquetta es un
software especiali"ado en disear pginas web basadas en -*,./ utili"ando sus
propias librer%as. Por ejemplo para la distribucin o maquetacin del contenido en
todas las pginas web de la aplicacin. ream weaver es un entorno de desarrollo
integrado incluido en la suite de +dobe, es ideal para implementar el cdigo en
lenguajes script, por las opciones de formateo que tiene.
Para la gestin de la base de datos depende de la plataforma donde se despliegue el
sistema, para la plataforma 0indows utili"amos 12.yog &ommunity !dition, y en la
plataforma .inux, P'p,y+dmin, ambos son software libre y de fcil manejo.
3310 &onversor de videos44
5inalmente, para la captura de imgenes, v%deo y audio, utili"aremos dos dispositivos6
una cmara digital 1ony +lp'a 778 de 98,: megap%xeles y sensor && +P1;&, con la
que capturaremos las imgenes a procesar y un tel$fono mvil inteligente, 1ony
!ricsson <peria +=& 1 para la captura de v%deo y audio. >ste dispone de una cmara
de v%deo de ?,9 megap%xeles con sensor &,@1 !xmor =, capa" de grabar v%deo -
A:8p de 'asta 78 fotogramas por segundo.
!sta aplicacin se basa por naturale"a en la arquitectura cliente;servidor.
!n el lado cliente, se conectar a la aplicacin a trav$s de un navegador web
compatible con -*,. /. !n el lado servidor web, dependiendo de qu$ peticiones se
'agan, se procesarn distintas operaciones para satisfacer al navegador cliente.
9.9.; +rquitectura .gica.
.a naturale"a de esta aplicacin es la de ser utili"ado por todo el mundo, los
navegadores clientes deben soportar la especificacin -*,. / en sus #ltimas
versiones, como es el caso de ,o"illa 5irefox, @pera, Boogle &'rome y 1afari, as%
como sus variantes. !l principal problema es que -*,./ est en fase borrador y los
navegadores web no implementan totalmente todas las funcionalidades o si lo 'acen,
difieren entre ellas.
!l servidor utili"ar el framework NodeJS, es una tecnolog%a basada en Cava1cript
que permite reali"ar aplicaciones del lado de servidor muy potentes y rpidas, una de
las caracter%sticas que ofrece a diferencia de otras tecnolog%as, es que no crea un 'ilo
de proceso por cada cliente lo que permite que no sobrecargue de procesos el
servidor 'aciendo la carga de trabajo muy liviana. !st basado en programacin
as%ncrona para utili"ar cada 'ilo de ejecucin de forma eficiente e independiente.
*ambi$n utili"a el paradigma orientado a eventos por ejemplo los diferentes eventos
DrequestE que se producen en la aplicacin cliente y, as% poder reali"ar acciones
determinadas para cada uno de ellos. NodeC1 tiene un amplio soporte comunitario con
cientos de mdulos listos para instalar a trav$s de su gestor NP,. *ambi$n se utili"ar
!xpress como web frameworF y +C+< en el lado cliente. &omo ventaja de esta
tecnolog%a se puede instalar fcilmente en local ya que prescinde de servidores
complejos, NodeC1 es muy liviano. &on lo cual, la instalacin es muy rpida.
.a comunicacin servidor web;base de datos ser indispensable, pero dada la
implicacin del objetivo de construccin del sistema, 'emos decidido utili"ar un
sistema GG basado en ,y12. para que nos proporciones la robuste" necesaria
para el subsistema de comentarios, valoraciones, y los diferentes tipos de contenidos
creados.
9.:.; +rquitectura 5%sica
.a aplicacin est basada en dos capas6 por un lado el cliente y por otro el servidor. !l
lado cliente se encuentran los principales navegadores web por los cuales van acceder
al servicio. !n este caso, sern soportados aquellos que sean ms populares.
!l lado servidor formado por el n#cleo de NodeC1, encargado de despac'ar y servir
todas las peticiones de los clientes, adems a trav$s de un conector se comunicar
con la base de datos ,y12.. &omo interfa" de programacin sobre NodeC1, se utili"a
!xpress, seg#n sus creadores, es un framework de desarrollo de aplicaciones web
minimalista y flexible para Node.js. !st inspirado en 1inatra, adems es robusto,
rpido, flexible y muy simple. + trav$s de los routers (o rutas) reali"amos una serie de
operaciones u otras. Bracias a este frameworF nos facilita la tarea de implementar
cdigo, ya que reduce el n#mero de l%neas que 'ay que producir en comparacin con
la +PH de NodeC1.
!n conjunto forman la aplicacin que puede ser utili"ado en local o remotamente a
trav$s de un servidor. !s una prctica didctica por eso algunos elementos sobre
seguridad de red se prescinden, como firewalls o balanceadores de carga.
Manual de instalacin
!n primera instancia, es necesario instalar el servidor desde su pgina oficial6
'ttp6IInodejs.orgIdownloadI. 1i se quiere instalar desde un equipo .inux, lo ms fcil es
instalarlo desde los repositorios de su distribucin. *eniendo instalado ya el servidor,
copiamos el directorio de nuestra aplicacin a alg#n directorio que sea fcilmente
reconocible. !l siguiente paso es instalar el mdulo Nodemon desde la consola, de
esta manera6 npm install nodemon Jg. Kna ve" 'ec'o esto, 'ay que acceder al
directorio mencionado anteriormente y ejecutar en la consola6 nodemon app.js. 1aldr
un log diciendo que el servidor est preparado.
Para ejecutarlo simplemente 'ay que abrir un navegador web e introducir la direccin6
local'ost67L7L
5inalmente 'ay que instalar la base de datos, para ello se importa la base de datos
actual al 1BG correspondiente. Para configurar los datos de configuracin en la
aplicacin, es necesario crear el usuarioMM
Manual de Usuario