martes, 17 de octubre de 2006

Themes and Skins

Seguro que todos nos hemos preguntado, ¿Themes, Skins y CSS, que es todo esto?¿Existe alguna diferencia entre ellos?¿Realmente son útiles?. Pues bien:

Un tema es un conjunto de reglas que permiten a nuestra aplicación web disponer de un “look and feel” más o menos atractivo, pues bien, en VS 2005 un tema se compone de; hojas de estilo (.css), skins (.skin) y otros recursos como gráficos y/o ficheros JavaScript. Todos estos recursos deben permanecer en un subdirectorio (Ej.: “Theme 1”) dentro del directorio “App_Themes” del site. Algo así:












“Themes” VS “Cascading Style Sheets”
· Los temas(concretamente dentro de los ficheros .skin) pueden definir reglas para controles de servidor e incluso incluir gráficos/imágenes. Además nos ayudan a evitar aquellas tareas tediosas de acceso a un recurso concreto, pe. en la siguiente regla: , el símbolo “~” nos permite indicar el root del site sin necesidad de indicarlo “Hard code” como en situaciones se llega a hacer en las hojas de estilo.
· A una página no se le pueden aplicar más de un tema a la vez mientras que sí más de una hoja de estilo.
· Los temas sólo pueden aplicarse a aquellas propiedades que tienen el valor “true” para el atributo “ThemeableAttribute”.
· Si para un tema han sido definidos tanto “Skins” como hojas de estilo, siempre prevalece el skin en caso de que las reglas/propiedades se solapen a menos que se asigne valor a la propiedad “StyleSheetTheme”, en cuyo caso prevalecerán las reglas de la CSS.
· Una CSS siempre puede ser aplicada a más de un control mientras que los sking sólo se aplican a controles (de servidor) del mismo tipo o a un control en concreto (SkinID).
· Si en una hoja de estilo aplicamos una regla a un elemento de tipo INPUT, esta afecta a todos los controles HTML de este tipo; botones, cajas de texto, cajas de selección y botones de radio, mientras que una regla en un Skin sólo puede aplicarse a un control concreto.
· Los temas pueden ser establecidos:

  1. A nivel de aplicación (en el web.config):
    <configuration>
       <system.web>
          <pages theme="ThemeName">
       </system.web>
    </configuration>
    <configuration>
       <system.web>
          <pages stylesheettheme="Themename">
       </system.web>
    </configuration>
    Si en el elemento <pages> se define en el fichero de configuración “Machine.config” el Theme se aplicara para todas nuestras aplicaciones.
  2. A nivel de página mediante la directiva @Page:
    <%@ Page Theme="ThemeName" %>
    <%@ Page StyleSheetTheme="ThemeName" %>
  3. A nivel de control mediante la propiedad “SkinID”:
    <asp:Calendar runat="server" ID="DatePicker" SkinID="SmallCalendar" />

Luego, no podemos deshacernos de las hojas de estilo porque complementan la funcionalidad global de nuestro “look and feel”.

Ahora a esperar a que a los ficheros de skin incluyan el queridísimo Intellisense.


Comments: Publicar un comentario



<< Home

This page is powered by Blogger. Isn't yours?