Para empezar a trabajar con YUI, lo primero que debes hacer es descargar la librería completa. Desde la página principal de YUI se puede pulsar directamente sobre el botón Download YUI para que nos redirija automáticamente hasta la página de descarga. La versión de YUI que se utiliza actualmente es la 2, aunque la versión en pruebas de YUI 3 ya se ha publicado. YUI 2 se descarga mediante un archivo comprimido que ocupa unos 10 MB.
Una vez descargado, descomprime el archivo en cualquier directorio del sistema y verás que incluye varios directorios. De todos ellos, los más importantes para el programador y diseñador son los siguientes:
docs/: incluye más de 300 páginas de documentación y ayuda sobre todos los componentes de YUIexamples/: incluye casi 300 ejemplos de uso de todos y cada uno de los componentes de YUIbuild/: incluye todos los archivos JavaScript y CSS que se deben incluir en las páginas que utilizan YUI
5.2.1. Componentes CSS del framework YUI
La librería YUI incluye los siguientes cuatro componentes de CSS que se pueden utilizar de forma separada, conjunta o combinada de cualquier forma:
reset.css: conjunto de estilos que eliminan y neutralizan todas las inconsistencias en el estilo por defecto que aplican los navegadores a los elementos HTML.base.css: conjunto de estilos que se pueden aplicar después de neutralizar los estilos por defecto del navegador y que muestran cada elemento HTML de forma adecuada.fonts.css: conjunto de estilos que permiten mostrar el texto con un tamaño consistente en cualquier navegador.grids.css: conjunto de estilos que permiten crear cientos de layouts o estructuras de páginas comunes.
Los componentes CSS de YUI funcionan tanto en el modo quirks como en el modo standards de los navegadores. No obstante, YUI recomienda activar el modo standards utilizando el siguiente DOCTYPE en las páginas:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">5.2.2. Enlazando los archivos del framework YUI
Todas las páginas que hacen uso de los componentes de la librería YUI deben enlazar sus archivos. La arquitectura de YUI es tan modular que permite enlazar únicamene los archivos que necesita cada página y no todos los archivos de la librería, lo que mejora el rendimiento de la aplicación.
Si sólo quieres utilizar uno de los componentes CSS de YUI, solamente debes enlazar una hoja de estilos mediante la etiqueta <link>. Si por ejemplo sólo se quiere utilizar el componente reset.css para inicializar todos los estilos del navegador, los pasos necesarios son los siguientes:
1) Copia el archivo reset.css que se encuentra en el directorio build/reset al directorio en el que guardas todas tus hojas de estilos CSS.
2) Enlaza la hoja de estilos reset.css en tus páginas utilizando la siguiente etiqueta <link>:
<link rel="stylesheet" type="text/css" href="css/reset.css">El valor del atributo href debe contener la ruta completa (absoluta o relativa) hasta el archivo CSS enlazado.
Aunque esta forma de enlazar los recursos CSS de YUI es la más sencilla, también es la más ineficiente. El motivo es que los archivos CSS originales incluyen comentarios, espacios en blanco, saltos de línea y otros elementos que aumentan innecesariamente el tamaño de los archivos.
Por este motivo, sólo se recomienda el uso de los archivos CSS normales cuando el diseñador se encuentra diseñando la página y puede necesitar consultar el contenido de los archivos CSS de YUI. Cuando la página se encuentra terminada, la recomendación es utilizar los archivos CSS comprimidos que proporciona YUI.
Los archivos comprimidos se encuentran en los mismos directorios que los archivos CSS normales. La única diferencia es que los archivos comprimidos añaden el prefijo -min en su nombre, indicando que se trata de una versión minimizada de los archivos CSS normales.
Siguiendo con el ejemplo anterior, para enlazar la versión comprimida de la hoja de estilos reset.css se debe utilizar la siguiente etiqueta <link>:
<link rel="stylesheet" type="text/css" href="css/reset-min.css">Si se utilizan varios componentes CSS de YUI, se sigue el mismo razonamiento para enlazar todas las hojas de estilos. El siguiente ejemplo muestra el caso en el que se utilizan las hojas de estilos reset.css, fonts.css y grids.css:
<link rel="stylesheet" type="text/css" href="css/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/fonts-min.css">
<link rel="stylesheet" type="text/css" href="css/grids-min.css">Como es muy habitual enlazar varias hojas de estilos a la vez, YUI proporciona un método alternativo para hacerlo de forma mucho más eficiente. En concreto, YUI proporciona las hojas de estilos reset-fonts.css y reset-fonts-grids.css por ser las combinaciones de hojas de estilos más habituales. De esta forma, el ejemplo anterior se puede rehacer utilizando una sola etiqueta <link>:
<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css">La hoja de estilos reset-fonts-grids.css combina las versiones comprimidas de las tres hojas de estilos individuales. Además de la reducción en el tamaño total del archivo, la gran ventaja es que sólo se realiza una petición al servidor, en vez de las tres peticiones necesarias en el ejemplo anterior.
Por último, existe otra forma aún más eficiente de enlazar los componentes CSS necesarios. Desde hace unos meses, Yahoo! ofrece la posibilidad de enlazar gratuitamente las hojas de estilos CSS desde sus propios servidores. En efecto, nuestras páginas pueden descargar los archivos de YUI directamente desde los servidores de Yahoo! y de forma completamente gratuita.
A continuación se muestra la etiqueta <link> necesaria para descargar las mismas hojas de estilos del ejemplo anterior directamente desde los servidores de Yahoo!:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">Si sólo se emplean por ejemplo los componentes reset.css y base.css, las etiquetas necesarias se muestran a continuación:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css">Aunque deducir las direcciones completas de cada componente CSS es trivial, YUI proporciona una herramienta gráfica llamada YUI: Configuration and Hosting que genera automáticamente las etiquetas <link> de los componentes CSS seleccionados.
Las ventajas de utilizar los propios servidores de Yahoo! para servir los archivos de YUI son numerosas:
- Yahoo! dispone de miles de servidores repartidos por todo el mundo y la descarga se realiza siempre desde el servidor más cercano al usuario. De hecho, los servidores que proporciona Yahoo! son exactamente los mismos que utiliza Yahoo! en sus aplicaciones.
- Yahoo! sirve todos sus archivos comprimidos mediante el servidor web y con la información precisa para que el navegador los almacene en su cache local. La compresión reduce el tamaño de los archivos CSS hasta un 60% y el control de la cache evita que el usuario tenga que descargar repetidamente el mismo archivo.
- Los servidores de Yahoo! son infinitamente más potentes y fiables que cualquier servidor web propio. Además, la velocidad de transmisión de los archivos también es infinitamente más rápida que la conseguida con cualquier conexión de red propia.
- El servicio es completamente gratuito y permite enlazar cualquier versión actual o pasada de la librería YUI.