Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Guía para Realizar Plantillas y Módulos para DOTNETNUKE PDF
Guía para Realizar Plantillas y Módulos para DOTNETNUKE PDF
DOTNETNUKE
Junio, 2008
ID Proyecto
DotNetNuke
Creado por
Ultima revisin
Leomarys Figueroa
10/06/2008
Revisado por
REVISIONES:
Fecha
Autor(es)
Comentarios
10/06/2008
Leomarys
Figueroa
Javier Kovacs
26/06/2008
DOCUMENTOS RELACIONADOS:
Titulo
USUARIOS:
Usuario
Ubicacin
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.
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 quiera que aparezca un espacio para un top panel de men pondr entre DIV:
<DIV ID="TopPane" 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>
TopPane
MenuPane
BannerPane
* 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.
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>
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:
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 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 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 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
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.
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
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
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