UDA-Desarrollo RUP. Consejos y buenas prácticas

937 views
880 views

Published on

UDA-Utilidades de desarrollo de aplicaciones
• Desarrollo RUP. Consejos y buenas prácticas

http://uda-ejie.github.io/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
937
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

UDA-Desarrollo RUP. Consejos y buenas prácticas

  1. 1. UDA – Utilidades de desarrollo de aplicaciones by EJIE is licensed under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported License.UDA - Utilidades de desarrollo de aplicacionesDesarrollo RUP - Consejos y buenas prácticasFecha: 23/12/2011 Referencia:EJIE S.A.Mediterráneo, 14Tel. 945 01 73 00*Fax. 945 01 73 0101010 Vitoria-GasteizPosta-kutxatila / Apartado: 80901080 Vitoria-Gasteizwww.ejie.es
  2. 2. Desarrollo RUP – Consejos y buenas prácticas ii/44Control de documentaciónTítulo de documento: Desarrollo RUP – Consejos y Buenas PrácticasHistórico de versionesCódigo: Versión: Fecha: Resumen de cambios:1.0.0 23/12/2011 Primera versión.Cambios producidos desde la última versiónControl de difusiónResponsable: Ander MartínezAprobado por:Firma: Fecha:Distribución:Referencias de archivoAutor:Nombre archivo:Localización:
  3. 3. Desarrollo RUP – Consejos y buenas prácticas iii/44ContenidoCapítulo/sección Página1. Introducción 72. Buenas prácticas de diseño 82.1. Introducción 82.2. Volumen de las JSP 82.3. Flujo de navegación 93. Plugins en jQuery 103.1. Introducción a jQuery 103.2. Diseño de plugins en jQuery 103.2.1. Estructura general 113.2.2. Único nombre en el namespace 113.2.3. Opciones como argumento 113.2.4. Cambio de ajustes por defecto 123.2.5. Funciones secundarias 123.2.6. Protección de funciones privadas 124. Gestión del contenido estático 144.1. Introducción 144.2. Servir el contenido estático 144.2.1. Ubicación 144.2.2. Minimización 154.2.3. Compresión 154.3. Carga de imágenes mediante sprites 154.3.1. Herramienta para la generación de sprites 165. Normativa de estilos (CSS) 18
  4. 4. Desarrollo RUP – Consejos y buenas prácticas iv/445.1. Introducción 185.2. Validación de CSS (W3C) 185.3. jQuery UI ThemeRoller 185.4. Aplicación de estilos sobre diferentes navegadores (Hack’s) 205.4.1. Comentarios condicionales en Html 205.4.2. Hack’s 226. Herramientas de ayuda al desarrollo 256.1. Introducción 256.2. Firebug 256.2.1. Consola 256.2.1.1. Objeto console 266.2.2. HTML 276.2.3. CSS 276.2.4. Script 286.2.5. Red 296.2.6. DOM 306.3. Firebug (Lite) 316.4. IE Developer Toolbar 316.5. jslog 326.6. YSlow 346.6.1. Contenido 346.6.1.1. Minimizar las peticiones http 346.6.1.2. Reducir los DNS Lookup 356.6.1.3. Evitar redireccionamientos 356.6.1.4. Habilitar el cacheo de Ajax 366.6.1.5. Postcarga de componentes 366.6.1.6. Precarga de componentes 36
  5. 5. Desarrollo RUP – Consejos y buenas prácticas v/446.6.1.7. Reducir el número de elementos DOM 366.6.1.8. Repartir componentes en dominios 376.6.1.9. Reducir el número de iframes 376.6.1.10. Evitar los errores 404 376.6.2. Servidor 386.6.2.1. Utilizar una red de distribución de contenido (CDN) 386.6.2.2. Añadir cabeceras de expiración o de control de la cache 386.6.2.3. Compresión de componentes (GZIP) 386.6.2.4. Configurar ETags 386.6.2.5. Facilitar el renderizado 396.6.2.6. Usar método GET para peticiones Ajax 396.6.2.7. Evitar dejar vacío el atributo src de las imágenes 396.6.3. Cookie 406.6.3.1. Reducir el tamaño de las cookies 406.6.3.2. Usar dominios libres de cookies para componentes 406.6.4. CSS 406.6.4.1. Colocar las hojas de estilo al inicio 406.6.4.2. Evitar las expresiones CSS 406.6.4.3. Optar por <link> en lugar de @import 406.6.4.4. Evitar los filtros 416.6.5. JavaScript 416.6.5.1. Colocar los scripts al final 416.6.5.2. Externalizar CSS y Javascript 416.6.5.3. Minimizar CSS y Javascript 416.6.5.4. Eliminar scripts duplicados 416.6.5.5. Minimizar el acceso DOM 426.6.5.6. Desarrollar controladores de eventos inteligentes 42
  6. 6. Desarrollo RUP – Consejos y buenas prácticas vi/446.6.6. Imágenes 426.6.6.1. Optimizar las imágenes 426.6.6.2. Optimizar los CSS sprites 436.6.6.3. No escalar las imágenes en HTML 436.6.6.4. Hacer el favicon.ico pequeño y cacheable 436.6.6.5. Móviles 436.7. HttpWatch 43
  7. 7. Desarrollo RUP – Consejos y buenas prácticas 7/441. IntroducciónEl presente documento quiere servir de guía orientativa para los desarrolladores que integren o utilicenlos patrones de RUP en una aplicación. A lo largo del mismo se darán una serie de pautas, consejos yrecomendaciones que buscan facilitar y agilizar el desarrollo y futuro mantenimiento de las aplicaciones.Se han definido diferentes apartados, agrupados según temática, para tratar diferentes aspectos deldesarrollo de la capa de presentación con RUP (buenas prácticas, gestión del contenido estático,estilos, herramientas de ayuda al desarrollo…). Cada apartado no es completamente independiente ypuede estar ligado, en mayor o menor medida, a alguno de los otros. Así, en la medida de lo posible, seha procurado introducir y presentar los conceptos de forma previa (incluso en apartados anteriores) aldesarrollo de los mismos, pero es posible que el lector se encuentre con alguna excepción insalvable.El objetivo principal de este documento es hacer de repositorio del conocimiento y experienciasrecopilada a la hora de desarrollar, integrar y utilizar RUP. Esta información se puede extrapolar anuevos desarrollos, por lo que es interesante tenerlo en cuenta para no incurrir en errores o malasprácticas detectadas y para tener conocimiento de herramientas que puedan facilitar y agilizar eldesarrollo.
  8. 8. Desarrollo RUP – Consejos y buenas prácticas 8/442. Buenas prácticas de diseño2.1. IntroducciónEl apartado actual es un compendio de Buenas Prácticas a la hora de diseñar una aplicación.Mediante el uso y aplicación de dichas prácticas se conseguirá una aplicación más mantenible y quegestione mejor los recursos disponibles, además de mejorar la experiencia del usuario a la hora deinteractuar con ella.2.2. Volumen de las JSPA la hora de servir una página (jsp), el tiempo de descarga y presentación depende directamente deltamaño y complejidad de la misma. En muchos casos, la complejidad de una página es inevitable,por cuestiones de negocio, pero el tamaño excesivo o innecesario puede acarrear penalizacionesque pueden paliarse u optimizarse.Una práctica muy habitual a la hora de diseñar una página (jsp) es incluir elementos que el usuariono va a tener que visualizar o utilizar hasta que ocurra una determinada circunstancia, se realicealguna petición al servidor o se aporte cierta información. Esta información, que no va a ser usada ovisualizada de forma directa, se va descargar con el grueso de la página y va a aumentar el tamañode información descargado. Como consecuencia directa de esta circunstancia, se van a incrementarlos tiempos de descarga de las páginas y la experiencia de usuario se verá perjudicada por lasensación de pesadez y lentitud.El código innecesario de las páginas, unido a un posible exceso de complejidad, a una inexistenteordenación y a una falta de modularidad, va a penalizar la legibilidad y manejo de las páginas en lasfases de desarrollo y va a mermar su rendimiento a nivel productivo. El uso arbitrario de este tipo depáginas va a provocar un aumento de costes y una posible pérdida de calidad.Para no incurrir en este tipo de “mala praxis”, existen un conjunto de buenas prácticas que mejoranla organización, favorecen la legibilidad y permiten modular las páginas para su descargadistribuida:• Extraer el contenido estático de la página: Tanto los estilos como el código JavaScriptpueden extraerse de la jsp y ubicarse en sendos ficheros css y js. Este tipo de práctica,además de reorganizar y hacer más legible la jsp, permite la descarga de los ficheros desdeel servidor Web con lo que la descarga de la página se agiliza (menos datos que enviardesde el servidor de aplicaciones).• Dividir la página en fragmentos mediante includes: Toda jsp puede ser fragmentada endistintos ficheros. Dichos ficheros (jsp) se asocian a la página original mediante directivasinclude. Este tipo de práctica es muy habitual para estructurar páginas muy grandes enfragmentos más manejables y entendibles. Los criterios para dividir las páginas sonnumerosos pero la opción mas acertada, en la mayoría de los casos, es dividir la página enfragmentos funcionalmente lógicos.Dependiendo del tipo fichero usado para cada fragmento de la jsp, las directivas usadasdeberían ser las siguientes:si los fragmentos son includes (.inc):
  9. 9. Desarrollo RUP – Consejos y buenas prácticas 9/44<%@include file="nombreFile.inc"%>si los fragmentos son otras jsps (.jsp):<jsp:include page="nombrePage.jsp"></jsp:include>• Inclusión de contenidos comunes mediante un include: Una buena práctica para ordenar yvolver más legibles las páginas (jsp) es agrupar los elementos comunes (p.e., carga deestáticos) de varias páginas en una página externa e incluirla en las jsps que tengan estoscomponentes en común. Con esta medida se evita repetir código (el mismo conjunto desentencias se extrae a un punto común) y se facilita el entendimiento de las páginas (en laspáginas que hacen uso del código extraído solo será necesaria la directiva de inclusión).• Carga de contenido vía ajax: La presencia de componentes que se cargan o ejecutan enfunción de otros es muy habitual y en muchos casos enriquece las funcionalidades de laspáginas, pero conlleva un aumento del peso de las páginas presentadas.Bajo ciertas circunstancias una alternativa, a la carga inicial de toda la informacióninvolucrada en una jsp, es utilizar la tecnología ajax y descargar, según demanda o en mododesatendido (sin que el usuario lo perciba) la información que se precise. Este modelo dediseño no es aplicable a todos los casos, por lo que es cuestión de los desarrolladores elvalorar, incluir y optimizar su uso.Esta buena práctica tiene como contrapartida que siempre habrá que tener en cuenta lasaturación del servidor por excesivas llamadas ajax.2.3. Flujo de navegaciónLos aspectos funcionales y las decisiones, que en las fases iniciales del proyecto se toman, sondeterminantes a la hora de marcar la evolución y complejidad del desarrollo posterior. Uno de losaspectos que, a veces, se toma más a la ligera y que puede ser muy importante en un desarrollo esel “flujo de navegación”. Una buena definición del flujo de navegación y un buen uso de los distintoscomponentes (respetando la naturaleza de los mismos), puede favorecer la experiencia de losusuarios o convertirla en un guirigay incomprensible.En torno a esta idea, se ha detectado un uso incorrecto del patrón pestañas. El patrón no debe estarinvolucrado, de forma directa, en el flujo de navegación de las aplicaciones, sino en la gestión ypresentación de datos. El uso de las pestañas se recomienda para contener, separar y agrupardatos interrelacionados de distinta naturaleza, y nunca para simular la navegación a páginasconsecutivas o relacionadas funcionalmente.Este uso incorrecto del patrón, responde a la necesidad de estructurar y separar el flujo denavegación, en diferentes pasos o etapas, funcionalidad ya cubierta por el patrón Wizard. Estepatrón, facilita, el diseño e implementación de flujos de páginas y aporta mecanismos para que losusuarios tengan control de las acciones que hacen y del punto en el que se encuentran.
  10. 10. Desarrollo RUP – Consejos y buenas prácticas 10/443. Plugins en jQuery3.1. Introducción a jQueryjQuery (http://docs.jquery.com/) es una biblioteca o framework de Javascript, creada inicialmentepor 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 latecnología ajax a páginas web. Se conforma de un único fichero Javascript que contiene lasfuncionalidades comunes de DOM, eventos, efectos y ajax.La característica principal de la biblioteca es que mediante la manipulación del árbol DOM ypeticiones ajax, permite cambiar el contenido de una página web sin necesidad de recargarla.Otras características reseñables:• Selección de elementos DOM.• Interactividad y modificaciones del árbol DOM.• Eventos.• Manipulación de la hoja de estilos css.• Efectos y animaciones.• Llamadas ajax.• Soporta extensiones (plugins).En la web http://visualjquery.com/ puede encontrarse una API no actualizada (v.1.2.6) pero muyintuitiva.3.2. Diseño de plugins en jQueryUna de las características más valorada de jQuery es su capacidad de extensibilidad a base defunciones y plugins. Esta capacidad de extensibilidad permite la adaptación de la librería, y loscomponentes derivados de ella, a las necesidades de la aplicación que la utilice.Este modelo de extensibilidad, está tan integrado con el propio jQuery que la mayoría de métodos yfunciones incluidas en el paquete por defecto están escritos usando el modelo de construcción yextensibilidad de jQuery. Si se desea más información al respecto, se puede encontrar en:http://docs.jquery.com/Plugins/AuthoringA la hora de crear o extender nuevas funciones o plugins, las distintos enfoques o estructurasusadas pueden diferir en distintos aspectos, por ejemplo RUP dispone de su propio modelo (ver:Desarrollo RUP – Estructura Base y Extensibilidad), pero todas se basan en las pautas marcadaspor jQuery.
  11. 11. Desarrollo RUP – Consejos y buenas prácticas 11/443.2.1.Estructura generalLa estructura tipo a seguir tendría el siguiente aspecto:jQuery.fn.nombreFuncion = function(properties){return this.each( function(){alert(this);});};La invocación de estas nuevas funcionalidades o plugins, se realiza mediante laidentificación a través de un selector del objeto al que se le va a aplicar y el nombre de lafunción o plugin invocado:$(”div a”).nombreFuncion();3.2.2.Único nombre en el namespaceSe recomienda el registro de un solo nombre en el namespace de jQuery, lo que implica unscript con un único plugin. Se podrían definir varios nombres diferentes en el mismo fichero encaso de ser necesario.Definición:$.fn.hilight = function() {//...};Invocación:$(#myDiv).hilight();3.2.3.Opciones como argumentoSe recomienda el paso de un argumento que defina las diferentes configuraciones del plugin.Definición:$.fn.hilight = function(options) {var defaults = {foreground: red,background: yellow};var opts = $.extend(defaults, options);//...};Invocación:$(#myDiv).hilight ( {foreground: blue});
  12. 12. Desarrollo RUP – Consejos y buenas prácticas 12/443.2.4.Cambio de ajustes por defectoMediante la exposición de los ajustes por defecto del plugin se facilita la modificación de estosparámetros directamente por parte del usuario.Definición:$.fn.hilight = function(options) {var opts = $.extend({}, $.fn.hilight.defaults, options);//...};$.fn.hilight.defaults = {foreground: red,background: yellow};Invocación:$.fn.hilight.defaults.foreground = blue;$(#myDiv).hilight();3.2.5.Funciones secundariasUna manera interesante de extender el plugin es mediante la definición y acceso a funcionessecundarias. Al exponer la función format se da la opción de que esta sea redefinida, por lo queterceros podrían implementar sus propias reescrituras de la función.Definición:$.fn.hilight = function(options) {return this.each(function() {var $this = $(this);var markup = $this.html();markup = $.fn.hilight.format(markup);$this.html(markup);});};$.fn.hilight.format = function(txt) {return <strong> + txt + </strong>;};Invocación:$.fn.hilight.defaults.foreground = blue;$(#myDiv).hilight();3.2.6.Protección de funciones privadasSe deben proteger aquellas funciones a las que no se quiera permitir el acceso para evitarposibles reescrituras por parte de terceros.
  13. 13. Desarrollo RUP – Consejos y buenas prácticas 13/44Definición:(function($) {$.fn.hilight = function(options) {debug(this);// ...};function debug($obj) {if (window.console && window.console.log)window.console.log(selection count: + $obj.size());};})(jQuery);A continuación se muestra un plugin de ejemplo en el que aparecen resaltadas las partes delcódigo referente a las recomendaciones:(function($) {var settings = {};$.fn.jq_ejie_fecha = function( properties ) {settings = $.extend({}, $.fn.jq_ejie_fecha.defaults, properties);};$.fn.jq_ejie_calendario.habilitar = function (id, parentForm) {return $(# + id).datepicker(enable);};$.fn.jq_ejie_calendario.defaults = {...};})(jQuery);function validarFecha(dia, mes, anio){...}
  14. 14. Desarrollo RUP – Consejos y buenas prácticas 14/444. Gestión del contenido estático4.1. IntroducciónEl presente capítulo tiene como objeto analizar y profundizar los principales aspectos que rodean lagestión de los contenidos estáticos.En la actualidad, prácticamente toda aplicación web tiene una parte de contenido estático que puedeser de mayor o menor volumen. En función de cómo se diseñan y gestionan estos contenidos puedeverse afectado el rendimiento y la respuesta de la aplicación. Los problemas puede deberse aexceso en el tamaño de los recursos, por un innecesario y desmedido número de peticiones dedescarga o por errores en la composición del javaScript de las páginas (clases duplicadas,descargas de contenidos inexistentes, ubicación inapropiada en la pagina,…).En los siguientes apartados, se tratará en profundidad una serie de recomendaciones y buenasprácticas asociadas a la manipulación del contenido estático.4.2. Servir el contenido estáticoA la hora de servir el contenido estático, más concretamente los ficheros de estilos (.css) y descripts (.js), es recomendable que éstos sean correctamente ubicados, previamente minimizados yservidos en una única petición comprimida (fichero GZIP).4.2.1.UbicaciónLa ubicación utilizada para colocar los tags de inclusión de los css’s y js’s, al contrario de lo quese podría pensar, afecta a los tiempos de carga y visualización de las paginas.Por un lado, los tags asociados a la carga de css’s se deben incluir en el <head> del html quecompone la página. Esto se debe a que los css’s determinan el aspecto y forma de los distintosobjetos incluidos dentro de una pagina. Si la carga de los mismos se incluye en la cabecera(HEAD) de las páginas, éstas se irán cargando progresivamente en el navegador. En casocontrario, si un navegador detecta la carga de hoja de estilos posterior a la creación de un objetohtml aquél detendrá la visualización de la pagina (manteniéndola en blanco) para no cambiar elaspecto repetidas veces hasta descargar todos los css’s. Con esta medida, se consigue que laspáginas se carguen más rápido, al no tener tiempos de espera innecesarios, y que se visualicenprogresivamente (favoreciendo el manejo y la sensación de respuesta a los usuarios).En el caso de los tags de invocación de los js’s, la ubicación adecuada sería en la parte inferiorde las paginas (poco antes del fin del código de la página </html>). Esta recomendación sefundamenta en el comportamiento de los navegadores con este tipo de ficheros. Por lacapacidad de modificación de los ficheros js’s sobre la disposición y aspecto de la pantallas, losnavegadores bloquean cualquier otra acción (descarga, ejecución,…) hasta que termina eltratamiento de un js. En otras palabras, los navegadores detienen el procesado de una página,perdiéndose la capacidad de descarga en paralelo de la que disponen, hasta que terminan detratar un js. Además, mediante esta estrategia, se minimizan los riesgos de ejecución de los js’ssobre objetos todavía no cargados en la pagina.
  15. 15. Desarrollo RUP – Consejos y buenas prácticas 15/444.2.2.MinimizaciónLa minimización consiste en reducir el tamaño de los ficheros. Para ello se emplean diversastécnicas como pueden ser eliminar los saltos de línea y espacios, tan necesarios en lalegibilidad del código pero que aumentan el tamaño de los ficheros y por tanto el tiempo quetarda en procesarse su petición al servidor. Adicionalmente se puede ofuscar el código paraevitar que terceros puedan acceder a él.Por tanto mediante la minimización de los contenidos se logra reducir el volumen de datos quese transmite en cada petición con lo que la aplicación tendrá mejor tiempo de respuesta, seobtendrá una navegación más fluida y un rendimiento mayor.Para la minimización del contenido, se recomienda utilizar la librería YUI Compressor(http://yuilibrary.com/projects/yuicompressor/). Esta librería se distribuye como fichero JAR ypuede ser invocada desde una consola directamente o a través de una tarea ANT.4.2.3.CompresiónOtro punto a tener en cuenta a la hora de servir el contenido estático, es la posibilidad de servirlos ficheros de estilos y de scripts comprimidos todos ellos en un único fichero con formato GZIPy que este sea cacheado. De esta manera, el contenido estático se sirve una única vez y demanera rápida (al ser un fichero comprimido) con lo que se evitan continúas peticiones alservidor.4.3. Carga de imágenes mediante spritesLas imágenes son un recurso muy habitual en las aplicaciones web, ya que enriquecen lapresentación de las mismas y las pueden hacer más atractivas al usuario. Pero el uso de imágenespuede representar un problema debido a la necesidad de realizar múltiples peticiones al servidorpara recuperarlas penalizando el tiempo de respuesta. Para solventar esta problemática serecomienda el uso de sprites. Esta técnica puede ser muy eficaz para mejorar el rendimiento sobretodo en situaciones en las que se incluyen muchas imágenes pequeñas, tales como iconos demenú. Por ejemplo la página de Yahoo (Yahoo! home page) utiliza esta técnica.Un sprite es una serie de imágenes ordenadas en forma de matriz formando una imagen mayor. Unejemplo de sprite (icons.png):
  16. 16. Desarrollo RUP – Consejos y buenas prácticas 16/44Mediante el uso de sprites, se consigue que en una única petición se obtengan todas las imágenesque una página está mostrando. De esta forma se reduce el número de invocaciones a servidor ypor tanto se mejora el tiempo de respuesta de las páginas y el rendimiento del servidor.Además de disminuir el número de peticiones a una sola, también se reduce el tamaño de losrecursos enviados puesto que el tamaño de la imagen que forma el sprite será menor a la suma delos tamaños de todas las imágenes necesarias por separado.A la hora de de trabajar con una imagen concreta de la matriz de imágenes, bastará con identificarsu posición, dentro del sprite, mediante el atributo “background-position”. Este atributo indica laposición exacta donde se encuentra la imagen a cargar. A continuación se muestra un ejemplo deuso:Estilo:.imagen {background-image: url(xxx/images/icons.png);background-position:-96px -128px;}Imagen que se mostraría:En la siguiente URL http://websitetips.com/articles/css/sprites/ , hay un tutorial sobre cómo generarun sprite propio y cómo configurar el fichero de estilos para que localice las imágenes. Dado queesta labor puede resultar repetitiva y tediosa, a continuación, se propone una herramientaOpenSource para facilitar el proceso de generación de sprites a partir de un conjunto de imágenes.4.3.1.Herramienta para la generación de spritesExisten múltiples herramientas para la generación de sprites, pero se recomienda el uso de “cssSprite Generator”.Se trata de un proyecto OpenSource en el que partiendo de una serie de imágenes de origen segenera una sola imagen (sprite) que contiene todas las imágenes origen y los estilos cssasignados a cada imagen.Al tratarse de un proyecto abierto, permite la descarga del código fuente de la aplicación querealiza la conversión, programada en PHP, desde la página del proyecto.• CSS Sprite Generador: https://launchpad.net/css-sprite-generatorOtra alternativa es el uso de la aplicación directamente desplegada en Internet:• Aplicación online: http://es.spritegen.website-performance.org/La aplicación online recibe un fichero comprimido (ZIP) con las imágenes a agrupar y genera: untexto con los estilos necesarios de cada imagen del sprite y un fichero que forma el sprite deimágenes. Se permite la configuración de múltiples opciones:
  17. 17. Desarrollo RUP – Consejos y buenas prácticas 17/44o Omisión de imágenes repetidaso Redimensionado de imágeneso Dirección del sprite (Vertical-Horizontal)o Formato del sprite (PNG, GIF, JPG)o Personalización del código CSS generado:Definición de un prefijoDefinición de un sufijo
  18. 18. Desarrollo RUP – Consejos y buenas prácticas 18/445. Normativa de estilos (CSS)5.1. IntroducciónEl presente capítulo tiene como objeto el profundizar en los aspectos relativos a los ficheros deestilos. Si bien es cierto que toda aplicación web debe tener unos estilos jerarquizados yestructurados de una manera concreta y determinada, a la hora de la verdad en muchos casos estosuele resultar imposible o no se cumple en gran medida. Por ello se destacan aquí ciertasrecomendaciones a la hora de gestionar los estilos del sitio web que se está desarrollando.Por una parte se debe definir una nomenclatura y jerarquía en la implementación de estilosmediante la incorporación de namespaces. También debe asegurarse que los estilos cumplen (en lamedida de lo posible) con los estándares definidos por el “World Wide Web Consortium” [W3C](http://www.w3c.es/).En un intento de facilitar la manipulación y el cambio de los distintos estilos aplicados a unaaplicación, los componentes de RUP han sido desarrollados “ThemeRoller-like”. Para hondar en losdistintos aspectos que influyen en dicha estrategia de generación de estilos, se procederá a explicanlas claves y las implicaciones asociadas al desarrollo mediante el “jQuery UI Theme Manager”.Cada navegador, tomando como fundamento el cumplimiento del estándar de estilos de “WorldWide Web Consortium” [W3C], procesa las hojas de estilo de manera diferente. Esta circunstanciaprovoca que las páginas no se visualicen igual en los diferentes navegadores (Internet Explorer,Firefox, Chrome, Safari,…). Para intentar corregir este tipo de anomalías visuales se van aenumerar ciertas claves asociadas a cada navegador.5.2. Validación de CSS (W3C)Una buena práctica, a la hora de implementar las hojas de estilo de una aplicación es ir validándolasmediante los validadores que proporciona el “World Wide Web Consortium” [W3C].Si bien es cierto que, estas validaciones pueden mejorar la interpretación de los elementos por partede los navegadores, en absoluto garantiza que dichos estilos se visualicen de la misma manera enlos diferentes navegadores. Esto se debe a que cada navegador implementa de manera específicael procesamiento de los estilos.A través de su página, http://jigsaw.w3.org/css-validator/, el “World Wide Web Consortium” [W3C]ofrece un validador de css’s capaz de validar los ficheros css indicando su URL (si están accesiblesen Internet), mediante la subida directa de los mismos (a partir de una ruta local) o mediante laescritura directa de su contenido en la propia página de la herramienta.5.3. jQuery UI ThemeRollerLos componentes diseñados para RUP, como cualquier componente web, tienen unos estilospropios asociados a cada uno de los componentes. Para una presentación y manejo aséptico de losmismos, por defecto, se distribuyen en tonalidades de grises. Este modus operandi responde a unapolítica de independencia total con cualquier portal o aplicación ya creada.
  19. 19. Desarrollo RUP – Consejos y buenas prácticas 19/44Los desarrolladores pueden modificar dichos estilos para adaptarlos a los colores corporativos de laaplicación donde vayan a integrarse los componentes de RUP. De cara a facilitar la modificación delos distintos estilos aplicados, los componentes RUP se han desarrollado como “ThemeRoller-like”.Este modelo de desarrollo permite alinear la jerarquía de los estilos de los componentes RUP conlos estilos de “jQuery-UI” de forma que sea posible utilizar la herramienta “jQuery UI ThemeRoller”(http://jqueryui.com/themeroller/) para el diseño y gestión de estilos.“jQuery UI ThemeRoller” permite diseñar temas de “jQuery-UI” a medida para una integracióndirecta con las aplicaciones. La creación de un tema personalizado, es tan sencillo como seleccionarla pestaña “Roll your own” y ajustar la configuración. A medida que se cambian los parámetros deltema, los componentes de la interfaz de usuario se actualizarán automáticamente para reflejar loscambios de diseño realizados. Una vez acabada la configuración del mismo, se puede descargar eltema creado pinchando en “Download theme”. A la hora de la descarga se deberá especificar quecomponentes del tema se desean descargar, ya que se estructuran en paquetes según sufuncionalidad: Core, Interacciones, Widgets y Efectos.Existe la posibilidad de utilizar un tema prediseñado o cargarlo para realizar las modificacionessobre éste. Accediendo a la pestaña “Gallery” se podrán visualizan todos los temas prediseñados ytrabajar con ellos.A continuación se muestra una captura de cómo se muestra la herramienta:Además de trabajar sobre las paginas de diseño creadas por los desarrolladores de “jQuery-UI” esposible utilizar el “jQuery UI ThemeRoller” sobre las paginas de cualquier aplicación que se estédesarrollando. Para ello, en la página a tratar, se deberá ejecutar el siguiente código JavaScript:javascript:(function(){if(!/Firefox[/s](d+.d+)/.test(navigator.userAgent)){alert(Sorry, dueto security restrictions, this tool only works in Firefox); return false;}; if(window.jquitr){ jquitr.addThemeRoller(); } else{ jquitr = {};
  20. 20. Desarrollo RUP – Consejos y buenas prácticas 20/44jquitr.s = document.createElement(script); jquitr.s.src =http://jqueryui.com/themeroller/developertool/developertool.js.php;document.getElementsByTagName(head)[0].appendChild(jquitr.s);} })();Hay que destacar que gracias al desarrollo “ThemeRoller-like” de los componentes de RUP, lapersonalización de los estilos se puede hacer de forma rápida y sencilla. En tres pasos se puedecambiar el aspecto general de toda la aplicación:1. Mediante el “jQuery UI ThemeRoller” personalizar el aspecto de los componentes.2. Descargar el tema.3. Descomprimir el zip y sustituir el antiguo “custom-theme” por el nuevo dentro del proyectoque gestiona los recursos estáticos de la aplicación.Para más información consultar el documento “Patrones RUP - Estructura Base yExtensibilidad.doc”.5.4. Aplicación de estilos sobre diferentes navegadores (Hack’s)Los estilos y el modo en que los distintos navegadores los gestionan es un problema que siempreha estado presente a la hora de desarrollar cualquier aplicación web para varios navegadores. Enmuchos casos, la forma de afrontar este problema pasaba por desarrollar o adaptar, por separado,los estilos de la aplicación para cada uno de los navegadores donde se visualizara.Con la proliferación de numerosos navegadores, el diseño de estilos de aplicación en función delnavegador, a parte de ser un derroche de recursos excesivo, se convierte en un modelo de trabajoengorroso e inasumible. Ante esta perspectiva, ningún desarrollo asumiría la implementación de unaaplicación para más de dos navegadores distintos. Por suerte, existen algunas alternativas para eldesarrollo de los estilos que pueden facilitar la visualización de una aplicación en un entornomultinavegador. Entre las alternativas posibles, se encuentran los comentarios condicionales y loshack’s.5.4.1.Comentarios condicionales en HtmlEl uso de los comentarios condicionales se basa en la idea de añadir una sentencia selectivaen el html para que cargue un css u otro dependiendo del navegador que este utilizando elusuario.En una primera aproximación, esta técnica permitiría tener un único fichero css por navegador ycargar uno u otro según fuera necesario. Pero yendo más allá, se podría crear un fichero cssgeneral, con los estilos aceptados por todos los navegadores, y otros ficheros css con lasespecificidades de cada navegador.El código que implementa los comentarios condicionales tiene el siguiente esquema:<!-- Sentencia condicional--><!--[if IE]><!-- Cuerpo de la condición--><link rel="stylesheet" href="ejie-ie.css" mce_href=" ejie-ie.css"type="text/css" /><!—Fin sentencia condicional--><![endif]-->
  21. 21. Desarrollo RUP – Consejos y buenas prácticas 21/44Como se puede observar, el código es una sentencia condicional que hace posible la ejecuciónde distinto código (cuerpo de la condición) según la condición, concretamente el tipo denavegador.El código utilizado para ilustrar el esquema de uso cargará la hoja de estilo “ejie-ie.css” solo si elnavegador utilizado es Internet Explorer (en cualquiera de sus versiones).A continuación se enumeran los posibles selectores a utilizar en las sentencias condicionales:Elemento Ejemplo Comentario! [if !IE]El operador NOT. Se pone delante para invertir el valorbooleano de la expresión.lt [if lt IE 5.5]El operador menor que. Este ejemplo devuelve verdad sinos encontramos una versión anterior a IE 5.5.lte [if lte IE 6]El operador igual o menor que. Este ejemplo devuelveverdad si esta versión es la 6 o más antigua.gt [if gt IE 5]Operador mayor que. El ejemplo devuelve verdad si laversión es superior que la 5.gte [if gte IE 7]El operador igual o mayor que. El ejemplo devuelve verdadsi la versión es IE 7 o mayor.( ) [if !(IE 7)]Operador para sub-expresiones. Usado en conjunto conoperadores booleanos para crear expresiones máscomplejas.& [if (gt IE 5)&(lt IE 7)]Operador AND. Devuelve verdad si todas las sub-expresiones son verdad.| [if (IE 6)|(IE 7)]Operador OR. Devuelve verdad si cualquiera de las sub-expresiones son ciertas.Algunos ejemplos más de uso de los comentarios condicionales serían los siguientes:<!--[if IE]><p>Está usted usando un navegador Internet Explorer</p><![endif]--><!--[if !IE]>--><p>Usted no está usando un navegador Internet Explorer</p><![endif]--><link rel="stylesheet" href="ejie-estilosGenerales.css" type="text/css"media="screen" /><!--[if IE 7]><link href="estilo_ie7.css" rel="stylesheet" type="text/css" media="screen"/><![endif]--><!--[if lt IE 7]><link href="estilo_ie.css" rel="stylesheet" type="text/css" media="screen"/>
  22. 22. Desarrollo RUP – Consejos y buenas prácticas 22/44<![endif]-->5.4.2.Hack’sUna manera menos sutil pero igual de efectiva que los comentarios condicionales, a la hora deresolver los problemas de estilos entre navegadores, es emplear hack’s en las hojas de estilos.El funcionamiento de los hack’s consiste en utilizar el conjunto de caracteres especiales que noson interpretables o que solo ciertos navegadores reconocen. Gracias a estas diferencias deinterpretación entre los distintos navegadores, se pueden crear estilos que solo un tipo (ofamilia) de navegadores puede procesar.El uso de hack’s es sencillo: para los estilos que se ven distintos de un navegador a otro, sepueden crear estilos específicos o versiones del mismo estilo que solo se apliquen al navegadorque da problemas. Por ejemplo:.caja {margin-left:5px; *margin-left:2px;}El estilo caja, según el navegador utilizado, será interpretado de dos formas distintas:Para cualquier navegador, a excepción del Internet Explorer 6, tendrá como valor de margenizquierdo “5 pixeles”. En caso de ser usado por un Internet Explorer 6, ya que es el únicoque acepta el carácter especial “*” al inicio de una palabra clave de un CSS, el valor delmargen izquierdo tendrá un valor de “2 pixeles”.Dentro de los hack’s existentes cabe destacar que muchos que se pueden encontrar en Internetno son fiables o no funcionan (por inconsistencias o por errores tipográficos). Por esta razón, acontinuación se muestran dos grupos: hack’s validados (contrastados) y hack’s existentes.-.Hack’s validados:Partiendo de la especificación de un color rojo (red) para los css y un color azul (blue) para losatributos, se especifican la aplicación de los distintos hack’s para los distintos navegadores ofamilias de navegadores./***** Hack en CSS ******//* Solo IE6 */* html .ejie-ejemplo{color: red;}/* FF & Chrome */html>/**/body .ejie-ejemplo {color: red;}/* IE 7-8 && FF && Chrome*/html>body .ejie-ejemplo {color: red;
  23. 23. Desarrollo RUP – Consejos y buenas prácticas 23/44}-.Hack’s existentes:Partiendo de la especificación de un color rojo (red) para los css y un color azul (blue) para losatributos, se especifican la aplicación de los distintos hack’s para los distintos navegadores ofamilias de navegadores./***** Hack en CSS ******//* IE 6 y más antiguos */* html #uno { color: red }/* IE 7 y más antiguos */*:first-child+html #dos { color: red }/* IE 7 y navegadores modernos */html&gt;body #tres { color: red }/* Navegadores modernos (no el IE 7) */html&gt;/**/body #cuatro { color: red }/* Opera 9.27 y más antiguo */html:first-child #cinco { color: red }/* Safari */html[xmlns*=""] body:last-child #seis { color: red }/*safari 3+, chrome 1+, opera9+, ff 3.5+ */body:nth-of-type(1) #siete { color: red }/* safari 3+, chrome 1+, opera9+, ff 3.5+ */body:first-of-type #ocho { color: red }/* saf3, chrome1+ */@media screen and (-webkit-min-device-pixel-ratio:0) {#diez { background: #FFDECE; border: 2px solid #ff0000 }}/* iPhone / mobile webkit */@media screen and (max-device-width: 480px) {#veintiseis { color: red }}/* Safari 2 - 3.1 */html[xmlns*=""]:root #trece { color: red }/* Safari 2 - 3.1, Opera 9.25 */*|html[xmlns*=""] #catorce { color: red }/* Todos menos IE6-8 */:root *> #quince { color: red }/* IE7 */*+html #dieciocho { color: red }
  24. 24. Desarrollo RUP – Consejos y buenas prácticas 24/44/* Solo Firefox. 1+ */#veinticuatro, x:-moz-any-link { color: red }/* Firefox 3.0+ */#veinticinco, x:-moz-any-link, x:default { color: red }/***** Hack por atributos ******//* ie6 y más antiguos */#once { _color:blue }/* ie7 y más antiguos */#doce { *color: blue } /* or #color:blue *//* Todos los navegadores menos IE6 */#diecisiete { color/**/: blue }/* IE6, IE7, IE8 */#diecinueve { color: blue9; }/* IE7, IE8 */#veinte { color/***/: blue9; }/* IE6, IE7 – actua como un !important */#veintesiete { color: blue !ie; }
  25. 25. Desarrollo RUP – Consejos y buenas prácticas 25/446. Herramientas de ayuda al desarrollo6.1. IntroducciónEl presente apartado tiene como objeto el presentar diferentes herramientas que pueden ayudar adesarrollador a la hora de implementar una aplicación. Estas herramientas tendrán ámbitos tandispares como la manipulación y gestión de estilos o el trazado mediante sentencias javaScript.El uso de las herramientas es recomendable ya que gracias a ellas se pueden solventar muchos delos problemas más comunes encontrados en la creación de una aplicación web.6.2. FirebugFirebug (http://getfirebug.com) es una extensión para Mozilla Firefox que contiene una serie defuncionalidades indispensables para el desarrollo de cualquier sitio web. Entre sus opciones sedestacan:• Edición de HTML en tiempo real• Edición online de hojas de estilos• Monitorización del tiempo de carga de las páginas• Depurador de Javascript• Gestor de errores en Javascript, CSS y XML• Explorador del árbol DOMPara gestionar todas estas funcionalidades Firebug contiene una ventana que se divide endiferentes pestañas que se detallan a continuación.6.2.1.ConsolaLa consola muestra las peticiones ajax (get o post) que realiza la página, las cabeceras, lasvariables enviadas y la respuesta del servidor. También muestra los errores javaScript que seproducen en la página junto a un enlace donde se puede ver la línea de código exacta queproduce el error.Esta consola puede ser una gran ayuda a la hora de desarrollar y de probar los componentes yaque permite ejecutar código javaScript. Por tanto se puede incluir el código que se estádesarrollando y ejecutarlo directamente en la página sin tener que realizar cambios en la JSPcontinuamente.A continuación se muestra un ejemplo que ejecuta el código javaScript necesario para lanzar elcomponente diálogo. El código se introduce en la parte inferior derecha y tras pulsar el botón“Ejecutar” se ejecuta. En la parte inferior izquierda se ve como se ha ejecutado la sentencia yaparece la ventana de diálogo:
  26. 26. Desarrollo RUP – Consejos y buenas prácticas 26/446.2.1.1. Objeto consoleA nivel de javaScript, existe un objeto console que representa la salida estándar deconsola. Este objeto interacciona directamente con la consola de Firebug o cualquier otraque posea el navegador (por ejemplo, el chrome dispone de la suya propia).Este objeto contiene varias funcionalidades que permiten mostrar información en la consolasin necesidad de recurrir a los molestos “alert()” y sus paradas de ejecución.La forma más sencilla de escribir en la consola es utilizar el metodo log: console.log("helloworld"). Dicho método, acepta un numero ilimitado de argumentos:console.log(2,4,6,8,"foo",bar). Los objetos pasados como parámetros se mostrarán comoenlaces y pinchando en cada uno de ellos se navegará a su detalle. Existe la posibilidad deque el objeto se muestre desglosado mediante el uso de la sentencia dir:console.dir(object).El objeto console es capaz de trabajar con diferentes niveles de traza. En función de éstos,en la consola, aparecerán los datos resaltados de diferente manera. Los niveles de trazaexistentes son:• console.debug()• console.info()• console.warn()• console.error()Las funcionalidades descritas son las más importantes pero no las únicas. Se puedeencontrar más información en: http://getfirebug.com/logging
  27. 27. Desarrollo RUP – Consejos y buenas prácticas 27/446.2.2.HTMLMediante esta pestaña Firebug permite editar el html en tiempo real. Especialmente interesantees el “Inspector de html” que permite detectar los elementos pasando el ratón por encima.Una vez localizado el elemento deseado se podrá editar en tiempo real.Las funcionalidades, más destacadas, que aporta esta pestaña son:• Ver código fuente generado• Resaltar cambios• Editar html en tiempo real• Encontrar elementos con el ratón• Inspeccionar un elemento y recargarlo sin perderlo• Copiar el htmlA continuación se muestra un ejemplo de la pestaña html inspeccionado un elemento. Paracambiar los estilos aplicados, se puede pinchar en la ventana inferior derecha y deshabilitardeterminados estilos o se puede editar directamente el código pulsando el botón Editar de laventana izquierda.6.2.3.CSSMediante esta pestaña se accede fácilmente a la edición de estilos de la página en tiempo real.Como ya se ha comentado anteriormente, la apariencia de las aplicaciones puede variar entre
  28. 28. Desarrollo RUP – Consejos y buenas prácticas 28/44navegadores. Mediante esta herramienta se facilita el famoso método de “Prueba y Error” parala encontrar los estilos correctos y deseados.Las funcionalidades, más destacadas, que aporta esta pestaña son:• Previsualizar colores e imágenes• Inspeccionar la hoja de estilos• Editar estilos y ver los cambios en tiempo real• Ayuda en línea y corrector de errores tipográficosSe puede seleccionar el fichero de estilos aplicado en la página como se muestra en el ejemplode la pestaña CSS para su manipulación:6.2.4.ScriptEl debugger de javaScript incorporado permite controlar la ejecución de los códigos javaScriptpara conseguir localizar posibles fuentes de error, así como mejorar el rendimiento del código.Las funcionalidades, más destacadas, que aporta esta pestaña son:• Encuentra cualquier script fácilmente• Ejecución paso a paso• Detección de errores y puntos de ruptura• Ver el valor de las variables en tiempo real• Saltos fáciles a cualquier línea del código
  29. 29. Desarrollo RUP – Consejos y buenas prácticas 29/44• Modo “Profile” que muestra un completo análisis de los tiempos de carga y ejecuciónque ha provocado la navegación por la página.A continuación se presenta una captura del depurador del código javacript. En la línea 165 sepuede observar un punto granate mostrando un punto de ruptura (BreakPoint), y en la línea 170una flecha amarilla que indica cuál es la siguiente sentencia a ejecutar. La ejecución paso apaso se controla mediante los botones de la parte superior.6.2.5.RedLa pestaña Red ofrece la posibilidad de controlar las peticiones que realiza la aplicación tantopara la descarga de contenido estático (js, css o imágenes) así como peticiones ajax, parapoder controlar los tiempos de respuesta así como los parámetros de envío y de respuesta.Permite realizar un filtrado según el tipo de petición: todo, html, css, js, xhr (peticiones ajax),imágenes, flash.Las funcionalidades, más destacadas, que aporta esta pestaña son:• Línea de tiempo• Filtros por tipos de archivos• Ver qué datos se sirven de cache• Examen de cabeceras• Monitorización del XMLHttpRequestLa siguiente captura muestra los elementos pedidos al servidor y el tiempo que estos hantardado en servirse. En caso de no encontrar algún recurso este aparecerá en color rojo.
  30. 30. Desarrollo RUP – Consejos y buenas prácticas 30/44Desplegando cada uno de los recursos podrá verse el detalle de la petición: cabeceras,respuesta…6.2.6.DOMLa manipulación de objetos DOM se puede realizar desde esta pestaña de una manerarelativamente sencilla.Las funcionalidades, más destacadas, que aporta esta pestaña son:• Resumen de objetos• Muestra el árbol DOM de la página• Edición en tiempo real• Navegación por el código javaScriptUna captura de ejemplo del árbol DOM mostrado por Firebug:
  31. 31. Desarrollo RUP – Consejos y buenas prácticas 31/446.3. Firebug (Lite)Firebug Lite (http://getfirebug.com/firebuglite) se trata de una versión reducida de la extensiónFirebug que permite ser ejecutada desde navegadores diferentes a Firefox, ya que la herramientase incluye a través del código de la aplicación mediante la invocación a un fichero js alojado enInternet.Para su uso simplemente debe incluirse el siguiente código en la cabecera de la página:<script src=" https://getfirebug.com/firebug-lite.js" type="text/Javascript"></script>6.4. IE Developer ToolbarInternet Explorer Developer Toolbar, es una extensión para Internet Explorer 6 e Internet Explorer7 que tiene como objetivo ayudar en el diseño y la depuración de páginas web.http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=enSus funcionalidades más características son:• Validación de HTML y CSS• Vista previa de diseño de página en varias resoluciones• Utilidad (que mide en píxeles) para ayudar en el posicionamiento de los elementos• Inspeccionar los objetos DOM y los selectores css que se aplican a cada elemento• Inspeccionar las propiedades y estilos de los distintos elementosLa barra de herramientas incluye un panel de expandible en la parte inferior de la ventana. El panelmuestra la estructura de la página web, y a partir de ella, las propiedades y estilos de los distintosobjetos. Expone sus características a través de una jerarquía de menús, y también incluye botonesde la barra de acceso rápido a funciones tales como borrar la cache del navegador y permitir laselección de elementos haciendo clic en la página final en lugar de navegar a través de larepresentación visual del árbol DOM.
  32. 32. Desarrollo RUP – Consejos y buenas prácticas 32/44En la siguiente captura se muestra la apariencia del IE Developer Toolbar:Internet Explorer 8 incluye las características de Internet Explorer Developer Toolbar integradas,en lugar de un producto distinto, como una herramienta de desarrollo. Se puede acceder desde elmenú Herramientas del navegador o pulsando F12. Esta toolbar integrada se asemeja más aFirebug y ofrece más funcionalidades que el IE Developer Toolbar basado en IE6 e IE7.6.5. jslogEn los desarrollos que basan gran parte de su funcionalidad en código javaScript, es una ayudaindispensable el contar con una herramienta que facilite la depuración de código y el desarrollo delmismo. En el caso de estar desarrollando con un navegador Firefox, se recomienda el uso del objetoconsole; pero en Internet Explorer, la herramienta IE Developer Toolbar no tiene ningún objetosimilar.jslog es una librería javaScript que facilita la obtención de trazas sin tener que recurrir a losincómodos alert propios de javaScript. Entre los inconvenientes más típicos del método alert,destacan los siguientes:• Se debe reconocer cada mensaje por algún indicativo.• Se deben buscar y eliminar todas las invocaciones de la función de cara a la implantaciónde la aplicación en un entorno productivo.• Las notificaciones son intrusivas y paran la ejecución del código por lo que no puedenprocesarse correctamente peticiones asíncronas y/o concurrentes.Mediante el uso de jslog, se consigue la posibilidad de usar cuatro niveles diferentes de trazaasociados a un determinado color: debug (azul), info (verde), warning (amarillo), error (rojo).Su integración en la aplicación es trivial ya que basta con copiar el fichero “jslog.js” dentro de laaplicación y cargarlo en las páginas mediante la sentencia:<script src="/xxx/jslog.js" type="text/Javascript"></script>Para usar las facilidades de traza basta con invocar a la función correspondiente al nivel deseadopasando como parámetro el texto a mostrar:• jslog.debug()• jslog.info()• jslog.warning()
  33. 33. Desarrollo RUP – Consejos y buenas prácticas 33/44• jslog.error()Una vez cargada la página que hace uso de la librería, en pantalla se mostrará la siguiente imagen:El número que aparece indica el número de líneas de traza escritas hasta el momento. Con undoble-click sobre la imagen se mostrará una ventana que contendrá las trazas y volviendo a pulsaren la misma desaparecerá. A continuación se muestra un ejemplo de la ventana de trazas:El fichero “jslog.js”, contiene una entrada (primera línea de código) que permite habilitar odeshabilitar el componente. De esta manera se consigue ocultar el uso de jslog sin necesidad de irpágina a página buscando y eliminando todas las llamadas al componente.var config_enabled=true; Habilita el componentevar config_enabled=false; Deshabilita el componenteLa posición de la ventana en pantalla también es configurable. Por defecto aparece en la posición2,2 (píxeles), pero puede modificarse cambiando las variables del fichero:var _26=2; Posición Verticalvar _27=2; Posición HorizontalMás información y descarga de la librería en: http://earthcode.com/blog/tools/jslog/contents.htmlDescarga de la librería: http://earthcode.com/downloads/jslog.js
  34. 34. Desarrollo RUP – Consejos y buenas prácticas 34/44NOTA IMPORTANTE: Se recomienda la inclusión de este script dentro del cuerpo de la páginadebido a que manipula el objeto <body> y, tal como ya se ha dicho, a que es donde debe ir el códigojavaScript.6.6. YSlowYSlow (http://developer.yahoo.com/yslow/) analiza las páginas web y sugiere formas para mejorarsu rendimiento basándose en un conjunto de reglas específicas que mejoran el rendimiento de laspáginas web. Se trata de un complemento de Firefox integrado bajo la herramienta de desarrolloweb Firebug. YSlow califica una página web en función de un conjunto de reglas predefinidas(existen tres ruleset creados por defecto) o de un conjunto de reglas definidas por el usuario (sepuede definir un ruleset basándose en alguno de los creados o uno completamente nuevo con lasopciones que se deseen).Entre sus funcionalidades se destacan:• Ofrece sugerencias para mejorar el rendimiento de la página.• Un resumen de los componentes de la página.• Muestra las estadísticas sobre la página.• Proporciona herramientas para el análisis de rendimiento, como Smush.it y JSLint.Principalmente, los ámbitos que analizan las reglas que aplica YSlow se centran en los contenidos,las cookies, los css’s, las imágenes, el javaScript y el server.Analizando las reglas con más detenimiento los aspectos a los que afectan serían los siguientes:6.6.1.Contenido6.6.1.1. Minimizar las peticiones httpReducir el número de peticiones http es una de las prácticas más recomendable y por la quese debe empezar a la hora de optimizar una aplicación web.El 80% del tiempo de respuesta del usuario final se gasta en el “front-end” y la mayoría deeste tiempo es invertido en la descarga de todos los componentes de la página: imágenes,hojas de estilo, scripts, flash, etc. Por tanto la reducción del número de componentes de unapágina, reduce a su vez el número de peticiones httpA continuación se detallan algunas técnicas para reducir el número de solicitudes http:• Combinación de archivos: combinar todos los ficheros de scripts (.js) en una únicasecuencia de comandos (un único fichero). Del mismo modo se pueden combinar todoslos estilos en una hoja de estilo css única. Esta solución es difícil de aplicar cuando losscripts y hojas de estilo varían de una página a otra.• Sprites css: juntar todas las imágenes en una única imagen (sprite) obteniendo laimagen deseada a través de atributos (fondo-posición) aplicados en el fichero css. Es la
  35. 35. Desarrollo RUP – Consejos y buenas prácticas 35/44mejor solución para reducir las peticiones de imágenes al servidor. Esta práctica sedetalla en este documento en el apartado relativo al contenido estático.• Mapas de imágenes: se trata de unir imágenes que aparecen contiguas en la página(por ejemplo una barra de menú) para que todas puedan ser cargadas mediante unaúnica petición http. La zona activa de cada imagen se define mediante el tag <map> dehtml lo que puede ser tedioso y provocar diversos errores. Se debe tener en cuenta queel uso de mapas de imágenes para la navegación no es accesible.• Imágenes en línea: consiste en integrar la imagen en la página mediante el uso de data:URL écheme (http://tools.ietf.org/html/rfc2397), por lo que puede aumentar el tamaño desu documento html. La combinación de imágenes en línea con las hojas de estilo(cacheadas) es una manera de reducir las peticiones http y evitar el aumento deltamaño de las páginas. Esta alternativa aún no está disponible en todos losnavegadores.6.6.1.2. Reducir los DNS LookupLa mayoría de los navegadores tienen un sistema de cache propio independiente de lacache del sistema operativo. Mientras que el navegador guarda un registro de DNS en supropia cache (tras atender la petición de un recurso), no se molesta al sistema operativo conuna solicitud para el registro.Cuando la cache DNS del cliente está vacía (tanto para el navegador y el sistemaoperativo), el número de búsquedas de DNS es igual al número de host’s diferentes en lapágina web. Esto incluye los nombres de host utilizados en la url de la página, imágenes,archivos de script, hojas de estilo, objetos flash, etc. Reducir el número de nombres de hostdiferentes, reduce el número de búsquedas de DNS y en consecuencia el tiempo de cargade la pagina.Esta estrategia de diseño, reduce el número de nombres de host pero también reduce lacantidad de descargas paralelas que se realizan en la página. Evitar las búsquedas de DNSreduce los plazos de respuesta, pero la reducción de descargas simultáneas puedeaumentar los tiempos de respuesta. Por tanto las buenas prácticas recomiendan dividirestos componentes en: al menos dos, pero no más de cuatro host’s diferentes. Lo quesupone un buen compromiso entre la reducción de las búsquedas de DNS y un alto gradode descargas simultáneas.6.6.1.3. Evitar redireccionamientosLos redireccionamientos ralentizan la experiencia del usuario por lo que son elementos aevitar aunque en algunos casos puede suponer una reducción considerable en el desarrollode la aplicación.Uno de los redireccionamientos que sucede con mas frecuencia, y que más tiempo de cargaconlleva, se produce cuando las url’s no están finalizadas por una barra diagonal (/). Porejemplo una petición http://astrology.yahoo.com/astrology devuelve una respuesta 301 (re-direccionamiento) a la dirección, http://astrology.yahoo.com/astrology/
  36. 36. Desarrollo RUP – Consejos y buenas prácticas 36/446.6.1.4. Habilitar el cacheo de AjaxUno de los grandes beneficios del uso de ajax es que proporciona una respuesta al usuariode forma asincróna desde el servidor. Sin embargo, el uso de ajax no garantiza la no esperapor parte del usuario mientras recibe las respuestas javaScript asíncronas y XML. Enmuchas aplicaciones esta espera depende de cómo se utiliza la tecnología ajax. Porejemplo, en un cliente de correo electrónico basado en web, el usuario se mantendrá enestado de espera mientras una petición ajax encuentra todos los mensajes de correoelectrónico asociados al usuario. Es importante recordar que "asíncrono" no implica"instantáneo".Para mejorar el rendimiento es importante optimizar estas respuestas ajax y la mejormanera es hacer que las respuestas puedan ser cacheadas.6.6.1.5. Postcarga de componentesEn toda página web existen componentes que no necesitan que sean cargados al cargar lapágina ya que el usuario no interactúa con estos hasta después de realizar ciertasinteracciones con la aplicación. Por tanto puede que ese componente no requiera sercargado en primera instancia.El código javaScript es un candidato ideal para dividir el proceso de carga en distintaspartes. Por ejemplo, si se incluye código javaScript para efectos de arrastrar y soltar asícomo de animación, éstos pueden ser excluidos de la carga inicial y relegarlos a una cargaasociada a su uso. Otros candidatos para la post-carga son los contenidos ocultos o ensegundo plano.6.6.1.6. Precarga de componentesLa pre-carga puede parecer lo contrario de la post-carga, pero en realidad tiene una metadiferente. Mediante la pre-carga componentes se puede aprovechar el tiempo que elnavegador está inactivo para solicitar los componentes (imágenes, estilos y scripts) que senecesitarán en el futuro. De esta manera cuando el usuario visita la página siguiente, lamayoría de los componentes ya están en la cache y la página se carga mucho más rápidopara el usuario.Existen varios tipos de precarga:• Precarga incondicional: tan pronto como se ejecuta el evento onload se obtienenalgunos componentes adicionales.• Precarga condicional: se cargan los elementos basándose en la suposición de lo que vaa necesitar el usuario aventurando hacia donde se va a dirigir en la aplicación.6.6.1.7. Reducir el número de elementos DOMUn gran número de elementos DOM en una página tiene varias connotaciones negativas:más flujo de datos en descarga, acceso más lento en javaScript y puede ser un síntoma deque hay algo que debe ser mejorado. Ejemplos concretos de esta mala práctica pueden serel uso de tablas anidadas para maquetación o el uso excesivo de capas para corregirproblemas de diseño.
  37. 37. Desarrollo RUP – Consejos y buenas prácticas 37/44El número de elementos DOM se puede comprobar mediante la consola de Firebug:document.getElementsByTagName(*).lengthPor ejemplo la página “Yahoo! Home Page” es una página con gran funcionalidad quecontiene menos de 700 elementos.6.6.1.8. Repartir componentes en dominiosLa división de componentes permite maximizar descargas simultáneas. Un númeroadecuado de dominios podría ser entre dos y cuatro ya que un excesivo uso podríapenalizar la búsqueda de DNS.Por ejemplo, se puede alojar un contenido html y sus páginas dinámicas enwww.example.org y dividir los componentes estáticos entre static1.example.org ystatic2.example.org.6.6.1.9. Reducir el número de iframesLos <iframe> permiten que en un documento html se incluya a su vez en otro documentoprincipal. Es importante entender cómo funcionan los iframes para que sean utilizados coneficacia.Ventajas:• Ayuda con la carga lenta de elementos de terceros tales como anuncios.• Security sandbox• Descarga de scripts en paraleloDesventajas:• Costoso (bajo rendimiento) incluso estando en blanco.• Bloquea la página en el evento onload• Non-semantic6.6.1.10. Evitar los errores 404Las peticiones http son costosas, por lo que si de una petición http se obtiene una respuestainútil (es decir, 404 Not Found) ésta se convierte en totalmente innecesaria y ademásdisminuye la experiencia del usuario sin ningún tipo de beneficio.Especialmente problemático es la petición que descarga un javaScript externo que está maly cuyo resultado es un 404. En primer lugar, esta descarga bloqueará descargassimultáneas. Y además, el navegador puede tratar de analizar la respuesta del cuerpo 404como si fuera código javaScript, tratando de encontrar algo útil en él.
  38. 38. Desarrollo RUP – Consejos y buenas prácticas 38/446.6.2.Servidor6.6.2.1. Utilizar una red de distribución de contenido (CDN)Una red de distribución de contenidos (CDN) es una colección de servidores webdistribuidos en varias ubicaciones para entregar el contenido de la manera más eficiente alos usuarios. El servidor seleccionado para entregar información a un usuario específico, sebasa típicamente en una medida de la proximidad de la red. Por ejemplo, el servidor con elmenor número de saltos de red o el servidor con el mejor tiempo de respuesta es el elegido.6.6.2.2. Añadir cabeceras de expiración o de control de la cacheExisten dos alternativas en esta regla:• Componentes estáticos: implementar la política “Nunca expira” mediante elestablecimiento de la cabecera de expiración a un futuro lejano.• Componentes dinámicos: usar la cabecera apropiada Cache-Control para ayudar alnavegador con las peticiones condicionales.6.6.2.3. Compresión de componentes (GZIP)La compresión de los componentes reduce los tiempos de respuesta al reducir el tamaño dela respuesta http.A partir de HTTP/1.1, los clientes web soportan la compresión a través de la cabeceraAccept-Encoding en la petición http.Accept-Encoding: gzip, deflateSi el servidor web ve esta cabecera en la solicitud, puede comprimir la respuesta medianteuno de los métodos enumerados por el cliente. El servidor web se lo notifica al cliente através de la cabecera Content-Encoding en la respuesta.Content-Encoding: gzipGzip es el método de compresión más popular y más eficaz en este momento. Fuedesarrollado por el proyecto GNU y estandarizado por el RFC 1952.Comprimir tantos tipos de ficheros como sea posible es una manera fácil de reducir el pesode las páginas y de mejorar la experiencia del usuario.6.6.2.4. Configurar ETagsLas etiquetas entidad (ETag) son un mecanismo que los servidores web y navegadoresutilizan para determinar si el componente en la cache del navegador coincide con el queexiste en el servidor.Los ETags se agregaron para proporcionar un mecanismo de validación de las entidadesmás flexible que la fecha de la última modificación. Un ETag es una cadena que identifica
  39. 39. Desarrollo RUP – Consejos y buenas prácticas 39/44de forma exclusiva una versión específica de un componente. Las restricciones de formatoes que el string debe ir entrecomillado. El servidor especifica el ETag del componente queutiliza mediante la cabecera ETag en la respuesta. Ejemplo de un ETag:HTTP/1.1 200 OKLast-Modified: Tue, 12 Dec 2006 03:03:59 GMTETag: "10c24bc-4ab-457e1c1f"Content-Length: 121956.6.2.5. Facilitar el renderizadoCuando los usuarios solicitan una página, el servidor de backend puede tardar de 200 ms a500 ms para unir la página html. Durante este tiempo, el navegador está parado mientrasespera a que los datos lleguen. En lenguajes como php existe la función flush() que permiteenviar la respuesta html parcialmente lista al navegador para que este pueda comenzar aprocesarla mientras se sigue enviando el resto.6.6.2.6. Usar método GET para peticiones AjaxCuando se utiliza el objeto HttpRequest para el envío de peticiones asíncronas mediante elmétodo post, éste se ejecuta en los navegadores como un proceso de dos pasos: primero,el envío de los encabezados y, después, el envío de los datos. En consecuencia, espreferible usar get, que solo toma un paquete TCP para el envío (a menos que hayamuchas cookies). La longitud máxima de url en Internet Explorer es 2K, por lo que si seenvían menos de 2K datos se podría usar el método get.6.6.2.7. Evitar dejar vacío el atributo src de las imágenesEste error puede darse en dos versiones:• <img src="">• var img = new Image();img.src = "";Ambas opciones crean una petición extra al servidor ocasionando:1. Duplicar el tráfico del servidor, sobre todo en aquellas aplicaciones que tienenmúltiples usuarios.2. Malgastar tiempo del servidor generando un recurso que no va a ser visionado.3. Posibilidad de corromper información del usuario.Por tanto deberá evitarse dejar vacío el atributo src para no ocasionar problemas.
  40. 40. Desarrollo RUP – Consejos y buenas prácticas 40/446.6.3.Cookie6.6.3.1. Reducir el tamaño de las cookiesLas cookies sirven para llevar el control de usuarios. Cuando un usuario introduce sunombre de usuario y contraseña, se almacena una cookie para que no tenga que estarintroduciéndolas para cada página del servidor. Sin embargo, una cookie no identifica a unapersona, sino a una combinación de computador-navegador-usuario.La información de las cookies se intercambia en las cabeceras http entre servidores web ynavegadores por lo que es importante mantener el tamaño de las cookies lo más bajoposible para reducir al mínimo el impacto en el tiempo de respuesta del usuario.6.6.3.2. Usar dominios libres de cookies para componentesCuando el navegador hace una petición de una imagen estática y envía cookies junto con lasolicitud, el servidor no realiza ninguna función con las cookies por lo que únicamentegeneran tráfico de red sin razón. Deben asegurarse peticiones de componente estáticos sincookies de por medio. Una alternativa puede ser la creación de un sub-dominio para dichoscomponentes.6.6.4.CSS6.6.4.1. Colocar las hojas de estilo al inicioLa colocación de las hojas de estilo en la cabecera (HEAD) en lugar del cuerpo (BODY)acelera la carga de éstas ya que la renderización de la página se realiza progresivamente.6.6.4.2. Evitar las expresiones CSSLas expresiones css son una poderosa (y a la vez peligrosa) manera de establecer laspropiedades css de forma dinámica. Contaron con el apoyo de Internet Explorer desde laversión 5, pero fueron desaprobadas a partir del IE8. Un ejemplo de expresiones css:background-color: expression((new Date()).getHours()? "#B8D4FF":"#F08A00");Estas expresiones son evaluadas en múltiples casos. No solo cuando se renderiza la páginao cuando se redimensiona, sino también cuando en la página se hace scroll o cuando elusuario mueve el ratón sobre la página.6.6.4.3. Optar por <link> en lugar de @importEn IE la directiva @import se comporta de la misma manera que <link> pero en la parteinferior de la página, así que es mejor no usarlo. Ya que, como se ha comentadoanteriormente, una buena práctica es cargar las hojas de estilo en la parte superior (HEAD).
  41. 41. Desarrollo RUP – Consejos y buenas prácticas 41/446.6.4.4. Evitar los filtrosEvitar el uso de AlphaImageLoader completamente y usar el degradado PNG8 en sulugar. En el caso de necesitar usar el AlphaImageLoader obligatoriamente, serecomienda el uso del hack_filter_ para no penalizar a los usuarios de IE7 o superior.6.6.5.JavaScript6.6.5.1. Colocar los scripts al finalEl problema que originan las secuencias de comandos es que bloquean descargassimultáneas. Por lo que se recomienda su inclusión al final de las páginas.Otra alternativa podría ser la carga de elementos en modo diferido pero Firefox no escompatible con ello.6.6.5.2. Externalizar CSS y JavascriptEl uso de archivos externos provoca que las páginas se carguen más rápidamente porque elcódigo javaScript y css se almacenan en la cache por el navegador.Cuando los ficheros javaScript y css se cargan "inline" en los documentos html, éstos sedescargan cada vez que el documento html los solicita lo que reduce el número depeticiones htttp necesarias, pero aumenta el tamaño del documento html.En cambio si el código javaScript y css se externaliza, el tamaño del documento html sereduce sin aumentar el número de peticiones http.6.6.5.3. Minimizar CSS y JavascriptMinimizando los ficheros css y javaScript se eliminan los caracteres innecesarios de estosficheros con lo que se reduce el tamaño de los mismos. Entre otros se eliminan loscomentarios, los espacios en blanco y los saltos de línea. Adicionalmente se puede optarpor la ofuscación de código.Este documento incluye un apartado en el que se detalla la minimización de los ficheros cssy javaScript.6.6.5.4. Eliminar scripts duplicadosEn caso de incluir los mismos scripts en la página, éstos se descargarán dos vecesinnecesariamente, al menos en Internet Explorer, no así en Firefox. Se recomienda que seintenten controlar las peticiones de los scripts para que éstos sean incluidos una única vezpara que la aplicación funcione correctamente en cualquier navegador.
  42. 42. Desarrollo RUP – Consejos y buenas prácticas 42/446.6.5.5. Minimizar el acceso DOMEl acceso a DOM mediante javaScript es lento por lo que se recomienda evitar su uso yseguir las siguientes recomendaciones:• Cachear las referencias a los elementos accedidos.• Cambiar los nodos en modo “offline” y luego añadirlos al árbol.• Evitar fijar el layout mediante javaScript.6.6.5.6. Desarrollar controladores de eventos inteligentesEn ocasiones las páginas resultan menos sensibles debido a que tienen demasiadoscontroladores de eventos asociados a diferentes elementos del árbol DOM, que sonejecutados a menudo. Por ejemplo en el caso de tener una capa con 10 botones, seríarecomendable asociar un evento a la capa que un evento por cada botón.Adicionalmente no se debe esperar al evento onload para empezar a manipular objetos delárbol DOM. Solo se necesita que el elemento a manipular esté disponible en el árbol.6.6.6.Imágenes6.6.6.1. Optimizar las imágenesExisten ciertas maneras de optimizar las imágenes:• Comprobar que las imágenes con extensión gif utilizan un tamaño de la paletacorrespondiente al número de colores en la imagen. Si una imagen usa 4 colores y256 slots en la paleta, se puede mejorar con imagemagick(http://www.imagemagick.org) y el siguiente comando:identify -verbose image.gif• Tratar de convertir las extensiones gif a png y comprobar si se produce un ahorro encuanto al tamaño. Cualquier imagen representada en gif puede ser representada enpng (excepto las animaciones). Para ello existe un comando de imagemagick:convert image.gif image.png• Ejecutar pngcrush (http://pmt.sourceforge.net/pngcrush/) o cualquier optimizador deimágenes png:pngcrush image.png -rem alla -reduce -brute result.png• Ejecutar jpegtran (http://jpegclub.org/jpegtran/) sobre aquellas imágenes de tipojpeg. Esta herramienta realiza diferentes operaciones como rotar, optimizar yeliminar comentarios y otros datos inútiles (como la información exif) de lasimágenes:jpegtran -copy none -optimize -perfect src.jpg dest.jpg
  43. 43. Desarrollo RUP – Consejos y buenas prácticas 43/446.6.6.2. Optimizar los CSS spritesCuando se utilizan sprites de imágenes mediante css para reducir el número de peticionesde recursos se pueden aplicar ciertas recomendaciones para mejorar el rendimiento:• Organizar las imágenes horizontalmente y no verticalmente reduciendo el tamaño dela imagen.• Combinar colores y tonalidades diferentes para mantener un número bajo de colores(ideal que sea inferior a 256 para que se ajuste a PNG8).• No dejar grandes espacios entre las imágenes. Esto no afecta al tamaño de laimagen pero mejora los tiempos de respuesta a la hora de descomprimir la imagenen mapas de bits.6.6.6.3. No escalar las imágenes en HTMLNo utilizar imágenes más grandes de lo necesario porque puedan establecerse la altura yanchura mediante html. Diseñar las imágenes con el tamaño necesario para no tener queescalarlas ya sea para agrandarlas o para reducirlas.6.6.6.4. Hacer el favicon.ico pequeño y cacheableEl favicon.ico es una imagen que permanece en la raíz de su servidor. A pesar de que no sedefina, el navegador realizará la petición de acceso al mismo. Por tanto para mitigar losposibles problemas en el uso del favicon.ico se recomienda:• Tamaño inferior a 1KB.• Establecer la cabecera Expires6.6.6.5. MóvilesExisten algunas recomendaciones en cuanto al desarrollo de aplicaciones web para móvilespero que no se comentan por no ser un ámbito relacionado con el presente documento.6.7. HttpWatchHttpWatch (http://www.httpwatch.com/) es un visor de http que se integra tanto con InternetExplorer como con Firefox. Dicho visor permite realizar un seguimiento de las peticiones http y httpssin salir de la ventana del propio navegador.Entre sus funcionalidades más destacadas se encuentran:• Descifrar el tráfico https• Agrupación de las solicitudes por página• Detección de problemas potenciales• Exportación de datos a csv, xml
  44. 44. Desarrollo RUP – Consejos y buenas prácticas 44/44A continuación se muestra una captura del programa integrado en Internet Explorer

×