Gua Para realizar Plantillas y Mdulos para DOTNETNUKE

Junio, 2008

ID Proyecto Creado por Ultima revisin Revisado por

DotNetNuke Leomarys Figueroa 10/06/2008

REVISIONES:
Fecha 10/06/2008
26/06/2008

Autor(es)
Leomarys Figueroa Javier Kovacs

Comentarios
Creacin del documento Revisin del documento

DOCUMENTOS RELACIONADOS:
Titulo Ubicacin

USUARIOS:
Usuario

Tabla de contenido
1. DotNetNuke 2. Introduccin a los Skins 3. Introduccin a los Mdulos 4. Hojas de estilo 5. Disear el Skin 6. Vista de un diseo de plantilla HTML 7. Disear un mdulo 8. Vista de un diseo de mdulo 9. Preparacin del para subirlo al DotNetNuke 10.La herramienta DotNetNuke (Mdulos) Ingresar al DotNetNuke Panel de control Cargar un Skin Edicin de mdulos 4 4 4 5 5 7 11 11 13 17 17 18 26 27

DotNetNuke
DotNetNuke es un sistema para hacer pginas web de tipo portal. Incluye un parte pblica, a la que acceden los visitantes y una privada, a la que acceden los administradores de la pgina, para editar los contenidos de la parte pblica.

Introduccin a los Skins

Un Skin permite al diseador crear interfaces ricas en diseo que se integran de forma transparente con la aplicacin de portal con el objetivo de producir un sitio atractivo para el cliente. El Trmino Skin se refiere a una arquitectura de software que ofrece una forma de separar la lgica de la aplicacin y el contenido de su presentacin. El Uso de Skins implica el uso de "Plantillas" en las cuales es donde realmente se separan los atributos de la lgica de la aplicacin y se definen los espacios para la distribucin de nuestro contenido y la ubicacin de los mdulos en el site. Posteriormente un motor "inteligente" se encargar de ensamblar todos los ficheros en un paquete final. *Ms adelante se explicar el proceso de creacin de una plantilla, realmente solo son necesarios ciertos conocimientos de HTML Bsico y el objetivo es que en breve sea capaz de crear sus propios skins y aplicarlos en sus sitios.

Introduccin a los Mdulos

Los mdulos son piezas del programa que ofrecen soporte a funcionalidades especficas para los usuarios del portal. La versin actual de DotNetNuke dispone de 24 mdulos para realizar tareas diversas como gestin de usuarios, calendario de eventos, banners, noticias, etc. Adems, existen otros mdulos gratuitos, ofrecidos por portales que tratan sobre DotNetNuke y tambin algunos de pago que ofrecen ciertas empresas y desarrolladores. Los mdulos pueden instalarse, desinstalarse y configurarse siempre que se quiera, para dotar al portal de las funcionalidades que necesitamos en cada momento. Si quiere utilizar estilos css, adalos todos en un fichero llamado skin.css y colquelo en el raz del skin.

Entre los mdulos disponibles en la versin inicial se encuentran los siguientes: 1. Gestin de cuentas 2. Noticias o novedades 3. Gestin de banners 4. Contacto, que ofrece la posibilidad de enviar correo a personas o grupos de personas 5. Foros de discusin, con temas configurables 6. Gestin de documentos, con opcin a descarga o visualizacin 7. Calendario de eventos 8. FAQs 9. Links 10.Bsquedas 11.Encuestas

Crear hojas de estilo

El software utiliza una especificacin de hojas de estilo en cascada que proporciona numerosas ventajas al diseador. Utilice CSS siempre que pueda para establecer imgenes de fondo, colores, tipografas etc.

Disear el Skin
Puede crear diseos sin ningn tipo de limitacin. Habitualmente se realizan los prototipos iniciales utilizando herramientas profesionales de tratamiento de imgenes ("Adobe Photoshop" u otros paquetes). Una cosa que se ha de tener en cuenta es que cuando creemos el skin, se han de incluir todos los elementos del interface en el diseo. Seleccionar un Editor de HTML Y Crear La Plantilla Si tiene conocimientos bsicos de HTML, de tablas y de CSS, podr crear un Skin. Un editor como "Macromedia DreamWeaver" o Microsoft "FrontPage" o "HotMetal" etc. lo hace particularmente fcil pero de hecho es HTML y podra crearlo con el bloc de notas si conoce su sintaxis.

Ud. Crear una pgina llamada por ej. dana_index.htm y dentro incluir los estilos y el diseo, en este se colocaran los tags o token para reservar los espacios donde Irn los mdulos. Ejemplo: Donde necesite un espacio para el contenido, colocar entre DIV: <DIV ID="ContentPane" runat="server"></div> Donde quiera que aparezca un espacio para un top panel de men pondr entre DIV: <DIV ID="TopPane" runat="server"></DIV>. Donde necesite un espacio para men, colocar entre DIV: <DIV ID="MenuPane" runat="server"></DIV> Donde necesite un espacio para el banner, colocar entre DIV: <DIV ID="BannerPane" runat="server"></DIV> Donde necesite un espacio para el panel izquierdo, colocar entre DIV: <DIV ID="LeftPane" runat="server"></div> Donde necesite un espacio para el panel derecho, colocar entre DIV: <DIV ID="RightPane" runat="server"></div> Donde necesite un espacio para el footer, colocar entre DIV: <DIV ID="FooterPane" runat="server"></div>

Estos son los mas usado sin embargo, en la plantilla debe existir al menos un tags de ContentPane. Los otros token pueden usar nombres referenciales de su preferencia, siempre y cuando se construyan entre DIV y comillas manteniendo las maysculas para el inicio de la palabra tanto en la referencia como en la palabra Pane y minsculas para el resto de la palabra seguido del comando runat="server".

Ejemplo: <DIV ID="NombretPane" runat="server"></div>

Vista de un diseo de plantilla HTML (Paso 1)

Diseo de Plantilla HTML

Vista de un diseo de plantilla HTML (Paso 2)

Ubicar los Tags en los espacios correspondientes de nuestra plantilla

TopPane

MenuPane

BannerPane

"LeftPane" / "CenterPane" / "RightPane" / "ContentPane" / "FooterPane"

* Al final nos quedar una plantilla estructurada con las identificaciones de los tags.

Disear un mdulo
De la misma manera que creo la plantilla (skins), usted crear una pgina llamada por ej. grisblanc_txt_title.htm que ser el nombre referencial en Nuke a la hora de asignarlo y dentro incluir los estilos (css) y diseo, en este se colocaran los tags o token entre corchetes para reservar los espacios donde Irn los mdulos. En el caso de los mdulos los Tags deben llevar una indicacin necesaria para que aparezcan los mens desplegables para editar los contenidos del mismo una vez estn siendo utilizados.

Vista de un diseo de mdulo

Ubicar los Tags en los espacios correspondientes de nuestro contenedor

1) Para ubicar el titulo de nuestro modulo y a su lado el indicador para el men desplegable de edicin del modulo colocamos: <DIV>[SOLPARTACTIONS][TITLE]</DIV>

2) Para ubicar el contenido de nuestro modulo y a su lado el indicador para el men desplegable de edicin de contenido: <div id="contentpane" runat="server"></div> <div>[ACTIONBUTTON:1]</div>

* Se pueden crear todos los diseos de mdulo se necesiten

Preparacin del contenido para subirlo al DotNetNuke

Hasta ahora hemos hablado de Skin, Plantillas y Modulos. Estos archivos deben estructurarse de una forma especfica para que la aplicacin pueda reconocerlos y hacer posible la estructura esttica de la pgina. Debemos realizar un archivo .ZIP que contenga en su raz todos los archivos html, imgenes y Css que ha utilizado en su Skin, plantilla o mdulo. La estructura es la siguiente: Dentro de una carpeta identificada deben existir todos los archivos HTML y estos a su ves organizados en carpetas identificadas como containers y skins

Dentro de la carpeta de containers deben existir los HTML de todos los diseos de mdulos que necesitemos ms la hoja de estilo aplicada en ellos y su carpeta de imgenes correspondiente. La hoja de estilo debe identificarse como cantainer.css. Los archivos de los mdulos si se pueden nombrar con referenciales.

Dentro de la carpeta de skins deben existir los HTML de todos los diseos de plantillas que necesitemos ms la hoja de estilo aplicada en ellos y su carpeta de imgenes correspondiente. La hoja de estilo debe identificarse como skin.css. Los archivos de las plantillas si se pueden nombrar con referenciales.

Una vez nombradas y separadas las carpetas de containers y skins debemos crear los archivos comprimidos para obtener un solo archivo que ser el que se cargar en el DotNetNuke (DNN) Se crea un .zip de los archivos de la primera carpeta containers y se renombra con este mismo nombre, luego se crea otro .zip de los archivos de skins y se renombra con este mismo nombre y luego de estos dos .zip se crea un tercer .zip con un nombre referencial es ltimo ser el que se subir al DNN.

1.

Los .zip se deben crear con el contenido de la carpeta sin incluir la misma Ejemplo: Paso 1:

Paso 2:

Paso 3:

De esta manera ya tendramos listo el archivo a cargar en DotNetNuke.

La herramienta DotNetNuke (Mdulos)

Ingresar al DotNetNuke
Una vez tengamos el dominio de nuestro site http://prueba.danaatencion.com/ se nos muestra un ejemplo de site con contenidos y estilos propios del DNN, estos posteriormente sern modificados para obtener la apariencia que necesitamos.

Se debe ingresar al site como administrador o con un usuario que cuente con los permisos necesarios para poder manipular todos los parmetros de edicin.

Panel de control
Una vez dentro como administrador o usuario con permiso de edicin, encontraremos las herramientas que nos permitirn ajustar el site al estilo que necesitamos. Nuestra herramienta principal ser el panel de control, esta estar ubicada en la parte superior. Esta contiene 5 secciones de edicin la cual se Irn describiendo a travs del documento:

1) Show Control Panel: esta flechita nos permitir plegar y desplegar el panel de control. 2) Mode: Estas opciones nos permiten escoger el modo de visualizacin de nuestra pgina, tenemos View, Edit y Design

o View: Nos permite visualizar el diseo de la pgina ocultando, todos aquellos elementos de edicin para tener una aproximacin o una vista de cmo va quedando nuestro site o Edit: Esta opcin nos permite visualizar y manipular todos los elementos de edicin de contenidos y mdulos existentes en nuestro site.

o Design: esta opcin al igual que en edit se nos muestra de una forma ms simple la distribucin de nuestros mdulos y contenidos en el site.

3) Page Functions: es esta seccin nos encontramos con todas las posibles opciones para manipular las propiedades de las pginas. Estas opciones son: Add / Settings / Delete / Copy / Export / Import.

o Add: En este botn se agregara cada pagina que necesitemos en nuestros site. Y dentro de esta opcin encontraremos todos los settings para modificar la pgina segn nuestras preferencias, entre ellas usted puede: darle nombre a la pgina, colocarle una descripcin, especificar el padre de la pgina, si va incluida en el men, los permisos que tendr y su apariencia (Skins, contenedores, etc)

o Settings: Una vez creada una pgina, en este botn se puede editar todas las opciones antes mencionadas si no se haban definido o si se desea cambiar o ajustar alguna propiedad, de igual manera encontrara los elementos para: darle nombre a la pgina, colocarle una descripcin, especificar el padre de la pgina, si va incluida en el men, los permisos que tendr y su apariencia (Skins, contenedores, etc)

o Delete: Si ya tenemos una pgina creada y ya no la necesitamos es aqu donde la podemos eliminar, es importante resaltar que debemos estar situados sobre la misma o Copy: Si necesitamos una pgina similar o igual a una ya creada, situados en la pagina que necesitamos duplicar de damos a copy y llenamos el formulario que nos aparece, donde podemos indicar los mdulos que necesitamos que se reproduzcan, darle un nombre a la nueva pg etc.

o Export / Import: en estas opciones podemos traer o enviar pginas creadas con anterioridad, de igual forma nos aparecer un formulario para modificar las opciones segn las necesidades.

4) Mdulos: en esta seccin encontraremos las herramientas para crear y asignar los mdulos a las diferentes secciones de la plantilla.

Dentro de este panel nos encontramos con 6 secciones: Module, Title, Visibility, Pane, Insert y Align. o Module: Aqu nos aparece un listado con los mdulos que existen y se debe asigna el que se necesite agregar. o Title: Aqu se le puede dar un nombre referencial al modulo o Visibility: Se le asigna al mdulo la propiedad de verse en la pgina o si se requiere que solo se vea cuando estamos en modo administrador. o Pane: Aqu nos aparecer un listado con los tags asignados en la plantilla, se debe asignar en que tags queremos ubicar el mdulo que estamos creando.

o Insert: Aqu establecemos la ubicacin dentro del espacio en la plantilla si ya hay uno o ms mdulos insertados, podemos decirle que si lo queremos sobre los existentes o debajo de los mismos

o Align: Esta opcin nos sirve para darle alineacin al modulo que queremos crear si lo queremos a la izquierda, a la derecha en el centro o no especificado. Este

ltimo se usa cuando el modulo creado se ajusta al 100% del espacio que abarca el tags en la plantilla.

* Una vez llenamos los datos le damos a ADD y el modulo se crear segn las especificaciones indicadas:

5) Common Tasks: Aqu encontraremos las herramientas para modificar los settings del site, agregar o modificar archivos, agregar, eliminar o modificar perfiles de usuarios, y asignar los roles de los grupos. As como tambin contamos con una ayuda y un buscador de la aplicacin.

o Site: En site encontraremos las opciones para modificar el nombre del site, darle

una pequea descripcin al sitio, modificar o colocar el copyright, etc. *Tambin encontraremos una hoja de estilos con ttulos establecidos que puede ser manipulada para darle a el site la apariencia que necesitamos a dems de las complementarias que se cargan en el .zip que contiene los skins y los containers.

En el formulario que se despliega al entrar a esta seccin se puede configurar el site para que aparezca un men vertical con todas las herramientas de edicin que pudiramos necesitar y ubicarlas rpidamente.

Obtendramos un men como este:

Donde se puede visualizar el rbol de la pgina, herramientas de edicin que ya hemos visto y otras adicionales como registro de logs, papelera de reciclaje, y la opcin para subir los skins al DNN

o Users: Aqu podremos crear usuarios o grupos, as como tambin buscar o eliminar los anteriormente creados.

o Roles: Aqu se le especifican o se editan las cualidades a el administrador / usuarios registrados y los usuarios que se suscriban.

o Files: En esta seccin de files, podemos manipular documento, crear o modificar carpetas y archivos a dems esta seccin nos permite subir con anticipacin documentos (imgenes, txt, swf,etc) que vallamos a utilizar en nuestro site. As como tambin podemos crear carpetas para los diferentes tipos de documentos que tendremos en el sitio y poder darle una estructura o un orden a los mismos para ubicarlos con mayor facilidad a la hora de asignarlos en un modulo.

o Help / Solutions: esta herramienta nos permite ubicar informacin rpidamente en la web referente a la aplicacin DotNetNuke.

Cargar un skin
Siguiendo los pasos de creacin de skins y mdulos explicados en el primer documento, ya tendramos nuestro archivo .zip con el contenido necesario para la carga. Para ubicar la opcin nos vamos a el control Panel en la parte superior de nuestra pagina, luego a site ubicado Common tasks en la parte superio derecha. Una vez all ubicamos skins en el men que se despliega a la izquierda

All se desplegar un formulario seleccionamos la ubicacin donde queremos que se cargue y luego subimos el archivo .zip que habamos creado anteriormente y ya lo tendramos disponible para utilizarlos en las diferentes pginas del site. Este proceso se har cada vez que se modifiquen los archivos originales de la carpeta de plantilla o contenedores.

Edicin de mdulos
Una vez creados y asignados los mdulos estos tienen la propiedad de poder editarlos, eliminarlos y configurarlos rpidamente mediante un men desplegable en la parte superior del mismo. Segn el mdulo encontraremos opciones para editar el contenido del mdulo, exportar o importar el mismo, imprimir, eliminar editar las caractersticas del contenedor como: su apariencia, nombre o alineacin. As como tambin tendremos la opcin para mover el modulo en las diferentes reas de la plantilla. Los mdulos segn su estructura tambin podran tener un acceso rpido y visible en la parte superior o inferior para editar el contenido