Vous êtes sur la page 1sur 30

Pgina: 1

Trabajo Final de Grado(TFG)


Grado en Multimedia

TTULO: Artculos de coleccin - Aplicaciones RIA AUTOR: Jordi Moreno Marn CONSULTOR: Eva Casado de Amezua Fernndez-Luanco PROFESOR: Carlos Casado Martnez FECHA: Enero de 2012

Pgina: 2

Resumen
El 4 de marzo se 2010 pude asistir en Barcelona al Flash Day, un evento realizado por Adobe que mostraba los avances ms significativos de Flash entendiendo ste como una plataforma que incluye Flash, Flex y AIR. En este evento participaron miembros de Adobe y algunos de los principales miembros de empresas como: http://www.refr3sh.es/ http://www.codeoscopic.com/ http://www.herraizsoto.com/ http://bestiario.org/ Presentaron en el evento muchos proyectos que me impactaron. A partir de aquel da empec a investigar en estas tecnologas y me qued claro que como estudiante del Grado Multimedia deba terminar dominndolas. Pero en aquellos meses todava no se imparta la asignatura "Rich-Media" en el Grado Multimedia, justamente ste es el primer semestre en que se imparte, pero para m ya es tarde, he cerrado el ciclo de crditos. Por lo que el trabajo de aprender de manera profesional el funcionamiento de las aplicaciones "Rich-Media" es una tarea que voy a realizar individualmente y en parte como autodidacta. Y justamente voy a utilizar este TFG como plataforma de lanzamiento para consolidar estos conocimientos. Para conseguir el fin deseado utilizar una problemtica que puede ser comn en las empresas de produccin industrial, como es la de gestionar el catlogo de artculos. Por lo que realizar un proyecto real que se me ha confiado como miembro del departamento de Organizacin y Sistemas en la empresa en que trabajo. Empresa que mantendr en el anonimato y productos que disfrazar para no mostrar informacin confidencial de la compaa, por lo que la denominar InElastic S.A. Esta empresa est dedicada a la creacin de tejidos elsticos de alta calidad, que sus clientes transforman en artculos de moda ntima, bao y deporte. Es una de las principales empresas del

sector a escala mundial, posee plantas de produccin en Asia y EEUU, y adems tiene su sede en Barcelona. Esquemticamente el proyecto parte de la necesidad de los departamentos de Marketing, Comercial y Creacin de informatizar sus colecciones y catlogos de artculos, para poder presentar a sus clientes visualmente las caractersticas de los mismos. Por esto, la aplicacin partir de la informacin tanto de los datos como de las imgenes de estas colecciones y de sus artculos, mostrando otros puntos de inters sobre dichos artculos, atendiendo a su produccin y a la actividad empresarial. Para este proyecto utilizar algunas de la aplicaciones incluidas en Adobe Creative Suite 5 Master Collection: Flash Builder 4, Flash Professional CS5, Photoshop CS5, Dreamweaver CS5 e Indesign CS5. Tambin utilizar PHP para obtener datos desde MySql a travs del ZendFramework, que explotar en Flash Builder (Flex). Y todo con el objetivo final, de utilizar los recursos ms avanzados que ofrecen estas tecnologas.

Pgina: 3

Agradecimientos
A mi mujer, por la paciencia que ha mostrado todos estos aos de estudio. A mi hijo, por las veces que con una sonrisa luminosa y abrazado a su osito de trapo me ha dicho; Pap jugamos! y yo le he tenido que responder: "No hijo, ahora no puedo por que tengo que entregar un trabajo", y verlo marchar con la sonrisa desfigurada, arrastrando su osito por una pata.

Pgina: 4

ndice de contenidos
Captulo 1. Introduccin............................................................................ 5
Definicin............................................................................................................................................. 5 Justificacin.......................................................................................................................................... 5 Usuarios................................................................................................................................................ 5 Objetivos.............................................................................................................................................. 6 Anlisis de los contenidos..................................................................................................................7 rbol de contenidos............................................................................................................................8

Captulo 2. Objetivos del proyecto............................................................. 6 Captulo 3. Anlisis de los contenidos........................................................ 7


Captulo 4. Anlisis formal........................................................................ 9


Introduccin funcional...................................................................................................................... 9 Definicin de la interfaz..................................................................................................................... 9 Navegacin ........................................................................................................................................ 10 Solucin tecnolgica......................................................................................................................... 16 Aplicaciones utilizadas..................................................................................................................... 16 Lenguajes de programacin............................................................................................................. 16 Integracin de datos.......................................................................................................................... 17 Instalacin.......................................................................................................................................... 17 Diseo base de datos......................................................................................................................... 18 Estructura y funcionalidad de la aplicacin .................................................................................. 19 Calendario.......................................................................................................................................... 22 Presupuesto........................................................................................................................................ 23

Captulo 5. Anlisis tecnolgico............................................................... 16



Captulo 6. Planificacin.......................................................................... 22

Captulo 7. Presupuesto........................................................................... 23

Anexo 1 Fuentes, recursos y bibliografa utilizada....................................................................................... 24


Recursos recomendados................................................................................................................... 24 Bibliografa recomendada................................................................................................................ 19

Anexo 2
Diagrama de Gantt............................................................................................................................ 25 Libreras utilizadas............................................................................................................................ 26 Cdigo externo.................................................................................................................................. 26

Anexo 3

Anexo 4 Cdigo fuente utilizado.................................................................................................................... 27 Anexo 5 PAC's entregadas y conclusiones..................................................................................................... 30

Pgina: 5

Captulo

Definicin
En los ltimos tiempos se ha utilizado el trmino Rich-Media, que es sinnimo de Interactive Multimedia. El desarrollo de este trmino en alguno de sus conceptos nos lleva a la explotacin de la interactividad (entre el ordenador y el usuario), como un nueva concepcin que revoluciona la evolucin de las aplicaciones para Internet. En este sentido uno de los trminos ms poderosos para la explotacin de las aplicaciones Web es el de Rich Internet Applications, o RIA (aplicaciones de Internet enriquecidas). Existen diferentes framework de cdigo abierto (open source) que permiten crear Aplicaciones RIA como Flex, JavaFX o Silverlight. Pero a da de hoy y amparados por Adobe Creative Suite 5 Master Collection, los estudiantes de Grado Multimedia podemos disponer de un entorno inmejorable. La pujante demanda de las aplicaciones RIA, tanto en el mercado laboral como en mi entorno de trabajo, sumada a su enorme riqueza visual aporta un gran valor aadido a los contenidos que me lleva a tomar la decisin de utilizar este proyecto como una ampliacin de mis conocimientos en estas tecnologas. Para poder desarrollar este proyecto y utilizar una problemtica ms o menos generalizada en el mundo empresarial, realizar un proyecto real que la empresa (cuyo nombre mantendr bajo seudnimo) InElastic me ha confiado como miembro de su departamento de Organizacin y Sistemas.

Introduccin

Los departamentos de Marketing, Comercial y Creacin tienen la necesidad de poder informatizar la gestin de sus colecciones y catlogos de artculos que actualmente se realizan manualmente. El cliente necesita tener un primer contacto inicial con las telas y poder palparlas manualmente. Pero a partir de la valoracin de los tejidos por parte de los clientes, es de suma importancia para los departamentos implicados de InElastic tener herramientas capaces de mostrar las caractersticas, naturaleza y particularidades de sus tejidos. El objetivo de este proyecto es crear una aplicacin RIA para la gestin de los departamentos mencionados donde se puedan gestionar sus artculos y colecciones, adems de poder obtener resultados de las ventas acumuladas a fin de analizar el comportamiento de estos artculos en el mercado, a travs de grficas y curvas de ventas. Esta aplicacin tambin debe tener una seccin donde se muestre quin y cmo somos, incluidos nuestros procesos de produccin. En definitiva, con este producto InElastic pretende mejorar la relacin actual con sus clientes, facilitar la accin de la fuerza de ventas y reforzar as su imagen corporativa y de liderazgo en el mercado mundial.

Usuarios
Los usuarios de la aplicacin pertenecern a los departamentos Comercial, Marketing y Creacin. Creacin y Marketing son los encargados de la creacin, gestin y puesta en escena de los productos, as como de la introduccin de las colecciones en el sistema; el departamento Comercial se har cargo de la explotacin de la aplicacin. La aplicacin debe tener una interfaz slida, con una visualizacin rica en contenidos y con un elevado impacto visual.

Justificacin
La empresa InElastic tiene como eje principal de su negocio la creacin de tejidos elsticos que sus clientes transforman en producto final como artculos de lencera, bao o deporte.

Pgina: 6

Captulo

Objetivos
Las exigencias de InElastic nos llevan a la necesidad de crear una aplicacin que cumpla con las expectativas y cubra las necesidades de los departamentos de Marketing, Comercial y Creacin. Para poder cubrir las necesidades de estos departamentos, debemos definir los objetivos que queremos conseguir y que servirn como punto de partida para poder desarrollar el software requerido por la empresa. Se crear una aplicacin con la que se puedan cubrir los siguientes objetivos: Pgina principal, donde poder seleccionar las opciones de navegacin deseadas. Pgina para seleccionar las colecciones existentes hasta la fecha. Se deben mostrar los logos de las colecciones permitiendo su seleccin. Una vez realizada, se mostrarn todas las fotografas de los artculos pertenecientes a la misma permitiendo elegir cualquiera de los artculos desplegados; luego, se visualizar la imagen ampliada de la muestra del tejido y sus datos comerciales. Pgina donde poder buscar y consultar informacin de cada artculo en formato de rejilla de datos, donde una vez seleccionado el artculo se mostrar su informacin, cdigo, descripcin, almacn, stock, unidad, coleccin. Pgina donde poder consultar grficamente las curvas de ventas de las colecciones que, una vez elegida una coleccin, se pueda acceder a los grficos de ventas mensuales de los artculos de la misma.

Objetivos del proyecto

Pgina donde poder ver informacin de la empresa con la misin de dar un visin de quienes somos y cmo trabajamos. En esta seccin se describir resumidamente el proceso industrial de los artculos. Pgina donde se puedan ver nuestros artculos en el mercado como producto manufacturado por nuestros clientes y con la posibilidades de intercambiar informacin en las redes sociales. Para conseguir estos objetivos debemos estar representados en: Flickr, donde poder ver las fotografas de algunos de nuestros artculos en las pasarelas ms importantes del mundo de la moda. Youtube, donde poder ver en vdeo algunos de los eventos ms importantes del mundo de la moda de los tejidos elsticos. Twitter, poder entrar experimentalmente en una red social, donde intercambiar experiencias, discutir sobre tejidos y moda, que se pueda hacer un seguimiento de las expectativas creadas por nuestros artculos. Pgina de gestin de artculos donde poder aadir, dar de baja y modificar los datos de las colecciones y sus artculos.

Pgina: 7

Captulo

Anlisis de los contenidos

general de los procesos de produccin de la empresa y las diferentes reas que la engloban, como las plantas de tejedura (rectilneas y circulares), las secciones de tintura y acabados, as como la fase final de repaso, embalaje y almacenamiento. En el mercado: En esta seccin se incluirn una serie de herramientas para acceder a informacin externa, relacionada con los productos de la empresa en el mercado. Flickr: Se mostrarn las fotografas alojadas por nuestra empresa en una cuenta (Flickr) creada para tal fin. En ella se mostrarn algunas fotografas relevantes de las actividades de nuestros clientes utilizando nuestros productos una vez manufacturados segn las necesidades del mercado YouTube: Se podrn visualizar directamente algunos videos de nuestros artculos en las pasarelas internacionales de la moda, permitiendo seleccionar el contenido de los vdeos. Twitter: Se crear una cuenta donde se podrn introducir mensajes y hacer comentarios sobre los productos de la empresa en el mercado y algunos otros relacionados con diferentes sucesos o actividades en el sector. Gestin de datos: En esta seccin se realizar la gestin de una parte de los datos utilizados en la aplicacin, como son las colecciones y los artculos. Permitir aadir, dar de baja y modificar registros. Los dems datos (acumulados de ventas y datos comerciales), se mantendrn directamente sobre las tablas en MySql, simulando la entrada de datos desde el ERP.

Anlisis de los contenidos


La pantalla principal nos ofrecer una imagen inicial de presentacin y una barra de men que nos permitir navegar por los diferentes contenidos de la aplicacin: Colecciones: Se mostrarn las colecciones que se han creado para la temporada en curso. Pulsando sobre las imgenes de las colecciones se mostrarn todos los artculos pertenecientes a dicha coleccin. Se permitir seleccionar cualquiera de los artculos desplegados individualmente y con dicha seleccin ampliar la imagen del artculo mostrando informacin de sus datos comerciales (artculo, ancho, peso y componentes). Datos artculos: Se permitir seleccionar por artculo o descripcin (por una parte del nombre o por todo). Se mostrar la informacin general de los artculos cargados en formado de rejilla de datos, permitiendo la seleccin de un artculo determinado y mostrando su imagen e informacin (artculo, descripcin, almacn, stock, unidad y coleccin). Ventas: Se debe mostrar grficamente informacin de las ventas acumuladas durante el ao de cada coleccin y seleccionando una de las colecciones ver la informacin de las ventas mensuales de cada uno de sus artculos. Esta informacin ser por metros e importes en euros y se mostrar en tres formatos grficos: BarChart, PieChart y ColumnChart. La fabricacin: Esta seccin tiene como misin ofrecer al cliente informacin de cmo somos. Debe presentar informacin

Pgina: 8

rbol de contenidos
El rbol de contenidos mantiene una estructura lineal y muestra esquemticamente la relacin entre los diferentes contenidos, su organizacin y las diferentes opciones de navegacin.

En el mercado: Permite consultar informacin de los artculos puestos en el mercado por nuestros clientes como artculo final, a travs de Twitter, YouTube y Flickr. Gestin de datos: Permite modificar los datos de artculos y coleccin con las opciones de alta, baja y modificacin.

En los items de color negro podemos ver las opciones principales de navegacin: Colecciones: Muestra las diferentes colecciones de temporada con la opcin de ver todos los artculos y poder seleccionar en cada uno de ellos individualmente. Datos artculos: Permite seleccionar en formato de rejilla de datos los artculos, pudiendo seleccionar individualmente y entrar ms en detalle. Estadsticas de venta: Permite ver grficamente el comportamiento de los artculos y colecciones en el mercado. La fabricacin: Permite consultar un documento visual con informacin de los procesos industriales de los artculos.

En los items de color azul podemos acceder a otras opciones de complemento, el cambio de idioma y una futura integracin de los clientes en su propia rea. Los items amarillos muestran accesos y acciones que se pueden realizar. Disponemos de una ayuda que muestra informacin de los contenidos existentes en cada fase de la navegacin.

Pgina: 9

Captulo

Introduccin funcional
Para entender algunos puntos de la interfaz es necesario conocer algunos datos sobre el funcionamiento del proceso de creacin de los productos en la empresa. En primer lugar el departamento de Creacin disea los DNPs (desarrollos de nuevos prototipos). Una vez finalizado el proceso de fabricacin, estos DNPs son analizados y los que cumplen con las expectativas pasan a ser artculos de coleccin; los que no, son rechazados. El departamento de Creacin se encarga de introducir estos nuevos artculos en el sistema (ERP) y desde el departamento de Industrializacin se crean los dems datos de produccin de los artculos, las rutas, procesos, composicin, fichas de costes y datos comerciales. En la nueva aplicacin que se va a desarrollar, el departamento de Creacin podr dar de alta los artculos a travs de la propia aplicacin y sobre la base de datos MySql (en el proyecto actual y directamente sobre las tablas de Oracle en el ERP cuando la aplicacin est disponible). Con esto se conseguir una mayor comodidad para el personal encargado de las colecciones y una mayor eficacia en la puesta en marcha de las mismas. Para esta gestin, el departamento de Creacin dispondr de la seccin Gestin de datos donde podrn aadir, dar de alta y modificar los datos de los artculos y las colecciones. Los dems datos que utilizar, datos comerciales o acumulados de ventas, los introducir manualmente en la base de datos, simulando la entrada de datos desde el ERP.

Anlisis formal

Definicin de la interfaz
Uno de los principales conceptos que he tenido en cuenta a la hora de definir la interfaz es el principio de usabilidad (del ingls usability). Para el buen funcionamiento de la interfaz: He organizado todos los componentes para permitir un acceso gil a la informacin y un aprendizaje fcil. He evitado sobrecargas visuales que puedan crear confusin creando espacios amplios y claridad en los contenidos He optimizado y seleccionado los componentes adecuados para facilitar las posibilidades en el intercambio de informacin entre sistema y usuario. He tenido en cuenta la premisa de la reduccin de costes con una rpida elaboracin de la informacin y evitando la frustracin producida en los usuarios por una mala organizacin de la interfaz. He creado una interfaz profesional y robusta que consolidar la imagen de la marca. He utilizado los colores negros y grises en la interfaz porque crean un fondo visualmente atractivo y relajante en la aplicacin. El logo, el men de navegacin y la iconografa, destacan en su justa medida, con un equilibrio de color apropiado, creando un efecto visual armonizado con el fondo de la aplicacin. He creado una hoja de estilo (styleSheets.css) que contiene los font-size y family utilizados. Para los logos se ha utilizado un tamao de fuente de 14 pt y 22,6 pt que es el resultante de aplicar la frmula de la proporcin urea.

Pgina: 10

Navegacin
Pgina principal: Contiene el men de navegacin, las opciones de accesos a "Idiomas", "rea de cliente" y "Aviso legal", no disponibles de momento. Pasando el cursor por encima de los botones del men de navegacin se cargarn las opciones de mens y haciendo click con el cursor sobre ellos se descargarn y volvern a cargar estas opciones. El men de navegacin inicialmente estaba situado en la parte inferior de la pantalla, pero despus de hacer diferentes pruebas sobre la aplicacin y con diferentes usuarios, pude observar que cuando trabajamos con la pantalla existe una tendencia a situar el cursor en la parte inferior de sta, por lo que aumenta el riesgo de que el usuario pueda pasar el cursor por encima de los botones del men de navegacin accionando el cambio de opcin fortuitamente. Para evitar esta posible accin no deseada he optado por situar el men de navegacin en la parte superior de la pantalla, hacia donde habra que desplazar el cursor explcitamente para realizar un cambio de opcin. A fin de justificar este forma de navegacin, debo decir que durante aos he podido observar que los usuarios para cumplir con el desarrollo de sus funciones optan por trabajar con diferentes pantallas a la vez y van cambiando de una a otra segn las necesidades de informacin. Por ejemplo, el usuario puede abrir la pantalla de artculos de coleccin y ver el resultado; a continuacin abrir la de datos de artculos y obtener ms informacin. Pasando el cursor por encima de los botones puede ir de una opcin de men a otra conservando los datos mostrados anteriormente, y solo en el caso de pulsar click sobre el botn se reinicializarn los datos. Portada : Podemos ver una serie de asteroides en movimiento que van cambiando de color y un conjunto de letras que van girando y cambiando de color cada varios segundos.

En la web de miniusa se puede ver un sistema de navegacin en el que se activa la opcin de men al pasar el cursor sobre los botones del rbol de navegacin, http://www.miniusa.com/

Pgina: 11

Colecciones: Contiene las colecciones de la temporada actual. Seleccionando cualquiera de las colecciones podemos acceder a sus artculos.

Artculos: Contiene los artculos correspondientes a cada coleccin. Seleccionando el artculo deseado, podemos ver sus datos comerciales (ancho, peso y composicin comercial) y una ampliacin de la imagen, con la que obtendremos una mejor definicin de la caractersticas del artculo.

Pgina: 12

Datos artculos: Permite buscar por artculo, ya sea escribiendo parte de su nombre o dejndolo en blanco para seleccionarlos todos. Como informacin relevante distinguiremos: Si el Almacn = 100, hay gnero en stock. Si el Almacn = 200 (circulares) o 300 (rectilneas), es que todava no se ha industrializado y no hay produccin en stock. Stock= Es la cantidad de unidades que hay almacenados y est relacionado con el campo Unidad; si este campo contiene "mts" la cantidad del Stock ser en metros y si contiene "kg" ser en kilos.

Estadsticas de ventas: Contiene informacin del comportamiento de las ventas por artculo y coleccin, desde la fecha en que sta se lanz al mercado.

Pgina: 13

Pulsando sobre las estadsticas de ventas por colecciones se pueden ver las estadsticas de ventas mensuales de los artculos de la coleccin seleccionada.

Procesos de fabricacin: Contiene informacin sobre los procesos de fabricacin y las reas donde se desarrollan estos procesos. Esta pgina contiene un archivo de pelcula (SWF) insertado, creado con InDesign. Se puede pasar de hoja, tanto pulsando las puntas del documento con el ratn, como utilizando los botones anterior y posterior (<>).

Pgina: 14

En el mercado: Contiene herramientas de ayuda para buscar informacin de los artculos producidos, una vez transformados y puestos en el mercado por nuestros clientes. Flickr, se pueden ver diferentes fotografas sobre eventos o sucesos acontecidos en el mercado, seleccionadas y puestas en una cuenta en Flickr de la propia empresa para dicho fin.

YouTube, se puede ver una extensa variedad de vdeos relacionados con el sector, seleccionando segn los conceptos establecidos en la casilla correspondientes, o bien aplicando criterios propios de bsqueda.

Pgina: 15

Twitter, desde esta opcin podemos ver los mensajes insertados en una cuenta creada por la empresa para mantener el dilogo y realizar diferentes ensayos de interaccin en la red social.

Gestin de datos: Permite aadir, dar de baja y modificar registros de artculos y colecciones. Estas opciones actuarn sobre las tablas de artculos y colecciones en la base de datos "dbinelastic". Una vez realiza la transaccin, la aplicacin enviar un mensaje informativo sobre el resultado.

En esta pantalla, tambin se muestra un ejemplo del funcionamiento de la ayuda, que estar presente en todas las pginas que la necesiten y que se accionar al pasar obre su icono "?" .

Pgina: 16

Captulo

Solucin tecnolgica
Como punto de partida, expondr algunos conceptos del sistema informtico actual de la empresa InElastic y tambin detallar las decisiones adoptadas para hacerlos compatibles con este proyecto. Los sistemas informticos en InElastic estn soportados por un ERP con tecnologa Unix y base de datos Oracle 7.4, del que se extrae toda la informacin necesaria para el funcionamiento de la empresa. Por cuestiones de infraestructura es imposible acceder o simular los sistemas informticos de InElastic. Para este proyecto, y para hacerlo funcionar con la mayor similitud posible, crear sobre Mysql un entorno con las tablas necesarias, utilizando solamente aquellos campos que son necesarios para cada tabla y poder conseguir as mis objetivos. Tambin cabe mencionar a titulo informativo, que una vez adaptada y puesta en marcha la aplicacin, se instalar en InElastic y correr sobre Windows Server 2008, con un servidor Apache y Php para acceder a los datos en Oracle y todo ello soportado por una Intranet.

Anlisis tecnolgico

Flash player 10.1 o superior Se instalar tambin el paquete AppServ2.6.0 que contiene: Apache 2.2, PHP 6 y MySQL 6.0.4 Para poderse obtener datos desde MySql por medio de PHP y para alimentar las aplicaciones realizadas en Flex sobre Flash Builder, se utilizar el ZendFramework 1.11.11. Como software de seguimiento del proyecto se utilizar Microsoft Office Project 2003. Para la creacin de diagramas se utilizar Microsoft Office Visio 2003. Ver Anexo 3 para otras instalaciones.

Lenguajes de programacin
La programacin en Flex engloba diferentes tecnologas: HTML. MXML: Archivos propios del framework de Flex. Son archivos de texto planos que contienen una estructura basada en etiquetas XML. ActionScript: Al compilar el proyecto, Flex convierte los archivos MXML en clases ActionScript que posteriormente se exportan a un archivo SWF. Asimismo podr crear aplicaciones completas o componentes utilizando nicamente clases de ActionScript. FXG: Formato de intercambio de grficos basados en XML. SWC: El formato SWC permite exportar un conjunto de componentes y libreras de clases en un nico archivo precompilado. CSS: Permite crear hojas de estilo, asignando a los elementos que vamos a estilizar con diferentes formas y propiedades.

Aplicaciones utilizadas
Este proyecto utilizar Window 7 como sistema operativo de referencia, pudiendo funcionar tambin sobre Window XP. Se van a utilizar las siguientes aplicaciones de Adobe Creative Suite 5 Master Collection: Flash Builder 4 Flash Professional CS5 Photoshop CS5 Dreamweaver CS5 Indesign CS5

Debe instalarse o estar ya instalado en el PC el runtime de Adobe:

Pgina: 17

Integracin de datos
Para a acceder a las fuentes de datos en el servidor, Flex utiliza "Llamadas a Procedimientos Remotos" RPC (del ingls Remote Procedure Call). Se pueden utilizar diferentes mtodos que dependern de la interfaz disponible por parte del servidor. En mi caso utilizar objetos remotos con AMF que usan diferentes tecnologas: ColdFusion, AMFPHP, ZendAMF, LiveCycle Data Services y BlaceDS para Java, WebOrb y FluorineFX para .NET. De todas estas tecnologas he decidido utilizar la de ZendAMF con el Zend Framework que incluye componentes que extienden al extremo las capacidades de PHP, siendo de uso gratuito; adems Flash Builder ofrece soporte nativo de ZendAMF, e incluye un asistente que permite implementar la librera de forma automtica en nuestro proyecto.

La versin de ZendFramework 1.11.11 se puede instalar manualmente o bien automticamente desde Flash Builder. Cuando se crea el primer data/service para PHP, realiza la pregunta de si lo quieres instalar, y si se siguen los pasos ofrecidos el framework quedar instalado. Para m esta opcin es la ms aconsejable, ya que la aplicacin queda perfectamente configurada. En el directorio del proyecto "base de datos" existen una serie de archivos SQL para crear la base de datos, tablas, vistas, procedures y datos utilizados en el proyecto. Se ejecutarn siguiendo el orden establecido en los archivos.

Errores y avisos
Error: En MySql, no deja hacer "CREATE PROCEDURE". Ir al archivo my.ini y poner "#" en sql-mode: #sql-mode="STRICT_TRANS_TABLES,NO_ AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION" por sql-mode="NO_AUTO_CREATE_USER,NO_ ENGINE_SUBSTITUTION" o bien poner "#" en las dos sentencias. Mensaje de aviso: This compilation unit did not have a factoryClass specified in Frame metadata etc... En flex-config.xml poner "true" en: <static-link-runtime-shared-libraries>true</static-link-runtime-shared-libraries>

Instalacin
Se instalarn las aplicaciones descritas anteriormente de Adobe Creative Suite 5 Master Collection, siguiendo la instalacin de DVD de Adobe. Para instalar el pack de Appserv se debe ir a la pgina http://www.appservnetwork.com/ y all descargar appserv-win32-2.6.0.exe Se ejecutar la instalacin: Para Window7 la versin de MySQL 6.0.4 da errores, por lo que slo se seleccionarn las opciones Apache y PHP, una vez finalizada esta instalacin. Desde la pgina: http://www.mysql.com/downloads/mysql/ Se descargar la versin para 64 bits: mysql-5.5.15-winx64 que se instalara sobre c:\ AppServ, para mantener la uniformidad. Para Window XP se seleccionarn las opciones de Apache, PHP, MySQL y se realizar la instalacin sobre c:\AppServ. Para acceder y trabajar con Mysql, utilizo MySQL Workbench 5.2.

Pgina: 18

Diseo base de datos


Base de datos creada con MySql: dbinelastic Tablas: colecciones (primary key:idcolecciones) artculos (primary key:idarticulo) datcomercial (primary key:idarticulo) ventasacumuladas (primary key:idarticulo) Colecciones y artculos estn unidas por la clave fornea(idcolecciones=coleccion). Datcomercial y artculos estn unidas por la clave fornea(idarticulos=idarticulos). Ventasacumuladas y artculos estn unidas por la clave fornea(idarticulos=idarticulos). Desde Flex y por medio de dataservices se realizar el enlace a las pginas PHP que generalmente y por medio de SELECT realizan el acceso a los datos. Como mencin y norma de buena costumbre, que refuerza la seguridad y en muchos casos agiliza el acceso a los datos, he creado tres procedimientos almacenados: getAllColecciones, getAllArticulos, getAllDatcomercial Para poder hacer agrupaciones y realizar acumulados, he creado tres vistas: acum_colecciones, acum_articulos_colecciones, acum_total_colecciones

EER Diagrama creado con MySql Workbench.

Pgina: 19

Estructura de la aplicacin
La aplicacin est estructurada a partir de un men principal, desde donde el usuario interactuar con la aplicacin. Por medio de las llamadas realizadas a travs de este men la aplicacin cargar los diferentes componentes que integran la aplicacin y conforman las diversas secciones de la aplicacin que a la vez cargar las diferentes librera o subcomponentes.

Pgina: 20

La aplicacin est distribuida en diferentes directorios, algunos de uso interno de Flex como:

Services: Contiene los servicios con los que accede a los datos, a travs de PHP. ValueObjects: Contiene los ActionScript, creados y desarrollados por la propia aplicacin. Contiene las clases y las funciones para obtener los datos utilizados en la aplicacin.

y otros utilizados para el desarrollo: Src: Contiene los archivos mxml, y es el directorio de raz principal. En l se suelen crear los subdirectorios con los contenidos necesarios para el funcionamiento de la aplicacin, son variables y dependen del desarrollador. Components: Contiene los componentes que forman las diferentes partes de la aplicacin, que son llamadas por la pgina principal, suelen ser de tipo Panel, Group etc. Images: Contiene las imgenes utilizadas en la aplicacin. Skins: Contiene los componentes utilizados, generalmente para dar forma y controlar las dimensiones de los componentes utilizados en pantalla. Style: Contiene la hoja de estilo de la aplicacin. Swf: Contiene un archivo SWF que se carga en la aplicacin. Ca: Es creado por la libreria de Youtube y contiene varios ActionScript que utiliza esta aplicacin. He empleado este directorio para almacenar el package algorithmic que desarrolla el ActionScript Satelite utilizado en la portada.

Pgina: 21

Funcionalidad de la aplicacin
Partiendo de un men principal que carga y descarga los diferentes componentes utilizados, que mostrarn la informacin necesaria, podemos mencionar como acciones relevantes de la aplicacin: El acceso a datos por medio de Data Service y PHP/MySQL. El uso de las libreras externas. La utilizacin de scripts, tanto definidos en el cdigo interno de los programas, como en llamadas a script externos (AS3). La utilizacin de ToolTip tanto para su uso en la ayuda en lnea como en los tip de estadsticas.

Pgina: 22

Captulo

La planificacin del proyecto presenta algunas dificultades derivadas de la falta de conocimiento del tiempo que se puede emplear en finalizar algunas tareas, ya que contienen algunas casusticas nunca antes experimentadas.

Planificacin

Calendario

Pgina: 23

Captulo

Presupuesto

Presupuestos - Artculos de coleccin


Concepto
Plan de Trabajo Estudio inicial proyecto Objetivos del proyecto Calendario, presupuesto y planificacin Crear documentacin Anlisis diseo Definicin de la interfaz Definicin de grficos y contenidos Definir base de datos y probar conexiones Anlisis tecnolgico

Asignado
Analista Analista Analista Analista

Cantidad Horas
18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 9 6 6 9 69 12 3 3 9 9 81 6 9 15 22 26 25

Precio
162 108 108 162 1242 216 54 54 162 162 1458 108 162 270 396 468 450

Analista Analista y diseador Analista y programador

Programador y tcnico de sistemas Modificar documentacin Analista Implementacin Modificar interfaz Analista Programacin Analista y programador Test-pruebas Analista Modificar documentacin Analista Entrega final y presentacin Animacin portada Analista y programador Finalizar producto Analista y programador Finalizar documentacin Analista Realizar presentacin Analista

Totales
Todos los roles asignados a este presupuesto son ficticios, ya que el subscriptor de este proyecto es el encargado de todas las tareas. Las horas se obtienen de los das asignados a cada faena en el calendario. El tiempo asignado es de aproximadamente tres hora diarias para las primeras tres PACs, y entre dos y tres horas diarias para la Entrega final y presentacin. Las ho-

319

5742

ras asignadas son tanto para los das laborables como para los festivos. El importe en horas es el correspondiente a la divisin mensual del sueldo aproximado de una persona con las caractersticas requeridas, en nmina de una empresa, sin tener en cuenta que los precios varan segn los diferentes roles.

Pgina: 24

Anexo 1
Fuentes, recursos y bibliografa utilizada.
He utilizado los siguientes recursos: Los fuentes del Tour de Flex, autorizados por Adobe para su utilizacin. El libro Flash Builder4 and Flex4 de David Gassner, donde el autor autoriza a utilizar los fuentes. El libro Flex 4.5 de Carrizo y Firtman como consulta de conceptos. Algunos ejemplos que me han servido de gua estn en: http://blog.flexexamples.com/ Link de acceso a los libros recomendados por Adobe: http://www.adobe.com/training/books/flex.html Algunas pginas de ejemplo que implantan tecnologas RIA: http://www.miniusa.com/#/MINIUSA.COM-m http://www.88-mocca.org/#/special-exhibitions http://vinotinto.fr/#/en/page/1/welcome http://www.websiteitalia.com/

Desde la pgina Tour de Flex se puede acceder tanto a ejemplos desarrollados por clientes, como a la mayor base de datos de ejemplos puesta a disposicin de los desarrolladores. http://flex.org/tour/ En Youtube existen multitud de vdeos de aprendizaje sobre los productos de Adobe.

Bibliografa recomendada
Flex 4.5; Carrizo y Firtman. Marcombo, 2011. http://www.marcombo.com/Flex-4_5_-plataforma-para-profesionales_isbn9788426717467. html Flash Builde4 and Flex4; David Gassner. Wiley Publishing, Inc, 2010. http://www.amazon.com/Flash-Builder-BibleDavid-Gassner/dp/0470488956 Adobe Flex 4; Labriola, Tapper y Boles. O'Reilly Media / Adobe Dev Library, May 2010. http://shop.oreilly.com/product/9780596805623. do#tab_04 Flex 4 Cookbook; Noble, Anderson, Braithwaite, Casario y Tretola. O'Reilly Media / Adobe Dev Library, May 2010. http://shop.oreilly.com/product/9780596805623. do#tab_04 Enterprise Development with Flex; Fain, Rasputnis, Tartakovsky. O'Reilly Media / Adobe Dev Library, March 2010. http://shop.oreilly.com/product/9780596154172. do Learning Flex 4; Cole y Robinson. O'Reilly Media / Adobe Dev Library, Nov. 2010. http://shop.oreilly.com/product/9780596805647. do

Recursos recomendados
Pginas en Adobe sobre Flash Builer/Flex. En ellas se encuentran los links para poder acceder a los mejores artculos sobre la materia. http://www.adobe.com/es/products/flex/ http://www.adobe.com/products/flash-builder. html Sitio de Adobe donde se pueden ver excelentes vdeos de aprendizaje sobre Flex http://tv.adobe.com/product/flex/

Pgina: 25

Anexo 2
Diagrama de Gantt

Pgina: 26

Anexo 3
Libreras utilizadas
Para la implantacin de Youtube y Twitter es necesario utilizar estas dos libreras: Bajar desde esta direccin: http://code.google.com/p/as3-youtube-data-api/ downloads/list Se debe descargar la librera en C:\Program Files (x86)\Adobe\Adobe Flash Builder 4\libraries (crear esta carpeta) y cargar en el proyecto de Flex. Con botn derecho sobre el proyecto/propiedades/Flex Build Path en la pestaa Source Path pulsar botn Add Folder. Bajar desde esta direccin: https://github.com/mikechambers/as3corelib/ downloads as3corelib-.93.zip Una vez desempaquetada, se extraer del directorio as3corelib93/lib el archivo as3corelib.swc y se colocar en el mismo directorio que la anterior librera. Con el botn derecho sobre el proyecto/propiedades/Flex Build Path en la pestaa Library Path pulsar botn Add SWC. Para acceder a la cuenta de Twitter he creado el programa twitterjson.php que se encuentra en: C:\AppServ\www\produ_MorenoMarinJordidebug\services.

Extrado en Tour de Flex: Cdigo fuente para Youtube http://tourdeflex.adobe.com/holly/YouTubeSample/srcview/index.html EL cdigo fuente para Twitter, http://blog.log2e.com/2008/05/25/twitter-flexand-json/ Todas las libreras y el cdigo fuente de terceros utilizado esta autorizado por sus autores para su utilizacin. Acceso a la galera de fotos de Flickr, creada para el proyecto: http://www.flickr.com/photos/69093689@N02/ Acceso a lo mensajes de la cuenta de Twitter creada para el proyecto: https://twitter.com/#!/InElastic_SA

Copyright y licencia de uso


2012 Jordi Moreno Marn Todos los derechos reservados. Este proyecto es publicado como Creative Commons. Reconocimiento-No Comercial-Sin Obra Derivada Attribution-Non Commercial- No Derivate Works. El autor otorga a la UOC el permiso de reproducir y distribuir copias de este Trabajo Final de Grado en su totalidad o en partes.

Cdigo externo utilizado


Cdigo fuente para Flick: http://www.cis.temple.edu/~walowitz/c1056/ flex_labs/ F3GSE Part I - Simple RIA v2

http://es.creativecommons.org/licencia/

Pgina: 27

Anexo 4 - Cdigo fuente utilizado


En esta seccin se mostrarn algunas partes del cdigo fuente ms relevantes, para la construccin de la aplicacin.

Composicin del men principal


Las diferentes secciones de la aplicacin estn divididas en componentes que son cargadas en Canvas dentro de un ViewStack:
<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="100%" > <mx:Canvas id="portada"> <components:tfg_compPortada right="0" left="0" horizontalCenter="0" top="0" bottom="0" > </components:tfg_compPortada> </mx:Canvas> ....lo mismo para las dems secciones.

Estos componentes son llamados por los botones del men, que por medio de mouseOver cargar el componente y con un click los descarg y volver a cargar.
<mx:HBox borderStyle="solid" height="34" width="966" horizontalCenter="0" verticalCenter="0"> <s:Button id="colec" label="Colecciones" click="addContent('tfg_compColeccion')" mouseOver="myViewStack.selectedChild=coleccion;"/> .....................

Data services /acceso a datos


Por medio de Data services se realizar el acceso a datos y con ellos se cargan los dataGrid.
//-- Se declara el acceso al cdigo del servicio xmlns:articulosservice="services.articulosservice.*" //-- Declaraciones en el programa de los servicio y sus llamadas <fx:Declarations> <articulosservice:ArticulosService id="articulosService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/> <s:CallResponder id="getAllArticulosResult"/> <valueObjects:Articulos id="articulos"/> </fx:Declarations> //-- Funcin que accede a los datos de artculos. protected function artiGrid_creationCompleteHandler(event:FlexEvent):void { getAllArticulosResult.token = articulosService.getAllArticulos(); } //-- Carga los datos data de la llamada en el DataGrid. <mx:DataGrid id="artiGrid" creationComplete="artiGrid_creationCompleteHandler(event)" dataProvider="{getAllArticulosResult.lastResult}" <mx:columns>

..................

Pgina: 28

//-- Ejemplo de sentencia utiliza en la funcin de crear un registro. createArticulosResult.token = articulosService.createArticulos(articulos); //-- Sentencia utiliza para borrar un registro. deleteArticulosResult.token = articulosService.deleteArticulos(articulos.idarticulo); //-- Sentencia utiliza para actualizar un registro. updateArticulosResult.token = articulosService.updateArticulos(articulos); //-- Carga imagen existente en el directorio a partir del idarticulo del registro obtenido de la base de datos. <mx:FormItem> mx:Image source="images/{articulos.coleccion}/{articulos.idarticulo}.jpg" width="165" height="195"/> </mx:FormItem> //-- Utilizando el mismo sistema de acceso a datos para la carga de los diferentes Charts en las estadsticas. ColumnChart id="column" dataProvider="{getAcum_articulos_coleccionesByIDResult.lastResult}" click="changeStatus()" > <mx:horizontalAxis> ....... //-- Funcin utilizada para detectar la coleccin seleccionada en el grfico, llamar a la funcin que obtiene los datos de artculo de esa coleccin y realiza el cambio de estado. protected function barChart_itemClick(event:ChartItemEvent):void { var bci:BarSeriesItem = event.hitData.chartItem as BarSeriesItem; column_creationCompleteHandler(bci.item.coleccion) changeStatus(); }

Otras funciones o sentencias de inters


//-- Importacin y llamada al archivo externo(AS) satlite, que genera los asteroides de la portada. import ca.algorithmic.Satellite; var satellite:Satellite = new Satellite(position,color); satelliteContainer.addChild(satellite); satellites.push(satellite); //-- Importacin y llamada a una funcin estndar de flash para realizar las transformaciones de color de los asteroides. import flash.geom.ColorTransform; private function getRandomColor():uint { var ct:ColorTransform = new ColorTransform(1,1,1,1,Math.random()*redBias,Math.random()*greenBias,Math .random()*blueBias); return ct.color; } //-- Funciones para crear y destruir los Tips de la ayuda en lnea. private function createBigTip(event:Event):void { var s:String = "Seleccionando un artculo de la lista se puede ver la imgen del tejido " + "y sus datos comerciales. El ancho ser el de la pieza y el peso en gramos por cm2" myTip = ToolTipManager.createToolTip(s,75,75,null,IUIComponent(event.currentTarget)) as ToolTip; myTip.setStyle("color",0xFFCC00); myTip.setStyle("fontSize",12); myTip.setStyle("fontFamily","Arial"); myTip.x = 950; myTip.y = 500; myTip.width = 300; myTip.height = 100; } private function destroyBigTip():void { ToolTipManager.destroyToolTip(myTip); }

Pgina: 29

Ejemplos utilizados de cdigos de terceros


//-- Funciones para cargar fotos de Twiter, con el id de la cuenta creada por Inelastic. <fx:Declarations> <mx:HTTPService id="photoService" showBusyCursor="true" result="photoHandler(event)" fault="photoFaultHandler(event)" /> </fx:Declarations> private function requestPhotos():void { photoService.cancel(); var params:Object = new Object(); params.format = 'rss_200_enc'; if (searchTerms.text=="InElasticTFG") { photoService.url='http://api.flickr.com/services/feeds/photos_public.gne?id=69093689@N02'; params.tags = ""; }else { photoService.url="http://api.flickr.com/services/feeds/photos_public.gne"; params.tags = searchTerms.text; } photoService.send(params); } //-- Funciones y sentencias relevantes para la carga de vdeo de youtube, busca la seleccin y carga vdeo. youTube.getVideos(ComboBox(searchText).selectedItem.label); loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit); loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3")); <mx:DataGrid id="dg" doubleClick="navigateToURL(new URLRequest(dg.selectedItem.mobileUrl))" dataProvider="{ac}" itemClick="this.onVideoSelected()" styleName="labelStyle" color="#F9F5F5"> <mx:columns> ....................... //-- Funciones y sentencias relevantes para obtener los mensajes introducidos en la cuenta de Twitter para InElastic_SA. Se declara el HTTPService con el php de acceso creado para evitar errores de acceso de la aplicacin y extraer los datos de la cuenta. <fx:Declarations> <mx:HTTPService id="twitterService" url="http://localhost/produ_MorenoMarinJordi-debug/services/twitterjson.php" ............ loadPublicTimeline(); private function loadPublicTimeline():void { twitterService.send(); } <mx:DataGrid dataProvider="{publicTimeline}" rowCount="20" color="#F0E7E7" height="364"> <mx:columns> ..................... //-- twitterjson.php" <?php $twitter_feed = 'http://twitter.com/statuses/user_timeline.json?screen_name=InElastic_SA'; $rawfeed = @file_get_contents($twitter_feed); print $rawfeed; ?>

Pgina: 30

Anexo 5
PACs entregadas/situacin
PAC1: El tiempo entre la aceptacin del proyecto y la entrega de la PAC1 es tan corto que me han quedado muchos puntos sin concluir, como terminar de definir los requisitos del cliente y los objetivos que hay que conseguir. PAC2: Para realizar la interfaz he creado diferentes archivos mxml, con sus estados y objetos visuales. En la mayora de los casos no son definitivos, por ejemplo: Los artculos estn cargados como imgenes insertadas, pero realmente se deben cargar en un panel sobre un objeto list y ser recogidos de la base de datos. La barra de botones esta definida en cada archivo mxml, pero finalmente ser un nico componente externo que se llamar desde cada pgina donde se utilice. Algunas partes de las pginas pueden pasar a ser componentes y con ello se pueden reducir en nmero.

Conclusiones
Como siempre que se aborda un nuevo entorno y lenguaje de programacin, las dificultades superan con creces las previsiones iniciales de trabajo. A menudo te encuentras encallado en un punto y en la propia soledad no encuentras la manera de salir del escollo, pero con la ayuda de Internet, ingenio y muchas horas de dedicacin, siempre consigues avanzar. Tambin puedo afirmar que la diversidad de conocimientos adquirido durante el Grado, en materias como: planificacin, desarrollo y diseo han sido fundamentales para obtener los resultados deseados.

Cuando empec este trabajo utilic algunos portales Webs (mencionados anteriormente) como referencia. Cuando analizo el resultado obtenido tengo la sensacin de no haber conseguido unos resultados tan espectaculares como los existentes en algunas de estas pginas. Pero ante todo hay que ser realista y tener una visin clara de que puede haber detrs de cada portal o creacin. Y no me cabe duda de que en todas las pginas que he tomado como referencia, hay equipos numerosos, aos de experiencia y muchas horas de traPAC3: En este fase he creado la mayor parte del bajo. cdigo fuente de la aplicacin. Por lo que partiendo de unos conocimientos iniAn quedan pendientes algunas creaciones y ciales escasos y el tiempo limitado que hay dismodificaciones en el cdigo: ponible en un proyecto de estas caractersticas, La implantacin del acceso a Twitter. puedo decir que estoy bastante satisfecho con el En Flickr queda pendiente poder hacer resultado. la seleccin de una imagen y ampliarla. Me habra gustado haber tenido ms tiempo para En Youtube crear una bsqueda de v poder experimentar ms con AS3 en la consecu deos del sector tejidos elsticos. cin de grficos avanzados. Realizar con AS3 algunas acciones Tambin decir que volvera a hacer el mismo pro de orden artstico para realzar la portada. yecto, ya que se ajusta tanto a mis necesidades ac En la memoria explicar algunos deta- tuales como a las del mercado. Y que me quedo lles relevantes del cdigo fuente. con la satisfaccin de haber conseguido dominar Crear un diagrama de interaccin del y trabajar con muchas de las casustica ms rele usuario con la aplicacin. vantes en la implantacin de los lenguajes y aplicaciones utilizadas. Queda ampliar y modificar la memoria con al- A partir de este trabajo solo me queda evoluciogunos puntos pendientes y otros que se deben nar y aumentar mis conocimientos, pero partienmadurar. do ya de una base slida y mucho ms profesional. Entrega final: todos los puntos pendientes se han resuelto correctamente.

Vous aimerez peut-être aussi