Manual para Principante en DotNetNuke (Parte 1), DotNetNuke

Si alguna vez utilizaste WinAmp probablemente ya sabrás lo que es un skin, un skin no es más que un conjunto de imágenes y archivos de configuracián que le dicen a una aplicación como debe lucir; y algunas veces, como debe comportarse ante ciertas acciones.

Si poseemos DNN instalado, veremos que la interfaz de la aplicación no es muy llamativa, de hecho, se podría decir que hasta es fea. Pero no teman, gracias a la flexibilidad de la que nos provee DNN somos capaces de cambiar esa interfaz sin mucho esfuerzo; esto gracias a que los desarrolladores detrás de DNN lograron separar con éxito la interfase de los datos; es por ello que somos capaces de alterar el aspecto del sitio sin perder ningun tipo de información.

Es así que mientras nosotros podemos preocuparnos por el contenido y la programación, un grupo de diseñadores pueden escribir el skin que será la cara de nuestro sitio.

Básicamente se provee de dos formas para escribir skins, una editando archivos HTML y utilizando los denominados “TOKENS”, un token es una palabra reservada por DNN para que cuando se procese el archivo HTML se reemplacen esos tokens por controles, quizás esta sea la forma más facil de editar skins ya que no requiere conocimientos de ASP.NET, sólo conocimientos de HTML.

La segunda forma es mediante la utilizacion de controles de usuario escritos en ASP.NET, de extension .ascx; estos quizas sean un poco mas difíciles de editar, ya que poseen información, como el registro de controles, que un archivo HTML no. Pero la gran ventaja es que pueden ser abiertos desde nuestro VS.NET 2005, lo que facilitaría la escritura y además nos proveeria de una vista previa de nuestro skin.

En lo personal recomiendo la segunda opcion, aunque no es muy práctica si se la vamos a dar a un diseñador gráfico, aunque si va acompañada de un buen documento explicando los significados de los tags entonces puede que sea una opción práctica.

Skins en DNN

Si accedemos a la carpeta, C:\Inetpub\wwwroot\DNN\Portals\_default\Skins como se muestra a continuación:

veremos los skins instalados desde el munu Host, si accedieramos a la carpeta “0” tambien encontraríamos una carpeta de skins, pero aquellos instalados a través del menu Admin. Esta diferencia es porque los skins instalados a través del menu Host son válidos para todos los portales, no asá cuando se los instala desde el menu Admin, ya que esos serán validos solo para el portal donde fueron instalados.

A continuación hagamos click en la carpeta DNN-Blue, vamos a ver una lista de archivos como la que figura a continuación:

entre los archivos que figuran podemos apreciar aquellos de extensión html y ascx; en definitiva la gente de DNN nos esta dando en este skin las dos opciones para editar un skin (vamos a utilizar este skin como punto de partida), nos vamos a concentrar en “Horizontal Menu – Fixed Width.htm” ya que primero veremos la edición de este tipo de archivos.

Creando/Editando Skins en formato HTML

Si abrimos el archivo “Horizontal Menu – Fixed Width.html” con nuestro navegador veremos lo que sigue:

Donde podemos apreciar los “tokens” de los que hablamos con anterioridad, cuando veamos ese skin en uso por DNN veremos algo como lo que sigue:

Si accedemos al código fuente del archivo veremos algo como lo que sigue:

...
<TD vAlign="middle" align="left">[LOGO]</TD>
<TD vAlign="middle" align="right">[BANNER]</TD>
…
<TD width="200" vAlign="top" align="left" nowrap>[CURRENTDATE]</TD>
<TD width="100%" vAlign="top" align="center">..:: [BREADCRUMB]::..</TD>
<TD width="200" vAlign="top" align="right" nowrap>[USER]  [LOGIN]</TD>
…

[LOGO], [BANNER], [CURRENTDATE], [BREADCRUMB], [LOGIN]; son sólo algunos de los tokens que DNN nos ofrece. En este skin veremos que ya aparecen ubicados en una tabla, asi que lo que nos quedaría por hacer es editar el código para adaptarlo a nuestra necesidad, ya sea quitando algun panel; un panel es un sector donde los módulos pueden ser agregados; los paneles son identificados por DNN gracias a un ID, por ejemplo dentro del código del archivo podemos ver:

<TD class="leftpane" id="LeftPane" runat="server" valign="top" align="center"></TD>
<TD class="contentpane" id="ContentPane" runat="server" valign="top" align="center"></TD>
<TD class="rightpane" id="RightPane" runat="server" valign="top" align="center"></TD>

Allí lo que vemos son los paneles de contenido, LeftPane por izquierda por ejemplo (la propiedad runat no debería preocuparnos, solo la dejemos; significa que ese contenido correra del lado del servidor), supongamos que no queremos que aparezcan ni el Login ni el usuario actual (debido a que sera sólo una pagina institucional para una promoción por ejemplo), pues bien solo deberemos quitar aquellos lugares donde sus tokens aparezcan:

<TD width="200" vAlign="top" align="left" nowrap>[CURRENTDATE]</TD>
<TD width="100%" vAlign="top" align="center">..:: [BREADCRUMB]::..</TD>
<TD width="200" vAlign="top" align="right" nowrap>[USER]  [LOGIN]</TD>

Sólo deberiamos quitar la linea marcada en rojo y guardar, así nos quedaria:

Hay que recordar que tambien es posible usar hojas de cascada de estilo (css), de hecho en este archivo podemos ver que se hace uso de una en la linea:

<LINK ID="skin" REL="stylesheet" TYPE="text/css" HREF="skin.css" />

Bien, hemos editado, aunque de manera muy elemental el skin basico que trae DNN, en este turorial dare solo lo que se necesita saber como para editar un skin; no voy a dar una clase de diseño ni mucho menos.

Creando/Editando Skins en formato ASCX

La edición de un control es muy sencilla, y puede ser realizada hasta usando el Bloc de Notas (eso es lo que haremos), para lo cual procederemos a abrir el archivo “Horizontal Menu – Fixed Width.ascx”, por lo pronto veremos que el archivo comienza de una manera muy distinta a lo que vimos antes:

<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BANNER" Src="~/Admin/Skins/Banner.ascx" %>
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
…

Lo que estamos viendo es jerga de ASP.NET, no de mucha utilidad si sólo queremos editar un skin, sería como la declaracion de los “tokens”; pero si de muchísima utilidad cuando queramos agregar un módulo en algun lugar determinado y que no sea dentro de un panel. Esto es un poco avanzado pero igual lo vamos a ver.

A continuación lo que sigue es más o menos similar a lo que teniamos en HTML, sólo que ahora tenemos unos tags “extraños”:

<dnn:LOGO runat="server" id="dnnLOGO" />
<dnn:BANNER runat="server" id="dnnBANNER" />

Esos tags, que comienzan con dnn son controles de DNN, lo que antes en HTML teníamos como “tokens”. Quizas parezca complicado, pero ayuda bastante a la hora de ordenar el codigo, además si lo viéramos con VS.NET 2005 podriamos tener una vista previa de como quedaría el skin, en este caso los tags que mostré de ejemplo son aquellos que aparecen ya registrados en la cabecera, esto se puede observar en:

<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>

Donde la “directiva” Register esta registrando el control de usuario llamado “Logo.ascx”; ya se deben estar imaginando que utilizando pueden agragar controles propios o de terceros por “fuera” de DNN, siempre y cuando apunten bien la ruta dentro de la propiedad src.

De hecho si quitaramos alguna directiva de registro, y luego trataramos de utilizar el control que quitamos de las directivas obtendríamos un error de que el control “xxx” no se encuentra registrado.

Igualmente si quitamos todas las directivas Register de nuestro skin, y a su vez nos aseguramos que en ningún lado se utilice ninguno de los controles que estaban en esas directivas; podemos dejar nuestro archivo limpio para empezar a editarlo y luego simplemente agregar los modulos via DNN.

Igualmente que en HTML, los paneles respetan la forma:

<TD class="leftpane" id="LeftPane" runat="server" valign="top" align="center"></TD>

Por lo que no debería presentar ninguna dificultad.

Si por ejemplo quisieramos agregar un control en un lugar muy especial de nuestro skin, solo deberíamos agregar una deirectiva register del nuevo control; por ejemplo:

<%@ Register TagPrefix="dnn" TagName="SOLPARTMENU" src="~/DesktopModules/PageLocalization/MLMenu.ascx" %>

En este caso yo acabo de registrar un control multilenguaje (que descargue) y que permite hacer multilenguaje un menu. Ahora si yo quisiera utilizar ese control solo deberia hacer:

<dnn:SOLPARTMENU runat="server" id="dnnSOLPARTMENU" …/>

Y pegar ese trozo de código dentro de una columna, o donde major me parezca.

Como se pudo apreciar, la creación de skins para DNN no es una tarea compleja, además, DNN nos permite trabajar con los datos mientras en otro lado u otro equipo se dedica a construir el skin que sera el que dará el aspecto a nuestro sitio. Recordemos que en definitiva el skin es el que va a dar la imágen de nuestra empresa, así que mejor ponerle mucho empeño.

Espero que este tutorial les haya servido, por lo menos como para empezar a crear ustedes sus propios skins, aunque no lo crean hay un mercado bastante amplio de empresas buscando gente que pueda diseñar skins para DNN.

Visiten http://www.dnn-hispano.com/ tienen muy buena información, de más esta decirles que en el sitio oficial se pueden encontrar recursos, tutoriales, videos, etc, la dirección es http://www.dotnetnuke.com/.

Saludos desde Córdoba, Argentina.

Datos del Autor

Nombre Maximiliano Santa Cruz
Ubicación Cordoba - Argentina

Actualmente estoy estudiando ingeniería en sistemas, cada vez falta menos :P y trabajo en una empresa que desarrolla software para el mantenimiento de aviones.

Programo en C#, VB.NET, ASP.NET, Action Script 3, Flex, AIR (ex Apollo), HTML, XML, XSL y SQL. Tambien manejo SQL Server 2000/2005, AJAX y estoy dando mis primeros pasos (aún) con Managed Direct X y XNA.

Me gusta escribir aplicaciones que luego puedo distribuir a mis amigos, como asi tambien utilitarios para facilitar las tareas de desarrollo, soy fánatico del anime y los video juegos y me aburren los desarrollos para software "administrativo".