TesinaInformatica Internet

UNIVERSIDAD DE CASTILLA-LA MANCHA ESCUELA SUPERIOR DE INGENIERA INFORMTICA
GRADO EN INFORMTICA
Tecnologa Especfica de Ingeniera del Software
TRABAJO FIN DE GRADO
Diseo e Implementacin de una Herramienta de Apoyo en la Seleccin de Tecnologas para el Desarrollador Web Csar Snchez-Mata Caballero
Julio, 2011
UNIVERSIDAD DE CASTILLA-LA MANCHA ESCUELA SUPERIOR DE INGENIERA INFORMTICA

Departamento de Sistemas Informticos
TRABAJO FIN DE GRADO

Diseo e Implementacin de una Herramienta de Apoyo en la Seleccin de Tecnologas para el Desarrollador Web
Autor: CSAR SNCHEZ-MATA CABALLERO Director: VICTOR MANUEL RUIZ PENICHET
Julio, 2011
Resumen
La evolucin tecnolgica que ha sufrido la sociedad en los ltimos aos ha impulsado nuevas posibilidades de servicios al usuario que era antes impensable. Gracias al creciente avance en los dispositivos mviles, al aumento de ancho de banda y a la posibilidad de conectarse a Internet desde cualquier sitio, han hecho que las aplicaciones Web sean indispensables dentro de las nuevas tecnologas. Es por ello, que la demanda de aplicaciones Web ha crecido considerablemente en el los ltimos aos respecto a las aplicaciones de escritorio, teniendo cada vez menos sentido las aplicaciones no pensadas para la conexin a Internet. Para cubrir esa demanda, las tecnologas de desarrollo Web se han multiplicado a la vez que las existentes evolucionaban. Actualmente, esta oferta es tan grande que es difcil conocer todas las tecnologas para el desarrollo de aplicaciones Web, por lo que a los desarrolladores les cuesta decidir cules usar a la hora de afrontar nuevos proyectos, limitndose a utilizar aquellas con las que ya han trabajado, no siendo siempre la mejor eleccin posible. En este proyecto se plantea la idea de implementar una aplicacin Web que gue al desarrollador en la eleccin de las tecnologas de desarrollo Web ms adecuadas, utilizando para ello algunas herramientas de ltima generacin. Este asistente ofrece la posibilidad al usuario de visualizar todas las tecnologas de desarrollo de aplicaciones, mediante una atractiva interfaz en la que interactuar, pudiendo introducir los requisitos tecnolgicos de la aplicacin a desarrollar para que el asistente muestre slo las tecnologas que se adaptan a esas necesidades. No se trata nicamente de una herramienta que muestre las tecnologas, sino tambin sus principales caractersticas y la informacin bsica para empezar a documentarse y comenzar con el desarrollo mediante tecnologas a priori desconocidas La aplicacin ofrece la posibilidad de que el usuario visualice la informacin necesaria para conocer los detalles de la tecnologa que la herramienta le recomienda. Debido a la constate actualizacin y cambio de los diferentes componentes del desarrollo Web, este asistente se adapta a la insercin de nuevas tecnologas as como a la modificacin de los parmetros de seleccin, siendo los propios usuarios los encargados de recomendar los nuevos cambios.
Agradecimientos
Quiero agradecer a todos aquellos que considero que, de una manera o de otra, han contribuido a que hoy est escribiendo esta memoria. En primer lugar me gustara agradecer a toda mi familia y en especial a mis padres por la confianza puesta en m. Tambin quiero agradecer a mi tutor Vctor Manuel Ruiz Penichet, que me permiti realizar este proyecto con l. En el que sin su ayuda, consejos y nimos, no lo habra conseguido. Agradecer a todos mis amigos, que siempre han estado a mi lado, consiguiendo que estos aos en Albacete sean inolvidables.
Dedicatorias
Este trabajo est dedicado a mi hermano Javier y a mis padres, Csar y M Concepcin, que gracias a su apoyo incondicional y a su paciencia durante todos estos aos, han permitido que realice este proyecto y finalice mis estudios. Gracias!
NDICE
CAPITULO 1. INTRODUCCIN.............................................................................. 1 1.1 1.2 1.3 Motivacin ..................................................................................................... 3 Objetivos ........................................................................................................ 4 Estructura de la Memoria ............................................................................... 5
CAPITULO 2. REVISIN DE LA TECNOLOGA PARA EL DESARROLLO WEB ................................................................................................. 7 2.1 Historia de la Tecnologa en Internet ............................................................. 9 2.2 Clasificacin Tecnolgica ............................................................................ 15 2.2.1 Lenguajes .............................................................................................. 16 2.2.2 Herramientas ......................................................................................... 38 2.2.3 Bases de datos ....................................................................................... 53 2.3 2.4 Herramientas Similares ................................................................................ 61 Conclusin.................................................................................................... 62
CAPITULO 3. DESCRIPCIN DE LA HERRAMIENTA ..................................... 63 3.1 Descripcin de Alto Nivel ............................................................................ 65 3.2 Descripcin Metodolgica ........................................................................... 68 3.2.1 Requisitos .............................................................................................. 68 3.2.2 Anlisis.................................................................................................. 79 3.2.3 Diseo ................................................................................................... 82 3.2.4 Implementacin ..................................................................................... 86 3.3 3.4 3.5 3.6 Funcionalidad Principal ............................................................................... 90 Marco Aplicacin ......................................................................................... 93 Tecnologas Empleadas ................................................................................ 96 Conclusiones ................................................................................................ 98
CAPITULO 4. CONCLUSIONES Y TRABAJO FUTURO .................................... 99 4.1 4.2 Conclusiones .............................................................................................. 101 Trabajo Futuro y Posibles Ampliaciones ................................................... 102
BIBLIOGRAFA ...................................................................................................... 103 GLOSARIO DE TRMINOS .................................................................................. 113 ANEXO A. ANEXO B. PLANTILLA EVALUACIN DE LA HERRAMIENTA ............ 119 CONTENIDO DEL CD ................................................................. 121 III
NDICE DE FIGURAS
Figura 2.1 La Primera Pgina Web ............................................................................ 11 Figura 2.2 Web Multimedia ....................................................................................... 14 Figura 2.3 Lnea Temporal ......................................................................................... 15 Figura 2.4 Tecnologas agrupadas bajo el concepto de AJAX................................... 19 Figura 2.5 Comparativa modelo clsico y modelo Ajax ............................................ 20 Figura 2.6 Estructura HTML 4 ................................................................................... 22 Figura 2.7 Estructura HTML5 .................................................................................... 23 Figura 2.8 rbol base de datos jerrquica .................................................................. 54 Figura 3.1 Pantalla Principal ...................................................................................... 65 Figura 3.2 Detalles Filtro............................................................................................ 66 Figura 3.3 Pantalla tecnologa especifica ................................................................... 67 Figura 3.4 Pantalla de administracin ........................................................................ 67 Figura 3.5 Requisitos del sistema ............................................................................... 69 Figura 3.6 Diagrama de Caso de Uso-Gestin del Backend ...................................... 71 Figura 3.7 Escenario Caso de uso UC 1.6 .................................................................. 72 Figura 3.8 Diagrama Caso de uso- Gestin del Frontend .......................................... 73 Figura 3.9 Escenario UC 2.5 Interactuar con las pelotas ........................................... 74 Figura 3.10 Escenario UC 2.1 filtrar tecnologas ....................................................... 75 Figura 3.11 Diagrama Caso de Uso- Gestin de Usuarios ......................................... 76 Figura 3.12 Diagrama Trazabilidad - Gestin Backend ............................................. 77 Figura 3.13 Diagrama Trazabilidad - Gestin frontend ............................................. 78 Figura 3.14 Diagrama Trazabilidad - Gestin Usuarios............................................. 78 Figura 3.15 Diagrama de clases ................................................................................. 80 Figura 3.16 Diagramas de actividad- Interactuar con las burbujas ............................ 81 Figura 3.17 Diagrama de secuencia - Cargar pelotas ................................................. 82 Figura 3.18 Prototipo Interfaz principal ..................................................................... 83 Figura 3.19 Prototipo interfaz tecnologas ................................................................. 84 Figura 3.20 Prototipo interfaz del backend ................................................................ 85 Figura 3.21 Diagrama de navegacin ......................................................................... 86 Figura 3.22 Estructura HTML .................................................................................... 87 Figura 3.23 Aplicacin burbujas ................................................................................ 88 Figura 3.24 Detalle sistema de puntuacin ................................................................ 89 Figura 3.25 Inicio de la Aplicacin ............................................................................ 91 Figura 3.26 Detalle cdigo creacin de burbujas ....................................................... 91 Figura 3.27 Panel de Identificacin ............................................................................ 93 Figura 3.28 Bubbl.us - Diagrama Conceptual ............................................................ 94 Figura 3.29 Lnea temporal- La Historia de Internet.................................................. 95 Figura 3.30 Wiki - Herramientas-Web ....................................................................... 96 V
NDICE DE TABLAS
Tabla 2.1 Metadatos ASP ........................................................................................... 21 Tabla 2.2 Metadatos HTML ....................................................................................... 25 Tabla 2.3 Metadatos CSS ........................................................................................... 28 Tabla 2.4 Metadatos XML ......................................................................................... 30 Tabla 2.5 Metadatos de JavaScript ............................................................................. 32 Tabla 2.6 Metadatos de PHP ...................................................................................... 34 Tabla 2.7 Metadatos Ruby.......................................................................................... 36 Tabla 2.8 Metadatos de JSP ....................................................................................... 37 Tabla 2.9 Metadatos ColdFusion................................................................................ 38 Tabla 2.10 Metadatos de ASP.Net ............................................................................. 40 Tabla 2.11 Metadatos de Webwork ............................................................................ 41 Tabla 2.12 Metadatos de Drupal ................................................................................ 42 Tabla 2.13 Metadatos de Flash ................................................................................... 44 Tabla 2.14 Metadatos de JQuery ................................................................................ 45 Tabla 2.15 Metadatos de Joomla!............................................................................... 47 Tabla 2.16 Metadatos de Mootools ............................................................................ 48 Tabla 2.17 Metadatos Ruby on rails ........................................................................... 49 Tabla 2.18 Metadatos de Symfony ............................................................................. 51 Tabla 2.19 Metadatos de WebMatrix ......................................................................... 52 Tabla 2.20 Metadatos de Wordpress .......................................................................... 52 Tabla 2.21 Metadatos de MySQL .............................................................................. 57 Tabla 2.22 Metadatos de PostgreSQL ........................................................................ 57 Tabla 2.23 Metadatos de Oracle ................................................................................. 59 Tabla 2.24 Metadatos Access ..................................................................................... 60 Tabla 2.25 Metadatos de Microsoft SQL ................................................................... 61
VII
Error! Use the Home tab to apply Ttulo 1 to the text that you want to appear here.
CAPITULO 1. INTRODUCCIN
Este captulo ofrece una breve presentacin del proyecto, describiendo las principales motivaciones y objetivos que han impulsado su desarrollo. Para finalizar, se mostrar un breve resumen que describe la estructura y contenido de la presente memoria.
1.1
Motivacin
Son varias las motivaciones que han impulsado este proyecto, desde la evolucin de las aplicaciones informticas junto al progreso de las nuevas tecnologas hardware, que facilitan la conectividad desde cualquier lugar, al aumento del tipo tecnologas de desarrollo, las cuales son difciles de conocer y seleccionar. Desde el punto de vista de la investigacin observamos que la evolucin de la tecnologa y el acceso a Internet han cambiado las necesidades del usuario, requiriendo ste un acceder al instante a lo que necesita. En la actualidad el desarrollo y uso de las aplicaciones Web ha crecido exponencialmente frente a las aplicaciones de escritorio, proporcionando muchos beneficios al usuario que las utiliza (acceso, actualizacin, menos requisitos de memoria, precio, datos ms seguros). Otro factor a tener en cuenta, es el nmero de usuarios con acceso a Internet, lleg a 2.000 millones de usuarios a finales del ao 2010, doblando el nmero de usuarios en solo cinco aos. La agencia ITU (Unin Internacional de Telecomunicaciones), pronostica que al menos la mitad de la poblacin mundial tendr acceso a banda ancha para el ao 2015. Por todo ello cada vez son ms las tecnologas disponibles para el desarrollo de aplicaciones Web, siendo cada vez ms difcil conocer todas las que podemos utilizar y encontrar aquellas que mejor se adaptan a las necesidades del desarrollador. Siendo crucial para el xito de un desarrollo la amplia adopcin de estas tecnologas, y un mayor entendimiento de sus cualidades, caractersticas y la interaccin entre ellas. Desde el punto de vista acadmico, es fcil apreciar el desconocimiento de los alumnos de las nuevas tecnologas, debido al gran aumento y evolucin de las mismas. A la hora de realizar un proyecto, se tiende a elegir tecnologas obsoletas para sus desarrollos, las cuales no facilitaran tanto su trabajo ni producirn resultados tan ptimos, como si utilizaran tecnologas de vanguardia. Algo similar ocurre desde el punto de vista empresarial, donde el continuo desarrollo de nuevas tecnologas, no les permite tener un amplio conocimiento de lo que los nuevos avances pueden hacer por su empresa y sus productos, consiguiendo mayores beneficios y mejores resultados en el acabado final de sus aplicaciones. Otra de las motivaciones para realizar este proyecto, es aprender a trabajar con tecnologas de desarrollo Web, as como estudiar muchas de las existentes, lo que me proporcionara un amplio abanico de conocimientos sobre todas las posibilidades que existen para desarrollar aplicaciones destinadas a Internet.
1.2
Objetivos
El objetivo principal que se pretende abordar en este proyecto es el desarrollo de una herramienta que proporcione un apoyo a los desarrolladores a la hora de conocer y seleccionar la tecnologa adecuada para el desarrollo de su aplicacin Web. Para cumplir dicho propsito, se llevarn a cabo los siguientes objetivos especficos: 1. Conocer las tecnologas actuales en el mbito del desarrollo de aplicaciones Web: caractersticas tericas, capacidades prcticas y beneficios que ofrecen. 2. Propuesta de una posible clasificacin, flexible, de tecnologas que sirva como punto de partida de la herramienta. 3. Propuesta de un conjunto de caractersticas, tambin flexible, que permitan filtrar las tecnologas en busca de las ms adecuadas. 4. Disear e implementar una aplicacin Web que gue al desarrollador, tanto profesional como recin iniciado, en la eleccin de las distintas tecnologas para sus propias aplicaciones, siendo esta la aplicacin principal del proyecto. 5. Desarrollar un panel administrativo para el mantenimiento, actualizacin y gestin de usuarios de la aplicacin principal.
1.3
Estructura de la Memoria
El contenido de la memoria est estructurado en cuatro captulos que hacen referencia a la aplicacin de soporte para la eleccin de tecnologas Web que se ha realizado para guiar a los distintos desarrolladores de aplicaciones Web, a la hora de seleccionar las distintas herramientas para llevar a cabo sus desarrollos. La estructura es la siguiente: CAPITULO 1. . Introduccin Este captulo hace una presentacin general del proyecto, describiendo las motivaciones y objetivos principales para su realizacin, as como una descripcin de la estructura de la memoria. CAPITULO 2. . Revisin de la Tecnologa para el Desarrollo Web En este captulo, se describe el contexto en el que est integrado la aplicacin creada, en el que describimos las tecnologas ms relevantes a la hora de crear aplicaciones Web, precedidas de un una breve historia de Internet, que nos ayuda a situar el estado actual de la tecnologa y su evolucin. CAPITULO 3. . Descripcin de la Herramienta Describe la aplicacin creada, ofreciendo una descripcin detallada de la misma. Empezando por una visin genrica de la aplicacin, lo que nos ayuda a entender a grandes rasgos en que consiste, a un estudio minucioso de los distintos pasos seguidos, de la ingeniera del software, para construir la aplicacin, as como todo lo que ha rodeado a la construccin de la herramienta. CAPITULO 4. . Conclusiones y Trabajo Futuro Una vez terminado el desarrollo del proyecto, en ese captulo se estudiarn las conclusiones obtenidas analizando la medida en que se han cumplido los objetivos propuestos. Por otro lado, dada las amplias posibilidades de actualizacin y mejora que ofrece la herramienta, se dedica un apartado para describir algunas de ellas.
CAPITULO 2. REVISIN DE LA TECNOLOGA PARA EL DESARROLLO WEB
En este captulo se describen los conceptos ms importantes relacionados con el proyecto. Es por ello que repasaremos los comienzos, as como la evolucin, de la historia de Internet, lo que nos ayudar a ver el progreso que ha sufrido todo aquello que interacta con la Word Wide Web. Definiremos algunos de los conceptos de las tecnologas ms relevantes dentro del desarrollo Web, con la intencin de adentrar al lector en las diferentes tecnologas de desarrollo de aplicaciones Web, as como en la evolucin que han sufrido las mismas a lo largo del tiempo.
2.1
Historia de la Tecnologa en Internet
Se puede considerar que la historia de Internet, comienza en Junio de 1961 cuando Leonard Kleinrock public desde el Massachusetts Institute of Technology (MIT) la teora de conmutacin de paquetes, impulsando el desarrollo del entonces embrionario sistema de comunicacin denominado packet switching. Ese mismo ao, Charles Bachman disea el primer DBMS generalizado. En Agosto de 1962, Joseph Carl Robnett Licklider, discute sobre su concepto de Galactic Network, el concepto era muy parecido al Internet actual. Concibi una red global interconectada a travs de la que cada uno pudiera acceder desde cualquier lugar a datos y programas. Licklider fue el principal responsable del programa de investigacin en ordenadores de DARPA desde Octubre de 1962, donde convenci a sus sucesores Ivan Sutherland, Bob Taylor, y el investigador del MIT, Lawrence G. Roberts, de la importancia del concepto de trabajo en red. Pero no fue hasta 1965, cuando por primera vez en la historia, dos computadores, el Q-32 en Californiay el TX-2 en Massachesetts, establecan su primera comunicacin remota a travs de una lnea telefnica, creando as la primera red de ordenadores de rea amplia jams construida. El resultado del experimento fue la comprobacin de que los ordenadores podan trabajar juntos correctamente, ejecutando programas y recuperando datos a discrecin en la mquina remota. A finales de 1966 Roberts se traslada a la DARPA para desarrollar el concepto de red de ordenadores y rpidamente confeccion su plan para ARPANET, publicndolo en 1967. En la conferencia en la que present el documento se descubri que los trabajos del MIT (1961-67), RAND Corporation (1962-65) y NPL (1964-67), Laboratorio Nacional de Fsica de Reino Unido, haban discurrido en paralelo sin que los investigadores conocieran el trabajo de los dems. En Septiembre de 1969, la Network Measurement Center (Centro de Medidas de Red) en la UCLA fue seleccionada para ser el primer nodo de ARPANET. El proyecto de Doug Engelbart denominado Augmentation of Human Intelect, en el Instituto de Investigacin de Standford (SRI) proporcion un segundo nodo. Un mes ms tarde, cuando el SRI fue conectado a ARPANET, el primer mensaje de host a host fue enviado desde el laboratorio de Leinrock al SRI. Poco despus se aadieron dos nodos en la Universidad de California, Santa Brbara, y en la Universidad de Utah.
El siguiente hito en la historia del Internet se celebrar en un poco menos de un mes: el 21 de noviembre de 1969 se logr hacer la primera conexin permanente usando ARPANET entre los IMPs del SRI y la UCLA. Das ms tarde, el 5 de diciembre de 1969 se logr hacer una conexin permanente entre los cuatro nodos, haciendo realidad una embrionaria Internet. Mientras E.F. Codd de IBM introduca la idea de un modelo relacional de Bases de datos en un documento titulado A Relational Model of data for Large Shared Banks, antes de eso la mayora de bases de datos estaban basadas en un modelo de red o una simple estructura de archivo plano. Durante los aos siguientes se siguieron conectando ordenadores rpidamente a la ARPANET y el trabajo continu para completar un protocolo host a host funcionalmente completo, as como software adicional de red. Cuando en los nodos de ARPANET se complet la implementacin del Network Control Protocol (NCP, protocolo de control de red) durante el periodo 1971-72, los usuarios de la red pudieron comenzar a desarrollar aplicaciones. En Octubre de 1972, Kahn organiz una gran y muy exitosa demostracin de ARPANET en la International Computer Communication Conference. Esta fue la primera demostracin pblica de la nueva tecnologa de red. Fue tambin en 1972 cuando se introdujo la primera aplicacin "estrella": el correo electrnico. En Marzo, Ray Tomlinson, de BBN, escribi el software bsico de envo-recepcin de mensajes de correo electrnico, impulsado por la necesidad que tenan los desarrolladores de ARPANET de un mecanismo sencillo de coordinacin, quien tambin tom la decisin de utilizar el smbolo @ para separar el nombre de usuario del nombre del equipo (que ms tarde se convertira en el nombre de dominio). En Julio, Roberts escribi el primer programa de gestin de correo electrnico para leer selectivamente, almacenar, reenviar y responder a mensajes. Desde entonces, la aplicacin de correo electrnico se convirti en la ms utilizada de la red durante ms de una dcada. Esta aplicacin fue la precursora del tipo de actividad que observamos hoy da en la World Wide Web, es decir, del enorme crecimiento de todas las formas de trfico entre usuarios. En 1974, Ted Nelson publica un escrito donde, por primera vez, se habl de Hipertexto y links, prembulo del cdigo HTML para la creacin de las pginas Web. Un ao ms tarde, en 1975, Steve Walter crea la primera lista de correo electrnico, es decir, la distribucin simultanea de informacin por correo a mltiples usuarios. En abril de ese mismo ao, Bill Gates funda en Alburquerque su propia empresa de produccin de software informtico, Microsoft Corporation. Desde el punto de vista de las bases de datos, a principios de los aos ochenta comenz el auge de la comercializacin de los sistemas relacionales, y SQL comenz a ser el estndar de la industria, ya que las bases de datos relacionales con su sistema de tablas (compuesta por filas y columnas) pudieron competir con las bases jerrquicas y de
10
red, como consecuencia de que su nivel de programacin era sencillo y su nivel de programacin era relativamente bajo. No es hasta la dcada de los noventa, cuando Berners-Lee usa NeXTcube como el primer servidor Web del mundo y escribe el primer navegador Web, World Wide Web. Un ao ms tarde, en 1991, crea la primera pgina Web de la historia (Figura 2.1). Ese mismo ao, Microsoft lanza su VBScript, lenguaje interpretado por el Windows Scripting Host creado como variacin del lenguaje de programacin Visual Basic.
Figura 2.1 La Primera Pgina Web
Desde que se publicara esa Web, muchas personas han compartido sus conocimientos a travs de una extensa red computadores interconectados desde diversos lugares. En los primeros aos pocas personas que tenan acceso a la red, cuyo contenido eran generalmente confidenciales por sus caractersticas de investigacin o de seguridad nacional. Con el paso de los aos, comenz un gran intercambio de informacin con variedad temtica, y con ello, apareca la necesidad de trasmitir la informacin de forma ms sencilla. La evolucin de la Web ha sido continua; llegaron las imgenes a acompaar los textos, aparecieron las primeras animaciones, las primeras herramientas interactivas, el contenido multimedia, etc. y la evolucin continu, pudiendo dividir en cuatro generaciones.
11
La primera generacin, se caracteriza por ser pginas Web cuyo diseo era lineal y estaba orientado para cientficos que eran los usuarios que compartan su informacin alrededor de todo el mundo mediante estas pginas Web. La tecnologa de los navegadores Web era limitada y no dispona de la capacidad de transmitir informacin grfica. Las principales caractersticas de la primera generacin de diseo Web eran las velocidades de transmisin de datos, ya que era la conexin era va modem, lo que limitaba el tamao de las pginas Web. Respecto al diseo Web, la estructuracin era bastante desordenada con imgenes dispuestas horizontalmente y lneas de texto separadoras. Debido a este caos en el diseo, 1994, se estableci un consorcio para establecer unas normas y pautas para el futuro desarrollo de la Web, el W3C, World Wide Web Consortium, organizacin que coordina estndares y aade nuevas funcionalidades y desarrollos a la Web. Se comenzaron entonces a desarrollar unos estndares de lenguaje HTML para una unificacin del diseo Web que trajo consigo la aparicin de una serie de navegadores con nuevas funcionalidades y progresos en este mbito La segunda generacin, se puede decir que llega con la aparicin Mosaic primer navegador Web grfico, el cual adquiera gran popularidad, desplazando a Gropher, basado en textos. En esta generacin, el diseo Web empieza a utilizar iconos en lugar de algunas palabras, las pginas Web comienzan a poseer imgenes de fondo, botones con relieve para la navegabilidad y el texto es estructurado de forma jerrquica mediante mens o listados y propiedades del cdigo HTML Standard definido. La aparicin de estos elementos grficos en el diseo Web gener un deseo de los diseadores de aadir (sin control) estos archivos en sus pginas Web, lo que gener una saturacin en las pginas Web, sin tener en cuenta la accesibilidad ni la usabilidad. Se comenzaron a usar tablas para la organizacin de los contenidos, posicionamiento de los elementos y maquetaciones similares a libros o revistas. En esta generacin la aparicin de monitores y tarjetas grficas con mayores resoluciones y definicin de color, gener la consecuente mejora en la calidad del diseo Web. En 1994, se lanza Netscape, el primer navegador comercial de la historia. Todas estas mejoras y facilidades a la hora de navegar por la red, consiguen acercar Internet a todo tipo de usuarios, con lo que en 1995, se supera la cifra de 5 millones de servidores conectados a Internet. Esta 2 fase, tambin se caracteriza por la aparicin de las pginas Web dinmicas, cuyo contenido se genera a partir de lo que un usuario introduce en un Web o formulario. El 8 de junio de ese ao, aparece PHP, un lenguaje de programacin interpretado, diseado originalmente para la creacin de pginas Web dinmicas. Otros hitos importantes dentro de esta etapa, es la salida al mercado de Windows 95 la primera versin del browser Internet Explorer 1.0, tambin nacen algunos de las portales Web ms famosos de la historia de Internet, como es la creacin de Yahoo!, en marzo de 1995 por David Filo y Jerry Yang, el buscador ms exitosos de los primeros tiempos de Internet, eBay, pagina por excelencia de venta de artculos de segunda mano y Amazon la librera ms grande virtual del mundo, concentrar a lo largo de los prximos aos la atencin del sector como principal referente del comercio electrnico. 12
La tercera generacin, est marcado por la aparicin del plugin de Macromedia Flash (1996), el cual revolucionara la concepcin de diseo Web mediante animaciones vectoriales y por la llegada de las hojas de estilo en cascada, un mecanismo simple para dar estilo a documentos Web, separando el contenido y la estructura. Este mismo ao, aparece el famoso servicio de e-mail basado en la Web, Hotmail. En esta etapa, se generan las pginas Web segn el objetivo de las mismas: vender productos o servicios, comunidades, informacin, noticias. En esta especializacin del diseo Web, de acuerdo al objetivo de las pginas, se necesita ayudar al usuario a encontrar la informacin, generando una navegabilidad estructurada e intuitiva. En esta etapa, las empresas cobran un gran protagonismo, y con ello comienza la burbuja de las punto com, una corriente especulativa muy fuerte en el que las empresas vinculadas a Internet trepan en las bolsas de valores de Occidente. Esta tendencia seguir en ascenso hasta el 2001, cuando la burbuja explota y las empresas "punto com" empiezan a caer en bolsa. Es en esta etapa cuando se funda Google, motor de bsqueda creado el 27 de septiembre de 1998 por Larry Page y Sergey Brin. En la cuarta generacin, entra en juego el concepto Web 2.0, comnmente asociado con aplicaciones Web que facilitan compartir informacin, la interoperabilidad, el diseo centrado en el usuario y la colaboracin en la World Wide Web. Se trata de aplicaciones que de colaboracin y servicios que reemplazan las clsicas aplicaciones de escritorio. En que el diseo Web est enfocado totalmente a los elementos multimedia de ltima generacin. Con usuarios de todos los tipos, cualquiera tiene una pgina Web a da de hoy y la variedad de diseo es enorme debido a todas las posibilidades que ofrecen las ltimas tecnologas para los programadores. A esto le podemos aadir que las ltimas versiones de los navegadores soportan muchas ms prestaciones y elementos en las pginas Web. Es en Febrero del 2005, cuando Chad Hurley, Steve Chen y Jawed Karim fundan un sitio Web que permite a los usuarios compartir vdeos digitales, YouTube, considerado en 2006 el invento del ao por la revista Times. En la Figura 2.2, podemos ver un ejemplo de las ltimas Web multimedia, en las que YouTube nos permite formular preguntas a los principales lderes del mundo, las cuales se formularan en entrevistas exclusivas retrasmitidas en la Web.
13
Figura 2.2 Web Multimedia
Una de las aplicaciones ms representativa de esta ltima generacin, y de lo que hoy conocemos como Internet, son las redes sociales, portales Web compuestos por de grupos de personas, las cuales estn conectadas por uno o varios tipos de relaciones. En Febrero de 2004, nace Facebook, como un hobby de Mark Zuckerberg, en aqul momento estudiante de Harvard, y como un servicio para los estudiantes de su universidad. Un ao despus, Facebook tena ms de un milln de usuarios. Otra de las redes sociales ms famosas es Twitter, creada en Enero del 2006, basada en el microblogging, que permite a los usuarios mandar mensajes en texto plano de un mximo de 140 caracteres. En ese mismo mes, Internet alcanza los 1.100 millones de usuarios a nivel mundial. Uno de los hitos actuales ms relevantes, dentro del desarrollo Web, es la salida del nuevo estndar para HTML, el cual junto a CSS3 y JavaScript, permite un sin fin de posibilidades para el desarrollo Web, incluso intentando desbancar al famoso Flash en su hegemona en las animaciones. El primer borrador del W3C para HTML5, sali en 2010 y se prev que HTML5 alcance la condicin de candidato en 2012, finalice las pruebas finales en 2020, y alcance la categora de recomendacin de pleno derecho en 2022. Aun as, en la actualidad, la mayora de navegadores soportan este estndar y son muchas las aplicaciones Web que aprovechan su potencial. En la Figura 2.3, podemos ver parte del diagrama con la lnea temporal de la historia de internet, permitiendo situar algunos de los hitos mencionados anteriormente en su momento histrico. El diagrama, permite desplazarse desde el inicio de Internet en 1965 hasta nuestros das, mostrando cada uno de los hechos ms relevantes, pudiendo seleccionar cada uno de ellos para obtener informacin ms detallada. (Caballero, 2011) 14
Figura 2.3 Lnea Temporal
2.2
Clasificacin Tecnolgica
Existen nmeros tecnologas para el desarrollo de aplicaciones Web destinadas a cada una de las fases de dicho desarrollo. Realizar una buena clasificacin y conocer sus caractersticas, es esencial para poder llevar a cabo la construccin de una aplicacin que nos gue a travs de la eleccin de tecnologas. En los siguientes puntos, veremos descritas las tecnologas ms relevantes dentro del desarrollo de aplicaciones Web y algunas representativas de algunos dispositivos o tecnologas menos comunes. Las tecnologas, se pueden distinguir tres grandes grupos; lenguajes, herramientas y bases de datos. Esta divisin, y posteriores subdivisiones, nos ayudarn a la hora de clasificar y organizar las diferentes tecnologas que podemos utilizar para construir aplicaciones destinadas a Internet. Esta clasificacin no tiene por qu ser definitiva, ya que segn evolucione la propia herramienta, puede requerir una nueva forma de dividir las tecnologas existentes. El uso de la herramienta por parte de la comunidad proporcionar una estructura adecuada a las necesidades del momento gracias a la flexibilidad que supone poder modificar desde la administracin los diferentes parmetros. Desde un principio, esta herramienta se cre para satisfacer las necesidades de los usuarios, por lo que sern ellos con sus aportaciones, recomendaciones y puntuaciones, los que vayan dando forma y haciendo crecer la aplicacin adaptndola a las necesidades situacin actual.
15
2.2.1 Lenguajes Un lenguaje de programacin es un idioma artificial diseado para expresar computaciones que pueden ser llevadas a cabo por mquinas como las computadoras. (Wikimedia, 2011) Actualmente existen mltiples lenguajes de programacin para el desarrollo de aplicaciones Web, los cuales han surgido debido a las tendencias y necesidades de los usuarios. Desde los inicios de Internet, los lenguajes estticos son los que satisfacan las demandas de los usuarios. A medida que paso el tiempo, se desarrollaron nuevas tecnologas y surgieron nuevos problemas a los que dar solucin, esto dio lugar desarrollo de lenguajes de programacin dinmicos, que permitieran interactuar con los usuarios y utilizaran sistemas de Bases de Datos. Dentro de cada lenguaje, existen unas caractersticas similares que nos permiten clasificarlos y as poder elegir el que mejor se adapte a nuestras necesidades. Sistemas Distribuidos Modo de Ejecutarse Entorno de Programacin Estilo de programacin
Sistemas Distribuidos
"Sistemas cuyos componentes hardware y software, que estn en ordenadores conectados en red, se comunican y coordinan sus acciones mediante el paso de mensajes, para el logro de un objetivo. Se establece la comunicacin mediante un protocolo prefijado por un esquema cliente-servidor". (Presuman, 2002) Las principales ventajas son: Concurrencia.- Esta caracterstica permite que los recursos disponibles en la red puedan ser utilizados simultneamente por los usuarios que interactan en la red. Carencia de reloj global.- Las coordinaciones para la transferencia de mensajes, no tienen una temporizacin general, est ms bien distribuida en los componentes. Fallos independientes de los componentes.- Cada componente del sistema puede fallar independientemente, lo que permite el logro de las tareas con mayor efectividad, pues el sistema en su conjunto continua trabajando.
16
El modelo Cliente-Servidor, es el que predomina en la actualiza, el cual permite descentralizar los procesos y recursos Cliente: se denomina cliente a la maquina la cual solicita un determinado servicio Servidor: dcese de la maquina la cual proporciona los servicios al cliente
Modo de Ejecutarse (o modo de traduccin)

Dependiendo la manera en la que se traduce y ejecuta el lenguaje podemos clasificarlos en: Lenguajes Ensamblados: Se refieren al lenguaje ensamblador, que viene a ser una representacin simblica de las instrucciones correspondientes al lenguaje ensamblador de alguna arquitectura especfica, con lo que, casi siempre, la correspondencia entre las instrucciones de este lenguaje, y las del lenguaje mquina son de 1 a 1, si bien existen algunas excepciones, que dan lugar a lo que se conoce como lenguajes macro-ensambladores. Lenguajes Compilados: Son aquellos, que son traducidos de un lenguaje de alto nivel a lenguaje mquina o bien a lenguaje ensamblador, produciendo un programa objeto permanente. Lenguajes Interpretados: Estos lenguajes, tienen la particularidad, de que no producen cdigo objeto, sino que cada instruccin es analizada y ejecutada a la vez, lo que ofrece mucha interaccin con los usuarios, pero a la vez resultan ineficientes, cuando se desea ejecutar repetitivamente un programa. Lenguajes Mixtos: son aquellos que tienen una fase de compilacin del cdigo y el cdigo resultante es interpretado en ordenadores de distintas arquitecturas. Lenguajes Preprocesados: Son lenguajes que son traducidos primeramente a un lenguaje intermedio de ms bajo nivel, para posteriormente volverlos a traducir y producir el programa objeto. Este tipo de lenguajes fueron creados, con la idea de proporcionar un lenguaje ms potente que el lenguaje intermedio, mediante la implementacin de algunas macroinstrucciones.
Entorno de Programacin
Atendiendo al entorno de desarrollo podemos distinguir varios tipos de lenguajes Lenguajes Visuales. Se les llama as a los lenguajes que forman parte de una aplicacin dotada de una Interfaz grfica, la cual por medio de iconos y
17
otras herramientas visuales, pretenden facilitar las tareas rutinarias de los programadores. Metalenguajes: Son lenguajes como XML, SGML y HTML que sirven para definir otros lenguajes, cuyo objetivo es llevar a cabo la estructuracin de textos mediante un conjunto de etiquetas, de manera tal, que puedan ser entendidos por los humanos y tambin procesado por los ordenadores. Lenguajes de propsito especfico: Son aquellos lenguajes desarrollados con la finalidad de resolver problemas de una naturaleza muy determinada, tal como CORBA para el manejo de interfaces en ambientes clienteservidor. Lenguajes Script: Son lenguajes como JAVASCRIPT, VBSCRIPT o PHP, que se utilizan en ambientes clientes-servidor, mediante la incrustacin de cdigo en las pginas HTML, y as permitir la programacin del lado del cliente.
Estilo de programacin
Segn la manera en la que se aborda la tarea a realizar, podemos clasificar los leguajes como: Imperativos: Son aquellos lenguajes, que basan su funcionamiento en un conjunto de instrucciones secuenciales, las cuales, al ejecutarse, van alterando las regiones de memoria donde residen todos los valores de las variables involucradas en el problema que se plantea resolver. Declarativos: es un paradigma de programacin basado en el desarrollo de programas especificando o "declarando" un conjunto de condiciones, proposiciones, afirmaciones, restricciones, ecuaciones o transformaciones que describen el problema y detallan su solucin. Los lenguajes declarativos no dicen cmo hacer una cosa, sino, ms bien, qu cosa hacer Orientados a Objetos: en la programacin orientada a objetos se definen los programas en trminos de "clases de objetos", objetos que son entidades que combinan estado, comportamiento e identidad. La programacin orientada a objetos expresa un programa como un conjunto de estos objetos, que colaboran entre ellos para realizar tareas.
2.2.1.1 Ajax El trmino AJAX es un acrnimo de Asynchronous JavaScript And XML, que se puede traducir como "JavaScript asncrono + XML". Este lenguaje, no es una tecnologa en s mismo, sino que en realidad, se trata de varias tecnologas independientes que se unen para forma una nueva.
18
Las tecnologas que componen Ajax son:

XHTML y CSS, para crear una presentacin basada en estndares. DOM, para la interaccin y manipulacin dinmica de la presentacin. XML, XSLT y JSON, para el intercambio y la manipulacin de informacin. XMLHttpRequest, para el intercambio asncrono de informacin. JavaScript, para unir todas las dems tecnologas.
XHTML DOM CSS Javascript XML XMLHttpResquest JSON
Figura 2.4 Tecnologas agrupadas bajo el concepto de AJAX
En las aplicaciones Web tradicionales, cada vez que el usuario desencadena llamadas al servidor, el servidor devuelve una nueva pgina al navegador del usuario. Ajax permite que el usuario interacte con la aplicacin, evitando recargas constantes de la pgina, ya que el intercambio de informacin se realiza en un segundo plano, gracias a la creacin de un elemento intermedio entre el usuario y el servidor. Esta nueva capa, mejora la respuesta de la aplicacin, ya que el usuario nunca encuentra vaca la ventana de navegacin esperando la respuesta del servidor. Antecedentes de Ajax A pesar de que el trmino Ajax fuese creado en 2005, la historia de las tecnologas que permiten Ajax se remonta a una dcada antes con la iniciativa de Microsoft en el desarrollo de Scripting Remoto. Sin embargo, las tcnicas para la carga asncrona de contenidos en una pgina existente sin requerir recarga completa remontan al tiempo del elemento iframe (introducido en Internet Explorer 3 en 1996) y del elemento layer. Ambos tipos de elemento tenan el atributo src que una direccin URL externa, cargando una pgina que contenga JavaScript que manipule la pgina paterna. El Microsoft's Remote Scripting (o MSRS, introducido en 1998) result un sustituto ms 19
elegante para estas tcnicas, con envo de datos a travs de un applet Java el cual se puede comunicar con el cliente usando JavaScript.
Navegador Cliente
Interfaz de Usuario
Navegador Cliente
Interfaz de Usuario
Motor AJAX
HTTP request HTML + CSS HTTP request HTML + CSS
Servicio Web
Web & XML server

Datastore, backend processing, legacy systems
Servidor del Sistema

Modelo Clsico de aplicacin Web
Datastore, backend processing, legacy systems
Servidor del Sistema

Modelo Ajax de aplicacin Web
Figura 2.5 Comparativa modelo clsico y modelo Ajax
La comunidad de desarrolladores Web, desarrollo una gama de tcnicas de scripting remoto para conseguir los mismos resultados en diferentes navegadores. Los primeros ejemplos incluyen la biblioteca JSRS en el ao 2000, la introduccin a la tcnica imagen/cookie en el mismo ao y la tcnica JavaScript bajo demanda (JavaScript on Demand) en 2002. 2.2.1.2 ASP ASP (Active Server Pages) es un lenguaje que permite intercalar cdigo ejecutable con el contenido HTML. Este cdigo es ejecutado en el servidor, fundindose con el cdigo HTML, de tal forma que al cliente no le sea posible ver ni el cdigo fuente de la pgina, ni siquiera distinguir qu texto HTML es fijo y cul depende de la programacin. Esta tecnologa, desarrollada por Microsoft, permite generar pginas dinmicamente. Intenta ser una solucin para un modelo de programacin rpida ya que "programar en ASP es como programar en Visual Basic y C. Lo interesante de este modelo tecnolgico es poder utilizar diversos componentes ya desarrollados como algunos controles ActiveX as como componentes del lado del servidor 20
La ltima versin de ASP es ASP 3.0, en la que hay siete objetos integrados disponibles para el programador: Application, ASPError, Request, Response, Server, Session y ObjectContext. Cada objeto tiene un grupo de funcionalidades frecuentemente usadas y tiles para crear pginas Web dinmicas. Pero desde 2002, ASP est siendo reemplazado por ASP. NET, que entre otras cosas, reemplaza los lenguajes interpretados como VBScript o JScript por lenguajes compilados a cdigo intermedio (llamado MSIL o Microsoft Intermediate Language) como Visual Basic .NET, C#, o cualquier otro lenguaje que soporte la plataforma .NET.
Pgina Oficial ltima versin Fecha ltima versin: Sistemas Distribuidos: Modo de Ejecutarse: Entorno de Programacin: Estilo de Programacin: Extensin de archivo Licencia desarrollo abandonado 3.0 2002-01-01 Servidor Compilado Textual O. Objetos .asp EULAs
Tabla 2.1 Metadatos ASP
2.2.1.3 HTML HTML (HyperText Mark-Up Language es el lenguaje de marcas de texto utilizado normalmente en la www, cuya funcin es preparar documentos aplicando etiquetas de formato, las que indican cmo se presenta el documento y cmo se vincula a otros. Tambin es usado para la lectura de documentos en Internet desde diferentes equipos gracias al protocolo HTTP, que permite a los usuarios acceder, de forma remota, a documentos almacenados en una direccin especfica de la red, denominada direccin URL. El trmino HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas. Es importante comprender que el lenguaje HTML es un estndar, compuesto por recomendaciones publicadas por un consorcio internacional: el World Wide Web Consortium (W3C). Las especificaciones oficiales de HTML describen las "instrucciones" del lenguaje, es decir, cmo las interpretan los programas informticos. Esto permite visualizar pginas Web independientemente del sistema operativo o la arquitectura de la mquina del usuario. Sin embargo, aunque las especificaciones son muy detalladas, hay cierto margen para la interpretacin por parte del navegador y esta es 21
la razn por la cual la misma pgina puede aparecer de modo diferente en un navegador u otro. HTML Es un metalenguaje heredado del SGML basado en etiquetas (tags) que tiene como principal virtud, la de poder ser implementado por otros lenguajes como JavaScript o Visual Basic Script que amplan y mejoran su capacidad original. El cdigo HTML utiliza el cdigo ASCII puro que puede teclearse en cualquier editor bsico para posteriormente ser interpretado secuencialmente por un navegador que visualiza el resultado en pantalla. Este lenguaje consta de varios componentes; los elementos y sus atributos, tipos de datos, y la declaracin de tipo de documento. Los elementos son la estructura bsica de HTML. Los elementos tienen dos propiedades bsicas: atributos y contenido. Un elemento generalmente tiene una etiqueta de inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej. </nombre-deelemento>), la cual es opcional para algunos elementos. Las etiquetas de comienzo, suelen incluir atributos especficos, que definen el comportamiento, o indican propiedades adicionales de dichos elementos. HTML 5 HTML 5 (HyperText Markup Language, versin 5) es la quinta revisin del lenguaje bsico de la World Wide Web, HTML. HTML 5 especifica dos variantes de sintaxis para HTML: un clsico 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). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.
Figura 2.6 Estructura HTML 4
22
HTML 5 introduce un conjunto de nuevos elementos que hacen que sea mucho ms fcil estructurar las pginas. La mayora de las pginas HTML 4 incluye una variedad de estructuras comunes, como encabezados, pies de pgina y columnas, que se marcan con elementos div, dando a cada uno un nmero de identificacin descriptiva o de clase. El uso de div-elementos es porque las versiones actuales de HTML 4 carecen de los necesarios para la descripcin semntica de estas partes, ms concretamente. HTML 5 soluciona esta cuestin mediante la introduccin de nuevos elementos para la representacin de cada una de estas secciones.
Figura 2.7 Estructura HTML5
En HTML5 hay varios elementos que sirven para estructurar mejor una pgina Web, estableciendo qu es cada seccin, y reemplazando en muchas ocasiones el elemento div. Con este extra de semntica, es mucho ms coherente y fcil de entender por otras personas. Y lo que es ms importante, trivial de entender para una mquina, dndole ms importancia a unas secciones. Estos son los elementos: section representa una seccin general dentro de un documento o aplicacin, como un captulo de un libro. Puede contener subsecciones e ir acompaado de h1-h6 para estructurar mejor la pgina. article representa un contenido independiente en un documento, el caso ms claro son las noticias de un peridico online o las entradas de un blog. As, dentro de la portada podremos tener varios artculos demarcados semnticamente, lo que facilita que una herramienta puede extraerlos. aside se usa para representar un contenido que est muy poco relacionado con el resto de la pgina, como una barra lateral, esencial para delimitar el contenido importante del contenido de apoyo. 23
header representa la cabecera de una seccin, otorgndole ms importancia que al resto del contenido. footer representa el pi de una seccin, con informacin acerca de la pgina, poco relacionada con el tema del contenido, como el autor, el copyright o el ao. nav representa una seccin dedicada a la navegacin del sitio.
Tambin mejora los datos obtenidos de los formularios, ampliando los tipos del elemento input (PIMENTEL, 2009): datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora. number para que el usuario indique un nmero. range para indicar un rango entre dos nmeros. email para indicar un correo electrnico. url para indicar una direccin Web. search para indicar una bsqueda. color para indicar un color.
Otros elementos que introduce esta nueva versin son: audio y video sirven para incrustar un contenido multimedia de sonido o de vdeo, respectivamente, que permite reproducir/controlar vdeos y audios sin necesidad de plugins como el de Flash. Se tratan de manera totalmente nativa como cualquier otro elemento, por ejemplo se pueden incluir enlaces o imgenes dentro de un vdeo. embed sirve para contenido incrustado pero no nativo, sino ejecutado por plugins como el de Flash. canvas es un elemento complejo que permite generar grficos, dibujando elementos dentro de l. Es un elemento muy potente, que permitir realizar aplicaciones Web espectaculares. dialog permite escribir conversaciones, por ejemplo, para transcripciones de chat. figure se plantea para asociar un contenido multimedia (una foto, un vdeo, etc.) a un ttulo o leyenda. mark representa un texto resaltado, por ejemplo para resaltar una bsqueda. meter representa una medida, como el nmero de KB.
24
progress representa el estado de una tarea, y se puede usar por ejemplo al subir un documento o al realizar varias tareas pesadas. Esto permitir barras de tareas personalizadas. time representa una fecha o una hora. command representa un comando que el usuario puede ejecutar en su navegador. output representa una salida de un programa, probablemente ejecutado directamente en el navegador, como una calculadora. datagrid representa datos de manera interactiva y permite trabajar dinmicamente con informacin y cambiar la pgina respecto a esa informacin
El almacenamiento en local, es una nueva funcionalidad para este estndar, que permite el almacenamiento de datos estructurados en el lado del cliente, de forma parecida a como se ha venido produciendo con el uso de las cookies, pero intentando eliminar las limitaciones que venan impuestas con el uso de las mismas. Los datos son almacenados mediante un listado de pares clave/valor, pudiendo utilizar bien SessionStorage, para almacenar informacin durante la sesin de la pgina, o bien localStorage para el almacenamiento compartido entre mltiples pginas y sesiones, limitndose al mbito del dominio.
Pgina Oficial ltima versin Fecha ltima versin: Sistemas Distribuidos: Modo de Ejecutarse: Entorno de Programacin: Estilo de Programacin: Extensin de archivo Licencia http://www.w3.org 5.0 Estndar en desarrollo Cliente interpretado Textual Declarativo
.html, .htm
libre
Tabla 2.2 Metadatos HTML
2.2.1.4 CSS CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentacin de los documentos electrnicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentacin, imprescindible para crear pginas Web complejas. 25
Separar la definicin de los contenidos y la definicin de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (tambin llamados "documentos semnticos"). Adems, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes. Al crear una pgina Web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos. Una vez creados estos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento. CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una pgina Web: Una hoja de estilo externa, es una hoja de estilo que est almacenada en un archivo diferente al archivo donde se almacena el cdigo HTML de la pgina Web. Esta es la manera de programar ms potente, porque separa completamente las reglas de formateo para la pgina HTML de la estructura bsica de la pgina: Una hoja de estilo interna, que es una hoja de estilo que est incrustada dentro de un documento HTML. De esta manera se obtiene el beneficio de separar la informacin del estilo del cdigo HTML. Un estilo en lnea (online) es un mtodo para insertar el lenguaje de estilo de pgina directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripcin del formateo dentro del documento de la pgina Web, a nivel de cdigo, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programacin de la pgina.
CSS 3 El objetivo inicial de CSS, separar el contenido de la forma, se cumpli ya con las primeras especificaciones del lenguaje, que ofrecan muchas utilidades para aplicar estilos a las Webs, pero no cubran todas las necesidades de los desarrolladores, que usaban trucos diversos para conseguir efectos tan comunes o tan deseados como los bordes redondeados o el sombreado de elementos en la pgina. Lo peor de esos trucos es que muchas veces implica alterar el contenido de la pgina para incorporar nuevas etiquetas HTML que permitan aplicar estilos de una manera ms elaborada. Dada la necesidad de cambiar el contenido, para alterar al diseo y hacer cosas que CSS no permita, se estaba dando al traste con alguno de los objetivos para los que CSS fue creado, que era el separar por completo el contenido de la forma.
26
CSS 1 ya signific un avance considerable a la hora de disear pginas Web, aportando mucho mayor control de los elementos de la pgina. CSS 2 incorpor algunas novedades interesantes, que hoy ya utilizamos habitualmente, pero CSS 3 todava avanza un poco ms en la direccin, de aportar ms control sobre los elementos de la pgina, siendo la novedad ms importante, la incorporacin de nuevos mecanismos para mantener un mayor control sobre el estilo con el que se muestran los elementos de las pginas, sin tener que recurrir a trucos o hacks, que complicaban el cdigo de las Web. He aqu una lista de las principales propiedades que son novedad en CSS3. Bordes o border-color o border-image o border-radius o box-shadow Fondos o background-origin o background-clip o background-size o capas con mltiples imgenes de fondo Color o colores HSL o colores HSLA o colores RGBA o Opacidad Texto o text-shadow o text-overflow o Rotura de palabras largas Interfaz o box-sizing o resize o outline o nav-top, nav-right, nav-bottom, nav-left Selectores o Selectores por atributos Modelo de caja bsico o overflow-x, overflow-y Otros o Creacin de mltiples columnas de texto 27
o Propiedades orientadas a discurso o lectura automtica de pginas Web o Web Fonts

Pgina Oficial ltima versin Fecha ltima versin: Sistemas Distribuidos: Modo de Ejecutarse: Entorno de Programacin: Estilo de Programacin: Extensin de archivo Licencia http://www.w3.org 3 Estndar en desarrollo Cliente interpretado Textual Declarativo .css libre
Tabla 2.3 Metadatos CSS
2.2.1.5 XML Es un metalenguaje extensible de etiquetas desarrollado por W3C. Es una simplificacin y adaptacin del SGML y permite definir la gramtica de lenguajes especficos. XML (eXtensible Markup Language) fue considerado en su origen el hermano mayor de HTML. Como indica su nombre, XML puede utilizarse para extender HTML e incluso definir nuevos lenguajes, pero su funcin principal es describir datos y no mostrarlos como es el caso de HTML. XML es una tecnologa sencilla que tiene a su alrededor otras que la complementan y la hacen mucho ms grande y con unas posibilidades mucho mayores. Tiene un papel muy importante en la actualidad ya que permite la compatibilidad entre sistemas para compartir la informacin de una manera segura, fiable y fcil. Las tecnologas XML son un conjunto de mdulos que ofrecen servicios tiles a las demandas ms frecuentes por parte de los usuarios. XML sirve para estructurar, almacenar e intercambiar informacin. Entre las tecnologas XML disponibles se pueden destacar: XSL: Lenguaje Extensible de Hojas de Estilo, cuyo objetivo principal es mostrar cmo debera estar estructurado el contenido, cmo debera ser diseado el contenido de origen y cmo debera ser paginado en un medio de presentacin como puede ser una ventana de un navegador Web o un dispositivo mvil, o un conjunto de pginas de un catlogo, informe o libro. 28
XPath: Lenguaje de Rutas XML, es un lenguaje para acceder a partes de un documento XML. XLink: Lenguaje de Enlace XML, es un lenguaje que permite insertar elementos en documentos XML para crear enlaces entre recursos XML. XPointer: Lenguaje de Direccionamiento XML, es un lenguaje que permite el acceso a la estructura interna de un documento XML, esto es, a sus elementos, atributos y contenido. XQL: Lenguaje de Consulta XML, es un lenguaje que facilita la extraccin de datos desde documentos XML. Ofrece la posibilidad de realizar consultas flexibles para extraer datos de documentos XML en la Web.
Caractersticas Extensible: Dentro de XML se pueden definir un conjunto ilimitado de etiquetas. Mientras que las etiquetas de HTML pueden utilizarse para desplegar una palabra en negrita o itlicas, el XML proporciona un marco de trabajo para etiquetado de datos estructurados. Representacin estructural de los datos: El XML proporciona una representacin estructural de los datos que demostrando ser ampliamente implementable y fcil de distribuir. XML es un subconjunto del SGML que est optimizado para su transmisin por Web. Esta interoperabilidad resultante est dando el impuso de inicio a una nueva generacin de aplicaciones de Web para comercio electrnico. Una vez que los datos estn en el escritorio del cliente, pueden ser manipulados, editados, y presentados de una gran variedad de maneras, sin necesidad de regresar al servidor. Los datos son separados de la presentacin y el proceso: El poder y la belleza del XML es que mantiene la separacin entre la interfaz de usuario y los datos estructurado. Para presentar los datos en un navegador XML, este utiliza hojas de estilo tales como el Lenguaje de Estilo Extensible (XSL) y las Hojas de Estilo en Cascada (CSS). El XML separa los datos de la presentacin y el proceso, permitiendo desplegar y procesar los datos tal como usted desee, al aplicar diferentes hojas de estilo y aplicaciones. Esta separacin de datos de la presentacin permite una integracin de datos perfecta de fuentes diversas. Conversin de los datos XML en autodescriptivos: Los datos codificados en XML son autodescriptivos, pues las etiquetas descriptivas estn entremezcladas con los datos. El formato abierto y flexible utilizado por XML permite su uso en cualquier lugar donde sea necesario intercambiar y transferir informacin.
29
Pgina Oficial ltima versin Fecha ltima versin: Sistemas Distribuidos: Modo de Ejecutarse: Entorno de Programacin: Estilo de Programacin: Extensin de archivo Licencia
http://www.w3.org 1.1 2009-12-08 Cliente interpretado Textual Declarativo
.xml
libre
Tabla 2.4 Metadatos XML
2.2.1.6 JavaScript JavaScript es un lenguaje de programacin utilizado para crear pequeos programas encargados de realizar acciones dentro del cdigo de una pgina Web, como crear efectos especiales en las pginas y definir interactividades con el usuario. El navegador del cliente es el encargado de interpretar las instrucciones JavaScript y ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso, y tal vez el nico, con que cuenta este lenguaje es el propio navegador. Entre las acciones tpicas que se pueden realizar en JavaScript tenemos dos vertientes. Por un lado los efectos especiales sobre pginas Web, para crear contenidos dinmicos y elementos de la pgina que tengan movimiento, cambien de color o cualquier otro dinamismo. Por el otro, JavaScript nos permite ejecutar instrucciones como respuesta a las acciones del usuario, con lo que podemos crear pginas interactivas. JavaScript es un lenguaje con muchas posibilidades, que permite la programacin de pequeos scripts, pero tambin de programas ms grandes, orientados a objetos, con funciones, estructuras de datos complejas, etc. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador Web permitiendo mejoras en la interfaz de usuario y pginas Web dinmicas, aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la Web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es tambin significativo.
30
JavaScript se dise con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de programacin Java. Sin embargo Java y JavaScript no estn relacionados y tienen semnticas y propsitos diferentes. Todos los navegadores modernos interpretan el cdigo JavaScript integrado en las pginas Web. Para interactuar con una pgina Web se provee al lenguaje JavaScript de una implementacin del Document Object Model (DOM). Tradicionalmente se utilizaba en pginas Web HTML para realizar operaciones y nicamente en el marco de la aplicacin cliente, sin acceso a funciones del servidor. JavaScript se interpreta en el agente de usuario, al mismo tiempo que las sentencias van descargndose junto con el cdigo HTML. Comienzos del JavaScript Conforme fue creciendo el Web y sus distintos usos se fueron complicando las pginas y las acciones que se queran realizar a travs de ellas. Al poco tiempo qued patente que HTML no era suficiente para realizar todas las acciones que se pueden llegar a necesitar en una pgina Web. En otras palabras, HTML se haba quedado corto ya que slo sirve para presentar el texto de una pgina, definir su estilo y poco ms. Al complicarse los sitios Web, una de las primeras necesidades fue que las pginas respondiesen a algunas acciones del usuario, para desarrollar pequeas funcionalidades ms all de los propios enlaces. El primer ayudante para cubrir las necesidades que estaban surgiendo fue Java, que es un lenguaje de propsito general, pero que haba creado una manera de incrustar programas en pginas Web. A travs de la tecnologa de los Applets, se poda crear pequeos programas que se ejecutaban en el navegador dentro de las propias pginas Web, pero que tenan posibilidades similares a los programas de propsito general. La programacin de Applets fue un gran avance y Netscape, por aquel entonces el navegador ms popular, haba roto la primera barrera del HTML al hacer posible la programacin dentro de las pginas Web. No cabe duda que la aparicin de los Applets supuso un gran avance en la historia del Web, pero no ha sido una tecnologa definitiva y muchas otras han seguido implementando el camino que comenz con ellos. Netscape, despus de hacer sus navegadores compatibles con los Applets, comenz a desarrollar un lenguaje de programacin al que llam LiveScript que permitiese crear pequeos programas en las pginas y que fuese mucho ms sencillo de utilizar que Java. De modo que el primer JavaScript se llam LiveScript, pero no dur mucho ese nombre, pues antes de lanzar la primera versin del producto se forj una alianza con Sun Microsystems, creador de Java, para desarrollar en conjunto ese nuevo lenguaje. La alianza hizo que JavaScript se diseara como un hermano pequeo de Java, solamente til dentro de las pginas Web y mucho ms fcil de utilizar, de modo que 31
cualquier persona, sin conocimientos de programacin pudiese adentrase en el lenguaje y utilizarlo a sus anchas. Adems, para programar JavaScript no es necesario un kit de desarrollo, ni compilar los scripts, ni realizarlos en ficheros externos al cdigo HTML.
Pgina Oficial Sistemas Distribuidos: Modo de Ejecutarse: Entorno de Programacin: Estilo de Programacin: Extensin de archivo Licencia http://www.java.com Cliente Interpretado Script O. Objetos .js Libre
Tabla 2.5 Metadatos de JavaScript
2.2.1.7 PHP PHP es el lenguaje de lado servidor ms extendido en la Web. Nacido en 1994, se trata de un lenguaje de creacin relativamente reciente, que ha tenido una gran aceptacin en la comunidad de desarrolladores, debido a la potencia y simplicidad que lo caracterizan, as como al soporte generalizado en la mayora de los servidores de hosting. PHP nos permite embeber pequeos fragmentos de cdigo dentro de la pgina HTML y realizar determinadas acciones de una forma fcil y eficaz. Por otra parte, y es aqu donde reside su mayor inters con respecto a los lenguajes pensados para los CGI, PHP ofrece un sinfn de funciones para la explotacin de bases de datos de una manera llana, sin complicaciones. Existen principalmente tres campos en los que se usan scripts en PHP. Scripts del lado-servidor. Este es el campo ms tradicional y el principal foco de trabajo. Se necesitan tres cosas para que esto funcione. El intrprete PHP (CGI mdulo), un servidor Web y un navegador. Es necesario hacer funcionar el servidor, con PHP instalado. El resultado del programa PHP se puede obtener a travs del navegador, conectndose con el servidor Web. Consultar la seccin Instrucciones de instalacin para ms informacin. Scripts en la lnea de comandos. Puede crear un script PHP y correrlo sin necesidad de un servidor Web o navegador. Solamente necesita el intrprete PHP para usarlo de esta manera. Este tipo de uso es ideal para scripts ejecutados regularmente desde cron (en *nix o Linux) o el Planificador de tareas (en Windows). 32
Escribir aplicaciones de interfaz grfica. Probablemente PHP no sea el lenguaje ms apropiado para escribir aplicaciones grficas, pero si se quiere utilizar algunas caractersticas avanzadas en programas clientes, se puede utilizar PHP-GTK para escribir dichos programas. Tambin es posible escribir aplicaciones independientes de una plataforma
PHP puede ser utilizado en cualquiera de los principales sistemas operativos del mercado y soporta la mayora de servidores Web de hoy en da. Adems, tiene la posibilidad de utilizar programacin procedimental, programacin orientada a objetos (POO), o una mezcla de ambas. PHP no se encuentra limitado a resultados en HTML. Entre las habilidades de PHP se incluyen: creacin de imgenes, archivos PDF e incluso pelculas Flash, presentar otros resultados, como XHTML y cualquier otro tipo de ficheros XML. PHP puede autogenerar stos archivos y almacenarlos en el sistema de archivos en vez de presentarlos en la pantalla, creando un cach en el lado-servidor para contenido dinmico. Una de las caractersticas ms potentes y destacables de PHP es su soporte para una gran cantidad de bases de datos. Escribir una pgina Web con acceso habilitado a una base de datos es increblemente simple utilizando una de las extensiones especficas, o utilizar una capa de abstraccin como PDO, o conectarse a cualquier base de datos que soporte el estndar de Conexin Abierta a Bases de Datos por medio de la extensin ODBC. Cuenta con soporte para comunicarse con otros servicios usando protocolos tales como POP3, LDAP, NNTP, IMAP, SNMP, HTTP, COM y muchos otros. Tambin se pueden crear sockets puros e interactuar usando cualquier otro protocolo. PHP soporta WDDX para el intercambio de datos entre lenguajes de programacin en Web. Y hablando de interconexin, puede utilizar objetos Java de forma transparente como objetos de PHP. Tiene tiles caractersticas de procesamiento de texto, las cuales incluyen las Expresiones Regulares Compatibles de Perl (PCRE), muchas extensiones, y herramientas para el acceso y anlisis de documentos XML. Historia (Wikimedia, 2011) Fue originalmente diseado en Perl, con base en la escritura de un grupo de CGI binarios escritos en el lenguaje C por el programador dans-canadiense Rasmus Lerdorf en el ao 1994 para mostrar su currculum vtae y guardar ciertos datos, como la cantidad de trfico que su pgina Web reciba. El 8 de junio de 1995 fue publicado "Personal Home Page Tools" despus de que Lerdorf lo combinara con su propio Form Interpreter para crear PHP/FI.
33
PHP 3: Dos programadores israeles del Technion, Andi Gutmans y Zeev Suraski, reescribieron el analizador sintctico en 1997 y crearon la base del PHP3, cambiando el nombre del lenguaje a la forma actual. Inmediatamente comenzaron experimentaciones pblicas de PHP3 y fue publicado oficialmente en junio de 1998. En 1999, Suraski y Gutmans reescribieron el cdigo de PHP, produciendo lo que hoy se conoce como motor Zend. PHP 4: En mayo de 2000 PHP 4 fue lanzado bajo el poder del motor Zend Engine 1.0. El da 13 de julio de 2007 se anunci la suspensin del soporte y desarrollo de la versin 4 de PHP, a pesar de lo anunciado se liber unas nuevas versiones con mejoras de seguridad. PHP 5: El 13 de julio de 2004, fue lanzado PHP 5, utilizando el motor Zend Engine 2.0. La versin ms reciente de PHP es la 5.3.6 (17 de marzo de 2011), que incluye todas las ventajas que provee el nuevo Zend Engine 2: o Mejor soporte para la programacin orientada a objetos. o Mejoras de rendimiento. o Iteradores de datos. o Mejor soporte para MySQL con extensin completamente reescrita. o Mejor soporte a XML (XPath, DOM, etc.). o Soporte nativo para SQLite. o Soporte integrado para SOAP. o Manejo de excepciones. o Mejoras con la implementacin con Oracle.
Pgina Oficial ltima versin Fecha ltima versin: Sistemas Distribuidos: Modo de Ejecutarse: Entorno de Programacin: Estilo de Programacin: Extensin de archivo Licencia http://www.php.net 5.3.6 2011-03-17 Servidor Interpretado Script O. Objetos
.php
PHP License 3.01
Tabla 2.6 Metadatos de PHP
PHP 6: Est previsto el lanzamiento en breve de la rama 6 de PHP. Las diferencias con la anterior versin son: o Compatible con Unicode o Limpieza de funcionalidades obsoletas 34
o PECL y eliminacin de soporte ereg o Mejoras en orientacin a objetos o Inclusin en el ncleo de xmlReader y xmlWriter as como Fileinfo o return por referencia devuelve un error Se retira el soporte de las bibliotecas FreeType1 y GD1 2.2.1.8 Ruby Ruby es un lenguaje de programacin interpretado, reflexivo y orientado a objetos, creado por el programador japons Yukihiro "Matz" Matsumoto, quien comenz a trabajar en Ruby en 1993, y lo present pblicamente en 1995. Combina una sintaxis inspirada en Python y Perl con caractersticas de programacin orientada a objetos similares a Smalltalk. Comparte tambin funcionalidad con otros lenguajes de programacin como Lisp, Lua, Dylan y CLU. Es un lenguaje de programacin interpretado en una sola pasada y su implementacin oficial es distribuida bajo una licencia de software libre Ruby es simple en apariencia, pero complejo por dentro, como el cuerpo humano (Matsumoto, 2000) Desde su liberacin pblica en 1995, Ruby ha atrado devotos desarrolladores de todo el mundo. En el 2006, Ruby alcanz reconocimiento masivo, formndose grupos de usuarios activos y llenando las conferencias relacionadas a Ruby. Inicialmente, Matz busc en otros lenguajes para encontrar la sintaxis ideal. Recordando su bsqueda, dijo, quera un lenguaje que fuera ms poderoso que Perl, y ms orientado a objetos que Python (Matsumoto, 2009) Ruby es un lenguaje orientado objetos: todos los tipos de datos son un objeto, incluidas las clases y tipos que otros lenguajes definen como primitivas, (como enteros, booleanos, y "nil"). Toda funcin es un mtodo. Las variables siempre son referencias a objetos, no los objetos mismos. Ruby soporta herencia con enlace dinmico, mixins y mtodos singleton. A pesar de que Ruby no soporta herencia mltiple, las clases pueden importar mdulos como mixins. La sintaxis procedural est soportada, pero todos los mtodos definidos fuera del mbito de un objeto son realmente mtodos de la clase Object. Como esta clase es padre de todas las dems, los cambios son visibles para todas las clases y objetos. Ruby ha sido descrito como un lenguaje de programacin multiparadigma: permite programacin procedural (definiendo funciones y variables fuera de las clases hacindolas parte del objeto raz Object), con orientacin a objetos, (todo es un objeto) o funcionalmente (tiene funciones annimas, clausuras o closures, y continuations; todas las sentencias tiene valores, y las funciones devuelven la ltima evaluacin). Soporta 35
introspeccin, reflexin y metaprogramacin, adems de soporte para hilos de ejecucin gestionados por el intrprete. Ruby tiene tipado dinmico, y soporta polimorfismo de tipos (permite tratar a subclases utilizando la interfaz de la clase padre). Ruby no requiere de polimorfismo de funciones (sobrecarga de funciones) al no ser fuertemente tipado (los parmetros pasados a un mtodo pueden ser de distinta clase en cada llamada a dicho mtodo).
Pgina Oficial ltima versin Fecha ltima versin: Sistemas Distribuidos: Modo de Ejecutarse: Entorno de Programacin: Estilo de Programacin: Extensin de archivo Licencia http://www.ruby-lang.org 1.9.2 2010-12-25 Servidor Interpretado textual O. objetos .rb, .rbw GPL
Tabla 2.7 Metadatos Ruby
2.2.1.9 JSP JavaServer Pages (JSP) es una tecnologa Java que permite generar contenido dinmico para realizar pginas Web, en forma de documentos HTML, XML o de otro tipo. Esta tecnologa es un desarrollo de la compaa Sun Microsystems. Las JSP's permiten la utilizacin de cdigo Java mediante scripts. Adems, es posible utilizar algunas acciones JSP predefinidas mediante etiquetas. Estas etiquetas pueden ser enriquecidas mediante la utilizacin de Bibliotecas de Etiquetas (TagLibs o Tag Libraries) externas e incluso personalizadas. Con JSP se pueden crear aplicaciones Web que se ejecuten en variados servidores Web, de mltiples plataformas, ya que Java es en esencia un lenguaje multiplataforma. En JSP creamos pginas de manera parecida a como se crean en ASP o PHP. Generamos archivos con extensin .jsp que incluyen, dentro de la estructura de etiquetas HTML, las sentencias Java a ejecutar en el servidor. Antes de que sean funcionales los archivos, el motor JSP lleva a cabo una fase de traduccin de esa pgina en un servlet, implementado en un archivo class (Byte codes de Java). Esta fase de traduccin se lleva a cabo habitualmente cuando se recibe la primera solicitud de la pgina .jsp, aunque existe la opcin de pre-compilar en cdigo para evitar ese tiempo de espera la primera vez que un cliente solicita la pgina. 36
Pgina Oficial ltima versin Fecha ltima versin: Sistemas Distribuidos: Modo de Ejecutarse: Entorno de Programacin: Estilo de Programacin: Extensin de archivo Licencia
http://java.sun.com/products/jsp/ 2.1 2009-05-17 servidor compilado Script O. objetos .jsp Libre
Tabla 2.8 Metadatos de JSP
2.2.1.10 ColdFusion Coldfusion (Adobe ColdFusion) es un servidor de aplicaciones y un lenguaje de programacin usado para desarrollar aplicaciones de Internet, generalmente sitios Web generados dinmicamente. En este aspecto, es un lenguaje similar a JSP, ASP o PHP. ColdFusion es una herramienta que corre en forma concurrente con la mayora de los servidores Web de Windows, Mac OS X, Linux y Solaris. El servidor de aplicaciones Web de ColdFusion trabaja con el servidor HTTP para procesar peticiones de pginas Web. Cada vez que se solicita una pgina de ColdFusion, el servidor de aplicaciones ejecuta el guin o programa contenido en la pgina. ColdFusion Markup Language (CFML) es un lenguaje basado en etiquetas similar a HTML utiliza etiquetas especiales y funciones. Con CFML se pueden enriquecer los ficheros estndar HTML con comandos de bases de datos, operadores condicionales y funciones en formato de alto nivel con la finalidad de elaborar aplicaciones Web. CFML es similar a HTML incluyendo etiquetas de principio y final y encerrando cada etiqueta entre parntesis angulados. Todas las etiquetas finales van precedidas de la barra inclinada (/) y todos los nombres de etiquetas se preceden con cf; por ejemplo: <cfstartnombreetiqueta></cffinnombreetiqueta> Las aplicaciones ColdFusion pueden interactuar con cualquier base de datos que soporte tecnologa basada en el driver JDBC. Sin embargo, ColdFusion no est limitado a orgenes de datos JDBC, ya que es posible tambin interactuar con orgenes de datos con conectividad ODBC (Open Database Connectivity). Es posible realizar las aplicaciones ColdFusion con NotePad o cualquier editor HTML, pero Adobe recomienda que se construyan aplicaciones utilizando Adobe 37
Dreamweaver, que ofrece caractersticas y asistentes que mejoran el desarrollo en ColdFusion.

Pgina Oficial ltima versin Fecha ltima versin: Sistemas Distribuidos: Modo de Ejecutarse: Entorno de Programacin: Estilo de Programacin: Extensin de archivo Licencia http://www.adobe.com/products/coldfusion/ 9 2010-07-13 Servidor Compilado Script O. Objetos .cfm EULAs
Tabla 2.9 Metadatos ColdFusion
2.2.2 Herramientas Las fases de un desarrollo Web, as como los lenguajes de programacin usados, son muy extensos y variados, y por ello necesitamos herramientas especficas para cada una de ellas. Pero, existe una gran cantidad de herramientas orientadas a hacer ms eficiente la gestin de proyectos Web. Para poder elegir la herramienta ms idnea para un desarrollo, primero se debe realizar una buena clasificacin de las mismas. Sistemas Operativos Fase de desarrollo
Sistema Operativo
Para elegir una herramienta de desarrollo Web, lo primero que necesitamos es un sistema operativo, teniendo en cuenta las aplicaciones de las que dispone el sistema operativo y sus costes. Otra caracterstica a tener en cuenta es las facilidades que el Sistema Operativo aporta al desarrollador. En este sentido GNU/Linux fue creado por desarrolladores, y para desarrolladores; y por lo tanto en GNU/Linux podemos encontrar infinidad de herramientas que nos harn la vida mucho ms fcil, que adems son libres. Sistemas Operativos ms populares (Net Applications , 2011): Windows 38
MAC IOS
LINUX Estos son los sistemas operativos ms populares en lo que poder desarrollar aplicaciones, pero tambin tenemos que tener en cuenta los sistemas operativos para los que desarrolla aplicaciones dicha herramienta, teniendo en especial consideracin los S.O de los dispositivos mviles. IOS Android Blackberry Symbian
Fase de desarrollo
Otra caracterstica para poder elegir una herramienta es identificar las fases del proceso que forman el ciclo de vida de un desarrollo Web Diseo Maquetacin HTML/CSS Programacin Cliente Programacin Servidor Depuracin Pruebas en local Subir ficheros al host Pruebas en hosting
Dentro de las fases de programacin, podemos distinguir dos grandes grupos de herramientas, Framework y CMS. Algunas de las caractersticas de utilizar un tipo o el otro son las siguientes:
Ventajas Framework (portal a medida) CMS Seguridad Extensibilidad Performance Alto nivel de Personalizacin Evolucin de la Empresa Integraciones Rpida Implementacin Bajo Coste
Inconvenientes
Tiempo Costes
Seguridad Extensibilidad Performance
39
En resumen, si la aplicacin es bsica y se necesita los ms rpido posible, lo mejor es usar un CMS. En cambio, si la solucin que se necesita, debe de crecer, y contener seguridad, lo mejor es un desarrollo a medida utilizando una herramienta Framework. Dentro de todos los lenguajes para el desarrollo de aplicaciones Web, detallare los ms relevantes y utilizados actualmente para la creacin de aplicaciones Web. 2.2.2.1 ASP.Net ASP.NET es un framework para aplicaciones Web desarrollado y comercializado por Microsoft. Es usado por los programadores para construir sitios Web dinmicos, aplicaciones Web y servicios Web XML. Apareci en enero de 2002 con la versin 1.0 del .NET Framework, y es la sucesora de la tecnologa Active Server Pages (ASP). Este modelo de desarrollo forma parte de .NET Framework y al codificar las aplicaciones ASP.NET tiene acceso a las clases en .NET Framework. El cdigo de las aplicaciones puede escribirse en cualquier lenguaje compatible con el CLR, entre ellos Microsoft Visual Basic y C#. Las pginas de ASP.NET, conocidas oficialmente como "Web forms" (formularios Web), son el principal medio de construccin para el desarrollo de aplicaciones Web. Los formularios Web estn contenidos en archivos con una extensin ASPX; estos archivos contienen el cdigo esttico y dinmico requerido por la pgina Web. ASP.NET slo funciona sobre el servidor de Microsoft IIS, lo que supone una desventaja respecto a otros lenguajes del lado de servidor, ejecutables sobre otros servidores ms populares como Apache.
Pgina Oficial ltima versin Fecha ltima versin: Licencia Sistema Operativo: Fase de Desarrollo: Tipo de Dispositivo: Tipo de Software: Estado: Lenguaje con l trabaja: http://www.asp.net/ 4.0.30319.1 2010-03-12 EULAs Windows Programacin servidor Multidispositivo framework Estable Todos los soportados por .Net
Tabla 2.10 Metadatos de ASP.Net
40
En la actualidad una aplicacin ASP.NET puede ejecutarse de dos formas distintas: Aplicaciones cliente/servidor: Estas aplicaciones estn tpicamente en formato de ejecutables compilados. Estos pueden integrar toda la riqueza de una interfaz de usuario, tal es el caso de las aplicaciones de desempeo y productividad, pero no se rene la lgica de negocio como un recurso que se pueda reutilizar. Aplicaciones que utilizan el navegador: Dichas aplicaciones estn caracterizadas por contar con una interfaz de Web rica y muy til. La interfaz grfica integra varias tecnologas, las cuales son el HTML, XHTML, scripting, etc.
2.2.2.2 BlackBerry WebWork Kit de Desarrollo de Software (SDK), para Tablet OS y telfonos inteligentes. Se trata de una plataforma creada sobre BB Widgets & Services para empujar apps en HTML5 y Open Source, que permite a los desarrolladores Web, construir aplicaciones para BlackBerry con todas las opciones posibles enteramente en HTML-5, CSS y JavaScript. Los desarrolladores podrn aprovechar sus conocimientos de HTML para crear aplicaciones Web integradas para smartphones BlackBerry que aprovechen las capacidades avanzadas a travs de APIs y servicios como hoy en da pueden hacer las BlackBerry Java applications Con esta nueva herramienta se consigue lograr la convergencia entre BlackBerry WebWorks para Tablet SDK OS y BlackBerry WebWorks SDK para Smartphones, una medida que busca aumentar el rendimiento de los SDK adaptndolos a las caractersticas API para que cualquier desarrollador pueda modificarlas y lograr nuevas aplicaciones para ambas plataformas.
Pgina Oficial ltima versin Fecha ltima versin: Licencia: Sistema Operativo: Fase de Desarrollo: Tipo de Dispositivo: Tipo de Software: Estado: Lenguaje con l trabaja: Programacin cliente Mvil / Blackberry framework estable JavaScript Tabla 2.11 Metadatos de Webwork http://us.blackberry.com/developers/browserdev/ 1 2010-10-18 EULA
41
2.2.2.3 Drupal Drupal es un sistema dinmico de gestin de contenido modular multipropsito y muy configurable que permite publicar artculos, imgenes, u otros archivos y servicios aadidos como foros, encuestas, votaciones, blogs y administracin de usuarios y permisos. Con licencia GNU/GPL, est escrito en PHP, desarrollado y mantenido por una la comunidad de usuarios. Destaca por la calidad de su cdigo y de las pginas generadas, el respeto de los estndares de la Web, y un nfasis especial en la usabilidad y consistencia de todo el sistema. Este se desarroll con la intencin de ofrecer una alternativa a los CMS ya existentes que combinara de la forma ms ptima posible las variables flexibilidad y configurabilidad, para que con l se pudieran construir gran variedad de sitios Web de la forma ms sencilla y rpida posible. El diseo de Drupal es especialmente idneo para construir y gestionar comunidades en Internet. No obstante, su flexibilidad y adaptabilidad, as como la gran cantidad de mdulos adicionales disponibles, hace que sea adecuado para realizar muchos tipos diferentes de sitio Web. En la actualidad Drupal es uno de los CMS ms potentes, y es reconocido por la calidad de su cdigo, la seguridad que ofrece, su fcil instalacin y configuracin, por la cantidad de funcionalidades disponibles para l, por la cantidad de temas visuales, la gran calidad de documentacin y la amplia comunidad que le da soporte. Prueba de su reconocimiento es el uso que hacen de l conocidas instituciones o compaas como: MTV, el Gobierno de Blgica, Discovery Magazine, Warner Brothers, New York Observer En Drupal Sites (superburo.com, 2005) se listan algunos de los muchos sitios Web realizados con Drupal.
Pgina Oficial ltima versin Fecha ltima versin: Licencia: Sistema Operativo: Fase de Desarrollo: Tipo de Dispositivo: Tipo de Software: Estado: Lenguaje con l trabaja: http://drupal.org/ 7.2 2011-05-25 GPL Multiplataforma Programacin-servidor Multidispositivo CMS Estable PHP
Tabla 2.12 Metadatos de Drupal
42
2.2.2.4 Flash Adobe Flash es la tecnologa ms comnmente utilizada en el Web que permite la creacin de animaciones vectoriales. Originalmente Flash no fue un desarrollo propio de Adobe, sino de una pequea empresa de desarrollo de nombre FutureWave Software y su nombre original fue FutureSplash Animator. En diciembre de 1996 Macromedia adquiere FutureWave Software, y con ello su programa de animacin vectorial que pasa a ser conocido como Flash 1.0. En 2005 Adobe compra Macromedia y junto con ella sus productos, entre ellos Flash, que pas a llamarse Adobe Flash. Adobe Flash utiliza grficos vectoriales y grficos rasterizados, sonido, cdigo de programa, flujo de vdeo y audio bidireccional. El inters del uso de grficos vectoriales es que stos permiten llevar a cabo animaciones de poco peso, es decir, que tardan poco tiempo en ser cargadas por el navegador. Existen dos tipos de grficos:
Los grficos vectoriales, en los cuales una imagen es representada a partir de lneas (o vectores) que poseen determinadas propiedades (color, grosor...). La calidad de este tipo de grficos no depende del zoom o del tipo de resolucin con el cual se est mirando el grfico, ya que por mucho que nos acerquemos, el grfico no se pixela, ya que el ordenador traza automticamente las lneas para ese nivel de acercamiento. Las imgenes en mapa de bits. Este tipo de grficos se asemejan a una especie de cuadrcula en la cual cada uno de los cuadrados (pxeles) muestra un color determinado. La informacin de estos grficos es guardada individualmente para cada pxel y es definida por las coordenadas y color de dicho pxel. Este tipo de grficos son dependientes de la variacin del tamao y resolucin, pudiendo perder calidad al modificar sucesivamente sus dimensiones.
Esta tecnologa se sirve de las posibilidades que ofrece el trabajar con grficos vectoriales, fcilmente redimensinales y alterables por medio de funciones, y un almacenamiento inteligente de las imgenes y sonidos empleados en sus animaciones por medio de bibliotecas, para optimizar el tamao de los archivos que contienen las animaciones. Esta optimizacin del espacio que ocupan las animaciones, combinada con la posibilidad de cargar la animacin al mismo tiempo que sta se muestra en el navegador, permite aportar elementos visuales que dan vida a una Web sin que para ello el tiempo de carga de la pgina se prolongue. Adems, Flash introduce en su entorno la posibilidad de interaccionar con el usuario. Para ello, Flash invoca un lenguaje de programacin llamado ActionScript. Este lenguaje orientado a objetos, con claras influencias de JavaScript, permite entre otras muchas cosas, gestionar el relleno de formularios, ejecutar distintas partes de una animacin en funcin de eventos producidos por el usuario, saltar a otras pginas, etc. 43
Pgina Oficial ltima versin Fecha ltima versin: Licencia Sistema Operativo: Fase de Desarrollo: Tipo de Dispositivo: Tipo de Software: Estado: Lenguaje con l trabaja:
http://www.adobe.com/es/products/flash 10.0 2008-11-08 EULAs Multiplataforma Diseo Multidispositivo Diseo Estable ActionScrip
Tabla 2.13 Metadatos de Flash
De este modo, Flash pone a nuestra disposicin una tecnologa pensada para aportar vistosidad a nuestra Web al mismo tiempo que nos permite interaccionar con nuestro visitante. Flash almacena sus archivos en varias extensiones. La extensin .fla contiene el programa fuente mientras que los archivos .swf contienen el grfico que ser mostrado en la aplicacin Web. 2.2.2.5 JQuery jQuery, presentada el 14 de enero de 2006 en el BarCamp NYC, es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el rbol DOM, manejar eventos, desarrollar animaciones y agregar interaccin con la tcnica AJAX a pginas Web. JQuery es software libre y de cdigo abierto, posee un doble licencia, la Licencia MIT y la Licencia Pblica General de GNU v2, permitiendo su uso en proyectos libres y privados. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requeriran de mucho ms cdigo, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio. Este framework de JavaScript, ofrece una infraestructura con la que tendremos mucha mayor facilidad para la creacin de aplicaciones complejas del lado del cliente, ofreciendo ayuda en la creacin de interfaces de usuario, efectos dinmicos, aplicaciones que hacen uso de Ajax, etc. Poniendo a disposicin una interfaz para programacin que nos permitir hacer cosas con el navegador que estemos seguros que funcionarn para todos los usuarios. 44
Core de jQuery El core de jQuery lo forman las funciones ms recurridas y que forman la base sobre la que se asienta cualquier cdigo en este framework JavaScript. Contiene una serie de clases y mtodos tiles para hacer tareas reiterativas, que vamos a necesitar en las aplicaciones. Integra desde funciones que sern tiles en cualquier script, por sencillo que sea, hasta funciones menos recurridas pero que nos facilitarn la vida a hora de hacer cdigo limpio, corto y reutilizable. Utilizaremos el Core para realizar cdigo con objetos, clases, datos, etc., pero realmente lo que ms haremos ser utilizar la funcin jQuery, que es el pilar fundamental sobre el que se basarn las aplicaciones.
Pgina Oficial ltima versin Fecha ltima versin: Licencia: Sistema Operativo: Fase de Desarrollo: Tipo de Dispositivo: Tipo de Software: Estado: Lenguaje con l trabaja: http://jquery.com/ 1.6.1 2011-05-12 GPL Multiplataforma Programacin cliente Multidispositivo Biblioteca Estable JavaScript
Tabla 2.14 Metadatos de JQuery
Core tiene las funciones clasificadas en diversos apartados: $(): Es la funcin principal de jQuery, que adems tiene diversas utilidades segn los parmetros que se le enven. Su utilidad principal es obtener elementos de la pgina. Accesorios de objetos: Es una gama de funciones de diversa y variada utilidad, que sirven de utilidad para hacer desarrollos con objetos, tales como iterar con cada uno de sus elementos, saber su tamao, longitud, el selector o contexto con el que se obtuvo, obtener todos sus elementos DOM que contenga, etc. Trabajo con datos: Unas funciones tiles para trabajar con datos y asociarlos a elementos, una forma de guardar informacin adicional a 45
elementos de la pgina. Tambin tiene diversas funciones para trabajar con colas y administrar la salida y entrada de sus elementos. Plugins: Funciones que permiten extender los elementos jQuery para incorporar nuevos mtodos, algo que se utiliza habitualmente a la hora de crear plugins para aadir funcionalidades a jQuery. Interoperabilidad: Funciones que permiten que jQuery no tenga problemas de compatibilidad con otras libreras JavaScript que tambin suelen utilizar la funcin dlar $().
2.2.2.6 Joomla! Joomla! es un Sistema de Gestin de Contenidos (CMS), de cdigo abierto, que permite construir sitios Web y otras aplicaciones, de manera sencilla. Surge del ncleo de Mambo, el 17 de agosto de 2005, de mano de la compaa Miro de Australia. Por su diseo, potencia, flexibilidad y por sus enormes posibilidades de ampliacin se est convirtiendo en el sistema de publicacin preferido por millones de Webmasters en todo el mundo para desarrollar su portal Web. Con el que podemos crear en poco tiempo un completo portal Web en la que publicar noticias, blogs, directorios de enlaces o documentos para descargar sin necesidad de conocimientos tcnicos especiales o de complejos lenguajes de programacin. A partir de una plantilla y de unos contenidos de ejemplo iniciales permite desarrollar un vistoso y completo portal aadiendo los contenidos, mens y elementos visuales deseados a travs de un entorno Web y sin necesidad de programas auxiliares ni de conocimientos especiales de diseo o de programacin ya que todas estas operaciones de edicin y administracin se realizan a travs de cualquier navegador. Joomla! se basa en Mambo, otro CMS iniciado por la empresa australiana Miro, que tena adems la propiedad de la marca. El proyecto Joomla surge en 2005 cuando Miro decidi crear una Fundacin, cuyos desarrolladores se agruparon en torno al movimiento Open Source Matters que poco despus dara lugar a Joomla!, una denominacin que procede de una palabra de la lengua swahili que significa "todos juntos". Este CMS ofrece, en general, las mismas ventajas que otros gestores de contenidos Web, en la medida en que hace posible convertir una Web esttica tradicional en un completo portal con diferentes funcionalidades y caractersticas dinmicas e interactivas que hacen de nuestro sitio algo ms que una pgina Web informativa a la vez que se facilita la introduccin y actualizacin de contenidos.
46
Pgina Oficial ltima versin Fecha ltima versin: Licencia: Sistema Operativo: Fase de Desarrollo: Tipo de Dispositivo: Tipo de Software: Estado: Lenguaje con l trabaja:
http://www.joomla.org/ 1.6.2 2011-03-14 GPL Multiplataforma Programacin servidor Multidispositivo CMS Estable PHP
Tabla 2.15 Metadatos de Joomla!
2.2.2.7 Mootools MooTools (My oriented object tools) es un Framework Web orientado a objetos para JavaScript, de cdigo abierto, compacto y modular. El objetivo de MooTools es aportar una manera de desarrollar JavaScript sin importar en qu navegador se ejecute de una manera elegante. MooTools aporta una API documentada ms enfocada a la orientacin de objetos que la implementacin estndar soportada por los navegadores Web. Con Mootools podemos programar todo tipo de scripts en el cliente rpidamente y sin preocuparnos de las distintas particularidades de cada navegador. Algunas de sus ventajas: Es un Framework modular y extensible. o Core: coleccin de funciones de apoyo de las que hace uso el resto de components. o Class: es la biblioteca base de MooTools para la instanciacin de objetos o Natives: Coleccin de mejoras al objeto nativo JavaScript, aadiendo funcionalidades, compatibilidad y nuevos mtodos que simplifican el cdigo. o Element: multitud de mejoras y compatibilidades al objeto HTML o Effects: API avanzada para animar Elements o Remote: proporciona una interfaz para peticiones XHR, Cookie y herramientas para JSON
47
o Window: Proporciona una interfaz, vlida para cualquier navegador, para obtener informacin del cliente, por ejemplo el tamao de la ventana MooTools es orientado a objetos y sigue los principios DRY, que hacen de l un Framework rico, potente y eficiente. Componente avanzado de efectos (Effects), con transiciones (Transitions), de funcin parablica, optimizadas y utilizadas por multitud de desarrolladores Flash. Framework desarrollado por programadores para programadores
Pgina Oficial ltima versin Fecha ltima versin: Sistema Operativo: Fase de Desarrollo: Tipo de Dispositivo: Tipo de Software: Estado: Lenguaje con l trabaja: http://mootools.net/ 1.2.2 2009-03-23 Multiplataforma Programacin cliente Multidispositivo Biblioteca Estable Biblioteca
Tabla 2.16 Metadatos de Mootools
2.2.2.8 Ruby on Rail Rails es un completo entorno para desarrollar aplicaciones Web con base de datos de acuerdo con la estructura Model-View-Control. Desde el Ajax en la vista, a la peticin y respuesta en el controlador, hasta el modelo, Rails te da un entorno de desarrollo de Ruby. Fue creado por David Heinemeier Hansson, empleado de la empresa 37signals. Fue liberado por primera vez al pblico en julio del 2004, y lo implemento en una aplicacin orientada a la administracin de proyectos llamada Basecamp. Rails est basado en estos principios de desarrollo: Dont Repeat Yourself Convention Over Configuration
No te repitas significa que las definiciones deberan hacerse una sola vez. Dado que Ruby on Rails es un framework de pila completa, los componentes estn integrados de manera que no hace falta establecer puentes entre ellos. Por ejemplo, las definiciones de las clases no necesitan especificar los nombres de las columnas; Ruby puede 48
averiguarlos a partir de la propia base de datos, de forma que definirlos tanto en el cdigo como en el programa sera redundante. Convencin sobre configuracin, quiere decir, que el programador slo necesita definir aquella configuracin que no es convencional. Por ejemplo, si hay una clase Historia en el modelo, la tabla correspondiente de la base de datos es historias, pero si la tabla no sigue la convencin debe ser especificada manualmente. As, cuando se disea una aplicacin partiendo de cero, sin una base de datos preexistente, seguir las convenciones de Rails significa utilizar menos cdigo
Pgina Oficial ltima versin Fecha ltima versin: Sistema Operativo: Fase de Desarrollo: Tipo de Dispositivo: Tipo de Software: Estado: Lenguaje con l trabaja: www.rubyonrails.org 1.1.6 2010-11-15 Multiplataforma Programacin servidor Multidispositivo Framework Estable Ruby
Tabla 2.17 Metadatos Ruby on rails
2.2.2.9 Symfony Symfony es un completo framework diseado para optimizar, gracias a sus caractersticas, el desarrollo de las aplicaciones Web. Simplificando el desarrollo de una aplicacin mediante la automatizacin de algunos de los patrones utilizados para resolver las tareas comunes, proporciona estructura al cdigo fuente, forzando al desarrollador a crear cdigo ms legible y ms fcil de mantener, y facilita la programacin de aplicaciones, ya que encapsula operaciones complejas en instrucciones sencillas. Este framework separa la lgica de negocio, la lgica de servidor y la presentacin de la aplicacin Web. Proporciona varias herramientas y clases encaminadas a reducir el tiempo de desarrollo de una aplicacin Web compleja. Adems, automatiza las tareas ms comunes, permitiendo al desarrollador dedicarse por completo a los aspectos especficos de cada aplicacin. Symfony est desarrollado completamente con PHP 5, ha sido probado en numerosos proyectos reales y se utiliza en sitios Web de comercio electrnico de primer nivel. Symfony es compatible con la mayora de gestores de bases de datos, como 49
MySQL, PostgreSQL, Oracle y SQL Server de Microsoft. Se puede ejecutar tanto en plataformas Unix/Linux, como en plataformas Windows. Algunas de sus caractersticas. Est diseado para que se ajustara a los siguientes requisitos: Fcil de instalar y configurar en la mayora de plataformas Independiente del sistema gestor de bases de datos Sencillo de usar en la mayora de casos, pero lo suficientemente flexible como para adaptarse a los casos ms complejos Basado en la premisa de " Convencin en vez de configurar", en la que el desarrollador solo debe configurar aquello que no es convencional Sigue la mayora de mejores prcticas y patrones de diseo para la Web Preparado para aplicaciones empresariales y adaptable a las polticas y arquitecturas propias de cada empresa, adems de ser lo suficientemente estable como para desarrollar aplicaciones a largo plazo Cdigo fcil de leer que incluye comentarios de phpDocumentor y que permite un mantenimiento muy sencillo Fcil de extender, lo que permite su integracin con libreras desarrolladas por terceros
Symfony automatiza la mayora de elementos comunes de los proyectos Web: La capa de internacionalizacin que incluye Symfony permite la traduccin de los datos y de la interfaz, as como la adaptacin local de los contenidos. La capa de presentacin utiliza plantillas y layouts que pueden ser creados por diseadores HTML sin ningn tipo de conocimiento del framework Los formularios incluyen validacin automatizada y relleno automtico de datos, lo que asegura la obtencin de datos correctos y mejora la experiencia de usuario. Los datos incluyen mecanismos de escape que permiten una mejor proteccin contra los ataques producidos por datos corruptos. La autenticacin y la gestin de credenciales simplifican la creacin de secciones restringidas y la gestin de la seguridad de usuario. El sistema de enrutamiento y las URL limpias permiten considerar a las direcciones de las pginas como parte de la interfaz, adems de estar optimizadas para los buscadores. El soporte de e-mail incluido y la gestin de APIs permiten a las aplicaciones Web interactuar ms all de los navegadores. Los listados son ms fciles de utilizar debido a la paginacin automatizada, el filtrado y la ordenacin de datos.
50
Los plugins, las factoras (patrn de diseo "Factory") y los "mixin" permiten realizar extensiones a medida de Symfony. Las interacciones con Ajax son muy fciles de implementar mediante los helpers que permiten encapsular los efectos JavaScript compatibles con todos los navegadores en una nica lnea de cdigo. (Potencier, 2008)
Pgina Oficial ltima versin Fecha ltima versin: Sistema Operativo: Fase de Desarrollo: Tipo de Dispositivo: Tipo de Software: Estado: Lenguaje con l trabaja: http://www.symfony.es/ 1.4 2011-03-30 Multiplataforma Programacin servidor Multidispositivo Framework Estable PHP
Tabla 2.18 Metadatos de Symfony
2.2.2.10 Webmatrix WebMatrix, lo ltimo de la plataforma Web de Microsoft, una herramienta gratuita que otorga a los desarrolladores todo lo que necesitan para crear sitios Web, incluyendo servidores, base de datos y framework de programacin. WebMatrix tambin incluye una galera que permite encontrar el host ideal para tu sitio de forma ms fcil y ofrecer un desarrollo integrado y sincronizado de herramientas para ayudar manejar la presencia de desarrolladores en lnea. Este set de herramientas est diseado para permitir a los desarrolladores codificar, probar e implementar ASP.NET y PHP sin tener que configurar su propio servidor, manejando bases de datos o aprendiendo complicados procesos. Esta creado para principiantes o estudiantes de informtica que quieran probar una manera sencilla de desarrollar sitios Web desde su ordenador, programando de forma bsica, gestionando bases de datos y entendiendo la estructura de una Web esttica o dinmica, el uso de hojas de estilo (CSS) o el lenguaje HTML y ASP. La plataforma de Microsoft incorpora un editor de cdigo y bases de datos, administrador Web server, FTP y un sistema de publicacin sencillo, adems de una serie de alertas para encontrar errores en el cdigo. La plataforma de desarrollo Web se compone de dos partes: una para entender conceptos bsicos de pginas Web estticas o dinmicas y otra para utilizar plataformas CMS open source que utilizan PHP, gestores de contenido como Joomla, WordPress, Drupal, etc. 51
Pgina Oficial ltima versin Fecha ltima versin: Sistema Operativo: Fase de Desarrollo: Tipo de Dispositivo: Tipo de Software: Estado: Lenguaje con l trabaja:
http://www.microsoft.com/Web/Webmatrix/ 1.0 2011-01-13 Multiplataforma Programacin servidor Multidispositivo CMS Estable PHP y lenguajes ASP.Net
Tabla 2.19 Metadatos de WebMatrix
2.2.2.11 WordPress WordPress naci como el deseo de tener un sistema de publicacin elegante y bien diseado, creado en PHP y MySQL y que estuviese bajo licencia GPL. Es el sucesor oficial de b2/cafelog. WordPress es un programa recientemente creado, pero sus races y el desarrollo vienen de 2001. Es un producto maduro y estable. Esperamos que con una focalizacin en los estndares Web y en la experiencia del usuario final, podamos crear una herramienta completamente distinta a las dems" (wordpress.org, 2010) WordPress es una poderosa plataforma de publicacin personal, con una gran cantidad de caractersticas incorporadas, diseadas para hacer tan fcil y atractiva como sea posible la experiencia de publicar en Internet.
Pgina Oficial ltima versin Fecha ltima versin: Sistema Operativo: Fase de Desarrollo: Tipo de Dispositivo: Tipo de Software: Estado: Lenguaje con l trabaja: http://wordpress.org/ 3.1 2011-02-11 Multiplataforma Programacin cliente Multidispositivo CMS Estable PHP
Tabla 2.20 Metadatos de Wordpress
52
En principio, es un sistema de publicacin Web basado en entradas ordenadas por fecha, entre otras muchas posibilidades adems de pginas estticas. La estructura y diseo visual del sitio depende de un sistema de plantillas, independiente del contenido en s. La filosofa de Wordpress es apostar por la elegancia, la sencillez y las recomendaciones del W3C, separando el contenido y el diseo en XHTML y CSS.
2.2.3
Bases de datos
Una base de datos es un almacn que nos permite guardar grandes cantidades de informacin de forma organizada para que luego podamos encontrar y utilizar fcilmente. A continuacin te presentamos una gua que te explicar el concepto y caractersticas de las bases de datos. El trmino de bases de datos fue escuchado por primera vez en 1963, en un simposio celebrado en California, USA. Una base de datos se puede definir como un conjunto de informacin relacionada que se encuentra agrupada o estructurada. Desde el punto de vista informtico, la base de datos es un sistema formado por un conjunto de datos almacenados en discos que permiten el acceso directo a ellos y un conjunto de programas que manipulen ese conjunto de datos. Cada base de datos se compone de una o ms tablas que guarda un conjunto de datos. Cada tabla tiene una o ms columnas y filas. Las columnas guardan una parte de la informacin sobre cada elemento que queramos guardar en la tabla, cada fila de la tabla conforma un registro. Entre las principales caractersticas de los sistemas de base de datos podemos mencionar: Independencia lgica y fsica de los datos. Redundancia mnima. Acceso concurrente por parte de mltiples usuarios. Integridad de los datos. Consultas complejas optimizadas. Seguridad de acceso y auditora. Respaldo y recuperacin. Acceso a travs de lenguajes de programacin estndar.
Las principales clasificaciones de las bases de datos, pueden hacerse segn la variabilidad de los datos almacenados: 53
Estticas: bases de datos de slo lectura, utilizadas primordialmente para almacenar datos histricos que posteriormente se pueden utilizar para estudiar el comportamiento de un conjunto de datos a travs del tiempo, realizar proyecciones y tomar decisiones. Dinmicas: bases de datos donde la informacin almacenada se modifica con el tiempo, permitiendo operaciones como actualizacin, borrado y adicin de datos, adems de las operaciones fundamentales de consulta.
O fijndonos en su modelo de administracin: Jerrquicas: Este modelo utiliza rboles (Figura 2.8) para la representacin lgica de los datos.
Figura 2.8 rbol base de datos jerrquica
De red: En este modelo las entidades se representan como nodos y sus relaciones son las lneas que los unen. En esta estructura cualquier componente puede relacionarse con cualquier otro. A diferencia del modelo jerrquico, en este modelo, un hijo puede tener varios padres. Transaccionales: Son bases de datos cuyo nico fin es el envo y recepcin de datos a grandes velocidades, estas bases son muy poco comunes y estn dirigidas por lo general al entorno de anlisis de calidad, datos de produccin e industrial, es importante entender que su fin nico es recolectar y recuperar los datos a la mayor velocidad posible, por lo tanto la redundancia y duplicacin de informacin no es un problema como con las dems bases de datos, por lo general para poderlas aprovechar al mximo permiten algn tipo de conectividad a bases de datos relacionales. Relacionales: El modelo relacional para la gestin de una base de datos es un modelo de datos basado en la lgica de predicados y en la teora de 54
conjuntos. Es el modelo ms utilizado en la actualidad para modelar problemas reales y administrar datos dinmicamente. Multidimensionales: Son bases de datos ideadas para desarrollar aplicaciones muy concretas, como creacin de Cubos OLAP. Bsicamente no se diferencian demasiado de las bases de datos relacionales, la diferencia est ms bien a nivel conceptual; en las bases de datos multidimensionales los campos o atributos de una tabla pueden ser de dos tipos, o bien representan dimensiones de la tabla, o bien representan mtricas que se desean estudiar. Orientadas a objetos: En una base de datos orientada a objetos, la informacin se representa mediante objetos como los presentes en la programacin orientada a objetos. Cuando se integra las caractersticas de una base de datos con las de un lenguaje de programacin orientado a objetos, el resultado es un sistema gestor de base de datos orientada a objetos (ODBMS, object database management system) Documentales: Permiten la indexacin a texto completo, y en lneas generales realizar bsquedas ms potentes. Deductivas: Un sistema de base de datos deductiva, es un sistema de base de datos pero con la diferencia de que permite hacer deducciones a travs de inferencias. Se basa principalmente en reglas y hechos que son almacenados en la base de datos. Las bases de datos deductivas son tambin llamadas bases de datos lgicas, a raz de que se basa en lgica matemtica. Este tipo de base de datos surge debido a las limitaciones de la Base de Datos Relacional de responder a consultas recursivas y de deducir relaciones indirectas de los datos almacenados en la base de datos.
A continuacin detallare brevemente algunas de las bases de datos ms utilizadas dentro del desarrollo Web. 2.2.3.1 MySql MySQL es un sistema de gestin de bases de datos relacional, licenciado bajo la GPL de la GNU. Su diseo multihilo le permite soportar una gran carga de forma muy eficiente. MySQL fue creada por la empresa sueca MySQL AB, que mantiene el copyright del cdigo fuente del servidor SQL, as como tambin de la marca. Aunque MySQL es software libre, MySQL AB distribuye una versin comercial de MySQL, que no se diferencia de la versin libre ms que en el soporte tcnico que se ofrece, y la posibilidad de integrar este gestor en un software propietario, ya que de no ser as, se vulnerara la licencia GPL.
55
Este gestor de bases de datos es, probablemente, el gestor ms usado en el mundo del software libre, debido a su gran rapidez y facilidad de uso. Esta gran aceptacin es debida, en parte, a que existen infinidad de libreras y otras herramientas que permiten su uso a travs de gran cantidad de lenguajes de programacin, adems de su fcil instalacin y configuracin. Inicialmente, MySQL careca de algunos elementos esenciales en las bases de datos relacionales, tales como integridad referencial y transacciones. A pesar de esto, atrajo a los desarrolladores de pginas Web con contenido dinmico, debido a su simplicidad, de tal manera que los elementos faltantes fueron complementados por la va de las aplicaciones que la utilizan. Poco a poco estos elementos faltantes, estn siendo incorporados tanto por desarrolladores internos, como por desarrolladores de software libre Las principales caractersticas de este gestor de bases de datos son las siguientes: Aprovecha la potencia de sistemas multiprocesador, gracias a su implementacin multihilo. Soporta gran cantidad de tipos de datos para las columnas. Dispone de API's en gran cantidad de lenguajes (C, C++, Java, PHP, etc.). Gran portabilidad entre sistemas. Soporta hasta 32 ndices por tabla. Gestin de usuarios y passwords, manteniendo un muy buen nivel de seguridad en los datos.
Ventajas: Velocidad al realizar las operaciones, lo que le hace uno de los gestores con mejor rendimiento. Bajo costo en requerimientos para la elaboracin de bases de datos, ya que debido a su bajo consumo Puede ser ejecutado en una mquina con escasos recursos sin ningn problema. Facilidad de configuracin e instalacin. Soporta gran variedad de Sistemas Operativos Baja probabilidad de corromper datos, incluso si los errores no se producen en el propio gestor, sino en el sistema en el que est. Conectividad y seguridad
Desventajas:
56
Un gran porcentaje de las utilidades de MySQL no estn documentadas. No es intuitivo, como otros programas (ACCESS).
Pgina Oficial ltima versin Fecha ltima versin: Licencia: Variabilidad Modelo Sistema Operativo http://www.mysql.com/ 5.5.9 2010-06-10 GPL o Uso comercial dinmica Relacional Multiplataforma
Tabla 2.21 Metadatos de MySQL
2.2.3.2 PostGreSql PostGreSQL es un sistema de gestin de bases de datos objeto-relacional (ORDBMS) basado en el proyecto POSTGRES, de la universidad de Berkeley. El director de este proyecto es el profesor Michael Stonebraker, y fue patrocinado por Defense Advanced Research Projects Agency (DARPA), el Army Research Office (ARO), el National Science Foundation (NSF), y ESL, Inc. PostGreSQL es una derivacin libre (OpenSource) de este proyecto, y utiliza el lenguaje SQL92/SQL99, as como otras caractersticas. Fue el pionero en muchos de los conceptos existentes en el sistema objetorelacional actual, incluido, ms tarde en otros sistemas de gestin comerciales. PostGreSQL es un sistema objeto-relacional, ya que incluye caractersticas de la orientacin a objetos, como puede ser la herencia, tipos de datos, funciones, restricciones, disparadores, reglas e integridad transaccional. A pesar de esto, PostGreSQL no es un sistema de gestin de bases de datos puramente orientado a objetos.
Pgina Oficial ltima versin Fecha ltima versin: Licencia: Variabilidad Modelo Sistema Operativo http://www.postgresql.org/ 9.0 2010-09-20 BSD Dinmica O. Objetos Multiplataforma
Tabla 2.22 Metadatos de PostgreSQL
57
A continuacin se enumeran las principales caractersticas de este gestor de bases de datos: Implementacin del estndar SQL92/SQL99. Soporta distintos tipos de datos: adems del soporte para los tipos base, tambin soporta datos de tipo fecha, monetarios, elementos grficos, datos sobre redes (MAC, IP...), cadenas de bits, etc. Tambin permite la creacin de tipos propios. Incorpora una estructura de datos array. Incorpora funciones de diversa ndole: manejo de fechas, geomtricas, orientadas a operaciones con redes, etc. Permite la declaracin de funciones propias, as como la definicin de disparadores.
Soporta el uso de ndices, reglas y vistas. Incluye herencia entre tablas (aunque no entre objetos, ya que no existen), por lo que a este gestor de bases de datos se le incluye entre los gestores objeto-relacionales. Permite la gestin de diferentes usuarios, como tambin los permisos asignados a cada uno de ellos. 2.2.3.3 Oracle Oracle database es un sistema de gestin de base de datos objeto-relacional (o ORDBMS por el acrnimo en ingls de Object-Relational Data Base Management System), desarrollado por Oracle Corporation. Se considera a Oracle como uno de los sistemas de bases de datos ms completos, destacando: soporte de transacciones, estabilidad, escalabilidad y Soporte multiplataforma.
Su dominio en el mercado de servidores empresariales ha sido casi total hasta hace poco, recientemente sufre la competencia del Microsoft SQL Server de Microsoft y de la oferta de otros RDBMS con licencia libre como PostgreSQL, MySql o Firebird Oracle surge en 1977 bajo el nombre de Software Development Laboratories (SDL), luego en 1979 SDL cambia su nombre por Relational Software, Inc. (RSI). La fundacin de Software Development Laboratories (SDL) fue motivada principalmente a partir de un estudio sobre los .SGBD (Sistemas Gestores de Base de Datos) de George 58
Koch. Computer World defini este estudio como uno de los ms completos jams escritos sobre bases de datos. Este artculo inclua una comparativa de productos que eriga a Relational Software como el ms completo desde el punto de vista tcnico. Esto se deba a que usaba la filosofa de las bases de datos relacionales, algo que por aquella poca era todava desconocido. La ltima versin de Oracle, cuenta con 6 ediciones: Oracle Database Enterprise Edition (EE). Oracle Database Standard Edition (SE). Oracle Database Standard Edition One (SE1). Oracle Database Express Edition (XE). Oracle Database Personal Edition (PE). Oracle Database Lite Edition (LE).
La nica edicin gratuita es la Express Edition, que es compatible con las dems ediciones de Oracle Database 10gR2 y Oracle Database 11g. Recientemente, Oracle adquiri a Sun Microsystems y con ella la empresa encargada comercial de MySQL.
Pgina Oficial ltima versin Fecha ltima versin: Licencia: Variabilidad Modelo Sistema Operativo http://www.oracle.com/ 11.2 2009-09-01 EULAs dinmica O. Objetos Multiplataforma
Tabla 2.23 Metadatos de Oracle
2.2.3.4 Access Microsoft Access es un programa, utilizado en los sistemas operativos Microsoft Windows, para la gestin de bases de datos, orientado a ser usado en entornos personales o en pequeas organizaciones. Es un componente de la suite Microsoft Office. Permite crear ficheros de bases de datos relacionales que pueden ser fcilmente gestionadas por una interfaz grfica sencilla. Este programa permite manipular los datos en forma de tablas (formadas por filas y columnas), crear relaciones entre tablas, consultas, formularios para introducir datos e informes para presentar la informacin Entre sus principales caractersticas se encuentran: 59
Access es grfico, por lo que aprovecha al mximo la potencia grfica de Windows, ofreciendo mtodos usuales de acceso a los datos y proporcionando mtodos simples y directos de trabajar con la informacin. Access facilita la administracin de datos, ya que sus posibilidades de consulta y conexin le ayudan a encontrar rpidamente la informacin deseada, cualquiera que sea su formato o lugar de almacenamiento. Con Access es posible producir formularios e informes sofisticados y efectivos, as como grficos y combinaciones de informes en un solo documento. Access permite lograr un considerable aumento en la productividad mediante el uso de los asistentes y las macros. Estos permiten automatizar fcilmente muchas tareas sin necesidad de programar.
Pgina Oficial ltima versin Fecha ltima versin: Licencia: Variabilidad Modelo Sistema Operativo http://office.microsoft.com/eses/access/ 2010 2009-06-01 EULA Dinmica Relacional Windows
Tabla 2.24 Metadatos Access
2.2.3.5 Microsoft SQL Server Microsoft SQL Server es un sistema para la gestin de bases de datos producido por Microsoft basado en el modelo relacional. Sus lenguajes para consultas son T-SQL y ANSI SQL. Microsoft SQL Server constituye la alternativa de Microsoft a otros potentes sistemas gestores de bases de datos como son Oracle o PostgreSQL o MySQL. Algunas de sus caractersticas: Soporte de transacciones. Escalabilidad, estabilidad y seguridad. Soporta procedimientos almacenados. Incluye tambin un potente entorno grfico de administracin, que permite el uso de comandos DDL y DML grficamente.
60
Permite trabajar en modo cliente-servidor, donde la informacin y datos se alojan en el servidor y los terminales o clientes de la red slo acceden a la informacin. Adems permite administrar informacin de otros servidores de datos.
Este sistema incluye una versin reducida, llamada MSDE con el mismo motor de base de datos pero orientado a proyectos ms pequeos, que en sus versiones 2005 y 2008 pasa a ser el SQL Express Edition, que se distribuye en forma gratuita. Es comn desarrollar completos proyectos complementando Microsoft SQL Server y Microsoft Access a travs de los llamados ADP (Access Data Project). De esta forma se completa la base de datos (Microsoft SQL Server), con el entorno de desarrollo (VBA Access), a travs de la implementacin de aplicaciones de dos capas mediante el uso de formularios Windows. En el manejo de SQL mediante lneas de comando se utiliza el SQLCMD. Para el desarrollo de aplicaciones ms complejas (tres o ms capas), Microsoft SQL Server incluye interfaces de acceso para varias plataformas de desarrollo, entre ellas .NET, pero el servidor slo est disponible para Sistemas Operativos Windows.
Pgina Oficial ltima versin Fecha ltima versin: Licencia: Variabilidad Modelo Sistema Operativo http://www.microsoft.com/sql/ 10.0 2008-07-02 EULAs dinmica Relacional Windows
Tabla 2.25 Metadatos de Microsoft SQL
2.3
Herramientas Similares
Despus de estudiar las tecnologas existentes, as como las herramientas que proporcionaran algn tipo de apoyo o gua en la eleccin de estas, llegamos a la conclusin que el tipo de herramientas similares o ms parecidas, son foros, listados o bibliotecas. En estas, el usuario solo puede consultar o buscar tecnologas, pero no introducir sus necesidades para obtener soluciones. Algunas de las pginas ms completas que recopilan de tecnologas son: 61
(DedaSys, 2011): Pagina web en la que podemos encontrar una recopilacin de los lenguajes de programacin ms populares, segn algunos de los buscadores ms famosos. (BestWebFrameworks, 2011): Completa recopilacin de los frameworks existentes para el desarrollo web, clasificados segn al lenguaje que sirvan (Patel, 2011): Biblioteca de recursos para desarrolladores. (TIOBE Software, 2011): Estudio sobre los lenguajes de desarrollo ms populares, proporcionando estadsticas de cmo evoluciona el nmero de usuarios de estos lenguajes.
2.4
Conclusin
A lo largo de este captulo se ha hecho un repaso por el estado actual de las tecnologas para el desarrollo de aplicaciones Web, as como por los inicios y la evolucin de las pginas Web. Se puede observar la rpida evolucin de las aplicaciones Web, as como el constante crecimiento de las herramientas y sus evoluciones, para cubrir todas las necesidades que al desarrollador le surgan segn el usuario demandaba nuevas caractersticas o mejoras dentro de las aplicaciones Web. Aunque las tecnologas existentes son muy numerosas, sobre todo en el campo de herramientas para la implementacin de la pgina Web, en este captulo se han visto las ms populares, partiendo de los lenguajes de desarrollo Web ms utilizados y las herramientas ms usadas para la utilizacin de estos en la creacin de aplicaciones Web. Gracias a esta seleccin de tecnologas, podemos conseguir realizar una buena clasificacin con las caractersticas esenciales que un desarrollador demanda a la hora de elegir sus herramientas de trabajo. Podemos concluir, que las tecnologas estn en constante evolucin, aadiendo nuevas caractersticas y mejoras a las que ya posean, o surgiendo como nuevas herramientas dispuestas a cubrir un campo que ninguna otra herramienta antes satisfaca. Es por ello, que la creacin de una herramienta de clasificacin de las mismas, debe ser lo suficientemente flexible como para permitir este constante cambio dentro de las tecnologas.
62
CAPITULO 3. DESCRIPCIN DE LA HERRAMIENTA
A continuacin se describe la aplicacin construida para servir de asistente en la eleccin de tecnologas a los desarrolladores Web. Este captulo est dividido en varios apartados, los cuales nos ayudan a entender detalladamente cmo es la aplicacin, as como el proceso que se ha seguido para implementarla.
63
3.1
Descripcin de Alto Nivel
La herramienta que construida, es un aplicacin Web la cual nos guiar y ayudar a elegir las tecnologas de desarrollo Web ms adecuadas a nuestras necesidades.
Figura 3.1 Pantalla Principal
Esta herramienta consta de una pantalla principal, Figura 3.1, en la que se muestra, de forma visual y atractiva, las ltimas tecnologas para la creacin de aplicaciones Web. Cada una de estas tecnologas, se muestra al usuario en forma de burbuja, acompaada de unas estrellas dependiendo de la importancia/puntuacin que los usuarios le han otorgado, es decir, las herramientas ms populares dentro de la comunidad de desarrolladores, tendrn un mayor nmero de estrellas. Estas burbujas, estn clasificadas segn el tipo de tecnologa que representan, agrupadas mediante un color unitario. Cada una de estas esferas, al seleccionar el nombre de la tecnologa, permite al usuario acceder a las caractersticas y especificaciones propias de cada una de las tecnologas. Esta pantalla principal, muestra inicialmente tantas tecnologas como el sistema tenga almacenado. Estas burbujas, permiten al usuario interactuar con ellas, pichando sobre ellas y lanzndolas por la pantalla, las cuales rebotan entre ellas y las paredes, simulando el comportamiento que tendran pelotas de goma. Estas, interactan con la pantalla, como si estuvieran contenidas dentro de una caja, es decir, si agitamos la pantalla del navegador de un lado a otro, las burbujas rebotaran, segn el movimiento que proporcionemos a su espacio. 65
Figura 3.2 Detalles Filtro
Dentro de esta ventana, tambin contaremos con un filtro en la parte superior (Figura 3.2), que nos permitir seleccionar las caractersticas de las tecnologas que queremos encontrar, mostrando solo aquellas tecnologas que cumplan esos requisitos. Dividido segn el tipo de tecnologa, nos muestra uno mens en el que podemos marcar aquellos atributos con los que deseamos contar en nuestra aplicacin, limitando la informacin mostrada a las opciones elegidas. Este filtro, tambin cuenta con la posibilidad de ser minimizado, permitiendo a las burbujas disponer del mximo de pantalla en el que desplegarse. El filtro esta creado permitiendo la flexibilidad de la aplicacin, cambiando en funcin de los atributos que pueda tener cada una de las tecnologas. Junto al filtro, podemos encontrar 3 botones: Filtrar; el cual actualiza las burbujas con los datos introducidos en el filtro. Reset; que devuelve los valores por defecto al men del filtro.
Ayuda; el cual proporciona una breve descripcin de cmo usar la aplicacin. Otra de las caractersticas que ofrece esta aplicacin, es la posibilidad de buscar tecnologas. Para ello, se debe introducir el texto dentro de la herramienta buscar, situada en la parte superior, y la propia herramienta recomendar las posibles tecnologas existentes dependiendo de los caracteres introducidos. Adems de la pantalla principal, la aplicacin consta de otros elementos que complementan su funcionalidad. Un apartado en el que cada tecnologa muestra sus caractersticas, Figura 3.3, y en el cual cada usuario registrado, puede realizar comentarios sobre cada tecnologa, as como puntuarla segn la importancia que el usuario le otorgue.
66
Figura 3.3 Pantalla tecnologa especifica
Otra pantalla (Figura 3.4) de la aplicacin, es la denominada backend, destinada a la administracin de la misma. En esta zona, los administradores del sistema podrn modificar las tecnologas existentes dentro del sistema, as como aadir nuevas o borrar. Al igual, permite la gestin de los usuarios del sistema y de los atributos y caractersticas de cada una de las tecnologas.
Figura 3.4 Pantalla de administracin
67
3.2
Descripcin Metodolgica
Para una descripcin a bajo nivel del sistema creado, se ha utilizado modelado UML. Estos diagramas, divididos en las distintas fases del desarrollo software, nos permiten mostrar de forma grfica y detallada, las distintas caractersticas de la aplicacin.
3.2.1 Requisitos En la Especificacin de Requisitos Software (ERS) se hace una descripcin completa del comportamiento del sistema que se va a desarrollar. Incluye un conjunto de casos de uso que describe todas las interacciones que tendrn los usuarios con el software. Los requisitos del sistema, estn divididos en requisitos funcionales, agrupados en Gestin del frontend, Gestin del backend y gestin de los usuarios, y requisitos no funcionales. Estos ltimos, segn recomienda K.Pohl (Pohl, 2009), se dividen en requisitos de calidad y requisitos de restriccin. Requisitos Funcionales Gestin del Backend o 1.1 El administrador del sistema podr dar permisos de administracin a usuarios registrados o 1.2 El sistema permitir introducir, borrar y modificar tecnologas en el sistema o 1.3 Las tecnologas deben estar divididas en lenguajes, herramientas y base de datos, con sus atributos especficos o 1.4 el sistema permitir la insercin y baja de usuarios en el sistema, as como modificar sus datos o 1.5 El sistema permitir modificar, insertar y borrar los atributos que cada tecnologa debe contener Gestin de Frontend o 2.1 El sistema mostrara todas las tecnologas disponibles para el desarrollo Web o 2.2 El sistema permitir filtrar las distintas tecnologas, mediante atributos elegidos por el usuario o 2.3 El sistema permitir elegir una tecnologa para ver sus caracterstica 68
o 2.4 El sistema permitir ocultar el sistema de filtrado de tecnologas Gestin de Usuarios Gestin de Usuarios o 3.1 Cuando el sistema detecta credenciales de administrador, entrar al backend directamente. o 3.2 El sistema distinguir 3 tipos de usuarios: visitante, usuario registrado y Administrador. o 3.3 El sistema permite a usuarios registrados modificar los datos personales de su cuenta o 3.4 El sistema permitir a los usuarios registrados votar las tecnologas y comentarlas
Requisitos no funcionales Requisitos de calidad o 4.1 El sistema debe mostrar la informacin de las distintas tecnologas de la forma ms atractiva posible o 4.2 El sistema mostrara las tecnologas divididas por colores segn el tipo al que pertenezcan o 4.3 El sistema debe permitir una constante actualizacin de tecnologas, atributos y formas de filtrado o 4.4 El sistema debe hacer uso de varias tecnologas Web o 4.5 El sistema debe visualizarse en el dispositivos mviles
Figura 3.5 Requisitos del sistema
69
Requisitos de restriccin o 5.1 Solo el administrador podr crear otros administradores o 5.2 El sistema debe usar HTML 5
Casos de Uso Una vez realizado un primer anlisis de los requisitos de la aplicacin e identificado sus diferentes partes, se proceder a describir mediante casos de uso, cada una de las funcionalidades del sistema. Mediante casos de uso, podemos capturar los distintos requisitos del sistema. Cada uno proporciona uno o ms escenarios, que indican cmo debera interactuar el usuario con el sistema. Al igual que los requisitos funcionales, estos tambin estn divididos en 3 categoras, generando tres diagramas diferentes. Dentro del sistema, podemos identificar tres tipos e actores: Visitante Usuario registrado: Este actor se trata de un Visitante que se registr previamente y se ha autenticado en el sistema. Administrador: usuario registrado con privilegios para acceder a la zona del backend, y poder gestionar la aplicacin.
En Figura 3.6, nos muestra el diagrama de caso de uso relacionado con los requisitos de gestin del backend. En el podemos ver las distintas funcionalidades que puede realizar un administrador para gestionar el sistema. El comportamiento de un administrador dentro del sistema se reduce bsicamente a: Alta, baja y Modificacin de Usuario Modificar permisos de Usuario Insertar tecnologas Borrar tecnologas Modificar tecnologas Insertar nuevos atributos Modificar atributos Borrar Atributos
70
uc gestion backend
UC 1.4 Modificar permisos
UC 1.1 Alta Usuarios
UC 1.2 Modificar Usuarios
UC 1.3 Borrar Usuarios
Administrador (from Casos de Uso)
UC 1.5 Insertar tecnologia
UC 1.6 Borrar tecnologia
UC 1.9 Borrar atributos
UC 1.9 Modificar Atributos
UC 1.7 Insertar Nuev os Atributos
UC 1.8 Modificar Tecnologia
Figura 3.6 Diagrama de Caso de Uso-Gestin del Backend
Cada uno de los casos de uso, se describe mediante un escenario en el que se plasman los distintos pasos para cumplir la accin. UC 1.6 Insertar Tecnologa (Figura 3.7) a) Descripcin: Este caso de uso permite a los administradores insertar nuevas tecnologas dentro del sistema. b) Precondicin: El usuario debe estar autentificado, dentro del backend, como administrador del sistema. c) Flujo bsico: Paso 1: el administrador selecciona un tipo de tecnologa 71
Paso 2: el sistema muestra los atributos de esa tecnologa y todas las almacenadas en el sistema de esa tipo Paso 3: El usuario selecciona inserta nueva tecnologa (del tipo anteriormente seleccionado) Paso 4: el sistema muestra un formulario con todos los atributos que puede tener una tecnologa Paso 5: el usuario rellena el formulario y pulsa guardar Paso 6: el sistema guarda la nueva informacin y vuelve al paso 4
d) Flujo alternativo: Paso 5.1 Si el usuario introduce un nombre de tecnologa ya utilizado, el sistema notifica al usuario y no guarda los datos, vuelve al paso 4 e) Postcondicin: la nueva tecnologa esta insertada en el sistema, y aparecer en todos los casos relacionados con las tecnologas.
Figura 3.7 Escenario Caso de uso UC 1.6
72
En la Figura 3.8, podemos ver los casos de usos relacionados con la gestin del frontend. Estos, representan las acciones que se pueden realizar dentro la aplicacin principal. En estos casos de uso, interviene todos los actores del sistema, pudiendo realizar aquellos que no estn en un nivel mayor de especializacin. Casos de uso que pueden realizar todos los usuarios: Filtrar tecnologas Interactuar con las pelotas Visualizar datos tecnologa Mostrar pelotas/tecnologa
Casos de uso, solo para usuarios registrados Comentar tecnologa Puntuar tecnologa
uc gestion frontend
UC 2.1 Filtrar tecnologias
UC 2.5 Interacturar con las pelotas Visitante (from Casos de Uso) UC 2.4 Visualizar datos tecnologia
UC 2.6 Mostrar pelota/tecnologia
UC 2.2 Comentar tecnologia Usuario (from Casos de Uso)
UC 2.3 Puntuar tecnologia
Administrador (from Casos de Uso)
Figura 3.8 Diagrama Caso de uso- Gestin del Frontend
73
UC 2.5 Interactuar con las pelotas (Figura 3.9) a) Descripcin: este caso de uso, permite al usuario, interactuar con las pelotas que contienen las tecnologas. b) Precondicin: el usuario debe estar en la pantalla principal de la aplicacin c) Flujo bsico Paso 1: el sistema muestra las pelotas con las tecnologas extradas de la base de datos (UC 2.6) Paso 2: el usuario "agarra" una pelota con el ratn y la mueve por la pantalla Paso 3: el sistema se encargara de que el resto de pelotas, se muevan cuando interaccionen con la seleccionada Paso 4: el usuario "suelta" la pelota Paso 5: el sistema recolocara las pelotas, simulando el comportamiento real, y estas quedaran en reposo
Figura 3.9 Escenario UC 2.5 Interactuar con las pelotas
74
UC 2.1 Filtrar tecnologas (Figura 3.10) a) Descripcin: este caso de uso describe como un usuario puedes filtrar las tecnologas mediantes distintas caractersticas b) Precondicin: El usuario debe estar en la pgina principal (UC 2.6) c) Flujo Bsico Paso1: el usuario pulsa en el filtro Paso 2: el sistema despliega el filtro que mantena oculto, mostrando todas las opciones posibles Paso 3: el usuario selecciona las caractersticas, de las tecnologas que busca. Paso 4: el usuario selecciona "filtrar" Paso 5: el sistema busca en la base de datos las tecnologas con las caractersticas seleccionadas Paso 6: el sistema renueva las pelotas, cargando las nuevas (UC 2.6)
Figura 3.10 Escenario UC 2.1 filtrar tecnologas
75
d) Postcondicin: el sistema muestra solo las tecnologas con las caractersticas elegidas, permitiendo realizar los mismos casos de uso que con las pelotas iniciales. La Figura 3.11 representa los casos de uso que pueden realizar los usuarios registrados, para gestionar su cuenta y acceder al sistema. Los casos de uso son los siguientes: Iniciar sesin Cerrar sesin Visualizar datos Modificar datos Borrar cuenta Registrarse en el sistema
Figura 3.11 Diagrama Caso de Uso- Gestin de Usuarios
76
Trazabilidad En la Figura 3.12, Figura 3.13 y Figura 3.14 se muestra la trazabilidad de los requisitos. En las tres figuras podemos ver los diagramas de casos de uso anteriormente descritos, junto con los requisitos funcionales recogidos en este proyecto. Con lo que podemos comprobar como cada requisito est cubierto por al menos un caso de uso.
Figura 3.12 Diagrama Trazabilidad - Gestin Backend
77
Figura 3.13 Diagrama Trazabilidad - Gestin frontend
Figura 3.14 Diagrama Trazabilidad - Gestin Usuarios
78
3.2.2
Anlisis
El proceso de anlisis del software, consiste en el diseo de componentes de una aplicacin (entidades del negocio), generalmente utilizando patrones de arquitectura. El diseo arquitectnico debe permitir visualizar la interaccin entre las entidades del negocio, adems de poder ser validado, describiendo en general cmo se construir la aplicacin de software. En esta parte veremos el diagrama de clases, elemento esencial para el anlisis de una aplicacin software, y algunos de los diagramas ms representativos de secuencia y actividad. En la Figura 3.15, podemos ver el diagrama de clases de la aplicacin, el cual describe la estructura del sistema mostrando sus clases, atributos y relaciones entre ellos. Las clases que forman este diagrama son: Tecnologas: contiene los atributos comunes de todas las tecnologas almacenadas en el sistema, de los que heredaran las clases hijo, con sus atributos propios. Usuario: esta clase, representa a todos las personas que hacen uso de la aplicacin, y estn registrados en el sistema Licencia: en esta clase, se almacena la informacin referente a las licencias de uso del software. Comentario: este concepto, maneja la informacin referente a los comentarios que los usuarios realizan de cada tecnologa Lenguaje, Herramienta y Base de datos: son las clases que heredan de la clase tecnologa, aportando los atributos especficos de cada tipo de tecnologa.
En el diagrama se pueden apreciar las relaciones entre las diferentes clases: Usuario-Tecnologa: esta relacin muestra, la posibilidad de que un usuario puede puntuar a cada una de las tecnologas Usuario-Comentario-Tecnologa: la clase tecnologas, puede tener relacionados distintos comentarios, los cuales son realizados por distintos usuarios. Tecnologa-Licencia: toda tecnologa, est relacionada con una o varias licencias, que define el modo en el que se puede usar el software. Herramienta-Lenguaje: muchas de las herramientas existentes, estn desarrolladas para ser usadas especficamente con algn lenguaje de programacin, esta relacin representa esa caracterstica. 79
class Diagrama de clases
Usuario puntua admin: boolean 0..* clave: char email: char id: int 1 nombre: char 0..* 1 -
Tecnologia descripcion: char id: int nombre: char 0..* pagina oficial: char puntuacion: int version: int Licencia tiene - id: int 1..* - nombre: char - tipo: char
realiza Comentario 0..* - comentario: char - fecha: char - id: int
pertenece
0..*
Lenguaje EntornoProgrmacion: char EstiloProgramacion: char 1..* ModoEjecutarse: char SistemasDistribuidos: char pertenece 0..* -
Herramienta Estado: char FaseDesarrollo: char SistemaOperativo: char Tipo: char TipoDispositivo: char BaseDatos - Modelo: int - Variabilidad: char
Figura 3.15 Diagrama de clases
En la Figura 3.16, podemos ver al diagrama de actividad con las acciones que usuario y sistema deben realizar para poder llevar a cabo la interaccin con las pelotas generadas en la aplicacin. Se puede ver, que cuando el usuario entra a la aplicacin, es el sistema el que se encarga de cargar todas las tecnologas dentro de las pelotas. Despus el usuario es el que decide si interactuar con las pelotas existentes o filtrar, para que solo parezcan tecnologas ms acorde a sus necesidades. Cuando el Usuario agarra una pelota y la mueve, el sistema mueve el resto de pelotas afectadas por el momento de la primera.
80
act Diagrama de activ idad
Salir
Usuario
Agarrar Pelota
Mov er pelota Filtrar pelotas seleccionar caracteristicas Desplegar filtro
Entra a la aplicacion
Pulsar filtrar
Consultar bbdd
Sistema
Cargar pelotas
Mov er el resto de pelotas
pelota soltada [si] recolocar pelotas
[no]
Figura 3.16 Diagramas de actividad- Interactuar con las burbujas
El siguiente diagrama, Figura 3.17, es un diagrama de secuencia que representa las llamadas que se deben seguir para cargar las pelotas en la aplicacin. Este diagrama est dividido en actores, en este caso solo participan las roles de administrador, y las capas de la aplicacin la cual se compone de elementos de vista, control y persistencia. La vista, es la interfaz de la aplicacin, en la que el usuario interacta con las pelotas que el sistema devuelve. Las clases de control, son Conectar.php, que se encarga de pasar los atributos de conexin a la base de datos y abrir la conexin al resto de la aplicacin, y la clase Main.js, que es la encargada de construir las burbujas con los datos obtenidos de la base de datos. La capa de persistencia, est compuesta por una base de datos, la cual en este diagrama solo realiza operaciones de lectura.
81
Figura 3.17 Diagrama de secuencia - Cargar pelotas
3.2.3 Diseo Una vez definidas las fases de requisitos y de anlisis, se pueden realizar los prototipos de fases tempranas para tener un modelo mental de lo que se pretende hacer. En esta fase, en funcin de las necesidades de la aplicacin se realiz un prototipo (Figura 3.18, Figura 3.19 y Figura 3.20) de una posible interfaz de usuario, usando para ello el software Evolus Pencil.
82
Figura 3.18 Prototipo Interfaz principal
En la Figura 3.18, podemos ver el prototipo de la pantalla principal de la aplicacin que hemos desarrollado. Esta pantalla permitir al usuario poder visualizar todas las tecnologas disponibles para el desarrollo de aplicaciones Web. Sus elementos principales estn numerados con crculos rojos y son: 1. Elementos de navegacin entre las paginas 2. Filtro: recoge las caractersticas de las tecnologas que el usuario quiere visualizar 3. Pelotas/Burbujas: la aplicacin contara con unas burbujas que de forma animada, nos mostraran las tecnologas consultadas 4. Pie de pgina: ente elemento contendr la informacin o enlaces, relacionados con el proyecto, pero no con la aplicacin.
83
Figura 3.19 Prototipo interfaz tecnologas
Esta pantalla, Figura 3.19, nos permite hacernos una idea de los elementos bsicos que debe tener la interfaz que muestra los detalles de cada una de las tecnologas. A esta pantalla se accede pinchando en cada una de las pelotas, las cuales representa cada tecnologa. Los elementos a destacar son: 5. Descripcin, ttulo y caractersticas de la tecnologa especifica. 6. Sistema donde el usuario puede puntuar cada una de las tecnologas. 7. Comentarios: esta seccin, recoger cada uno de los comentarios que los usuarios hagan sobre la tecnologa.
84
Figura 3.20 Prototipo interfaz del backend
La Figura 3.20, muestra que elementos contendr esta pantalla y como estarn distribuidos. Desde aqu, el administrador del sistema, podr gestionar y actualizar todos los contenidos del sistema. 8. Barra de navegacin del backend, mediante la cual el usuario se mover por las distintas pginas de administracin. 9. En este elemento, aparecen los distintos atributos que tendr cada uno de los tipos de tecnologa, as como los posibles valores que puede tomar. Este elemento, tambin ofrecer la posibilidad de que el administrador aada nuevos atributos con sus valores correspondientes 10. En modo de tabla, se mostrara cada una de las tecnologas recogidas en el sistema, con todos sus atributos. Adems, de estas pantallas, la aplicacin contara con otras, como por ejemplo aadir nueva tecnologa, las cuales son muy parecidas en formato y caractersticas a las que acabamos de ver.
85
Figura 3.21 Diagrama de navegacin
La Figura 3.21 representa el diagrama de navegacin, mediante el cual podemos ver representadas cada una de las interfaces a las que puede acceder un usuario, y con cuales est conectada. Cada pantalla lleva identificado el tipo de usuario que puede acceder a ella y el nombre que la identifica. Al ser una aplicacin Web, se puede salir de la aplicacin desde cualquiera de las pginas, simplemente cerrando el navegador. En el diagrama podemos distinguir dos tipos de flechas, direccionales y bidireccionales. Las flechas direccionales, sealan el camino natural para llegar a una pgina, permitiendo estas recorrerlas en sentido inverso, dando al usuario libertad de navegacin. La flechas bidireccionales, indican que al acceder a una pantalla y realizar su funcin (por ejemplo, dar de alta un usuario), el sistema redirigir al usuario a la pantalla anterior.
3.2.4 Implementacin En este captulo, se describen los detalles de la implementacin realizada tras la fase de anlisis y diseo, en el que podremos ver los avances del proyecto, as como los 86
distintos componentes utilizados, desde el comienzo del desarrollo hasta llegar a la aplicacin final. Para poder comenzar esta aplicacin, lo primero fue crear una estructura inicial mediante cdigo HTML, en la que el elemento que soportara la visualizacin de las diferentes tecnologas, sera el elemento <Canvas > (ver subcaptulo HTML). Dentro de este elemento, se cargan mediante consultas PHP a la base de datos MySQL, todas las tecnologas almacenadas con los atributos necesarios para la visualizacin de las tecnologas. En la siguiente imagen (Figura 3.22) podemos ver la pgina Web creada, aun sin estilos, y sin reconocer el elemento <Canvas>, por lo que se muestran todos los datos cargados en forma de tabla.
Figura 3.22 Estructura HTML
El siguiente paso fue crear una clase en JavaScript, la cual recogiera la informacin de las tablas, dibujara las burbujas y las otorgara movimiento, para simular que estas flotan por la pantalla. En esta clase, hay que destacar 2 funciones principales; una para crear las burbujas, la cual otorgaba a cada burbuja unos atributos, a partir del cdigo HTML, para luego ser dibujada, como son tamao, texto interior, posicin inicial y 87
direccin. La otra funcin destacable, era la encargada de dibujar las burbujas, la cual mediante el borrado y la construccin de las burbujas en una posicin adyacente, simulaba el movimiento de las burbujas, esta ltima funcin se apoyaba otra, la cual generaba las nuevas direcciones que deban tomar las burbujas cuando chocasen.
Figura 3.23 Aplicacin burbujas
En la Figura 3.23, podemos ver la primera aplicacin, en la que las diferentes tecnologas, flotaban por la pantalla en burbujas de diferentes tamaos y colores, segn su importancia y el tipo de tecnologa. Este diseo, fue desechado debido a que la forma de mostrar las tecnologas, no resultaba muy atractiva, dando sensacin de aplicacin obsoleta. Adems del motivo de la visualizacin, tambin influyo la cantidad de recursos que esta consuma, ya que redibuja constantemente un gran nmero de tecnologas y a la nula interaccin que el usuario poda realizar con las burbujas. El siguiente objetivo, era conseguir una aplicacin que cumpliera los requisitos que la anterior no cubra, por lo que se desarroll una aplicacin en la que las burbujas, se cambiaron por pelotas, las cuales permitan interactuar con ellas. Para ello se modific la clase que ya tenamos para crear las burbujas. Dentro de cada nueva burbuja se integr un <div> de HTML, lo que nos permita insertar dentro cualquier trozo de cdigo que necesitsemos. Esta clase JavaScript, adems de crear cada una de las pelotas y situarlas en la pantalla, registraba las diferentes acciones del usuario con el ratn, el tamao de la pantalla y las diferentes pelotas creadas, lo que permita mover las pelotas por toda la pantalla e que interactuasen unas con otras. Para otorgar de fsica a las bolas, es decir, que se comportasen como pelotas reales, se utilizaron 2 libreras externas; protoclass.js y box2d.js, las cuales eran llamadas 88
desde la clase principal, para luego reflejar el movimiento en el panel canvas (Figura 3.25). Una vez creada la forma en la que mostrar las tecnologas, era necesario desarrollar un sistema para poder buscar tecnologas que se adecuen a las caractersticas que usuario necesita. Para ello, si creo un sistema de filtrado (ver Figura 3.2) mediante formularios HTML, el cual se complement con unas libreras de diseo, para poder ocultarlo y dejar el mximo de pantalla libre posible. SpryCollapsiblePanel.js: mediante la cual se pueden crear paneles que se pueden contraer y expandir.
SpryMenuBar.js: librera para generar automticamente mens desplegables. El acceso a la base de datos para realizar cada una de las consultas, utiliza AJAX, ya que era necesario recargar los datos sin que el resto de la pantalla se viera afectada. Cuando la aplicacin principal se complet, se pas a crear una interfaz en la que integrarla, para ello se hizo uso de hojas de estilo en cascada, aprovechando la funcionalidad que ofreca la ltima versin (CSS3) y utilizando imgenes vectorizadas, diseadas exclusivamente para la aplicacin, como logos , iconos y ttulos. Para visualizar cada una de las tecnologas, se cre una pgina dinmica la cual mostraba los datos dependiendo de la tecnologa, incluyendo un sistema para valorar cada una de las tecnologas mediante estrellas (Figura 3.24) controladas por funciones JavaScript y accesos a la base de datos, y un apartado en el que los usuarios tienen la posibilidad de dejar sus comentarios sobre cada una de las tecnologas.
Figura 3.24 Detalle sistema de puntuacin
Como una de las ltimas mejoras, esta pgina en la que se muestran los detalles de las tecnologas, se incluy unas libreras que permitan que esta pgina se abriera sobre la pgina de la aplicacin principal, apareciendo de forma animada ocupando parte de la pantalla y ensombreciendo la restante. Lo que otorga al usuario la sensacin de una completa integracin y permitiendo cerrar esta informacin, para volver a la bsqueda anteriormente realizada.
89
Adems de todas estas ventanas las cuales componen gran parte del frontend de la aplicacin, tambin existen varias ventanas que conforman la zona de administracin. Este apartado, no tiene nada en especial de implementacin que destacar, ya que la mayora esta creado mediante formularios HTML, accesos a la base de datos mediante PHP y un pequeo sistema de paginacin de resultados realizado mediante JavaScript.
3.3
Funcionalidad Principal
La aplicacin creada, tiene como objetivo principal ayudar y asistir a los desarrolladores en la eleccin de las tecnologas existentes, para la creacin de aplicaciones Web. Esta aplicacin consta de una ventana principal, Figura 3.25, la cual muestra todas las tecnologas existentes recogidas en la base de datos. Con la intencin de que no fuera un simple listado y usando nuevas tecnologas para mostrar la potencia de las mismas, las tecnologas se muestran dentro de pelotas, que rebotan entre ellas y con los bordes de la pantalla, simulando el comportamiento que tendran pelotas de goma dentro de un recipiente. Al igual que si la pantalla fuera una caja llena de pelotas, el usuario podr coger una pelota con el ratn y desplazarla por dentro de la pantalla, con lo que el resto de pelotas se movern en funcin del movimiento de la pelota elegida, rebotando al chocar con ella y ocupando los espacios vacos, atradas al fondo de la pantalla por una ficticia gravedad. El usuario tambin podr agarra la pantalla del explorador, para moverla o agitarla, con lo que las pelotas se movern por la accin de esta, como si de un recipiente real se tratase.
90
Figura 3.25 Inicio de la Aplicacin
Cuando se inicia la aplicacin, las pelotas llenaran la pantalla con todas las tecnologas cargadas en la base de datos del sistema, Figura 3.25 , cayendo desde la parte de arriba, para precipitarse contra la parte inferior. En este momento, la informacin que muestra la aplicacin es muy extensa y poco personalizada, pero si nos permitir hacernos una idea de las tecnologas ms populares a la hora de realizar aplicaciones Web y de la cantidad de posibilidades que tenemos para cumplir nuestros objetivos de desarrollo software. Estas tecnologas, estarn divididas por colores, segn a la categora a la que pertenezcan, para hacer ms sencilla la identificacin de cada una. Cuando la aplicacin se inicia, conecta con la base de datos para consultar todas las tecnologas contenidas en ella y las carga en tablas dentro del HTML de la pgina Web. Estas tablas son consultadas por la clase encargada de generar las pelotas, la cual crea una circunferencia por cada una de las tecnologas e introduciendo dentro de ella un objeto <div>, lo que permite introducir cdigo HTML que se comportara como la pelota, (Figura 3.26). Estas pelotas, heredan su comportamiento fsico de dos clases JavaScript, que le otorgan el comportamiento animado de una pelota.
Figura 3.26 Detalle cdigo creacin de burbujas
Cada pelota, permite el acceso mediante un enlace, a las cualidades y caractersticas propias de cada tecnologa, informando al usuario de todos los datos tiles para el uso de esta. En esta seccin, la cual se despliega sobre la pantalla principal permitiendo cerrarla en cualquier momento y volver a las pelotas cargadas anteriormente, adems de poder 91
visualizar la informacin relativa a la tecnologa seleccionada, el usuario registrado tambin podr puntuarla mediante un sistema de estrellas (Figura 3.24) y realizar comentarios y aportaciones que enriquecern las caractersticas de la tecnologa dentro de la aplicacin. Para poder obtener informacin personalizada al tipo de necesidad que tenemos que cubrir, la aplicacin incluye un filtro mediante el cual un usuario puede introducir sus necesidades, las cuales son recogidas por un formulario y enviadas a la base de datos, mediante tecnologa Ajax que permite realizar consultas a los datos almacenados sin necesidad de refrescar la pgina. Esta consulta, devuelve las tecnologas que cumplen esos requisitos, modificando la tabla inicial creada por el sistema, y recargando las pelotas con la informacin personalizada. Este filtro, esta creado permitiendo la flexibilidad del sistema, por lo que se crea en funcin de los atributos contenidos en la base de datos, permitiendo aadir nuevos atributos, o borrar y modificar los existentes, sin que la aplicacin pierda funcionalidad. Esta caracterstica, abarca la posibilidad de que la aplicacin crezca segn las tecnologas cambian y evolucionan. El filtro, est clasificado segn el tipo de tecnologa y cada uno de estos contiene los atributos propios, la relacin entro los tipos de tecnologas y las licencias, que son comunes a todos los tipos. Para usar el filtro, el usuario debe desplegarlo, ya que este se encuentra inicialmente oculto, para facilitar la visualizacin de la informacin. Dentro de cada pestaa desplegable, estn organizados, dentro de mens, los atributos segn al grupo al que pertenezcan, los cuales aparecen al situar el cursor del ratn encima de cada grupo, permiten al usuario elegir las caractersticas que desee. Cada grupo mostrara cual es el atributo seleccionado, sin necesidad de desplegar cada una de las lista, lo que permite al usuario, utilizarlo con mayor eficacia y rapidez. Una vez seleccionadas todas las caractersticas, el usuario pulsara el botn filtrar con lo que las nuevas tecnologas aparecern en la pantalla. Adems de ese botn, la aplicacin cuenta con un botn reset, con el que volver el filtro al estado inicial (mostrara todas las tecnologas) y un botn ayuda, en el que el usuario podr consultar las diferentes opciones de la aplicacin. La aplicacin distinguir varios tipos de usuarios, lo que permitir que accedan a distintas funcionalidades del sistema. Los visitantes, podrn acceder a la pantalla principal, y hacer uso del filtro para realizar sus consultas, pero si desea acceder a la informacin complementaria, as como contribuir con la aplicacin, deber estar registrado e identificado en el sistema. Para registrarse en el sistema, el usuario debe rellenar un formulario con sus datos personales, los cuales quedaran almacenados en la aplicacin, lo que permitir que el mismo acceda a toda la funcionalidad del sistema (Figura 3.27).
92
Figura 3.27 Panel de Identificacin
Otra parte importante de la aplicacin, es el backend o zona de administracin (Figura 3.4), lo que permite a usuarios con derechos de administracin acceder a esta seccin y actualizar los contenidos del sistema. En esta zona, el administrador, mediante sencillos pasos e introduciendo la nueva informacin mediante formularios, mantendr al da la aplicacin evitando que esta s que obsoleta segn evolucionan las tecnologas y cambian los gustos de los usuarios. Cada una de las pginas de administracin, est compuesta por un formulario en el que sus elementos son combo box (lista de opciones seleccionables), para los atributos que solo pueden adquirir valores predeterminados y cajas de texto en el que poder escribir el resto de atributos. Una vez completado el formulario y pulsado el botn enviar, los datos son almacenados en la base de datos.
3.4
Marco Aplicacin
La herramienta creada para llevar a cabo este proyecto, se ha rodeado de otras aplicaciones y herramientas, que la complementan y han ayudado su desarrollo. Debido a la gran cantidad y variedad de informacin que deba manejar y consultar, necesite de herramientas que me ayudaran a gestionarla. La primera necesidad que tuve, fue la creacin de un diagrama conceptual, con el que separar los diferentes conceptos y ver la envergadura del sistema, as como realizar una buena clasificacin y divisin del problema a tratar. La herramienta usada para ello, es Bubbl.us (Caballero, 2010), una aplicacin Web gratuita, que permite la creacin de diagramas conceptuales, con los visualizar los diferentes conceptos de forma rpida e intuitiva.
93
Figura 3.28 Bubbl.us - Diagrama Conceptual
94
En esta versin del diagrama, Figura 3.28 , podemos ver una de las primeras clasificaciones con algunas de las tecnologas encontradas para el desarrollo de aplicaciones Web. A partir de este primer diseo, empez la bsqueda y documentacin de las distintas tecnologas, con la que poder construir la aplicacin de este proyecto. A la hora de realizar la historia sobre Internet, apareci el problema de relacionar unos hitos con otros, debido a que los vnculos comunes entre ellos eran pocos o ninguno. Esto complicaba considerablemente, realizar una narracin sobre la historia de Internet. Otro problema, era la aparicin de hechos relevantes independientemente de la fecha en la que ocurrieron, por lo que tener una buena clasificacin era complicado. Para solventar estos problemas, lo ms adecuado era la utilizacin de una lnea temporal, en la que ir marcando los diferentes hechos, ordenados de manera cronolgica. Para ello, la herramienta Dipity (Figura 3.29), permiti realizar una lnea de tiempo, en la que de forma visual y atractiva, podemos acceder a los hechos ms relevantes de la historia de Internet.
Figura 3.29 Lnea temporal- La Historia de Internet
Esta herramienta, permite consultar y actualizar los contenidos a cualquier usuario, por lo que es una herramienta muy til para crear historias que se encuentran en continuo crecimiento. Una vez, empezada la recopilacin de la informacin, se hizo evidente la necesidad de alguna herramienta que ayudase a su clasificacin y visualizacin. Para ello, se cre una wiki que contendra toda la informacin referente a cada una de las tecnologas y 95
otros datos importantes del proyecto, como son los anteriores grficos. Esta wiki, se cre haciendo uso de la aplicacin Wikispace.com (Caballero, 2010), en el que se fue recopilando toda la informacin referente a las tecnologas investigadas. Podemos ver una captura de la wiki en la Figura 3.30.
Figura 3.30 Wiki - Herramientas-Web
3.5
Tecnologas Empleadas
Para llevar a cabo este proyecto, ha sido necesaria la utilizacin de numerosas tecnologas, tanto para cubrir carencias que las primeras tecnologas utilizadas no proporcionaban, como para tener un mayor conocimiento de algunas de las tecnologas de desarrollo Web, las cuales luego estaran incluidas dentro de la aplicacin. Tecnologas utilizadas: HTML 5 Css 3 Php 5.3.5 Ajax 96
JavaScript TortoiseSVN 1.6.15 MySQL 5.5.8 Apache 2.2.17 SQL-front 5.1 Adobe Dreamweaver CS5 Chrome 11, Firefox 4 e IE 8 y 9 AAA Logo 2010
La tecnologa seleccionada previamente al comenzar el proyecto, fue HTLM 5, debido a su reciente aparicin y al potencial que tena. Para poder utilizar toda la funcionalidad de este nuevo estndar, es necesario acompaarlo de la nueva versin especificaciones de Hojas de Estilo en Cascada, CSS3, lo que aportara nuevos y modernos estilos a nuestra aplicacin, y JavaScript, lenguaje que utilizaramos para otorgar funcionalidad a nuestra aplicacin. Para la base de datos se eligi el gestor MySQL, y para interactuar con ella JSP, pero este lenguaje se descart debido a sus complicaciones para comunicar con la base de datos, y se sustituy por PHP, cuya relacin con MySQL es muy buena. Para poder ejecutar archivos en PHP, es necesario un servidor que lo soporte como es Apache. WAMP v2.1 fue el sistema de infraestructura de Internet, con el cual instalamos todas las herramientas necesarias para empezar a desarrollar la aplicacin. Herramientas usadas por WAMP: Windows Apache MySQL PHP
El IDE elegido para el desarrollo de la aplicacin fue Adobe Dreamweaver CS5, aplicacin est destinada a la construccin y edicin de sitios y aplicaciones Web basados en estndares. Para crear las imgenes e iconos vectorizados, se ha utilizado la herramienta AAA Logo, especialmente diseada para la realizacin de logos. Otros programas utilizados para dar soporte al desarrollo son, TortoiseSVN 1.6.15, cliente para Subversin, sistema de gestin de versiones que automatiza las tareas de 97
guardar, recuperar, registrar, identificar y mezclar versiones de archivos, y SQL-Front, administrador de bases de datos MySQL Para visualizar los avances realizados, es necesario utilizar un explorador de Internet. En este caso he utilizado los ms populares, para comprobar las compatibilidades y formas de visualizacin.
3.6
Conclusiones
Este captulo, otorga al lector una idea clara de cmo se ha desarrollado la herramienta. Dndole los conocimientos necesarios para poder desarrollar y comprender el funcionamiento interno de la misma. Empezando desde un nivel muy alto, lo que permitira entender el funcionamiento de la herramienta, a cualquier persona sin conocimientos de desarrollo software, pasando un nivel ms bajo de detalle, con lo que cualquier desarrollador podra trabajar sobre la misma herramienta, actualizndola y proporcionado mantenimiento. Para describir esta herramienta, hemos seguido los pasos clsicos dentro de la ingeniera del software, que son: Requisitos Anlisis Diseo Implementacin
Utilizando para documentarlos los diagramas de UML, realizados mediante el programa Enterprise Architect. Como podemos observar, despus de leer este captulo, es la gran variedad de lenguajes y herramientas utilizadas para llevar a cabo esto proyecto, lo que me ha proporcionado una amplia visin de las tecnologas de desarrollo web.
98
CAPITULO 4. CONCLUSIONES Y TRABAJO FUTURO
Una vez descrito todo el proceso de anlisis, diseo e implementacin de la aplicacin de apoyo al desarrollador web, en este captulo se resumen las conclusiones obtenidas tras el diseo, implementacin y casos de estudio realizados, indicando las caractersticas recoge este proyecto y las posibles lneas futuras.
99
4.1
Conclusiones
El objetivo principal de este proyecto consista en disear e implementar una aplicacin Web que gue al desarrollador, tanto profesional como recin iniciado, en la eleccin de las distintas tecnologas para sus propias aplicaciones. Este objetivo ha sido superado, dando lugar a una aplicacin Web intuitiva, usable y de atractivo diseo, la cual ayudar los desarrolladores a la hora de elegir tecnologas para sus proyectos. Para poder llegar a este resultado final, ha sido necesario ir superando cada uno de los objetivos descritos en el Captulo 1. Se comenz realizando un estudio sobre todas las tecnologas destinadas al desarrollo web de ltima generacin, con la intencin de conocer cul era las ltimas tendencias en diseo y elegir las herramientas ms acordes para disear esta aplicacin. Una vez realizado el estudio y decidir que era esencial utilizar la ltima versin de HTML, para obtener una aplicacin moderna y potente, adems de una bases de datos y algn lenguaje que otorgara dinamismo a la pgina, se pas a estudiar el resto de tecnologas as como sus similitudes y diferencias, lo que nos permiti desarrollar posible clasificacin, flexible, de tecnologas que sirvi como punto de partida de la herramienta. Una vez creada la base terica, se pas al diseo e implementacin de la aplicacin, la cual supuso todo un reto debido a los escasos conocimientos que tena respecto al desarrollo de herramientas web. Los comienzos fueron difciles, y varias veces se tomaron decisiones que ms tarde fueron descartadas, ya que llevaban a caminos sin salida o que no ofrecan los resultados esperados. Cuando el motor de la aplicacin fue acabado, es decir, la herramienta era funcional, se pas al diseo de la interfaz de usuario, as como del resto de complementos que conseguan que la aplicacin fuera completa y atractiva. Despus de la construccin del sistema se realiza una evaluacin de la usabilidad, cuyo objetivo principal es garantizar la calidad en uso del sistema. Tras realizar un anlisis de todos los datos obtenidos, se corrigieron los errores encontrados, y se puede asegurar que el sistema es intuitivo y fcil de utilizar.
101
4.2
Trabajo Futuro y Posibles Ampliaciones
Para finalizar con este ltimo captulo, comentaremos algunas de las propuestas que se podran aadir, al trabajo actual, en trabajos futuros: Ampliar las posibilidades de flexibilidad de la herramienta, de cara a que aparezcan nuevas tecnologas, que obliguen a crear una nueva divisin del filtro. Reconstruir la aplicacin para que puede ser usada en dispositivos mviles. Debido al gran aumento de usuarios de tecnologas mviles, es muy recomendable que esta herramienta pueda ser consultada desde estos dispositivos, lo que nos llevara a un nuevo diseo de la aplicacin ya que la informacin mostrada dentro de burbujas, no es factible debido al reducido tamao de las pantallas de estos. Preparar la aplicacin para su despliegue en Internet. Para que todos los usuarios puedan beneficiarse de esta aplicacin, es necesario colgarla en la red, por lo que se debe contratar un servicio de alojamiento, registrar un nombre de domino y subir todos los archivos al espacio web. Creacin de un asistente Paso a Paso. Una posible propuesta para el futuro, es la creacin de un asistente que guie al usuario mediante breves y sencillos cuestionarios, basados en la funcionalidad actual, variando segn la respuesta anterior, los cuales obtendrn toda la informacin referente a las necesidades del desarrollador y generen la recomendacin ms idnea a sus necesidades
102
BIBLIOGRAFA
Adobe Flash Adobe Flash Professional [Online] // Wikipedia. - Junio 09, 2011. Junio 16, 2011. - http://es.wikipedia.org/wiki/Adobe_Flash. Alvarez Miguel Angel Introduccin al taller de ASP.NET Desarolloweb. noviembre 09, 2006. Mayo 11, http://www.desarrolloweb.com/articulos/introduccion-taller-asp-net.html. [Online] // 2011. -
Alvarez Miguel Angel Manual de jQuery [Online]. - Marzo 25, 2009. - Mayo 11, 2011. - http://www.desarrolloweb.com/manuales/manual-jquery.html. Alvarez Miguel Angel Programacin en JavaScript [Online] // Manuales. - julio 16, 2001. - Mayo 10, 2011. - http://www.desarrolloweb.com/articulos/490.php. Alvarez Miguel Angel Tutorial de Visual Basic Script [Online]. - Enero 01, 2001. Mayo 10, 2011. - http://www.desarrolloweb.com/manuales/tutorial-visual-basic-scriptmanual.html. Alvarez Rubn Manual de Flash [Online] // Desarrolloweb. - septiembre 19, 2003. Junio 16, 2011. - http://www.desarrolloweb.com/manuales/39/. Alvarez Rubn Programacin en PHP [Online]. - Enero 1, 2001. - Mayo 10, 2011. http://www.desarrolloweb.com/manuales/12/. Arcos Eduardo Historia del internet: 40 aos del primer enlace entre dos nodos de ARPANET [En lnea]. - 29 de Octubre de 2009. - 9 de Diciembre de 2010. 103
http://alt1040.com/2009/10/historia-del-internet-40-anos-del-primer-enlace-entre-dosnodos-de-arpanet. Aroche Stephanie Falla La historia de Internet [En lnea]. - 14 de Febrero de 2006. 9 de Diciembre de 2010. - http://www.maestrosdelweb.com/editorial/internethis/. Arroyo Rosala RIM muestra WebWorks, una plataforma de desarrollo basada en web [Online] // ITespresso. - Septiembre 28, 2010. - Diciembre 19, 2010. http://www.itespresso.es/rim-muestra-webworks-una-plataforma-de-desarrollo-basada-enweb-47369.html. Bailn Alejandro Martn HTML5 e Internet Explorer 9 [Online] // Almacenamiento local en HTML 5. Abril 25, 2011. Mayo 10, 2011. http://www.desarrolloweb.com/articulos/almacenamiento-local-html5.html. Barriocanal Luis Qu es joomla? [Online]. - Octubre 17, 2009. - Mayo 17, 2011. http://www.edujoomla.es/que-es-joomla. Berners-Lee World Wide Web [Online] // Primera pagina web. - 1991. - Mayo 03, 2011. - http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html. BestWebFrameworks Bestwebframeworks http://www.bestwebframeworks.com/. [Online]. 2011. -
BlackBerry BlackBerry WebWorls SDK [Online]. - 2011. - Mayo 11, 2011. http://docs.blackberry.com/eses/developers/categories/?userType=21&category=BlackBerry+WebWorks+SDK. Caballero Csar Snchez-Mata Diagrama Conceptual [Online] // Bubbl.us. 2010. - https://bubbl.us/?h=626c8/bb62a/40CrTsNUk77Dw. Caballero Csar Snchez-Mata Historia de Internet [Online] // Dipity. - 2011. http://www.dipity.com/raxec/History-of-the-Internet-Copy/. Caballero Csar Snchez-Mata WikiSpace [Online] // Herramientas-Web. - 2010. http://herramientas-web.wikispaces.com/. Camy Lzaro Issi JavaScript [Book]. - [s.l.] : Anaya Multimedia-Anaya Interactiva, 2002. 104
Carlson David Modeling XML Application with UML [Book]. - [s.l.] : AddisonWesley, 2001. Cervera Jos Breve historia de Internet (I al XIV) [Online] // 20minutos.es. - Marzo 22, 2005. Diciembre 9, 2010. http://www.20minutos.es/noticia/6528/0/breve/historia/internet/. Channel Discovery Internet [Online] // Discovery Channel. - 2010. - Diciembre 9, 2010. - http://www.tudiscovery.com/internet/interactivo.shtml. Clientcide Aaron Newton of jQuery vs MooTools [Online]. - Mayo 2009. - Mayo 11, 2011. - http://jqueryvsmootools.com/index_es-ar.html. Comunic-Art Tutorial Drupal [Online]. http://www.cursosdrupal.com/content/indice. 2008. Junio 16, 2011. -
Corts Alejandro Flora Algunos cuestionarios conocidos [Online]. - 2000. 2011. - http://www.sidar.org/recur/desdi/traduc/es/visitable/nuevos/CuestCon.htm. DedaSys Programming Language Popularity [Online]. - 2011. - http://langpop.com/. Dolan Kevin jsAnim [Online]. - 2010. - Diciembre 20, 2010. - http://jsanim.com/. Dries Buytaert Drupal Hispano [Online] // Comunidad de usuarios de Drupal. 2010. - Diciembre 19, 2010. - http://drupal.org.es/. Drupal Hispano Manuales de Drupal Hispano [Online] // Comunidad de usuarios de Drupal. - Abril 11, 2005. - Junio 16, 2011. - http://drupal.org.es/drupal. dTecn.com Abierto el BlackBerry WebWorks SDK 2.0 para desarrolladores [Online]. - Abril 20, 2011. - Mayo 11, 2011. - http://dtecn.com/blackberry-webworks/. Enrquez Toledo Alma Maldonado Ayala Jess, Nakamura Ortega Yunko y Nakamura Ortega Yunko MySql [Online]. - 2005. - Mayo 11, 2011. http://www.uaem.mx/posgrado/mcruz/cursos/miic/MySQL.pdf. estudiosimbiosis Estudios Simbiosis [Online] // Internet, su historia y evolucin. 2009. - http://www.estudiosimbiosis.com.ar/internet.
105
eXe-Spain eXeLearning en Espaol [Online] // Wiki sobre el editor de recursos educativos Open Source eXe Learning. - abril 27, 2010. - Diciembre 20, 2010. http://www.exe-spain.es/wiki/doku.php. franjm93 Evolucion de la web [Online]. http://es.calameo.com/read/000053297d9977b4b1d5a. 2009. Mayo 05, 2011. -
Fuentes Juan Mariano AJAX, Fundamentos y Aplicaciones. [Book]. - 2009. Grady Booch James Rumbaugh El lenguaje unificado de modelado [Book]. Madrid : Pearson, 2006. Heinley Derek Dukes and BJ Dipity [Online]. - 2008. - http://www.dipity.com/. Hooping Historia del diseo web [Online]. - 2008. - Mayo 03, 2011. http://www.hooping.net/faq-historia-diseno-web.aspx. ITU International Telecommunication Union [Online] // ITU estimates two billion people online by end 2010. - Octubre 19, 2011. - Abril 30, 2011. http://www.itu.int/net/pressoffice/press_releases/2010/39.aspx. Jeff Introduccin a HTML [Online]. - Octubre 16, 2008. - Mayo 10, 2011. http://es.kioskea.net/contents/html/htmlintro.php3. jGuru Introduction to JavaServer Pages technology [Online]. - Septiembre 2000. Mayo 10, 2011. - http://java.sun.com/developer/onlineTraining/JSPIntro/. JL Clasificacin de los lenguajes de programacin [Online] // Clasificados segn el estilo de programacin y el modo de traduccin. - febrero 16, 2007. - Mayo 16, 2011. http://elticus.com/?contenido=44. Joomlaos.net Qu es Joomla? [Online] // Joomlaos. - 2010. - Mayo 17, 2011. http://www.joomlaos.net/ique-es-joomla. Karich Martin El blog de Windows para America Latina [Online] // Microsoft WebMatrix a detalle. Enero 14, 2011. Mayo 11, 2011. http://windowsteamblog.com/international/b/latam/archive/2011/01/14/microsoftwebmatrix-a-detalle.aspx.
106
Khronos Clasificacin de lenguajes de programacin [Online]. - abril 1, 2010. Mayo 16, 2011. - http://daw-labs.com/clasificacion-de-lenguajes-de-programacion/. Layers Layers [Online]. http://layers.com/about_us?lang=es_ES. 2010. Diciembre 20, 2010. -
Matsumoto Yukihiro matz An Interview with the Creator of Ruby [Interview]. Noviembre 29, 2009. Matsumoto Yukihiro matz Matz, hablando en la lista de correo Ruby-Talk // More code browsing questions. - Mayo 12, 2000. Microsoft ASP.NET y Visual Web Developer [Online] // msdn. - 2011. - Mayo 11, 2011. - http://msdn.microsoft.com/es-es/library/dd566231.aspx. Microsoft Corporation .NET Framework [Online] // msdn Microsoft. - 2010. Diciembre 19, 2010. - http://msdn.microsoft.com/es-es/netframework/default. Microsoft Corporation Centro de desarrollo de Silverlight [Online] // msdn Microsoft. 2010. Diciembre 19, 2010. http://msdn.microsoft.com/eses/silverlight/default.asp. Microsoft Corporation WebMatrix [Online] // Microsoft/Web. - 2010. - Diciembre 19, 2010. - http://www.microsoft.com/web/webmatrix/. Microsoft WebMatrix [Online] // Microsoft. http://www.microsoft.com/web/webmatrix/. 2011. Mayo 11, 2011. -
Murphey Rebecca Fundamentos de jQuery [Online]. - 2011. - Mayo 11, 2011. http://librojquery.com/. MySQL AB MySQL 5.0 Reference Manual [Online]. - 2011. - Mayo 11, 2011. http://dev.mysql.com/doc/refman/5.0/es/index.html. Nakamura Diego F. Guilln Ruby Fcil [Book]. - 2006. Net Applications [Online]. - Febrero http://marketshare.hitslink.com/Default.aspx. 10, 2011. Mayo 17, 2011. -
Obcena Mark Pro JavaScript with MooTools [Book]. - [s.l.] : Apress, 2010. 107
Oestereich Berd Developing Software with UML [Book]. - R. Oldenbourg Verlag : Addison-Wesley, 2001. omarh Sistemas distribuidos [Online] // monografias.com. - 2006. - Mayo 16, 2011. http://www.monografias.com/trabajos16/sistemas-distribuidos/sistemasdistribuidos.shtml#CLIENTE. Oracle Oracle Database [Online]. 2011. http://www.oracle.com/es/products/database/index.html. Mayo 11, 2011. -
O'Reilly Tim O'Reilly [Online]. - Octubre 30, 2005. - Junio 7, 2011. http://oreilly.com/web2/archive/what-is-web-20.html. Ors Jose Luis Adobe Flash CS3 [Book]. - Madrid : Ra-Ma, 2008. Ors Jose Luis Flash Professional CS4 [Book]. - Madrid : Ra-Ma, 2009. Patel Sonal Web http://antriksh.com/resources/. Developer's Bookmarks [Online]. 2011. -
Pecos Daniel MySQL [Online] // PostGreSQL vs. MySQL. - 2009. - mayo 11, 2011. - http://danielpecos.com/docs/mysql_postgres/x57.html. Prez Javier Eguluz Introduccin a AJAX [Book]. - [s.l.] : librosweb.com, 2008. Prez Javier Eguluz Introduccin a CSS [Book]. - [s.l.] : librosweb, 2009. Prez Javier Eguluz Introduccin a JavaScript [Book]. - [s.l.] : librosweb, 2009. Prez Javier Eguluz Introduccin a XHTML [Libro]. - [s.l.] : www.librosweb.es, 2008. Peter Lubbers Brian Albes and Frank Salin Pro HTML 5 Programming [Book]. [s.l.] : Apress, 2010. php.net PHP [Online]. - 2010. - Mayo 10, 2011. - http://www.php.net/. PIMENTEL VCTOR Las novedades de HTML5 [Online]. - Junio 13, 2009. Mayo 10, 2011. - http://www.anexom.es/tag/html5/. 108
Pohl K. y Rupp, C. Basiswissen Requirements Engineering [Book]. - Heidelberg : Dpunkt, 2009. Potencier Franois Zaninotto y Fabien Symfony 1.2, la gua definitiva [Book]. [s.l.] : Apress, 2008. Prescod Charles F. Goldfarb y Paul Manual de XML [Book]. - Madrid : Prentice hall, 1999. Presuman Roger S. Ingeniera de Software [Book]. - Madrid : McGraw-Hill, 2002. RAE Real Academia Espaola [Online] // Diccionario de la lengua espaola. 2011. - http://www.rae.es/rae.html. Research In Motion BlackBerry WebWorks y Open Source [Online] // BlackBerry. 2010. diciembre 19, 2010. http://us.blackberry.com/developers/browserdev/opensource.jsp. Ruby on Rails Ruby on Rails [Online] // El desarrollo Web que no molesta. - 2011. Mayo 11, 2011. - http://www.rubyonrails.org.es/. S. Christian Van Der Henst Maestros del Web [Online]. - Octubre 25, 2005. - Junio 07, 2011. - http://www.maestrosdelweb.com/editorial/web2/. Snchez-Mata Csar Historia de Internet [Online] // Dipity. - Octubre 25, 2010. http://www.dipity.com/raxec/History-of-the-Internet-Copy/. Sierra Antonio Martin Desarrollo de Aplicaciones web con ASP.Net [Book]. [s.l.] : Ra-MA, 2007. Sirvent Javier Hernndez CREACIN DE UN SERVIDOR WEB CON SVN.pdf. - 2007. SpringSource Springsource [Online] // Spring Framework. - 2010. - Diciembre 19, 2010. - http://www.springsource.org/. superburo.com Featured Drupal Sites [Online]. - 2005. - Junio 16, 2011. http://www.drupalsites.net/.
109
symfony.es Symfony http://www.symfony.es/.
[Online]. -
2010. -
Dieciembre
19,
2010. -
The Eclipse Foundation PHP Development Tools Project [Online] // Eclipse. 2010. - Diciemebre 19, 2010. - http://www.eclipse.org/pdt/. The jQuery http://jquery.com/. Project jQuery [Online]. 2010. Diciembre 19, 2010. -
TIOBE Software TIOBE Programming Community http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html.
[Online]. -
2011. -
tufuncion.com 8 lenguajes de programacin que deberas aprender [Online]. Septiembre 17, 2007. - Octubre 6, 2010. - http://www.tufuncion.com/diferentes-lenguajesprogramacion. tufuncion.com La primera pgina, el primer banner, la primera imagen de Internet [Online]. - Julio 07, 2007. - Mayo 03, 2011. - http://www.tufuncion.com/historia-paginainternet. Valerio Proietti mootols.net [Online] // A compact, modular, Object-Oriented JavaScript framework. - 2009. - Mayo 11, 2011. - http://mootools.net/. W3C Gua Breve de Tecnologas XML [Online]. - enero 19, 2008. - Junio 17, 2011. - http://www.w3c.es/divulgacion/guiasbreves/tecnologiasxml. WEBFLUX CSS3 Previews [Online] // CSS3.info. - 2009. - Mayo 11, 2011. http://www.css3.info/preview/. Wikimedia ASP.NET [Online] // Wikipedia. - Mayo 06, 2011. - Mayo 11, 2011. http://es.wikipedia.org/wiki/ASP.NET. Wikimedia Base de datos relacional [Online] // Wikipedia. - 2 4, 2011. - 2 20, 2011. - http://es.wikipedia.org/wiki/Base_de_datos_relacional. Wikimedia Framework [Online] // Wikipedia. - Diciembre 11, 2010. - Diciembre 2010, 19. - http://es.wikipedia.org/wiki/Framework. Wikimedia Hojas de estilo en cascada [Online] // Wikipedia. - Mayo 7, 2011. Mayo 11, 2011. - http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada. 110
Wikimedia JavaServer Pages [Online] // Wikipedia. - Marzo 27, 2011. - Mayo 10, 2011. - http://es.wikipedia.org/wiki/JavaServer_Pages. Wikimedia Lenguaje de programacin [Online] // Wikipedia. - Abril 28, 2011. Mayo 9, 2011. - http://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n. Wikimedia PHP [Online] // Wikipedia. - Junio 15, 2011. - Junio 28, 2011. http://es.wikipedia.org/wiki/PHP. Wikimedia Spring Framework [Online] // Wikipedia. - Noviembre 30, 2010. Diciembre 19, 2010. - http://es.wikipedia.org/wiki/Spring_Framework. Wikimedia Symfony [Online] // Wikipedia. - Octubre 10, 2010. - Diciembre 19, 2010. - http://es.wikipedia.org/wiki/Symfony. Wikipedia Drupal [Online] // Wikipedia. - mayo 29, 2011. - Junio 16, 2011. http://es.wikipedia.org/wiki/Drupal. Wikipedia Extensible Markup Language [Online]. - Junio 2, 2011. - Junio 17, 2011. - http://es.wikipedia.org/wiki/Xml. Wikipedia HTML [Online]. http://es.wikipedia.org/wiki/HTML. Mayo 05, 2011. Mayo 10, 2011. -
Wilimedia Mootools [Online] // Wikipedia. - Octubre 19, 2010. - Diciembre 19, 2010. - http://es.wikipedia.org/wiki/Mootools. wordpress.org About http://wordpress.org/about/. WordPress [Online]. 2010. Mayo 17, 2011. -
Zakas McPeak y Fawcett Profesional Ajax [Book]. - Madrid : Anaya, 2007.
111
GLOSARIO DE TRMINOS
CDONTS Se trata de un componente incluido en Windows NT server y Windows 2000 server. Este complemento facilita la creacin y envo de mensajes de correo desde los scripts de aplicaciones Web, principalmente desde pginas ASP. CGI Interfaz de entrada comn (en ingls Common Gateway Interface, abreviado CGI) es una importante tecnologa de la World Wide Web que permite a un cliente (navegador Web) solicitar datos de un programa ejecutado en un servidor Web. CGI especifica un estndar para transferir datos entre el cliente y el programa. CLR Common Language Runtime. Es el componente de mquina virtual del .Net Framework de Microsoft. Los lenguajes de .Net como C#, VisualBasic, etc., tras la compilacin se pasan a un cdigo intermedio llamado MSIL. En tiempo de ejecucin el CLR transforma el MSIL en cdigo nativo de la mquina donde se ejecuta. CLR
113
El Common Language Runtime o CLR ("entorno en tiempo de ejecucin de lenguaje comn") es un entorno de ejecucin para los cdigos de los programas que corren sobre la plataforma Microsoft .NET. CMS El gestor de contenidos es una aplicacin informtica usada para crear, editar, gestionar y publicar contenido digital en diversos formatos. El gestor de contenidos genera pginas dinmicas interactuando con el servidor para generar la pgina Web bajo peticin del usuario, con el formato predefinido y el contenido extrado de la base de datos del servidor. DOM Document Object Model o DOM ('Modelo de Objetos del Documento' o 'Modelo en Objetos para la representacin de Documentos') es esencialmente una interfaz de programacin de aplicaciones (API) que proporciona un conjunto estndar de objetos para representar documentos HTML y XML, un modelo estndar sobre cmo pueden combinarse dichos objetos, y una interfaz estndar para acceder a ellos y manipularlos. A travs del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML, que es para lo que se dise principalmente. DRY Principio No te repitas (en ingls Don't Repeat Yourself o DRY, tambin conocido como Una vez y slo una) es una filosofa de definicin de procesos que promueve la reduccin de la duplicacin especialmente en computacin. Segn este principio toda pieza de informacin nunca debera ser duplicada debido a que la duplicacin incrementa la dificultad en los cambios y evolucin posterior, puede perjudicar la claridad y crear un espacio para posibles inconsistencias DTD Definicin de Tipo de Documento o DTD (siglas en ingls de document type definition) es una descripcin de estructura y sintaxis de un documento XML o SGML. Su funcin bsica es la descripcin del formato de datos, para usar un formato comn y mantener la consistencia entre todos los documentos que utilicen la misma DTD. Framework En el desarrollo de software, un framework es una estructura conceptual y tecnolgica de soporte definida, normalmente con artefactos o mdulos de software 114
concretos, con base en la cual otro proyecto de software puede ser organizado y desarrollado. Tpicamente, puede incluir soporte de programas, bibliotecas y un lenguaje interpretado entre otros programas para ayudar a desarrollar y unir los diferentes componentes de un proyecto. IIS Internet Information Services o IIS es un servidor Web y un conjunto de servicios para el sistema operativo Microsoft Windows. JDBC Java Database Connectivity, ms conocida por sus siglas JDBC, es una API que permite la ejecucin de operaciones sobre bases de datos desde el lenguaje de programacin Java, independientemente del sistema operativo donde se ejecute o de la base de datos a la cual se accede, utilizando el dialecto SQL del modelo de base de datos que se utilice JSON Acrnimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notacin literal de objetos de JavaScript que no requiere el uso de XML. JSRS El Scripting remoto en JavaScript o (JSRS) es una tcnica de desarrollo Web para crear aplicaciones Web interactivas mediante el uso de una combinacin de HTML, DOM, Una capa de transporte y un formato de datos (como XML o JSON) Mixins En lenguajes de programacin orientada a objetos, un mixin es una clase que ofrece cierta funcionalidad para ser heredada por una subclase, pero no est ideada para ser autnoma. Motor Zend El motor Zend es un motor de procesamiento para la interpretacin y cifrado del cdigo php, desde la versin 4. Desarrollado por Zend Tecnologies para brindar un equipo de soporte y acelerar la carga de aplicaciones realizadas con php. 115
OLAP OLAP es el acrnimo en ingls de procesamiento analtico en lnea (On-Line Analytical Processing). Es una solucin utilizada en el campo de la llamada Inteligencia empresarial (o Business Intelligence) cuyo objetivo es agilizar la consulta de grandes cantidades de datos. Renderizar Renderizado (render en ingls) es un trmino usado en jerga informtica para referirse al proceso de generar una imagen desde un modelo. Este trmino tcnico es utilizado por los animadores o productores audiovisuales y en programas de diseo en 3D. RFQ Solicitud de presupuesto (tambin conocida como "Request for Quotes" o RFQ en ingls). Servlets La palabra servlet deriva de otra anterior, applet, que se refera a pequeos programas que se ejecutan en el contexto de un navegador Web. Por contraposicin, un servlet es un programa que se ejecuta en un servidor. SGML SGML son las siglas de Standard Generalized Markup Language o "Estndar de Lenguaje de Marcado Generalizado". Consiste en un sistema para la organizacin y etiquetado de documentos. Singleton El patrn de diseo singleton (instancia nica) est diseado para restringir la creacin de objetos pertenecientes a una clase o el valor de un tipo a un nico objeto.Su intencin consiste en garantizar que una clase slo tenga una instancia y proporcionar un punto de acceso global a ella. SMTP Simple Mail Transfer Protocol (SMTP) Protocolo Simple de Transferencia de Correo, es un protocolo de la capa de aplicacin. Protocolo de red basado en texto utilizado 116
para el intercambio de mensajes de correo electrnico entre computadoras u otros dispositivos (PDA's, telfonos mviles, etc.). WDDX WDDX (Web Distributed Data eXchange) es un estndar XML para el intercambio de informacin estructurada entre distintos lenguajes de programacin. XHTML Acrnimo en ingls de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estndar para las pginas Web. XMLHttpRequest Es una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores Web. Para los datos transferidos se usa cualquier codificacin basada en texto, incluyendo: texto plano, XML, JSON, HTML y codificaciones particulares especficas. La interfaz se presenta como una clase de la que una aplicacin cliente puede generar tantas instancias como necesite para manejar el dilogo con el servidor. XML Siglas en ingls de eXtensible Markup Language ('lenguaje de marcas extensible'), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). Es una simplificacin y adaptacin del SGML y permite definir la gramtica de lenguajes especficos
117
ANEXO A
ANEXO A. Plantilla evaluacin de la herramienta
En este anexo, se incluye la plantilla con el cuestionario de evaluacin de la usabilidad de la aplicacin. Este cuestionario, lo han realizado diferentes compaeros de la carrera, lo que me ha ayudado a medir la usabilidad de la aplicacin, as como encontrar diferentes errores dentro de la herramienta. Parte de esta plantilla, est recogida de otro cuestionario SUS desarrollado en 1986 como parte de la introduccin de la ingeniera de usabilidad a los sistemas de oficina de Digital Equipment Co. Ltd. Su propsito era proporcionar un test fcil de completar, fcil de puntuar y que permitiera establecer comparaciones cruzadas entre productos. Ha sido usado ampliamente en evaluaciones de proyectos en Digital, constatndose simple y fiable. La escala SUS se utiliza generalmente despus de que un usuario ha tenido la oportunidad de utilizar un sistema, pero antes de que cualquier informe o discusin tenga lugar. Se solicitar a los usuarios el registro inmediato de su respuesta a cada punto, en lugar de pensar durante mucho tiempo sobre ellas. Todos los puntos han de ser comprobados. Si el usuario no se siente capaz de responder a alguna cuestin en particular, habr de sealar el valor central de la escala. La escala SUS es una escala de estilo Likert que genera un nico nmero, representando una medida compuesta de la usabilidad del sistema global sometido a estudio. Hay que advertir que las puntuaciones independientes no son significativas por s mismas.
119
ANEXO A
120
ANEXO B
ANEXO B. Contenido del CD
En el contenido del CD que acompaa a la memoria podemos encontrar los siguientes recursos: Memoria del trabajo en los formatos PDF, DOCX y DOC dentro del directorio Memoria. Imgenes incluidas en la memoria Memoria/Imgenes Cdigo fuente del trabajo dentro del directorio Cdigo fuente. Imgenes y logos utilizados en dentro de la aplicacin dentro del directorio Cdigo fuente/Imgenes Archivo para importar las base de datos dentro del directorio Cdigo fuente Libros y artculos a los que se ha hecho referencia durante la memoria y que se han utilizado como bibliografa. Los cuales podemos encontrar en el directorio Bibliografa. Pginas Web que han servido de bibliografa. Las podemos encontrar dentro del directorio Bibliografa/Enlaces Web. Plantilla de Evaluacin de la Usabilidad dentro del directorio Memoria/Anexos Diagramas UML generados Memoria/Diagramas durante el proyecto dentro del directorio
121

TesinaInformatica Internet

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TesinaInformatica Internet

Uploaded by

Copyright:

Available Formats

UNIVERSIDAD DE CASTILLA-LA MANCHA ESCUELA SUPERIOR DE INGENIERA INFORMTICA

TRABAJO FIN DE GRADO

UNIVERSIDAD DE CASTILLA-LA MANCHA ESCUELA SUPERIOR DE INGENIERA INFORMTICA

TRABAJO FIN DE GRADO

Autor: CSAR SNCHEZ-MATA CABALLERO Director: VICTOR MANUEL RUIZ PENICHET

CAPITULO 2. REVISIN DE LA TECNOLOGA PARA EL DESARROLLO WEB

Historia de la Tecnologa en Internet

Figura 2.1 La Primera Pgina Web

Figura 2.2 Web Multimedia

Figura 2.3 Lnea Temporal

Modo de Ejecutarse (o modo de traduccin)

Las tecnologas que componen Ajax son:

XHTML DOM CSS Javascript XML XMLHttpResquest JSON

Figura 2.4 Tecnologas agrupadas bajo el concepto de AJAX

HTTP request HTML + CSS HTTP request HTML + CSS

Web & XML server

Servidor del Sistema

Datastore, backend processing, legacy systems

Servidor del Sistema

Figura 2.5 Comparativa modelo clsico y modelo Ajax

Tabla 2.1 Metadatos ASP

Figura 2.6 Estructura HTML 4

Figura 2.7 Estructura HTML5

Tabla 2.2 Metadatos HTML

o Propiedades orientadas a discurso o lectura automtica de pginas Web o Web Fonts

Tabla 2.3 Metadatos CSS

http://www.w3.org 1.1 2009-12-08 Cliente interpretado Textual Declarativo

Tabla 2.4 Metadatos XML

Tabla 2.5 Metadatos de JavaScript

Tabla 2.6 Metadatos de PHP

Tabla 2.7 Metadatos Ruby

http://java.sun.com/products/jsp/ 2.1 2009-05-17 servidor compilado Script O. objetos .jsp Libre

Tabla 2.8 Metadatos de JSP

Dreamweaver, que ofrece caractersticas y asistentes que mejoran el desarrollo en ColdFusion.

Tabla 2.9 Metadatos ColdFusion

Seguridad Extensibilidad Performance

Tabla 2.10 Metadatos de ASP.Net

Tabla 2.12 Metadatos de Drupal

Tabla 2.13 Metadatos de Flash

Tabla 2.14 Metadatos de JQuery

Tabla 2.15 Metadatos de Joomla!

Tabla 2.16 Metadatos de Mootools

Tabla 2.17 Metadatos Ruby on rails

Tabla 2.18 Metadatos de Symfony

Tabla 2.19 Metadatos de WebMatrix

Tabla 2.20 Metadatos de Wordpress

Figura 2.8 rbol base de datos jerrquica

Tabla 2.21 Metadatos de MySQL

Tabla 2.22 Metadatos de PostgreSQL

Tabla 2.23 Metadatos de Oracle

Tabla 2.24 Metadatos Access

Tabla 2.25 Metadatos de Microsoft SQL

CAPITULO 3. DESCRIPCIN DE LA HERRAMIENTA

Descripcin de Alto Nivel

Figura 3.1 Pantalla Principal

Figura 3.2 Detalles Filtro

Figura 3.3 Pantalla tecnologa especifica

Figura 3.4 Pantalla de administracin

Figura 3.5 Requisitos del sistema

UC 1.4 Modificar permisos

UC 1.1 Alta Usuarios

UC 1.2 Modificar Usuarios

UC 1.3 Borrar Usuarios