Metodologa para evaluar la calidad de aplicaciones web dinmicas mediante templates

Lic. Esteban Calabria Universidad Abierta Interamericana Anlisis y Evaluacin de Aplicaciones Web esteban.calabria (at) gmail.com Abstract
El presente trabajo propone una forma de evaluar aplicaciones web mediante una plantilla que define un conjunto de caractersticas concretas a analizar. Dicha plantilla debe ser adaptada a cada desarrollo en particular. Su objetivo es medir cuantitativamente la calidad para evaluar aplicaciones existents, guiar desarrollos nuevos, ayudar en las estimaciones y medir el impacto de temas de calidad en tiempos y costos . El presente trabajo comienza abordando el tema de calidad de aplicaciones web estableciendo un marco conceptual. Bajo ese entorno se describe la plantilla de calidad como propuesta para cuantificar la calidad de un sitio web. A la explicacin de la planilla se le suma una segunda seccin con una guia de buenas practicas, tcnicas y sugerencias a incluir como parte del template. Para que la plantilla sea de utilidad debe ser adaptada y aplicada y de eso trata la ltima seccin del trabajo. Analiza las distintas formas de adaptar la plantilla a un sitio web y de que forma influye su evaluacion en el sitio. Por ultimo se deja abierta la puerta para trabajos futuros

1. Introduction
El desarrollo de una aplicacin web de contenido dinmico propone sus desafios particulares. Desde el apartado tcnico est el amplio abanico de tecnologas que se deben manejar. Adems del esquema peticion-respuesta del protocolo HTTP[7], .la tecnologa de generacin de contenido dinmico elegida (php, servlets, jsp, asp, asp.net, etc) y el lenguaje html, aparecen las hojas de estilo (Css) y el javascript. Si a este escenario agregamos las RIA (rich internet application) la cosa no termina ahi,. Aparecen tecnicas de programacin como ajax (Asynchronous JavaScript and XML), un uso an mas intensivo de Javascript y tecnologas como flash, flex, silverlight, entre otras. A lo tcnico se le suma el alcance que suele tener este tipo de aplicaciones donde muchas veces el usuario final de la misma no est claramente diferenciado. Es por ello que cada vez se hace mas necesario aplicar tcnicas de ingeniera [6] al desarrollo de este tipo de aplicaciones para poder lidiar con su complejidad. Adems de que el producto cumpla con los requerimientos funcionales y este libre de bugs es necesario aplicar mtodos y herramientas que midan la calidad del producto que se desarrolla [6]. Para ese problema, este trabajo propone una forma de medir la calidad basndose en una plantilla o template adaptable a una aplicacin web en particular.

2. Calidad en aplicaciones web

El tema de la calidad [8] es un tema recurrente en el desarrollo de software. Ya que la misma no es un concepto absoluto debemos encontrar una forma de medirla cuantitativamente y enmarcarla en un marco conceptual. La ISO 9126 propone un modelo para esto ultimo.

Figura 1. Marco conceptual para el modelo de calidad Este trabajo tomar ese modelo como referencia pero dejar de lado la parte functional y se centrar mas en aspectos de mantenibilidad, usabilidad y calidad interna.

1.1. Organizacin del trabajo

3. Plantilla de calidad
Como primera aproximacin, este trabajo propone la generacin de un template. En este trabajo nos referiremos como plantilla, template de plan de calidad o template en forma indistintas. Uno de sus objetivos es hacer tangible el concepto de calidad y cuantificar su evaluacin. Se trata de un documento tcnico que abstrae el conocimiento de un equipo tcnico u organizacin sobre los puntos que influyen en la calidad de una aplicacion web. Para ello define una lista de caractersticas cuantificables que se pueden evaluar en una aplicacin web. Lo ms comn es que evalue la presencia/ausencia de dicha caracterstica, aunque alternativamente a veces se define un valor entre 0 y 100 que dice que porcentaje de ella se cumple. Por ejemplo una caracterstica a evaluar puede ser: todos los links de una pgina X deben funcionar. Para ello la plantilla primero debe decir que pasos hay que seguir para ver que eso ocurrra, por ejemplo, utilizando algn servicio de verificacin de links como link valet[5]. A la hora de evaluar dicha caracterstica, en el caso de que todos los links funciones se le otorgar un valor de 100, mientras que por otro lado se valuar como 0 si algn link falla. La forma de determinar la valoracin es arbitraria y debe formar parte de la definicin de la plantilla. El template es de naturaleza genrica y cubre un universo de caractersticas aplicables a la mayor cantidad posibles de aplicaciones web. Como se ver ms adelante una instancia posterior contemplar adaptarlo a un sitio en particular.

3.1. Actualizacin el template

El template propuesto no es algo fijo sino que es dinamico y se debe ir actualizando con la esperiencia del cada proyecto. A medida que la experiencia del equipo u organizacin crezca dicho aumento debe ser plasmado en el template en forma de caractersticas nuevas.

3.2. Caractersticas a evaluar

Cada caracterstica a evaluar debe estar definida de la forma menos ambigua possible. Con ese fin debe estar acompaada con un instructivo que detalle la forma de evaluarla. Se recomienda que cada caracterstica tenga un nombre corto facil de recordar, una descripcin detallada adems del tutorial de como evaluarla. Un aspecto a incluir es en que momento realizar la evaluacin de cada caracterstica. Lo ms

recommendable es que sea parte del proceso de integracin continua y se haga en forma automtica. Otra alternativa menos segura es hacer reviews periodos de cdigo. Sobre este aspecto Franca Garzotto presenta una clasificacin de las diferentes formas de evaluacin [12]: 1. Automticos: aplicando software que realizan evaluacin. 2. Mtodos empricos: observando usuarios que usan el sistema. En el caso de los mtodos podra ser aplicando los mtodos a casos reales y as verificando las propiedades de los mismos. 3. Mtodos Informales: expertos observan el sistema (o el mtodo). 4. Mtodos formales: tcnicas que formalizan el proceso de evaluacin. A esta altura si es conveniente incluir una nocin de los siguientes puntos Riesgo de no evaluarla : cada caracterstica debe tener una razn de ser y el riesgo de no tenerla en cuenta debe estar claramente identificado. Por ejemplo no evaluar cierta caracterstica puede hacer que el sitio no soporte cierta cantidad de usuarios. Tambin puede hacer que los tiempos de desarrollo se extiendan por no tener este punto en cuenta. Beneficios de Evaluarla : de igual manera debe existir alguna justificacin que abogue por la inclusin de dicha caracterstica. Se sugiere documentarla para poder argumentar sobre su inclusion en un proyecto en particular. Impacto en tiempos y costos de su evaluacin: elegir incluir una caracterstica como parte del plan de calidad no es gratis. El costo se traduce en el tiempo de desarrollo de la aplicacin que se incrementarn por considerar y evaluar dicha caracterstica. A diferencia de los riesgos que pueden hacer que el los tiempos se incrementen de forma impredecible, este punto busca definir un incremento de tiempo del proyecto de modo que justifiquen los beneficios, minimicen los riesgos y aumente la predicibilidad. A continuacin se resumen en un cuadro en un ejemplo de las distinton puntos a tener en cuenta a la hora de definir una caracterstica Caracterstica Codigo Nombre Corto Descripcion Alcance Status Paginas livianas [Completar] Paginas livianas Definir el tamao mximo que debe ocupar cada pgina Cada pagina del sitio Definir si es obligatoria o deseable

Forma de Evaluar Responsible Cumplirla Responsible Evaluarla Cuando Cumplirla Ponderacin Beneficio de Evaluarla

[Completar] [Completar] [Completar] [Competar] Entre 0 y 1 Se aseguran que cada pgina sea liviana y no cargue rpido en el cliente Riesgo de no evaluarla Se pueden generar pginas muy pesadas que afecten la performance de la aplicacin Impacto en tiempos y Estimacion un 5% ms de costos tiempo y un 5% ms de costos en el desarrollo de cada pgina Posible definicin de una caracteristica Para algunos puntos a completar, como por ejemplo la forma de evaluar y cuando cumplirla, si bien su implementacin depender del sitio en particular, resultar til definir distintas alternativas para facilitar la aplicacin del template.

Otra plantilla se completar con las pginas web que contendr el sitio Pgina Campo Template <Pgina 1> <Pgina 2> <Pgina N> Planilla de las pginas de la aplicacin Dicha plantilla se utilizar como herramienta para evaluar ciertas caractersticas. Por ejemplo si una caracterstica a evaluar es que cada pgina de nuestra aplicacin debe pesar menos de 100K, esta plantilla nos servir como herramienta. Esta plantilla tambien nos permite diferenciar caractersticas segn la pgina. Indicar cosas como: la home de nuestro sitio debe pesar menos de 100K, no obstante el resto de las pginas deben pesar menos de 1000K. Cabe aclarar que el template define esta grilla pero no su contenido. Es el momento en el que se adapata a un sitio en particular cuando se deber completar su contenido reemplazando pgina n por el nombre de la pgina real de la aplicacin. Otra plantilla interna sera la de navegacin o contraste entre pginas

3.4. Elementos del template

Basndose en el marco conceptual descripto en la seccin 2, y haciendo una adaptacin del mismo, el template agrupa las distintas caractersticas a evaluar en las siguientes secciones: Estructura Temporal Usabilidad Calidad Interna Para cada seccin se estudiar ms adelante puntos tcnicos concretos que se sugieren incluir en el template.

3.5. Plantillas Internas

El template define las una serie de plantillas internas. La primer plantilla define las caractersticas generales que tendr el sitio. Contiene aquellas que influirn en la evaluacin de la calidad del mismo. Caracterstica Entorno Tipo de Aplicacin Valor Intranet / Internet Webcomerce, Educacion, Portal

<Pgina 1> <Pagina 2> <Pag. N> <Pgina 1> -----------<Pgina 2> ----------- <Pg. n> -----------Plantilla de navegacin o contraste Es una herramienta que se utilizar para evaluar aquellas caractersticas, como la navegabilidad del sitio, que dependen de ms de una pgina. Por ejemplo para evaluar la caracterstica de que el usuario debe tener una forma en cualquier momento de navegar a la home del sitio.

3.6. Variables
En conjunto con las plantillas internas, el template define ciertas variables que deben recibir un valor a la hora de derivar del template un plan de calidad como se ver ms aadelante. Para aquellas variables que se enuncian de la forma para cada pgina debe utilizar la plantilla de las pginas de la

Usuario Final Vel. Prom. Conexin Usuario Final Usuarios Concurrentes a Soportar Tecnologa .NET / Java / Php Planilla de las caractersticas generales del sitio

aplicacion para definir su valor dependiendo de la pgina de nuestro sitio web. Las variables que se definen en el template son <TIEMPO_ACTUALIZACION> : Para cada pgina de nuestro sitio se definen cada cuanto tiempo se espera que su contenido se actualice. <TIEMPO_RESPUESTA> : Para cada pgina se define en cuanto tiempo se espera renderice el contenido al usuario final <PESO DE CADA PAGINA> : Para cada pgina se define el peso mximo que debe tener <CANTIDAD REQUESTS> : Para cada pgina define la cantidad mxima de requests que debe realizar Las variables por si sola no hacen nada sino que sirven como input a aquellas caractersticas que las utilicen.

4. Estructura del template

Basndonos en la estructura del template propuesta se estudiarn a continuacin una guia de buenas prcticas, tcnicas y sugerencias a incluir como parte del template.

4.1. Estructura del sitio : links

Jackob Nielsen [3] define una gua de como mostrar los links en una pgina web. A pesar de algunas excepciones sugiere que los links siempre estn coloreados y subrayados para mejorar la percepcin del usuario de que all es donde se puede hacer click. En la siguietne tabla se resumen aquellos puntos a tener en cuenta de los links de la aplicacin:

estandarizado hoy en da. Los css son una reomendacin de la w3c. El uso de los css viene acompaado de unas recomendaciones bsicas. La primera de todas es que las hojas de estilo sean vlidas, es decir, que respeten el estandar. Una manera de verificar la validez de las hojas de estilo es utilizar el validador online de la W3C [11]. Otra sugerencia es que las hojas de estilo se incluyan al principio de la pgina para evitar problemas de renderizados progresivos. Esto ocurre cuando primero se muestra el contenido y, una vez que el usuario lo pudo visualizar, se le applica el estilo produciendo un efecto poco agradable. Se sugiere tambien que los archivos CSS sean externos para failitar la mantenibilidad y que esten minimificados. Este es un proceso al cual se somete un archivo de texto y mediante el cual se eliminan caracteres redundantes, espacios y comentarios, haciendo que el archivo ocupe mucho menos espacio. Si a esto le sumamos la posibilidad de comprimir el archivo de estilos mediante el algoritmo gzip, se disminuir mucho su tamao y por lo tanto el tiempo que tarde en transmitirse a travs de la red. A continuacin se resumen aquellos elementos de css a evaluar:

Si

No

Si

No

Funcionan los links Se marcan con otro color los links visitados Los links estan subrayados Evita usar imgenes como links Resumen de las caractersticas que tienen que ver con links a evaluar

La major forma de asegurarse que los puntos anteriores se cumplan es utilizando el tag <a> para los links en lugar de botones e imagines: muchos desarrollos los utilizan en forma incorrecta como reemplazo de los links.

Utiliza CSS El CSS es vlido El CSS est al principio de la pgina (YL) Hay elementos en el html que deberan definirse en el css El Css est mimificado El Css est gzipeado Evita expresiones css El Css esta en un archivo esterno Usar una sola hoja de estilo para todos las paginas del sitio Resumen de las caractersticas que tienen que ver con hojas de estilo a evaluar El punto complicado de esto es asegurar que las hojas de estilo se utilicen correctamente y que todo lo que tenga que ver con la presentacin se describa en ellas. Si el color de fondo de un elemento html se define en el tag del elemento y no mediante estilos por ms que tengamos un archivo de estilos no lo estaremos utilizando correctamente.

4.2.. Estructura del sitio : css

Las hojas de estilo son una forma elegante de separa la presentacin del contenido en nuestro sitio. Como tal su uso se encuentra ampliamente recomendado y

Es conveniente que para todo el sitio exista un solo archivo de estilos que compartan todas las pginas y, de esa forma, asegurar la consistencia a travz del sitio. Las expresiones css son un elemento de las hojas de estilo cuyo uso se recomienda ser evitado

4.3. Estructura del sitio : javascript

Es sabido que el javascript es una fuente de errors y por lo tanto cuanto menos abusemos de esa herramienta mejor sera. Hoy en da, ms an con el advenimiento de las RIA y AJAX, cada vez se usa ms este lenguaje. Como reomendacin en este aspecto podemos sugerir evitar tener javscripts duplicados y ponerlos al final para que la pagina se renderice lo antes possible. Las mismas recomendaciones de mimificacin y compression mediante el algoritmo gzip aplican a los archivos javascript. Recordar que los navegadores de internet no suelen paralelizar mucho la bajada de los javascript y es por ello que ultimamente se estan popularizando mucho tcnicas para bajar el javascript [21] de forma dinmica que proven un grado mucho mayor de paralelizacin.

En cuanto a las dimensines de los elementos html, se recomeinda escribirlas como porcentajes en lugar de unidades fijas. Para las imagines hay dos recomendaciones: definir el atributo alt para el contenido alternativo y evitar escalar imagines para hacerlas ms chicas. Asi se se puede optimizar el uso de la red. A continuacin se resumen las caractersticas descriptas:

Si

No

4.4. Estructura del sitio : html

Si desarrollamos una aplicacin web vamos a tener que lidiar en mayor y menor medida con el lenguaje html. Definir de que manera vamos a utilizar dicho lenguaje puede aportar mucho a la calidad del producto. Como primera medida se recomienda definir un estandar de identacin y documentacin del html de modo de facilitar la lectura y mantenibilidad del mismo. Un error muy comm que se observa en las pginas web es evitar poner el tag <title> dentro de la cabecera de la pgina. Los primeros sitios solan definir el layout mediante el componente table. Hoy en da, con la incorporacin de las hojas de estilo, se estan dejando de usar dicho componente para pasar a definir el layout de la pgina mediante divs y css. De esta manera se logra una flexibilidad mucho mayor. Una forma muy utilizada para definir el layout fueron los frames y los iframes. La experiencia mostr que dichos components trajeron bastantes problemas. Por ejemplo la posibilidad de agregar una pgina a favoritos y el funcionamiento de los botones adelante y atras del navegador. Por esas razones su uso se encuentran desaconsejados. Otras recomendaciones son utilizar tags semnticos, aquellos como em, h1, h2, que definen el objetivo del texto pero delegan en navegador y las hojas de estilo la decisin de como renderizar dichos elementos.

Todas las pginas definen el tag <TITLE> Evita el uso del componente TABLE y utiliza DIV + css en su lugar Valida como xhtml Evita el uso de los frames Evita el uso de los iframes Utiliza tags semanticos Las dimensiones se escriben en porcentajes en lugar de pixels u otra escala Las imagenes definen el tag alt con contenido alternativo Evitar escalar imagenes mas chicas El html esta identado de acuerdo al estandar definido Resumen de las caractersticas que tienen que ver con html a evaluar

4.5. Temporal
Temporal. Cubre aspectos de calidad que tienen que ver con alguna variable temporal. Se subdivide en dos subsecciones: Actualizaciones por un lado y Performance y tiempo de respuestas por el otro.

4.5.1. Actualizaciones
La frecuencia con la que se actualice el contenido de la pgina y el porcentaje del tiempo que la misma debe estar disponible online son dos variables importantes de identificar. Si la pgina se actualiza seguido es possible que debamos considerar el algn mecanismo mediante el cual los usuarios finales se enteren de las actualizaciones. Las subscripciones ya sea para recibir las novedades o a los feeds rss suelen ser una alternatica muy utilizada. Junto con el contenido actualizado viene la forma de que el usuario identifique rpidamente el contenido nuevo y lo diferencie de aquel permanente y menos volatil. El porcentaje del tiempo que nuestra pgina debe estar online disponible es un dato que hay que tener en cuenta.

Una pgina que est el 99% del tiempo disponible debe ser sustentada por una arquitectura que lo soporte. Resolver ese problema dista mucho de ser trivial.

convertir entre valores del YSlow y valores esperados por el template Valor YSlow Valor Evaluacion A 100 B 80 C 60 D 40 E 20 F 0 Conversion entre valores del YSlow y del template

4.5.2. Performance y Tiempo de Respuesta

La performance de un sitio web es un tema muy amplio. En principio nos centraremos en cuanto tiempo tarda en responder el sitio a una accion del usuario y cuanto tiempo tarda en cargar una pgina. Para el primer caso el usuario espera un feedback inmediato que su peticin esta siendo procesada y es aqui donde ajax trata de dar una solucin. Para el segundo podemos aplicar una serie de tcnicas que apuntan a un uso ms eficiente de la red. Steve Souders [14] propone en su libro High Performance Web Sites un conjunto de 13 tcnicas para mejorar la performance de un sitio web. Para evaluar dichas tcnicas se puede incorporar una herramienta llamada YSlow [15] que funciona junto con el Firebug [16], un plugin del navegador Firefox.

4.5.3. Usuarios Concurrentes

Otra medida que impacta en la performance es el trfico al que somete la aplicacin web y como se degrada la performance a medida que crece la cantidad de usuarios concurrentes. En este aspecto se sugiere que la plantilla contemple un estimado de visitas por perodo de tiempo y un numero de usuarios simultneos que la aplicacin debe soportar antes de que se degrade la performance. Dichos valores deben ir acompaados de un plan de contingencia que defina como proceder ante un aumento imprevisto de la demada. La velocidad de conexin del usuario final es otro factor a considerar. Lamentablemente muchas veces no se puede determinar de antemano. La estimacin del tiempo, para que sea lo ms precisa possible, debe diferenciarse por cada pgina web. No es el mismo trfico el esperado para la home de nuestro sitio que para otro tipo de pgina. Analizar cuales son las pginas ms visitadas una ves implantada nuestra aplicacin puede servirnos para mejorar nuestras estimaciones iniciales. Una vez relevados los valores de trfico esperado debemos darles su uso. Estos tiempos dependern en gran medida de tres factores. 1) Velocidad de conexin del usuario final 2) Distancia del usuario final y el lugar del sitio 3) Hardware donde esta alojado el sitio 4) Diseo de la aplicacin Para el primer punto debemos asumir una velocidad media de conexin de nuestros usuario final como hiptesis y en lo possible utilizarla como referencia a la hora de realizar los sucesivos test de performance, Una vez que el sitio se encuentre en produccin podemos mejorar nuestra hiptesis original en base a mediciones que realicemos sobre el trfico. El segundo punto tendr impacto directo en la cantidad de saltos que debern realizar los paquetes tcp/ip para llegar a destino. Se recomienda hostear nuestro sitio en un lugar cercano geograficamente a nuestros usuarios finales y en el caso de ser un sitio con un alcance geogrfico

Ventana de evaluacin del YSlow Se sugiere incluir la evaluacin de dichas tecnicas con la herramienta YSlow como parte del template propuesto. Otro tema que consideraremos como parte de la performance es como manejar la escalabilidad de la aplicacin agregando ms servidores. Una opcin generalmente utilizada es poner un load balancer que dividan el trabajo entre dos o ms computadoras. Como cada caracterstica del template deve evaluar con un valor entre 0 y 100 se toma la siguiente referencia para

mayor utilizar CDN (Content Delivery Networks) o mirrors del sitio. Una medicin del trafico recibido tambin pude ayudarnos a entender desde donde se acceder geograficamente a nuestro sitio El tercer punto icluira una descripcin del harware donde estar alojado el sitio y evaluar la presencia de load balancers para distribuir la carga. Los primeros tres puntos tratados deberan servirnos de referencia para el cuarto. Este tendr un impacto directo en el desarrollo de la aplicacin.

se hace dificil incluirlos como parte de la integracin continua.

4.6. Usabilidad
La usabilidad es un atributo de calidad que define cuan facil son de usar las interfaces de usuario [4] de nuestro sitio web. Mide cun facil es de usar, cuan intuitiva y facil de entender entender y aprender es el usa y de la aplicacin Web. El problema de la usabilidad radica en la dificultad de evaluar si un sitio es usable o no ya que no es algo fcil de medir. Muchas veces se recurre a realizar test de usabilidad. Debido al alcance de las aplicaciones web, muchas veces no se sabe cual va a ser el usuario final de las mismas. Esto dificulta an ms la tarea. Un desafo que se nos presenta es el del tema de la accesibilidad y de como hacer nuestro sitio fcil de usar a personas mayores, con problemas visuales. Debido a la dificultad que presenta evaluar la usabilidad de la aplicacin, el template puede definir algunos aspectos concretos que mejoran la usabilidad de un sitio. Jakob Nielsen [17] estudia en profundidad el tema de la usabilidad y en su sitio web se puede encontrar mucha informacin al respecto del tema. El template sugiere atacar el problema de la usabilidad desde varios aspectos. Se divide en varias subsecciones: objetivo, navegacin, accesibilidad, proceso, diseo, multiresolucion, multibrowser

4.5.4. Medir la performance

La recomendacin primero es medir como se comporta el sitio con pginas estticas de distinto peso. El template puede incluir distintas pginas de prueba para realizar mediciones basicas. Por ejemplo se puede tener pginas html de 1K, 100K, 1000K de prueba y adems probar distintas combinaciones con javascript y hojas de estilo. Dichas pginas son necesarias para tener una base de referencia. Tambin sirven como una aproximacin para definir el peso en bytes y caractersticas mnimas que deben tener de cada pgina para satisfacer los requerimientos de trfico definidos. Para medir necesitamos herramientas. Load Impact [19] es una herramienta gratuita muy util para tal fin. A continuacin podemos ver un ejemplo de un grfico que genera.

4.6.1. Objetivo
Esta seccin del template apunta a responder una pregunta concreta. El usuario final, al ver una aplicacin web o al ver una pgina especfica de un sitio, sabe para que sirve?

4.6.2. Navegacin
En cuanto a navegacin, el usuario final de la aplicacin debe poder responder en cualquier instante mientras est utilizando la aplicacin : Dnde estoy? De dnde vine? Dnde puedo ir? Para responder a la primer pregunta debe poder identificarse claramente cual es la pgina donde el usuario est parado. Las pginas que no tienen un ttulo claramente definido o cuyo contenido es confuso son un claro ejemplo de aquellas en las cuales al usuario no le queda bien claro donde est parado.

Ejemplo de grfico generado con la herramienta load impact Cabe aclarar que la versin gratuita nos similar hasta 50 usuarios finales mientras que si queremos una evaluacin mas exhaustiva debemos recurrir a la versin paga. Una vez que midamos nuestras pginas de referencia podemos aplicar las mediciones a nuestro sitio web. Un problema que presentan las mediciones es que para una grn cantidad de usuarios concurrentes son calculus que demoran bastante tiempo en realizarse y por lo tanto

El uso de breadcrumbs como herramienta visual puede aportar mucho a saber de donde viene el usuario mientras que un esquema de navegacin claro y facil de entender puede responderle al usuario a donde puede ir. En este ultimo aspecto es importante que esten claramente direrenciado los contenidos de navegacion de los contenidos dinmicos y los estticos. Para facilitar la escaneabilidad una sugerencias es incluir encabezados que permitan ubicar rapidamente lo que uno busca. El uso de los scrolls merece un apartado especial. Segun estudios realizados[4] los usuarios no se llevan nada bien con los scroll horizontales por lo que su uso se recomienda ser evitado. Evita Scroll Vertical es un punto deseable ya que es mejor que de un vistazo se pueda ver toda la informacin disponible, aunque estudios realizados [4] muestran que el usuario final hoy en dia es ms propenso a aceptar el uso del scroll vertical Un punto si a tener en cuenta es no utilizar scrolls interno dentro de scrolls. La presenia de varios scrolls confunde al usuario

4.6.4. Proceso
Este punto del template define como se tendr en cuenta los aspectos de usabilidad como parte activa del proceso de desarrollo. Para ello se sugiere que exista un diseador grfico o experto en usabilidad que pueda participar del proyecto. Cuanto ms est involucrado dicha persona en el proyecto, mejor sera siendo lo ptimo que se trate de un integrante activo del equipo que lleva adelante el proyecto. Se sugiere [4] que para evaluar la usabilidad se realicen prototipos o boquejos de las pginas del sitio web y los mismos se validen con los clientes y usuarios finales para ver si los mismos se sienten a gusto con el diseo y el esquema de navegacin

4.6.5.Diseo
Tener algunos items a considerar sobre el diseo de la pgina servir para poder evaluar el el prototipo visual del diseador. Algunas sugerencias concretas consisten en tener siempre una pgina de error personalizada, no abusar de los grficos, verificar que todos los controles en una misma columna tengan el mismo ancho y evitar todos los elementos del diseo que estn de ms. Si en la pgina hay mucho para leer los tectos de lectura deben ser anchos y tener un contraste que facilite su lectura. En general el contraste Negro-Blanco es el que mejor funciona. La aplicacin debe presentar un look and feel consistente a traves de toda la aplicacin.

4.6.3. Accesibilidad
El trmino accesibilidad en aplicaciones web se refiere a que personas mayores o condiscapacidades puedan comprender, aprender, navegar y usar nuestro sitio web. En la siguiente tabla se resumen los trastornos ms communes que pueden afectar la forma de que el usuario final percibe nuestra pgina web. Visin o seguera o vision reducida o daltonismo Audicion o Sordera o Disminucin del rango auditivo Trastornos fsicos y motores Trastornos del habla Trastornos neurolgicos y cognigtivos o Dislexia o Desorden de atencion o Poca memoria de corto plazo Trastornos relacionados con la edad

4.6.6.Multiresolucion
Ultimamente los usuario usan cada ves resoluciones ms altas. La ventaja que tiene que se puede mostrar ms informacin en una pgina. La desventaja que se suele asumir que la aplicacin se ver con una resolucin determinada y se crearan sitios que dificultan su lectua en resoluciones superiors o inferiors a las que fueron desarrollados. Se sugiere que al desarrolar el sitio se tengan en cuenta distintas resoluciones posibles y que el contenido mostrado sea escalable independiente de la misma.

La Web Accessibility Initiative (WAI) [18] del World Wide Web Consortium (W3C) resume gran cantidad de recursos de como hacer la web accesible.

4.8. Calidad Interna

La calidad interna amide aquello que el usuario de la aplicacion no ve. La ISO 9126 define que la calidad interna del equipo del trabajo y del proceso influenciar la calidad interna del producto. Esto se traducir en una major calidad percidida el usuario. En particular hablaremos de la calidad interna en cuanto al equipo de desarrollo y el producto en si.

Ms Alto 1024x768 800x600 640x480 Desconocido

4.8.1. Del equipo

Mide aspectos que tienen que ver con el equipo y su forma de trabajar. Cubre aspectos como control de versions, metodologas utilizadas, metodos para evaluar la calidad. Un aspecto importante en el que se hace incapi es el del ambiente de integracin continua ya que, como se menciono en su momento, muchas caractersticas definidas en el template pueden ser evaluadas en forma automatica de esa manera. Para mejorar la integracin de los Fuentes generados por el equipo de desarrollo. y como requisito para implementar un ambiente de integracin continua, de requiere tener un repositorio de control de versions. Los repositories mas utilizados hoy en da son el CVS, el SVN y el SubVersion. Como se mencionar mas adelante, buena parte de la productividad del equipo sera dad por la adopcin del el uso de los unit test y los test de regression como parte de un proceso de integracin continua. Es una recomendadin tener ambientes de produccin y pruebas separados

4.6.7.Multibrowser
Hoy en da el mercado ofrece una gran cantidad de navegadores de internet. Si pretendemos ampliar el alcance de un sitio, ignorar un navegador seria darle la espalda a una gran cantidad de los usuarios finales que los usan. Los navegadores ms usados hoy en dia son Internet Explorer 5, Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Mozilla, Netscape, Firefox, Opera, Safari y Chrome. A continuacin se muestra el porcentaje uso de cada explorador segun [18] w3schols

IE7 IE6 IE8 FireFox Chrome Safari Opera

4.8.2. Del producto

Va directamente al cdigo fuente de la aplicacin y trata temas sobre estilos de codificacin, arquitectura de la aplicacin y documentacin En un equipo heterogeneo de programadores es til definir de antemano estndares de codificacin y hacer reviews de cdigo para verificar que dichos estndares se cumplan Una herramienta muy til son los unit tests. De la mano de los unit test se pueden calcular la cobertura de cdigo de forma de saber que porcentaje de nuestro cdigo esta cubierto y testeado por unit test. El template de calidad puede requerir que al implementarlo se definan rangos deseables de cobertura de cdigo. Junto con los unit test otra herramienta muy util para mejorar la calidad son los test de regression En cuanto a la calidad del producto cuanto ms compleja sea la aplicacin mayor sera la necesidad de definir una

Porcentaje de uso segun navegador a Febrero del 2009 Fuente w3schols Una forma de evaluar el funcionamiento en multibrowser es programar los test de regression para que sean automatizados en distintos navegadores y de esa forma asegurarse que funionan no solo para uno sino para todos los navegadores para los que se desean.

arquitectura. Para las aplicaciones web se suele usar un estilo N-Layered.

Ponderacin Beneficio de Evaluarla

5. Aplicar la plantilla a un desarrollo nuevo

A partir de la plantilla derivaremos lo que daremos en llamar el plan de calidad de un sitio web. Adoptaremos ese nombre, si bien el concepto del plan de calidad generalmente cubre ms aspectos de los que tratamos en este trabajo. Para aplicar la plantilla a un desarrollo nuevo se deben definir los siguientes pasos 1) Definir que caracteristicas definidas en el template van y cuales no van 2) Definir las variables que dice la plantilla 3) Generar instancia de la plantilla o plan de calidad Una vez generada la instancia de la plantilla a la que llamaremos plan de calidad estaremos en condiciones de aplicarlo a un sitio en particular 4) Aplicar instancia de la plantilla al desarrollo del proyecto Una parte importante de la aplicacin de la plantilla es utilizar el nuevo conocimiento adquirido y los temas nuevos que surgan y usarlos para agregar caractersticas nuevas al template No siempre va a ser possible cumplir con toddas Las caractersticas. Las mismas pueden ser deseables, negociables u obligatorias. A continuacin se ve como quedara la caracterstica definida en el template una vez generado el plan de calidad. Caracterstica Codigo Nombre Corto Descripcion Alcance Status Forma de Evaluar

Riesgo de no evaluarla

Impacto en tiempos y costos

1 Se aseguran que cada pagina sea liviana y no cargue rapido en el cliente Se pueden generar paginas muy pesadas que afecten la performance de la aplicacin Estimacion un 5% mas de tiempo y un 5% mas de costos en el desarrollo de la pagina

Derivar el plan de calidad a partir de la plantilla significa adaptar la misma a un sitio web en particular. Esto es concensuar con el equipo tcnico que caractersticas del template resultan relevantes al la aplicacion web a evaluar/desarrollar y en que medida Aplicar la plantilla a un desarrollo nuevo persigue los siguientes objetivos 1) Concensuar la vision de calidad del sitio web 2) Tener una guia tcnica que guie el desarrollo del sitio para los desarrolladores 3) Ayudar a estumar major los tiempos 4) Ayudar a estimar major los costos 5)Tener un criterio uniforme con la diseadora grfica de como debe entregar las cosas Para aplicar la plantilla diferenciaremos el caso que lo hagamos a un sitio nuevo o para evaluar la calidad de un sitio existente.

2. Formas de aplicar la plantilla.

La plantilla definida se puede aplicar de dos formas distintas. La primera es para evaluar la calidad de una aplicacin web existente. A esta forma la llamaremos forma reactiva de aplicar la plantilla.

Responsible Cumplirla Responsible Evaluarla Cuando Cumplirla

C01 Paginas livianas Las paginas no deben ocupar mas de 100K Cada pagina del sitio Obligatoria Un proceso parte del ambiente de integracion continua se encargar de ver el tamao de cada pagina y decidir si cumple Desarrollador Ambiente Integracion Continua Cada vez que se haga commit

La otra forma, a la que llamaremos proactiva, consiste en utilizar la plantilla para concensuar de antemano criterio de calidad a utilizar antes de desarrollar un sitio web.

Triangulo de la negociacin A este tringulo se le incluy en el medio el concepto de calidad Los lados del triangulo corresponden al alcance, el tiempo y los recursos. De este triangulo se pueden hacer lecturas del estilo: si lo quiero en un tiempo fijo voy a tener que negociar los recursos necesarios y el alcance que puedo cumplir. Aqui estamos considerando al alcance ms desde el punto de vista de los requerimientos funcionales. Para hacer ms visible el tema de la calidad se la agreg como una variable ms a tener encuenta en las estimaciones. Por ejemplo decir que una aplicacin funcionar de igual forma en todos los exploradores har que el desarrollo lleve ms tiempo. La plantilla pore sugiere documentar para cada caracterstica a observar de una aplicacin web el impacto que mantiene la misma y de esa forma utilizar la misma como una herramienta para mejorar estimacion de los costos y el tiempo que nos llevar realizar el proyecto.

Ambas formas varan el objetivo para el que uno aplica la plantilla

2. Uso Plantilla de calidad

La plantilal de calidad puede arrojar un valor entre 0 y 100 que sale de hacer un promedio ponderado del resultado de la evaluacin de cada caracterstica indivisual por su ponderacin Se pueden definir valores minimos y aceptables ms all de definir que caractersticas son obligatorias.

6. Trabajos Futuros
El presente trabajo trata de la evaluacin de la calidad desde un punto de vista tcnico. Se sugieren futuros trabajos que realicen un template con cara al usuario final y un mapeo entre distitnas caracteristicas no tecnicas de ese template y las caracteristicas tcnicas propuestas en este template.

4. Estimacin
El plan de calidad generado puede ser utilizado para mejorar la estimacin de un proyecto. En los proyectos web a veces es comn que se le quite importancia a ciertos temas que tienen que ver con la calidad y que se mire todo desde la complejidad de la lgica de negocios Es por ello que estimar el tiempo que va a llevar realizar una aplicacin web no es lo mismo que estimar otro tipo de aplicaciones. En un equipo de desarrollo es habitual que se dediquen horas a temas tcnicos, por ejemplo de algo que funciona en un explorador y en otro no. El plan de calidad ayuda bastante a estimar esto. A continuacin vemos como influye el tema de la calidad en el triangulo de la negociacin de administracin de proyectos.

10. References
[1] Steve Souders Even Faster Websites: Essential Knowledge for Frontend Engineers [2] http://stevesouders.com/ [3] Jackob Nielsen, Guides for visualizing links, http://www.useit.com/alertbox/20040510.html [4] http://www.useit.com/ [5] http://htmlhelp.com/tools/valet/

[6] Magal Gonzlez, Silvia Abraho, Joan Fons, Oscar Pastor, Evaluando la Calidad de Mtodos para el Diseo de Aplicaciones Web [7] http://es.wikipedia.org/wiki/HTTP

[13] http://developer.yahoo.com/ypatterns/ [14] Steve Souders, High Performance Web Sites [15] http://developer.yahoo.com/yslow/ [16] https://addons.mozilla.org/es-ES/firefox/addon/1843

[8] http://es.wikipedia.org/wiki/Aplicaciones_de_Internet_Ric as [9] http://en.wikipedia.org/wiki/Software_quality

[17] http://www.useit.com/ [18] http://www.w3schools.com/browsers/browsers_stats.asp [19] http://www.w3.org/WAI/

[10] http://www.w3.org/TR/CSS2/ [20] http://loadimpact.com/ [11] http://jigsaw.w3.org/css-validator/ [21] http://sites.google.com/site/io/even-faster-web-sites [12] Garzotto F., Mainetti L. and Paolini P. Hypermedia Design, Analysis and Evaluation Issues, Comunication of the ACM, Vol. 38, Nro. 8, August 1995. [22] http://stevesouders.com/cuzillion/