HAZ CLIC EN EL TITULO DEL ARTICULO PARA VERLO MEJOR (SIN CORTES)
En el art¡culo anterior escrib¡ acerca de c¢mo construir un Master Page que funcione con MOSS. Tambi‚n les cont‚ sobre los controles y algunos tips, adem s del Minimal Master Page y de mi xMP. Falt¢, por supuesto, un gran detalle: los estilos visuales, o archivos CSS.
Antes de empezar
Todo lo que escribir‚ respecto a CSS es, casi siempre, dentro del contexto de MOSS (o SharePoint) en todo caso. No soy un experto en dise¤o web, ni tampoco en CSS. Lo que voy a escribir es lo que he aprendido desde MOSS Beta 2 y que me ha servido hasta el dia de hoy para construir sitios web MOSS altamente personalizados, visualmente hablando.
Background teorico (y un poquito de historia)
Hace mucho tiempo atr s, en una galaxia muy lejana. las p ginas web serv¡an para mostrar b sicamente texto y algunas im genes. Las personas recib¡an informaci¢n tal como noticias, art¡culos, o informes mediante este nuevo medio que Tim Berners Lee llam¢ la “World Wide Web” o WWW. Como la tecnolog¡a era nueva, casi todos ‚ramos felices con lo que hab¡a. Estas p ginas se escrib¡an con un lenguaje llamado HTML que b sicamente define elementos mostrados en la p gina de acuerdo al orden en que son llamados a la hora de escribirla (o “programarla”), adem s de poder definir el color y un poco los estilos visuales de estos elementos, a decir: color de textos, tablas filas, columnas, fondo, imagen, etc.
Esto funcionaba bien para el uso inicial de la web: p ginas simples orientadas en su mayor¡a al texto. Pero al popularizarse la tecnolog¡a, se empez¢ a elaborar cosas un poco mas complejas: animaciones, layouts avanzados asistidos por dise¤adores, etc. HTML fue evolucionando para dar soporte a mas elementos, (“etiquetas”), y los navegadores los acompa¤aron en esto.
Luego, la web se convirti¢ en un medio de comunicaci¢n masivo, visitado por millones de personas diariamente, que mostraba contenidos din micos, dando soporte ya no solo a p ginas, sino a aplicaciones, portales, extranets. el t‚rmino “web” se populariz¢ y pas¢ a ser una manera m s de poder extender una aplicaci¢n completa hacia el usuario, d ndole acceso remoto desde pr cticamente cualquier lugar, con tan s¢lo un navegador web. Aplicaciones corporativas, aplicaciones de terminales remotos, aplicaciones de tr mites en l¡nea (formularios), aplicaciones de audio/video. en fin.
Todas estas aplicaciones y p ginas din micas eran (y son actualmente) generadas por un servidor, aplicando l¢gica visual y funcional mediante la utilizaci¢n de una serie de lenguajes de programaci¢n, cuyo resultado de procesamiento es finalmente enviado hacia el navegador del usuario en formato HTML. Visual y funcionalmente este contenido mostrado es espectacular, pero es un spaghetti a la hora de mantener/editar/depurar: lo que define la estructura (tal como una etiqueta de columna) ten¡a codificada adem s del contenido en s¡, a sus atributos visuales, como por ejemplo, color de fondo, de texto, o ancho total (quienes hayan visto ASP cl sico o JSP sabr n a lo que me refiero). Si un dise¤ador web quer¡a modificar un elemento netamente visual de la p gina, ten¡a que entrar necesariamente a trabajar junto con el c¢digo que define la estructura, contenido y formato, lo que ciertamente pon¡a en riesgo la integridad de la p gina, y hasta la funcionalidad: una etiqueta pasada por alto, un borr¢n de m s, y fue. Funcionalidad rota, contenido inservible. Forma y fondo juntos hasta la muerte. Carpe noctem web designer!!
CSS (Cascading Style Sheets)
Afortunadamente a alguien se le ocurri¢ la sabia idea de separar forma de fondo. Regresar al HTML para definir contenido, pero poner en otra capa el tema visual. De este modo, los autores de contenido tendr¡an que encargarse solamente de crear contenido, y los dise¤adores web se encargar¡an de definir c¢mo luce, donde va, y c¢mo va ordenado este contenido. Esta capa extra se conoce como Hoja de Estilos en Cascada, o Cascading Style Sheet (CSS).
Veamos c¢mo se defin¡an los estilos visuales en una p gina web de los primeros tiempos
Ver s que ese elegante fondo verde est definido como color de la celda, directamente en el mismo archivo HTML. Si quisiera hacer un cambio de color, tendr¡a que editar el archivo HTML, pudiendo accidentalmente alterar el contenido
Un archivo CSS es un archivo de texto plano que tiene definidos ciertos formatos visuales agrupados, por ejemplo, uno de estos grupos (formalmente llamado “clase”) podr¡a llamarse “.fondo-verde” y especificar un tipo de fuente determinado (Arial?, Verdana?, Courier?, cual te provoca?), su tama¤o (10pt?, 12pt?), su color, su posici¢n relativa al borde de la p gina, o relativa a la etiqueta HTML pr¢xima, su visibilidad, su borde, sus m rgenes. en fin. De modo que en lugar de editar el estilo visual en el mismo documento HTML, asocio este archivo CSS al archivo HTML, y adem s asocio las etiquetas HTML que yo desee con los estilos definidos en el CSS, as¡
NOTA: esta no es la £nica manera de incluir estilos en un documento HTML. Existen varias maneras de hacerlo, pero creo que de este modo se produce una separaci¢n clara entre las capas HTML y CSS
Te das cuenta que conseguimos el mismo resultado? Pero hemos separado las capas HTML y la capa de dise¤o (que define, entre otras cosas, el color). Y la magia la hace el famoso archivo llamado en este caso estilos.css, que tiene el siguiente c¢digo:
Este c¢digo tiene instrucciones CSS. Si buscas en internet podr s encontrar informaci¢n de c¢mo utilizarlo.
Entonces es claro que ahora un dise¤ador web puede dedicarse a modificar el c¢digo CSS (que est en el archivo CSS), mientras que los editores de contenido o de formato se pueden encargar de lo que les corresponda. Adem s, si aprendes a utilizar CSS, podr s lograr efectos espectaculares, que simplemente no se pod¡an lograr (al menos tan “elegantemente”) con el formato visual limitado del HTML.
Para cerrar este punto, puedes asociar m£ltiples hojas de estilos a un documento HTML, de modo que si un estilo no se encuentra en una, se buscar en otra, y as¡ sucesivamente. El orden en que son referenciadas las hojas de estilos define la precedencia de un estilo sobre otro que se encuentre definido con el mismo nombre en otra hoja de estilos. El £ltimo estilo referenciado ser el que sea aplicado efectivamente de modo incremental, tomando un comportamiento de “cascada” (de ah¡ el nombrecito).
OK, y SharePoint?
Que crees. SharePoint utiliza CSS en sus p ginas. En el post anterior a este expliqu‚ c¢mo est n formadas las p ginas en SharePoint, y c¢mo crear un propio Master Page. pero sin estilos visuales!! Ahora veremos c¢mo darle vida a ese Master Page via CSS. Hang on!!
Primero, aterricemos en MOSS. Lo que pasa es que no es tan f cil el manejo de Master Pages en WSS, al menos fuera de la caja, y todo este tema de branding se da mucho mas fuerte en MOSS que en WSS, as¡ que ac nos quedamos -aunque, ciertamente, algunas partes de lo que viene a continuaci¢n puede aplicar tambi‚n a WSS, pero no har‚ distinciones en ello.
Los Master Pages que trae MOSS utilizan sus propios CSS, en algunos casos un master page puede utilizar no solo uno, sino varios CSS. En el caso del Master Page que MOSS utiliza por defecto en los sitios de colaboraci¢n (default.master), MOSS emplea un archivo en particular y MUY importante llamado CORE.CSS
CORE.CSS
CORE.CSS es un archivo CSS que se encuentra en el sistema de archivos de los servidores Web Front-End de MOSS, en la ruta C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTS<lcid>STYLESCORE.CSS (donde lcid es el c¢digo regional: 3082 si los binarios son en espa¤ol, 1033 si est n en ingl‚s, etc.), el cual es utilizado como base para casi todos los estilos visuales de MOSS, tanto para las p ginas de vista al usuario final, p ginas administrativas, p ginas de listas, de vistas de formulario, etc. Puedes encontrar una gu¡a de las clases CSS que afectan a determinadas zonas del Master Page por defecto de MOSS en este post. Adem s, si tu inicias una modificaci¢n (o creaci¢n) de Master Page a partir de default.master, y asocias tu propio archivo CSS a este nuevo Master Page, y no modificas *la totalidad* de estilos, entonces el resto ser n aplicados a partir de CORE.CSS. Es decir, primero se aplicar n TUS estilos y luego los de CORE.CSS (cascada, recuerdas?). En conclusi¢n: CORE.CSS es un archivo cr¡tico en MOSS, y no debe ser removido ni modificado, ya que esto no es soportado ni tampoco recomendado.
Incluir archivos CSS adicionales
Entonces, si no debemos tocar CORE.CSS, tenemos dos opciones:
- Hacer una copia de ‚ste, ej: CORE-COPY.CSS, y modificarlo, asoci ndolo por supuesto al Master Page deseado, o de otro modo
- Incluir un archivo CSS totalmente distinto, empleando clases propias y alejarnos de las clases que trae MOSS por defecto.
Hacer una copia de CORE.CSS
Esto es bastante simple. Entra a la carpeta donde se encuentra CORE.CSS y realiza una copia del archivo, en la misma carpeta.
Asumiendo que esta nueva copia se llama CORE-COPY.CSS, debes asociarla a tu Master Page del siguiente modo:
1. Abre tu sitio SharePoint desde SharePoint Designer
2. Ve a la carpeta _catalogs/masterpage (esta es la ruta virtual expuesta desde la base de datos para el Master Page Gallery)
3. Abre alg£n Master Page, desprotegi‚ndolo (check-out) -puedes abrir default.master para empezar
4. En el c¢digo, ubica el control <SharePoint:CssLink runat="server"/> y posiciona el mouse ah¡.
5. En el cuadro de propiedades, escribe el URL que referencia a CORE-COPY.CSS, as¡
NOTA: esta ruta “virtual” en realidad referencia al archivo CORE-COPY.CSS almacenado en C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTS<lcid>STYLESCORE-COPY.CSS. Es de este modo como se especifica la relaci¢n de un CSS alojado en disco con las p ginas de MOSS.
6. Si cambias a la vista de dise¤o, ver s que se refresca la pantalla, y si verificas el c¢digo, ver s que la etiqueta mencionada en el paso 4, ahora luce as¡:
<SharePoint:CssLink runat="server" DefaultUrl="/_layouts/3082/styles/CORE-COPY.CSS"/>
7. Guarda los cambios, y aprueba el Master Page -hey! No modifiques default.master!! guarda una copia, como MyDefault.master o algo as¡.
8. Ahora aplica tu Master Page al sitio.
Notar s que el sitio luce exactamente igual, y esto es l¢gico, ya que CORE-COPY.CSS hasta este momento no ha sido modificado, y es exacto a CORE.CSS.
Lo bueno de esto es que ahora podr s modificar CORE-COPY.CSS desde el disco. Yo recomiendo hacerlo con SharePoint Designer ya que tiene una especie de IntelliSense para CSS, muy £til. De este modo, tu personalizaci¢n se ver reflejada inmediatamente al salvar los cambios en CORE-COPY.CSS
Si ya abriste CORE-COPY.CSS y te diste cuenta que son mas de 1400 l¡neas y no entiendes nada, este post te dir qu‚ significa cada estilo. Heather Solomon tambi‚n ha publicado una excelente gu¡a de los estilos de CORE.CSS
Ventajas:
- Debugging r pido de estilos. Los cambios son reflejados autom ticamente en el sitio.
- La implementaci¢n es soportada -recuerda que NO es soportado alterar CORE.CSS
Desventajas:
- Debes desplegar el archivo CSS en todos y cada uno de los servidores Web Front-End de la implementaci¢n
- En un escenario como este, mantener la consistencia entre versiones de un archivo alojado en disco de muchos servidores Web de Front-End puede resultar un problema
- El backup del archivo es manual y no lo incluye ninguna herramienta de backup/restore de MOSS
En conclusi¢n, utilizar un CSS de este modo es el modo mas pr ctico para probar tus propios estilos r pidamente, aunque una vez terminadas las pruebas/debugging es recomendado publicarlo NO en el sistema de archivos, sino almacenarlo en la base de datos de contenido, del siguiente modo:
1. Ingresa via web a la Biblioteca de Estilos de la colecci¢n de sitios donde est tu Master Page personalizado (http://tu_sitio_moss/Style%20Library/Forms/AllItems.aspx)
2. Carga el archivo CSS personalizado -en este caso CORE-COPY.CSS. Realiza todo el proceso de protecci¢n (check-in), aprobaci¢n y publicaci¢n.
3. Ahora nuevamente abre tu sitio SharePoint desde SharePoint Designer.
4. Ve a la carpeta _catalogs/masterpage (el Master Page Gallery donde est su Master Page)
5. Abre tu Master Page (el mismo que modificaste antes para incluir tu CSS -dale chek-out y toda la historia)
6. Ubica la l¡nea de
<SharePoint:CssLink runat="server" DefaultUrl="/_layouts/3082/styles/CORE-COPY.CSS"/>
7. Reempl zala por la siguiente:
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/CORE-COPY.CSS%>" runat="server"/>
8. Salva nuevamente los cambios y aprueba tu Master Page. Notar s que la p gina permanece intacta con relaci¢n a los cambios que tu hayas realizado en CORE-COPY.CSS
Lo que has hecho, es utilizar otro control que te permite referenciar a CORE-COPY.CSS ya no desde el disco, sino desde la Biblioteca de Estilos de la colecci¢n de sitios, lo que quiere decir, desde la base de datos.
Ventajas:
- Despliegue unificado. S¢lo necesitas realizar esto una vez. No es necesario hacerlo varias veces en caso tengas varios servidores Web de Front-End.
- El archivo est en la base de datos, de modo que est incluido en el backup/restore de una colecci¢n de sitios, mediante las diversas herramientas de MOSS.
- El control referencia a la Biblioteca de Estilos de un modo relativo, no mediante una ruta absoluta, de modo que si tu migras esta colecci¢n de sitios a otro servidor, o a una ruta distinta de la original mediante una operaci¢n de backup/restore, los estilos visuales permanecer n aplicados (en tanto el backup/restore sea de todo el contenido de toda la colecci¢n de sitios).
Desventajas:
- El debugging es lento. En caso necesites variar estilos, deber s modificar el archivo realizando todo el proceso de publicaci¢n (check-out, modificaci¢n, check-in, aprobaci¢n, publicaci¢n)
Yo dir¡a que esta es la £nica desventaja, por otro lado me parece la estrategia mas recomendada para aplicar estilos visuales.
Por otro lado, esta desventaja puede ser eliminada, ya que en la misma p gina donde elegimos un Master Page (http://tu_sitio_moss/_Layouts/ChangeSiteMasterPage.aspx) podemos asociar un CSS alternativo, que se aplicar primero que el CSS que has asociado a tu Master Page.
Aunque este CSS tambi‚n deber estar almacenado (idealmente) en la Biblioteca de Estilos, por lo menos puedes tocarlo y no meterte con los estilos que ya definiste, por ejemplo, en CORE-COPY.CSS.
De este modo podr s poner en este CSS alternativo las mismas clases que quisieras modificar de CORE-COPY.CSS, y los cambios que realices se aplicar n, ya que el orden de la cascada es el siguiente:
Se entiende? As¡ tengas los mismos estilos en los tres archivos, siempre se aplicar n primero los especificados en la direcci¢n de CSS alternativa, luego los especificados en el control de SharePoint en tu Master Page, y por £ltimo los de CORE.CSS.
Utilizar un CSS totalmente distinto
Todo lo anterior (hacer una copia de CORE.CSS) funciona a la perfecci¢n cuando partes de un Master Page basado en default.master, pero si quisieras aplicar tus propios estilos a un Master Page basado por ejemplo, en mi xMP, esto no te servir .
Por que?! Porque a menos que las etiquetas HTML, ASP.NET y controles SharePoint de tu Master Page llamen a las mismas clases que son llamadas desde default.master hacia CORE.CSS (o mejor dicho, CORE-COPY.CSS), tendr s que definir tus propias clases y asociarlas a tu nuevo Master Page.
Ejemplo: MyDefault.master utilizando CORE-COPY.CSS
Aqu¡ notamos que las clases llamadas son definidas en CORE-COPY.CSS y son las mismas definidas en CORE.CSS
Cuando utilices el Minimal Master Page, o el xMP, no tendr s estas referencias a clases, y a menos que las copies de, por ejemplo, default.master, de nada servir que trabajes personalizando una copia de CORE.CSS
Es por esto, que si quieres que tu sitio luzca, por ejemplo, as¡
(http://www.westernaustralia.com -MOSS baby, MOSS!)
ser mejor que empieces de CERO a partir de xMP y que a cada elemento en la vista de c¢digo le asocies clases creadas por ti, y que utilices un CSS creado por ti, ya no a partir de CORE.CSS, sino uno totalmente nuevo, definiendo las clases que TU crees, as¡
Asocias al Master Page un archivo CSS totalmente nuevo (misEstilos.CSS??), primero a modo de debugging en el disco, luego cuando hayas terminado, a la Biblioteca de Estilos. Tu archivo CSS deber tener entonces £nicamente las clases que tu definas (como .fondoBanner, por ejemplo). Por los estilos que definen las p ginas administrativas, ni te preocupes (a menos claro, que quieras cambiarlos tambi‚n), siempre estar CORE.CSS como “fondo” o “piso” para los estilos que no definas -lo que ocurre realmente es que las p ginas administrativas, o p ginas “_layouts”, normalmente no son personalizadas (no est recomendado y no s‚ exactamente si est soportado), de modo que tu Master Page ser aplicado al sitio visible para los usuarios, mientras que las p ginas administrativas siguen utilizando su Master Page por defecto (application.master), entonces realmente no tiene nada que ver una cosa con la otra.
Conclusiones
- MOSS emplea extensivamente CSS en los Master Pages que utiliza
- Existen al menos tres capas de CSS, teniendo mayor prioridad la hoja CSS alternativa, luego la(s) asociada(s) al Master Page, y por £ltimo CORE.CSS.
- No debes modificar de ning£n modo CORE.CSS, nunca.
- Luego de hacer debugging y pruebas de tu CSS en disco, p salo a la Biblioteca de estilos del sitio.
- Para personalizaciones muy avanzadas, es recomendable no basarte en default.master, sino en un Master Page base, tal como xMP, o el de Heather, y crear tus propios estilos.
Con este art¡culo (y algunos anteriores) concluyo una serie de art¡culos dedicados al Branding de MOSS. Creo que, sobre todo, este art¡culo y el anterior, explican de manera clara y amigable (eso espero 
) los tips de c¢mo personalizar una implementaci¢n de MOSS. Como mencion‚ al iniciar la serie, estos tips son los que yo he venido aprendiendo desde Beta 2 y que me han permitido personalizar profundamente sitios MOSS. Adicionalmente, mucha de esta informaci¢n est publicada de modo formal en MSDN y TechNet.
Referencias
Gu¡a CSS de SharePoint (Core.css): /jeanmarc/archive/2007/07/20/3201.aspx
CSS Reference Chart for SharePoint 2007: http://www.heathersolomon.com/content/sp07cssreference.htm
Branding SharePoint – Part 1: Designing your SharePoint Site – http://www.heathersolomon.com/blog/articles/brandsppart1.aspx
Branding SharePoint – Part 2: Creating the Design in SharePoint – http://www.heathersolomon.com/blog/articles/brandsppart2.aspx
Master Page debugging 1: Place Holders – /jeanmarc/archive/2007/09/14/5828.aspx
Espero que sirva!
-.M.-
jeanmarc