DotNetNuke (DNN) es uno de los gestores de contenidos de código abierto, basado en .NET, más extendidos de la red. Una de sus principales características es su fácil instalación y configuración.
Existen multitud de plantillas (skin) gratuitas y de pago, que te permitirán personalizar de mil formas diferentes tu sitio web de DNN. Sin embargo, en ocasiones, necesitamos cosas muy específicas (diseño, navegación…) que hace difícil que una de esas plantillas encaje con nuestras necesidades. La única solución que nos queda en esos casos, es crear nuestro propio skin.
Lo primero que tenemos que tener, es una carpeta en la máquina donde estemos ejecutando DNN (servidor web o máquina de desarrollo), con el nombre de nuestro skin. Por ejemplo:
C:\Inetpub\wwwroot\SitioDNN\Portals\_default\Skins\MiPrimerSkin
Una vez hecho esto, lo siguiente es crear una página html con la estructura que queremos que vaya a tener nuestro skin. Por ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><div class="FormatoPagina">[LOGIN] <div class="EstilosMenu">[MENU]</div> <div class="content"> <div class="EstilosMigasPan">[BREADCRUMB]</div> <div> <div id="ContentPane" runat="server"></div> </div> </div> </div>
Vamos a echarle un vistazo a este código HTML, que por descontado tiene que estar bien formado…
Lo primero que observamos es que he prescindido de las etiquetas <HTML>, <HEAD> y <BODY>. Lo siguiente que vemos es que he puesto en azul unas etiquetas entre corchetes ([LOGIN], [MENU] y[BREADCRUMB])
¿Qué son estas etiquetas y para qué sirven?
Esas etiquetas, conocidas como tokens, son marcas que se sustituirán por referencias a controles de DNN (SkinObjects) cuando se parsee el skin. En el proceso, nuestro HTML se transforma en un control web de ASP.NET (.ASCX) que posteriormente podrá ser modificado como se necesite.
De esta forma, donde hemos puesto la etiqueta [LOGIN] en nuestro HTML, aparecerá un link a la página de validación de usuarios en el ASCX; donde pusimos [MENU] en nuestro HTML, aparecerá el menú de DNN definido para el sitio web; y donde pusimos [BREADCRUMB], aparecerá el control de navegación de migas de pan.
También podemos observar que hemos añadido un DIV (en color rojo), que se ejecuta en el lado del servidor, que es donde DNN permitirá colocar los elementos de contenido cuando se edite una página. También se podría haber puesto la etiqueta [CONTENTPANE] en lugar del DIV para que lo transformara al parsearlo.
¿Que cómo se parsea un skin en DNN?
Para parsear un skin debemos seguir los siguientes pasos:
- En el menú de administración del sitio web de DNN, seleccionar la opción SKINS
- Seleccionar nuestro skin de la lista desplegable y pulsar sobre la opción para parsearlo
- Por último, después de parsear el skin (y por lo tanto de haber generado el .ASCX), aplicamos nuestro skin
Espero que os haya quedado claro y os sirva para introduciros a la creación de skins con DNN.
Hasta la próxima
2 Responses to “Crear un skin sencillo con DotNetNuke”
Agosto 31st, 2010 at 21:05 pm
I’m happy I found this weblog, I couldnt discover any info on this topic matter prior to. I also run a site and if you want to ever severe in a little bit of guest writing for me if possible feel free of charge to allow me know, i’m usually appear for individuals to check out my site. Please stop by and leave a comment sometime!
Enero 12th, 2011 at 10:50 am
Hey, what an excellent data in your website listed here