TesinaInformatica-Internet.docx

UNIVERSIDAD DE CASTILLA-LA MANCHA

ESCUELA SUPERIOR DE INGENIERÍA INFORMÁTICA

GRADO EN INFORMÁTICATecnología Específica de Ingeniería del Software

TRABAJO FIN DE GRADO

Diseño e Implementación de una Herramienta de Apoyo en la Selección de Tecnologías para el Desarrollador Web

César Sánchez-Mata Caballero

Julio, 2011

UNIVERSIDAD DE CASTILLA-LA MANCHA

ESCUELA SUPERIOR DE INGENIERÍA INFORMÁTICA

Departamento de Sistemas Informáticos

TRABAJO FIN DE GRADO

Diseño e Implementación de una Herramienta de Apoyo en la Selección de Tecnologías para el Desarrollador Web

Autor: CÉSAR SÁNCHEZ-MATA CABALLERO

Director: VICTOR MANUEL RUIZ PENICHET

Julio, 2011

Resumen

La evolución tecnológica que ha sufrido la sociedad en los últimos años ha impulsado nuevas posibilidades de servicios al usuario que era antes impensable. Gracias al creciente avance en los dispositivos móviles, 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 tecnologías.

Es por ello, que la demanda de aplicaciones Web ha crecido considerablemente en el los últimos años respecto a las aplicaciones de escritorio, teniendo cada vez menos sentido las aplicaciones no pensadas para la conexión a Internet. Para cubrir esa demanda, las tecnologías de desarrollo Web se han multiplicado a la vez que las existentes evolucionaban. Actualmente, esta oferta es tan grande que es difícil conocer todas las tecnologías para el desarrollo de aplicaciones Web, por lo que a los desarrolladores les cuesta decidir cuáles usar a la hora de afrontar nuevos proyectos, limitándose a utilizar aquellas con las que ya han trabajado, no siendo siempre la mejor elección posible.

En este proyecto se plantea la idea de implementar una aplicación Web que guíe al desarrollador en la elección de las tecnologías de desarrollo Web más adecuadas, utilizando para ello algunas herramientas de última generación. Este asistente ofrece la posibilidad al usuario de visualizar todas las tecnologías de desarrollo de aplicaciones, mediante una atractiva interfaz en la que interactuar, pudiendo introducir los requisitos tecnológicos de la aplicación a desarrollar para que el asistente muestre sólo las tecnologías que se adaptan a esas necesidades.

No se trata únicamente de una herramienta que muestre las tecnologías, sino también sus principales características y la información básica para empezar a documentarse y comenzar con el desarrollo mediante tecnologías a priori desconocidas La aplicación ofrece la posibilidad de que el usuario visualice la información necesaria para conocer los detalles de la tecnología que la herramienta le recomienda.

Debido a la constate actualización y cambio de los diferentes componentes del desarrollo Web, este asistente se adapta a la inserción de nuevas tecnologías así como a la modificación de los parámetros de selección, 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 gustaría agradecer a toda mi familia y en especial a mis padres por la confianza puesta en mí.

También quiero agradecer a mi tutor Víctor Manuel Ruiz Penichet, que me permitió realizar este proyecto con él. En el que sin su ayuda, consejos y ánimos, no lo habría conseguido.

Agradecer a todos mis amigos, que siempre han estado a mi lado, consiguiendo que estos años en Albacete sean inolvidables.

Dedicatorias

Este trabajo está dedicado a mi hermano Javier y a mis padres, César y Mª Concepción, que gracias a su apoyo incondicional y a su paciencia durante todos estos años, han permitido que realice este proyecto y finalice mis estudios.

¡Gracias!

ÍNDICE

CAPITULO 1. INTRODUCCIÓN..............................................................................1

1.1 Motivación......................................................................................................3

1.2 Objetivos.........................................................................................................4

1.3 Estructura de la Memoria...............................................................................5

CAPITULO 2. REVISIÓN DE LA TECNOLOGÍA PARA EL DESARROLLO

WEB.................................................................................................7

2.1 Historia de la Tecnología en Internet.............................................................9

2.2 Clasificación Tecnológica............................................................................15

2.2.1 Lenguajes...............................................................................................16

2.2.2 Herramientas..........................................................................................38

2.2.3 Bases de datos........................................................................................53

2.3 Herramientas Similares.................................................................................61

2.4 Conclusión....................................................................................................62

CAPITULO 3. DESCRIPCIÓN DE LA HERRAMIENTA......................................63

3.1 Descripción de Alto Nivel............................................................................65

3.2 Descripción Metodológica............................................................................68

3.2.1 Requisitos..............................................................................................68

3.2.2 Análisis..................................................................................................79

3.2.3 Diseño....................................................................................................82

3.2.4 Implementación.....................................................................................86

3.3 Funcionalidad Principal................................................................................90

3.4 Marco Aplicación.........................................................................................93

3.5 Tecnologías Empleadas................................................................................96

3.6 Conclusiones.................................................................................................98

CAPITULO 4. CONCLUSIONES Y TRABAJO FUTURO....................................99

4.1 Conclusiones...............................................................................................101

4.2 Trabajo Futuro y Posibles Ampliaciones....................................................102

BIBLIOGRAFÍA ......................................................................................................103

GLOSARIO DE TÉRMINOS...................................................................................113

ANEXO A. PLANTILLA EVALUACIÓN DE LA HERRAMIENTA.............119

ANEXO B. CONTENIDO DEL CD..................................................................121

III

ÍNDICE DE FIGURAS

Figura 2.1 La Primera Página Web.............................................................................11

Figura 2.2 Web Multimedia........................................................................................14

Figura 2.3 Línea Temporal.........................................................................................15

Figura 2.4 Tecnologías agrupadas bajo el concepto de AJAX...................................19

Figura 2.5 Comparativa modelo clásico y modelo Ajax............................................20

Figura 2.6 Estructura HTML 4...................................................................................22

Figura 2.7 Estructura HTML5....................................................................................23

Figura 2.8 Árbol base de datos jerárquica..................................................................54

Figura 3.1 Pantalla Principal.......................................................................................65

Figura 3.2 Detalles Filtro............................................................................................66

Figura 3.3 Pantalla tecnología especifica...................................................................67

Figura 3.4 Pantalla de administración........................................................................67

Figura 3.5 Requisitos del sistema...............................................................................69

Figura 3.6 Diagrama de Caso de Uso-Gestión del Backend......................................71

Figura 3.7 Escenario Caso de uso UC 1.6..................................................................72

Figura 3.8 Diagrama Caso de uso- Gestión del Frontend...........................................73

Figura 3.9 Escenario UC 2.5 Interactuar con las pelotas............................................74

Figura 3.10 Escenario UC 2.1 filtrar tecnologías.......................................................75

Figura 3.11 Diagrama Caso de Uso- Gestión de Usuarios.........................................76

Figura 3.12 Diagrama Trazabilidad - Gestión Backend.............................................77

Figura 3.13 Diagrama Trazabilidad - Gestión frontend..............................................78

Figura 3.14 Diagrama Trazabilidad - Gestión 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 tecnologías..................................................................84

Figura 3.20 Prototipo interfaz del backend.................................................................85

Figura 3.21 Diagrama de navegación.........................................................................86

Figura 3.22 Estructura HTML....................................................................................87

Figura 3.23 Aplicación burbujas.................................................................................88

Figura 3.24 Detalle sistema de puntuación.................................................................89

Figura 3.25 Inicio de la Aplicación............................................................................91

Figura 3.26 Detalle código creación de burbujas.......................................................91

Figura 3.27 Panel de Identificación............................................................................93

Figura 3.28 Bubbl.us - Diagrama Conceptual............................................................94

Figura 3.29 Línea 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

CAPITULO 1.

CAPITULO 1.

INTRODUCCIÓN

Este capítulo ofrece una breve presentación 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

CAPITULO 1.

1.1 Motivación

Son varias las motivaciones que han impulsado este proyecto, desde la evolución de las aplicaciones informáticas junto al progreso de las nuevas tecnologías hardware, que facilitan la conectividad desde cualquier lugar, al aumento del tipo tecnologías de desarrollo, las cuales son difíciles de conocer y seleccionar.

Desde el punto de vista de la investigación observamos que la evolución de la tecnología 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, actualización, menos requisitos de memoria, precio, datos más seguros…). Otro factor a tener en cuenta, es el número de usuarios con acceso a Internet, llegó a 2.000 millones de usuarios a finales del año 2010, doblando el número de usuarios en solo cinco años. La agencia ITU (Unión Internacional de Telecomunicaciones), pronostica que al menos la mitad de la población mundial tendrá acceso a banda ancha para el año 2015.

Por todo ello cada vez son más las tecnologías disponibles para el desarrollo de aplicaciones Web, siendo cada vez más difícil 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 adopción de estas tecnologías, y un mayor entendimiento de sus cualidades, características y la interacción entre ellas.

Desde el punto de vista académico, es fácil apreciar el desconocimiento de los alumnos de las nuevas tecnologías, debido al gran aumento y evolución de las mismas. A la hora de realizar un proyecto, se tiende a elegir tecnologías “obsoletas” para sus desarrollos, las cuales no facilitarían tanto su trabajo ni producirán resultados tan óptimos, como si utilizaran tecnologías de vanguardia.

Algo similar ocurre desde el punto de vista empresarial, donde el continuo desarrollo de nuevas tecnologías, 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 tecnologías 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.

3

CAPITULO 3.

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 tecnología adecuada para el desarrollo de su aplicación Web. Para cumplir dicho propósito, se llevarán a cabo los siguientes objetivos específicos:

1. Conocer las tecnologías actuales en el ámbito del desarrollo de aplicaciones

Web: características teóricas, capacidades prácticas y beneficios que ofrecen.

2. Propuesta de una posible clasificación, flexible, de tecnologías que sirva

como punto de partida de la herramienta.

3. Propuesta de un conjunto de características, también flexible, que permitan

filtrar las tecnologías en busca de las más adecuadas.

4. Diseñar e implementar una aplicación Web que guíe al desarrollador, tanto

profesional como recién iniciado, en la elección de las distintas tecnologías

para sus propias aplicaciones, siendo esta la aplicación principal del proyecto.

5. Desarrollar un panel administrativo para el mantenimiento, actualización y

gestión de usuarios de la aplicación principal.

4

CAPITULO 1.

1.3 Estructura de la Memoria

El contenido de la memoria está estructurado en cuatro capítulos que hacen referencia a la aplicación de soporte para la elección de tecnologías 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. . Introducción

Este capítulo hace una presentación general del proyecto, describiendo las

motivaciones y objetivos principales para su realización, así como una

descripción de la estructura de la memoria.

CAPITULO 2. . Revisión de la Tecnología para el Desarrollo Web

En este capítulo, se describe el contexto en el que está integrado la aplicación

creada, en el que describimos las tecnologías más 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 tecnología y su evolución.

CAPITULO 3. . Descripción de la Herramienta

Describe la aplicación creada, ofreciendo una descripción detallada de la

misma. Empezando por una visión genérica de la aplicación, lo que nos

ayuda a entender a grandes rasgos en que consiste, a un estudio minucioso de

los distintos pasos seguidos, de la ingeniería del software, para construir la

aplicación, así como todo lo que ha rodeado a la construcción de la

herramienta.

CAPITULO 4. . Conclusiones y Trabajo Futuro

Una vez terminado el desarrollo del proyecto, en ese capítulo se estudiarán

las conclusiones obtenidas analizando la medida en que se han cumplido los

objetivos propuestos. Por otro lado, dada las amplias posibilidades de

actualización y mejora que ofrece la herramienta, se dedica un apartado para

describir algunas de ellas.

5

CAPITULO 3.

CAPITULO 2.

REVISIÓN DE LA TECNOLOGÍA

PARA EL DESARROLLO WEB

En este capítulo se describen los conceptos más importantes relacionados con el proyecto. Es por ello que repasaremos los comienzos, así como la evolución, de la historia de Internet, lo que nos ayudará a ver el progreso que ha sufrido todo aquello que interactúa con la Word Wide Web. Definiremos algunos de los conceptos de las tecnologías más relevantes dentro del desarrollo Web, con la intención de adentrar al lector en las diferentes tecnologías de desarrollo de aplicaciones Web, así como en la evolución que han sufrido las mismas a lo largo del tiempo.

CAPITULO 3.

1.4 Historia de la Tecnología 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 teoría de conmutación de paquetes, impulsando el desarrollo del entonces embrionario sistema de comunicación denominado packet switching. Ese mismo año, Charles Bachman diseña 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 través de la que cada uno pudiera acceder desde cualquier lugar a datos y programas.

Licklider fue el principal responsable del programa de investigación 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, establecían su primera comunicación remota a través de una línea telefónica, creando así la primera red de ordenadores de área amplia jamás construida. El resultado del experimento fue la comprobación de que los ordenadores podían trabajar juntos correctamente, ejecutando programas y recuperando datos a discreción en la máquina remota.

A finales de 1966 Roberts se traslada a la DARPA para desarrollar el concepto de red de ordenadores y rápidamente confeccionó su plan para ARPANET, publicándolo 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 Física de Reino Unido, habían discurrido en paralelo sin que los investigadores conocieran el trabajo de los demás.

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 Investigación de Standford (SRI) proporcionó un segundo nodo.

Un mes más 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 después se añadieron dos nodos en la Universidad de California, Santa Bárbara, 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 conexión permanente usando

CAPITULO 3.

ARPANET entre los IMPs del SRI y la UCLA. Días más tarde, el 5 de diciembre de 1969 se logró hacer una conexión permanente entre los cuatro nodos, haciendo realidad una embrionaria Internet. Mientras E.F. Codd de IBM introducía 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 mayoría de bases de datos estaban basadas en un modelo de red o una simple estructura de archivo plano.

Durante los años siguientes se siguieron conectando ordenadores rápidamente 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 implementación 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 demostración de ARPANET en la International Computer Communication Conference. Esta fue la primera demostración pública de la nueva tecnología de red. Fue también en 1972 cuando se introdujo la primera aplicación "estrella": el correo electrónico. En Marzo, Ray Tomlinson, de BBN, escribió el software básico de envío-recepción de mensajes de correo electrónico, impulsado por la necesidad que tenían los desarrolladores de ARPANET de un mecanismo sencillo de coordinación, quien también tomó la decisión de utilizar el símbolo “@” para separar el nombre de usuario del nombre del equipo (que más tarde se convertiría en el nombre de dominio).

En Julio, Roberts escribió el primer programa de gestión de correo electrónico para leer selectivamente, almacenar, reenviar y responder a mensajes. Desde entonces, la aplicación de correo electrónico se convirtió en la más utilizada de la red durante más de una década. Esta aplicación fue la precursora del tipo de actividad que observamos hoy día en la World Wide Web, es decir, del enorme crecimiento de todas las formas de tráfico entre usuarios. En 1974, Ted Nelson publica un escrito donde, por primera vez, se habló de Hipertexto y links, preámbulo del código HTML para la creación de las páginas Web. Un año más tarde, en 1975, Steve Walter crea la primera lista de correo electrónico, es decir, la distribución simultanea de información por correo a múltiples usuarios. En abril de ese mismo año, Bill Gates funda en Alburquerque su propia empresa de producción de software informático, Microsoft Corporation.

Desde el punto de vista de las bases de datos, a principios de los años ochenta comenzó el auge de la comercialización de los sistemas relacionales, y SQL comenzó a ser el estándar 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 jerárquicas y de red, como consecuencia de que su nivel de programación era sencillo y su nivel de programación era relativamente bajo.

CAPITULO 3.

No es hasta la década 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 año más tarde, en 1991, crea la primera página Web de la historia (Figura 2.1). Ese mismo año, Microsoft lanza su VBScript, lenguaje interpretado por el Windows Scripting Host creado como variación del lenguaje de programación Visual Basic.

Figura 2.1 La Primera Página Web

Desde que se publicara esa Web, muchas personas han compartido sus conocimientos a través de una extensa red computadores interconectados desde diversos lugares. En los primeros años pocas personas que tenían acceso a la red, cuyo contenido eran generalmente confidenciales por sus características de investigación o de seguridad nacional. Con el paso de los años, comenzó un gran intercambio de información con variedad temática, y con ello, aparecía la necesidad de trasmitir la información de forma más sencilla.

La evolución de la Web ha sido continua; llegaron las imágenes a acompañar los textos, aparecieron las primeras animaciones, las primeras herramientas interactivas, el contenido multimedia, etc. y la evolución continuó, pudiendo dividir en cuatro generaciones.

La primera generación, se caracteriza por ser páginas Web cuyo diseño era lineal y estaba orientado para científicos que eran los usuarios que compartían su información alrededor de todo el mundo mediante estas páginas Web. La tecnología de los navegadores Web era limitada y no disponía de la capacidad de transmitir información

11

CAPITULO 3.

gráfica. Las principales características de la primera generación de diseño Web eran las velocidades de transmisión de datos, ya que era la conexión era vía modem, lo que limitaba el tamaño de las páginas Web. Respecto al diseño Web, la estructuración era bastante desordenada con imágenes dispuestas horizontalmente y líneas de texto separadoras. Debido a este caos en el diseño, 1994, se estableció un consorcio para establecer unas normas y pautas para el futuro desarrollo de la Web, el W3C, World Wide Web Consortium, organización que coordina estándares y añade nuevas funcionalidades y desarrollos a la Web. Se comenzaron entonces a desarrollar unos estándares de lenguaje HTML para una unificación del diseño Web que trajo consigo la aparición de una serie de navegadores con nuevas funcionalidades y progresos en este ámbito

La segunda generación, se puede decir que llega con la aparición Mosaic primer navegador Web gráfico, el cual adquiera gran popularidad, desplazando a Gropher, basado en textos. En esta generación, el diseño Web empieza a utilizar iconos en lugar de algunas palabras, las páginas Web comienzan a poseer imágenes de fondo, botones con relieve para la navegabilidad y el texto es estructurado de forma jerárquica mediante menús o listados y propiedades del código HTML Standard definido. La aparición de estos elementos gráficos en el diseño Web generó un deseo de los diseñadores de añadir (sin control) estos archivos en sus páginas Web, lo que generó una saturación en las páginas Web, sin tener en cuenta la accesibilidad ni la usabilidad. Se comenzaron a usar tablas para la organización de los contenidos, posicionamiento de los elementos y maquetaciones similares a libros o revistas. En esta generación la aparición de monitores y tarjetas gráficas con mayores resoluciones y definición de color, generó la consecuente mejora en la calidad del diseño 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, también se caracteriza por la aparición de las páginas Web dinámicas, cuyo contenido se genera a partir de lo que un usuario introduce en un Web o formulario. El 8 de junio de ese año, aparece PHP, un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas Web dinámicas. Otros hitos importantes dentro de esta etapa, es la salida al mercado de Windows 95 la primera versión del browser Internet Explorer 1.0, también nacen algunos de las portales Web más famosos de la historia de Internet, como es la creación de Yahoo!, en marzo de 1995 por David Filo y Jerry Yang, el buscador más exitosos de los primeros tiempos de Internet, eBay, pagina por excelencia de venta de artículos de segunda mano y Amazon la librería más grande virtual del mundo, concentrará a lo largo de los próximos años la atención del sector como principal referente del comercio electrónico.

La tercera generación, está marcado por la aparición del plugin de Macromedia Flash (1996), el cual revolucionaría la concepción de diseño 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 año,

12

CAPITULO 3.

aparece el famoso servicio de e-mail basado en la Web, Hotmail. En esta etapa, se generan las páginas Web según el objetivo de las mismas: vender productos o servicios, comunidades, información, noticias. En esta especialización del diseño Web, de acuerdo al objetivo de las páginas, se necesita ayudar al usuario a encontrar la información, 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 búsqueda creado el 27 de septiembre de 1998 por Larry Page y Sergey Brin.

En la cuarta generación, entra en juego el concepto “Web 2.0”, comúnmente asociado con aplicaciones Web que facilitan compartir información, la interoperabilidad, el diseño centrado en el usuario y la colaboración en la World Wide Web. Se trata de aplicaciones que de colaboración y servicios que reemplazan las clásicas aplicaciones de escritorio. En que el diseño Web está enfocado totalmente a los elementos multimedia de última generación. Con usuarios de todos los tipos, cualquiera tiene una página Web a día de hoy y la variedad de diseño es enorme debido a todas las posibilidades que ofrecen las últimas tecnologías para los programadores. A esto le podemos añadir que las últimas versiones de los navegadores soportan muchas más prestaciones y elementos en las páginas Web.

Es en Febrero del 2005, cuando Chad Hurley, Steve Chen y Jawed Karim fundan un sitio Web que permite a los usuarios compartir vídeos digitales, YouTube, considerado en 2006 “el invento del año” 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 líderes del mundo, las cuales se formularan en entrevistas exclusivas retrasmitidas en la Web.

13

CAPITULO 3.

Figura 2.2 Web Multimedia

Una de las aplicaciones más representativa de esta última generación, y de lo que hoy conocemos como Internet, son las redes sociales, portales Web compuestos por de grupos de personas, las cuales están conectadas por uno o varios tipos de relaciones. En Febrero de 2004, nace Facebook, como un hobby de Mark Zuckerberg, en aquél momento estudiante de Harvard, y como un servicio para los estudiantes de su universidad. Un año después, Facebook tenía más de un millón de usuarios. Otra de las redes sociales más famosas es Twitter, creada en Enero del 2006, basada en el microblogging, que permite a los usuarios mandar mensajes en texto plano de un máximo de 140 caracteres. En ese mismo mes, Internet alcanza los 1.100 millones de usuarios a nivel mundial.

Uno de los hitos actuales más relevantes, dentro del desarrollo Web, es la salida del nuevo estándar 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 hegemonía en las animaciones. El primer borrador del W3C para HTML5, salió en 2010 y se prevé que HTML5 alcance la condición de candidato en 2012, finalice las pruebas finales en 2020, y alcance la categoría de recomendación de pleno derecho en 2022. Aun así, en la actualidad, la mayoría de navegadores soportan este estándar y son muchas las aplicaciones Web que aprovechan su potencial.

En la Figura 2.3, podemos ver parte del diagrama con la línea temporal de la historia de internet, permitiendo situar algunos de los hitos mencionados anteriormente en su momento histórico. El diagrama, permite desplazarse desde el inicio de Internet en 1965 hasta nuestros días, mostrando cada uno de los hechos más relevantes, pudiendo seleccionar cada uno de ellos para obtener información más detallada. (Caballero, 2011)

14

CAPITULO 3.

Figura 2.3 Línea Temporal

1.5 Clasificación Tecnológica

Existen números tecnologías para el desarrollo de aplicaciones Web destinadas a cada una de las fases de dicho desarrollo. Realizar una buena clasificación y conocer sus características, es esencial para poder llevar a cabo la construcción de una aplicación que nos guíe a través de la elección de tecnologías. En los siguientes puntos, veremos descritas las tecnologías más relevantes dentro del desarrollo de aplicaciones Web y algunas representativas de algunos dispositivos o tecnologías menos comunes.

Las tecnologías, se pueden distinguir tres grandes grupos; lenguajes, herramientas y bases de datos. Esta división, y posteriores subdivisiones, nos ayudarán a la hora de clasificar y organizar las diferentes tecnologías que podemos utilizar para construir aplicaciones destinadas a Internet.

Esta clasificación no tiene por qué ser definitiva, ya que según evolucione la propia herramienta, puede requerir una nueva forma de dividir las tecnologías 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 administración los diferentes parámetros. Desde un principio, esta herramienta se creó para satisfacer las necesidades de los usuarios, por lo que serán ellos con sus aportaciones, recomendaciones y puntuaciones, los que vayan dando forma y haciendo crecer la aplicación adaptándola a las necesidades situación actual.

15

CAPITULO 3.

1.5.1 Lenguajes

Un lenguaje de programación es un idioma artificial diseñado para expresar computaciones que pueden ser llevadas a cabo por máquinas como las computadoras.(Wikimedia, 2011)

Actualmente existen múltiples lenguajes de programación 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 estáticos son los que satisfacían las demandas de los usuarios. A medida que paso el tiempo, se desarrollaron nuevas tecnologías y surgieron nuevos problemas a los que dar solución, esto dio lugar desarrollo de lenguajes de programación dinámicos, que permitieran interactuar con los usuarios y utilizaran sistemas de Bases de Datos.

Dentro de cada lenguaje, existen unas características similares que nos permiten clasificarlos y así poder elegir el que mejor se adapte a nuestras necesidades.

Sistemas Distribuidos

Modo de Ejecutarse

Entorno de Programación

Estilo de programación

Sistemas Distribuidos

"Sistemas cuyos componentes hardware y software, que están 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 comunicación mediante un protocolo prefijado por un esquema cliente-servidor". (Presuman, 2002)

Las principales ventajas son:

Concurrencia.- Esta característica permite que los recursos disponibles en la

red puedan ser utilizados simultáneamente por los usuarios que interactúan

en la red.

Carencia de reloj global.- Las coordinaciones para la transferencia de

mensajes, no tienen una temporización general, está más 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

CAPITULO 3.

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: dícese de la maquina la cual proporciona los servicios al cliente

Modo de Ejecutarse (o modo de traducción)

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 representación simbólica de las instrucciones correspondientes al

lenguaje ensamblador de alguna arquitectura específica, con lo que, casi

siempre, la correspondencia entre las instrucciones de este lenguaje, y las

del lenguaje máquina 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 máquina o bien a lenguaje ensamblador, produciendo

un programa objeto permanente.

Lenguajes Interpretados: Estos lenguajes, tienen la particularidad, de que no

producen código objeto, sino que cada instrucción es analizada y ejecutada a

la vez, lo que ofrece mucha interacción 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 compilación del

código y el código resultante es interpretado en ordenadores de distintas

arquitecturas.

Lenguajes Preprocesados: Son lenguajes que son traducidos primeramente

a un lenguaje intermedio de más 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 más potente que el

lenguaje intermedio, mediante la implementación de algunas

macroinstrucciones.

Entorno de Programación

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

aplicación dotada de una Interfaz gráfica, la cual por medio de iconos y

otras herramientas visuales, pretenden facilitar las tareas rutinarias de los

programadores.

17

CAPITULO 3.

Metalenguajes: Son lenguajes como XML, SGML y HTML que sirven para

definir otros lenguajes, cuyo objetivo es llevar a cabo la estructuración de

textos mediante un conjunto de etiquetas, de manera tal, que puedan ser

entendidos por los humanos y también procesado por los ordenadores.

Lenguajes de propósito específico: 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 cliente-servidor.

Lenguajes Script: Son lenguajes como JAVASCRIPT, VBSCRIPT o PHP,

que se utilizan en ambientes clientes-servidor, mediante la incrustación de

código en las páginas HTML, y así permitir la programación del lado del

cliente.

Estilo de programación

Según 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 programación 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 solución. Los lenguajes declarativos

no dicen cómo hacer una cosa, sino, más bien, qué cosa hacer

Orientados a Objetos: en la programación orientada a objetos se definen los

programas en términos de "clases de objetos", objetos que son entidades que

combinan estado, comportamiento e identidad. La programación orientada a

objetos expresa un programa como un conjunto de estos objetos, que

colaboran entre ellos para realizar tareas.

1.5.1.1 Ajax

El término AJAX es un acrónimo de Asynchronous JavaScript And XML, que se puede traducir como "JavaScript asíncrono + XML". Este lenguaje, no es una tecnología en sí mismo, sino que en realidad, se trata de varias tecnologías independientes que se unen para forma una nueva.

Las tecnologías que componen Ajax son:

XHTML y CSS, para crear una presentación basada en estándares.

18

CAPITULO 3.

DOM, para la interacción y manipulación dinámica de la presentación.

XML, XSLT y JSON, para el intercambio y la manipulación de información.

XMLHttpRequest, para el intercambio asíncrono de información.

JavaScript, para unir todas las demás tecnologías.

Figura 2.4 Tecnologías 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 página al navegador del usuario. Ajax permite que el usuario interactúe con la aplicación, evitando recargas constantes de la página, ya que el intercambio de información se realiza en un segundo plano, gracias a la creación de un elemento intermedio entre el usuario y el servidor. Esta nueva capa, mejora la respuesta de la aplicación, ya que el usuario nunca encuentra vacía la ventana de navegación esperando la respuesta del servidor.

Antecedentes de Ajax

A pesar de que el término “Ajax” fuese creado en 2005, la historia de las tecnologías que permiten Ajax se remonta a una década antes con la iniciativa de Microsoft en el desarrollo de Scripting Remoto. Sin embargo, las técnicas para la carga asíncrona de contenidos en una página 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 tenían el atributo src que una dirección URL externa, cargando una página que contenga JavaScript que manipule la página paterna. El Microsoft's Remote Scripting (o MSRS, introducido en 1998) resultó un sustituto más elegante para estas técnicas, con envío de datos a través de un applet Java el cual se puede comunicar con el cliente usando JavaScript.

19

Javascript

DOM

XHTML

CSS

XMLHttpResquest

XML

JSON

CAPITULO 3.

Figura 2.5 Comparativa modelo clásico y modelo Ajax

La comunidad de desarrolladores Web, desarrollo una gama de técnicas de scripting remoto para conseguir los mismos resultados en diferentes navegadores. Los primeros ejemplos incluyen la biblioteca JSRS en el año 2000, la introducción a la técnica imagen/cookie en el mismo año y la técnica JavaScript bajo demanda (JavaScript on Demand) en 2002.

1.5.1.2 ASP

ASP (Active Server Pages) es un lenguaje que permite intercalar código ejecutable con el contenido HTML. Este código es ejecutado en el servidor, “fundiéndose” con el código HTML, de tal forma que al cliente no le sea posible ver ni el código fuente de la página, ni siquiera distinguir qué texto HTML es fijo y cuál depende de la programación.

Esta tecnología, desarrollada por Microsoft, permite generar páginas dinámicamente. Intenta ser una solución para un modelo de programación rápida ya que "programar en ASP es como programar en Visual Basic y C. Lo interesante de este modelo tecnológico es poder utilizar diversos componentes ya desarrollados como algunos controles ActiveX así como componentes del lado del servidor

La última versión de ASP es ASP 3.0, en la que hay siete objetos integrados disponibles para el programador: Application, ASPError, Request, Response, Server,

20

HTML + CSS

HTTP request

Motor AJAX

Interfaz de Usuario

Datastore, backend processing, legacy systems

Navegador Cliente

Datastore, backend processing, legacy systems

HTML + CSS

HTTP request

Servicio Web

Interfaz de Usuario

Navegador Cliente

Servidor del Sistema

Web & XML server

Servidor del Sistema

Modelo Ajax de aplicación Web

Modelo Clásico de aplicación Web

CAPITULO 3.

Session y ObjectContext. Cada objeto tiene un grupo de funcionalidades frecuentemente usadas y útiles para crear páginas Web dinámicas.

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 código intermedio (llamado MSIL o Microsoft Intermediate Language) como Visual Basic .NET, C#, o cualquier otro lenguaje que soporte la plataforma .NET.

Página Oficial desarrollo abandonado

Última versión 3.0

Fecha última versión: 2002-01-01

Sistemas Distribuidos: Servidor

Modo de Ejecutarse: Compilado

Entorno de Programación: Textual

Estilo de Programación: O. Objetos

Extensión de archivo .asp

Licencia EULAs

Tabla 2.1 Metadatos ASP

1.5.1.3 HTML

HTML (HyperText Mark-Up Language es el lenguaje de marcas de texto utilizado normalmente en la www, cuya función es preparar documentos aplicando etiquetas de formato, las que indican cómo se presenta el documento y cómo se vincula a otros. También 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 dirección específica de la red, denominada dirección URL. El término 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 estándar, 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, cómo las interpretan los programas informáticos. Esto permite visualizar páginas Web independientemente del sistema operativo o la arquitectura de la máquina del usuario. Sin embargo, aunque las especificaciones son muy detalladas, hay cierto margen para la interpretación por parte del navegador y esta es la razón por la cual la misma página puede aparecer de modo diferente en un navegador u otro.

21

CAPITULO 3.

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 amplían y mejoran su capacidad original. El código HTML utiliza el código ASCII puro que puede teclearse en cualquier editor básico 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 declaración de tipo de documento.

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Un elemento generalmente tiene una etiqueta de inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej. </nombre-de-elemento>), la cual es opcional para algunos elementos. Las etiquetas de comienzo, suelen incluir atributos específicos, que definen el comportamiento, o indican propiedades adicionales de dichos elementos.

HTML 5

HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje básico de la World Wide Web, HTML. HTML 5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.

Figura 2.6 Estructura HTML 4

22

CAPITULO 3.

HTML 5 introduce un conjunto de nuevos elementos que hacen que sea mucho más fácil estructurar las páginas. La mayoría de las páginas HTML 4 incluye una variedad de estructuras comunes, como encabezados, pies de página y columnas, que se marcan con elementos div, dando a cada uno un número de identificación descriptiva o de clase.

El uso de div-elementos es porque las versiones actuales de HTML 4 carecen de los necesarios para la descripción semántica de estas partes, más concretamente. HTML 5 soluciona esta cuestión mediante la introducción de nuevos elementos para la representación de cada una de estas secciones.

Figura 2.7 Estructura HTML5

En HTML5 hay varios elementos que sirven para estructurar mejor una página Web, estableciendo qué es cada sección, y reemplazando en muchas ocasiones el elemento div. Con este extra de semántica, es mucho más coherente y fácil de entender por otras personas. Y lo que es más importante, trivial de entender para una máquina, dándole más importancia a unas secciones. Estos son los elementos:

section representa una sección “general” dentro de un documento o

aplicación, como un capítulo de un libro. Puede contener subsecciones e ir

acompañado de h1-h6 para estructurar mejor la página.

article representa un contenido independiente en un documento, el caso más

claro son las noticias de un periódico online o las entradas de un blog. Así,

dentro de la portada podremos tener varios artículos demarcados

semánticamente, 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 página, como una barra lateral, esencial para delimitar el

contenido “importante” del contenido “de apoyo”.

23

CAPITULO 3.

header representa la cabecera de una sección, otorgándole más importancia

que al resto del contenido.

footer representa el pié de una sección, con información acerca de la página,

poco relacionada con el tema del contenido, como el autor, el copyright o el

año.

nav representa una sección dedicada a la navegación del sitio.

También 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 número.

range para indicar un rango entre dos números.

email para indicar un correo electrónico.

url para indicar una dirección Web.

search para indicar una búsqueda.

color para indicar un color.

Otros elementos que introduce esta nueva versión son:

audio y video sirven para incrustar un contenido multimedia de sonido o de

vídeo, respectivamente, que permite reproducir/controlar vídeos 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 imágenes dentro de un vídeo.

embed sirve para contenido incrustado pero no nativo, sino ejecutado por

plugins como el de Flash.

canvas es un elemento complejo que permite generar gráficos, 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 vídeo,

etc.) a un título o leyenda.

mark representa un texto resaltado, por ejemplo para resaltar una búsqueda.

meter representa una medida, como el número de KB.

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.

24

CAPITULO 3.

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

dinámicamente con información y cambiar la página respecto a esa

información

El almacenamiento en local, es una nueva funcionalidad para este estándar, 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 venían impuestas con el uso de las mismas. Los datos son almacenados mediante un listado de pares clave/valor, pudiendo utilizar bien SessionStorage, para almacenar información durante la sesión de la página, o bien localStorage para el almacenamiento compartido entre múltiples páginas y sesiones, limitándose al ámbito del dominio.

Página Oficial http://www.w3.org


Fecha última versión:Estándar en desarrollo

Sistemas Distribuidos: Cliente

Modo de Ejecutarse: interpretado


Estilo de Programación: Declarativo

Extensión de archivo .html, .htm

Licencia libre

Tabla 2.2 Metadatos HTML

1.5.1.4 CSS

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación, imprescindible para crear páginas Web complejas.

Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora

25

CAPITULO 3.

la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.

Al crear una página 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 página Web:

Una hoja de estilo externa, es una hoja de estilo que está almacenada en un

archivo diferente al archivo donde se almacena el código HTML de la

página Web. Esta es la manera de programar más potente, porque separa

completamente las reglas de formateo para la página HTML de la estructura

básica de la página:

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 información del estilo del código HTML.

Un estilo en línea (online) es un método para insertar el lenguaje de estilo

de página directamente dentro de una etiqueta HTML. Esta manera de

proceder no es totalmente adecuada. El incrustar la descripción del formateo

dentro del documento de la página Web, a nivel de código, se convierte en

una manera larga, tediosa y poco elegante de resolver el problema de la

programación de la página.

CSS 3

El objetivo inicial de CSS, separar el contenido de la forma, se cumplió ya con las primeras especificaciones del lenguaje, que ofrecían muchas utilidades para aplicar estilos a las Webs, pero no cubrían 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 página. Lo peor de esos trucos es que muchas veces implica alterar el contenido de la página para incorporar nuevas etiquetas HTML que permitan aplicar estilos de una manera más elaborada. Dada la necesidad de cambiar el contenido, para alterar al diseño y hacer cosas que CSS no permitía, 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.

CSS 1 ya significó un avance considerable a la hora de diseñar páginas Web, aportando mucho mayor control de los elementos de la página. CSS 2 incorporó algunas novedades interesantes, que hoy ya utilizamos habitualmente, pero CSS 3 todavía avanza un poco más en la dirección, de aportar más control sobre los elementos de la página,

26

CAPITULO 3.

siendo la novedad más importante, la incorporación de nuevos mecanismos para mantener un mayor control sobre el estilo con el que se muestran los elementos de las páginas, sin tener que recurrir a trucos o hacks, que complicaban el código 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 múltiples imágenes 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 básico

o overflow-x, overflow-y

Otros

o Creación de múltiples columnas de texto

o Propiedades orientadas a discurso o lectura automática de páginas

Web

o Web Fonts

27

CAPITULO 3.


Última versión 3

Fecha última versión:Estándar en desarrollo





Extensión de archivo .css

Licencia libre

Tabla 2.3 Metadatos CSS

1.5.1.5 XML

Es un metalenguaje extensible de etiquetas desarrollado por W3C. Es una simplificación y adaptación del SGML y permite definir la gramática de lenguajes específicos. 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 función principal es describir datos y no mostrarlos como es el caso de HTML. XML es una tecnología sencilla que tiene a su alrededor otras que la complementan y la hacen mucho más 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 información de una manera segura, fiable y fácil.

Las tecnologías XML son un conjunto de módulos que ofrecen servicios útiles a las demandas más frecuentes por parte de los usuarios. XML sirve para estructurar, almacenar e intercambiar información.

Entre las tecnologías XML disponibles se pueden destacar:

XSL: Lenguaje Extensible de Hojas de Estilo, cuyo objetivo principal es

mostrar cómo debería estar estructurado el contenido, cómo debería ser

diseñado el contenido de origen y cómo debería ser paginado en un medio

de presentación como puede ser una ventana de un navegador Web o un

dispositivo móvil, o un conjunto de páginas de un catálogo, informe o libro.

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.

28

CAPITULO 3.

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 extracción

de datos desde documentos XML. Ofrece la posibilidad de realizar

consultas flexibles para extraer datos de documentos XML en la Web.

Características

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 itálicas, el XML proporciona un marco

de trabajo para etiquetado de datos estructurados.

Representación estructural de los datos: El XML proporciona una

representación estructural de los datos que demostrando ser ampliamente

implementable y fácil de distribuir. XML es un subconjunto del SGML que

está optimizado para su transmisión por Web. Esta interoperabilidad

resultante está dando el impuso de inicio a una nueva generación de

aplicaciones de Web para comercio electrónico. Una vez que los datos estén

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 presentación y el proceso: El poder y la

belleza del XML es que mantiene la separación 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

presentación y el proceso, permitiendo desplegar y procesar los datos tal

como usted desee, al aplicar diferentes hojas de estilo y aplicaciones. Esta

separación de datos de la presentación permite una integración de datos

perfecta de fuentes diversas.

Conversión de los datos XML en autodescriptivos: Los datos codificados en

XML son autodescriptivos, pues las etiquetas descriptivas están

entremezcladas con los datos. El formato abierto y flexible utilizado por

XML permite su uso en cualquier lugar donde sea necesario intercambiar y

transferir información.




29

CAPITULO 3.





Extensión de archivo .xml

Licencia libre

Tabla 2.4 Metadatos XML

1.5.1.6 JavaScript

JavaScript es un lenguaje de programación utilizado para crear pequeños programas encargados de realizar acciones dentro del código de una página Web, como crear efectos especiales en las páginas 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 típicas que se pueden realizar en JavaScript tenemos dos vertientes. Por un lado los efectos especiales sobre páginas Web, para crear contenidos dinámicos y elementos de la página 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 páginas interactivas. JavaScript es un lenguaje con muchas posibilidades, que permite la programación de pequeños scripts, pero también de programas más 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 páginas Web dinámicas, 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 también significativo.

JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo Java y JavaScript no están relacionados y tienen semánticas y propósitos diferentes.

Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas Web. Para interactuar con una página Web se provee al lenguaje JavaScript de una implementación del Document Object Model (DOM).

30

CAPITULO 3.

Tradicionalmente se utilizaba en páginas Web HTML para realizar operaciones y únicamente en el marco de la aplicación cliente, sin acceso a funciones del servidor. JavaScript se interpreta en el agente de usuario, al mismo tiempo que las sentencias van descargándose junto con el código HTML.

Comienzos del JavaScript

Conforme fue creciendo el Web y sus distintos usos se fueron complicando las páginas y las acciones que se querían realizar a través 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 página Web. En otras palabras, HTML se había quedado corto ya que sólo sirve para presentar el texto de una página, definir su estilo y poco más.

Al complicarse los sitios Web, una de las primeras necesidades fue que las páginas respondiesen a algunas acciones del usuario, para desarrollar pequeñas funcionalidades más allá de los propios enlaces. El primer ayudante para cubrir las necesidades que estaban surgiendo fue Java, que es un lenguaje de propósito general, pero que había creado una manera de incrustar programas en páginas Web. A través de la tecnología de los Applets, se podía crear pequeños programas que se ejecutaban en el navegador dentro de las propias páginas Web, pero que tenían posibilidades similares a los programas de propósito general. La programación de Applets fue un gran avance y Netscape, por aquel entonces el navegador más popular, había roto la primera barrera del HTML al hacer posible la programación dentro de las páginas Web. No cabe duda que la aparición de los Applets supuso un gran avance en la historia del Web, pero no ha sido una tecnología definitiva y muchas otras han seguido implementando el camino que comenzó con ellos.

Netscape, después de hacer sus navegadores compatibles con los Applets, comenzó a desarrollar un lenguaje de programación al que llamó LiveScript que permitiese crear pequeños programas en las páginas y que fuese mucho más 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 versión 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 diseñara como un hermano pequeño de Java, solamente útil dentro de las páginas Web y mucho más fácil de utilizar, de modo que cualquier persona, sin conocimientos de programación pudiese adentrase en el lenguaje y utilizarlo a sus anchas. Además, para programar JavaScript no es necesario un kit de desarrollo, ni compilar los scripts, ni realizarlos en ficheros externos al código HTML.

Página Oficial http://www.java.com


Modo de Ejecutarse: Interpretado

31

CAPITULO 3.

Entorno de Programación: Script


Extensión de archivo .js

Licencia Libre

Tabla 2.5 Metadatos de JavaScript

1.5.1.7 PHP

PHP es el lenguaje de lado servidor más extendido en la Web. Nacido en 1994, se trata de un lenguaje de creación relativamente reciente, que ha tenido una gran aceptación en la comunidad de desarrolladores, debido a la potencia y simplicidad que lo caracterizan, así como al soporte generalizado en la mayoría de los servidores de hosting.

PHP nos permite embeber pequeños fragmentos de código dentro de la página HTML y realizar determinadas acciones de una forma fácil y eficaz. Por otra parte, y es aquí donde reside su mayor interés con respecto a los lenguajes pensados para los CGI, PHP ofrece un sinfín de funciones para la explotación 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 más tradicional y el principal

foco de trabajo. Se necesitan tres cosas para que esto funcione. El intérprete

PHP (CGI módulo), un servidor Web y un navegador. Es necesario hacer

funcionar el servidor, con PHP instalado. El resultado del programa PHP se

puede obtener a través del navegador, conectándose con el servidor Web.

Consultar la sección Instrucciones de instalación para más información.

Scripts en la línea de comandos. Puede crear un script PHP y correrlo sin

necesidad de un servidor Web o navegador. Solamente necesita el intérprete

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).

Escribir aplicaciones de interfaz gráfica. Probablemente PHP no sea el

lenguaje más apropiado para escribir aplicaciones gráficas, pero si se quiere

utilizar algunas características avanzadas en programas clientes, se puede

utilizar PHP-GTK para escribir dichos programas. También es posible

escribir aplicaciones independientes de una plataforma

PHP puede ser utilizado en cualquiera de los principales sistemas operativos del mercado y soporta la mayoría de servidores Web de hoy en día. Además, tiene la

32

CAPITULO 3.

posibilidad de utilizar programación procedimental, programación 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: creación de imágenes, archivos PDF e incluso películas 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 dinámico.

Una de las características más potentes y destacables de PHP es su soporte para una gran cantidad de bases de datos. Escribir una página Web con acceso habilitado a una base de datos es increíblemente simple utilizando una de las extensiones específicas, o utilizar una capa de abstracción como PDO, o conectarse a cualquier base de datos que soporte el estándar de Conexión Abierta a Bases de Datos por medio de la extensión ODBC.

Cuenta con soporte para comunicarse con otros servicios usando protocolos tales como POP3, LDAP, NNTP, IMAP, SNMP, HTTP, COM y muchos otros. También se pueden crear sockets puros e interactuar usando cualquier otro protocolo. PHP soporta WDDX para el intercambio de datos entre lenguajes de programación en Web. Y hablando de interconexión, puede utilizar objetos Java de forma transparente como objetos de PHP. Tiene útiles características de procesamiento de texto, las cuales incluyen las Expresiones Regulares Compatibles de Perl (PCRE), muchas extensiones, y herramientas para el acceso y análisis de documentos XML.

Historia (Wikimedia, 2011)

Fue originalmente diseñado en Perl, con base en la escritura de un grupo de CGI binarios escritos en el lenguaje C por el programador danés-canadiense Rasmus Lerdorf en el año 1994 para mostrar su currículum vítae y guardar ciertos datos, como la cantidad de tráfico que su página Web recibía. El 8 de junio de 1995 fue publicado "Personal Home Page Tools" después de que Lerdorf lo combinara con su propio Form Interpreter para crear PHP/FI.

PHP 3: Dos programadores israelíes del Technion, Andi Gutmans y Zeev

Suraski, reescribieron el analizador sintáctico en 1997 y crearon la base del

PHP3, cambiando el nombre del lenguaje a la forma actual. Inmediatamente

comenzaron experimentaciones públicas de PHP3 y fue publicado

oficialmente en junio de 1998. En 1999, Suraski y Gutmans reescribieron el

código 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 día 13 de julio de 2007 se anunció la suspensión del soporte

33

CAPITULO 3.

y desarrollo de la versión 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 versión más 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 programación orientada a objetos.

o Mejoras de rendimiento.

o Iteradores de datos.

o Mejor soporte para MySQL con extensión 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 implementación con Oracle.

Página Oficial http://www.php.net

Última versión 5.3.6






Extensión de archivo .php

Licencia 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 versión son:

o Compatible con Unicode

o Limpieza de funcionalidades obsoletas

o PECL y eliminación de soporte ereg

o Mejoras en orientación a objetos

o Inclusión en el núcleo de xmlReader y xmlWriter así como Fileinfo

o return por referencia devuelve un error

Se retira el soporte de las bibliotecas FreeType1 y GD1

34

CAPITULO 3.

1.5.1.8 Ruby

Ruby es un lenguaje de programación interpretado, reflexivo y orientado a objetos, creado por el programador japonés Yukihiro "Matz" Matsumoto, quien comenzó a trabajar en Ruby en 1993, y lo presentó públicamente en 1995. Combina una sintaxis inspirada en Python y Perl con características de programación orientada a objetos similares a Smalltalk. Comparte también funcionalidad con otros lenguajes de programación como Lisp, Lua, Dylan y CLU. Es un lenguaje de programación interpretado en una sola pasada y su implementación 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 liberación pública en 1995, Ruby ha atraído devotos desarrolladores de todo el mundo. En el 2006, Ruby alcanzó reconocimiento masivo, formándose grupos de usuarios activos y llenando las conferencias relacionadas a Ruby.

Inicialmente, Matz buscó en otros lenguajes para encontrar la sintaxis ideal. Recordando su búsqueda, dijo, “quería un lenguaje que fuera más poderoso que Perl, y más 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 función es un método. Las variables siempre son referencias a objetos, no los objetos mismos. Ruby soporta herencia con enlace dinámico, mixins y métodos singleton. A pesar de que Ruby no soporta herencia múltiple, las clases pueden importar módulos como mixins. La sintaxis procedural está soportada, pero todos los métodos definidos fuera del ámbito de un objeto son realmente métodos de la clase Object. Como esta clase es padre de todas las demás, los cambios son visibles para todas las clases y objetos.

Ruby ha sido descrito como un lenguaje de programación multiparadigma: permite programación procedural (definiendo funciones y variables fuera de las clases haciéndolas parte del objeto raíz Object), con orientación a objetos, (todo es un objeto) o funcionalmente (tiene funciones anónimas, clausuras o closures, y continuations; todas las sentencias tiene valores, y las funciones devuelven la última evaluación). Soporta introspección, reflexión y metaprogramación, además de soporte para hilos de ejecución gestionados por el intérprete. Ruby tiene tipado dinámico, 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 parámetros pasados a un método pueden ser de distinta clase en cada llamada a dicho método).

35

CAPITULO 3.

Página Oficial http://www.ruby-lang.org





Entorno de Programación: textual

Estilo de Programación: O. objetos

Extensión de archivo .rb, .rbw

Licencia GPL

Tabla 2.7 Metadatos Ruby

1.5.1.9 JSP

JavaServer Pages (JSP) es una tecnología Java que permite generar contenido dinámico para realizar páginas Web, en forma de documentos HTML, XML o de otro tipo. Esta tecnología es un desarrollo de la compañía Sun Microsystems.

Las JSP's permiten la utilización de código Java mediante scripts. Además, es posible utilizar algunas acciones JSP predefinidas mediante etiquetas. Estas etiquetas pueden ser enriquecidas mediante la utilización 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 múltiples plataformas, ya que Java es en esencia un lenguaje multiplataforma.

En JSP creamos páginas de manera parecida a como se crean en ASP o PHP. Generamos archivos con extensión .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 traducción de esa página en un servlet, implementado en un archivo class (Byte codes de Java). Esta fase de traducción se lleva a cabo habitualmente cuando se recibe la primera solicitud de la página .jsp, aunque existe la opción de pre-compilar en código para evitar ese tiempo de espera la primera vez que un cliente solicita la página.

Página Oficial http://java.sun.com/products/jsp/



Sistemas Distribuidos: servidor

Modo de Ejecutarse: compilado

36

CAPITULO 3.


Estilo de Programación: O. objetos

Extensión de archivo .jsp

Licencia Libre

Tabla 2.8 Metadatos de JSP

1.5.1.10 ColdFusion

Coldfusion (Adobe ColdFusion) es un servidor de aplicaciones y un lenguaje de programación usado para desarrollar aplicaciones de Internet, generalmente sitios Web generados dinámicamente. En este aspecto, es un lenguaje similar a JSP, ASP o PHP.

ColdFusion es una herramienta que corre en forma concurrente con la mayoría 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 páginas Web. Cada vez que se solicita una página de ColdFusion, el servidor de aplicaciones ejecuta el guión o programa contenido en la página.

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 estándar 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 paréntesis 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 tecnología basada en el driver JDBC. Sin embargo, ColdFusion no está limitado a orígenes de datos JDBC, ya que es posible también interactuar con orígenes 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 Dreamweaver, que ofrece características y asistentes que mejoran el desarrollo en ColdFusion.

Página Oficial http://www.adobe.com/products/coldfusion/

Última versión 9



37

CAPITULO 3.

Modo de Ejecutarse: Compilado



Extensión de archivo .cfm

Licencia EULAs

Tabla 2.9 Metadatos ColdFusion

1.5.2 Herramientas

Las fases de un desarrollo Web, así como los lenguajes de programación usados, son muy extensos y variados, y por ello necesitamos herramientas específicas para cada una de ellas. Pero, existe una gran cantidad de herramientas orientadas a hacer más eficiente la gestión de proyectos Web. Para poder elegir la herramienta más idónea para un desarrollo, primero se debe realizar una buena clasificación 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 característica 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 harán la vida mucho más fácil, que además son libres.

Sistemas Operativos más populares (Net Applications , 2011):

Windows

MAC

IOS

LINUX

Estos son los sistemas operativos más populares en lo que poder desarrollar aplicaciones, pero también tenemos que tener en cuenta los sistemas operativos para los que desarrolla aplicaciones dicha herramienta, teniendo en especial consideración los S.O de los dispositivos móviles.

IOS

38

CAPITULO 3.

Android

Blackberry

Symbian

Fase de desarrollo

Otra característica para poder elegir una herramienta es identificar las fases del proceso que forman el ciclo de vida de un desarrollo Web

Diseño

Maquetación HTML/CSS

Programación Cliente

Programación Servidor

Depuración

Pruebas en local

Subir ficheros al host

Pruebas en hosting

Dentro de las fases de programación, podemos distinguir dos grandes grupos de herramientas, Framework y CMS. Algunas de las características de utilizar un tipo o el otro son las siguientes:

Ventajas Inconvenientes

Framework

(portal a medida)

Seguridad

Extensibilidad

Performance

Alto nivel de Personalización

Evolución de la Empresa

Integraciones

Tiempo

Costes

CMS Rápida Implementación

Bajo Coste

Seguridad

Extensibilidad

Performance

En resumen, si la aplicación es básica y se necesita los más rápido posible, lo mejor es usar un CMS. En cambio, si la solución 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 más relevantes y utilizados actualmente para la creación de aplicaciones Web.

39

CAPITULO 3.

1.5.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 dinámicos, aplicaciones Web y servicios Web XML. Apareció en enero de 2002 con la versión 1.0 del .NET Framework, y es la sucesora de la tecnología 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 código de las aplicaciones puede escribirse en cualquier lenguaje compatible con el CLR, entre ellos Microsoft Visual Basic y C#.

Las páginas de ASP.NET, conocidas oficialmente como "Web forms" (formularios Web), son el principal medio de construcción para el desarrollo de aplicaciones Web. Los formularios Web están contenidos en archivos con una extensión ASPX; estos archivos contienen el código estático y dinámico requerido por la página Web.

ASP.NET sólo funciona sobre el servidor de Microsoft IIS, lo que supone una desventaja respecto a otros lenguajes del lado de servidor, ejecutables sobre otros servidores más populares como Apache.

Página Oficial http://www.asp.net/

Última versión 4.0.30319.1


Licencia EULAs

Sistema Operativo: Windows

Fase de Desarrollo: Programación servidor

Tipo de Dispositivo: Multidispositivo

Tipo de Software: framework

Estado: Estable

Lenguaje con él trabaja: Todos los soportados por .Net

Tabla 2.10 Metadatos de ASP.Net

En la actualidad una aplicación ASP.NET puede ejecutarse de dos formas distintas:

Aplicaciones cliente/servidor: Estas aplicaciones están típicamente en

formato de ejecutables compilados. Estos pueden integrar toda la riqueza de

una interfaz de usuario, tal es el caso de las aplicaciones de desempeño y

productividad, pero no se reúne la lógica de negocio como un recurso que se

pueda reutilizar.

40

CAPITULO 3.

Aplicaciones que utilizan el navegador: Dichas aplicaciones están

caracterizadas por contar con una interfaz de Web rica y muy útil. La

interfaz gráfica integra varias tecnologías, las cuales son el HTML,

XHTML, scripting, etc.

1.5.2.2 BlackBerry WebWork

Kit de Desarrollo de Software (SDK), para Tablet OS y teléfonos 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 podrán aprovechar sus conocimientos de HTML para crear aplicaciones Web integradas para smartphones BlackBerry que aprovechen las capacidades avanzadas a través de APIs y servicios como hoy en día 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 adaptándolos a las características API para que cualquier desarrollador pueda modificarlas y lograr nuevas aplicaciones para ambas plataformas.

Página Oficial http://us.blackberry.com/developers/browserdev/

Última versión 1


Licencia: EULA

Sistema Operativo:

Fase de Desarrollo: Programación cliente

Tipo de Dispositivo: Móvil / Blackberry

Tipo de Software: framework

Estado: estable

Lenguaje con él trabaja: JavaScript

Tabla 2.11 Metadatos de Webwork

1.5.2.3 Drupal

Drupal es un sistema dinámico de gestión de contenido modular multipropósito y muy configurable que permite publicar artículos, imágenes, u otros archivos y servicios añadidos como foros, encuestas, votaciones, blogs y administración de usuarios y permisos. Con licencia GNU/GPL, está escrito en PHP, desarrollado y mantenido por una

41

CAPITULO 3.

la comunidad de usuarios. Destaca por la calidad de su código y de las páginas generadas, el respeto de los estándares de la Web, y un énfasis especial en la usabilidad y consistencia de todo el sistema. Este se desarrolló con la intención de ofrecer una alternativa a los CMS ya existentes que combinara de la forma más óptima posible las variables flexibilidad y configurabilidad, para que con él se pudieran construir gran variedad de sitios Web de la forma más sencilla y rápida posible.

El diseño de Drupal es especialmente idóneo para construir y gestionar comunidades en Internet. No obstante, su flexibilidad y adaptabilidad, así como la gran cantidad de módulos adicionales disponibles, hace que sea adecuado para realizar muchos tipos diferentes de sitio Web.

En la actualidad Drupal es uno de los CMS más potentes, y es reconocido por la calidad de su código, la seguridad que ofrece, su fácil instalación y configuración, por la cantidad de funcionalidades disponibles para él, por la cantidad de temas visuales, la gran calidad de documentación y la amplia comunidad que le da soporte.

Prueba de su reconocimiento es el uso que hacen de él conocidas instituciones o compañías como: MTV, el Gobierno de Bélgica, Discovery Magazine, Warner Brothers, New York Observer… En Drupal Sites (superburo.com, 2005) se listan algunos de los muchos sitios Web realizados con Drupal.

Página Oficial http://drupal.org/



Licencia: GPL

Sistema Operativo: Multiplataforma

Fase de Desarrollo: Programación-servidor


Tipo de Software: CMS

Estado: Estable

Lenguaje con él trabaja: PHP

Tabla 2.12 Metadatos de Drupal

1.5.2.4 Flash

Adobe Flash es la tecnología más comúnmente utilizada en el Web que permite la creación de animaciones vectoriales.

Originalmente Flash no fue un desarrollo propio de Adobe, sino de una pequeña empresa de desarrollo de nombre FutureWave Software y su nombre original fue

42

CAPITULO 3.

FutureSplash Animator. En diciembre de 1996 Macromedia adquiere FutureWave Software, y con ello su programa de animación 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 gráficos vectoriales y gráficos rasterizados, sonido, código de programa, flujo de vídeo y audio bidireccional. El interés del uso de gráficos 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 gráficos:

Los gráficos vectoriales, en los cuales una imagen es representada a partir de líneas (o vectores) que poseen determinadas propiedades (color, grosor...). La calidad de este tipo de gráficos no depende del zoom o del tipo de resolución con el cual se esté mirando el gráfico, ya que por mucho que nos acerquemos, el gráfico no se pixela, ya que el ordenador traza automáticamente las líneas para ese nivel de acercamiento.

Las imágenes en mapa de bits. Este tipo de gráficos se asemejan a una especie de cuadrícula en la cual cada uno de los cuadrados (píxeles) muestra un color determinado. La información de estos gráficos es guardada individualmente para cada píxel y es definida por las coordenadas y color de dicho píxel. Este tipo de gráficos son dependientes de la variación del tamaño y resolución, pudiendo perder calidad al modificar sucesivamente sus dimensiones.

Esta tecnología se sirve de las posibilidades que ofrece el trabajar con gráficos vectoriales, fácilmente redimensiónales y alterables por medio de funciones, y un almacenamiento inteligente de las imágenes y sonidos empleados en sus animaciones por medio de bibliotecas, para optimizar el tamaño de los archivos que contienen las animaciones.

Esta optimización del espacio que ocupan las animaciones, combinada con la posibilidad de cargar la animación 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 página se prolongue.

Además, Flash introduce en su entorno la posibilidad de interaccionar con el usuario. Para ello, Flash invoca un lenguaje de programación 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 animación en función de eventos producidos por el usuario, saltar a otras páginas, etc.

Página Oficial http://www.adobe.com/es/products/flash



Licencia EULAs

43

CAPITULO 3.


Fase de Desarrollo: Diseño


Tipo de Software: Diseño

Estado: Estable

Lenguaje con él trabaja: ActionScrip

Tabla 2.13 Metadatos de Flash

De este modo, Flash pone a nuestra disposición una tecnología 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 extensión “.fla” contiene el programa fuente mientras que los archivos “.swf” contienen el gráfico que será mostrado en la aplicación Web.

1.5.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 interacción con la técnica AJAX a páginas Web.

JQuery es software libre y de código abierto, posee un doble licencia, la Licencia MIT y la Licencia Pública 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 requerirían de mucho más código, 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 creación de aplicaciones complejas del lado del cliente, ofreciendo ayuda en la creación de interfaces de usuario, efectos dinámicos, aplicaciones que hacen uso de Ajax, etc. Poniendo a disposición una interfaz para programación que nos permitirá hacer cosas con el navegador que estemos seguros que funcionarán para todos los usuarios.

Core de jQuery

El core de jQuery lo forman las funciones más recurridas y que forman la base sobre la que se asienta cualquier código en este framework JavaScript. Contiene una serie

44

CAPITULO 3.

de clases y métodos útiles para hacer tareas reiterativas, que vamos a necesitar en las aplicaciones. Integra desde funciones que serán útiles en cualquier script, por sencillo que sea, hasta funciones menos recurridas pero que nos facilitarán la vida a hora de hacer código limpio, corto y reutilizable.

Utilizaremos el Core para realizar código con objetos, clases, datos, etc., pero realmente lo que más haremos será utilizar la función jQuery, que es el pilar fundamental sobre el que se basarán las aplicaciones.

Página Oficial http://jquery.com/



Licencia: GPL




Tipo de Software: Biblioteca

Estado: Estable

Lenguaje con él trabaja: JavaScript

Tabla 2.14 Metadatos de JQuery

Core tiene las funciones clasificadas en diversos apartados:

$(): Es la función principal de jQuery, que además tiene diversas utilidades

según los parámetros que se le envíen. Su utilidad principal es obtener

elementos de la página.

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 tamaño, 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 información adicional a

elementos de la página. También 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 métodos, algo que se utiliza habitualmente a la hora de

crear plugins para añadir funcionalidades a jQuery.

45

CAPITULO 3.

Interoperabilidad: Funciones que permiten que jQuery no tenga problemas

de compatibilidad con otras librerías JavaScript que también suelen utilizar

la función dólar $().

1.5.2.6 Joomla!

Joomla! es un Sistema de Gestión de Contenidos (CMS), de código abierto, que permite construir sitios Web y otras aplicaciones, de manera sencilla. Surge del núcleo de Mambo, el 17 de agosto de 2005, de mano de la compañía Miro de Australia.

Por su diseño, potencia, flexibilidad y por sus enormes posibilidades de ampliación se está convirtiendo en el sistema de publicación 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 técnicos especiales o de complejos lenguajes de programación.

A partir de una plantilla y de unos contenidos de ejemplo iniciales permite desarrollar un vistoso y completo portal añadiendo los contenidos, menús y elementos visuales deseados a través de un entorno Web y sin necesidad de programas auxiliares ni de conocimientos especiales de diseño o de programación ya que todas estas operaciones de edición y administración se realizan a través de cualquier navegador.

Joomla! se basa en Mambo, otro CMS iniciado por la empresa australiana Miro, que tenía además la propiedad de la marca. El proyecto Joomla surge en 2005 cuando Miro decidió crear una Fundación, cuyos desarrolladores se agruparon en torno al movimiento Open Source Matters que poco después daría lugar a Joomla!, una denominación 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 estática tradicional en un completo portal con diferentes funcionalidades y características dinámicas e interactivas que hacen de nuestro sitio algo más que una página Web informativa a la vez que se facilita la introducción y actualización de contenidos.

Página Oficial http://www.joomla.org/



Licencia: GPL

46

CAPITULO 3.





Estado: Estable


Tabla 2.15 Metadatos de Joomla!

1.5.2.7 Mootools

MooTools (My oriented object tools) es un Framework Web orientado a objetos para JavaScript, de código 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 más enfocada a la orientación de objetos que la implementación estándar soportada por los navegadores Web. Con Mootools podemos programar todo tipo de scripts en el cliente rápidamente y sin preocuparnos de las distintas particularidades de cada navegador.

Algunas de sus ventajas:

Es un Framework modular y extensible.

o Core: colección de funciones de apoyo de las que hace uso el resto

de components.

o Class: es la biblioteca base de MooTools para la instanciación de

objetos

o Natives: Colección de mejoras al objeto nativo JavaScript,

añadiendo funcionalidades, compatibilidad y nuevos métodos que

simplifican el código.

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

o Window: Proporciona una interfaz, válida para cualquier navegador,

para obtener información del cliente, por ejemplo el tamaño de la

ventana

MooTools es orientado a objetos y sigue los principios DRY, que hacen de

él un Framework rico, potente y eficiente.

47

CAPITULO 3.

Componente avanzado de efectos (Effects), con transiciones (Transitions),

de función parabólica, optimizadas y utilizadas por multitud de

desarrolladores Flash.

Framework desarrollado por programadores para programadores

Página Oficial http://mootools.net/






Tipo de Software: Biblioteca

Estado: Estable

Lenguaje con él trabaja: Biblioteca

Tabla 2.16 Metadatos de Mootools

1.5.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 petición 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 público en julio del 2004, y lo implemento en una aplicación orientada a la administración de proyectos llamada Basecamp. Rails está basado en estos principios de desarrollo:

Don’t Repeat Yourself

Convention Over Configuration

“No te repitas” significa que las definiciones deberían hacerse una sola vez. Dado que Ruby on Rails es un framework de pila completa, los componentes están 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 averiguarlos a partir de la propia base de datos, de forma que definirlos tanto en el código como en el programa sería redundante.

“Convención sobre configuración”, quiere decir, que el programador sólo necesita definir aquella configuración 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

48

CAPITULO 3.

tabla no sigue la convención debe ser especificada manualmente. Así, cuando se diseña una aplicación partiendo de cero, sin una base de datos preexistente, seguir las convenciones de Rails significa utilizar menos código

Página Oficial www.rubyonrails.org






Tipo de Software: Framework

Estado: Estable

Lenguaje con él trabaja: Ruby

Tabla 2.17 Metadatos Ruby on rails

1.5.2.9 Symfony

Symfony es un completo framework diseñado para optimizar, gracias a sus características, el desarrollo de las aplicaciones Web. Simplificando el desarrollo de una aplicación mediante la automatización de algunos de los patrones utilizados para resolver las tareas comunes, proporciona estructura al código fuente, forzando al desarrollador a crear código más legible y más fácil de mantener, y facilita la programación de aplicaciones, ya que encapsula operaciones complejas en instrucciones sencillas.

Este framework separa la lógica de negocio, la lógica de servidor y la presentación de la aplicación Web. Proporciona varias herramientas y clases encaminadas a reducir el tiempo de desarrollo de una aplicación Web compleja. Además, automatiza las tareas más comunes, permitiendo al desarrollador dedicarse por completo a los aspectos específicos de cada aplicación.

Symfony está desarrollado completamente con PHP 5, ha sido probado en numerosos proyectos reales y se utiliza en sitios Web de comercio electrónico de primer nivel. Symfony es compatible con la mayoría de gestores de bases de datos, como MySQL, PostgreSQL, Oracle y SQL Server de Microsoft. Se puede ejecutar tanto en plataformas Unix/Linux, como en plataformas Windows. Algunas de sus características.

Está diseñado para que se ajustara a los siguientes requisitos:

Fácil de instalar y configurar en la mayoría de plataformas

Independiente del sistema gestor de bases de datos

49

CAPITULO 3.

Sencillo de usar en la mayoría de casos, pero lo suficientemente flexible

como para adaptarse a los casos más complejos

Basado en la premisa de " Convención en vez de configurar", en la que el

desarrollador solo debe configurar aquello que no es convencional

Sigue la mayoría de mejores prácticas y patrones de diseño para la Web

Preparado para aplicaciones empresariales y adaptable a las políticas y

arquitecturas propias de cada empresa, además de ser lo suficientemente

estable como para desarrollar aplicaciones a largo plazo

Código fácil de leer que incluye comentarios de phpDocumentor y que

permite un mantenimiento muy sencillo

Fácil de extender, lo que permite su integración con librerías desarrolladas

por terceros

Symfony automatiza la mayoría de elementos comunes de los proyectos Web: La capa de internacionalización que incluye Symfony permite la traducción

de los datos y de la interfaz, así como la adaptación local de los contenidos.

La capa de presentación utiliza plantillas y layouts que pueden ser creados

por diseñadores HTML sin ningún tipo de conocimiento del framework

Los formularios incluyen validación automatizada y relleno automático de

datos, lo que asegura la obtención de datos correctos y mejora la experiencia

de usuario.

Los datos incluyen mecanismos de escape que permiten una mejor

protección contra los ataques producidos por datos corruptos.

La autenticación y la gestión de credenciales simplifican la creación de

secciones restringidas y la gestión de la seguridad de usuario.

El sistema de enrutamiento y las URL limpias permiten considerar a las

direcciones de las páginas como parte de la interfaz, además de estar

optimizadas para los buscadores.

El soporte de e-mail incluido y la gestión de APIs permiten a las

aplicaciones Web interactuar más allá de los navegadores.

Los listados son más fáciles de utilizar debido a la paginación automatizada,

el filtrado y la ordenación de datos.

Los plugins, las factorías (patrón de diseño "Factory") y los "mixin"

permiten realizar extensiones a medida de Symfony.

Las interacciones con Ajax son muy fáciles de implementar mediante los

helpers que permiten encapsular los efectos JavaScript compatibles con

todos los navegadores en una única línea de código. (Potencier, 2008)

Página Oficial http://www.symfony.es/


50

CAPITULO 3.





Tipo de Software: Framework

Estado: Estable


Tabla 2.18 Metadatos de Symfony

1.5.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 programación. WebMatrix también incluye una galería que permite encontrar el host ideal para tu sitio de forma más fácil y ofrecer un desarrollo integrado y sincronizado de herramientas para ayudar manejar la presencia de desarrolladores en línea. Este set de herramientas está diseñado 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 informática que quieran probar una manera sencilla de desarrollar sitios Web desde su ordenador, programando de forma básica, gestionando bases de datos y entendiendo la estructura de una Web estática o dinámica, el uso de hojas de estilo (CSS) o el lenguaje HTML y ASP. La plataforma de Microsoft incorpora un editor de código y bases de datos, administrador Web server, FTP y un sistema de publicación sencillo, además de una serie de alertas para encontrar errores en el código.

La plataforma de desarrollo Web se compone de dos partes: una para entender conceptos básicos de páginas Web estáticas o dinámicas y otra para utilizar plataformas CMS open source que utilizan PHP, gestores de contenido como Joomla, WordPress, Drupal, etc.

Página Oficial http://www.microsoft.com/Web/Webmatrix/






51

CAPITULO 3.


Estado: Estable

Lenguaje con él trabaja: PHP y lenguajes ASP.Net

Tabla 2.19 Metadatos de WebMatrix

1.5.2.11 WordPress

“WordPress nació como el deseo de tener un sistema de publicación elegante y bien diseñado, 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 raíces y el desarrollo vienen de 2001. Es un producto maduro y estable. Esperamos que con una focalización en los estándares Web y en la experiencia del usuario final, podamos crear una herramienta completamente distinta a las demás" (wordpress.org, 2010)

WordPress es una poderosa plataforma de publicación personal, con una gran cantidad de características incorporadas, diseñadas para hacer tan fácil y atractiva como sea posible la experiencia de publicar en Internet.

Página Oficial http://wordpress.org/







Estado: Estable


Tabla 2.20 Metadatos de Wordpress

En principio, es un sistema de publicación Web basado en entradas ordenadas por fecha, entre otras muchas posibilidades además de páginas estáticas. La estructura y diseño visual del sitio depende de un sistema de plantillas, independiente del contenido en sí. La filosofía de Wordpress es apostar por la elegancia, la sencillez y las recomendaciones del W3C, separando el contenido y el diseño en XHTML y CSS.

52

CAPITULO 3.

1.5.3 Bases de datos

Una base de datos es un “almacén” que nos permite guardar grandes cantidades de información de forma organizada para que luego podamos encontrar y utilizar fácilmente. A continuación te presentamos una guía que te explicará el concepto y características de las bases de datos.

El término 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 información relacionada que se encuentra agrupada o estructurada.

Desde el punto de vista informático, 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 más tablas que guarda un conjunto de datos. Cada tabla tiene una o más columnas y filas. Las columnas guardan una parte de la información sobre cada elemento que queramos guardar en la tabla, cada fila de la tabla conforma un registro.

Entre las principales características de los sistemas de base de datos podemos mencionar:

Independencia lógica y física de los datos.

Redundancia mínima.

Acceso concurrente por parte de múltiples usuarios.

Integridad de los datos.

Consultas complejas optimizadas.

Seguridad de acceso y auditoría.

Respaldo y recuperación.

Acceso a través de lenguajes de programación estándar.

Las principales clasificaciones de las bases de datos, pueden hacerse según la variabilidad de los datos almacenados:

Estáticas: bases de datos de sólo lectura, utilizadas primordialmente para

almacenar datos históricos que posteriormente se pueden utilizar para

estudiar el comportamiento de un conjunto de datos a través del tiempo,

realizar proyecciones y tomar decisiones.

Dinámicas: bases de datos donde la información almacenada se modifica

con el tiempo, permitiendo operaciones como actualización, borrado y

adición de datos, además de las operaciones fundamentales de consulta.

53

CAPITULO 3.

O fijándonos en su modelo de administración:

Jerárquicas: Este modelo utiliza árboles (Figura 2.8) para la representación

lógica de los datos.

Figura 2.8 Árbol base de datos jerárquica

De red: En este modelo las entidades se representan como nodos y sus

relaciones son las líneas que los unen. En esta estructura cualquier

componente puede relacionarse con cualquier otro. A diferencia del modelo

jerárquico, en este modelo, un hijo puede tener varios padres.

Transaccionales: Son bases de datos cuyo único fin es el envío y recepción

de datos a grandes velocidades, estas bases son muy poco comunes y están

dirigidas por lo general al entorno de análisis de calidad, datos de

producción 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 duplicación de información no es un problema como con las

demás bases de datos, por lo general para poderlas aprovechar al máximo

permiten algún tipo de conectividad a bases de datos relacionales.

Relacionales: El modelo relacional para la gestión de una base de datos es

un modelo de datos basado en la lógica de predicados y en la teoría de

conjuntos. Es el modelo más utilizado en la actualidad para modelar

problemas reales y administrar datos dinámicamente.

Multidimensionales: Son bases de datos ideadas para desarrollar

aplicaciones muy concretas, como creación de Cubos OLAP. Básicamente

no se diferencian demasiado de las bases de datos relacionales, la diferencia

está más bien a nivel conceptual; en las bases de datos multidimensionales

los campos o atributos de una tabla pueden ser de dos tipos, o bien

54

CAPITULO 3.

representan dimensiones de la tabla, o bien representan métricas que se

desean estudiar.

Orientadas a objetos: En una base de datos orientada a objetos, la

información se representa mediante objetos como los presentes en la

programación orientada a objetos. Cuando se integra las características de

una base de datos con las de un lenguaje de programación orientado a

objetos, el resultado es un sistema gestor de base de datos orientada a

objetos (ODBMS, object database management system)

Documentales: Permiten la indexación a texto completo, y en líneas

generales realizar búsquedas más 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 través de

inferencias. Se basa principalmente en reglas y hechos que son almacenados

en la base de datos. Las bases de datos deductivas son también llamadas

bases de datos lógicas, a raíz de que se basa en lógica matemática. 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 continuación detallare brevemente algunas de las bases de datos más utilizadas dentro del desarrollo Web.

1.5.3.1 MySql

MySQL es un sistema de gestión de bases de datos relacional, licenciado bajo la GPL de la GNU. Su diseño 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 código fuente del servidor SQL, así como también de la marca.

Aunque MySQL es software libre, MySQL AB distribuye una versión comercial de MySQL, que no se diferencia de la versión libre más que en el soporte técnico que se ofrece, y la posibilidad de integrar este gestor en un software propietario, ya que de no ser así, se vulneraría la licencia GPL.

Este gestor de bases de datos es, probablemente, el gestor más usado en el mundo del software libre, debido a su gran rapidez y facilidad de uso. Esta gran aceptación es debida, en parte, a que existen infinidad de librerías y otras herramientas que permiten su uso a través de gran cantidad de lenguajes de programación, además de su fácil instalación y configuración.

Inicialmente, MySQL carecía 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 páginas Web con contenido dinámico, debido a su simplicidad, de

55

CAPITULO 3.

tal manera que los elementos faltantes fueron complementados por la vía de las aplicaciones que la utilizan. Poco a poco estos elementos faltantes, están siendo incorporados tanto por desarrolladores internos, como por desarrolladores de software libre

Las principales características de este gestor de bases de datos son las siguientes:

Aprovecha la potencia de sistemas multiprocesador, gracias a su

implementación 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.

Gestión 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 elaboración de bases de datos, ya que

debido a su bajo consumo

Puede ser ejecutado en una máquina con escasos recursos sin ningún

problema.

Facilidad de configuración e instalación. 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:

Un gran porcentaje de las utilidades de MySQL no están documentadas.

No es intuitivo, como otros programas (ACCESS).

Página Oficial http://www.mysql.com/



Licencia: GPL o Uso comercial

Variabilidad dinámica

Modelo Relacional

56

CAPITULO 3.

Sistema Operativo Multiplataforma

Tabla 2.21 Metadatos de MySQL

1.5.3.2 PostGreSql

PostGreSQL es un sistema de gestión 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 derivación libre (OpenSource) de este proyecto, y utiliza el lenguaje SQL92/SQL99, así como otras características.

Fue el pionero en muchos de los conceptos existentes en el sistema objeto-relacional actual, incluido, más tarde en otros sistemas de gestión comerciales. PostGreSQL es un sistema objeto-relacional, ya que incluye características de la orientación 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 gestión de bases de datos puramente orientado a objetos.

Página Oficial http://www.postgresql.org/



Licencia: BSD

Variabilidad Dinámica

Modelo O. Objetos


Tabla 2.22 Metadatos de PostgreSQL

A continuación se enumeran las principales características de este gestor de bases de datos:

Implementación del estándar SQL92/SQL99.

Soporta distintos tipos de datos: además del soporte para los tipos base,

también soporta datos de tipo fecha, monetarios, elementos gráficos, datos

sobre redes (MAC, IP...), cadenas de bits, etc. También permite la creación

de tipos propios.

57

CAPITULO 3.

Incorpora una estructura de datos array.

Incorpora funciones de diversa índole: manejo de fechas, geométricas,

orientadas a operaciones con redes, etc.

Permite la declaración de funciones propias, así como la definición 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 gestión de diferentes usuarios, como también los permisos asignados a cada uno de ellos.

1.5.3.3 Oracle

Oracle database es un sistema de gestión de base de datos objeto-relacional (o ORDBMS por el acrónimo en inglés de Object-Relational Data Base Management System), desarrollado por Oracle Corporation.

Se considera a Oracle como uno de los sistemas de bases de datos más 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 fundación de Software Development Laboratories (SDL) fue motivada principalmente a partir de un estudio sobre los .SGBD (Sistemas Gestores de Base de Datos) de George Koch. Computer World definió este estudio como uno de los más completos jamás escritos sobre bases de datos. Este artículo incluía una comparativa de productos que erigía a Relational Software como el más completo desde el punto de vista técnico. Esto se debía a que usaba la filosofía de las bases de datos relacionales, algo que por aquella época era todavía desconocido.

La última versión de Oracle, cuenta con 6 ediciones:

Oracle Database Enterprise Edition (EE).58

CAPITULO 3.

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 edición gratuita es la Express Edition, que es compatible con las demás ediciones de Oracle Database 10gR2 y Oracle Database 11g. Recientemente, Oracle adquirió a Sun Microsystems y con ella la empresa encargada comercial de MySQL.

Página Oficial http://www.oracle.com/



Licencia: EULAs


Modelo O. Objetos


Tabla 2.23 Metadatos de Oracle

1.5.3.4 Access

Microsoft Access es un programa, utilizado en los sistemas operativos Microsoft Windows, para la gestión de bases de datos, orientado a ser usado en entornos personales o en pequeñas organizaciones. Es un componente de la suite Microsoft Office. Permite crear ficheros de bases de datos relacionales que pueden ser fácilmente gestionadas por una interfaz gráfica 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 información

Entre sus principales características se encuentran:

Access es gráfico, por lo que aprovecha al máximo la potencia gráfica de

Windows, ofreciendo métodos usuales de acceso a los datos y

proporcionando métodos simples y directos de trabajar con la información.

Access facilita la administración de datos, ya que sus posibilidades de

consulta y conexión le ayudan a encontrar rápidamente la información

deseada, cualquiera que sea su formato o lugar de almacenamiento.

Con Access es posible producir formularios e informes sofisticados y

efectivos, así como gráficos y combinaciones de informes en un solo

documento.

59

CAPITULO 3.

Access permite lograr un considerable aumento en la productividad

mediante el uso de los asistentes y las macros. Estos permiten automatizar

fácilmente muchas tareas sin necesidad de programar.

Página Oficialhttp://office.microsoft.com/es-es/access/

Última versión 2010


Licencia: EULA

Variabilidad Dinámica

Modelo Relacional

Sistema Operativo Windows

Tabla 2.24 Metadatos Access

1.5.3.5 Microsoft SQL Server

Microsoft SQL Server es un sistema para la gestión 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 características:

Soporte de transacciones.

Escalabilidad, estabilidad y seguridad.

Soporta procedimientos almacenados.

Incluye también un potente entorno gráfico de administración, que permite

el uso de comandos DDL y DML gráficamente.

Permite trabajar en modo cliente-servidor, donde la información y datos se

alojan en el servidor y los terminales o clientes de la red sólo acceden a la

información.

Además permite administrar información de otros servidores de datos.

Este sistema incluye una versión reducida, llamada MSDE con el mismo motor de base de datos pero orientado a proyectos más pequeños, que en sus versiones 2005 y 2008 pasa a ser el SQL Express Edition, que se distribuye en forma gratuita.

Es común desarrollar completos proyectos complementando Microsoft SQL Server y Microsoft Access a través 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

60

CAPITULO 3.

Access), a través de la implementación de aplicaciones de dos capas mediante el uso de formularios Windows.

En el manejo de SQL mediante líneas de comando se utiliza el SQLCMD. Para el desarrollo de aplicaciones más complejas (tres o más capas), Microsoft SQL Server incluye interfaces de acceso para varias plataformas de desarrollo, entre ellas .NET, pero el servidor sólo está disponible para Sistemas Operativos Windows.

Página Oficial http://www.microsoft.com/sql/



Licencia: EULAs


Modelo Relacional

Sistema Operativo Windows

Tabla 2.25 Metadatos de Microsoft SQL

1.6 Herramientas Similares

Después de estudiar las tecnologías existentes, así como las herramientas que proporcionaran algún tipo de apoyo o guía en la elección de estas, llegamos a la conclusión que el tipo de herramientas similares o más parecidas, son foros, listados o bibliotecas. En estas, el usuario solo puede consultar o buscar tecnologías, pero no introducir sus necesidades para obtener soluciones.

Algunas de las páginas más completas que recopilan de tecnologías son:

(DedaSys, 2011): Pagina web en la que podemos encontrar una recopilación

de los lenguajes de programación más populares, según algunos de los

buscadores más famosos.

(BestWebFrameworks, 2011): Completa recopilación de los frameworks

existentes para el desarrollo web, clasificados según al lenguaje que sirvan

(Patel, 2011): Biblioteca de recursos para desarrolladores.

(TIOBE Software, 2011): Estudio sobre los lenguajes de desarrollo más

populares, proporcionando estadísticas de cómo evoluciona el número de

usuarios de estos lenguajes.

61

CAPITULO 3.

1.7 Conclusión

A lo largo de este capítulo se ha hecho un repaso por el estado actual de las tecnologías para el desarrollo de aplicaciones Web, así como por los inicios y la evolución de las páginas Web.

Se puede observar la rápida evolución de las aplicaciones Web, así como el constante crecimiento de las herramientas y sus evoluciones, para cubrir todas las necesidades que al desarrollador le surgían según el usuario demandaba nuevas características o mejoras dentro de las aplicaciones Web.

Aunque las tecnologías existentes son muy numerosas, sobre todo en el campo de herramientas para la implementación de la página Web, en este capítulo se han visto las más populares, partiendo de los lenguajes de desarrollo Web más utilizados y las herramientas más usadas para la utilización de estos en la creación de aplicaciones Web. Gracias a esta selección de tecnologías, podemos conseguir realizar una buena clasificación con las características esenciales que un desarrollador demanda a la hora de elegir sus “herramientas de trabajo”.

Podemos concluir, que las tecnologías están en constante evolución, añadiendo nuevas características y mejoras a las que ya poseían, o surgiendo como nuevas herramientas dispuestas a cubrir un “campo” que ninguna otra herramienta antes satisfacía. Es por ello, que la creación de una herramienta de clasificación de las mismas, debe ser lo suficientemente flexible como para permitir este constante cambio dentro de las tecnologías.

62

CAPITULO 3.

CAPITULO 3.

DESCRIPCIÓN DE LA

HERRAMIENTA

A continuación se describe la aplicación construida para servir de asistente en la elección de tecnologías a los desarrolladores Web. Este capítulo está dividido en varios apartados, los cuales nos ayudan a entender detalladamente cómo es la aplicación, así como el proceso que se ha seguido para implementarla.

CAPITULO 3.

1.8 Descripción de Alto Nivel

La herramienta que construida, es un aplicación Web la cual nos guiará y ayudará a elegir las tecnologías de desarrollo Web más adecuadas a nuestras necesidades.

Figura 3.9 Pantalla Principal

Esta herramienta consta de una pantalla principal, Figura 3.9, en la que se muestra, de forma visual y atractiva, las últimas tecnologías para la creación de aplicaciones Web. Cada una de estas tecnologías, se muestra al usuario en forma de burbuja, acompañada de unas estrellas dependiendo de la importancia/puntuación que los usuarios le han otorgado, es decir, las herramientas más populares dentro de la comunidad de desarrolladores, tendrán un mayor número de estrellas. Estas burbujas, están clasificadas según el tipo de tecnología que representan, agrupadas mediante un color unitario. Cada una de estas esferas, al seleccionar el nombre de la tecnología, permite al usuario acceder a las características y especificaciones propias de cada una de las tecnologías.

Esta pantalla principal, muestra inicialmente tantas tecnologías como el sistema tenga almacenado. Estas burbujas, permiten al usuario interactuar con ellas, pichando sobre ellas y lanzándolas por la pantalla, las cuales rebotan entre ellas y las paredes, simulando el comportamiento que tendrían pelotas de goma. Estas, interactúan 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, según el movimiento que proporcionemos a su “espacio”.

CAPITULO 3.

Figura 3.10 Detalles Filtro

Dentro de esta ventana, también contaremos con un filtro en la parte superior (Figura 3.10), que nos permitirá seleccionar las características de las tecnologías que queremos encontrar, mostrando solo aquellas tecnologías que cumplan esos requisitos. Dividido según el tipo de tecnología, nos muestra uno menús en el que podemos marcar aquellos atributos con los que deseamos contar en nuestra aplicación, limitando la información mostrada a las opciones elegidas. Este filtro, también cuenta con la posibilidad de ser minimizado, permitiendo a las burbujas disponer del máximo de pantalla en el que desplegarse. El filtro esta creado permitiendo la flexibilidad de la aplicación, cambiando en función de los atributos que pueda tener cada una de las tecnologías. 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 descripción de cómo usar la

aplicación.

Otra de las características que ofrece esta aplicación, es la posibilidad de buscar tecnologías. Para ello, se debe introducir el texto dentro de la herramienta buscar, situada en la parte superior, y la propia herramienta recomendará las posibles tecnologías existentes dependiendo de los caracteres introducidos.

Además de la pantalla principal, la aplicación consta de otros elementos que complementan su funcionalidad. Un apartado en el que cada tecnología muestra sus características, Figura 3.11, y en el cual cada usuario registrado, puede realizar comentarios sobre cada tecnología, así como puntuarla según la importancia que el usuario le otorgue.

CAPITULO 3.

Figura 3.11 Pantalla tecnología especifica

Otra pantalla (Figura 3.12) de la aplicación, es la denominada backend, destinada a la administración de la misma. En esta “zona”, los administradores del sistema podrán modificar las tecnologías existentes dentro del sistema, así como añadir nuevas o borrar. Al igual, permite la gestión de los usuarios del sistema y de los atributos y características de cada una de las tecnologías.

Figura 3.12 Pantalla de administración

67

CAPITULO 3.

1.9 Descripción Metodológica

Para una descripción 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 gráfica y detallada, las distintas características de la aplicación.

1.9.1 Requisitos

En la Especificación de Requisitos Software (ERS) se hace una descripción completa del comportamiento del sistema que se va a desarrollar. Incluye un conjunto de casos de uso que describe todas las interacciones que tendrán los usuarios con el software.

Los requisitos del sistema, están divididos en requisitos funcionales, agrupados en Gestión del frontend, Gestión del backend y gestión de los usuarios, y requisitos no funcionales. Estos últimos, según recomienda K.Pohl (Pohl, 2009), se dividen en requisitos de calidad y requisitos de restricción.

Requisitos Funcionales

Gestión del Backend

o 1.1 El administrador del sistema podrá dar permisos de

administración a usuarios registrados

o 1.2 El sistema permitirá introducir, borrar y modificar tecnologías en

el sistema

o 1.3 Las tecnologías deben estar divididas en lenguajes, herramientas

y base de datos, con sus atributos específicos

o 1.4 el sistema permitirá la inserción 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 tecnología debe contener

Gestión de Frontend

o 2.1 El sistema mostrara todas las tecnologías disponibles para el

desarrollo Web

o 2.2 El sistema permitirá filtrar las distintas tecnologías, mediante

atributos elegidos por el usuario

o 2.3 El sistema permitirá elegir una tecnología para ver sus

característica

68

CAPITULO 3.

o 2.4 El sistema permitirá ocultar el sistema de filtrado de tecnologías

Gestión de Usuarios

Gestión 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

tecnologías y comentarlas

Requisitos no funcionales

Requisitos de calidad

o 4.1 El sistema debe mostrar la información de las distintas

tecnologías de la forma más atractiva posible

o 4.2 El sistema mostrara las tecnologías divididas por colores según

el tipo al que pertenezcan

o 4.3 El sistema debe permitir una constante actualización de

tecnologías, atributos y formas de filtrado

o 4.4 El sistema debe hacer uso de varias tecnologías Web

o 4.5 El sistema debe visualizarse en el dispositivos móviles

69

CAPITULO 3.

Figura 3.13 Requisitos del sistema

Requisitos de restricción

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 análisis de los requisitos de la aplicación 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 más escenarios, que indican cómo debería interactuar el usuario con el sistema. Al igual que los requisitos funcionales, estos también están divididos en 3 categorías, 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 aplicación.

En Figura 3.14, nos muestra el diagrama de caso de uso relacionado con los requisitos de gestión 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 básicamente a:

Alta, baja y Modificación de Usuario

Modificar permisos de Usuario

Insertar tecnologías

Borrar tecnologías

Modificar tecnologías

Insertar nuevos atributos

Modificar atributos

Borrar Atributos

70

CAPITULO 3.

uc gestion backend

Administrador

(from Casos de Uso)

UC 1.1 Alta Usuarios

UC 1.2 Modificar Usuarios

UC 1.3 Borrar Usuarios

UC 1.4 Modificar permisos

UC 1.5 Insertar tecnologia

UC 1.6 Borrar tecnologia

UC 1.8 Modificar TecnologiaUC 1.7 Insertar

Nuev os AtributosUC 1.9 Borrar

atributosUC 1.9 Modificar

Atributos

Figura 3.14 Diagrama de Caso de Uso-Gestión 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 acción.

UC 1.6 Insertar Tecnología (Figura 3.15)

a) Descripción: Este caso de uso permite a los administradores insertar nuevas tecnologías dentro del sistema.

b) Precondición: El usuario debe estar autentificado, dentro del backend, como administrador del sistema.

c) Flujo básico:

Paso 1: el administrador selecciona un tipo de tecnología

71

CAPITULO 3.

Paso 2: el sistema muestra los atributos de esa tecnología y todas las

almacenadas en el sistema de esa tipo

Paso 3: El usuario selecciona inserta nueva tecnología (del tipo

anteriormente seleccionado)

Paso 4: el sistema muestra un formulario con todos los atributos que puede

tener una tecnología

Paso 5: el usuario rellena el formulario y pulsa guardar

Paso 6: el sistema guarda la nueva información y vuelve al paso 4

d) Flujo alternativo:

• Paso 5.1 Si el usuario introduce un nombre de tecnología ya utilizado, el sistema notifica al usuario y no guarda los datos, vuelve al paso 4

e) Postcondición: la nueva tecnología esta insertada en el sistema, y aparecerá en todos los casos relacionados con las tecnologías.

Figura 3.15 Escenario Caso de uso UC 1.6

72

CAPITULO 3.

En la Figura 3.16, podemos ver los casos de usos relacionados con la gestión del frontend. Estos, representan las acciones que se pueden realizar dentro la aplicación principal. En estos casos de uso, interviene todos los actores del sistema, pudiendo realizar aquellos que no están en un nivel mayor de especialización.

Casos de uso que pueden realizar todos los usuarios: Filtrar tecnologías

Interactuar con las pelotas

Visualizar datos tecnología

Mostrar pelotas/tecnología

Casos de uso, solo para usuarios registrados Comentar tecnología

Puntuar tecnología

uc gestion frontend

Usuario

(from Casos de Uso)

Visitante

(from Casos de Uso)

UC 2.1 Filtrar tecnologias

UC 2.2 Comentar tecnologia

UC 2.3 Puntuar tecnologia

UC 2.4 Visualizar datos tecnologia

UC 2.5 Interacturar con las pelotas

UC 2.6 Mostrar pelota/tecnologia

Administrador

(from Casos de Uso)

Figura 3.16 Diagrama Caso de uso- Gestión del Frontend

73

CAPITULO 3.

UC 2.5 Interactuar con las pelotas (Figura 3.17)

a) Descripción: este caso de uso, permite al usuario, interactuar con las pelotas que

contienen las tecnologías.

b) Precondición: el usuario debe estar en la pantalla principal de la aplicación

c) Flujo básico

Paso 1: el sistema muestra las pelotas con las tecnologías extraídas de la

base de datos (UC 2.6)

Paso 2: el usuario "agarra" una pelota con el ratón 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.17 Escenario UC 2.5 Interactuar con las pelotas

74

CAPITULO 3.

UC 2.1 Filtrar tecnologías (Figura 3.18)

a) Descripción: este caso de uso describe como un usuario puedes filtrar las

tecnologías mediantes distintas características

b) Precondición: El usuario debe estar en la página principal (UC 2.6)

c) Flujo Básico

Paso1: el usuario pulsa en el filtro

Paso 2: el sistema despliega el filtro que mantenía oculto, mostrando todas las

opciones posibles

Paso 3: el usuario selecciona las características, de las tecnologías que busca.

Paso 4: el usuario selecciona "filtrar"

Paso 5: el sistema busca en la base de datos las tecnologías con las

características seleccionadas

Paso 6: el sistema renueva las pelotas, cargando las nuevas (UC 2.6)

Figura 3.18 Escenario UC 2.1 filtrar tecnologías

75

CAPITULO 3.

d) Postcondición: el sistema muestra solo las tecnologías con las características

elegidas, permitiendo realizar los mismos casos de uso que con las pelotas

iniciales.

La Figura 3.19 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 sesión

Cerrar sesión

Visualizar datos

Modificar datos

Borrar cuenta

Registrarse en el sistema

uc gestion usuarios

Usuario

(from Casos de Uso)

UC 3.1 Iniciar Sesion

UC 3.2 Cerrar sesion

UC 3.3 Visualizar Datos

UC 3.4 Borrar cuenta

Administrador

(from Casos de Uso)

UC 3.5 Modificar datos


«extend»

Figura 3.19 Diagrama Caso de Uso- Gestión de Usuarios

76

CAPITULO 3.

Trazabilidad

En la Figura 3.20, Figura 3.21 y Figura 3.22 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.

main gestion backend

Administrador

(from Casos de Uso)

(from gestion backend)

UC 1.1 Alta Usuarios


UC 1.2 Modificar Usuarios


UC 1.3 Borrar Usuarios


UC 1.4 Modificar permisos


UC 1.5 Insertar tecnologia


UC 1.6 Borrar tecnologia


UC 1.8 Modificar Tecnologia


UC 1.7 Insertar Nuev os Atributos


UC 1.9 Borrar atributos


UC 1.10 Modificar Atributos

1.1 El administrador del sistema podra dar permisos de administracion a usuarios registrados

(from Gestion del backend)

1.2 El sistema permitira introducir, borrar y modificar tecnologias en el sistema


1.4 el sistema permitira la inserccion y baja de usuarios en el sistema, asi como modificar sus datos


1.5 El sistema permitira modificar, insertar y borrar los atributos que cada tecnologia debe contener


Figura 3.20 Diagrama Trazabilidad - Gestión Backend

77

CAPITULO 3.

main gestion frontend

Usuario

(from Casos de Uso)

Visitante

(from Casos de Uso)

(from gestion frontend)

UC 2.1 Filtrar tecnologias


UC 2.2 Comentar tecnologia


UC 2.3 Puntuar tecnologia


UC 2.4 Visualizar datos tecnologia


UC 2.5 Interacturar con las pelotas


UC 2.6 Mostrar pelota/tecnologia

Administrador

(from Casos de Uso)

2.1 El sistema mostrara todas las tecnologias disponibles para el desarrollo web

(from Gestion del frontend)

2.2 El sistema permitira fi l trar las distintas tecnologias, mediante atributos elegidos por el usuario


2.3 El sistema permitira eleguir una tecnologia para ver sus caracteristica


3.2 El sistema distinguirá 3 tipos de usuarios: visitante, usuario registrado y Administrador.

(from Gestion de Usuarios)

3.4 El sistema permitira a los usuarios registrados votar las tecnologias y comentarlas


Figura 3.21 Diagrama Trazabilidad - Gestión frontend

main gestion usuarios

Usuario

(from Casos de Uso)

(from gestion usuarios)

UC 3.1 Iniciar Sesion


UC 3.2 Cerrar sesion


UC 3.3 Visualizar Datos


UC 3.4 Borrar cuenta

Administrador

(from Casos de Uso)


UC 3.5 Modificar datos



3.1 Cuando el sistema detecta credenciales de administrador, entrará al backend directamente.


3.3 El sistema permite a usuarios registrados modificar los datos personales de su cuenta


«extend»

Figura 3.22 Diagrama Trazabilidad - Gestión Usuarios

78

CAPITULO 3.

1.9.2 Análisis

El proceso de análisis del software, consiste en el diseño de componentes de una aplicación (entidades del negocio), generalmente utilizando patrones de arquitectura. El diseño arquitectónico debe permitir visualizar la interacción entre las entidades del negocio, además de poder ser validado, describiendo en general cómo se construirá la aplicación de software.

En esta parte veremos el diagrama de clases, elemento esencial para el análisis de una aplicación software, y algunos de los diagramas más representativos de secuencia y actividad.

En la Figura 3.23, podemos ver el diagrama de clases de la aplicación, el cual describe la estructura del sistema mostrando sus clases, atributos y relaciones entre ellos. Las clases que forman este diagrama son:

Tecnologías: contiene los atributos comunes de todas las tecnologías

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

aplicación, y están registrados en el sistema

Licencia: en esta clase, se almacena la información referente a las licencias

de uso del software.

Comentario: este concepto, maneja la información referente a los

comentarios que los usuarios realizan de cada tecnología

Lenguaje, Herramienta y Base de datos: son las clases que heredan de la

clase tecnología, aportando los atributos específicos de cada tipo de

tecnología.

En el diagrama se pueden apreciar las relaciones entre las diferentes clases:

Usuario-Tecnología: esta relación muestra, la posibilidad de que un usuario

puede puntuar a cada una de las tecnologías

Usuario-Comentario-Tecnología: la clase tecnologías, puede tener

relacionados distintos comentarios, los cuales son realizados por distintos

usuarios.

Tecnología-Licencia: toda tecnología, 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, están

desarrolladas para ser usadas específicamente con algún lenguaje de

programación, esta relación representa esa característica.

79

CAPITULO 3.

class Diagrama de clases

Usuario

- admin: boolean- clave: char- email: char- id: int- nombre: char

Tecnologia

- descripcion: char- id: int- nombre: char- pagina oficial: char- puntuacion: int- version: int

Lenguaje

- EntornoProgrmacion: char- EstiloProgramacion: char- ModoEjecutarse: char- SistemasDistribuidos: char

Herramienta

- Estado: char- FaseDesarrollo: char- SistemaOperativo: char- Tipo: char- TipoDispositivo: char

BaseDatos

- Modelo: int- Variabil idad: char

Licencia

- id: int- nombre: char- tipo: char

Comentario

- comentario: char- fecha: char- id: int

0..*

puntua

0..*

0..*

pertenece 1

0..*

realiza1

1..*

tiene

0..*

0..*

pertenece

1..*

Figura 3.23 Diagrama de clases

En la Figura 3.24, podemos ver al diagrama de actividad con las acciones que usuario y sistema deben realizar para poder llevar a cabo la interacción con las pelotas generadas en la aplicación.

Se puede ver, que cuando el usuario entra a la aplicación, es el sistema el que se encarga de cargar todas las tecnologías dentro de las pelotas. Después el usuario es el que decide si interactuar con las pelotas existentes o filtrar, para que solo parezcan tecnologías más 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

CAPITULO 3.

act Diagrama de activ idad

Usua

rioSi

stem

a

Entra a la aplicacion

Agarrar Pelota

Cargar pelotas

Consultar bbdd

Mov er pelota

Mov er el resto de pelotas

Filtrar pelotas

pelota soltada

recolocar pelotas

Desplegar fi ltro

seleccionar caracteristicas

Pulsar fi ltrar

Salir

[no]

[si]

Figura 3.24 Diagramas de actividad- Interactuar con las burbujas

El siguiente diagrama, Figura 3.25, es un diagrama de secuencia que representa las llamadas que se deben seguir para cargar las pelotas en la aplicación. Este diagrama está dividido en actores, en este caso solo participan las roles de administrador, y las capas de la aplicación la cual se compone de elementos de vista, control y persistencia.

La vista, es la interfaz de la aplicación, en la que el usuario interactúa con las pelotas que el sistema devuelve. Las clases de control, son Conectar.php, que se encarga de pasar los atributos de conexión a la base de datos y abrir la conexión al resto de la aplicación, 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

CAPITULO 3.

sd Diagrama secuencia

Interfaz conectar.php Base de datosMain.jsUsuario

(from Casos de Uso)

Iniciar()

conectar()

conectar()

«conexion»

«conexion»

consulta tecnolgias()

«tecnologias»

init()

crear pelotas()

consultar tecnologias()

«tecnologias»

«pelotas»

«pelotas»

Figura 3.25 Diagrama de secuencia - Cargar pelotas

1.9.3 Diseño

Una vez definidas las fases de requisitos y de análisis, se pueden realizar los prototipos de fases tempranas para tener un modelo mental de lo que se pretende hacer. En esta fase, en función de las necesidades de la aplicación se realizó un prototipo (Figura 3.26, Figura 3.27 y Figura 3.28) de una posible interfaz de usuario, usando para ello el software Evolus Pencil.

82

CAPITULO 3.

Figura 3.26 Prototipo Interfaz principal

En la Figura 3.26, podemos ver el prototipo de la pantalla principal de la aplicación que hemos desarrollado. Esta pantalla permitirá al usuario poder visualizar todas las tecnologías disponibles para el desarrollo de aplicaciones Web. Sus elementos principales están numerados con círculos rojos y son:

1. Elementos de navegación entre las paginas

2. Filtro: recoge las características de las tecnologías que el usuario quiere

visualizar

3. Pelotas/Burbujas: la aplicación contara con unas burbujas que de forma

animada, nos mostraran las tecnologías consultadas

4. Pie de página: ente elemento contendrá la información o enlaces,

relacionados con el proyecto, pero no con la aplicación.

83

CAPITULO 3.

Figura 3.27 Prototipo interfaz tecnologías

Esta pantalla, Figura 3.27, nos permite hacernos una idea de los elementos básicos que debe tener la interfaz que muestra los detalles de cada una de las tecnologías. A esta pantalla se accede pinchando en cada una de las pelotas, las cuales representa cada tecnología. Los elementos a destacar son:

5. Descripción, título y características de la tecnología especifica.

6. Sistema donde el usuario puede puntuar cada una de las tecnologías.

7. Comentarios: esta sección, recogerá cada uno de los comentarios que los

usuarios hagan sobre la tecnología.

84

CAPITULO 3.

Figura 3.28 Prototipo interfaz del backend

La Figura 3.28, muestra que elementos contendrá esta pantalla y como estarán distribuidos. Desde aquí, el administrador del sistema, podrá gestionar y actualizar todos los contenidos del sistema.

8. Barra de navegación del backend, mediante la cual el usuario se moverá por

las distintas páginas de administración.

9. En este elemento, aparecen los distintos atributos que tendrá cada uno de los

tipos de tecnología, así como los posibles valores que puede tomar. Este

elemento, también ofrecerá la posibilidad de que el administrador añada

nuevos atributos con sus valores correspondientes

10. En modo de tabla, se mostrara cada una de las tecnologías recogidas en el

sistema, con todos sus atributos.

Además, de estas pantallas, la aplicación contara con otras, como por ejemplo añadir nueva tecnología, las cuales son muy parecidas en formato y características a las que acabamos de ver.

85

CAPITULO 3.

Figura 3.29 Diagrama de navegación

La Figura 3.29 representa el diagrama de navegación, 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 aplicación Web, se puede salir de la aplicación desde cualquiera de las páginas, simplemente cerrando el navegador.

En el diagrama podemos distinguir dos tipos de flechas, direccionales y bidireccionales. Las flechas direccionales, señalan el camino natural para llegar a una página, permitiendo estas recorrerlas en sentido inverso, dando al usuario libertad de navegación. La flechas bidireccionales, indican que al acceder a una pantalla y realizar su función (por ejemplo, dar de alta un usuario), el sistema redirigirá al usuario a la pantalla anterior.

1.9.4 Implementación

En este capítulo, se describen los detalles de la implementación realizada tras la fase de análisis y diseño, en el que podremos ver los avances del proyecto, así como los

86

CAPITULO 3.

distintos componentes utilizados, desde el comienzo del desarrollo hasta llegar a la aplicación final.

Para poder comenzar esta aplicación, lo primero fue crear una estructura inicial mediante código HTML, en la que el elemento que soportaría la visualización de las diferentes tecnologías, sería el elemento <Canvas > (ver subcapítulo HTML). Dentro de este elemento, se cargan mediante consultas PHP a la base de datos MySQL, todas las tecnologías almacenadas con los atributos necesarios para la visualización de las tecnologías. En la siguiente imagen (Figura 3.30) podemos ver la página 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.30 Estructura HTML

El siguiente paso fue crear una clase en JavaScript, la cual recogiera la información 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 código HTML, para luego ser dibujada, como son tamaño, texto interior, posición inicial y

87

CAPITULO 3.

dirección. La otra función destacable, era la encargada de dibujar las burbujas, la cual mediante el borrado y la construcción de las burbujas en una posición adyacente, simulaba el movimiento de las burbujas, esta última función se apoyaba otra, la cual generaba las nuevas direcciones que debían tomar las burbujas cuando chocasen.

Figura 3.31 Aplicación burbujas

En la Figura 3.31, podemos ver la primera aplicación, en la que las diferentes tecnologías, flotaban por la pantalla en burbujas de diferentes tamaños y colores, según su importancia y el tipo de tecnología. Este diseño, fue desechado debido a que la forma de mostrar las tecnologías, no resultaba muy atractiva, dando sensación de aplicación “obsoleta”. Además del motivo de la visualización, también influyo la cantidad de recursos que esta consumía, ya que redibuja constantemente un gran número de tecnologías y a la nula interacción que el usuario podía realizar con las burbujas.

El siguiente objetivo, era conseguir una aplicación que cumpliera los requisitos que la anterior no cubría, por lo que se desarrolló una aplicación en la que las burbujas, se cambiaron por pelotas, las cuales permitían interactuar con ellas. Para ello se modificó la clase que ya teníamos para crear las burbujas. Dentro de cada nueva burbuja se integró un <div> de HTML, lo que nos permitía insertar dentro cualquier trozo de código que necesitásemos. Esta clase JavaScript, además de crear cada una de las pelotas y situarlas en la pantalla, registraba las diferentes acciones del usuario con el ratón, el tamaño de la pantalla y las diferentes pelotas creadas, lo que permitía mover las pelotas por toda la pantalla e que interactuasen unas con otras.

Para otorgar de “física” a las bolas, es decir, que se comportasen como pelotas reales, se utilizaron 2 librerías externas; protoclass.js y box2d.js, las cuales eran llamadas

88

CAPITULO 3.

desde la clase principal, para luego reflejar el movimiento en el panel canvas (Figura3.33).

Una vez creada la forma en la que mostrar las tecnologías, era necesario desarrollar un sistema para poder buscar tecnologías que se adecuen a las características que usuario necesita. Para ello, si creo un sistema de filtrado (ver Figura 3.10) mediante formularios HTML, el cual se complementó con unas librerías de diseño, para poder ocultarlo y dejar el máximo de pantalla libre posible.

SpryCollapsiblePanel.js: mediante la cual se pueden crear paneles que se

pueden contraer y expandir.

SpryMenuBar.js: librería para generar automáticamente menús

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 aplicación 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 ofrecía la última versión (CSS3) y utilizando imágenes vectorizadas, diseñadas exclusivamente para la aplicación, como logos , iconos y títulos.

Para visualizar cada una de las tecnologías, se creó una página dinámica la cual mostraba los datos dependiendo de la tecnología, incluyendo un sistema para valorar cada una de las tecnologías mediante estrellas (Figura 3.32) 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 tecnologías.

Figura 3.32 Detalle sistema de puntuación

Como una de las últimas mejoras, esta página en la que se muestran los detalles de las tecnologías, se incluyó unas librerías que permitían que esta página se abriera sobre la página de la aplicación principal, apareciendo de forma animada ocupando parte de la pantalla y ensombreciendo la restante. Lo que otorga al usuario la sensación de una completa integración y permitiendo cerrar esta información, para volver a la búsqueda anteriormente realizada.

89

CAPITULO 3.

Además de todas estas “ventanas” las cuales componen gran parte del frontend de la aplicación, también existen varias ventanas que conforman la zona de administración. Este apartado, no tiene nada en especial de implementación que destacar, ya que la mayoría esta creado mediante formularios HTML, accesos a la base de datos mediante PHP y un pequeño sistema de paginación de resultados realizado mediante JavaScript.

1.10 Funcionalidad Principal

La aplicación creada, tiene como objetivo principal ayudar y asistir a los desarrolladores en la elección de las tecnologías existentes, para la creación de aplicaciones Web.

Esta aplicación consta de una ventana principal, Figura 3.33, la cual muestra todas las tecnologías existentes recogidas en la base de datos. Con la intención de que no fuera un simple listado y usando nuevas tecnologías para mostrar la potencia de las mismas, las tecnologías se muestran dentro de pelotas, que rebotan entre ellas y con los bordes de la pantalla, simulando el comportamiento que tendrían 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 ratón y desplazarla por dentro de la pantalla, con lo que el resto de pelotas se moverán en función del movimiento de la pelota elegida, rebotando al chocar con ella y ocupando los espacios vacíos, atraídas al fondo de la pantalla por una ficticia gravedad. El usuario también podrá agarra la pantalla del explorador, para moverla o agitarla, con lo que las pelotas se moverán por la acción de esta, como si de un recipiente real se tratase.

90

CAPITULO 3.

Figura 3.33 Inicio de la Aplicación

Cuando se inicia la aplicación, las pelotas llenaran la pantalla con todas las tecnologías cargadas en la base de datos del sistema, Figura 3.33 , cayendo desde la parte de arriba, para precipitarse contra la parte inferior. En este momento, la información que muestra la aplicación es muy extensa y poco personalizada, pero si nos permitirá hacernos una idea de las tecnologías más populares a la hora de realizar aplicaciones Web y de la cantidad de posibilidades que tenemos para cumplir nuestros objetivos de desarrollo software. Estas tecnologías, estarán divididas por colores, según a la categoría a la que pertenezcan, para hacer más sencilla la identificación de cada una.

Cuando la aplicación se inicia, conecta con la base de datos para consultar todas las tecnologías contenidas en ella y las carga en tablas dentro del HTML de la página Web. Estas tablas son consultadas por la clase encargada de generar las pelotas, la cual crea una circunferencia por cada una de las tecnologías e introduciendo dentro de ella un objeto “<div>”, lo que permite introducir código HTML que se comportara como la pelota, (Figura 3.34). Estas pelotas, heredan su comportamiento “físico” de dos clases JavaScript, que le otorgan el comportamiento animado de una pelota.

Figura 3.34 Detalle código creación de burbujas

Cada pelota, permite el acceso mediante un enlace, a las cualidades y características propias de cada tecnología, informando al usuario de todos los datos útiles para el uso de esta. En esta sección, la cual se despliega sobre la pantalla principal permitiendo cerrarla en cualquier momento y volver a las pelotas cargadas anteriormente, además de poder

91

CAPITULO 3.

visualizar la información relativa a la tecnología seleccionada, el usuario registrado también podrá puntuarla mediante un sistema de estrellas (Figura 3.32) y realizar comentarios y aportaciones que enriquecerán las características de la tecnología dentro de la aplicación.

Para poder obtener información personalizada al tipo de necesidad que tenemos que cubrir, la aplicación 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 tecnología Ajax que permite realizar consultas a los datos almacenados sin necesidad de refrescar la página. Esta consulta, devuelve las tecnologías que cumplen esos requisitos, modificando la tabla inicial creada por el sistema, y recargando las pelotas con la información personalizada. Este filtro, esta creado permitiendo la flexibilidad del sistema, por lo que se crea en función de los atributos contenidos en la base de datos, permitiendo añadir nuevos atributos, o borrar y modificar los existentes, sin que la aplicación pierda funcionalidad. Esta característica, abarca la posibilidad de que la aplicación crezca según las tecnologías cambian y evolucionan. El filtro, está clasificado según el tipo de tecnología y cada uno de estos contiene los atributos propios, la relación entro los tipos de tecnologías 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 visualización de la información. Dentro de cada pestaña desplegable, están organizados, dentro de menús, los atributos según al grupo al que pertenezcan, los cuales aparecen al situar el cursor del ratón encima de cada grupo, permiten al usuario elegir las características 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 características, el usuario pulsara el botón “filtrar” con lo que las nuevas tecnologías aparecerán en la pantalla. Además de ese botón, la aplicación cuenta con un botón “reset”, con el que volver el filtro al estado inicial (mostrara todas las tecnologías) y un botón “ayuda”, en el que el usuario podrá consultar las diferentes opciones de la aplicación.

La aplicación distinguirá varios tipos de usuarios, lo que permitirá que accedan a distintas funcionalidades del sistema. Los visitantes, podrán acceder a la pantalla principal, y hacer uso del filtro para realizar sus consultas, pero si desea acceder a la información complementaria, así como contribuir con la aplicación, 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 aplicación, lo que permitirá que el mismo acceda a toda la funcionalidad del sistema (Figura 3.35).

92

CAPITULO 3.

Figura 3.35 Panel de Identificación

Otra parte importante de la aplicación, es el backend o zona de administración (Figura 3.12), lo que permite a usuarios con derechos de administración acceder a esta sección y actualizar los contenidos del sistema. En esta zona, el administrador, mediante sencillos pasos e introduciendo la nueva información mediante formularios, mantendrá al día la aplicación evitando que esta sé que obsoleta según evolucionan las tecnologías y cambian los “gustos” de los usuarios. Cada una de las páginas de administración, 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 botón enviar, los datos son almacenados en la base de datos.

1.11 Marco Aplicación

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 información que debía manejar y consultar, necesite de herramientas que me ayudaran a gestionarla. La primera necesidad que tuve, fue la creación de un diagrama conceptual, con el que separar los diferentes conceptos y ver la envergadura del sistema, así como realizar una buena clasificación y división del problema a tratar. La herramienta usada para ello, es Bubbl.us (Caballero, 2010), una aplicación Web gratuita, que permite la creación de diagramas conceptuales, con los visualizar los diferentes conceptos de forma rápida e intuitiva.

93

CAPITULO 3.

Figura 3.36 Bubbl.us - Diagrama Conceptual

94

CAPITULO 3.

En esta versión del diagrama, Figura 3.36 , podemos ver una de las primeras clasificaciones con algunas de las tecnologías encontradas para el desarrollo de aplicaciones Web. A partir de este primer diseño, empezó la búsqueda y documentación de las distintas tecnologías, con la que poder construir la aplicación 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 vínculos comunes entre ellos eran pocos o ninguno. Esto complicaba considerablemente, realizar una narración sobre la historia de Internet. Otro problema, era la aparición de hechos relevantes independientemente de la fecha en la que ocurrieron, por lo que tener una buena clasificación era complicado. Para solventar estos problemas, lo más adecuado era la utilización de una línea temporal, en la que ir marcando los diferentes hechos, ordenados de manera cronológica. Para ello, la herramienta Dipity (Figura 3.37), permitió realizar una línea de tiempo, en la que de forma visual y atractiva, podemos acceder a los hechos más relevantes de la historia de Internet.

Figura 3.37 Línea 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 recopilación de la información, se hizo evidente la necesidad de alguna herramienta que ayudase a su clasificación y visualización. Para ello, se creó una wiki que contendría toda la información referente a cada una de las tecnologías y

95

CAPITULO 3.

otros datos importantes del proyecto, como son los anteriores gráficos. Esta wiki, se creó haciendo uso de la aplicación Wikispace.com (Caballero, 2010), en el que se fue recopilando toda la información referente a las tecnologías investigadas. Podemos ver una captura de la wiki en la Figura 3.38.

Figura 3.38 Wiki - Herramientas-Web

1.12 Tecnologías Empleadas

Para llevar a cabo este proyecto, ha sido necesaria la utilización de numerosas tecnologías, tanto para cubrir carencias que las primeras tecnologías utilizadas no proporcionaban, como para tener un mayor conocimiento de algunas de las tecnologías de desarrollo Web, las cuales luego estarían incluidas dentro de la aplicación.

Tecnologías utilizadas:

HTML 5

Css 3

Php 5.3.5

Ajax

JavaScript96

CAPITULO 3.

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 tecnología seleccionada previamente al comenzar el proyecto, fue HTLM 5,

debido a su reciente aparición y al potencial que tenía. Para poder utilizar toda la funcionalidad de este nuevo estándar, es necesario acompañarlo de la nueva versión especificaciones de Hojas de Estilo en Cascada, CSS3, lo que aportaría nuevos y modernos estilos a nuestra aplicación, y JavaScript, lenguaje que utilizaríamos para otorgar funcionalidad a nuestra aplicación.

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 “relación” 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 aplicación. Herramientas usadas por WAMP:

Windows

Apache

MySQL

PHP

El IDE elegido para el desarrollo de la aplicación fue Adobe Dreamweaver CS5, aplicación está destinada a la construcción y edición de sitios y aplicaciones Web basados en estándares.

Para crear las imágenes e iconos vectorizados, se ha utilizado la herramienta AAA Logo, especialmente diseñada para la realización de logos.

Otros programas utilizados para dar soporte al desarrollo son, TortoiseSVN 1.6.15, cliente para Subversión, sistema de gestión de versiones que automatiza las tareas de guardar, recuperar, registrar, identificar y mezclar versiones de archivos, y SQL-Front, administrador de bases de datos MySQL

97

CAPITULO 3.

Para visualizar los avances realizados, es necesario utilizar un explorador de Internet. En este caso he utilizado los más populares, para comprobar las compatibilidades y formas de visualización.

1.13 Conclusiones

Este capítulo, otorga al lector una idea clara de cómo se ha desarrollado la herramienta. Dándole los conocimientos necesarios para poder desarrollar y comprender el funcionamiento interno de la misma. Empezando desde un nivel muy alto, lo que permitiría entender el funcionamiento de la herramienta, a cualquier persona sin conocimientos de desarrollo software, pasando un nivel más bajo de detalle, con lo que cualquier desarrollador podría trabajar sobre la misma herramienta, actualizándola y proporcionado mantenimiento.

Para describir esta herramienta, hemos seguido los pasos clásicos dentro de la ingeniería del software, que son:

Requisitos

Análisis

Diseño

Implementación

Utilizando para documentarlos los diagramas de UML, realizados mediante el programa Enterprise Architect.

Como podemos observar, después de leer este capítulo, es la gran variedad de lenguajes y herramientas utilizadas para llevar a cabo esto proyecto, lo que me ha proporcionado una amplia visión de las tecnologías de desarrollo web.

98

CAPITULO 4.

CAPITULO 4.

CONCLUSIONES Y TRABAJO

FUTURO

Una vez descrito todo el proceso de análisis, diseño e implementación de la aplicación de apoyo al desarrollador web, en este capítulo se resumen las conclusiones obtenidas tras el diseño, implementación y casos de estudio realizados, indicando las características recoge este proyecto y las posibles líneas futuras.

99

CAPITULO 4.

1.14 Conclusiones

El objetivo principal de este proyecto consistía en diseñar e implementar una aplicación Web que guíe al desarrollador, tanto profesional como recién iniciado, en la elección de las distintas tecnologías para sus propias aplicaciones.

Este objetivo ha sido superado, dando lugar a una aplicación Web intuitiva, usable y de atractivo diseño, la cual ayudará los desarrolladores a la hora de elegir tecnologías para sus proyectos. Para poder llegar a este resultado final, ha sido necesario ir superando cada uno de los objetivos descritos en el Capítulo 1.

Se comenzó realizando un estudio sobre todas las tecnologías destinadas al desarrollo web de última generación, con la intención de conocer cuál era las últimas tendencias en diseño y elegir las herramientas más acordes para diseñar esta aplicación. Una vez realizado el estudio y decidir que era esencial utilizar la última versión de HTML, para obtener una aplicación moderna y potente, además de una bases de datos y algún lenguaje que otorgara dinamismo a la página, se pasó a estudiar el resto de tecnologías así como sus similitudes y diferencias, lo que nos permitió desarrollar posible clasificación, flexible, de tecnologías que sirvió como punto de partida de la herramienta.

Una vez creada la base teórica, se pasó al diseño e implementación de la aplicación, la cual supuso todo un reto debido a los escasos conocimientos que tenía respecto al desarrollo de herramientas web. Los comienzos fueron difíciles, y varias veces se tomaron decisiones que más tarde fueron descartadas, ya que llevaban a “caminos sin salida” o que no ofrecían los resultados esperados.

Cuando el “motor” de la aplicación fue acabado, es decir, la herramienta era funcional, se pasó al diseño de la interfaz de usuario, así como del resto de complementos que conseguían que la aplicación fuera completa y atractiva.

Después de la construcción del sistema se realiza una evaluación de la usabilidad, cuyo objetivo principal es garantizar la calidad en uso del sistema. Tras realizar un análisis de todos los datos obtenidos, se corrigieron los errores encontrados, y se puede asegurar que el sistema es intuitivo y fácil de utilizar.

101

CAPITULO 4.

1.15 Trabajo Futuro y Posibles Ampliaciones

Para finalizar con este último capítulo, comentaremos algunas de las propuestas que se podrían añadir, al trabajo actual, en trabajos futuros:

Ampliar las posibilidades de flexibilidad de la herramienta, de cara a que

aparezcan nuevas tecnologías, que obliguen a crear una nueva división del

filtro.

Reconstruir la aplicación para que puede ser usada en dispositivos móviles.

Debido al gran aumento de usuarios de tecnologías móviles, es muy

recomendable que esta herramienta pueda ser consultada desde estos

dispositivos, lo que nos llevaría a un nuevo diseño de la aplicación ya que la

información mostrada dentro de burbujas, no es factible debido al reducido

tamaño de las pantallas de estos.

Preparar la aplicación para su despliegue en Internet. Para que todos los

usuarios puedan beneficiarse de esta aplicación, 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.

Creación de un asistente “Paso a Paso”. Una posible propuesta para el futuro,

es la creación de un asistente que guie al usuario mediante breves y sencillos

cuestionarios, basados en la funcionalidad actual, variando según la

respuesta anterior, los cuales obtendrán toda la información referente a las

necesidades del desarrollador y generen la recomendación más idónea a sus

necesidades

102

GLOSARIO DE TÉRMINOS

BIBLIOGRAFÍA

Adobe Flash Adobe Flash Professional [Online] // Wikipedia. - Junio 09, 2011. -

Junio 16, 2011. - http://es.wikipedia.org/wiki/Adobe_Flash.

Alvarez Miguel Angel Introducción al taller de ASP.NET [Online] //

Desarolloweb. - noviembre 09, 2006. - Mayo 11, 2011. -

http://www.desarrolloweb.com/articulos/introduccion-taller-asp-net.html.

Alvarez Miguel Angel Manual de jQuery [Online]. - Marzo 25, 2009. - Mayo 11,

2011. - http://www.desarrolloweb.com/manuales/manual-jquery.html.

Alvarez Miguel Angel Programación 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-script-

manual.html.

Alvarez Rubén Manual de Flash [Online] // Desarrolloweb. - septiembre 19, 2003. -

Junio 16, 2011. - http://www.desarrolloweb.com/manuales/39/.

103


Alvarez Rubén Programación en PHP [Online]. - Enero 1, 2001. - Mayo 10, 2011. -

http://www.desarrolloweb.com/manuales/12/.

Arcos Eduardo Historia del internet: 40 años del primer enlace entre dos nodos de

ARPANET [En línea]. - 29 de Octubre de 2009. - 9 de Diciembre de 2010. -

http://alt1040.com/2009/10/historia-del-internet-40-anos-del-primer-enlace-entre-dos-

nodos-de-arpanet.

Aroche Stephanie Falla La historia de Internet [En línea]. - 14 de Febrero de 2006. -

9 de Diciembre de 2010. - http://www.maestrosdelweb.com/editorial/internethis/.

Arroyo Rosalía 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-en-

web-47369.html.

Bailón Alejandro Martín 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 [Online]. - 2011. -

http://www.bestwebframeworks.com/.

BlackBerry BlackBerry WebWorls SDK [Online]. - 2011. - Mayo 11, 2011. -

http://docs.blackberry.com/es-es/developers/categories/?

userType=21&category=BlackBerry+WebWorks+SDK.

Caballero César Sánchez-Mata Diagrama Conceptual [Online] // Bubbl.us. -

2010. - https://bubbl.us/?h=626c8/bb62a/40CrTsNUk77Dw.

Caballero César Sánchez-Mata Historia de Internet [Online] // Dipity. - 2011. -

http://www.dipity.com/raxec/History-of-the-Internet-Copy/.

104


Caballero César Sánchez-Mata WikiSpace [Online] // Herramientas-Web. - 2010. -

http://herramientas-web.wikispaces.com/.

Camy Lázaro Issi JavaScript [Book]. - [s.l.] : Anaya Multimedia-Anaya Interactiva,

2002.

Carlson David Modeling XML Application with UML [Book]. - [s.l.] : Addison-

Wesley, 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]. - 2008. - Junio 16, 2011. -

http://www.cursosdrupal.com/content/indice.

Cortés Alejandro Floría 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/.

105


Enríquez Toledo Alma Maldonado Ayala Jesús, 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 evolución. -

2009. - http://www.estudiosimbiosis.com.ar/internet.

eXe-Spain eXeLearning en Español [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]. - 2009. - Mayo 05, 2011. -

http://es.calameo.com/read/000053297d9977b4b1d5a.

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 diseño 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 Introducción 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 Clasificación de los lenguajes de programación [Online] // Clasificados según el

estilo de programación y el modo de traducción. - 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.

106


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/microsoft-

webmatrix-a-detalle.aspx.

Khronos Clasificación de lenguajes de programación [Online]. - abril 1, 2010. -

Mayo 16, 2011. - http://daw-labs.com/clasificacion-de-lenguajes-de-programacion/.

Layers Layers [Online]. - 2010. - Diciembre 20, 2010. - http://layers.com/about_us?

lang=es_ES.

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/es-es/silverlight/default.asp.

Microsoft Corporation WebMatrix [Online] // Microsoft/Web. - 2010. - Diciembre

19, 2010. - http://www.microsoft.com/web/webmatrix/.

Microsoft WebMatrix [Online] // Microsoft. - 2011. - Mayo 11, 2011. -

http://www.microsoft.com/web/webmatrix/.

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. Guillén Ruby Fácil [Book]. - 2006.

107


Net Applications [Online]. - Febrero 10, 2011. - Mayo 17, 2011. -

http://marketshare.hitslink.com/Default.aspx.

Obcena Mark Pro JavaScript with MooTools [Book]. - [s.l.] : Apress, 2010.

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/sistemas-

distribuidos.shtml#CLIENTE.

Oracle Oracle Database [Online]. - 2011. - Mayo 11, 2011. -

http://www.oracle.com/es/products/database/index.html.

O'Reilly Tim O'Reilly [Online]. - Octubre 30, 2005. - Junio 7, 2011. -

http://oreilly.com/web2/archive/what-is-web-20.html.

Orós Jose Luis Adobe Flash CS3 [Book]. - Madrid : Ra-Ma, 2008.

Orós Jose Luis Flash Professional CS4 [Book]. - Madrid : Ra-Ma, 2009.

Patel Sonal Web Developer's Bookmarks [Online]. - 2011. -

http://antriksh.com/resources/.

Pecos Daniel MySQL [Online] // PostGreSQL vs. MySQL. - 2009. - mayo 11,

2011. - http://danielpecos.com/docs/mysql_postgres/x57.html.

Pérez Javier Eguíluz Introducción a AJAX [Book]. - [s.l.] : librosweb.com, 2008.

Pérez Javier Eguíluz Introducción a CSS [Book]. - [s.l.] : librosweb, 2009.

Pérez Javier Eguíluz Introducción a JavaScript [Book]. - [s.l.] : librosweb, 2009.

Pérez Javier Eguíluz Introducción 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.

108


php.net PHP [Online]. - 2010. - Mayo 10, 2011. - http://www.php.net/.

PIMENTEL VÍCTOR Las novedades de HTML5 [Online]. - Junio 13, 2009. -

Mayo 10, 2011. - http://www.anexom.es/tag/html5/.

Pohl K. y Rupp, C. Basiswissen Requirements Engineering [Book]. - Heidelberg :

Dpunkt, 2009.

Potencier François Zaninotto y Fabien Symfony 1.2, la guía definitiva [Book]. -

[s.l.] : Apress, 2008.

Prescod Charles F. Goldfarb y Paul Manual de XML [Book]. - Madrid : Prentice

hall, 1999.

Presuman Roger S. Ingeniería de Software [Book]. - Madrid : McGraw-Hill, 2002.

RAE Real Academia Española [Online] // Diccionario de la lengua española. -

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/.

Sánchez-Mata César 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 Hernández CREACIÓN DE UN SERVIDOR WEB CON

SVN.pdf. - 2007.

SpringSource Springsource [Online] // Spring Framework. - 2010. - Diciembre 19,

2010. - http://www.springsource.org/.

109


superburo.com Featured Drupal Sites [Online]. - 2005. - Junio 16, 2011. -

http://www.drupalsites.net/.

symfony.es Symfony [Online]. - 2010. - Dieciembre 19, 2010. -

http://www.symfony.es/.

The Eclipse Foundation PHP Development Tools Project [Online] // Eclipse. -

2010. - Diciemebre 19, 2010. - http://www.eclipse.org/pdt/.

The jQuery Project jQuery [Online]. - 2010. - Diciembre 19, 2010. -

http://jquery.com/.

TIOBE Software TIOBE Programming Community [Online]. - 2011. -

http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html.

tufuncion.com 8 lenguajes de programación que deberías aprender [Online]. -

Septiembre 17, 2007. - Octubre 6, 2010. - http://www.tufuncion.com/diferentes-lenguajes-

programacion.

tufuncion.com La primera página, el primer banner, la primera imagen… de Internet

[Online]. - Julio 07, 2007. - Mayo 03, 2011. - http://www.tufuncion.com/historia-pagina-

internet.

Valerio Proietti mootols.net [Online] // A compact, modular, Object-Oriented

JavaScript framework. - 2009. - Mayo 11, 2011. - http://mootools.net/.

W3C Guía Breve de Tecnologías 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.

110


Wikimedia Hojas de estilo en cascada [Online] // Wikipedia. - Mayo 7, 2011. -

Mayo 11, 2011. - http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada.

Wikimedia JavaServer Pages [Online] // Wikipedia. - Marzo 27, 2011. - Mayo 10,

2011. - http://es.wikipedia.org/wiki/JavaServer_Pages.

Wikimedia Lenguaje de programación [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]. - Mayo 05, 2011. - Mayo 10, 2011. -

http://es.wikipedia.org/wiki/HTML.

Wilimedia Mootools [Online] // Wikipedia. - Octubre 19, 2010. - Diciembre 19,

2010. - http://es.wikipedia.org/wiki/Mootools.

wordpress.org About WordPress [Online]. - 2010. - Mayo 17, 2011. -

http://wordpress.org/about/.

Zakas McPeak y Fawcett Profesional Ajax [Book]. - Madrid : Anaya, 2007.

111



CDONTS

Se trata de un componente incluido en Windows NT server y Windows 2000 server. Este complemento facilita la creación y envío de mensajes de correo desde los scripts de aplicaciones Web, principalmente desde páginas ASP.

CGI

Interfaz de entrada común (en inglés Common Gateway Interface, abreviado CGI) es una importante tecnología 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 estándar para transferir datos entre el cliente y el programa.

CLR

Common Language Runtime. Es el componente de máquina virtual del .Net Framework de Microsoft. Los lenguajes de .Net como C#, VisualBasic, etc., tras la

113


compilación se pasan a un código intermedio llamado MSIL. En tiempo de ejecución el CLR transforma el MSIL en código nativo de la máquina donde se ejecuta.

CLR

El Common Language Runtime o CLR ("entorno en tiempo de ejecución de lenguaje común") es un entorno de ejecución para los códigos de los programas que corren sobre la plataforma Microsoft .NET.

CMS

El gestor de contenidos es una aplicación informática usada para crear, editar, gestionar y publicar contenido digital en diversos formatos. El gestor de contenidos genera páginas dinámicas interactuando con el servidor para generar la página Web bajo petición del usuario, con el formato predefinido y el contenido extraído de la base de datos del servidor.

DOM

Document Object Model o DOM ('Modelo de Objetos del Documento' o 'Modelo en Objetos para la representación de Documentos') es esencialmente una interfaz de programación de aplicaciones (API) que proporciona un conjunto estándar de objetos para representar documentos HTML y XML, un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos. A través 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 inglés Don't Repeat Yourself o DRY, también conocido como Una vez y sólo una) es una filosofía de definición de procesos que promueve la reducción de la duplicación especialmente en computación. Según este principio toda pieza de información nunca debería ser duplicada debido a que la duplicación incrementa la dificultad en los cambios y evolución posterior, puede perjudicar la claridad y crear un espacio para posibles inconsistencias

DTD

Definición de Tipo de Documento o DTD (siglas en inglés de document type definition) es una descripción de estructura y sintaxis de un documento XML o SGML. Su función básica es la descripción del formato de datos, para usar un formato común y mantener la consistencia entre todos los documentos que utilicen la misma DTD.

114


Framework

En el desarrollo de software, un framework es una estructura conceptual y tecnológica de soporte definida, normalmente con artefactos o módulos de software concretos, con base en la cual otro proyecto de software puede ser organizado y desarrollado. Típicamente, 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, más conocida por sus siglas JDBC, es una API que permite la ejecución de operaciones sobre bases de datos desde el lenguaje de programación 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

Acrónimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.

JSRS

El Scripting remoto en JavaScript o (JSRS) es una técnica de desarrollo Web para crear aplicaciones Web interactivas mediante el uso de una combinación de HTML, DOM, Una capa de transporte y un formato de datos (como XML o JSON)

Mixins

En lenguajes de programación orientada a objetos, un mixin es una clase que ofrece cierta funcionalidad para ser heredada por una subclase, pero no está ideada para ser autónoma.

Motor Zend

115


El motor Zend es un motor de procesamiento para la interpretación y cifrado del código php, desde la versión 4. Desarrollado por Zend Tecnologies para brindar un equipo de soporte y acelerar la carga de aplicaciones realizadas con php.

OLAP

OLAP es el acrónimo en inglés de procesamiento analítico en línea (On-Line Analytical Processing). Es una solución 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 inglés) es un término usado en “jerga informática” para referirse al proceso de generar una imagen desde un modelo. Este término técnico es utilizado por los animadores o productores audiovisuales y en programas de diseño en 3D.

RFQ

Solicitud de presupuesto (también conocida como "Request for Quotes" o RFQ en inglés).

Servlets

La palabra servlet deriva de otra anterior, applet, que se refería a pequeños programas que se ejecutan en el contexto de un navegador Web. Por contraposición, un servlet es un programa que se ejecuta en un servidor.

SGML

SGML son las siglas de Standard Generalized Markup Language o "Estándar de Lenguaje de Marcado Generalizado". Consiste en un sistema para la organización y etiquetado de documentos.

Singleton

El patrón de diseño singleton (instancia única) está diseñado para restringir la creación de objetos pertenecientes a una clase o el valor de un tipo a un único objeto.Su intención consiste en garantizar que una clase sólo tenga una instancia y proporcionar un punto de acceso global a ella.

SMTP

116


Simple Mail Transfer Protocol (SMTP) Protocolo Simple de Transferencia de Correo, es un protocolo de la capa de aplicación. Protocolo de red basado en texto utilizado para el intercambio de mensajes de correo electrónico entre computadoras u otros dispositivos (PDA's, teléfonos móviles, etc.).

WDDX

WDDX (Web Distributed Data eXchange) es un estándar XML para el intercambio de información estructurada entre distintos lenguajes de programación.

XHTML

Acrónimo en inglés de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas Web.

XMLHttpRequest

Es una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores Web. Para los datos transferidos se usa cualquier codificación basada en texto, incluyendo: texto plano, XML, JSON, HTML y codificaciones particulares específicas. La interfaz se presenta como una clase de la que una aplicación cliente puede generar tantas instancias como necesite para manejar el diálogo con el servidor.

XML

Siglas en inglés de eXtensible Markup Language ('lenguaje de marcas extensible'), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). Es una simplificación y adaptación del SGML y permite definir la gramática de lenguajes específicos

117

ANEXO A

ANEXO A.Plantilla evaluación de la

herramienta

En este anexo, se incluye la plantilla con el cuestionario de evaluación de la usabilidad de la aplicación. Este cuestionario, lo han realizado diferentes compañeros de la carrera, lo que me ha ayudado a medir la usabilidad de la aplicación, 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 introducción de la ingeniería de usabilidad a los sistemas de oficina de Digital Equipment Co. Ltd. Su propósito era proporcionar un test fácil de completar, fácil de puntuar y que permitiera establecer comparaciones cruzadas entre productos. Ha sido usado ampliamente en evaluaciones de proyectos en Digital, constatándose simple y fiable. La escala SUS se utiliza generalmente después de que un usuario ha tenido la oportunidad de utilizar un sistema, pero antes de que cualquier informe o discusión 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 cuestión en particular, habrá de señalar el valor central de la escala. La escala SUS es una escala de estilo Likert que genera un único número, 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 A

ANEXO B. Contenido del CD

En el contenido del CD que acompaña a la memoria podemos encontrar los siguientes recursos:

Memoria del trabajo en los formatos PDF, DOCX y DOC dentro del directorio

Memoria.

Imágenes incluidas en la memoria Memoria/Imágenes

Código fuente del trabajo dentro del directorio Código fuente.

Imágenes y logos utilizados en dentro de la aplicación dentro del directorio Código

fuente/Imágenes

Archivo para importar las base de datos dentro del directorio Código fuente

Libros y artículos a los que se ha hecho referencia durante la memoria y que se han

utilizado como bibliografía. Los cuales podemos encontrar en el directorio

Bibliografía.

Páginas Web que han servido de bibliografía. Las podemos encontrar dentro del

directorio Bibliografía/Enlaces Web.

Plantilla de Evaluación de la Usabilidad dentro del directorio Memoria/Anexos

Diagramas UML generados durante el proyecto dentro del directorio

Memoria/Diagramas

121

TesinaInformatica-Internet.docx

Documents

Transcript of TesinaInformatica-Internet.docx