User:Sergionaranja/Es:Map Icons Design Standards

From OpenStreetMap Wiki
Jump to: navigation, search

Map Icons Design Standards EN < Older version in english.

símbolos iconos pictogramas

Un símbolo es una representación gráfica de una idea. en los mapas se utilizan para ampliar información y representar puntos de interés (poi) de una forma escueta y directa sin tener que utilizar palabras que acabarían por llenar de manera excesiva el mapa, empeorando su funcionalidad.

En este caso no me voy a ocupar de la representación gráfica de las vías ni de las áreas solo de los puntos de interés pois.

Para diseñar un conjunto de símbolos útil debemos tener en cuenta:

transnacionalidad. Esto permite que el símbolo sea entendido por el mayor numero de personas incluso de culturas diferentes.
legibilidad. Se tiene que ver y diferenciar el dibujo para poderlo entender.

El primer punto se refiere sobre todo al concepto del símbolo, es decir, el como representar gráficamente una determinada cosa. para conseguirlo es recomendable estudiar símbolos usados frecuentemente que ya cumplan estos estándares Por ejemplo AIGA la asociación de profesionales gráficos americana propuso a partir de 1974 un conjunto de símbolos. Están basados en estudios previos de uso de símbolos de este tipo en distintos países, en aeropuertos, en olimpiadas y toda clase de centros de interconexión.
Son estos
http://www.aiga.org/content.cfm/symbol-signs o
http://commons.wikimedia.org/wiki/Category:AIGA_symbol_signs

Como fueron adoptados a partir de entonces por gran numero de organizaciones y ser de dominio público se han convertido en un estándar Su uso es para transporte fundamentalmente, así que necesitaremos hacer nuestros propios símbolos pero ya tenemos una buena base conceptual.

El segundo punto es de lo que mas vamos a hablar. La gran ventaja de openStreetMap es que se construye por la colaboración desinteresada de mucha gente. Ademas tiene un esquema democrático en cuanto a las decisiones, esto para la consistencia gráfica es un handicap. Los iconos se proponen y aprueban individualmente por tanto es muy difícil que la legibilidad y la consistencia sea razonablemente buena.

Por ello me propongo dos cosas:

· compartir una serie de reglas que si se siguen ayuden a crear unos símbolos consistentes, aunque los autores sean diversos.

· crear un conjunto de símbolos que cumplan los estándares de los que hablamos que se puedan adoptar por la comunidad, o bien que sea una opción para instalarlos localmente y simplemente sirvan de ejemplo de lo que hablo.


Para centrarnos en el tema nuestros símbolos son para uso en pantalla por tanto la unidad de medida sera el píxel, los colores serán RGB, el formato será el SVG (vectorial) del cual partiremos para convertirlo en PNG (mapa de bits).

El software recomendable, por ser Open Source, para diseñar es el Inkscape (vectorial), intentaremos usar solo éste. aunque para pequeñas correcciones puntuales se puede usar el Gimp (mapa de bits).

Reglas generales

Tamaño

El primer punto a tener en cuenta es el tamaño. El diseño de las formas está directamente relacionado con el tamaño final y lo debemos conocer desde el principio. Un símbolo cuyo tamaño final sea muy grande nos permite dibujar mas detalles, según necesitemos un tamaño mas pequeño esos detalles emborronaran el símbolo haciéndolo finalmente ilegible, con lo cual cuanto mas pequeño menos detalles.

Seticonos sss IS sizegrid.png

Para mí la barrera es 20x20 píxeles. Por debajo de este tamaño las restricciones de forma empiezan a ser importantes y requerirá un sistema de trabajo diferente. Aquí no funcionará trabajar el svg y convertirlo a png. Un ejemplo de este error son algunos de los símbolos a tamaño 16x16 que resultan algo borrosos en
http://www.gpsdrive.de/development/map-icons/overview.en.shtml

En este caso es mejor trabajar el bitmap directamente. Un ejemplo correcto de este tipo de iconos es:
http://wiki.openstreetmap.org/index.php/User:UrSuS

Por tanto:

Detalles - cuanto mas pequeño mas simple.
Como - en Inkscape definiremos la página con el tamaño final del símbolo.

Grosor

Las líneas horizontales y verticales deben coincidir en grosor y posición con los píxeles, de esta forma evitaremos un resultado borroso. Además al exportar de svg a png, éste será mucho mas limpio y evitaremos tener que corregir los píxeles a mano.
Por tanto el grosor mínimo será de un píxel. O una unidad en el svg.

Bien >>Seticonos sss cornerpng.png png viene de > Seticonos sss cornersvg.png svg
Mal >> Seticonos sss cornerpng mal.png png viene de > Seticonos sss cornersvg mal.png svg


En el caso de las líneas inclinadas sera inevitable que queden algo borrosas pero si mantenemos la regla de una unidad de grosor o múltiplos exactos de ésta, obtendremos un resultado consistente.

Como – definiendo en Inkscape una rejilla del tamaño final del símbolo. ejemplo > 2020 st squarerounded 1.svg abrir este .svg en Inkscape


Color

Otro de los grandes aportes a la consistencia es una gama de colores concreta. En principio los colores que se pueden usar son todos los de RGB ya que nuestro visualizador preferente sera la pantalla del ordenador, en el caso de gps pda y demas aparatos susceptibles de mostrar nuestros mapas, cada vez mas se apuntan a una resolucion de color igual a la de un ordenador. No merece la pena diseñar para cada una de las posibilidades. La solucion es tener 2 versiones de los iconos una en color y otra en blanco y negro por ejemplo.

Aunque tengamos millones de colores a nuestra disposición si nos limitamos a unas gamas tendremos mejores resultados. La mejor idea es organizar los iconos temáticamente y asignar un color para cada grupo

2020 iconset: plantillas y ejemplos

He aquí unos ejemplos de pictogramas creados con las pautas de esta guía con un tamaño de 20x20px.

2020 st squarerounded 1.svg svg base para pictogramas cuadrados con borde negro de 1px
2020 st circle 1.svg svg base para pictogramas circulares con borde negro de 1px
2020 st circle 2.svg svg base para pictogramas circulares con borde rojo de 2px
2020 st triangle 2.svg svg base para pictogramas triangulares con borde rojo de 2px


amenity=*
2020 st amenity bar.svg 2020 stBN amenity bar.svg svg del pictograma amenity=bar
2020 st amenity cinema.svg 2020 stBN amenity cinema.svg svg del pictograma amenity=cinema
2020 st amenity pub.svg 2020 stBN amenity pub.svg svg del pictograma amenity=pub
2020 st amenity nightclub.svg 2020 stBN amenity nightclub.svg svg del pictograma amenity=nightclub
2020 st amenity restaurant.svg 2020 stBN amenity restaurant.svg svg del pictograma amenity=restaurant
2020 st amenity theatre.svg 2020 stBN amenity theatre.svg svg del pictograma amenity=theatre
2020 st placeofworship.svg svg base de los pictogramas place_of_worship=*
2020 st placeofworship bahai.svg 2020 stBN placeofworship bahai.svg svg del pictograma place_of_worship=bahai (Baha'i)
2020 st placeofworship buddhist.svg 2020 stBN placeofworship buddhist.svg svg del pictograma place_of_worship=buddhist
2020 st placeofworship christian.svg 2020 stBN placeofworship christian.svg svg del pictograma place_of_worship=christian
2020 st placeofworship hindu.svg 2020 stBN placeofworship hindu.svg svg del pictograma place_of_worship=hindu
2020 st placeofworship jain.svg 2020 stBN placeofworship jain.svg svg del pictograma place_of_worship=jain
2020 st placeofworship jewish.svg 2020 stBN placeofworship jewish.svg svg del pictograma place_of_worship=jewish
2020 st placeofworship muslim.svg 2020 stBN placeofworship muslim.svg svg del pictograma place_of_worship=muslim
2020 st placeofworship pagan.svg 2020 stBN placeofworship pagan.svg place_of_worship=pagan
2020 st placeofworship pastafarian.svg 2020 stBN placeofworship pastafarian.svg svg del pictograma place_of_worship=pastafarian
2020 st placeofworship shinto.svg 2020 stBN placeofworship shinto.svg svg del pictograma place_of_worship=shinto
2020 st placeofworship sikh.svg 2020 stBN placeofworship sikh.svg svg del pictograma place_of_worship=sikh
2020 st placeofworship taoist.svg 2020 stBN placeofworship taoist.svg svg del pictograma place_of_worship=taoist
2020 st placeofworship zoroastrian.svg 2020 stBN placeofworship zoroastrian.svg svg del pictograma place_of_worship=zoroastrian
power=generator
2020 st powergensource burn.svg 2020 stBN powergensource burn.svg svg del pictograma power_source burn type
2020 st powergensource nuclear.svg 2020 stBN powergensource nuclear.svg svg del pictograma power_source nuclear type
2020 st powergensource sun.svg 2020 stBN powergensource sun.svg svg del pictograma power_source sun type
2020 st powergensource water.svg 2020 stBN powergensource water.svg svg del pictograma power_source water type
2020 st powergensource wind.svg 2020 stBN powergensource wind.svg svg del pictograma power_source wind type


2020 stBN leisure bullring.svg

Código XML para Osmarender

Para que el Osmarender pueda leer los iconos creados debemos formatear el código generado por el inkscape en el archivo .svg.

Pongamos por ejemplo el de 2020 st hospital.svg para ello debemos abrir con un editor de texto ese archivo y formatearlo para dejarlo como sigue:


 <svg 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:svg="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xmlns:xi="http://www.w3.org/2001/XInclude" 
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
  xmlns:cc="http://web.resource.org/cc/" 
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
  xmlns:dc="http://purl.org/dc/elements/1.1/" 
  id="main" 
  version="1.1" 
  baseProfile="full" 
  width="20" 
  height="20" 
  preserveAspectRatio="none" 
  viewBox="0 0 20 20">
   <svg:defs>
     <svg:symbol 
      id="symbol-hospital" 
      viewBox="0 0 20 20" >
      <svg:path fill="#ffffff" stroke="#ff0000" stroke-width="1" 
        d="M 19.5,10 A 9.5,9.5 0 1 1 0.5,10 A 9.5,9.5 0 1 1 19.5,10 z"/>
      <svg:rect fill="#ff0000" width="4" height="14" x="8" y="3"/>
      <svg:rect fill="#ff0000" width="14" height="4" x="3" y="8" />
     </svg:symbol>
   </svg:defs>
 </svg>


el archivo resultante lo guardamos como .svg en la carpeta ../symbols del directorio /osm local

Categorías

intersecciones

highway=mini_roundabout - es:rotonda
direction=clockwise
highway=stop - es:señal stop
highway=traffic_signals - es:semáforo
highway=crossing - es:paso de cebra

barreras

highway=gate - es:puerta que cierra el tráfico
higway=stile - es:puerta en vallado para transeúntes
higway=cattle_grid - es:
higway=tool_booth – es:barrera de peaje, cabina de cobro highway=bus_stop
traffic_calming=yes - es:bache

highway=emergency_access_point

vías de agua

waterway=lock_gate
waterway=turning_point
waterway=boatyard astillero reparación de botes y barcos

trenes

railway=station
railway=halt
railway=tram_stop
railway=crossing
railway=level_crossing
railway=subway_entrance
railway=turntable

aéreas

aeroway=aerodrome (area del aeropuerto) o poi
aeroway=helipad

aerialway=cable_car – es:teleférico
aerialway=chair_lift
aerialway=drag_lift
aerialway=station

energía

power=tower
power=line
power=generator
power_source=