Gestor de Portales Avanzado

Gestor de Portales Avanzado Versión: 1.0 Dirección de Administración Electrónica y Atención a la Ciudadanía - Servicio Web Febrero 2009 V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 2 / 56 Índice 1 Introducción ..................................................................................4 2 Planteamiento del Curso ................................................................4 2.1 Relación con el diagnóstico de necesidades Formativas ....................4 2.2 Objetivos Operativos...................................................................4 2.3 Destinatarios .............................................................................5 2.3.1 2.3.2 2.4 3 Gestor Web Departamental......................................................5 Gestor Web ...........................................................................5 Documentación ..........................................................................6 Anatomía de una plantilla..............................................................7 3.1 Definición del tipo de documento (doctype) ....................................7 3.2 Template Definition.....................................................................8 3.2.1 Descriptor XML ......................................................................8 3.2.2 Template Resources ............................................................. 10 3.2.3 Head .................................................................................. 13 3.2.4 Body .................................................................................. 14 3.2.5 Nomenclatura y descripción de las plantillas............................. 23 3.2.5.1 Abreviaturas empleadas para el Nombre de la Plantilla en función de las Agrupaciones y Sub-Agrupaciones .............................. 23 3.2.5.2 Guía para la Creación de plantillas .................................... 24 4 Anatomía de una hoja de estilo .................................................... 25 4.1 Ejemplo de código de una Hoja de Estilo de tipo General ................ 25 4.2 Ejemplo de código de una Hoja de Estilo de tipo Particular ............. 30 V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 3 / 56 5 Modificación de la estructura de una plantilla............................... 32 6 Modificación de CSS particular de la plantilla................................ 42 7 Categorización de las páginas del Portal....................................... 47 7.1 Crear una Nueva Categoría ........................................................ 49 7.2 Editar una Categoría ................................................................. 50 7.3 Borrar una categoría ................................................................. 50 8 Códigos de Idioma (Estándar ISO 639) ........................................ 51 9 Tabla de Tipos de Áreas Visuales.................................................. 51 10 Iconografía en Euskadi.net.......................................................... 54 V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 4 / 56 1 Introducción El objetivo del presente documento es la presentación del curso Avanzado de Gestor de Portales. Este documento también servirá como guía para el seguimiento de dicho curso. El curso Avanzado de Gestor de Portales es la continuación del Curso de Gestor de Portales Básico, en el que el usuario interiorizó conceptos básicos en el manejo de la herramienta. Este curso va a aportar los conocimientos avanzados en configuración y creación de plantillas de Portal. 2 Planteamiento del Curso 2.1 Relación con el diagnóstico de necesidades Formativas Proporciona a los Gestores de Portales de cualquier entidad o administración con un portal en Euskadi.net los conocimientos necesarios para la realización de las funciones que les correspondan dentro del Modelo de Presencia en la red mediante la herramienta de gestión de portales. 2.2 Objetivos Operativos Adquirir los conocimientos necesarios para el desarrollo y administración del sitio web de un portal de Gobierno obteniendo una visión clara y definida de la herramienta Gestor de Portales. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 5 / 56 Al final de la acción formativa el alumno/alumna será capaz de: • Administrar correctamente todas las Áreas Visuales existentes en la herramienta de Gestión de Portales. (AV) • Adquirirá conocimientos de la programación de plantillas. • Adquirirá conocimientos en técnicas avanzadas en la herramienta de portales (CSS, tags, metas, etc.). 2.3 Destinatarios 2.3.1 Gestor Web Departamental Las tareas destinadas a la figura “Gestor Web Departamental” son todas aquellas dedicadas a estructurar y organizar el acceso a los contenidos a través de portales y páginas Web, además de ser soporte funcional de los gestores de contenidos de su departamento. Cursos: • • • • • • Modelo – Presencia en Internet Gestor de Contenidos Básico Gestor de Contenidos Perfil General Accesibilidad Catalogación / Buscador / Meta datos Gestor de Portales Básico 2.3.2 Gestor Web Encargados de la Organización, Coordinación y Supervisión del Modelo de Presencia de la Administración Pública de la Comunidad Autónoma de Euskadi en Internet. Asimismo es el soporte funcional y técnico de los portales de los diferentes departamentos, por lo tanto es necesaria su formación a todos los niveles, ya que deben poseer amplios conocimientos de Gestión de Portales, Gestión de Contenidos, Catalogación y Buscador. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 6 / 56 Cursos: • • • • • • • • Modelo – Presencia en Internet Gestor de Contenidos Básico Gestor de Contenidos Perfil General Gestor de contenidos Perfil Procedimiento Administrativo Accesibilidad Catalogación / Buscador / Meta datos Gestor de Portales Básico Gestor de Portales Avanzado 2.4 Documentación Manuales disponibles en Jakina/Modernización y Administración Electrónica/ Servicio de Gestión Web/ Formación y Manuales de Uso / Manual del Gestor de Portales V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 7 / 56 3 Anatomía de una plantilla En este apartado vamos a analizar la estructuración y principales cambios que han sufrido las plantillas en SHTML y las hojas de estilo CSS. No se pretende ofrecer un curso completo de SHTML y CSS, si no, ofrecer a través de ejemplos una visión general. La plantilla SHTML tiene la siguiente estructura: 3.1 Definición del tipo de documento (doctype) DOCTYPE: Definición del tipo de documento. Esta declaración indica qué versión de SHTML se usa en la página, de forma que los navegadores pueden saber qué sintaxis y gramática se usa, y los validadores puedan comprobar su validez. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=""lang="<!-#echo var='LANG'-->"> Definición de la etiqueta HTML. “xmlns" es la abreviatura de "XML-NameSpace" (espacio de nombre XML) y siempre debería tener el valor http://www.w3.org/1999/xhtml, con el atributo lang se especifica en qué idioma se ha escrito el documento. Para esto se usa el estándar ISO 639, que presenta un listado de códigos de todos los idiomas del mundo. Con el atributo xml:lang se especifica lo mismo que el atributo lang pero para el XML. La directiva  será sustituida por el servidor Web (en el momento de ser servida al cliente) por el valor del idioma en el cual ha sido solicitada la página. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 8 / 56 3.2 Template Definition Template Definition: Comentario de inicio de definición de plantilla. Será obligatorio. Bloque “Template Definition” será un XML de definición de la plantilla que irá implícito en ella SIEMPRE mediante las directivas . Esta información contiene los recursos que necesita la plantilla y por consiguiente la página creada con ella, así como el identificador asociado a su creación. Es muy importante que dicho xml esté bien formado. Un punto importante a destacar es que en cada una de las plantillas deberemos añadir siempre dos recursos de tipo styleSheet, ya que aquellos estilos comunes a todas las plantillas se agruparán en un único fichero de carácter general y otro con los estilos particulares de la plantilla. 3.2.1 Descriptor XML Donde aparecen el nombre y la descripción de la plantilla (en bilingüe), las hojas de estilo asociadas (como mínimo la general y la particular) y otros elementos que se quieran vincular (imágenes, javascritps, etc.). Aqui se indica: • El Oid de la plantilla. • El filename del archivo físico de la plantilla. Filename consiste en la combinación de 2 elementos, código de portal guion Oid de la plantilla y extensión shtml. Por ejemplo: Si nuestra plantilla es la home, y el filename de la plantilla para el portal r45 (departamento de Justicia, Empleo y Seguridad Social) es “justiciaHome.shtml” el filename de la plantilla será: r45-justiciaHome.shtml V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII V.1.0. – 26/03/2009 Página 9 / 56 • También incluiremos el nombre de la plantilla <NameES>, <NameEU> (max 50 caracteres), s i bien no es obligatorio utilizar la nomenclatura empleada durante la migración, se indica a continuación el modelo seguido por si fuera de interés mantenerlo para las plantillas que se creen de aquí en adelante. • Nombre: Abreviatura Tipo de Plantilla – Texto libre breve. El texto libre breve que compone la segunda parte del nombre debe de tener en cuenta la circunstancia de que por medio de la plantilla se pueden generar muchas páginas asociadas. En general se deben emplear términos lo suficientemente amplios y genéricos para no dar lugar a equívocos ni errores. • Incluiremos la descripción de la plantilla <descriptionES>, <descriptionEU>. Se trata de una descripción de número y posición de las Áreas Visuales (AV) que la componen (250 caracteres máx). Si bien no es obligatorio utilizar la nomenclatura empleada durante la migración, se indica a continuación el modelo seguido por si fuera de interés mantenerlo para las plantillas que se creen de aquí en adelante. • Descripción: Definición y posicionamiento de las AVs de la plantilla. La descripción debería incluir el epígrafe (las plantillas migradas llevan el indicativo V1) y el posicionamiento de las AVs de la Plantilla. • Podremos también incluir un bloque haciendo referencia a propiedades <properties> que se quieran añadir. No son obligatorias. Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 10 / 56     Importante: En cada una de las plantillas debemos añadir siempre dos recurso de tipo styleSheet, ya que con la nueva adaptación que se ha realizado del fichero de estilos .css, aquellas clases comunes a todas las plantillas se agrupan en un único fichero de carácter general. Con lo cual, cada plantilla tendrá dos css, uno con los estilos propios de la plantilla y otro con los estilos comúnes a la mayoría de las páginas del portal. En este caso, únicamente hemos añadido las hojas de estilo particular de la plantilla y la hoja de estilos general del portal. Si quisiéramos añadir un bloque de javascript lo haríamos de la siguiente manera. Bloque de javascript <templateResource type='script'> <fileName>t28afocusPosition.js</fileName> <description> <es>Posicionamiento del foco</es> <eu>Fokuaren kokatzea</eu> </description> </templateResource> V.1.0. – 26/03/2009 Bloque de imágenes <templateResource type='image'> <fileName>t28aArrowOff.gif</fileName> <description> <es>Flecha para el menú</es> <eu>Menurako Gezia</eu> </description> </templateResource> <templateResource type='image'> <fileName>t28a-arriba.gif</fileName> <description> <es>Flecha para subir</es> <eu>Igotzeko Gezia</eu> </description> </templateResource> Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 12 / 56 Elementos del XML de definición de plantilla: Elemento Atributo xml id template oid template group fileName nameES nameEU descriptionES descriptionEU properties templateResources templateResource V.1.0. – 26/03/2009 type Valor r01gTemplateDef, siempre será este valor, sirve para indicar al núcleo del Gestor de Portales de qué tipo de XML se trata para ser procesado correctamente. Identificador ÚNICO en el portal de la plantilla, define el valor de la clave primaria por la cual será almacenada la plantilla. Este identificador no debe ser superior a 50 caracteres, ni puede contener espacios en blanco. Identificador de un grupo de plantillas. Nombre del archivo de plantilla, este nombre debe tener el siguiente formato: codportal-oid.shtml Donde codportal es el código del portal al que pertenece la plantilla, y el oid debe ser exactamente el identificador de la plantilla, ambos separados por un guión. La extensión siempre debe ser “.shtml”. Nombre de la plantilla en Castellano, una cadena nunca superior a 50 caracteres. Será el utilizado en los componentes visuales del Gestor de Portales para la selección de plantillas cuando la administración se realiza en el idioma castellano. Nombre de la plantilla en Euskera, una cadena nunca superior a 50 caracteres. Será el utilizado en los componentes visuales del Gestor de Portales para la selección de plantillas cuando la administración se realiza en el idioma euskera. Descripción de la plantilla en Castellano, una cadena nunca superior a 255 caracteres. Descripción de la plantilla en Euskera, una cadena nunca superior a 255 caracteres. Valores adicionales para la explotación de la plantilla, estos valores tienen una relación directa con el núcleo del Gestor de Portales, en la implementación actual no tiene utilidad, por tanto no se debe especificar nada en concreto. Define los recursos asociados a la plantilla, es decir, aquellos recursos que son necesarios para cualquier página creada a partir de ella. Habitualmente son los estilos de maquetación de la página. IMPORTANTE: Los recursos referenciados en las hojas de estilo TAMBIÉN deben ser identificados. P.e. una imagen de fondo de página. Indicador del tipo de recurso, puede tener los siguientes valores: Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII templateResource /fileName templateResource /description Página 13 / 56 ¾ styleSheet, para hojas de estilo. ¾ script, para ficheros de código de script. ¾ image, para archivos de tipo imagen. Nombre del archivo del recurso, la herramienta administrativa comprueba que el fichero se encuentra en su ubicación física correspondiente, en caso de no estar solicita su subida al almacenamiento de recursos. El nombre de los ficheros DEBE comenzar por “codportal-“ obligatoriamente. Descripción en castellano y en euskera del recurso. 3.2.3 Head Que incluye una Directiva para la previsualización de la plantilla de carácter obligatorio y otra para ubicar todas las directivas del Head. En todas las plantillas se debe incluir esta directiva, tal y como se muestra, ya que permite realizar la inclusión de los recursos necesarios para la previsualización de la plantilla en la administración del Gestor de portales. <head>  Importante: Siempre hay que incluir estas dos Directivas   A continuación se incluirán los recursos que se han detallado en el Template Definition < link rel="stylesheet" type="text/css" href="/styles/t28aomeDepJusticiaEmpleoySeguridadSocial.css" /> <link rel="stylesheet" type="text/css" href="/styles/t28a-general.css" /> <link rel="stylesheet" type="text/css" href="/styles/t28a-estilosparticular.css" /> </head> V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 14 / 56 Todas las plantillas se deben incluir esta directiva, ya que permite al Gestor de portales identificar en qué punto del HEAD de las página se deben incluir las directivas META, variables javascript de administración, e incluyes de hojas de estilo y ficheros javascript de las áreas visuales configuradas.  identificador Identificador de la capa contenedora, debe ser único para cada directiva, son siempre valores numéricos positivos mayores que 0, y no repetidos. tipoAV Tipo de área visual (ver Tabla de tipos de Áreas Visuales). 3.2.4 Body En el cuerpo de la plantilla encontramos los tags de las Áreas Visuales. • • • • • • • • Logotipos Primera línea de Cabecera Segunda línea de Cabecera Tercera línea de Cabecera Bloque central: Menú izquierdo, cuerpo y noticias derechas Columna central Columna derecha Pie IdÆ Identificativo de la capa contenedora del Área Visual. Números de secciónÆ @avDef, son siempre números positivos mayores que 0 y no repetidos. La única definición con número 0 es el Área Visual de cabecera que va en todas las plantillas. Existe un grupo de AVs que siempre son comunes en la mayoría de los portales. Para que éstas sean identificadas con mayor rapidez y facilidad, se les asigna un id concreto que sea siempre el mismo para todas las plantillas. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 15 / 56 Las AVs comunes y sus identificativos son: • • • • • V.1.0. – 26/03/2009 Zona de Logotipos • Imagen logotipo @avDef id=1001 • Imagen logotipo @avDef id=1002 • Imagen logoripo @avDef id=1003 Primera línea de Cabecera • Imagen botón de inicio @avDef id=1004 • Menú horizontal @avDef id=1005 Segunda línea de Cabecera • Selector de Idiomas @avDef id=1006 • Menú horizontal @avDef id=1007 Tercera línea de Cabecera • Sendero de Migas @avDef id=1008 Zona de Pie de página • Pie de Página @avDef id= 2001 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 16 / 56 <body>  <div class="t28a_headerLogos r01clearfix"> <div class="t28a_headerLogoLeft">  </div> <div class="t28a_headerLogoCenter">  </div> <div class="t28a_headerLogoRight">  </div> </div>  <div class="t28a_headerRow1 r01clearfix"> <div class="t28a_homePageButton">  </div> <div class="t28a_headerRow1Menu">  </div> </div>  <div class="t28a_headerRow2 r01clearfix"> <div class="t28a_headerRow2LangSel">  </div> V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 17 / 56 <div class="t28a_headerRow2Menu">  </div> </div>  <div class="t28a_headerRow3 r01clearfix">  </div>  <div class="t28a_body r01clearfix">  <div class="t28a_bodyLeftCol"> <div class="t28a_bodyLeftFullTextSearch">  </div> <div class="t28a_bodyLeftColVMenu1">  </div> <div class="t28a_bodyLeftColBanner1">  </div> <div class="t28a_bodyLeftColBanner2">  </div> <div class="t28a_bodyLeftColBanner3">  </div> <div class="t28a_bodyLeftColBanner4">  </div> <div class="t28a_bodyLeftColImg1"> V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 18 / 56  </div> </div> <!===== -- Columna central===== --> <div class="t28a_bodyCenterCol"> <div class="t28a_bodyCenterColBanner">  </div> <div class="t28a_bodyCenterHeadLine">  </div> <div class="t28a_bodyCenterColContentList">  </div> </div>  <div class="t28a_bodyRightCol"> <div class="t28a_bodyRightColContentList">  </div> <div class="t28a_bodyRightColBanner1">  </div> <div class="t28a_bodyRightColBanner2">  </div> <div class="t28a_bodyRightColBanner3">  </div> <div class="t28a_bodyRightColBanner4">  V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 19 / 56 </div> </div> </div>  <div class="t28a_footer">  </div> </body> </html> V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 20 / 56 A continuación vamos a analizar el código de una plantilla sobre un ejemplo: Doctype: Será común a todas las páginas y deberá incluirse tal cual. El código a incorporar es el que se muestra. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="" lang=""> Comentario de inicio de definición de página (Obligatorio).     nombre exacto de la hoja de Estilo General (Común a todo el portal) Importante Cierre Cada recurso se situa dentro de una etiqueta template Resource. Se debe indicar el tipo de recurso (Type); en este caso se trata de una hoja de estilo (stylesheet), pero se pueden incorporar ficheros de script o recursos tipo imagen. HEAD: Que incluye una directiva para la previsualización de la plantilla de carácter obligatorio y otra para ubilcar todas las directivas del Head. <head>   que incluirse Tal   En esta sección <link rel="stylesheet" type="text/css" href="/styles/t28aincluiremos los HomeDepJusticiaEmpleoySeguridadSocial.css" /> recursos que <link rel="stylesheet" type="text/css" href="/styles/t28a-general.css" /> necesita la plantilla. <link rel="stylesheet" type="text/css" href="/styles/t28a-estilos.css" /> </head> V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 22 / 56 BODY: Donde se referencian las Áreas Visuales y los estilos asociados a cada una de ellas. Es recomendable que cada sección (logotipos, cabecera, bloque central, pié, etc.) vaya comentada para facilitar la identificación visual de la estructura de la plantilla. <body>  <div class="t28a_headerLogos r01clearfix"> <div class="t28a_headerLogoLeft">  </div> </div> <div class="t28a_headerLogoCenter">  <div class="t28a_headerLogoRight">  </div> </div> </body> -------Se omite el código Restante -----</html> Ejemplo de código de un Área Visual tipo imagen. Cada área Visual lleva un identificador único (id). No se puede repetir, pero no tiene por que seguir un orden consecutivo. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 23 / 56 3.2.5 Nomenclatura y descripción de las plantillas El nombre de la plantilla se situará entre las etiquetas <nameES></nameES> para el nombre en castellano y <nameEU></nameEU>, para el nombre en euskera. Si bien no es obligatorio utilizar la nomenclatura usada durante la migración, se indica a continuación el modelo seguido por si fuera de interés mantenerlo para las plantillas que se creen de aquí en adelante. Esquema de nombre y definición propuesto para las plantillas de Portales: Nombre : Abreviatura Tipo de Plantilla – Texto libre breve Descripción : Definición y posicionamiento de las AVs de la plantilla 3.2.5.1 Abreviaturas empleadas para el Nombre de la Plantilla en función de las Agrupaciones y Sub-Agrupaciones Agrupación Plantillas de Portal Plantillas con Contenidos Plantillas de Aplicaciones Sub-agrupación Prehome Home Subhome Plantilla detalle Plantilla de Contenido Plantilla de formulario de Búsqueda Plantilla de Resultado de Búsqueda Plantilla de Buzón de Portal Plantilla de aplicación Abreviatura Prehome Home Subhome Detail Content FormSearch SearchResult Mail Apps El Texto libre breve que compone la segunda parte del nombre, debe tener en cuenta la circunstancia de que por medio de la plantilla se pueden generar muchas páginas asociadas. Por ello, en general, se deben emplear términos lo suficientemente amplios y genéricos para no dar lugar a equívocos ni errores. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 24 / 56 La Descripción debería incluir el epígrafe ACTIVA V2 (las plantillas migradas llevan el incidativo V1) y la definición y el posicionamiento de las AVs de la Plantilla. 3.2.5.2 Guía para la Creación de plantillas En este apartado se verá la forma de creación de nuevas plantillas que sirvan para la creación de las páginas de portal. La estructura global de todas ellas será idéntica, exceptuando ciertos componentes particulares, tales como los recursos específicos de cada una y las AVs particulares, así como su disposición. El nombre de los ficheros de plantillas deben tener el siguiente formato: codPortal identificadorPlantilla shtml V.1.0. – 26/03/2009 codPortal-identificadorPlantilla.shtml Código de portal Nombre de plantilla Extensión que identifica los archivos html que tienen intercaladas en el código directrices de Server Side Incluyes (SSI). Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 25 / 56 4 Anatomía de una hoja de estilo Tal y como hemos comentado anteriormente, en todas las páginas tendremos referenciadas al menos 2 tipos de hojas de estilos. • portal-general.cssÆ Contiene estilos comunes a todos los portales (t28-general.css). • portal-HomePaginaPrincipal.cssÆ Contiene los estilos de las Áreas Visuales específicas de la Plantilla (t28-HomePaginaPrincipal.css). A continuación vamos a ver dos ejemplos de código de ambos tipos de hojas de estilo que se incluyen como modelo. Importante: Incluir el código identificativo como clear fix. Este código, evita que las distintas capas de la plantilla se solapen unas sobre otras. 4.1 Ejemplo de código de una Hoja de Estilo de tipo General Los elementos comunes en la mayoría de las plantillas de un portal son: • • • • • • Los logotipos de la Cabecera: Formado por tres áreas visuales de tipo imagen. Primera línea de Cabecera:Botón de Inicio y el menú horizontal. Segunda linea de Cabecera:Selector de idioma y menú horizontal. Tercera línea de Cabecera: Sendero de migas. Bloque central:Los compoentes de esta zona son los que normalmente pueden variar de una plantilla a otra. Pié de Página V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 26 / 56 Logotipos de Cabecera Primera línea de Cabecera Segunda línea de Cabecera Bloque Central Pié de Página Lo más sencillo es mostrar un ejemplo práctico. En la figura, se muestra gráficamente la estructuración de la página en los <div> mas significativos, indicando el nombre del estilo que le corresponde a cada uno de ellos. La página que estamos tratando quedaría estructurada de la siguiente forma. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII body Página 27 / 56 t28-a_headerLogos,r01clearfix headerlogoleft headerLogoCent headerLogoRigh t28a_headerRow1, r01clearfix homePageButto headerRow1Menu t28a_headerRow2,r01clearfix headerRow2LangSel headerRow2Menu t28a headerRow3,r01clearfix t28a_body, r01clearfix bodyLeftCol bodyCenterCol bodyRighCol t28a footer Como se ve en la figura, algunos de los bloques principales a su vez se subdividen en mas bloques, para posicionar cada AV según esté situada a la derecha, centrada o a la izquierda. Esto se consigue mediante el atributo float. Conjuntamente, con este atributo, es importante explicar el funcionamiento de la clase clear fix. Esta hace que los elementos V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 28 / 56 dentro del <div> no queden “flotando” de tal manera que, al cerrar dicho <div>, se “desactiva” el flota y la siguiente capa se posiciona de forma correcta. El fichero de estilos comunes, como podemos ver con el ejemplo quedaría de la siguiente manera. Importante: La CSS de estilos comunes, sería la misma para todo el portal. En consecuencia, con crearla una única vez, sería suficiente. /***** Global Settings *****/ @import url(/AVComun/styles/r01PortalResetToBaseStyles.css); body { background-color : #fff; } /* ===== Logotipos de la cabecera ===== */ div.t28a_headerLogos { width : 100%; padding-bottom : 5px; border-bottom : 1px solid #ccc; } div.t28a_headerLogoLeft { float : left; text-align : left; margin-right : 10px; } div.t28a_headerLogoCenter { float : left; text-align : left; } div.t28a_headerLogoRight { float : right; text-align : right; } /* ===== Primera linea de la cabecera ===== */ div.t28a_headerRow1 { width : 100%; border-bottom : 3px solid white; border-top : 2px solid white; z-index : 1000; } div.t28a_homePageButton { float : left; width : 8%; V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 29 / 56 } div.t28a_headerRow1Menu { float : right; width : 92%; /* no llegar al 100% junto con el boton (bug explorer) */ } /* ===== Segunda linea de la cabecera ===== */ div.t28a_headerRow2 { width : 100%; z-index : 9000; border-top : 1px solid #ccc; border-bottom : 1px solid #ccc; padding-top : 2px; padding-bottom : 2px; } div.t28a_headerRow2LangSel { float : left; text-align : left; padding-top : 2px; margin-left : 2px; } div.t28a_headerRow2Menu { float : right; width : 80%; /* no llegar a 100% junto con el selector de idioma (bug explorer) */ } /* ===== Tercera linea de la cabecera ===== */ div.t28a_headerRow3 { text-align :left; width :100%; margin-top :5px; margin-bottom :10px; } /* ===== Cuerpo central: posicionamiento izq,centro derecha ===== */ div.t28a_body { width : 100%; font-family : sans-serif; } /* ===== Pie de pagina ===== */ div.t28a_footer { _margin-top : 10px; width : 100%; } V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 30 / 56 4.2 Ejemplo de código de una Hoja de Estilo de tipo Particular /* ===== Cuerpo central: posicionamiento izq, centro, derecha ===== */ div.t28a_bodyLeftCol { border : float : padding width : margin-right : 10px; margin-bottom : 10px; } div.t28a_bodyCenterCol { float : width : y derecho */ margin-bottom : 10px; margin-left : } div.t28a_bodyRightCol { float : width : margin-bottom : 10px; } 1px solid #CCCCCC; left; : 2px; 19%; left; 56%; /* no llegar a 100% junto con el bloque izq 2.5%; right; 18%; /* ===== Parte izquierda del cuerpo ===== */ div.t28a_bodyLeftFullTextSearch { width : } div.t28a_bodyLeftColVMenu1 { margin-bottom : 20px; width : } div.t28a_bodyLeftColBanner1 { margin-bottom : 10px; text-align : width : } div.t28a_bodyLeftColBanner2 { margin-bottom : 10px; text-align : width : } div.t28a_bodyLeftColBanner3 { margin-bottom : 10px; text-align : width : } div.t28a_bodyLeftColBanner4 { margin-bottom : 10px; V.1.0. – 26/03/2009 100%; 100%; center; 100%; center; 100%; center; 100%; Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 31 / 56 text-align width : center; : 100%; } div.t28a_bodyLeftColImg1 { text-align width } : center; : 100%; /* ===== Parte central del cuerpo ===== */ div.t28a_bodyCenterColBanner { text-align : center; margin-bottom : 10px; } div.t28a_bodyCenterHeadLine{ margin-bottom : 10px; } div.t28a_bodyCenterColContentList { } /* ===== Parte derecha del cuerpo ===== */ div.t28a_bodyRightColContentList { } div.t28a_bodyRightColBanner1 { text-align : margin-bottom : 10px; } div.t28a_bodyRightColBanner2 { text-align : margin-bottom : 10px; } div.t28a_bodyRightColBanner3 { text-align : margin-bottom : 10px; } div.t28a_bodyRightColBanner4 { text-align : margin-bottom : 10px; } V.1.0. – 26/03/2009 left; left; left; left; Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 32 / 56 5 Modificación de la estructura de una plantilla Si quisieramos modificar una plantilla, debido a que, por ejemplo, nos surge una nueva necesidad en el departamento, que nos obliga a poner un banner extra en la zona izquierda además de los presentes, deberíamos ir a la sección principal del Gestor de Portales, y seleccionar la opción… . Desde aquí accederíamos a la opción “Editar”, lo que nos va a permitir descargarnos la plantilla y sus recursos en un fichero comprimido. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 33 / 56 Al seleccionar la opción Editar, nos permitirá descargarnos la plantilla que deseamos modificar. Guardaremos el contenido del archivo en nuestro PC, y realizaremos las modificaciones oportunas en el fichero. Los ficheros que nos vamos a descargar mediante esta opción son: • t28m-SubhomeJusticiaSubhomes13678y10.shtml: La plantilla. • t28m-SubhomeJusticiaSubhomes13678y10.css: Archivo css particular de la plantilla. • t28m-general.css: Archivo css general del portal. Una vez descomprimidos los archivos, editaremos la plantilla añadiendo un Banner en la zona izquierda de la misma. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 34 / 56 Comprobamos al editar el código, que el bloque central contiene : • • • • • • t28m_bodyLeftFullTextSearch Æ AV Motor de búsqueda, cuyo identificativo es: @avDef id:”7” t28m_bodyLeftColVMenu1Æ AV Menú vertical, cuyo identificativo es : @avDef id:”8” t28m_bodyLeftColBanner1ÆAv Banner, cuyo identificativo es: @avDef id:”9” t28m_bodyLeftColBanner2ÆAv Banner, cuyo identificativo es: @avDef id:”10” t28m_bodyLeftColBanner3ÆAv Banner, cuyo identificativo es: @avDef id:”11” t28m_bodyLeftColImg1ÆAv de Imagen, cuyo identificativo es: @avDef id:”12” V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 35 / 56 Podemos añadir o eliminar cualquier AV en nuestra plantilla. Si lo que queremos es añadir un nuevo banner, tendríamos que añadir el código correspondiente, teniendo en cuenta que el identificador del mismo debe ser numérico. Aunque no tiene por que ser un número correlativo, no puede repetirse en la plantilla. Por lo tanto, si añadimos un nuevo banner, el código a añadir sería: <div class="t28m_bodyLeftColBanner4">  </div> Tendríamos que comprobar en la plantilla que el identificativo que vamos a asignar a nuestro nuevo banner no se encuentra asignado a ningún otro AV. Una Vez modificada la plantilla tenemos que modificar la descripción de la misma, ya que indicaba que la plantilla contaba con 3 banners, y la nueva plantilla que estamos construyendo va a contar con 4, por lo tanto, modificamos este dato. También tenemos que tener en cuenta que el nombre del fichero de la plantilla (t28m-SubhomeJusticiaSubhomesModificada.shtml) debe coincidir con el elemento fileName de la propia plantilla, por lo tanto, realizaremos dicha modificación. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 36 / 56 Asimismo deberemos de modificar el Oid de la plantilla: Deberemos tener en cuenta los recursos asociados a esta plantilla, si la modificación provoca algún cambio en ellos. En este caso, deberemos incluir en la hoja de estilo particular el nuevo banner. Asimismo, se recomienda modificar el nombre del fichero CSS correspondiente, así como la referencia al mismo desde la plantilla. Modificación del fileName de estilo particular de la plantilla: V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 37 / 56 Inclusión del nuevo banner y propiedades del mismo, dentro del fichero css particular de la misma: /* === Parte izquierda del cuerpo === */ div.t28m_bodyLeftFullTextSearch { width : 100%; } div.t28m_bodyLeftColVMenu1 { margin-bottom : 20px; width : 100%; } div.t28m_bodyLeftColBanner1 { text-align : center; margin-bottom : 10px; width : 100%; } div.t28m_bodyLeftColBanner2 { text-align : center; margin-bottom : 10px; width : 100%; } div.t28m_bodyLeftColBanner3 { text-align : center; margin-bottom : 10px; width : 100%; } div.t28m_bodyLeftColImg1 { text-align : center; width : 100%; } /* === Parte izquierda del cuerpo === */ div.t28m_bodyLeftFullTextSearch { width : 100%; } div.t28m_bodyLeftColVMenu1 { margin-bottom : 20px; width : 100%; } div.t28m_bodyLeftColBanner1 { text-align : center; margin-bottom : 10px; width : 100%; } div.t28m_bodyLeftColBanner2 { text-align : center; margin-bottom : 10px; width : 100%; } div.t28m_bodyLeftColBanner3 { text-align : center; margin-bottom : 10px; width : 100%; } div.t28m_bodyLeftColBanner3 { text-align : center; margin-bottom : 10px; width : 100%; } div.t28m_bodyLeftColImg1 { text-align : center; width : 100%; } A continuación, desde la opción “Administrar las plantillas del portal” del Gestor de Portales accederemos a la pantalla de mantenimiento de plantillas del portal. Seleccionaremos la opción seleccionar la plantilla modificada. V.1.0. – 26/03/2009 , lo que nos permitirá Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 38 / 56 Nos solicitará el Fichero css particular de la plantilla. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 39 / 56 Una vez copiado el recurso deberemos registrar la plantilla. Si quisieramos cambiar la plantilla de , únicamente nuestra página por la nueva, accederíamos mediante la opción y seleccionaremos la opción Editar de la página cuya plantilla queremos modificar. Mediante la opción en Plantilla seleccionaremos la nueva. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 40 / 56 La herramienta nos informará sobre qué Áreas Visuales se verán afectadas por el cambio de plantilla. En el caso de que quisieramos realizar cualquier otra modificación, como por ejemplo, eliminar un banner existente, los pasos a seguir serían los mismos, V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 41 / 56 con la diferencia de que en lugar de añadir, eliminaríamos un componente, tanto de la plantilla como del Fichero css. Pasos a seguir para la modificación de una plantilla 1. Desde Administración de plantillas, descargar, mediante la opción Editar el fichero comprimido con la plantilla y sus recursos. 2. Edicion del fichero shtml y css particular de la plantilla. Podremos añadir o eliminar AVs de la misma. Una vez realizados los cambios, debemos: • • • • Modificar Oid de la plantilla. Modificar Descripción de la plantilla. Modificar nombre fichero css particular de la plantilla. Añadir o eliminar componentes en css particular. 3. Subir y registrar la nueva plantilla y recursos de la misma desde la opción Administrar las plantillas del portal de la herramienta. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 42 / 56 6 Modificación de CSS particular de la plantilla En la nueva versión del Gestor de Portales ha sido incluida la posibilidad de modificación del css particular de cada AV, introduciendo en la pestaña “Visuales” la opción CSS particular. Nos permite introducir código con el fin de modificar cada AV, independientemente del CSS general de la página. Por medio de la utilización de este nuevo campo incorporado en la herramienta, es posible administrar las páginas, dándoles un aspecto completamente diferente. Para lograr este cambio en la hoja de estilo particular del Área Visual debemos identificar el apartado del menú al que queremos realizar el cambio (en el ejemplo siguiente, la modificación únicamente es el cambio de color de fondo de las diferentes opciones). #LI_vmhomejusticia_00000 a:visited { background:#ffd380} #LI_vmhomejusticia_00004 a:visited{ background:#cccccc;} Utilizando la opción CSS Particular iremos introduciendo por cada opción el estilo que queremos modificar. En este caso, y a modo de ejemplo, únicamente se ha modificado el color de las dos primeras opciones del menú vertical. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 43 / 56 Hemos modificado también utilizando la misma opción de CSS particular el color de las opciones del menú horizontal. Tendremos que tener en cuenta que para poder modificar el color de fondo de las opciones, como en este caso, que en la administración del área visual deberemos poner como color de fondo de área “transparent”, y a continuación comprobar, mediante algún programa que nos permita inspeccionar el código de la página, la denominación dentro del <div> de la zona concreta que deseamos modificar: En la administración de las áreas visuales, cuando definimos el color de fondo del área, lo hacemos para todas las opciones del AV. Con esta modificación del estilo, lo que pretendemos es modificar independientemente las opciones visuales de cada una de las opciones, por ejemplo de un menú. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 44 / 56 Ejemplo de Código del AV menú vertical modificado Vamos a comprobar la parte del código que hace referencia a la primera opción del menú vertical “El Departamento” y que cuenta con 3 hijos: Presentación, Organigramas Estratégicos, Planes y Funciones. Indicaremos el cambio del color de la primera opción del menú vertical, refiriéndonos a ella por medio del identificador. Como podemos comprobar en el código, la denominación de este apartado del menú sería LI_vmhomejusticia_0000 (vhhomejusticia, es el nombre que hemos dado al área visual cuando la hemos administrado), por lo tanto, en el apartado css particular indicaremos lo siguiente: # LI_vmhomejusticia_0000 a:visited{ Background:#ffd380; Para cambiar el color de fondo Para cambiar el color del texto Color:#CCCCCC; } Igualmente indicaremos las modificaciones de las siguientes opciones # LI_vmhomejusticia_0004 a:visited{ Background:#ffd380; } Al igual que hemos modificado el color del fondo de la opción (background), podríamos haber modificado, por ejemplo, el color del texto, el tipo de letra o cualquier otro atributo. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII V.1.0. – 26/03/2009 Página 45 / 56 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII V.1.0. – 26/03/2009 Página 46 / 56 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 47 / 56 7 Categorización de las páginas del Portal La categorización será específica de cada portal. Ésta llegará a tanta profundidad como lo defina el responsable del portal, teniendo en cuenta que para crear una nueva categoría, esta debe contener varias páginas acerca de una mismo tema, ámbito o público objetivo. Las páginas que no se encuadren dentro de una Subhome (resultado de búsquedas, aplicaciones…), se encuadrarán dentro de la categoría de la Horizontal – Departamento. La Jerarquía de los Niveles a seguir será la siguiente: 1. 2. 3. 4. 5. 6. PreHome Home del Portal SubHome Página de Detalle (Sub-subHome) (si los hubiera) Otros posibles sub-sub-niveles (si los hubiera) 999. Páginas de tipo horizontal del Portal (Contenidos, búsquedas, aplicaciones) Al crear una nueva categoría, se nos desplegarán las opciones de categoría correspondientes: Nivel, Nombre y Descripción idiomáticos. Importante: El nivel más bajo de las categorías es el 1, nunca el 0. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 48 / 56 Vamos a analizar todos estos conceptos con el ejemplo adaptado del Portal de Hacienda. Supongamos que las páginas del Portal de Hacienda tienen la siguiente estructura jerárquica: ¾ Prehome del Departamento de Hacienda y Administración Pública. ¾ Home del Departamento de Hacienda y Administración Pública. ¾ Subhomes: o Biblioteca Sub-Subhome: Izartu o Economía Vasca o Hacienda y finanzas o Función Pública o Informática y Telecomunicaciones o Compras y Aprovisionamiento Prehome Hacienda y Administración Pública home Hacienda y Administración Pública Economía Vasca Biblioteca Hacienda y Finanzas Función Pública Informátic ay Telecomu nicaciones Compras y Aprovisio namiento Izartu V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 49 / 56 La estructura de categorización que habría que configurar en función de estos datos podría ser la siguiente: Nivel 1 2 3 3 3 3 3 4 999 Nombre Prehome Home Biblioteca Economía Vasca Hacienda y Finanzas Función Pública Informátoica y Telecomunicaciones Compras y Aprovisionamiento Izartu Descripción Prehome Home Biblioteca Economía Vasca Hacienda y Finanzas Función Pública Informática y Telecomunicaciones Compras y Aprovisionamiento Izartu La Gestión de niveles de Categorías tiene tres opciones básicas: 1. Crear una Nueva Categoría 2. Editar una Categoría 3. Borrar una Categoría 7.1 Crear una Nueva Categoría Accederemos a la creación de una Nueva Categoría por medio del botón . En el desplegable que nos aparecerá vamos introduciendo los datos tanto en euskera como en castellano. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 50 / 56 7.2 Editar una Categoría Para editar una Categoría pulsaremos sobre el botón “Editar”. Se nos desplegarán las opciones de categoría correspondientes: Nivel, Nombre y Descripción idiomáticos. Desde aquí podremos realizar los cambios oportunos y registrarlos de forma permanente. 7.3 Borrar una categoría Para eliminar una Categoría de forma permanente pulsaremos sobre la opción borrar. Cualquier cambio, para que tenga efecto, deberá confirmarse mediante el botón Guardar. V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía 8 Códigos de Idioma (Estándar ISO 639) Fuente: http://es.wikipedia.org/wiki/ISO_639-1 aa ab ae af afar abjaso avéstico afrikaans co cr cs cu gd gl gn gu ak akano am amárico corso cree checo eslavo eclesiástico antiguo cv chuvasio cy galés an ar aragonés árabe as av ay az ba be bg bh bi bm bn bo br bs ca ce ch asamés avar aimara azerí baskir bielorruso búlgaro bhojpurí bislama bambara bengalí tibetano bretón bosnio catalán checheno chamorro jv ka kg ki javanés georgiano kongo kikuyu mg mh mi mk malgache marshalés maorí macedonio or os pa pi oriya osético panyabí pali sr ss st su gv manés ha hausa kj kk kuanyama kazajo ml malayalam mn mongol pl ps polaco pastú sv sueco sw suajili da danés de alemán he hebreo hi hindi (o hindú) kl groenlandés km camboyano mo moldavo mr maratí pt portugués qu quechua ta te tamil telugú dv dz ee el en eo es et eu fa ff fi fj fo fr fy ga ho hr ht hu hy hz ia id ie ig ii ik io is it iu ja kn ko kr ks ku kv kw ky la lb lg li ln lo lt lu lv ms mt my na nb nd ne ng nl nn no nr nv ny oc oj om rm rn ro ru rw sa sc sd se sg si sk sl sm sn so sq tg th ti tk tl tn to tr ts tt tw ty ug uk ur uz ve tayiko tailandés tigriña turcomano tagalo setsuana tongano turco tsonga tártaro twi tahitiano uigur ucraniano urdu uzbeko venda maldivo dzongkha ewe griego (moderno) inglés esperanto español (o castellano) estonio vascuence (o euskera) persa fula finés (o finlandés) fijiano (o fidji) feroés francés frisón (o frisio) irlandés (o gaélico) gaélico escocés gallego guaraní guyaratí hiri motu croata haitiano húngaro armenio herero interlingua indonesio occidental igbo yi de Sichuán inupiaq ido islandés italiano inuktitut japonés canarés coreano kanuri cachemiro kurdo komi córnico kirguís latín luxemburgués luganda limburgués lingala lao lituano luba-katanga letón 9 Tabla de Tipos de Áreas Visuales malayo maltés birmano nauruano noruego bokmål ndebele del norte nepalí ndonga neerlandés nynorsk noruego ndebele del sur navajo chichewa occitano ojibwa oromo retorrománico kirundi rumano ruso ruandés sánscrito sardo sindhi sami septentrional sango cingalés eslovaco esloveno samoano shona somalí albanés serbio suazi sesotho sundanés vi vo wa wo vietnamita volapük valón wolof xh xhosa yi yídish (o yiddish) yo yoruba za chuan (o zhuang) zh chino zu zulu Tipo de AV Nombre Abr Recursos comunes (styles,scripts) Recursos particulares r01gHeadLineVA A.V Destacados hd r01gHeadLine.css codportal-hdVisualAreaX.css r01gImageVA A.V Imagen Img r01gBannerVA A.V Banner bnn r01gPageFootVA A.V Pie de Página ft codportal-hmVisualAreaX.css codportal-hmVisualAreaX.js codportal-brdVisualAreaX.css r01gDetailedMenuVA A.V Menú Detallado md r01gImage.css r01gCommonBanner.css r01gBanner.js r01gPageFoot.css r01gHorizontalMenu.css r01gHorizontalMenu.js r01gTitle.css r01gVerticalMenu.css r01gVerticalMenu.js r01gTitle.css r01gDetailedMenu.css r01gNavigatorVA A.V Migas de Pan brd r01gNavigator.css r01gLangSelector.css r01gHorizontalMenuVA A.V Menú Horizontal hm r01gVerticalMenuVA vm A.V Menú Vertical r01gLangSelectorVA A.V Selector de Idioma lang r01gEditorVA A.V Editor ed r01gContainerVA A.V Contenedor cont r01gContentListVA A.V Listado de Contenidos lst r01gSearchResultVA A.V Resultado de Búsqueda res r01gSearchEngineVA A.V Motor de Búsqueda srch r01gCommonSearchVA A.V Buscador Avanzado asrch codportal-ftVisualAreaX.css codportal-vmVisualAreaX.css codportal-vmVisualAreaX.js codportal-mdVisualAreaX.css codportal-langVisualAreaX.css codportal-edVisualAreaX.css r01gContainer.css (*) r01PortalResetToBaseStylesAppContent.css (*) r01gHTMLEditor.css r01gTitle.css r01gFichasTurismo.css r01gGeneralTurismo.js r01gContentListSearchEngineStyles.css r01gTitle.css r01gSearchResultStyles.css r01toolTipBalloon.css r01gSearchEngine.css r01gSearchEngine.js r01lContentSearchFormStyles.css r01fCalendar.css r01gCommonSearchContentSearchForm.js r01gCommonSearchComboStructures.js r01gCommonSearchScripts.js r01gCommonSearchPopUp.js r01gCommonSearchCalendar.js r01gCommonSearchDateValidator.js r01gTitle.css codportal-contVisualareaX.css codportal-lstVisualArea.css codportal-srchVisualArea.css codportal-asrchVisualAreaX.css codportal-asrchVisualAreaX.js r01gAccesskeyVA A.V Teclas de Acceso Rápido ak r01gImageHMenuVA A.V Menú Horizontal con Imágen imghm r01gImageMenuVA A.V Menú de Imágenes Animado anm r01gImageVMenuVA A.V Menú Vertical con Imágen imgvm r01gQueryCalendarVA A.V Calendario cal r01gTitleVA r01gTagCloudVA A.V Título A.V Nube de tags tit tcld r01sliderGalleryVA A.V. Galeria de imágenes sg r01gAccesskey.css r01gImageHMenu.css r01gTitle.css r01gImageMenu.css r01gImageMenu.js r01gMootools.js r01gImageVMenu.css r01gTitle.css r01gQueryCalendar.css r01gTitle.css r01gTitle.css codportal-imghmVisualAreaX.css codportal-anmVisualAreaX.css codportal-imgvmVisualAreaX.css codportal-calVisualAreaX.css codportal-titVisualAreaX.css codportal-tlcldVisualAreaX.css Codportal-sgVisualAreaX.css JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 54 / 56 10 Iconografía en Euskadi.net Estilos dependientes de la familia y Tipo de Contenido: Prensa y Comunicación Noticia r01TypoNew.gif Prensa r01TypoPress.gif Procedimientos Administrativos: r01TypoProcedure.gif Procedimiento activo: r01TypoProcedureActive.gif Procedimiento activo últimos días (No configurado): r01TypoProcedureActiveLastDays.gif Procedimiento histórico: r01TypoProcedureHistoric.gif Procedimiento Resuelto r01TypoProcedureSolved.gif Procedimiento Cerrado r01TypoProcedureClosed.gif V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 55 / 56 Resto de Contenidos: Documentación r01TypoDoc.gif Eventos r01TypoEvent.gif Recursos Humanos r01TypoRRHH.gif Estadísticas r01TypoStatistics.gif Organización r01TypoOrg.gif Legislación r01TypoLaw.gif Directorios r01TypoDir.gif Información General r01TypoInfo.gif Iconografía propia del Departamento de Turismo: Alojamiento r01TypoTourismAlojamiento.gif Compras r01TypoTourismCompras.gif V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía JAURLARITZAREN LEHENDAKARIORDETZA VICEPRESIDENCIA DEL GOBIERNO Gestor de Portales Avanzado Curso Formativo VIII Página 56 / 56 Cultura r01TypoTourismCultura.gif Deportes r01TypoTourismDeportes.gif Destinos r01TypoTourismDestinos.gif Gastronomía r01TypoTourismGastronomia.gif Movilidad r01TypoTourismMovilidad.gif Naturaleza r01TypoTourismNaturaleza.gif Negocios r01TypoTourismNegocios.gif Oficinas r01TypoTourismOficinas.gif Restauración r01TypoTourismRestauracion.gif V.1.0. – 26/03/2009 Web Zerbitzua – Servicio Web Administrazio Elektronikorako eta Herritarrei Arreta Emateko Zuzendaritza/ Dirección de Administración Electrónica y Atención a la Ciudadanía

Gestor de Portales Avanzado

Documentos relacionados

Productos

Apoyo

Gestor de Portales Avanzado

Documentos relacionados

Añadir este documento a la recogida (s)

Añadir a este documento guardado

Sugiéranos cómo mejorar StudyLib