sgm_2006_11_plan documental v05 - asturiasmodelo.asturias.es/documentos/modelo_manual_de_… · web...

UNIÓN EUROPEAFONDO EUROPEO DE DESARROLLO REGIONALUna manera de hacer Europa

GOBIERNO DEL PRINCIPADO DE ASTURIAS

CONSEJERÍA DE HACIENDA Y SECTOR PÚBLICODirección General de Administración Local

C/ Coronel Aranda 2, 33005 Oviedo. Tfno.: 98 510 55 00.

MO.DE.LO.

Manual de Usuario Estilos Guía Urbana

(Número XX.XXXX)

Autor: SATECLista de distribución:

Nombre Organismo Departamento/EmpresaGrupo de Trabajo UTE UTE

Margarita Badiola Valle Consejería de Hacienda y Sector Público

Servicio de Relaciones con Entidades Locales




Control del documento

Control de versiones

Versión Fecha realización

Fecha aprobación

Cambio producido

1 15-01-2012 Primera versión





ÍNDICECONTROL DEL DOCUMENTO.......................................................................2

CONTROL DE VERSIONES...........................................................................2

ÍNDICE...................................................................................................3

1 INTRODUCCIÓN................................................................................4

2 MÓDULO DE DISEÑO.........................................................................4

3 CAMBIO DEL ESTILO DE LA PÁGINA PRINCIPAL...................................6

4 VER ESTILOS DISPONIBLES..............................................................11

5 IMAGEN DEL AYUNTAMIENTO..........................................................14

6 ESTILOS DE ACCESO AL SISTEMA.....................................................14

6.1 PARTE INFERIOR.............................................................................................166.1 PARTE SUPERIOR.............................................................................................16





1 Introducción

El objetivo de este documento es presentar el componente de diseño de la guía urbana para poder modificar la pantalla de mapa y para posibilitar incluir una imagen de escudo asociada al ayuntamiento.

2 Módulo de Diseño

El módulo de diseño es accesible a través de la opción “Gestión del Diseño” del módulo localgis-wmsmanager.

Una vez pulsado en este enlace aparece una pantalla donde el usuario podrá incluir una hoja de estilos nuevo para la pantalla de presentación de mapas o adjuntar una imagen para el escudo del ayuntamiento de la parte superior de la página.

Página 4 de 16




Página 5 de 16




3 Cambio del estilo de la página principalEl estilo de la página principal se gobierna mediante varios ficheros de texto (css)

que permiten configurar todos los estilos de la página principal en la que se muestra el mapa seleccionado.

Para facilitar al usuario la selección de los estilos se le muestran los estilos actualmente disponibles

Hoja de estilos de la guía urbana (dynamicStyles.css) donde aparecen el estilo de la cabecera, tipos de letra, etc.

Página 6 de 16




Hoja de estilos de openlayers (style.css) donde aparecen los estilos de las zonas de leyenda, escalas, etc. (en general todo lo referente a lo que openlayers puede ofrecer)

El usuario puede descargar un ejemplo de personalización (dynamicStyles_test.css) que permite ver qué cosas se podrían cambiar.

Se recomienda descargar el estilo de personalización de ejemplo que en nuestro caso es el siguiente.

.olLayerSwitcherLocalgisLayerLabel {display: block !important; cursor: default !important;font-size: 15px !important;position:absolute !important;left:40px !important;width:115px !important;top:0px !important;

}

#bannerMapaLeft {float: left;

height: 50px; width: 300px; background-repeat:no-repeat; /*background-image: url(img/banner_left.gif);*/ background-image: url("http://www.allande.es/image/organization_logo?img_id=208483") !important;

}

La forma de sobreescribir los estilos es la siguiente.1. Se selecciona el estilo que aplica a cada elemento que se quiere cambiar

utilizando alguna herramienta de visualziación de estilos como Firebug de Firefox.

Página 7 de 16




2. Se copia el estilo desde o bien el dynamicStyles.css o el style.css anteriormente mencionados y se incluyen en un fichero de texto con extensión css

3. Al final de cada elemento que queremos modificar incluimos la coletila (!important) como en el ejemplo que se ve anteriormente. Al incluir esta coletilla si por ejemplo el estilo era un Times New Roman de 20 y lo cambiamos a 15 simplemente habría que poner dentro del estilo asociado (font-size: 15px !important;)

4. Una vez que tenemos el fichero pulsamos el botón Examinar asocaido a la Hoja de Estilos que automáticamente sube el fichero

Para ver el resultado nos vamos a la guía urbana.

Página 8 de 16




En este caso vemos que el escudo de la izquierda se ha cambiado por una URL con el escudo del ayuntamiento sustituyendo al estilo default (img/banner-left.gif (Mundo))/*background-image: url(img/banner_left.gif);*/ background-image: url("http://www.allande.es/image/organization_logo?img_id=208483") !important;

Y también vemos que el estilo de letra de las capas disponibles ha pasado a ser de 15.font-size: 15px !important;

Si volvemos a entrar en la aplicación vemos que la entidad tiene un escudo asociado y que se puede eliminar en cualquier momento para restablecer el por defecto.

Página 9 de 16




4 Ver estilos disponiblesComo se ha comentado anteriormente la forma más sencilla de identificar estilos

es utilizar la herramienta firebug de firefox.

Página 10 de 16




Al pulsar en el enlace nos aparece en la zona inferior un cuadro de edición y un botón que permite seleccionar los estilos del texto

Al pulsar este botón el cursor según se va moviendo por la pantalla permite que en la zona inferior derecha se muestre el estilo asociado al elemento seleccionado.

Por ejemplo si seleccionamos la lista de capas en la que en el ejemplo anterior hemos cambiado el Font –size a 15 pulgadas vemos que nos aparecen los siguientes datos.

Página 11 de 16




Ilustración 1. Mapa

Ilustración 2. Estilos

Página 12 de 16




Como podemos ver el estilo se denominada .olLayerSwitcherLocalgisLayerLabel cuyo tamaño de Font-size es 10px que podemos sobreescribir de la forma anteriormente indicada.

5 Imagen del ayuntamiento.Para incluir la imagen del ayuntamiento (escudo) podemos incluir la imagen que

queramos con las medidas adecuadas en formato “png”.

Pulsamos el botón aceptar y la imagen se sube al servidor

Vamos a la guía urbana para ver cómo queda la imagen y vemos que se ha cambiado la zona superior derecha con el nuevo escudo del ayuntamiento (Se recomienda actualizar la cache del navegador ya que es posible que la imagen se siga leyendo de cache)

6 Estilos de acceso al sistemaLos estilos de acceso al sistema no son modificables por entidad salvo una vez que

se selecciona la entidad en cuyo momento aplica la misma operativa que en el caso anterior.

Página 13 de 16




Para poder modificar estos estilos es preciso modificar directamente las páginas a través de las cuales se accede al sistema, en particular serían las siguientes.

Login.jsp (Pagina de login) selectEntidad.jsp selectMap.jsp

Las páginas están situadas en el directorio/usr/local/LocalGIS/webapps/localgis-guiaurbanaEn estas página se puede modificar la disposición de los distintos elementos que

aparecen en pantalla así como las imágenes disponibles a través de estilos css.

Página 14 de 16




6.1 Parte inferiorPara modificar la parte inferior de la página es preciso modificar el siguiente estilo

situado en el fichero staticStyles.css#footer { #background-image: url(../img/footer.gif);

background-position: right; background-repeat: no-repeat; height: 64px;}

Si se desea modificar por entidad es preciso realizar la misma operativa anterior por ejemplo incluyendo una URL a una imagen prediseñada disponible en otra URL#footer {background-image: url("http://www.allande.es/image/organization_logo?img_id=208483") !important; #background-image: url(../img/footer.gif);

background-position: right; background-repeat: no-repeat; height: 64px;}

6.1 Parte superiorPara modificar la parte inferior de la página es preciso modificar el siguiente estilo

situado en el fichero staticStyles.css#bannerGeneral{ background-image: url(../img/bannergeneral.gif); background-position: center;

Página 15 de 16




background-repeat: no-repeat; height:250px;}

Si se desea modificar por entidad es preciso realizar la misma operativa anterior por ejemplo incluyendo una URL a una imagen prediseñada disponible en otra URL

#bannerGeneral{background-image: url("http://www.allande.es/image/organization_logo?

img_id=208483") !important; background-position: center; background-repeat: no-repeat; height:250px;}

Página 16 de 16

sgm_2006_11_plan documental v05 - asturiasmodelo.asturias.es/documentos/modelo_manual_de_… · web...

Documents