Temas y Skins con CSS para Mostrar una Interfaz de Usuario Consistente en ASP .NET 2.0

Una primera aproximación para lograr un interfaz de usuario consistente en ASP NET son las hojas de estilo CSS (Cascading Style Sheets), que nos ofrecen una gran mejora al centralizar la información sobre el estilo que nuestros Controles Web lucirán en archivos de hoja de estilos, en lugar de estar poniendo la información de estilo directamente en las propiedades de los controles, colocamos el nombre de estilo CSS. La ventaja de esta aproximación es que al cambiar el archivo de hojas de estilo, el cambio se verá reflejado en todos los controles que utilicen dicha hoja de estilos. La desventaja es que aún hay que colocar en cada propiedad de los controles el nombre del estilo CSS.

Para superar las limitaciones de las hojas de estilo CSS, utilizaremos Temas y Skins.

Tema.- Un tema es una colección de valores de propiedades que nos permiten definir la apariencia de páginas y controles, para luego aplicar esta apariencia a través de toda la aplicación Web asegurando la consistencia de la interfaz de usuario.

Los temas están compuestos por un conjunto de elementos como: Skins, hojas de estilo (CSS), imágenes y otros recursos; como mínimo un tema debe contener skins; los temas se crean en carpetas especiales del Sitio Web (App_Themes).

Skin.- Son archivos con extensión .skin y contiene valores para propiedades de controles individuales como GridView, DetailsView, etc. En la definición del skin se indica a qué control le corresponde.

Ejemplo.- El ejemplo que presentamos es bastante sencillo para ver como agregar temas a un Sitio Web.

1. Agregar un nuevo archivo de hoja de estilos, le podemos poner como nombre “Estilos.css”, en este archivo definimos los estilos que tendrá nuestro sitio web por ejemplo:

.SelectedDayStyle
{
    background-color: #41519A;
    font-weight: bold;
    color: White;
}

Así todos los estimos que vamos a necesitar para definir nuestros skins.

2. Luego agregamos un nuevo skin mediante, agregar nuevo elemento de Visual Studio, como nombre le podemos poner “GridView.skin”, visual estudio nos alertara que estamos intentando crear un skin dentro del sitio web, y nos sugiere crear una carpeta especial para los temas a lo cual respondemos que si; si todavía no existía ningún skin, visual Studio creará la carpeta “App_Themes” y dentro de esta carpeta creará un tema con el mismo nombre del skin, y el nuevo skin dentro del tema, el contenido del skin es similar al siguiente:

<asp:GridView runat="server" CssClass="DataWebControlStyle">
     <AlternatingRowStyle CssClass="AlternatingRowStyle" />
     <RowStyle CssClass="RowStyle" />
     <HeaderStyle CssClass="HeaderStyle" />
     <FooterStyle CssClass="FooterStyle" />
     <PagerStyle CssClass="PagerStyle" />  
</asp:GridView>

Todos los estilos a los que se hace referencia en el skin deben estar previamente definidos en el archivo de hojas de estilo.

Este skin se encargará de poner automáticamente los estilos a los GridView de nuestro sitio web.

3. Una vez creado el tema con sus respectivos skins, es hora de aplicar los temas a nuestro sitio web, podemos aplicar los temas página por página o aplicarlo a todo el sitio web, mediante el archivo de configuración, utilizaremos la segunda forma para lo cual tenemos que agregar en el archivo de configuración la siguiente línea, suponiendo que el tema se llama “Estandar”.

<pages styleSheetTheme="Estandar" />

4. Finalmente tenemos que hacer una referencia al archivo de hojas de estilo desde nuestra página:

<head runat="server">
     <title>Demos Skins</title>
     <link href="Estilos.css" rel="stylesheet" type="text/css" />
</head>

Ahora dependiendo de los skins que hayamos creado para los temas al agregar los controles a nuestra página tomarán automáticamente los estilos del tema.

Temas

Descargar Ejemplo: Ejemplo Temas y Skins
Favor de darle clic derecho y guardar destino como…, una vez descargado cambiar la extensión a .zip, y descomprimirlo (todo esto porque no me dejan subir archivos zip).

De la siguiente página se puede descargar un sitio web con algunos temas listos para utilizar: .Net Treats & Tricks

4 comments so far

  1. Sergio on

    bonito articulo, dime no conoces de algun lugar donde hayan temas diseñados para descargar y usar, no se tu pero en mi caso no soy muy bueno con la facha de las paginas

    salu2
    Sergio

  2. eloyparedes on

    Hola Sergio, cuanta razón tienes, mis dotes como diseñador son casi nulos, me gusta desarrollar soluciones, pero para la parte visual, prefiero utilizar los servicios de un diseñador, el problema es que en muchas ocasiones no se puede hacer esto, así que los temas previamente diseñados nos pueden sacar de apuros.

    Lamentablemente haciendo una búsqueda rápida, solo pude encontrar el link que puse al final del artículo, donde se puede descargar un proyecto con 8 temas.

    A los que conozcan una librería de temas más amplia para descargar, les pido que pongan los links en los comentarios, nos servirá mucho a todos lo que no somos diseñadores.

    Saludos

  3. adonis on

    pero no encuentro skines para mi msn

  4. Silvio Zapata on

    Muchas grasias por tan valioso aporte
    aprendi mucho de él

    Silvio


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: