Gestor de documentos Htm

Escola Tècnica Superior d’Enginyeria Informàtica Universitat Politècnica de València Gestor de documentos Htm Proyecto Final de Carrera Ingeniero Técnico en Informática de Gestión Autor: Soriano Ferrer, Daniel Director: Eliseo J. Marzal Calatayud Valencia,2012 Gestor Htm Resumen El proyecto consiste en un maquetador de html partiendo de un documento en formato .doc o directamente en htm creado desde windows, el cual seleccionará desde un explorador de archivos que solo permite la subida de documentos windows o htm dependiendo de que hayamos seleccionado y una vez que estemos seguros que documento queremos lo subiremos al servidor, desde donde se trabajará con él y nos lo mostrara ya en el editor de contenido donde podrá crear o modificar un documento htm dentro de un entorno de trabajo con múltiples herramientas de trabajo como modificación de las fuentes, creación y modificación de hipervínculos, creación de tablas, corrector ortográfico, etc... Para mejorar las opciones de creación incluirá la opción de poder ver el documento en vista plana o en vista html, permitiendo modificar la fuente html potenciando su funcionalidad pero lo que diferenciará este programa de los demás son cuatro listas alrededor del editor con las que el usuario sera capaz de arrastrar al editor los contenidos deseados de forma rápida y sencilla. Las listas serán de videos, sonidos, imágenes, widgets para blogger, se pueden embeber directamente en al página o incrustando el hipervínculo correspondiente. Además al lado del editor también contendrá una pre visualización de los objetos de las listas, así por ejemplo se podrá ver un video antes de incrustarlo para asegurarse de que es el que necesitas, así igual para las imágenes y los sonidos, mientras que la última lista de utilidades indicara una pequeña explicación de como incrustarla. Esta pre visualización se para automáticamente al incrustar cualquier elemento de la lista o al pulsar cualquier botón. Si el usuario decidiera que el documento que esta creando no esta quedando como el quiere o directamente no ha cargado el que el quería, tendrá la opción de limpiar el editor junto con todo los archivos temporales creados mediante un botón. Una vez realizados los cambios que el usuario considere oportunos contendrá un botón para publicar el documento resultante, el usuario podrá elegir entre guardarlo en su equipo o guardarlo en el servidor. El proyecto contendrá una tres páginas donde se podrán subir los contenidos multimedia tanto de video, imágenes, sonido directamente o mediante una conexión ftp segura al servidor remoto. Las carpetas de cada elemento sera fijas pero se podrá crear subcarpetas mediante un textbox donde se indique la ruta y el nombre de la nueva carpeta, una vez indicado, si la ruta es correcta, se ciclara a crear y creara una nueva carpeta. 2 Para eliminar contenido multimedia, se utilizara un sistema similar se indicara la ruta del contenido a eliminar y al clicar para borrar se comprobara que elemento existe y si existe se borrara, se podrán borrar carpetas también si esta no contiene contenido aún. Las páginas serán accesibles entre ellas mediante un botón que re direccionará de una a la otra, en principio las páginas al saltar de una a otra borrará en contenido no guardado en cada una, lo que se comunicará mediante un mensaje de alerta antes de avanzar a la siguiente página. El proyecto se desarrollara en los lenguajes de programación html 5, javascript y c#, será un proyecto ASP.NET desarrollado con la herramienta de gestión de aplicaciones Microsoft Visual studio 2010, junto con una extensión de ASP.NET de la compañía TELERIK llamada RadControls for ASP.NET AJAX. El Proyecto constará de dos páginas web la primera donde crearan y se modificarán los htm y la segunda donde se administrarán los recursos. También requerirá de un servidor windows para su puesta en marcha al cual habrá que configurar correctamente para poder modificar archivos en su interior y crear una ruta ftp. Palabras clave: Gestor, htm,imágenes,sonidos,videos,widgets, maquetador 3 Gestor Htm Tabla de contenidos 1.Introducción....................................................................................................................7 2.Especificación de requisitos (IEEE 830/98)..................................................................8 2.1. Introducción..........................................................................................................8 2.1.1. Propósito.........................................................................................................8 2.1.2. Ámbito............................................................................................................8 2.1.3. Definiciones y acrónimos...............................................................................8 2.1.4. Referencias....................................................................................................10 2.2. Descripción general..............................................................................................11 2.2.1. Perspectiva del producto...............................................................................11 2.2.2. Funciones del producto.................................................................................11 2.2.3. Características del usuario...........................................................................12 2.2.4. Restricciones.................................................................................................13 2.2.5. Supuestos y dependencias............................................................................13 2.3. Requisitos específicos...........................................................................................13 2.3.1. Requisitos funcionales..................................................................................13 3.Reparto de tareas..........................................................................................................19 4. Análisis.........................................................................................................................19 4.1. Introducción.........................................................................................................19 4.2. Diagrama de casos de uso....................................................................................19 4.2.1. Plantillas.......................................................................................................20 4.3. Diagramas de secuencia.......................................................................................38 4.3.1. Diagrama Subir archivo y cargarlo en el editor............................................38 4.3.2. Diagrama vista previa y incrustar elementos multimedia...........................39 4.3.3. Diagrama subir elementos multimedia por ftp............................................39 5. Diseño..........................................................................................................................40 4 5.1.Características........................................................................................................41 5.2.Ventajas................................................................................................................42 5.3.Desventajas...........................................................................................................42 5.4. Observaciones......................................................................................................43 6. Implementación..........................................................................................................43 6.1. Tecnologías...........................................................................................................43 6.2. Lenguajes de programación.................................................................................44 6.2.1. HTML...........................................................................................................44 6.2.2. CSS...............................................................................................................44 6.2.3. Javascript.....................................................................................................45 6.2.4. C#(c sharp)...................................................................................................45 6.2.5. ASP.NET AJAX............................................................................................45 6.2. Herramientas.......................................................................................................46 6.3. Detalles de implementación................................................................................46 6.3.1. Proyecto RadControls...................................................................................46 6.3.2. Interacción entre lo controles ASP.net y telerik con javascript..................46 6.3.3. Librería duodimension................................................................................46 6.3.3. Librería Donetzip.........................................................................................47 6.3.3. Conexión ftp.................................................................................................47 7. Pruebas........................................................................................................................48 7.1. Evaluación............................................................................................................48 7.1.1. Validación de HTML y CSS...........................................................................48 7.1.2. Pruebas de compatibilidad en navegadores.................................................49 7.1.3. Pruebas unitarias...........................................................................................51 8. Manual de usuario.......................................................................................................64 8.1.Preparativos antes de comenzar a utilizar la aplicación.......................................64 8.2. Pantalla de edición de documento htm...............................................................65 8.2.1.Subida de documentos htm...........................................................................66 8.2.2 Modificación del documento htm.................................................................68 5 Gestor Htm 8.2.3 Guardar el documento htm...........................................................................70 8.3.Pantallas de gestión de elementos multimedia.....................................................71 8.3.1 Subida de elemento multimedia....................................................................72 8.3.2 Crear,renombrar,borrar................................................................................73 8.3.3 Subida de elemento multimedia por ftp.......................................................76 8.3.4 Gestor de los htm realizados.........................................................................79 9. Conclusiones...............................................................................................................80 9.1. Trabajo realizado.................................................................................................80 10. Bibliografía.................................................................................................................81 6 1. Introducción Los primeros sistemas de administración de contenidos fueron desarrollados por organizaciones que publicaban una gran cantidad de contenido en Internet, y necesitaban de continuas actualizaciones; como revistas en línea, periódicos y publicaciones corporativas. La evolución de Internet hacia portales con más contenido y la alta participación de los usuarios directamente, a través de blogs y redes sociales, ha convertido a los gestores de contenidos en una herramienta esencial en Internet, tanto para empresas e instituciones como para personas. El gestor de contenidos es una aplicación informática usada para crear, editar, gestionar y publicar contenido digital multimedia en diversos formatos. El gestor de contenidos genera páginas web dinámicas ínter-actuando con el servidor web para generar la página web bajo petición del usuario, con el formato predefinido y el contenido extraído de la base de datos del servidor. Esto permite gestionar, bajo un formato estandarizado, la información del servidor, reduciendo el tamaño de las páginas para descarga y reduciendo el coste de gestión del portal con respecto a un sitio web estático, en el que cada cambio de diseño debe ser realizado en todas las páginas web, de la misma forma que cada vez que se agrega contenido tiene que maquetarse una nueva página HTML y subirla al servidor web. Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio web. El sistema permite manejar de manera independiente el contenido y el diseño. Así, es posible manejar el contenido y darle en cualquier momento un diseño distinto al sitio web sin tener que darle formato al contenido de nuevo, además de permitir la fácil y controlada publicación en el sitio a varios editores. El Gestor Htm es un pequeño gestor de contenidos web que se especializa en la implementación de contenido multimedia utilizar la nueva tecnología de html5 para embeber elementos multimedia, donde el usuario sera capaz de maquetar un página htm de forma rápida y sencilla pudiendo subir sus propios elementos multimedia al servidor mediante un gestor de archivos, ademas el editor es capaz de gestionar texto y widgets de blogger. El contexto del proyecto, puede ser una herramienta para gestionar y modificar páginas web, wiki o blogs, añadiéndoles funcionalidades multimedia, también puede servir para que personas con pocos conocimientos informáticos pueda crear páginas web de forma rápida. A continuación se detalla la estructura de esta memoria: Concluido este capítulo en el que lo hemos dedicado a hacer una pequeña introducción sobre gestor htm, el siguiente capítulo estará exclusivamente dedicado a la especificación de requisitos. En él, quedara reflejado lo que va hacer nuestra aplicación y todas sus funcionalidades. Para la especificación de requisitos usaremos el estándar IEE 830/98. 7 Gestor Htm 2. Especificación de requisitos (IEEE 830/98) 2.1. Introducción En este capítulo, se va a describir los requisitos funcionales y no funcionales de la aplicación. Para ello, también se contara el ámbito, el propósito, definiciones, acrónimos y definiciones necesarias para el entendimiento de la especificación de requisitos. 2.1.1. Propósito El propósito de la especificación de requisitos es hacerle entender al lector la funcionalidad de la aplicación. También sirve para los contenidos de dicha aplicación y así como definir los objetivos a cumplir con su realización. 2.1.2. Ámbito La aplicación que se describe a continuación, consiste en una gestor de contenidos dedicado ala gestión de documentos htm, mediante un editor web con el que puede embeber elementos multimedia. 2.1.3. Definiciones y acrónimos Gestor de contenidos: El gestor de contenidos es una aplicación informática usada para crear, editar, gestionar y publicar contenido digital multimedia en diversos formatos. El gestor de contenidos genera páginas web dinámicas ínteractuando con el servidor web para generar la página web bajo petición del usuario, con el formato predefinido y el contenido extraído de la base de datos del servidor. Documento Htm: Un documento electrónico es un documento cuyo soporte material es algún tipo de dispositivo electrónico o magnético, y en el que el contenido está codificado mediante algún tipo de código digital, que puede ser leído, interpretado, o reproducido, mediante el auxilio de detectores de magnetización. Video: Es la tecnología de la captación, grabación, procesamiento, almacenamiento, transmisión y reconstrucción por medios electrónicos digitales o analógicos de una secuencia de imágenes que representan escenas en movimiento. Sonido: El sonido, en física, es cualquier fenómeno que involucre la propagación en forma de ondas elásticas (sean audibles o no), generalmente a través de un fluido (u otro medio elástico) que esté generando el movimiento vibratorio de un cuerpo. 8 Imágenes: Una imagen del latín imago. es una representación visual, que manifiesta la apariencia visual de un objeto real o imaginario. Aunque el término suele entenderse como sinónimo de representación visual. Widgets: En informática, un widget es una pequeña aplicación o programa, usualmente presentado en archivos o ficheros pequeños que son ejecutados por un motor de widgets o Widget Engine. Entre sus objetivos están dar fácil acceso a funciones frecuentemente usadas y proveer de información visual. Aunque no es condición indispensable, los widgets suelen ser utilizados para ser "empotrados" en otra página web, copiando el código que el mismo widget pone a disposición del usuario. Hipervínculos: Los hiperenlaces, también llamados hipervínculos, son parte fundamental de la arquitectura de la World Wide Web, pero el concepto no se limita al HTML o a la Web. Casi cualquier medio electrónico puede emplear alguna forma de hiperenlace. El enlace de destino más común es un URL, utilizado en la World Wide Web. Puede invocar a un documento, por ejemplo una página web, a otro recurso, o a una posición determinada en una página web. Este último se consigue asignando a un elemento HTML el atributo "name" o "id" en esa posición del documento HTML. El URL de la posición es el URL de la página con "#atributo name" añadido. html5: (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml).1 2 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. Todavía se encuentra en modo experimental, lo cual indica la misma W3C; aunque ya es usado por múltiples desarrolladores web por sus avances, mejoras y ventajas. Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se le recomienda al usuario común actualizar a la versión más nueva, para poder disfrutar de todo el potencial que provee HTML5. El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C. Editor: Un editor de texto es un programa que permite crear y modificar archivos digitales compuestos únicamente por texto sin formato, conocidos comúnmente como archivos de texto o texto plano. El programa lee el archivo e interpreta los bytes leídos según el código de caracteres que usa el editor. Hoy en día es comúnmente de 7ó 8-bits en ASCII o UTF-8, rara vez EBCDIC. 9 Gestor Htm Función crear carpetas: Propósito: Crear un carpeta en la ruta indicada. Entrada: ruta de la nueva carpeta. Elegir entre la raíz de la carpeta y una ruta elegida de la lista marcada con un checkbox. Proceso: Elegir la ruta entre la raíz de la carpeta y una ruta elegida de la lista marcada con un checkbox, una vez elegida se crear un carpeta en el servidor. Salida: Puede producirse un error si ja existe una carpeta con ese nombre, que se mostraría en el cuadro de dialogo informativo, sino se crea la carpeta y se indica en el cuadro de dialogo. Función renombrar: Propósito: Renombrar una carpeta o archivo del servidor. Entrada: Ruta de la carpeta o archivo a renombrar. Proceso: Primero se elige y selecciona de la lista de elementos multimedia apropiada la carpeta, esta ruta se mostrara en un label, luego se escribe el nuevo nombre en textbox y al pulsar el botón cambiara el nombre de la carpeta o archivo. Salida: Si no se selecciona una ruta o no se escribe un nuevo nombre se mostrara un mensaje de error en el cuadro de dialogo informativo., sino se renombrará correctamente. Función de borrado: Propósito: Borrar una carpeta o archivo del servidor. Entrada: Ruta de la carpeta o archivo a borrar. Proceso: Primero se elige y selecciona de la lista de elementos multimedia apropiada la carpeta, esta ruta se mostrara en un label, y al pulsar el botón borrará la carpeta o archivo. Salida: Si no se selecciona una ruta o no se escribe un nuevo nombre se mostrara un mensaje de error en el cuadro de dialogo informativo., sino se renombrará correctamente. Función de selección de elementos multimedia: Propósito:Poder seleccionar elementos de las lista multimedia para las operaciones de crear,renombrar y borrar. Entrada: Elección del elemento de la lista. Proceso: El usuario elige el elementos de la lista y la aplicación le devuelve la ruta del elemento. Salida: Se obtiene la ruta del elemento seleccionado. 16 Función de listado de elementos multimedia: Propósito: Mostrar los elementos multimedia del servidor . Entrada: La lista lee la carpeta del servidor de ese tipo de elemento multimedia y lo muestra, además se actualiza con cualquier cambio. Proceso: Carga un árbol de nodos con la lectura de los directorios y archivos de la carpeta concreta y se actualiza con cada cambio. Salida: Muestra la lista de elementos. Función de subir elementos multimedia: Propósito: Subir nuevos elementos multimedia al servidor local. Entrada: Archivos temporales de la explorador de archivos del gestor. Proceso: Guarda los archivos temporales del explorador de archivos en la carpeta correspondiente. Salida: Si se produce un error se mostrara en el cuadro de dialogo y se cancelara la acción, sino realizara la transferencia y se indicara en el cuadro de dialogo. Función de cuadro de dialogo informativo: Propósito:Mostrar los cambios en el servidor. Entrada: Mensajes entrantes al crear, borrar, modificar o al producirse un error. Proceso: Muestra los mensajes de error que el llegan. Salida: Muestra los mensajes de error que el llegan. Función limpiar Cuadro de dialogo: Propósito: Limpia el cuadro de dialogo. Entrada: petición de borrado. Proceso: Deja el textbox vacío. Salida: textbox vacío. 17 Gestor Htm Función mostrar/ocultar ftp: Propósito: Mostrar/ ocultar las opciones ftp de los gestores multimedia. Entrada: Petición de mostrar/ocultar las opciones ftp de los gestores multimedia. Proceso: Si pulsas mostrar ftp se mostrara la opciones ftp y se ocultara el botón de mostrar y se vera el de ocultar que ocultara las opciones ftp y el botón para volver a mostrar el de mostrar. Salida: Si se el da mostrar se vera la opciones ftp si por el contrario es el de ocultar solo se vera el botón de mostrar. Función de login ftp: Propósito:Conectarse con un servidor por medio de conexión ftp Entrada: usuario, contraseña y servidor Proceso: Se obtiene los paramentos de entrada y se conecta al servidor externo mediante el protocolo ftp. Salida: Si la conexión no se puede realizar apareceria un mensaje de error en el cuadro de dialogo sino se realizara la conexión y se cargará la lista de elementos del servidor externo. Función de lista elementos de servidor externo mediante ftp: Propósito: Mostrar el contenido del servidor externo. Entrada: Se obtiene la ruta del servidor externo, se obtiene el array de directorios y archivos y se monta un árbol de nodos con él y se muestra por pantalla. Salida: Se muestra por pantalla la lista de los elementos del servidor externo. Función de subida de elementos multimedia de un servidor externo: Propósito:Subir al servidor local elementos del servidor externo. Pudiendo cambiar el nombre del elemento al cambiar de servidor. Entrada: Ruta del elemento en el servidor externo y ruta donde se quiere alojar elemento entrante. Proceso: Primero se obtiene la ruta del elemento del servidor externo seleccionándolo en la lista del servidor externo y luego se selecciona la ruta de destino marcando el checkbox de la carpeta de la lista del servidor local, si se quiere se puede elegir cambiar el nombre del elemento en ese caso es necesario indicar el nuevo nombre con su extensión en textbox y luego pulsar para realizar al acción. Salida: Si se produce un error se mostrara en el cuadro de dialogo y se cancelara la acción, sino realizara la transferencia y se indicara en el cuadro de dialogo. 18 3. Reparto de tareas Este es un proyecto individual por lo que todo el trabajo a recaído sobre mi. 4. Análisis 4.1. Introducción El análisis es el estudio, mediante técnicas informáticas, de los límites, características y posibles soluciones de un problema al que se aplica un tratamiento. Un buen desarrollo de software debe dedicar un alto porcentaje de los recursos exclusivamente a la etapa de análisis. El análisis constituye una de las actividades mas importantes, donde se va a analizar todas las consideraciones técnicas del proyecto. 4.2. Diagrama de casos de uso Un caso de uso es una técnica para la captura de requisitos potenciales de un nuevo sistema o una actualización de software. Los usuarios del sistema son llamados actores. Los actores siempre son entidades externas al sistema, los cuales suelen desempeñar un rol, como podría ser usuario registrado, usuario sin registrar, etc. Estos deberán realizar ciertas acciones para conseguir sus objetivos, cada uno de los objetivos quedan representado como un Caso de uso. En este tipo de diagramas se definen un conjunto de propósitos para los que un actor puede usar el sistema. Por otra parte el diagrama de casos de uso se realizara mediante plantillas donde se documenta cada caso de uso adjuntando información extra como pre-condiciones, flujo normal de actividad, flujo alternativo pos-condiciones,etc. 19 Gestor Htm 4.2.1. Plantillas Definición del Caso de Uso Nombre Función de selección de documento Htm Objetivo Seleccionar un documento .word o .zip para subirlo al servidor Descripción Esta función se encarga de buscar y obtener el documento electrónico que se cargara ene servidor. Actores Usuario anónimo Condiciones Necesarias Que no el editor no tenga cargado ya un documento anterior. Escenario Principal Actorabre el explorador de archivos y selecciona el archivo que quiere subir al sistema. Sistema-Obtiene la ruta del archivo y crea un archivo temporal. Escenario Alternativo SistemaSi detecta que el archivo temporal no es del tipo de extensión permitida se lo indicara al usuario mediante un esfera roja delante del nombre del archivo. ActorVolverá a abrir el explorador de archivos y seleccionará un nuevo archivo. Escenarios de Excepción En caso de que el Actor no modifique el archivo con extensión errónea arrastrará el error a la función de carga del htm la cual indicara mediante un pop-up que la extensión no es correcta. Condición de éxito El archivo es del formato correcto y se guarda el temporales Cuestiones a resolver Es posible seleccionar un archivo zip y elegir que se va trabajar en documento word y el explorador de archivos lo aceptara pero saltara el error al darle al botón de subida. 20 Definición del Caso de Uso Nombre Función de carga Htm Objetivo Subir al servidor el documento seleccionado. Descripción Esta es la función inicial de la aplicación, encargada de subir el documento al servidor y cargarlo en el editor para poder trabajar sobre él. Sin ella no podemos introducir documento electrónicos y por lo tanto la función del editor seria inservible. Actores Usuario anónimo,sistema Condiciones Necesarias Que no el editor no tenga cargado ya un documento anterior. Escenario Principal ActorSelecciona el tipo de extensión que esta cargado y luego presiona el botón de subir documento. Sistema-Comprueba que el archivo es de la extensión indicada por el usuario, en caso correcto guarda el archivo temporal en una carpeta del servidor para poder trabajar con el y luego lo carga en el editor. Escenario Alternativo SistemaSi detecta que el archivo temporal no es del tipo de extensión permitida se lo indicara al usuario mediante un pop-up he instara repetir la operación. ActorVolverá a abrir el explorador de archivos y seleccionará un nuevo archivo y repetirá el proceso anterior. Escenarios de Excepción Todos los escenario de excepción están controlados en los escenarios alternativos Condición de éxito El archivo es del formato correcto y se guarda en el servidor, una vez allí el sistema lo carga en el editor. Cuestiones a resolver Es posible seleccionar un archivo zip y elegir que se va trabajar en documento word y el explorador de archivos lo aceptara pero saltara el error al darle al botón de subida. 21 Gestor Htm Definición del Caso de Uso Nombre Función del editor Objetivo Modificar el documento htm entrante mediante sus herramientas. Descripción El editor dispone de múltiples opciones para modificar el documento electrónico, como el cambio de fuente, salto de párrafo, indexación etc... Actores Usuario anónimo, sistema Condiciones Necesarias Que no el editor no tenga cargado ya un documento anterior. Escenario Principal Actorabre el explorador de archivos y selecciona el archivo que quiere subir al sistema. Sistema-Obtiene la ruta del archivo y crea un archivo temporal. Escenario Alternativo SistemaSi detecta que el archivo temporal no es del tipo de extensión permitida se lo indicara al usuario mediante un esfera roja delante del nombre del archivo. ActorVolverá a abrir el explorador de archivos y seleccionará un nuevo archivo. Escenarios de Excepción En caso de que el Actor no modifique el archivo con extensión errónea arrastrará el error a la función de carga del htm la cual indicara mediante un pop-up que la extensión no es correcta. Condición de éxito El archivo es del formato correcto y se guarda el temporales Cuestiones a resolver Ninguna, se han resuelto todos los posibles escenarios 22 Definición del Caso de Uso Nombre Función de las listas multimedia Objetivo Mostrar los elementos multimedia disponibles en el servidor. Descripción La aplicación web contiene cuatro listas de video, imágenes,sonido y widgets, estas listas tiene la funcionalidad tal que sus elementos puede ser arrastrados con el ratón al documento para embeberlos o introducir un hiperenlace. Actores Sistema Condiciones Necesarias Que existan elementos multimedia en las carpetas indicadas Escenario Principal Sistema-Mostrar los elementos multimedia necesario para la realización del documento. Escenario Alternativo - Escenarios de Excepción - Condición de éxito Muestra la lista de elemento multimedia Cuestiones a resolver Ninguna, se han resuelto todos los posibles escenarios 23 Gestor Htm Definición del Caso de Uso Nombre Función del pre-visualización Objetivo Muestra el elemento seleccionado de las listas multimedia, pudiendo reproducir video y sonido, mostrando las imágenes y mostrando una explicación de como poner les widgets. Descripción Esta funcionalidad permite que mostrar el contenido de los elementos de las lista antes de introducirlos. Actores Usuario anónimo, sistema Condiciones Necesarias Que el usuario seleccione un elemento de una de las listas. Escenario Principal ActorSeleccionar un elemento de una de las lista multimedia. SistemaSegún la lista que se elija se mostrara en el recuadro superior izquierdo o derecho la reproducción del elemento o la explicación en caso del widget. Escenario Alternativo SistemaEl navegador no es capaz de ejecutar la orden de reproducción por lo que el recuadro superior izquierdo o derecho mostrara un mensaje que indica que el tag no es compatible. Actor.-Cambia de navegador y repite el proceso Escenarios de Excepción No existen escenarios de excepción Condición de éxito Se mostrara o reproducirá el elemento multimedia o se mostrara el mensaje de inserción de widgets. Cuestiones a resolver Ninguna, se han resuelto todos los posibles escenarios 24 Definición del Caso de Uso Nombre Función de gestionar htm Objetivo Enlazar con la página de gestión de los documentos htm ya realizados. Descripción Esta funcionalidad permite acceder a la página de gestión de los documento electrónico almacenados en el servidor. Actores Usuario anónimo, sistema Condiciones Necesarias Que usuario este en la página de edición de documentos. Escenario Principal ActorPresionar el botón de gestionar htm. SistemaAbre una ventana emergente que muestra la página de gestión de los documento electrónicos htm realizados. Escenario Alternativo - Escenarios de Excepción Es posible que los navegadores tenga bloqueadas las ventanas emergentes. Condición de éxito Se abrirá una ventana el gestor de los documento electrónicos htm realizados. Cuestiones a resolver Si el navegador bloque la ventana emergente la única opción es desbloquear esta opción. 25 Gestor Htm Definición del Caso de Uso Nombre Función de cuadro de dialogo informativo Objetivo Mostrar información de control. Mostrar los cambios en el servidor. Descripción Su función es la de informa de los cambios realizados en el servidor. Esta funcionalidad esta presente en los gestores de documentos electrónicos,imágenes,sonido y video. Actores Usuario anónimo, sistema Condiciones Necesarias - Escenario Principal ActorRealizar alguna acción en algunos de los gestores. SistemaEl sistema indicara en el cuadro de dialogo la acción realizada tanto correcta como errónea. Escenario Alternativo - Escenarios de Excepción - Condición de éxito Mostrar información de control. Cuestiones a resolver Ninguna, se han resuelto todos los posibles escenarios 32 Definición del Caso de Uso Nombre Función limpiar cuadro de dialogo Objetivo Limpia el cuadro de dialogo. Descripción Su función es limpiar el cuadro de dialogo informativo. Esta funcionalidad esta presente en los gestores de documentos electrónicos,imágenes,sonido y video. Actores Usuario anónimo, sistema Condiciones Necesarias Que este en uno de los gestores. Escenario Principal ActorSeleccionar el botón de limpiar cuadro de texto. SistemaEl sistema borrara el cuadro de dialogo del gestor y lo dejara vacío. Escenario Alternativo - Escenarios de Excepción - Condición de éxito Limpiar el textbox. Cuestiones a resolver Ninguna, se han resuelto todos los posibles escenarios 33 Gestor Htm Definición del Caso de Uso Nombre Función mostrar/ocultar ftp Objetivo Mostrar o ocultar las opciones ftp de los gestores multimedia. Descripción Se ocupa de mostrar o ocultar el cuadro de acciones ftp. Esta funcionalidad esta presente en los gestores de imágenes,sonido y video. Actores Usuario anónimo, sistema Condiciones Necesarias Que este en uno de los gestores. Escenario Principal ActorSeleccionar el botón mostrar ftp. SistemaEl sistema mostrara las opciones ftp del gestor. Escenario Alternativo ActorSeleccionar el botón ocultar ftp. SistemaEl sistema ocultara las opciones ftp del gestor. Escenarios de Excepción - Condición de éxito Mostrar o ocultarlas opciones ftp de los gestores multimedia. Cuestiones a resolver Ninguna, se han resuelto todos los posibles escenarios 34 Definición del Caso de Uso Nombre Función de login ftp Objetivo Conectarse con un servidor por medio de conexión ftp. Descripción Su función es la de conectar con un determinado servidor mediante ftp. Esta funcionalidad esta presente en los gestores de imágenes,sonido y video. Actores Usuario anónimo, sistema Condiciones Necesarias Que este en uno de los gestores. Escenario Principal ActorEl usuario debe introducir el usuario,contraseña y dirección del servidor externo. SistemaEl sistema se conectara al servidor. Escenario Alternativo ActorEl usuario debe introducir el usuario,contraseña y dirección del servidor externo. SistemaEl sistema se no puede conectarse al servidor. Y emite un mensaje de error. Escenarios de Excepción Los datos introducidos no son correctos, se indica mediante un mensaje de error y se limpian los campos para repetir al operación. Condición de éxito Conectarse a un servidor externo por media del protocolo ftp. Cuestiones a resolver Ninguna, se han resuelto todos los posibles escenarios 35 Gestor Htm Definición del Caso de Uso Nombre Función de lista elementos de servidor externo mediante ftp Objetivo Mostrar el contenido del servidor externo. Descripción Su funcionalidad es la de mostrar un lista de los elemento del servidor externo un vez realizada la conexión ftp. Esta funcionalidad esta presente en los gestores de imágenes,sonido y video. Actores sistema Condiciones Necesarias Que este en uno de los gestores y que se conecte previamente aun servidor externo por ftp. Escenario Principal SistemaEl sistema se conectara al servidor externo y mostrara una lista con su contenido. Escenario Alternativo - Escenarios de Excepción - Condición de éxito Mostrar el contenido del servidor externo en una lista. Cuestiones a resolver Ninguna, se han resuelto todos los posibles escenarios 36 Definición del Caso de Uso Nombre Función de subida de elementos multimedia de un servidor externo Objetivo Subir al servidor local elementos del servidor externo. Pudiendo cambiar el nombre del elemento al cambiar de servidor. Descripción Su función es la de seleccionar el elemento a subir y luego cargarlo en la ruta del servidor indicada. Esta funcionalidad esta presente en los gestores de imágenes,sonido y video. Actores Usuario anónimo, sistema Condiciones Necesarias Que este en uno de los gestores y que se conecte previamente aun servidor externo por ftp. Escenario Principal ActorEl usuario debe seleccionar un elemento de la lista del servidor externo y después marcar una carpeta de la lista del servidor local y pulsar el botón de subir elemento. SistemaEl sistema realizara la operación para copiar el elemento al servidor y lo indicara mediante un cuadro de dialogo. Escenario Alternativo ActorEl usuario debe seleccionar un elemento de la lista del servidor externo y después marcar una carpeta de la lista del servidor local, una vez hecho elegimos al opción de renombrar archivo escribimos el nuevo nombre en un textbox luego es pulsar el botón de subir elemento. SistemaEl sistema realizara la operación para copiar el elemento al servidor y lo indicara mediante un cuadro de dialogo. Escenarios de Excepción Es posible que existan problemas al cargar el elemento si este tiene el mismo nombre que otro elemento del servidor o tenga problemas de conexión, lo cual se indicara en un mensaje en el cuadro de dialogo y cancelara la acción. Condición de éxito Obtener un elemento multimedia de un servidor externo y guardarlo en nuestro servidor.. Cuestiones a resolver Si no se pone la extensión correcta al renombrar el elemento se producirá un error en el elemento guardado. 37 Gestor Htm 4.3. Diagramas de secuencia Básicamente los diagramas de secuencia muestran las operaciones pasadas entre objetos, son usados para especificar métodos, procesos de negocio o casos de uso. En este caso se mostrara un diagrama de actividad en relación a los casos de uso más importantes del apartado anterior para aportar información extra sobre ellos, y representar visualmente las diferentes “rutas”, que pueden ir desencadenándose. 4.3.1. Diagrama Subir archivo y cargarlo en el editor 38 4.3.2. Diagrama vista previa y incrustar elementos multimedia 4.3.3. Diagrama subir elementos multimedia por ftp 39 Gestor Htm 5. Diseño La arquitectura cliente-servidor es un modelo de aplicación distribuida en el que las tareas se reparten entre los proveedores de recursos o servicios, llamados servidores, y los demandantes, llamados clientes. Un cliente realiza peticiones a otro programa, el servidor, que le da respuesta. Esta idea también se puede aplicar a programas que se ejecutan sobre una sola computadora, aunque es más ventajosa en un sistema operativo multiusuario distribuido a través de una red de computadoras. En esta arquitectura la capacidad de proceso está repartida entre los clientes y los servidores, aunque son más importantes las ventajas de tipo organizativo debidas a la centralización de la gestión de la información y la separación de responsabilidades, lo que facilita y clarifica el diseño del sistema. La separación entre cliente y servidor es una separación de tipo lógico, donde el servidor no se ejecuta necesariamente sobre una sola máquina ni es necesariamente un sólo programa. Los tipos específicos de servidores incluyen los servidores web, los servidores de archivo, los servidores del correo, etc. Mientras que sus propósitos varían de unos servicios a otros, la arquitectura básica seguirá siendo la misma. Una disposición muy común son los sistemas multicapa en los que el servidor se descompone en diferentes programas que pueden ser ejecutados por diferentes computadoras aumentando así el grado de distribución del sistema. La arquitectura cliente-servidor sustituye a la arquitectura monolítica en la que no hay distribución, tanto a nivel físico como a nivel lógico. La red cliente-servidor es aquella red de comunicaciones en la que todos los clientes están conectados a un servidor, en el que se centralizan los diversos recursos y aplicaciones con que se cuenta; y que los pone a disposición de los clientes cada vez que estos son solicitados. Esto significa que todas las gestiones que se realizan se concentran en el servidor, de manera que en él se disponen los requerimientos provenientes de los clientes que tienen prioridad, los archivos que son de uso público y los que son de uso restringido, los archivos que son de sólo lectura y los que, por el contrario, pueden ser modificados, etc. Este tipo de red puede utilizarse conjuntamente en caso de que se este utilizando en una red mixta. 40 5.1.Características En la arquitectura C/S el remitente de una solicitud es conocido como cliente. Sus características son: Es quien inicia solicitudes o peticiones, tienen por tanto un papel activo en la comunicación (dispositivo maestro o amo). Espera y recibe las respuestas del servidor. Por lo general, puede conectarse a varios servidores a la vez. Normalmente interactúa directamente con los usuarios finales mediante una interfaz gráfica de usuario. Al contratar un servicio de redes, se debe tener en cuenta la velocidad de conexión que le otorga al cliente y el tipo de cable que utiliza , por ejemplo : cable de cobre ronda entre 1 ms y 50 ms. Al receptor de la solicitud enviada por el cliente se conoce como servidor. Sus características son: Al iniciarse esperan a que lleguen las solicitudes de los clientes, desempeñan entonces un papel pasivo en la comunicación (dispositivo esclavo). Tras la recepción de una solicitud, la procesan y luego envían la respuesta al cliente. Por lo general, aceptan conexiones desde un gran número de clientes (en ciertos casos el número máximo de peticiones puede estar limitado). No es frecuente que interactúen directamente con los usuarios finales. 41 Gestor Htm 7. Pruebas En este capítulo, terminada toda la parte de implementación, va a estar dedicado a las pruebas de funcionamiento y evaluación de resultados de la aplicación terminada. 7.1. Evaluación Para evaluar la aplicación de forma correcta, debemos centrarnos tanto en la navegabilidad y funcionamiento, además de la compatibilidad con otros navegadores. Para hacer estas pruebas, nos hemos puesto en el lugar del usuario y pensado como queríamos encontrar la información en la aplicación. Además de pensar en las dificultades informáticas si fuéramos el (memoria, ancho de banda, escasez de conocimientos informáticos). Pensando en este tipo de usuario, se ha creado una aplicación que sea sencilla de usar, atractiva para el usuario y de un manejo que no produzca problemas. 7.1.1. Validación de HTML y CSS Todos los archivos HTML y CSS han sido comprobados con el validador web de W3C. Todos han salido sin errores menos el archivo Default.aspx en el que salen siete warnings. Los cuales son producidos por introducir tablas dentro de otras tablas y puede llevara desajustes en algunos navegadores. Realizadas las pruebas, estos warnings no afectan al comportamiento de la aplicación. 48 7.1.2. Pruebas de compatibilidad en navegadores •Google Chrome El programa web funciona correctamente en este navegador. Solo se encontrado un pequeño defecto de carga si se utiliza el arrastre de elemento mutimedia si previamente no se cargado el documento electrónico en el editor, pero el programa esta hecho para funcionar con documentos cargados. 49 Gestor Htm •Safari El programa web funciona correctamente en este navegador. Solo se encontrado unos pequeño defecto, es que Safari solo admite video de formato ogg y mp4 . Por lo demás funciona correctamente y además de una forma más eficiente tarda menos en cagar los recursos. 50 •Firefox El programa web funciona correctamente en este navegador. Solo se encontrado unos pequeño defectos, el primero es que Firefox solo admite video de formato ogg y de carga si se utiliza el arrastre de elemento mutimedia si previamente no se cargado el documento electrónico en el editor, pero el programa esta hecho para funcionar con documentos cargados. 7.1.3. Pruebas unitarias En este apartado probaremos individualmente todas las funciones de la aplicación para ver si funcionan correctamente. Probaremos con diversas situaciones que se pueden dar para ver cómo se comporta el sistema ante estos casos. Función de selección de documento Htm: Esta función se encarga de buscar y obtener el documento electrónico que se cargara ene servidor. Aquí se pude ver un elemento seleccionado correctamente(ya se tiene la esfera verde) 51 Gestor Htm Función de carga Htm: Esta es la función inicial de la aplicación, encargada de subir el documento al servidor y cargarlo en el editor para poder trabajar sobre él. Sin ella no podemos introducir documento electrónicos y por lo tanto la función del editor seria inservible. En esta imagen apreciamos un documento cargado y como pasa mostrarlas opciones para documentos cargados Función del editor: El editor dispone de múltiples opciones para modificar el documento electrónico, como el cambio de fuente, salto de párrafo, indexación etc... En esta imagen podemos apreciar que esta pantalla completa que es una de sus funcionalidades se puede apreciar en la parte superior la barra de herramientas. 52 Función de las listas multimedia: la aplicación web contiene cuatro listas de video, imágenes,sonido y widgets, estas listas tiene la funcionalidad tal que sus elementos puede ser arrastrados con el ratón al documento para embeberlos o introducir un hiperenlace. En estas imágenes podemos apreciar las lista desplegadas, las listas son una parte muy importante del programa ya que lo distingue por su fácil manejo, podemos apreciar que podemos seleccionar insertar elementos o sus hipervínculos. 53 Gestor Htm Función de pre-visualización: Esta funcionalidad permite que mostrar el contenido de los elementos de las lista antes de introducirlos. En la imagen de arriba podemos apreciar como al seleccionar el video Prova.m4v se pre visualiza en el recuadro superior, pudiendo ejecutar el video silo deseamos gracias a html5. 54 Función de gestión htm: Esta funcionalidad permite acceder a la página de gestión de los documento electrónico almacenados en el servidor. Podemos ver la página emergente que se ve al pulsar el botón de gestionar htm. Función limpiar editor: Esta funcionalidad se encarga quitar el documento electrónico cargado en el editor sin guardar. En esta imagen podemos apreciar como a limpiado el editor del documento anterior. 55 Gestor Htm Función guardar documento: esta función se encarga de guarda en el servidor o externamente el documento resultante de los cambios realizados en el editor. En esta captura de pantalla podemos apreciar que se seleccionado guardar en local y se a indicado una ruta para el guardado si todo va bien no saldrán ningún mensaje de error. Función crear carpetas: Esta función se encarga de crear carpeta en al ruta indicada del servidor para alojar archivos. Esta funcionalidad esta presente en los gestores ,imágenes,sonido y video. 56 Podemos observar en la imagen anterior como introducimos el nombre del la nueva carpeta seleccionamos su ubicación y al darle botón la lista se actualiza y la muestra. Función renombrar: Esta funcionalidad se encarga de renombrar elementos del servidor al indicar la ruta de la lista correspondiente. Esta funcionalidad esta presente en los gestores de imágenes, sonido y video. Para renombrar elemento de la lista del servidor primero tenemos que marcar la casilla del elemento a renombrar y luego indicamos en el textbox al lado del botón el nuevo nombre y una vez hecho pulsamos el botón, la lista se actualizará al nuevo nombre y lo indicara en el cuadro de dialogo como se puede apreciar en al imagen superior. 57 Gestor Htm 8. Manual de usuario El presente manual tiene como objetivo describir la utilización de cada una de las funcionalidades de las que se componen cada una de las aplicaciones que forman el sistema. Para realizar esta tarea se verán detalladamente cada una de las pantallas que forman las interfaces gráficas de las aplicaciones y qué acciones se pueden realizar en ellas, así como los resultados que se obtendrán al realizar dichas acciones. 8.1.Preparativos antes de comenzar a utilizar la aplicación La aplicación web tiene como objetivo la edición de contenidos, específicamente la edición de documentos electrónicos htm, para ello lo primero que tenemos que hacer subir a la aplicación un documento editable pero esto no es tan sencillo como pueda parece en un principio debido problemas para subir estos documento al ir acompañados de una carpeta de imágenes adjuntas, por lo cual se le dan dos opciones de subida del documento electrónico al usuario. La primera de ella consiste en realizar la página web sobre un nuevo documento de texto Microsoft Word o uno ya existente para ello debemos tener instalado el Microsoft Word incluido en el paquete de Microsoft Office, es importante que la extensión del documento resultante sea .doc y no .docx para ello tenemos que al menú y pulsar guardar como.... y saldrá una lista desplegable y usted debe elegir guardar el documento .doc una vez tenga el documento .doc ya tiene un documento preparado para funcionar en la aplicación web, más adelante se explica como se convertirá en un documento electrónico htm que editor puede modificar. La segunda opción consiste en seguir el procedimiento anterior realizar la página web sobre un nuevo documento de texto Microsoft Word o uno ya existente para ello debemos tener instalado el Microsoft Word incluido en el paquete de Microsoft Office, pero a diferencia del anterior la extensión no sera .doc sino que debe guardarlo como documento web para ello tenemos que al menú y pulsar guardar como.... y saldrá una lista desplegable y usted debe elegir guardar el documento como página web por por lo que obtendrá un documento web htm y una carpeta con las imágenes del documento, aún no tiene un elemento que pueda subir al servidor primero debe comprimir tanto el documento web como su carpeta de archivos con el compresor zip con extensión .zip, el nombre del zip es indiferente, ya tiene un documento preparado para funcionar en la aplicación web, más adelante se explica como se obtendrá el documento electrónico htm que editor puede modificar. 64 Por último recordar los formatos que los elementos multimedia que acepta la aplicación. •Video: .mp4 .wna .avi .m4v •Imágenes: .gif .bmp .jpg .jpeg .png •Sonidos: .mp3 .ac3 .wma .ogg (En algunos navegadores algunos de estos formatos no son compatibles) 8.2. Pantalla de edición de documento htm Al abrir la aplicación gestor htm lo primero que encontraremos sera la pantalla de gestor htm el cual se compone de los elementos que se muestra en la captura que se muestra a continuación. Podemos apreciar en la parte superior cuatro pestañas que no servirán para navegar entre los diferentes gestores, siendo la primera pestaña perteneciente a la gestor htm que se muestra en pantalla y que sera el más relevante ya que en el realizaremos todos los cambios en nuestro documento electrónico htm mientras que los otros tres pertenecen a los gestores de video, imágenes y sonido, los cuales nos servirá para subir elementos multimedia que se muestran las lista que se ven a los dos de la pantalla y nos servirán para agregar contenido a nuestro documentos,a excepción del los widgets que vienen predefinidos. 65 Gestor Htm También podemos aprecia en esta captura de pantalla que en la parte inferior de las lista hay dos opciones para inserción de los elemento por incrustado por hiperenlace, detallaremos su utilidad más adelante. Encima de las lista podemos apreciar unos recuadros donde podremos obtener una vista previa de los elementos multimedia simplemente pulsando sobre el elemento que se quiera. Por último podemos apreciar en la zona central de la página el menú de subida y gestión de documentos htm que utilizaremos para cargar documento en el editor que podemos observar justo debajo. 8.2.1.Subida de documentos htm Vamos a explicar los pasos necesarios para subir al servidor un documento htm y cargarlo en el servidor. Lo primero es presionar sobre el explorador de archivos que mostramos abajo. En cuanto pulsemos no aparece un pantalla emergente donde el usuario tendrá que buscar en sus directorios locales el documento que desea subir. Como se indicaba en el apartado anterior existen dos formas de subir un documento electrónico la primera era subiendo un documento Word con extensión .doc o por el contrario subir un archivo comprimido con extensión .zip 66 Debemos elegir la que vamos a subir si el archivo elegido es correcto se mostrara con una esfera verde delante, como podemos apreciar en la captura de la parte inferior, si por el contrario no tiene una extensión correcta se mostrara una esfera roja y al pulsar el botón de cargar htm nos mostrara un mensaje de error. El explorador de archivos acepta como validas tanto las extensiones .doc como .zip pero sino seleccionamos la correcta también obtendremos un mensaje de error. Una vez hemos escogido nuestro documento solo tenemos que pulsar el botón cargar htm y si es un .doc lo convertirá a documento htm dentro del servidor y lo cargará en editor y si es un .zip se descomprimirá en el servidor, buscara el documento htm y lo cargará en ambos casos el resultado sera que se mostrara el documento en el editor y estará listo para editar. En la captura de pantalla podemos ver el resultado. Existe otro botón llamado gestionar htm que sirve para acceder a la pantalla para gestionar los documentos htm ya guardados en el servidor, esto lo veremos más adelante cuando expliquemos los gestores multimedia. 67 Gestor Htm 8.2.2 Modificación del documento htm Una vez cargado el documento ya podemos ínter-actuar con él, primero mostraremos las opciones del editor, el editor tiene muchas opciones como puede tener cualquier editor de textos, en la parte superior del editor se muestran los iconos con todas las opciones selecciona-ble de que el usuario dispone tales, como alineación de texto, modificación de los caracteres, sangrías , indexación, tablas ,etc Mientras que en la parte inferior podemos apreciar que tenemos opciones para modificar el texto, donde podemos elegir entre modo design que es el que se muestra por defecto o el html donde podremos modificar el documento por html, modificar su css etc... Una vez vista las opciones del editor vamos a mostrar al funcionalidad de las lista de elementos multimedia con respecto al editor, ja hemos visto que al seleccionar un elemento de la lista podemos ver su pre visualización como se puede observar en al captura de pantalla inferior. 68 Pero la listas tiene otra funcionalidad y es que podemos arrastrar elemento dentro del editor y insertarlos en el documento electrónico del usuario, lo único que tiene que hacer es clicar sobre el elemento de la lista deseado, mantener pulsado y arrastrarlo dentro dela posición del editor deseada, como podemos apreciar en la captura de pantalla inferior. También podemos insertar como un hiperenlace con el mismo procedimiento, la funcionalidad se repite para todas las lista de la página, así con esto podemos ver con que facilidad podemos agregar elementos multimedia en el documento electrónico htm y la multitud de acciones que podemos realizar. 69 Gestor Htm 8.2.3 Guardar el documento htm Una vez el usuario haya realizado los cambios y modificaciones que considere oportunas puede proceder a guardar el documento, un parte que no se mencionado antes es que al cargar un documento cambiara el menú de carga y gestión del htm por la de guardado, limpieza y gestión del htm que mostramos a continuación. El botón de limpiar editor sirve para vaciar el editor y todos sus archivos temporales en el servidor, por lo que se recomienda guardar el documento electrónico htm antes de pulsarlo, o si simplemente el usuario piensa que el documento es descartable para limpiar el editor y volver a empezar, al pulsarlo también se volverá a mostrar el menú de subida y gestión htm. Como se puede observar en la captura de pantalla anterior podemos elegir entre guardar el documento en el servidor de la aplicación, por defecto, o en una ruta local, si ese es el caso se desbloqueara el textbox y deberemos indicar un ruta valida para guardar el documento sino nos mostrara un mensaje de error. En cambio si elegimos el servidor al pulsa el botón nos indicara si habido alguno problema sino mostrara un ventana emergente que nos indicara que todo esta correcto. El editor no se vaciara al pulsar guardar documento ya que es posible que el usuario quiera guardarlo en varias rutas. 70 8.3.Pantallas de gestión de elementos multimedia Si seleccionamos las una de las pestañas de la parte superior derecha nos llevaran a las ventanas de gestión de los elementos multimedia que aparecen en las lista para ejemplificar su funcionamiento utilizaremos al de gestión de video. Se puede apreciar que en la parte izquierda se muestran ya los elementos existentes en el servidor y su jerarquía mientras que en la parte central esta el explorador de archivos para buscar nuevos elementos y a la derecha hay un gran cuadro de dialogo que nos informara de los cambios que realicemos en el servidor. En la parte inferior tenemos la opciones de manipulación de los elementos ya existentes y e botón para el menú ftp. 71 Gestor Htm 8.3.1 Subida de elemento multimedia Para subir un nuevo elemento el usuario solo tiene que seguir los que se detallan en la parte superior de la página de gestión primero marcamos la casilla de la carpeta de destino. Una vez marcada la casilla pasamos al segundo paso seleccionar elemento multimedia que se desea subir , veras que si elemento es pesado aparece una pantalla de carga que te indicara cuanto tiempo resta hasta que tenga el archivo temporal. 72 El último paso es clicar en subir video, en este caso, y se subirá al servidor y nos lo indicara en el cuadro de dialogo de la parte inferior. 8.3.2 Crear,renombrar,borrar En la parte inferior de los gestores hay cuatro botones, uno para crear carpetas otro para renombrar elementos ya sean carpetas o archivos, otro para borrarlos y por último un botón para mostrar el menú ftp, el cual analizaremos en el siguiente apartado, vamos a ver como funcionan estos botones. Empezaremos por el botón de crear, antes de pulsarlo debemos observar que tenemos que elegir un destino para la nueva carpeta, podemos elegir entre la raíz del directorio . 73 Gestor Htm 9. Conclusiones En este capitulo vamos a describir distintas conclusiones a las que hemos llegado tras el trabajo realizado. 9.1. Trabajo realizado La aplicación desarrollada finalmente es algo distinta a la descrita cuando pedí la solicitud del proyecto, yo creo que en todos los aspectos en los que es diferente es porque considere que se podía mejorar su calidad o rendimiento o simplemente la haría más amigable como por ejemplo la expansión de un solo gestor de elementos a multimedia a tres una para video otro para sonido y un último para imagen, también he añadido un cuarto en una ventana emergente para poder gestionar los proyectos realizados, algo que no contemplaba mi primer esquema, también he cambiado el modo de subida que en principio iba ser todo por ftp pero no tenia sentido si puedes utilizar un explorador de archivos que es mas seguro al ser una transmisión local, pero he dejado al opción de poder realizar conexiones ftp como un añadido a los gestores. Hay más pequeñas mejoras y todas viene de el continuo aprendizaje de ASP.Net y html y javascript, otras que aunque he intentado no he conseguido conseguir como encapsular código en txt y después leerlo de des de javascript para que el usuario pudiera gestionar también los widget, que no tienen gestor debido a que tenido que incrustar directamente el código dentro del html, con los txt el usuario hubiera podido personalizar sus propios widgets, también he probado muchas formas de subir los documentos htm debido a lo complicado que ha sido encontrar la manera de que el usuario subiera el documento junto con su carpeta de archivos de forma amigable, ya que no se le puede pedir que primero el documento, luego cree una carpeta el servidor y suba las imágenes después, así que al final decidí dejar las que consideré las dos mejores opciones y la más sencilla para el usuario. Indagando por Internet he encontrado prácticamente todas mis soluciones a problemas que no lograba resolver, he aprendido a preguntar si es necesario y utilizar nuevas herramienta si es necesario como por ejemplo las librería duodimension y Ionic.zip, con las cuales resolví el problema de la subida de documento electrónicos. Las prácticas de empresa me han sido indispensable para aprender a realizar mis aplicaciones de forma correcta y no dejar vacíos ni errores volátiles, evitar por medio de prueba y error que la aplicación sera consistente en cualquier aspecto. Finalmente creo que realizado un aplicación correcta que cumple los requisitos que indique en la solicitud incluso mejorando-lo y que aprendido no solo a trabajos con los lenguajes de programación ,tecnologías y programas que he necesitado para la elaboración sino también a llevar un ritmo de trabajo, organizarme, a intentar que todo funcione correctamente bajo cualquier situación, etc... Por último decir que es una gran satisfacción cuando ves el fruto de tu trabajo cumple con lo requerido. 80 10. Bibliografía •http://www.telerik.com/products/aspnet-ajax.aspx Accedido de diciembre a marzo de 2012. •http://www.telerik.com/community/forums/aspnet-ajax.aspx Accedido de diciembre a marzo de 2012. •http://msdn.microsoft.com/en-us/library/system.net.ftpwebrequest.aspx Accedido en febrero de 2012 •http://msdn.microsoft.com/es-es/asp.net/centrum-asp-net.aspx Accedido en enero de 2012 •http://www.desarrolloweb.com/javascript/ Accedido en enero de 2012 •http://www.w3schools.com/html/default.asp Accedido en enero de 2012 •http://www.c-sharpcorner.com/ Accedido en enero de 2012 •http://es.wikipedia.org/wiki/Wikipedia:Portada Accedido en julio de 2012 •http://www.duodimension.com/ Accedido en febrero de 2012 •http://dotnetzip.codeplex.com/ Accedido en marzo de 2012 81