Webmasters avanzado 6 - Comunidad de Portales Municipales

Transcripción

MANUAL DE TÉCNICAS
AVANZADAS PARA
WEBMASTERS
PORTALES
MUNICIPALES
MANUAL PORTALES MUNICIPALES PARA WEBMASTERS
CONTROL DE DOCUMENTO
Título del proyecto
CODIGO
TÍTULO
PM-MA-W
MANUAL AVANZADO PARA WEBMASTERS
Elaboración
RESPONSABILIDAD
TÍTULO
Desarrollado por
Davit Marchuet, Carolina Lázaro (Digital Value)
Control de Versiones
VERSIÓN
FECHA
1.0
2 Octubre 2013
OBSERVACIONES
2
INDICE
ELEMENTOS DISPONIBLES DE COMPOSICIÓN...........................5
CARRUSEL MULTINODE..................................................................................................................... 6
FORMULARIOS................................................................................................................................. 9
EL DIRECTORIO DE ENTIDADES...................................................................................................... 11
PANELES PARA ESTRUCTURAR LOS CONTENIDOS................................................................................. 20
COMPOSICIÓN Y PERSONALIZACIÓN DE LOS PANELES.............23
ELEMENTOS QUE INTERVIENEN EN UNA ESTRUCTURA DE PANELES.........................................................24
REESTRUCTURAR LA COMPOSICIÓN BÁSICA DE UNA PÁGINA.................................................................27
PANEL Y PLANTILLA DEL SITIO....................................................................................................... 30
PANELES OBLIGATORIOS Y RECOMENDADOS....................................................................................... 31
OPCIONES DE CONFIGURACIÓN DE LOS PANELES................................................................................33
TÉCNICAS AVANZADAS PARA EL WEBMASTER.......................37
CONFIGURE LOS VALORES PREDETERMINADOS DE SU PORTAL...............................................................38
TRADUCCIÓN DE CADENAS DE TEXTO (MENÚS SIN CONTENIDO)............................................................41
FORMATO DE LAS IMÁGENES........................................................................................................... 44
EXPLORADOR DE ARCHIVOS............................................................................................................ 50
ENLAZAR TWITTER AL PORTAL....................................................................................................... 53
DV MENU / MENÚS A PÁGINA COMPLETA......................................................................................56
COPIAS DE SEGURIDAD................................................................................................................... 58
RESTYLING DEL PORTAL.................................................60
LOS ESTILOS POR DEFECTO DEL PORTAL...........................................................................................61
SU WEB CON ESTILO PROPIO........................................................................................................... 62
IDENTIFICADORES Y CLASES............................................................................................................ 64
IDENTIFICACIÓN DE TODOS LOS ELEMENTOS......................................................................................67
APLICACIÓN DE ESTILOS EN LA EDICIÓN DE CONTENIDOS.....................................................................71
LOS ESTILOS POR PORTAL.............................................................................................................. 72
ACTUALIZACIÓN DE LA HOJA DE ESTILOS POR MEDIO DEL EXPLORADOR DE DOCUMENTOS........................77
CASOS PRÁCTICOS........................................................78
CABECERAS PROGRAMABLES........................................................................................................... 79
CREACIÓN DE UN ESCAPARATE DE CONTENIDOS.................................................................................. 82
3
Introducción
Después de tres años de Portales Municipales la plataforma que utilizan los
ayuntamientos de la provincia de Valencia para el desarrollo de sus webs
municipales ha continuado evolucionando, se han incluido nuevos módulos, y
se han perfeccionado otros, siguiendo las inquietudes mostradas por los
usuarios. Esta evolución de la plataforma, hacia cotas de personalización
mayor, requerirá ampliar la formación de los usuarios y de material didáctico
nuevo, y este es el objetivo que persigue el presente documento.
En este Manual se incluye la información de todas las nuevas funcionalidades
•
Carrusel Multinode
•
Formularios
•
Directorio de Entidades
•
Paginador y Contenidos Relacionados
•
Formatos de imágenes
•
Explorador de archivos
•
Twitter
•
Menús a página completa
•
Estilos por portal
También se repasan algunos elementos importantes de gestión y se
estructuran sus funcionalidades para la implementación de los Estilos por
Portal. Así, su objetivo principal es el desarrollo de los estilos propios por lo
que gran parte de las materias expuestas quedan orientadas a tal fin.
Como siempre, en la Oficina del Proyecto podrá encontrar todo el apoyo
necesario para realizar cualquiera de estas tareas.
4
ELEMENTOS
DISPONIBLES DE COMPOSICIÓN
5
Carrusel multinode
El Carrusel de imágenes es uno de los componentes más populares de la
Plataforma Portales Municipales. El carrusel permite incluir una transición de
imágenes en la web y se ha utilizado intensamente para mejorar la imagen de
muchos portales.
Pero el módulo anterior de Galería de imágenes tenía dos limitaciones,
únicamente podía utilizarse un carrusel de un tamaño en toda la web, y
mostraba una imagen de cada contenido que se incluía en el carrusel. Por eso
se ha querido actualizar el módulo, superando las limitaciones de la versión
anterior, y generalizando su funcionalidad para cubrir todos los usos posibles
de un carrusel de imágenes en la web.
Funcionamiento
El nuevo carrusel es capaz de integrar varias imágenes de varios nodos en uno
mismo y coexistir con diversos carruseles a la vez dentro de una misma
pagina, con efectos y tamaños diferentes.
Añadir y configurar un nuevo Carrusel Multinode
Si quiere un formato de imagen distinto de los existentes por defecto
seleccione. Si utiliza alguno de los tamaños predefinidos puede saltar hasta el
siguiente paso.
Panel de Control  Administrar tamaños de imagen
6
Configure el nuevo tamaño pero construya el nombre conforme el modelo
siguiente: pm2_slideshow_xxx. Consulte el manual del webmaster para más
información sobre la modificación de los tamaños preconfigurados. Sustituir
xxx por el tamaño o la referencia que necesite, por ejemplo
pm2_slideshow_200x400.
Es aconsejable que los cree en función de las zonas, por ejemplo: columna o
central, para poder reutilizarlos.
Posteriormente cree el Tipo de Contenido que definirá los contenidos que
van a aparecer en el Carrusel. Si utiliza uno ya existente no será necesario.
Panel de Control  Administrar tipos de contenido
Edite la plantilla del sitio o el panel donde desee posicionar la galería y añada
el nuevo carrusel en la región que desee.
Panel  Agregar contenido  Portales Municipales  Multinode Slideshow
Escriba el nombre de la galería o déjelo en blanco. Especifique el Tipo de
Contenido que contiene las imágenes y seleccione el formato de la imagen.
7
Despliegue las opciones de
configuración del Carrusel y
determine los valores: mostrar la
descripción de la foto, el tipo de
transición, la permanencia y el
tiempo del efecto.
Pulse Terminar para continuar. Y
no olvide guardar los cambios
para acabar de editar los
paneles.
Pantalla de configuración del Carrusel Multinode
Transiciones
Modelos de transiciones
Puede incluir varias galerías con el tamaño y proporción que desee y con el
efecto de transición que más le guste de los 28 diferentes.
Utilice los carruseles para hacer su portal más dinámico, mostrar
en una columna sus carteles o promocionar sus campañas.
Inserte un carrusel multinode en una columna de su portal de
formación, reuniendo varios carteles.
8
Formularios
Los formularios sirven para recibir información de los visitantes de su web.
Para la composición del formulario que requiera, dispone de gran variedad de
campos configurables.
Panel de Control  Agregar formulario
Aquí encontrará la información básica de un formulario: Título, Cuerpo,
Opciones de menú, Información de la revisión, Información de autoría,
Opciones de publicación y Opciones de ruta URL. Tras configurar estos campos
básicos el gestor de contenidos le abrirá la ventana de creación del
formulario.
Pantalla de edición del Creador de Formularios
En esta página puede crear los campos y configurarlos.
Los campos pueden ser obligatorios u opcionales, pueden tener un valor
predeterminado, y pueden ser privados.
Un valor predeterminado quiere decir que ese campo tendrá un valor por
defecto pero que puede ser cambiado. Si no lo modifica el usuario, tendrá el
valor por defecto. Si tiene conocimientos de PHP incluso podrá programar los
valores.
Un campo privado es aquel que sólo pueden ver las personas que tienen
permisos sobre la administración de la web.
Los campos pueden ser de tipo:
Fecha, correo electrónico, conjunto de campos, tabla de opciones, campo
oculto, una contenido, numérico, separador de páginas, selección de
opciones, área de texto, campo de texto y hora.
Tras configurar los campos necesarios para su formulario configure las
direcciones de correo a las que quiera que lleguen y luego rellene las opciones
de redirección (la página que se adjunta cuando se envía el formulario),
9
asigne un límite de formularios (absoluto, hora, día, semana), el estado
(abierto o cerrado) y los permisos de envío al formulario.
El módulo de formularios le ofrece la posibilidad de visualizar los envíos que
se han hecho para el formulario e incluso descargar los formularios en dos
formatos, Excel y Archivo de texto.
Cree un formulario que facilite a los visitantes la comunicación
directa con el Área de Cultura.
10
El Directorio de Entidades
El Directorio de Entidades de Portales Municipales es una herramienta para la
gestión de información estructurada. El Directorio define un sistema de
consulta y navegación por la información en forma de árbol, unido a una ficha
de datos para cada nodo.
El Directorio es una funcionalidad que facilita la ordenación y categorización
de las empresas, comercios, asociaciones, etc. en su portal municipal.
Asimismo, facilita un nuevo enfoque para organizar contenidos con el fin de
estructurar en forma de árbol: departamentos y áreas, personal, servicios,
etc.
Es un nuevo contenido muy fácil e intuitivo de crear, y con una visualización
y diseño muy amigable que genera un mundo de posibilidades para los
portales municipales.
Empezando a trabajar con el directorio.
Empiece creando el árbol del directorio, la clasificación del contenido que
vaya a crear. Para ello creará términos de taxonomía (similar a los tipos de
contenido y los grupos de carteles) para el directorio de entidades. Estos
nuevos términos le ayudarán a categorizar y ordenar las entidades que irá
creando en su portal.
Panel de Control  Administrar tipos de contenido  Directorio
Y le aparecerá la página de edición de términos de taxonomía que ya
conocerá por los Tipos de Contenido, una funcionalidad básica de Portales
Municipales.
11
Defina y organice sus propios términos.
Puede editar y eliminar términos del directorio existentes o crear nuevos:
¿cómo? Simplemente seleccionando el botón Agregar término y rellenando las
opciones del formulario que se muestra.
Escriba el nombre del término y una descripción (opcional). Cree un nuevo
elemento para Bares y Restaurantes.
Pantalla de edición de taxonomias
12
Dispone también de unas opciones avanzadas desde donde podrá seleccionar
si el término que acaba de crear es hijo de algún término existente; o bien,
podrá crear sinónimos para el nuevo término, de forma que se pueda acceder
a su contenido escribiendo en la url alguno de los sinónimos añadidos.
Por ejemplo: para el nuevo término “Bares y Restaurantes”, elija el sinónimo
“Comer”, de forma que se pueda acceder al listado del directorio “Bares y
restaurantes” desde la ruta “/comer”.
Los sinónimos permiten también traducir los términos entre los diferentes
idiomas en los que se exprese la web.
Opciones avanzadas de las taxonomias
Opcionalmente, asocie a este nuevo término una imagen representativa del
mismo. De forma que tenga una iconografía clara, que haga su sitio más
accesible y navegable a la vez que bonito.
Esto lo puede hacer desde la opción Imagen del término, situada justo
encima del botón Guardar.
13
Seleccione o enlace una imagen para asociarla al nuevo término (recuerde
que ésta es también una propiedad opcional)
Portales Municipales propone una librería básica de símbolos que pueden
utilizarse en su web, pero puede crear con total libertad las colecciones de
iconos que más se adapten al diseño de su portal.
Aspecto del Directorio
Ya lo tiene, ahora sólo pulse el botón Guardar para crear tu nuevo término.
Ya puede crear sus entidades.
Para hacerlo, busque el enlace Crear entidad en el menú de administración.
El enlace aparecerá junto a Crear Contenido.
Cuando pulse sobre el enlace, accederá al formulario de creación de
entidades. Conozca sus opciones disponibles.
14
Pantalla de edición de las Entidades
Nombre: El nombre o título de la nueva entidad.
Descripción detallada: todo el texto y las imágenes que ayuden a definir su
entidad.
Categorías: el término al que está asociado.
15
Ejemplo de categorías disponibles en la edición de Entidades
Contacto: los datos de contacto de la nueva entidad: ciudad, dirección,
teléfono, email, web, datos de la persona de contacto, etc.
Campos de información asociados a las Entidades
Imágenes: galería de imágenes asociada a la nueva entidad.
Cartel: puede asociar un banner o cartel para que enlace con su nueva
entidad.
16
Archivos adjuntos: adjunte documentos a la entidad.
Opciones del menú: desde aquí podrá añadir un enlace en los menús a su
nueva entidad.
Información de la autoría: autor y fecha de creación de la entidad.
Información de la revisión: control de edición y cambios.
Opciones de publicación: puede dejar su nueva entidad como borrador si
desmarca la opción de publicar; o bien promocionarla a la página principal o
hacerla fija en la cabeza de las listas.
¿Dónde se muestran estos contenidos?
A través de menús puede acceder a cada una de las categorías creadas. Para
hacerlo necesita incorporar a su portal un menú de navegación por el
directorio.
Navegación del Directorio usando Nice Menus
También puede acceder a los listados desde la ruta de su portal "http://www.
[nombre-pueblo].es/directorio/[nombre-término]”. Para su ejemplo [nombretérmino] será Bares y Restaurantes.
Incluir un menú directorio en el portal
Los menús de Directorio pueden ser desplegables o no desplegables. Y por lo
tanto aprovechan todas las características de visualización de menús que se
presentan en la sección correspondiente del manual del webmaster. También
las características de diseño web.
Observe en la ilustración anterior un detalle del menú de directorio
desplegable.
Para agregar un menú directorio como el del ejemplo en su portal, acceda a
la edición de la plantilla del sitio.
17
Panel de Control  Editar plantilla del sitio
Pantalla de la Plantilla del Sitio
Seleccione el botón de opciones del panel donde quiera que aparezca el
menú del directorio. En el ejemplo, hay que colocar el menú en la columna
izquierda; seleccione el botón de opciones de la columna izquierda y
seleccione la opción Crear contenido.
Elija la categoría Misceláneo y el tipo de contenido Nice Menú 3, que es un
menú vertical con submenú desplegable que está asociado al directorio.
Una vez seleccionado y configurado el menú, sólo queda arrastrarlo a la
posición deseada.
NOTA: Los menús se actualizan automáticamente al realizar cambios en el
vocabulario Directorio.
18
Ejemplo de entidades públicas.
Navegación del Directorio
Seleccione cualquier categoría para ver sus entidades.
Ficha de las Entidades
El Directorio de entidades es un recurso fundamental para
navegar por un entorno estructurado. Por la complejidad de los
pasos que requiere su instalación, puede que le resulte necesario
contactar con la Oficina del Proyecto. No lo dude.
Incluya un directorio de Asociaciones Municipales en su web de
formación.
19
Paneles para estructurar los contenidos
Los contenidos disponen de varios recursos que facilitan tanto la navegación
como el enriquecimiento del mismo para hacerlo mucho más atractivo.
Composición automática de los contenidos
Paginación automática
Una de las posibilidades que ofrece el gestor de contenido es la de paginar un
contenido extenso que ha sido subido como contenido único al gestor. Para
ello utiliza el módulo Pagination.
Pagination organiza en distintas páginas un contenido único extenso, y crea
automáticamente una tabla de contenido del mismo.
Cualquier tipo de nodo (Página, historia, etc .) se puede paginar de forma
automática. Siempre que utilice el separador de página dentro de un
contenido se creará automáticamente una tabla de contenido y se paginará.
El separador de página por defecto es la etiqueta <h6>.
20
Imagen del paginador
El módulo de paginación automática es muy útil para fraccionar contenidos
extensos que, sin embargo, desea mantener unidos. Esto tiene una ventaja
importante de mantenimiento y simplifica la gestión del portal.
Plantilla del Sitio  Agregar panel  Misceláneo  Tabla de Contenidos Paginación
Contenidos relacionados
Los contenidos relacionados es una utilidad de Portales Municipales que
proporciona una manera sencilla de mostrar contenidos análogos con el que
está visualizando.
21
Imagen de los elementos relacionados
Por defecto, el panel de los Contenidos Relacionados suele presentarse en la
parte inferior del nodo, pero su ubicación es libre.
Plantilla del Sitio  Agregar panel  Portales Municipales  Contenidos
Relacionados
Por desconocimiento, los Paneles de estructura de contenidos se
han usado muy poco y tienen una capacidad enorme de dinamizar
su portal. Piense en ellos a la hora de diseñar su sitio web.
Maquete en la Página del Sitio el panel de Contenidos
Relacionados. Para ello cree primero el nodo “Casa de la
Cultura” y relaciónelo con “Área de Cultura” y “Semana cultural”
22
COMPOSICIÓN Y PERSONALIZACIÓN DE LOS
PANELES
Los webmaster ya conocen la manera de componer sus portales por medio de
paneles pero ahonde en todas sus posibilidades de cara a personalizar al
máximo el aspecto de la web.
La presentación de los contenidos que componen la página se realiza
dividiendo en porciones, como si de una cuadricula se tratara, el espacio total
o lienzo. A estos contenedores resultantes se les denominan Regiones y son
los responsables de albergar los paneles.
Panel de Control  Administrar Páginas  Mostrar Maquetador de Diseño
23
Elementos que intervienen en una estructura de paneles.
Repase todos sus elementos y propiedades:
Lienzo
Opciones del lienzo
Es el área global que puede dividir para componer su página. El lienzo de la
Plantilla del Sitio es por tanto la base de toda la página, mientras en el del
Panel sólo lo es de la superficie que ocupará este.
Desde la configuración del lienzo podrá identificar las clases de todos sus
componentes y determinar la separación de sus elementos.
Si no va a usar CSS propias todos los valores deben de estar vacíos.
Asegúrese que la opción Scale fluid widths for IE6 está desmarcada y que el
Ancho Fijo no contenga ningún valor.
24
Columnas
Opciones de la Columna
Son elementos verticales que pueden tener un ancho fijo o flexible, adaptable
a la fila que la contiene. Las columnas están compuestas únicamente por
FILAS
Como norma general elija el comportamiento Fluido para que se adapte al
ancho disponible. Seleccione Fijo cuando quiera especificar un ancho
concreto.
Filas
Opciones de las Filas
Las filas son elementos horizontales que pueden contener COLUMNAS o
REGIONES. Seleccione en el desplegable su elección.
Si la fila contiene Columnas podrá dividir el área tantas veces como lo desee,
si contiene Regiones sólo podrá anidar varias en columnas colocadas una al
lado de la otra.
25
Regiones
Opciones de las Regiones
Las regiones son los contenedores donde se ubican los paneles, que son los
encargados de posicionar un contenido o servicio. Por ejemplo, en una misma
región podría haber un listado de elementos destacados, un conjunto de
banners y el calendario de eventos.
Puede haber varias regiones dentro de una misma columna, consiguiendo así
un mayor control sobre la presentación de los contenidos.
Las Regiones necesitan obligatoriamente un título (no visible en la
composición final) y se comportan como las columnas a la hora de ajustar su
ancho. Elija el comportamiento Fluido para que se adapte su ancho al 100%.
Seleccione Fijo cuando quiera especificar una medida concreta.
26
Reestructurar la composición básica de una página
Existen muchos modelos preconfigurados para desarrollar inmediatamente
páginas simple cuya estructura no puede modificarse posteriormente y
tampoco permite ninguna personalización. Con estos modelos cubrirá las
necesidades básicas de distribución de contenidos con una, dos o tres
columnas. Cada una de ellas integra diferentes posibilidades de diseño.
Modelos de estructuras de paneles
Pero la manera más oportuna de componer una página, por sus prestaciones y
posterior edición, es la estructura llamada de Constructores. Esta es la más
adecuada para designar clases propias e integrar regiones conforme al diseño
particular de cada uno.
Vea un ejemplo:
Al crear una nueva plantilla de Constructores para el sitio web, la estructura
básica por defecto seria la que se muestra en la ilustración.
27
El lienzo se divide en columnas, las columnas en filas y las filas pueden
contener nuevas columnas o directamente regiones.
Para fraccionar esta estructura tenga siempre muy presente que sólo se
pueden añadir columnas al principio y al final, nunca entre dos que ya
existan. Por este motivo es aconsejable que planifique muy bien lo que
necesita y que incluso prevea dejarse columnas en blanco por si en alguna
ocasión las necesitara.
Para que esta columna contenga dos Filas, una debajo de la otra, seleccione
en el cursor la pestaña de Columna y marque la opción que necesite. Como ya
se ha dicho podrá añadir una fila arriba o debajo de la ya existente.
Para dividir el espacio verticalmente seleccione la pestaña Lienzo y añada
una nueva Columna a la derecha o a la izquierda. Tenga en cuenta que al
hacerlo deberá indicar si la nueva columna será fija o fluida, es decir de un
tamaño concreto o adaptable al ancho disponible.
Los espacios resultantes podrá dividirlos tantas veces como necesite el diseño
preliminar que le sirve de modelo. Cuando no necesite dividir más el espacio
añada las regiones. Recuerde que después de incluir una región puede incluir
otras dentro de una misma FILA, pero sólo a los lados.
Vea el desarrollo paso a paso:
Paso a paso de la división de la zona única en el modo Constructores
A la izquierda de la ilustración está el modelo que a conseguir. A la derecha
los seis pasos en los que dividir el Lienzo.
28
Paso 1. Esta es la sección por defecto al crear una nueva página. Consiste en
una zona única.
Paso 2. A la columna se le añade una fila inferior.
Paso 3. A la columna se le vuelve a añadir otra columna inferior.
Paso 4. En la fila central se añade una columna fluida y luego otra fija a su
izquierda con el objeto de controlar su ancho a un tamaño en píxeles.
Paso 5. A la columna fluida se le añade una fila y seguidamente otra debajo.
Paso 6. En la última fila del paso 5 se añade una región fluida e
inmediatamente otra fija a su derecha a los mismos píxeles que creó en el
paso 4 para que ambas sean iguales. Si en vez de regiones se incluyen
columnas se haría como en el paso 4 añadiendo una región en cada fila de
cada columna. Esto en el caso de querer tener un diseño más flexible.
29
Panel y Plantilla del sitio
En la portada de su página web, una vez se haya
registrado correctamente, aparecen las pestañas
Editar Panel y Editar la Plantilla del Sitio. Las
dos opciones son casi idénticas y se prestan a
confusión pero tiene mucha lógica que esto sea así
ya que ambas hacen lo mismo. La diferencia viene
dada básicamente porque una estructura contiene
a la otra.
¿Cómo? Ya se explicó en el capítulo Elementos que
intervienen en una estructura de paneles que en la plantilla los contenidos
se integran por medio de paneles. En la Plantilla del Sitio, uno de esos
paneles es el encargado de insertar el contenido de la página. A este panel se
le llama Page content y su inclusión en la Plantilla del Sitio es obligatoria.
Así pues, la opción Editar la Plantilla del Sitio afecta al marco que se
repetirá durante la exposición de todos los contenidos, mientras que Editar
Panel afecta exclusivamente al contenido variable de cada página. Es como
la foto y la moldura que la rodea.
Por ejemplo, la portada principal donde se muestran las noticias, el Saluda
del Alcalde, el listado de BIMS o el resultado de una búsqueda, estarán
envueltos siempre por la Plantilla del Sitio.
Integración de los contenidos y paneles en el Site Template
30
Paneles obligatorios y recomendados
Los paneles Mensajes de Página y Contenido de Página son necesarios,
asegúrese de su correcta colocación en la Plantilla del Sitio.
Page Messages / Mensajes de Página
Obligatorio - Ofrece valiosa información para el administrador de la página y
muestra las pestañas de edición de la Plantilla del Sitio y de Panel.
Page Content / Contenido de Página
Obligatorio - Incluye en la maquetación final el Contenido de la Página. Sin
este panel sólo se visualizará el marco diseñado. Por ejemplo, al seleccionar
el Saluda del Alcalde no se obtendría ningún resultado.
Mensajes del pie de página
Obligatorio - Incluye los anagramas de Portales Municipales y de la Diputación
de Valencia. Estos logotipos son obligatorios y su exclusión podría
comportar las medidas correctoras que la Excma. Diputación considerase.
Estos otros paneles son recomendables:
31
Menú de Administración
Recomendado - Su presencia asegura al administrador la navegación por los
diferentes apartados de la administración
Idiomas
Recomendado - Facilita al visitante el cambio de idioma. Este panel no esta
disponible si la web no es multilingüe.
No olvide colocar en la Plantilla del Sitio los paneles de Contenido
de Página y Mensajes de Página.
32
Opciones de configuración de los Paneles
Los Paneles tienen algunas opciones que hay que conocer.
Activar / Desactivar el panel
Desde esta opción activará o desactivará el panel controlando así su presencia
en la composición de la página.
Al desactivarlo no lo estará eliminando.
Para volver a integrar este panel en la composición bastará con activarlo
nuevamente.
Título del Panel
Al seleccionar esta opción convertirá el Panel en el responsable para proveer
el título de la página. Cuando un panel cede su título a la página queda
rodeado por un borde con un grosor muy superior al resto y con un color más
intenso.
Por regla general, esta opción debe de estar seleccionada en el panel Page
Content de la Plantilla del Sitio.
Opciones
Configura las diferentes opciones que pudiera tener un panel, no todos los
paneles tienen las mismas.
Estilos CSS
Suministra al panel una etiqueta para su personalización a través de las hojas
de estilo (CSS). La utilidad de esta se explica ampliamente en el capítulo
Nombrar clases propias dentro del apartado A los Paneles.
Estilo
Existen varias opciones de estilos de configuración del Panel. Desde el tema
DivalWeb II sólo se ha desarrollado en profundidad el modelo Skinr por su
versatilidad. Skinr es un conjunto de atribuciones preconfiguradas para cada
tipo de panel y desde el tema por defecto se han diseñado las CSS necesarias
para atender ampliamente cualquier combinación.
33
Desde un tema nuevo, desarrollado por completo ex profeso para un portal,
con su consiguiente programación de las CSS, podrían utilizarse otras
opciones. Estos estilos, que se usan para ofrecer alternativas de diseño a los
paneles, no tienen mucho sentido en un diseño particular ya que la forma de
personalización debería estar basada en un correcto etiquetado.
Las CSS nuevas deberían controlar la presentación gráfica de cada una de ellas
ya que la herencia de estas CSS tienen prioridad. En este caso, sólo el
diseñador web deberá decidir si el uso o no de estos estilos es adecuado.
Estilo
Divalweb II
Tema personalizado
Sin estilo
Por defecto
Por defecto
Bloque de Sistema
Estilo personalizado
Sin marcado ninguno
Esquinas redondeadas
Skinr
Uso libre
Posible colisión de estilos
Desaconsejado
Consulta también el Boletín de Actualidad 3 de Portales
Municipales que podrás encontrar en la web del proyecto
portalesmunicipales.dival.es. Este número es una guía de la
plantilla DivalWeb II y se centra especialmente en la infinidad de
estilos SKINR ofrecidos.
Reglas de visibilidad
Las Reglas de Visibilidad son filtros que
exponen el panel a una condición para ser
mostrado.
Todas las reglas pueden aplicarse en
negación.
Versión accesible: Disponible cuando se
activa el módulo de accesibilidad.
Cadena comparación: Compara la URL con
una cadena de texto. Pueden usarse
expresiones regulares.
Cadena longitud: Comprueba la longitud de la ruta. Puede distinguir
mayúsculas de minúsculas.
34
Código PHP: Si se cumple el código programado o no.
El contenido existe: Comprueba que existe un contenido concreto.
OG Group: Verifica si se pertenece a un grupo. Sólo si el módulo está activo.
Página principal: Actúa cuando se está en la portada.
Tema actual: Cuando esta activado un tema.
Texto: Ruta de la URL: Sirve para comparar una cadena con la ruta. Puede
contener expresiones regulares.
Usuario: permisos: Condiciona a un permiso su visibilidad.
Usuario: Idioma: Filtra por el idioma en curso.
Usuario rol: Permite atribuir el rol para el cual es visible el panel.
Estilo
Riesgo
Relevancia
Versión Accesible
Cadena de comparación
Cadena de longitud
Código PHP
El contenido existe
OG Group
Pagina principal
Tema actual
Texto Ruta de la URL
Usuario Permisos
Usuario Idioma
Usuario Rol
Sin riesgos importantes
Arriesgado
Peligroso
Ninguna sin el módulo
Ninguna
Útil
Muy útil
35
Cree una nueva Plantilla del Sitio usando el formato Constructores
según la siguiente plantilla:
Coloque en el región central inferior el Page Content
36
TÉCNICAS
AVANZADAS PARA EL WEBMASTER
37
Configure los valores predeterminados de su portal
Mediante el ajuste de los valores podrá controlar algunas aplicaciones y
comportamientos que podrían serle de utilidad.
Panel de Control  Configure Portales Municipales
Ajustes de Portales Municipales
Enlaces externos en nueva ventana
Seleccione esta opción para abrir los enlaces externos en una nueva ventana.
Archivos adjuntos en nueva ventana
Seleccione esta opción para abrir los archivos adjuntos en una nueva ventana.
Longitud máxima del texto de descripción de los archivos adjuntos
Defina la longitud máxima del texto de descripción que aparecerá en la tabla
de archivos adjuntos. Establézcalo a 0 para mostrar la descripción completa.
38
Conservar ficheros
Marque esto si desea preservar los ficheros guardados en el servidor. Con
esta opción sus archivos, aunque no se estén aprovechando, denegaran la
petición de borrado con un mensaje de en uso.
Mostrar enlaces de edición
Incluye un icono delante del título de cada contenido para acceder
directamente a su edición. Puede desmontarse ligeramente el aspecto del
portal después de registrarse.
Ocultar los temas del sistema
Seleccione esta opción para ocultar los temas del sistema en la pantalla de
edición de temas.
Antigüedad máxima de las sesiones inactivas
Elimine las sesiones que son más antiguas de la fecha especificada.
Raíz como la página principal
Al accionar esta opción el logo del sitio no vinculará con la portada del grupo.
Sólo disponible con el módulo OG.
Optimizar archivos CSS
El gestor de contenidos puede optimizar automáticamente los recursos
externos como las hojas de estilo CSS, lo que puede reducir el número y
tamaño de las peticiones que recibe el sitio web. Los archivos CSS se pueden
agregar y comprimir en un único documento. Estas optimizaciones opcionales
pueden reducir la carga del servidor, el consumo de ancho de banda y el
tiempo de carga de las páginas.
En Portales Municipales, por la gran cantidad de módulos instalados, la
cantidad de páginas CSS superan las admitidas por el navegador Internet
Explorer, lo que impide la carga total de este tipo de recursos. La
consecuencia de esta contrariedad es la incorrecta carga de las CSS y por
consiguiente la deficiente aplicación de los estilos.
Utilice pues la Optimización de archivos CSS para reducir la carga del servidor
y para garantizar la correcta aplicación de las CSS en Internet Explorer.
39
Tenga en cuenta que, durante el proceso de escritura de las hojas de estilo,
la optimización debe estar desactivada ya que los cambios no se aplican hasta
que se hayan compilado nuevamente.
40
Traducción de cadenas de texto (menús sin contenido)
La traducción de cadenas de texto se utiliza fundamentalmente por los
administradores del portal para transcribir los enunciados sin contenido de los
menús. Su uso es muy simple y basta con realizar una búsqueda de cualquier
frase presente en el portal que se desee traducir para comprender su
funcionamiento.
Cada cadena de texto está escrita en un idioma de origen, mayoritariamente
en inglés. Estas frases tienen asociada una traducción en cada uno de los
idiomas activos en el portal. Para realizar la búsqueda tendrá que escribir el
texto exactamente como lo visualice, respetando las mayúsculas.
Panel de Control  Traducir Cadenas de Texto  Buscar
Vea un caso concreto. Por ejemplo, en el menú principal la opción Perfil del
Contratante no se traduce al cambiar de idioma ya que este no tiene un
contenido por cada lengua disponible. Es el típico caso de un elemento que se
creó directamente en el administrador de menús y que vincula a una página
externa. Para traducirlo, bastará con escribir el texto en el buscador y
editarlo.
41
Seleccione de la lista de resultados el correcto.
Y rellene los campos vacíos.
42
Cree el elemento de menú “Enlace a la GVA” que enlace con su
correspondiente página y traduzca la cadena de texto:
43
Formato de las imágenes
Ha llegado el momento de poner orden en los contenidos. Dé un paso más en
el cuidado de los contenidos generados y controle el formato de las imágenes.
La plataforma Portales Municipales soporta la manipulación automática de
imágenes. El sistema genera automáticamente formatos de distintos tamaños
que podrán ser utilizados en diferentes lugares del portal.
Un caso típico se produce cuando se incluyen imágenes de gran tamaño pero
que no son prácticas para la visualización de resúmenes o para ser mostradas
junto a otras imágenes, cómo en una galería, o para acompañar a un
contenido.
La manipulación automática de imágenes permite normalizar los tamaños de
las imágenes mostradas, independientemente del tamaño original de éstas, y
así asegurar una presentación estéticamente correcta. Este tratamiento,
además de generar una imagen para cada tipo de presentación, asegura un
rendimiento optimo de recursos al reducir sensiblemente el número de Mb.
En su portal puede usar cualquier tamaño de fotografía, tanto verticales como
horizontales, pero la plataforma Portales Municipales aconseja que todas sean
horizontales y proporcionales entre si para evitar desajustes.
Las imágenes proporcionadas se componen
adecuadamente y se garantiza la perfecta
presentación en listados, resúmenes, etc.
Usar imágenes sin respetar la proporción implica el
desajuste de la presentación de las ilustraciones.
Formatos de fotografía
Cualquier formato es bueno para mantener una presentación correcta, incluso
otro que el webmaster decida. Lo importante es apostar por uno y
mantenerlo.
La Relación de Aspecto, proporción de aspecto o razón de aspecto
(traducciones literales de la expresión en inglés aspect ratio) de una imagen
44
es la proporción entre su anchura y su altura. Se calcula dividiendo la anchura
por la altura de la imagen visible en pantalla, y se expresa normalmente como
«X:Y».
Diversos formatos muy comunes en fotografía y video
Las relaciones de aspecto más comunes en fotografía son las expuestas en el
gráfico anterior, pero 4:3 es la relación más normal en monitores y
televisiones aunque ya empieza a popularizarse el formato llamado
«panorámico» (16:9). Por esto, Portales Municipales opta por este mismo
formato, el cual se adapta perfectamente a la salida por defecto de la
mayoría de cámaras digitales.
Para más información de proporciones en fotografías consulte la página de
Wikipedia = http://es.wikipedia.org/wiki/Relación_de_aspecto
Calidad de las imágenes
La calidad de las imágenes no se ve alterada al ser subidas al portal. Sólo para
aquellas que necesitan un redimensionado del módulo Image Cache se ven
afectadas por una compresión. Entonces, pueden intervenir varios criterios.
1. La compresión de Image Cache, establecida por defecto en un 70%.
2. El escalado que Image Cache aplica a todos los modelos configurados.
3. Los posibles ajustes de las CSS que acoplan cada imagen a su
contenedor.
Cualquiera de estas opciones o la combinación de todas ellas, puede influir en
la óptima calidad del aspecto de los mapas de bits.
45
Si considera que su portal debería mejorar la calidad de sus
imágenes llame a la Oficina del Proyecto para reducir la
compresión.
Proporción de las imágenes
El formato es la proporción entre el ancho y el alto, independientemente de
la cantidad de píxeles que contenga. Así pues, una imagen de 200x150 píxeles
seria proporcional a otra de 1000x750 píxeles, ya que las dos son del formato
4:3. Al mantener la proporción en todas las fotografías, se asegura el orden
con el que se visualizará el portal.
Es muy importante que el usuario de Portales Municipales sepa preparar sus
imágenes para mantener la proporcionalidad pero bastaría, de entrada,
cargarlas en cualquiera de los tamaños que se indican. Estos son todos del
formato 4:3, que es la proporción recomendada por la Plataforma.
Tamaños proporcionales a 4/3
46
Para ajustar su foto a uno de los tamaños propuestos seleccione uno con el
cual, tanto el ancho como el largo, sean inferiores a la imagen original. Si usa
un programa de retoque fotográfico redúzcala hasta conseguir que uno de los
lados de la foto se ajuste a una de las medidas propuestas teniendo la
precaución que el otro lado debe quedar comprendido por el formato o bien
superarlo.
Ajuste de la imagen a un formato 4/3
La funcionalidad “Image Cache”
Esta funcionalidad del sistema crea copias de las imágenes que suba al portal
a diferentes tamaños predefinidos. De esta manera cuando suba una imagen
en una noticia no será la imagen original que subió la que se vea a lo largo de
la navegación por el portal.
Es importante que la imagen que ponga en los contenidos guarden una
proporción 4:3 ya que de esta manera cuando visualice la portada tendrá un
aspecto agradable.
Las imágenes se redimensionan de varias maneras, por el ancho de la imagen,
por el alto, por el ancho y el alto o se pueden recortar.
Tamaño de las imágenes afectadas por Image Cache
Cualquier fotografía añadida a un nodo puede ser visualizada en un tamaño
superior al maquetado por medio de una aplicación que oscurece la pantalla y
sobrepone la ilustración. Esta exposición se realizará al tamaño original o al
máximo que permita su monitor.
La mayoría de pantallas hoy en día son de 19 pulgadas por lo que el tamaño,
mas o menos habitual, podría establecerse en 1280x1024. Es decir, una foto
mayor nunca se vería en su resolución original. Esto hace completamente
improductivo trabajar con tamaños que sobrepasen esta medida, o incluso,
bien pensado seria una torpeza, ya que los Mb que ocupa una imagen de
4000x3000px serian los mismos aún mostrándose reducida en un monitor de
1280x1024.
47
Así pues, cualquier imagen no debería ser superior a 1280x1024 o mejor a
1280x960 para ser proporcional a 4/3. Con este tamaño conseguirá guardar las
fotos a la máxima calidad útil y garantizar un buen original para que Image
Cache pueda troquelar las que necesite a inferiores resoluciones.
Para conseguir un diseño cuidado tenga en cuenta:
Independientemente de los tamaños, decida que formato deben
de tener sus imágenes y adjúntelas siempre comprobando que
sean horizontales y proporcionales.
Tamaño de los banners afectados por Image Cache
Teniendo en cuenta que el ancho de su página es de 960pixeles, y que por
tanto cualquier banner nunca superaría esta limitación, se podría establecer
como un tamaño máximo adecuado para los banners del portal de 1000
pixeles de ancho.
Para conseguir que todos tengan una misma proporción y similitud, se
aconseja realizar una plantilla de 1000 pixeles de ancho por el alto que
considere con algún programa fotográfico. Teniendo un modelo con el cual ir
construyendo todos los carteles que necesite, le facilitará muchísimo el
trabajo de creación y, lo más importante, conseguirá la uniformidad de todos
ellos.
Por ejemplo, incluya en su plantilla una base gráfica, un texto para modificar
y un gráfico para sustituir.
Modelo de Banner
Comportamiento por defecto
Por defecto, las imágenes de las noticias destacadas en la portada se
redimensionan a un ancho 250px, si la imagen es más grande la reducirá a
este tamaño, pero si es mas pequeña la ampliará. Es conveniente que las
48
imágenes tengan un tamaño mayor a 250px ya que al ampliar se verán
pixeladas.
Para el resto de noticias en la portada ocurre algo parecido, pero también se
limita el alto de la imagen. El ancho máximo es 200px y el alto máximo 150px
esto quiere decir que manteniendo la proporción de la imagen original se
mostrará la imagen con un tamaño máximo de 200px x 150px.
Las imágenes que se muestran al pie del contenido también son miniaturas de
las originales en este caso se redimensionan para tener un ancho de 100px
Comportamiento avanzado
El webmaster puede definir los estilos del Image Cache para asegurar la
perfecta composición de las fotografías. Entendiendo que lo ideal es ajustar
siempre las imágenes a 4:3, con el comportamiento avanzado se consigue
asegurar este procedimiento, por lo que cualquier descuido no tendría
ninguna repercusión en el aspecto. Ahora bien, en esta práctica se podría ver
afectada parte de la imagen ya que el sistema cortará automáticamente el
sobrante del gráfico.
Funcionamiento del Image Cache
Ilustración de los diferentes comportamientos del Image Cache. En la primera
imagen el comportamiento actual, sólo escalado de la imagen. En el segundo
lugar el comportamiento avanzado donde aparte de escalar la imagen se corta
desde su centro. En el tercer lugar, el segundo comportamiento con las
imágenes pretratadas.
49
Explorador de archivos
El explorador de archivos es una potente herramienta que permite navegar,
organizar y borrar archivos en el servidor del portal.
Imagen del Explorador de Archivos
Se puede acceder a él de varias maneras:
Desde la página de usuario
El enlace de esta página esta en el menú Administración, al acceder a la
página hay una pestaña con el explorador.
Mi Cuenta  Explorador de Documentos
Pantalla del usuario donde se puede acceder al Explorador de documentos
Desde el Editor de Textos
Al seleccionar la opción Imagen del editor, ya sea en un nodo o en un panel,
tiene la posibilidad de seleccionarla desde el explorador. Para eso hay que
50
seleccionar el botón Ver servidor y en una nueva ventana se le abrirá el
explorador.
Panel de Control  Agregar Contenido
Desde los campos Imagen y archivo
En el momento de subir una imagen o archivo desde las pestañas verticales de
la edición o creación de un nodo.
Vista de Edición de Nodo
Panel de Control  Agregar Contenido
Opciones del explorador:
Barra de acciones
Subir un archivo
Desde esta opción suba imágenes, archivos... los formatos permitidos son : gif
png jpg jpeg txt doc xls ppt pps odt ods zip rar 7z tar gz bz2 pdf
Eliminar
51
Desde esta opción borre el archivo que tenga seleccionado.
Redimensionar
Sirve para modificar el tamaño de la imagen que tenga seleccionada. Cambia
el tamaño pero no recorta la imagen. Puede crear una nueva o sobrescribir
la imagen si desmarca la opción Crear nueva imagen.
Crear nueva carpeta en el explorador de documentos
•
Directorio: Puede crear y eliminar carpetas.
o Para crear una nueva hay que seleccionar la carpeta que la va a
contener, escribir el nombre y pulsar el botón Agregar.
o Para borrar una carpeta hay que seleccionar la carpeta que la
contiene desplegar la lista y seleccionar la que desee eliminar.
•
Insert file, esta opción aparece cuando accede al explorador desde el
editor, o desde adjuntar imágenes o archivos, lo que le permite
seleccionar un archivo para que se use en su contenido.
52
Enlazar Twitter al portal
Si quiere tener su cuenta de Twitter actualizada con la información publicada
en el portal, la manera más practica es enlazar ambas webs. Con esto
mantendrá ambas plataformas actualizadas sin necesidad de mantener
páginas diferentes. La tendencia es hacer del portal web el centro de
suministro de recursos para las redes sociales, no al contrario.
Para activar el servicio de publicación en Twitter es imprescindible disponer
previamente de una cuenta y contactar con la Oficina de Portales Municipales
para activar los módulos OAuth , Twitter y Twitter Post y configurar los
permisos oportunos. La configuración a partir de aquí ya depende de los
webmasters.
Admin  Twitter
Configurar Twitter
Entre en las opciones de Twitter y cree su aplicación en la web de Twitter.
Vea en la imagen el enlace desde donde creará la aplicación.
Pantalla de opciones de Twitter
53
Rellene los detalles de la aplicación, el nombre y la descripción que quiera
poner , el Website es la dirección de su web y el Callback URL es un dato
que tiene en la configuración de Twitter en su web, acepte las políticas,
resuelva el captcha y guarde.
Para continuar cree la configuración asignándole permisos de acceso de
lectura y escritura Read and Write , permítale a conectarse a Twitter Allow
this application to be used to Sign in with Twitter y actualice la aplicación
Update this application's settings.
Pantalla de configuración de la APP de Twitter
Con esto ya tiene su aplicación creada ahora configure su portal.
54
Configurar el portal
Copie las claves Consumer key y Consumer secret que aparecen en la web de
twitter en la pestaña de detalles. Estas claves hay que ponerlas en sus campos
correspondientes
en
la
página
http://municipio.portalesmunicipales.es/admin/settings/twitter/settings
(sustituya municipio por el dominio de su portal). Guarde los nuevos datos.
Tras esto añada en su configuración la cuenta. Para ello vaya a la pestaña
Twitter y seleccie Go to Twitter to add an authenticated account que
conectará con Twitter y preemítale conectar. Tras esto aparecerá su
aplicación en el portal.
Vaya a la pestaña envío donde especificará que el tipo de nodo a publicar es
contenido y opcionalmente puede indicarle que publique automáticamente
por defecto cada vez que cree un contenido. Tras esto guarde la configuración
y ya puede empezar a publicar su contenido en Twitter
No dude consultar con la Oficina del Proyecto para configurar este
módulo en caso de quedarse atascado en su instalación.
55
DV Menu / Menús a página completa
El DV Menu es un sistema con el cual mostrar dentro del contenido de la
página los elementos hijos de una opción de menú. Es una opción perfecta
para evitar asociar una URL a un elemento padre, como por ejemplo El
Ayuntamiento, El pueblo, Directorio, etc. Al mismo tiempo se asocia una
consecuencia lógica al seleccionar dicho elemento.
DV Menu por defecto
Su aplicación es idónea para mostrar más acentuadamente los contenidos que
agrupa.
La manera de accionar este recurso es muy simple. Basta con incluir en la ruta
del menú el texto dvmenu seguido de una barra y el número de item que
aparece en la ruta de la barra de direcciones de su navegador. Es decir,
dvmenu/xxx siendo xxx el número.
Panel de Control  Administrar menú
56
Pantalla de edición de menús
Incluso se puede personalizar su diseño para ilustrar las diferentes
alternativas si el webmaster se propone modificar las CSS.
DV Menu modificado por medio de las CSS
57
Copias de seguridad
Realizar una copia de seguridad le garantizará siempre una imagen congelada
de su portal en un momento puntual. Esto es especialmente conveniente
cuando vaya a realizar cambios de diseño ya que el proceso es muy rápido y
supone un auténtico salvavidas en muchos casos. Con las copias de seguridad
podrá restablecer estados anteriores que le corregirán cualquier cambio no
deseado, además de servirle como un tradicional sistema de backup.
Panel de Control  Crear Copias
Crear una Copia de seguridad
El nombre del archivo de su copia se añadirá automáticamente. Añada una
descripción que le ayude a recordar el momento por el cual la realizó. Por
ejemplo, si ha realizado la copia porque iba a efectuar un cambio de
maquetación indíquelo, de esta manera si necesita una aclaración sabrá
escoger la copia más conveniente.
Pantalla de creación de copias de seguridad
Administrar y borrar copias de seguridad
Seleccione Administrar si desea acceder a un listado de sus copias. Al
seleccionar cada una de ellas se desplegará la información asociada.
Observe especialmente el texto que figura debajo del nombre del archivo ya
que esta es la descripción que se introdujo al realizar la copia.
58
Para borrar seleccione el botón Eliminar y confirme el borrado del archivo.
Esta acción no se puede deshacer.
Restablecer una Copia de seguridad
Seleccione la pestaña Restablecer copias y elija la que desee recuperar.
Pulse el botón Reiniciar para restablecer la copia antigua.
Realice copias de seguridad antes de realizar cualquier cambio
importante en la estructura de su portal.
Cree una copia de seguridad de su portal de formación.
59
RESTYLING
DEL PORTAL
60
Los estilos por defecto del portal
Los estilos del portal vienen determinados por
una hoja de estilos. En ella se han definido
todos los elementos que componen el portal,
incluso las diferentes opciones de presentación
aplicables por medio de los SKINR (disponibles
sólo para el webmaster) Estos estilos
determinan pues el aspecto de las páginas.
Cuando crea un contenido haciendo un uso
excesivo de las opciones visuales del editor,
como el tamaño de la fuente, el color, la
familia, el justificado, etc. está diseñando una
página cuyo aspecto diferirá notablemente de la
regla general. Es muy normal que cuando se
producen contenidos con esta libertad, la
cantidad de páginas con estilos diferentes acabe
molestando a los visitantes, ya que al navegar
se visualizan los contenidos con formatos
diferentes.
Un ayuntamiento no debe de caer en este error.
Estéticamente se desaconseja el uso de
diferentes grafismos a lo largo de la navegación
ya que proporcionan al visitante una visión poco
afortunada. La línea gráfica debe ser aprobada por el webmaster y en todo
caso usar los estilos definidos por la plataforma o por una hoja de estilos
propia.
A la izquierda todos los contenidos guardan el estilismo del portal. A la derecha, cada contenido se ha
creado con estilos caprichosos. La sensación del visitante al navegar es muy negativa.
61
Su web con estilo propio
Algunos ayuntamientos encargan los trabajos de estudios de diseño para que
les elaboren un proyecto de marca. De esta memoria se desprende el criterio
por el cual se regula el grafismo, la estética y el comportamiento de todo lo
relacionado con la imagen corporativa del consistorio.
La adaptación de esta guía al portal municipal conviene que sea tratada de
manera profesional y objetiva por personal especializado, el cual desarrollará
el estilo propio del portal de acuerdo a las especificaciones del diseñador.
Los portales que requieran de un estilo propio deben de usar la funcionalidad
Estilo por portal que la plataforma les ofrece. Su uso sólo se recomienda a
personal muy especializado, con los conocimientos necesarios para programar
una hoja de estilos adecuada.
¿Por qué una CSS por portal?
La hoja de estilos personalizada es la evolución natural que Portales
Municipales ofrece a sus usuarios y supone la implementación del recurso
gráfico adecuado para poder adaptar a los criterios estéticos corporativos.
Con esto conseguiremos:
•
Situar los elementos en la distribución que deseemos.
•
Adaptar el estilo gráfico a las necesidades del consistorio.
La personalización de las CSS
La plataforma de Portales Municipales ofrece un tema libre de las herencias
de los estilos de la plataforma, pensado para ser la base perfecta que
cualquier diseñador web necesita para crear el suyo.
Jerárquicamente, esta CSS tiene prioridad sobre las anteriores.
Introducción a las CSS
Las Hojas de Estilo en Cascada se conocen habitualmente por CSS. Toma sus
siglas del nombre en inglés Cascading Style Sheets. El CSS es el lenguaje para
definir la presentación de las páginas web desde un documento separado de
la estructura. Con esto se consigue la autonomía entre el código que rige el
aspecto visual y la programación HTML.
62
Por medio de los estilos se puede configurar la apariencia del portal municipal
hasta desarrollar una fisionomía completamente diferente. Las marcas CSS se
aplicarán al HTML de la página directamente o por pertenecer a una u otra
región.
Los interesados, en esta funcionalidad deben tener conocimientos suficientes
para desarrollar un CSS propio, diseñaran el nuevo código extendiendo las
herencias recibidas desde los módulos instalados.
Sistema de herencia
Sistema de herencias
Todos los módulos integrados en la plataforma vienen
correspondiente CSS. Cada uno de ellos, con
predeterminada, garantiza una correcta presentación
diferentes recursos del portal. Para unificar la presencia
pues de una CSS que tenga prioridad sobre las demás.
acompañados de su
esta maquetación
en la web de los
de todos se requiere
63
Identificadores y clases
Los estilos pueden aplicarse a cualquier objeto siempre que tengan un
identificador al que referenciar desde el código. A estos identificadores se les
suele llamar selectores y sirven para estructurar la programación HTML. Por
ejemplo la inclusión de una imagen se realiza por medio de un <img>, para un
vínculo usará <a>, con <p> definirá un párrafo, o con <b> indicará que el texto
contenido debe presentarse en negrita.
Los selectores, además, pueden contener clases que diferencian unos de
otros. Junto a los nombres de las regiones y los paneles que se incluyen
automáticamente también como clases, podrá realizar cualquier cambio
estético.
Patrón para escribir las CSS
Aunque el curso está desarrollado para personal con conocimientos de CSS,
vea un pequeño ejemplo.
Cambiar el estilo del título de la noticia destacada. Estos títulos están
englobados dentro de una etiqueta H2, pero para que el cambio sólo afecte a
un H2 concreto deberá usar clases más específicas que condicionen la
aplicación del estilo.
El código por lo tanto seria:
h2.title .contenido .noticia-destacada { margin: 0;
background: #330066;
padding: 1em;}
64
Identificadores ya definidos
Identificadores hay centenares y con todos se puede llegar a personalizar al
máximo el portal. Algunos de los más utilizados son los que se muestran en la
siguiente ilustración.
Identificadores que suelen encontrarse en los paneles de Portales Municipales
Pero hay otros muchos con los que poder trabajar.
Identificadores por defecto del Gestor de Contenidos
Cuerpo:
.panel-flexible
Cabecera (logo+fondo+buscador):
.pane-pane-header
Carrusel:
.pane-diapositivas
Carrusel multinode:
.pane-multinode
Grupo de noticias 1 (según
composición portada):
.pane-noticias-panel-pane-1
Grupo de carteles:
.pane-banners-panel-pane-2 / .pmcarteles
Calendario:
.pane-views-events-calendar-block-1
Filas horizontales:
.panels-flexible-row
Primera fila horizontal:
.panels-flexible-row-first
Última fila horizontal:
.panels-flexible-row-last
Columnas verticales:
.panels-flexible-column
65
Primera fila vertical:
.panels-flexible-column-first
Última fila vertical:
.panels-flexible-column-last
Regiones:
.panels-flexible-region
Primera región:
.panels-flexible-region-first
Última región:
.panels-flexible-region-last
Separador entre regiones:
.panel-region-separator
Panel / objeto incluido en la
maquetación:
.panel-pane
Contenido de la página:
.pane-page-content
Grupo de pestañas en la portada:
.drupal-tabs
Menú superior desplegable:
.nice-menu-down
Menú del pie:
#dv-menufooter-nomasonry
Estas son sólo algunas clases claves que podrá identificar, pero
seguramente hay miles. Antes de configurar una de ellas
asegúrese de cual le será más útil.
66
Identificación de todos los elementos
Existen dos sistemas para la personalización de los elementos del portal. Por
una parte se pueden nombrar los contenedores dispuestos como lienzo,
columnas, filas y regiones, y por otra cada uno de los elementos integrados en
la composición como paneles.
Para nombrarlos muestre el Maquetador de Diseño y seleccione Opciones de
cada etiqueta.
Utilizando ambos métodos podrá presentar un recurso con un aspecto
diferente dependiendo del lugar donde se encuentre.
Vista del Maquetador de Diseño
67
Panel de Control  Administrar páginas
Personalizar los contenedores de maquetación
El gestor de contenidos ofrece centenares de etiquetas diferentes con las que
puede personalizar el diseño, no obstante es muy práctico detectar las
importantes para escribir el código.
Desde las Opciones de Lienzo del desplegable que aparece al seleccionar la
etiqueta Lienzo podrá definir el nombre por el cual se construirán las
etiquetas CSS. Con esta opción identificará fácilmente los elementos claves
de la maquetación.
En los capítulos siguientes se concretará sobre cada uno de ellos, pero en los
cuatro primeros campos desde la pantalla que se muestra a continuación tiene
la posibilidad de determinar el nombre de las clases por defecto. Sobre estas,
el gestor de contenidos construirá las suyas.
Al lienzo
Vea un ejemplo de personalización de las etiquetas del cuerpo de la página al
especificar la Clase de Lienzo. En este caso mi-lienzo:
<div id="cuerpo" class="panel-flexible panels-flexible-72 clear-block">
<div id="cuerpo" class="panel-flexible mi-lienzo clear-block">
68
Como se puede apreciar, la clase panels-flexible-72 se ha convertido en milienzo.
Desde esta ventana, establezca también las separaciones y el comportamiento
ante IE6. Por defecto, al crear una nueva plantilla, aparecen unos valores y la
opción de escalado al 99% de IE está activada. En el tema DivalWeb II no se
han configurado estos parámetros. Para las separaciones, el diseñador
establecerá su criterio, en cuanto al escalado se recomienda su desactivación
para controlar correctamente los anchos de todos los contenedores.
A las columnas
Vea un ejemplo de la personalización de las etiquetas de las columnas al
especificar la Clase de Columnas. En este caso mi-columna:
<div class="panels-flexible-column panels-flexible-column-72-13 panelsflexible-column-last">
<div class="mi-columna mi-columna-mi-lienzo-13 mi-columna-last">
Como se puede apreciar, la clase panels-flexible-column y sus derivadas se
han convertido en mi-columna.
A las filas
Vea un ejemplo de la personalización de las etiquetas de las filas al
especificar la Clase de Filas. En este caso mi-fila:
<div class="panels-flexible-row panels-flexible-row-72-17 panels-flexible-rowfirst clear-block ">
<div class="mi-fila mi-fila-72-17 mi-fila-first clear-block ">
En este caso, la clase panels-flexible-row y sus derivadas se han convertido en
mi-fila.
A las regiones
69
<div class="inside panels-flexible-region-inside panels-flexible-region-72contenido-inside panels-flexible-region-inside-first panels-flexible-regioninside-last">
<div class="inside mi-region-inside mi-region-72-contenido-inside mi-regioninside-first mi-region-inside-last">
Como se puede apreciar, las diversas opciones de panels-flexible-region-xxx
se han convertido en mi-region-xxx.
A los paneles
Al seleccionar la opción Propiedades CSS del icono situado a la derecha de
los paneles obtendrá una pantalla donde poder escribir los nombres de las
etiquetas CSS.
Cuadro de dialogo donde se incluyen las etiquetas CSS
Consulte el capítulo Comience desarrollando las CSS desde lo más genérico
a lo más concreto para saber más.
Sea generoso identificando con etiquetas todos sus contenidos y
zonas en la estructura de paneles. Seguramente le será de gran
ayuda a la hora de estructurar las CSS.
Personalice con sus propias etiquetas las regiones y paneles de la
página que creó en el ejercicio anterior.
70
Aplicación de estilos en la edición de contenidos
Aplicación de etiquetas CSS en el cuerpo de nodos y paneles
Desde el editor de texto, presente tanto en la creación de nodos como en la
de paneles, se puede corregir la presentación del contenido. Para su correcta
aplicación use el formato de entrada Full HTML.
Para saber más sobre esta norma, lea atentamente Los estilos del portal.
Escritura de estilos en línea
Los estilos en línea pueden ser una manera rápida de designar atributos a un
identificador, pero tienen la desventaja de multiplicar el código HTML ya que
cada una de las declaraciones se efectúa por separado. Es decir, mientras que
en las hojas de estilo se define que atributos debe tener un identificador en
una única sentencia, en los estilos en línea se hace en cada uno de ellos por
separado.
La manipulación de los estilos desde el editor no debería alterar
injustificadamente las herencias del portal. Para saber más sobre esta norma,
lea atentamente Los estilos del portal.
71
Los estilos por portal
El desarrollo por completo de los estilos, según un diseño previo, es la
solución más acertada para transformar un portal municipal estándar en uno
completamente personalizado.
No es objetivo de este manual explicar el funcionamiento de las CSS, al
contrario, se da por supuesto que los alumnos tienen ya la capacidad de
enfrentarse a este lenguaje.
El desarrollo de este punto pretende únicamente disponer las pautas para
facilitar el éxito de la misión. Vea como hacerlo.
Prepare el entorno PRE
Para evitar entregar privilegios del rol Administrador a personal ajeno al
ayuntamiento o sin la formación necesaria durante el proceso de escritura de
las CSS, se establece el entorno PRE como el idóneo para su desarrollo. Desde
esta plataforma se puede trabajar con las mismas condiciones que en la de
producción sin poner en riesgo la presencia del portal en Internet.
Los administradores solicitaran a la Oficina del Proyecto los dos pasos previos
como preparativo del diseño del nuevo tema.
•
Actualización del entorno PRE para crear.
•
Sustitución del
personalización.
tema
DivalWeb
II
por
el
adecuado
para
su
Los usuarios de ambas plataformas se reflejan entre ellas al ser sincronizadas,
por lo que no cree antes los usuarios que van a trabajar temporalmente en el
diseño del portal. Si omite esta puntualización estará autorizando también al
nuevo usuario en el portal de producción.
Parta de un diseño bien analizado
Ayúdese de un diseñador gráfico o en su defecto, utilice el papel para dibujar
la web que desee. Intente que el nuevo aspecto se agradable y evite colores
estridentes que, para una web municipal, son totalmente desaconsejables.
72
Maquete sus contenidos
Utilice los paneles para disponer todos los elementos en la Plantilla del Sitio y
las páginas que necesite. No olvide que su misión es personalizar un portal
que ya está heredando muchas hojas CSS.
En este punto, aún cuando no haya integrado su CSS, verá que los contenidos
son visibles de una u otra manera. No se preocupe, siga maquetándolos hasta
que el portal contenga todos los elementos necesarios.
Defina sus clases
Defina las zonas que necesite y nómbrelas adecuadamente para controlar todo
lo que puedan contener. Hágalo aunque de momento crea que no será
necesario. A veces ocurre que se necesita especificar algún comportamiento
diferenciado entre regiones y se hace muy útil este procedimiento.
Por defecto, en todas las regiones se incluyen identificadores genéricos y
otros específicos, escritos generalmente en las regiones de los paneles según
puede verse en la ilustración. Utilice el Maquetador de diseño para
consultarlas o crear las suyas.
Consulte el capítulo Nombrar clases propias para obtener una mayor
información.
Comience desarrollando las CSS desde lo más genérico a lo más
concreto
La escritura del código CSS la deberá realizar un profesional cualificado. Un
experto sabrá como plantear la hoja de estilos correctamente. Es
imprescindible que el programador lo haga metódicamente, estructurando
bien el flujo del código según las herencias y dejando notas para localizar
fácilmente los bloques de CSS que actúan sobre un elemento determinado. Es
decir, sigua la fórmula genérico + concreto.
Por ejemplo, para identificar un listado use la clase “listado”, si este es
además de anuncios seria recomendable incluir “listado listado-anuncio” pero
si encima tiene la particularidad de contener únicamente los anuncios
destacados “listado listado-anuncio listado-anuncio-destacado”
73
Ventana de Configuración de CSS
Con esta formula, por ejemplo, podrá controlar como se muestran todos los
paneles que sean “listado” y establecer diferencias con los listados de
anuncios.
Aplicación de los estilos siguiendo la fórmula genérico + concreto
Concrete los elementos importantes de la portada
Céntrese en la portada y compruebe la presencia de todos los elementos que
lo componen. Habiendo desarrollado las CSS generales ¿quiere que algún
componente tenga una presentación diferente? Hágalo. Sin duda alguna su
portal gana cuanto más diverso y dinámico sea.
Precise el aspecto de los paneles que difieren del genérico
Conforme vaya desarrollando el código, siempre de lo genérico a lo concreto,
compruebe la presentación de los elementos y continúe matizando
posteriormente las diferentes variaciones del código base. Por ejemplo,
defina primero los listados:
ul a { color: #ff0000; font-size: 1em; }
Y después precise la diferencia de un elemento determinado
74
.destacado ul a { font-size: 1.2em; }
Compruebe las vistas de listado, nodo, resúmenes, etc.
No olvide comprobar el aspecto de todas las páginas que haya creado, así
como de la vista de nodo, los resúmenes y los listados. Existen muchas URLs
que también debería verificar, como el mapa web, aviso legal, términos y
condiciones, etc.
Navegue intensamente por todo el portal
Visite todas las opciones del menú, así como cualquiera de los enlaces
presentes en su portal para asegurarse de que no queda nada fuera del nuevo
estilo.
Pruebe sus estilos y corrija
Vaya puliendo sus CSS conforme navega en su portal rediseñado y consolide el
nuevo diseño en la plataforma PRE.
Suba el nuevo archivo CSS
Suba o actualice las hojas de estilo según el capítulo Actualización de la
hoja de estilos por medio del explorador de documentos
Limpie la cache del sitio
Para cerciorarse de que el CSS se está aplicando correctamente, limpie la
memoria cache.
Panel de Control  Limpiar Caché
Compile las CSS para el navegador Internet Explorer
y compile los CSS según se explicó en el apartado Optimizar archivos CSS.
75
Acometa el restyling de su portal en el entorno PRE y una vez este
completamente seguro exporte sus paneles e implemente las
nuevas hojas de estilo en Producción.
76
Actualización de la hoja de estilos por medio del explorador de
documentos
Para colocar su hoja de estilos en el portal siga las siguientes instrucciones.
Vaya al Explorador de Documentos y busque la carpeta Customcssjs.
Despliéguela y sitúese en la hija CSS.
Explorador de Documentos
Seleccione Subir del menú de opciones del explorador y busque en su
ordenador el archivo.
Recuerde limpiar la memoria cache y compilar los CSS.
77
CASOS
PRÁCTICOS
78
Cabeceras programables
A muchos municipios les interesa ofrecer cabeceras diferentes en función del
calendario. Realizar una cabecera que cumpla esta finalidad no es demasiado
complicado.
El efecto se consigue
•
Creando una región que agrupe el logotipo del sitio y un listado de
nodos filtrados por una taxonomia.
•
Preparando contenidos programados anticipadamente para que se
muestren en unos días en concreto.
•
Modificando las CSS para ajustar la composición e incluir una cabecera
por defecto.
Diferentes cabeceras
Vea el paso a paso.
•
Cree una taxonomia con la que identificarán los contenidos que
colocará
en
la
cabecera.
Panel de Control  Administrar Tipos de Contenido
•
Cree una región específica para la cabecera programable y etiquétela
con
el
nombre
Cabecera-personalizada.
Panel de Control  Administrar Páginas
•
Integre en la nueva región el panel que muestra el Logo del Sitio y
etiquételo
con
el
nombre
mi-logo.
Páginas  Agregar contenido  Elementos de página  Logo del sitio
79
•
Integre en la nueva región un Listado por Tipo que muestre un
resultado únicamente, filtrado por la taxonomia que haya creado y
etiquételo
con
el
nombre
mi-fondo.
Páginas  Agregar contenido  Portales Municipales  Listado por
Tipo
•
Cree un nodo por cada cabecera e incluya en el Cuerpo del Documento
la imagen que desea incluir. A continuación, utilice las Opciones de
Programación para determinar el espacio de tiempo que debe de estar
presente
cada
contenido.
Panel de Control  Crear Contenido
•
Modifique las CSS para ajustar los contenidos. En el código, además,
incluirá la imagen de la cabecera por defecto como background, de tal
manera que esta quede oculta si existe una otra alternativa.
Para la cabecera de ejemplo las CSS que se han escrito son:
.Cabecera-personalizada {
position:relative;
height:210px;
margin-bottom:14px;
}
.mi-logo, .mi-logo {
margin:0;
padding:0;
}
.mi-logo {
position:absolute;
top:40px;
left:35px;
z-index:99;
}
#logo {
margin:0;
padding:0;
}
.mi-fondo, .mi-fondo * {
margin:0;
padding:0;
}
.mi-fondo {
position:absolute;
80
top:10px;
left:10px;
height:200px;
width:960px;
background: url(/sites/alcantir.portalesmunicipales.es/files/cap-base.jpg)
top left no-repeat;
}
La imagen colocada en el nodo puede vincular a una página incluyendo el
HTML correcto:
<p><a href="/node/722" title="Campaña recogida material escolar"><img
alt="cabecera" src="/sites/alcantir.portalesmunicipales.es/files/capmaterial-escolar.jpg" style="width: 960px; height: 200px;"></a></p>
Cree una nueva cabecera para su portal de formación teniendo en
cuenta que esta debe contener el logo del sitio y un fondo.
81
Creación de un escaparate de contenidos
El flujo de las noticias puede no resultar demasiado aconsejable para mostrar
ciertos contenidos que se desea tengan una repercusión mayor. Actualmente,
la mayoría de municipios no diferencian en la portada las noticias de los
anuncios o de los comunicados de carácter temporal. Resultaría muy
conveniente que los anuncios que deben permanecer en portada un tiempo
concreto, no fueran etiquetados como noticias forzando su presencia como
fijo al comienzo de las listas.
Para dar una respuesta a esta necesidad puede plantearse crear una zona
situada en la parte superior de la página, que muestre un contenido filtrado
por una taxonomia.
El efecto se consigue
•
Creando una región donde listar los nodos filtrados por una taxonomia.
•
Preparando contenidos que sirvan de enlace a los promocionados.
•
Modificando las CSS para ajustar la composición.
Modelo de un posible escaparate
Vea el paso a paso.
82
•
Cree una taxonomia con la que identificará los contenidos que colocará
en
el
escaparate.
Panel de Control  Administrar Tipos de Contenido
•
Cree una región específica para el escaparate y etiquétela con el
nombre
mi-region-escaparate.
Panel de Control  Administrar Páginas
•
Integre en la nueva región un Listado por Tipo, filtrado por la
taxonomia que haya creado y etiquételo con el nombre mi-destacado.
Deberá decidir cuantos elementos pueden mostrarse en el escaparate.
Páginas  Agregar contenido  Portales Municipales  Listado por
Tipo
•
Cree un nodo e incluya en el Cuerpo del Documento la imagen o
contenido que desea incluir. A continuación, si fuera necesario, utilice
las Opciones de Programación para determinar el espacio de tiempo
que debe de estar publicado. Asegúrese que ha puesto una etiqueta
 después de la parte del contenido que desea mostrar. Si
este contenido no se muestra correctamente en la portada tal vez sea
porque la cantidad de caracteres que se incluye en los resúmenes no es
suficiente. Si es así contacte con la Oficina del Proyecto para
establecer
un
criterio
mayor.
Panel de Control  Crear Contenido
•
Si fuera necesario, modifique las CSS para ajustar los contenidos.
Elemento de escaparate compuesto en HTML, usando una tabla.
Para la composición del escaparate anterior se ha optado por incluir un texto
y una fotografía en dos celdas de una misma tabla. Esta es una caja muy
adaptable y versátil.
83
<table><tbody><tr><td style="vertical-align: middle; background-color: rgb(0,
0, 0);"><img alt=""
src="/sites/alcantir.portalesmunicipales.es/files/escaparat-2.jpg"
style="width: 305px; height: 200px;"></td><td style="background-color:
rgb(0, 0, 0);"><p style="text-align: center;"><span style="color:#fff;"><span
style="font-size: 20px;">Abierto el plazo de matriculación para los cursos de
Valenciano y Alemán e Inglés con profesores nativos.</span></span></p><p
style="text-align: center;"><span style="color:#fff;">Desde el 1 al 11 de 
Octubre. El numero de plazas es limitado.</span></p><p style="text-align:
center;"><span style="color:#fff;">Los interesados pueden inscribirse en las
Oficinas del Ayuntamiento.</span></p></td></tr></tbody></table><p><!-break--></p>
Elemento de escaparate sencillo, compuesto únicamente de texto sobre un DIV de color
La composición de este escaparate se ha realizado únicamente en texto
dentro de un DIV con color de fondo. Es, por lo tanto, un contenido ajustable
100% a cualquier ancho y muy rápido de descargar ya que no contiene
imágenes.
<div style=" background: #990000; padding:1em;"><p style="text-align:
center;"><span style="color:#fff;"><span style="font-size: 20px;">Abierto el
<strong>periodo voluntario</strong> para el pago de IBI, Vados e
IAE</span></span></p><p style="text-align: center;"><span
style="color:#f0f8ff;">Desde el 1 de Agosto, y hasta el próximo 30 de
Noviembre, estarán al cobro en periodo voluntario los recibos del ejercicio
2013 correspondientes al Impuesto sobre <strong>Bienes Inmuebles (IBI)
rústica y urbana</strong>, el Impuesto sobre <strong>Actividades
Económicas</strong> y la tasa por <strong>reserva de entrada
(vados)</strong> del Ayuntamiento de Alcantir.</span></p><p style="textalign: right;"><a href="" style="color:#fff;">Más
información</a></p></div><p></p>
En este caso, los ajustes de las CSS son mínimas:
84
.mi-region-escaparate .view, .mi-region-escaparate .view-content {
margin:0;
padding:0;
}
.mi-destacado {
margin-bottom:14px;
}
Incluya en su portal de formación un escaparate que muestre un
contenido preparado para tal efecto.
85

Webmasters avanzado 6 - Comunidad de Portales Municipales

Transcripción

Documentos relacionados