GUIA DE LA PLANTILLA MODELO. Únete a la red de portales municipales en comunidad.portalesmunicipales.es

Transcripción

1 GUIA DE LA PLANTILLA MODELO Únete a la red de portales municipales en comunidad.portalesmunicipales.es

2 CONTROL DEL DOCUMENTO Título del Proyecto CODIGO TITULO GP-DS-C0 Guía de la Plantilla Modelo Elaboración RESPONSABILIDAD NOMBRE / FUNCIÓN Desarrollado por: Alberto Gómez (Digital Value), Lorena Henríquez (Digital Value) y Pablo Paciarotti (Digital Value) Revisado por: Mario Gonzalez y Juan José Garcia Aprobado por: Control de versiones VERSIÓN 0.5 FECHA OBSERVACIONES 28 de Octubre de 2010 Versión Inicial GUÍA DE PLANTILLA 2

3 ÍNDICE INTRODUCCIÓN 4 AGENDA SKINR 5-6 CALENDARIO MÓDELOS 7 CLIMA PORTADA MODELO TIPO A 8 PIÉ PORTADA MODELO TIPO B 9 LISTADO DE ENLACES PORTADA MODELO TIPO C 10 LISTADOS PORTADA MODELO TIPO D 11 MENUS HORIZONTALES MENUS VERTICALES CARRUSEL CARRUSEL NOTICIAS NOTICIA DESTACADA NOTICIAS GUÍA DE PLANTILLA 3

4

5 INTRODUCCIÓN Este documento recoge todos los estilos disponibles para la elaboración de los portales municipales y que forman la Plantilla Modelo de los portales municipales de la Provincia de Valencia. La guía recoge ejemplos de todos los recursos gráficos y de estilo propuestos para cada uno de los componentes del portal, así como distintas sugerencias de composición. Los propuestas de composición que se presentan no son exhaustivas, ya que las combinaciones de todos los elementos de y sus diferentes estilos será inmensa. Pero permitirán al lector tomar conciencia del aspecto general y de los cambios estéticos que aplican en cada uno de los distintos estilos gráficos propuestos. La Plantilla Modelo no debe ser una colección cerrada, sino una colección en crecimiento constante, donde no solo se atiendan las nuevas necesidades de los portales, sino también un lugar donde se pueda compartir ideas y propuestas estéticas que beneficien a todos los portales que la utilizan. GUÍA DE PLANTILLA 5

6 PASO 1: Clic! en la rueda SKINR La tecnología de Portales Municipales para establecer configuraciones de estilo es Skinr. Esta tecnología permite aplicar un estilo CSS a cada bloque que compone la web. Los estilos se obtienen de una colección de clases predefinidas que son las que se presentan en este documento, y a las que hemos llamado Plantilla Modelo. Skinr aporta la ventaja de que es posible componer una web con un resultado profesional sin necesidad de ningún conocimiento de CSS. Los distintos elementos han sido desarrollados para asegurar un aspecto gráfico cuidado, compatibilidad con los distintos navegadores, y coherencia en la comunicación visual. Los estilos propuestos son compatibles en un alto grado entre sí, de forma que se el aspecto general de cualquier composición queda garantizado. PASO 3: Clic! en SKINR Al disponer la Plantilla Modelo de muchas variantes de diseño de cada elemento, unido a la libertad completa de composición de la que disfrutan los municipios en Portales Municipales, permite que las webs de los distintos municipios se personalicen y se adapten a las sensibilidades individuales, manteniendo todos la misma planti- PASO 2: Clic! en Opciones lla base y compartiendo un código de programación común. GUÍA DE PLANTILLA 6

7 VENTANA CON OPCIONES DE ESTILO SKINR GUÍA DE PLANTILLA 7

8

9 MODELOS Como preámbulo para la presentación exhaustiva de todas las Las propuestas de diseño para cada elemento se presentarán a propuestas de diseño de cada elemento individual, a continua- continuación y se clasificarán en función del elemento al que ción mostramos cuatro composiciones de portada web basadas aplican, de la misma manera que actuará el gestor de contenido en la Plantilla Modelo. en el momento de configurarlo. En estos modelos se incluyen ejemplos de todos los elementos Esperamos que encuentre en estas páginas la inspiración nece- donde se indican los nombres de los bloques, el diseño aplicado, saria para el diseño de su web, y esperamos sus comentarios y y los tamaños de las imágenes que se han aplicado. Utilice esta sugerencias a través de la Oficina del Proyecto. información de referencia para conseguir que el aspecto gráfico se mantenga uniforme y alineado a la propuesta de la Plantilla en todos sus diseños. GUÍA DE PLANTILLA 9

10 Alternador de Idioma Page Header Elements Escudo: 298px x 85px SkinR: Cabecera Tipo A Menu Principal SkinR: Nice Menu PORTADA MODELO TIPO A Carrusel 960 SkinR: Slider Tipo A Fotografía: 960px x 400px Widgets/Calendario Noticias con formato 1 960px SkinR: Calendario Tipo A SkinR: Noticias Tipo A 92px 960px Fotografía: Es creada de forma Widgets/Calendario automática (200px x 88px) SkinR: Calendario Tipo A 400px 350px 350px 225px Agenda con imagen SkinR: Agenda Tipo A Fotografía: 100px x 100px Listado por tipo (imágenes) Es generada automáticamen114px te al crear un contenido de tipo Gelería. Menú Lateral SkinR: Menú Lateral B Carteles Formato A Cartel: 300px x 114px Footer Menu Pane SkinR: Pie Tipo A GUÍA DE PLANTILLA 10

11 Alternador de Idioma SkinR: Cabecera Tipo A Page Header Elements Escudo: 298px x 85px Menú Fondo: 960px x 85px SkinR: Menú Tipo B PORTADA MODELO TIPO B Widgets/Calendario Carrusel 700 SkinR: Calendario Tipo A SkinR: Slider Tipo A Gweather Pane/Clima Fotografía: 700px x 230px SkinR: Clima Tipo A 960px 85px 700px 250px Listado por tipo (imágenes) Noticia Destacada Es generada automáticamente SkinR: Noticia Destacada Tipo A al crear un contenido de tipo Gelería. 230px 220px 460px Carteles Formato A Cartel: 200px x 76px Solapas / Noticias Formato 1 SkinR: Noticias Tipo B Menú Lateral SkinR: Menú Lateral B Footer Menu Pane SkinR: Pie Tipo A GUÍA DE PLANTILLA 11

12 Page Header Elements Alternador de Idioma Escudo: 298px x 85px SkinR: Cabecera Tipo A Fondo: 960px x 85px Menú por Listado SkinR: Listado Tipo D PORTADA MODELO TIPO C (limitado a 5 enlaces) Gweather Pane/Clima SkinR: Clima Tipo C Carrusel 700 SkinR: Slider Tipo A 960px 85px 215px 215px 215px 215px 225px Fotografía: 700px x 230px Widgets/Calendario SkinR: Calendario Tipo C 700px 229px 229px Noticias con formato 1 SkinR: Noticias Tipo D Menú Lateral Fotografía: Es creada de forma SkinR: Menú Lateral E automática (200px x 88px) Footer Menu Pane SkinR: Pie Tipo C GUÍA DE PLANTILLA 12

13 Alternador de Idioma SkinR: Cabecera Tipo A Page Header Elements Escudo: 298px x 85px Carrusel 700 Menú por Listado PORTADA MODELO TIPO D SkinR: Listado Tipo A SkinR: Slider Tipo A Fotografía: 700px x 230px Widgets/Calendario SkinR: Calendario Tipo A Noticias Destacada 960px SkinR: Noticia Destacada Tipo B 85px 250px 700px Fotografía: Es creada de forma Contenido personalizado automática (250px x 250px) SkinR: Listado Tipo L 229px 460px 220px Gweather Pane/Clima Menú Lateral SkinR: Clima Tipo A SkinR: Menú Lateral H Noticias con formato 1 SkinR: Noticias Tipo A Fotografía: Es creada de Menú Lateral forma automática SkinR: Menú Lateral E (200px x 88px) Solapas / Noticias como Titulares SkinR: Titulares Tipo A Fotografía: 100px x 100px Footer Menu Pane SkinR: Pie Tipo A GUÍA DE PLANTILLA 13

14 En este caso utilizamos el Skinr Tipo A MENUS HORIZONTALES GUÍA DE PLANTILLA 14

15 MENUS HORIZONTALES SkinR: Menú Tipo A SkinR: Menú Tipo B SkinR: Menú Tipo C SkinR: Menú Tipo D SkinR: Menú Tipo E GUÍA DE PLANTILLA 15

16 MENUS VERTICALES En este caso utilizamos el Skinr Tipo D GUÍA DE PLANTILLA 16

17 MENUS VERTICALES SkinR: Menú Lateral Tipo A SkinR: Menú Lateral Tipo C SkinR: Menú Lateral Tipo B SkinR: Menú Lateral Tipo D GUÍA DE PLANTILLA 17

18 MENUS VERTICALES SkinR: Menú Lateral Tipo H SkinR: Menú Lateral Tipo F SkinR: Menú Lateral Tipo E SkinR: Menú Lateral Tipo G GUÍA DE PLANTILLA 18

19 CARRUSEL En este caso utilizamos el Skinr Tipo A GUÍA DE PLANTILLA 19

20 CARRUSEL SkinR: Silder Tipo A SkinR: Silder Tipo B GUÍA DE PLANTILLA 20

21 CARRUSEL NOTICIAS En este caso utilizamos el Skinr Tipo A La Estructura más básica se compone de tres regiones: GUÍA DE PLANTILLA 21

22 CARRUSEL NOTICIAS SkinR: Carrusel Noticias Tipo A SkinR: Carrusel Noticias Tipo B GUÍA DE PLANTILLA 22

23 NOTICIA DESTACADA En este caso utilizamos el Skinr Tipo B GUÍA DE PLANTILLA 23

24 NOTICIA DESTACADA SkinR: Noticia SkinR: Noticia Destacada Tipo A Destacada Tipo C SkinR: Noticia SkinR: Noticia Destacada Tipo B Destacada Tipo D GUÍA DE PLANTILLA 24

25 NOTICIA DESTACADA SkinR: Noticia SkinR: Noticia Destacada Tipo E Destacada Tipo G SkinR: Noticia SkinR: Noticia Destacada Tipo F Destacada Tipo H GUÍA DE PLANTILLA 25

26 NOTICIAS En este caso utilizamos el Skinr Tipo A GUÍA DE PLANTILLA 26

27 NOTICIAS SkinR: Noticia Tipo A SkinR: Noticia Tipo B SkinR: Noticia Tipo C GUÍA DE PLANTILLA 27

28 NOTICIAS SkinR: Noticia Tipo D SkinR: Noticia Tipo E SkinR: Noticia Titulares Tipo A GUÍA DE PLANTILLA 28

29 NOTICIAS SkinR: Noticia Titulares Tipo B SkinR: Noticia Titulares Tipo C SkinR: Noticia Titulares Tipo D GUÍA DE PLANTILLA 29

30 AGENDA En este caso utilizamos el Skinr Tipo A GUÍA DE PLANTILLA 30

31 AGENDA SkinR: Agenda Tipo A SkinR: Agenda Tipo B SkinR: Agenda Tipo C GUÍA DE PLANTILLA 31

32 CALENDARIO La Estructura más básica se compone de tres regiones: En este caso utilizamos el Skinr Tipo A GUÍA DE PLANTILLA 32

33 CALENDARIO SkinR: Calendario Tipo A SkinR: Calendario Tipo D SkinR: Calendario Tipo B SkinR: Calendario Tipo E SkinR: Calendario Tipo C SkinR: Calendario Tipo F GUÍA DE PLANTILLA 33

34 CLIMA En este caso utilizamos el Skinr Tipo A GUÍA DE PLANTILLA 34

35 CLIMA SkinR: Tiempo Tipo A SkinR: Tiempo Tipo D SkinR: Tiempo Tipo B SkinR: Tiempo Tipo E SkinR: Tiempo Tipo C SkinR: Tiempo Tipo F GUÍA DE PLANTILLA 35

36 PIÉ En este caso utilizamos el Skinr Tipo A GUÍA DE PLANTILLA 36

37 PIÉ SkinR: Pie Tipo A SkinR: Pie Tipo B SkinR: Pie Tipo C GUÍA DE PLANTILLA 37

38 LISTADOS DE ENLACES En este caso utilizamos el Skinr Tipo A GUÍA DE PLANTILLA 38

39 LISTADOS DE ENLACES SkinR: Listado Tipo D SkinR: Listado Tipo A SkinR: Listado Tipo B SkinR: Listado Tipo C GUÍA DE PLANTILLA 39

40 LISTADOS DE ENLACES SkinR: Listado Tipo G SkinR: Listado Tipo H SkinR: Listado Tipo E SkinR: Listado Tipo F GUÍA DE PLANTILLA 40

41 LISTADOS DE ENLACES SkinR: Listado Tipo K SkinR: Listado Tipo L SkinR: Listado Tipo I SkinR: Listado Tipo J GUÍA DE PLANTILLA 41

42 LISTADOS En este caso utilizamos el Skinr Tipo C GUÍA DE PLANTILLA 42

43 LISTADOS SkinR: Listado por Titulares Tipo A SkinR: Listado por Titulares Tipo B SkinR: Listado por Titulares Tipo C GUÍA DE PLANTILLA 43

44 LISTADOS SkinR: Listado por SkinR: Listado por Titulares Tipo D Titulares Tipo F SkinR: Listado por SkinR: Listado por Titulares Tipo E Titulares Tipo G GUÍA DE PLANTILLA 44