mejores prácticas en el diseño y creación de mapas para la web_2.00pm

Conferencia Colombiana de Usuarios Esri 2010


BIENVENIDOS


MEJORES PRÁCTICAS EN EL DISEÑO Y CREACIÓN DE MAPAS PARA LA WEB

Seminario Preconferencia


• Introducción

– ¿Qué es un mapa web?

– Expectativas de los mapas

– Consideraciones para su mapa en la web

• Diseño del mapa

– Recursos Esri

– Flujo de trabajo cartográfico

– Elementos de diseño

– Plantillas

• Diseño del mapa para Web

– Pautas de diseño para mapas Web

ContenidoPrimera Sesión


Introducción


Mapas en la WebEvolución desde mapas no interactivos hasta mapas en la web

Mapas Web

estáticos

Mapas Web con

búsquedas

SIG en la Web

Mapas en la Web 2.0

Mapas para usuarios

Búsquedas espaciales

Exploración en los

mapas

Herramientas

elaboradas

Para usuarios SIG

Lento y complejo

Aplicaciones Web construidas

con un propósito

Tareas reutilizables

Realización de tareas

específicas


• Permite llevar a cabo tareas enfocadas y con sentido

• Contiene uno ó más servicios SIG

– Integrada en una aplicación Web

¿Qué es un mapa Web?


• Los mapas Web deberían ser:

– Enfocados en tareas

– Diseñados para el usuario final

– Incorporar excelente

cartografía

– Fáciles y rápidos de usar

• Para lograr esto debemos …

Expectativas de los mapas Web

PLANEAR y DISEÑAR

…nuestros mapas para la Web


• ¿Cuál es el propósito del negocio de la aplicación?

• ¿Quiénes son los usuarios finales?

• ¿Usaremos un sitio Web interno ó externo?

• ¿Cuáles datos serán incluidos?

• ¿Cómo serán usados los datos?

• ¿Pueden ser combinados los datos con otros servicios?

¿En otras aplicaciones?

Consideraciones para su mapa web

PLANEAR


Demostración

Explorando mapas en la Web


Diseño de mapas

Recursos Esri disponibles


Recursos disponiblesArcGIS Resource Center

http://resources.arcgis.com/


http://mappingcenter.esri.com/

ESRI Mapping CenterComo crear resultados cartográficos profesionales con ArcGIS


Diseño del Mapa

Flujo de trabajo cartográfico

Elementos de diseño


Un buen mapa:

• Involucra la información SIG a la vida cotidiana

• Logra comunicación efectiva con la audiencia

• Sirve como soporte para decisiones

• Posiciona su organización

Presentando el trabajo SIG


Cartografía para visualizaciónCartografía Impresa

Planeación Atlas Ingeniería

Topografía Vías Análisis


Cartografía para visualizaciónCartografía 3D

Planeación local Vista globalGeología

ArquitecturaServicios Prevención de desastres


Cartografía para visualizaciónCartografía interactiva


Flujo de trabajo cartográfico

Planeación

Datos

Simbología

DiseñoSalidas finales


Pensando en el diseño de mapa

Mensaje

• Visualización

• Objetivos

• Etiquetado

Audiencia

• Plantilla

• Generalización

• Simbología

Diseño

• Elementos de mapa

• Proyección

• Escala

• Limitaciones técnicas


Escala del mapa

Escala pequeña

Escala grande

0 1000 2000 3000 4000Kilómetros

0 100 200 300 400Kilómetros

0 1 2 3 4Kilómetros


Seleccionando datos

Capas de Mapa base

Límites

Vías

Ciudades

Perímetro de incendio

Ductos de agua

Válvulas

Capas operacionales

Ayudar a orientar al lector

Apuntar al objetivo del mapa

Explicar la distribución de otros datos

Los datos deben:


Mapas de referencia y mapas temáticos

© Focus Corporation


Elementos de diseñoPeso visual

Nueva Zelanda

Texto muy cercano

Objetos grandes

Forma regularObjeto grande

Ubicación sobre

la derecha

Color vibrante

Ubicación cerca

al borde superior

Ciudades

Pequeña

Mediana

Grande


Nueva Zelanda

Elementos de diseñoPeso visual

Color modificado

Marco eliminado

Tamaño y brillo

reducidos

Tamaño y brillo

reducidos

Texto alejadoCiudades

Pequeña

Mediana

Grande


Elementos de diseñoContraste visual

Low

Medium

High

Source: United States

Census Bureau

WisconsinCroplandAcreage

Medium

Source: United States

Census Bureau

Wisconsin

Cropland

Acreage

Low

High


Elementos de diseñoFigure - Ground


Elementos de diseñoJerarquía visual

Map TitleLegend Title

Category 1

Category 2

Category 3

Category 4

1 2 3 4 5

0 10 20 30 400 10 20 30 40

Company

Logo


Color en el diseñoDimensiones

Color (Hue)

Saturación

Iluminación (Value)


Sistemas para especificar color

RGBRed

0 255

Green

0 255

Blue

0 255

20 R

150 G

230 B



HSV

203 H

91 S

90 V

Saturation

0 100

0 100

Hue

0 360203

Value



CMYK RedCyan

0 100

Magenta

0 100

Yellow

0 100

Black

0 100

82 C

31 M

0 Y

10 K


• Utilice las convenciones establecidas siempre que sea posible

• Convenciones comunes

– Agua: Azul

– Desierto: Café

– Vegetación: Verde

– Áreas construidas: Gris, Rojo, Purpura

– Temperaturas: Progresión de Azul a Rojo

– Curvas de nivel: Café

Color en el diseñoConvenciones


Consideraciones en el diseño de colorDiscapacidad visual

Evite Use

Verde puro

Rojo puro

Evite Use

Azul-verde, azul

Naranja, dorado

1

25

Etiquete atributos

http://colorbrewer2.org/


Consideraciones en el diseño de colorPercepción visual

Máximo 12 colores

6 – 7 niveles

del mismo tono


Diagrama de calibración de color

…\ArcGIS\Desktop10.0\plotters\CMY_PlotterCalibrate.mxd

C

M

Y

K

Diagrama de calibraciónTablas de color

0% Y

80% Y 100% Y60% Y

40% Y20% Y


SimbologíaDatos cualitativos / Datos cuantitativos


SimbologíaVariables visuales para símbolos cualitativos

Color & formaFormaColor

Color & formaColor

FormaForma

Color Color & forma


SimbologíaVariables visuales para símbolos cuantitativos

Valor

ValorTamaño Tamaño & Valor

ValorTamaño Tamaño & Valor


SimbologíaRepresentaciones cartográficas

Crear símbolos

personalizados

Crear efectos

geométricos

Desplazamiento

de símbolos

Corte controlado de símbolos

dentro de achurados

Enmascaramiento y

mejora de símbolos


• Primarias:

• Secundarias

Textos en el mapaVariables visuales

Fuente

Helvetica

Times New Roman

Arial Italic

Tamaño

12 point

18 Point

24 Point

Color

Rojo

Azul

Gris

Organización

Newcastle

Upon

Tyne

Newcastle Upon Tyne

Designación

Population

of Manitoba

Manitoba

Population

Ortografía

Köln

Cologne

UbicaciónMayúsculas/

minúsculas

TEXAS

Texas


T

Textos en el mapaEstilo de fuente y uso

Tipo de

elementoEjemplo Serif

Sans

serifRoman Italic

Elementos

naturalesMontana Granito P P P

Elementos

culturalesColegio Lincoln P P

Hidrográfico Lago Tarapoto P P

T T T


Textos en el mapaMaplex

School

Black Lake/Elementary School

Tumwater/Middle School

Black Hills/High School

Etiquetas apiladasReducción

del tamaño

de la fuente

Diccionario de abreviaturasEstilos de ubicación especial


Textos en el mapaAnotaciones

Tipos de

anotaciónAlmacenamiento Manejo

Licencia

ArcGIS

Standard GDBArcMap &

ArcCatalog

ArcInfo

ArcEditor

ArcView

Feature-linked GDBArcMap &

ArcCatalog

ArcInfo

ArcEditor

Map MXD ArcMap

ArcInfo

ArcEditor

ArcView


• Dibujar datos SIG con ArcMap es fácil

• Crear un mapa bien diseñado requiere habilidad y experiencia.

– Implica costos en tiempo y dinero

Cree un gran mapa por su cuenta

Geologic Mapping TemplateStreet Map Template


Que es una plantilla de mapa?Conjunto de recursos que definen un mapa “bien diseñado”

Ejemplos de

aplicaciones Web

Documento de mapa

(archivo MXD)

Ejemplos de datos

(geodatabase)

Documentación

Archivos de

estilos y layer

packages

Herramientas o

modelos de

geoprocesamiento


Demostración

Crear un mapa para los predios de San Carlos de Suba


Diseño del Mapa

Mapas Web


Mapas WebLos mapas Web dan una dimensión adicional


• Los mapas son diseñados para ser visualizados en múltiples

escalas

• El diseño cartográfico debe mostrar una transición suavizada entre

escalas

Diseñando un mapa para publicaciónDiseñe cada escala como si fuera un mapa individual

Escala Pequeña

Escala MedianaEscala Grande


Diseño de símbolos de mapa

• Diseñe para una salida de alta resolución

• Diseñe para utilizar en una escala especifica

• De ser necesario, utilice símbolos complejos

Para Mapas impresos

• Diseñe para baja resolución o para despliegue en

pantalla

• Diseñe para utilizar en escalas especificas

• Evite símbolos complejos en mapas dinámicos

• Puede crear cache de imágenes (pre-simbolizar) si

se requieren símbolos complejos

Para Mapas Web


• Utilice anotaciones para ubicación exacta de los textos

• El texto debe tener un tamaño mínimo de 4 ptos.

• Utilice fuentes serif y sans-serif

Utilización de textos

Para Mapas impresos

• El texto debe tener un tamaño mínimo de 6 ptos.

• Utilice fuentes sans-serif para aumentar legibilidad

• Utilice etiquetas (labels) con capas dinámicas

• Configure visibilidad de etiquetas con rangos de escala

Para Mapas Web

T T

T


Demostración

Ajustar el mapa de predios de San Carlos de Suba

para publicación Web


• Creando mapas para la Web

– Organización de los datos

– Evaluar y analizar el mapa

• Mejores prácticas

– Consejos para la creación de servicios de mapa

– Consejos de rendimiento para mapas

– Consejos de rendimiento para datos

• Publicando mapas

– ¿Cómo crear los servicios?

– ¿Cómo crear el caché de los servicios?

• Creando una aplicación Web

• Resumen

ContenidoSegunda Sesión


Creando mapas para la Web


• Provee un marco geográfico de

referencia

• Contiene datos vector estáticos y

raster

• Servicios Cached

Organización de los datos

Mapas Base Capas operacionales


• Usar recursos existentes

– ArcGIS Online, Google Maps, Virtual Earth

• Crear recursos

– Crear y publicar sus propios datos

Mapas base


• Provee un marco geográfico de

referencia

• Contiene datos vector estáticos y

raster

• Servicios Cached

Organización de los datos

Mapas Base

• Muestra elemento de interés

• Soporta la funcionalidad de la

aplicación

• Consulta, geo-procesamiento

…

• Despliegue sobre un mapa base

Capas operacionales


• Tienen contenido dinámico

– Observaciones, feeds, incidentes

– Resultados de una consulta o cálculo

– Capas derivadas de un geo-procesamiento

– Capas para edición y acceso a datos

Capas operacionales


• Capas de mapa dinámicas

– Datos en tiempo real

– Datos que cambian

frecuentemente

• Capas de mapa con caché

– Alto volumen de tráfico

– No cambian frecuentemente

Despliegue de capas operacionales


• Gráficos en el cliente

– Pop-ups de información

– Resultado de una consulta o geo procesamiento

• Capa de elementos en el cliente

– Extensión de los gráficos

– Funcionalidad de selección

y edición

Despliegue de capas operacionales


• Usa un motor de dibujo de alto rendimiento

• El recurso es un archivo de definición de servicio de mapa (msd)

• Uso de los servicios basados en MSD

– Dinámico o con caché

– Mapping, WMS, KML

• Uso de los servicios basados en MXD

– WFS, WCS, Mobile Data Access, Geodata Access, Geoprocessing,

Network Analysis

Servicios optimizados de mapa

Mapa (.mxd) Mapa (.msd)


• Analice y pre-visualice directamente en ArcMap

Evalúe los mapas


• Identifica el contenido que afecta el rendimiento

• Resultados presentados como:

– Errores

• Sin referencia espacial, sin fuente de datos, etc

– Advertencias

• Proyección al vuelo, sin índices espaciales, etc

– Mensajes

• Sugerencias para mejorar el documento de mapa

Analice el mapa


• Inspeccionar visualmente

– Rendimiento

– Calidad gráfica

• Ventana de pre visualización

– Usa el nuevo motor de dibujo

– Incluye el tiempo de pre visualización

• Complementar con archivos log del servidor y base de datos

Pre visualice el mapa


Demostración

Analizando el mapa Web en ArcMap


Mejores prácticas


• El caché nos brinda un mayor rendimiento

– Diseñe sus escalas

– Use esquemas disponibles para combinar múltiples servicios

• Use servicios de mapa basados en MSD donde sea posible

– El dibujo y el cache serán más rápidos

– Mueva fuentes de datos especializadas a servicios MXD

• Capas CAD, TIN, terrain, topología

• Servicios de mapa basados en MXD

– Use las mejores prácticas de rendimiento

– Seminario Web: Authoring and Publishing Optimized Map Services

• Ayuda en línea

Consejos para la creación del servicio de mapa


• Pre procesar cuando sea posible

– Anotaciones

– Resultados de consultas y tareas

– Caché

• Evite la proyección al vuelo

• Mantenga los datos y mapas limpios

– Remueva capas que no use

– Use menos geometrías complejas

– Use capas y etiquetas dependientes de la escala

Consejos de rendimiento para mapas


• Acceso a datos y rendimiento

– Ajuste el ArcSDE

– Use conexiones directas

– Evite rutas UNC para datos basados en archivo

• Use índices

– Índices espaciales

• Actualizados a la fecha

• Tamaño relativo a la extensión del mapa

– Índices de atributos

• Use en joins y consultas frecuentes

Consejos de rendimiento para datos


Tipos de conexiones a la Geodatabase

ClienteBase de Datos

Servicio

ArcSDE

Conexión SDE

Conexión Directa

Servicio

ArcSDE

Conexión SDE


Publicando mapas


ArcGIS Server y la Web

ArcGIS Server

ArcGIS.com

ArcGIS Desktop

SIG Web

ArcGIS

Explorer

SIG Escritorio

SIG Móvil

Internet

Crear Publicar Usar


• Dos opciones

– Publicar el servicio de mapa directamente desde ArcMap

– Salvar como MSD, y publicarlo con ArcCatalog ó el ArcGIS Server

Manager

Publicando servicios de mapa MSD


Demostración

Publicando el mapa Web con ArcGIS Server


• Conjunto de imágenes del mapa

– Pre-generadas para un despliegue

rápido

– Creadas a niveles de escala pre-

definidos.

• Jerarquía de carpetas

– Basada en las escalas

• Tiles

– Guardados en el directorio de cache de

server

¿Qué es el caché del mapa?


¿Cómo funcionan los servicios con caché?

Servidor

Web

Servidor

SIG Datos


• Es mejor el servicio con caché para

– Mapas base e imágenes

– Datos no cambian frecuentemente

• Servicios sin caché mejores para:

– Datos cambian frecuentemente

– Simbología basada en atributos

– Datos que serán editados

¿En qué mapas debería usar caché?


• Planear

– Asignar recursos

– Decida el tipo de caché, el esquema de generación de tiles, referencia

espacial

– Escoja las escalas

• Crear

– Crear el documento de mapa

– Probar el mapa

• Generar

– Proyecto piloto

– Construir las imágenes

Proceso de construcción del caché


• Recursos

– Espacio de almacenamiento

– Tiempo de generación

• Tipos de caché

– Fused

– Multilayer

• Esquema de generación de tiles

– Usa el mismo esquema para todos los servicios

– Propiedades como origen, alto y ancho del tile, niveles de escala,

formato de imagen

Planear el caché


• Escoja las escalas cuidadosamente

– Afecta el tiempo de creación y el tamaño en disco

– Usuarios Web limitados a estas escalas

• Sugerencias

– Determine la escala más grande que necesita

– Duplique el factor de escala hasta la extensión total

– Haga coincidir su escalas con las de otros servicios

• Por ejemplo ArcGIS Online

Planear las escalas


• Crear el cache para un área pequeña

– Defina la extensión del marco de datos a esta área

• Trabaje con el servicio con cache para examinar

– La apariencia de la simbología, etiquetas, etc

– El rendimiento en su aplicación cliente

• Hacer ajustes y construir nuevamente

• Estime el tiempo de creación y espacio para todo el servicio

Proyecto piloto


Caché en ArcGIS Server 10

• Cache mixto

• Caché colaborativo

• Formato de almacenamiento

ExplotadoCompacto


Demostración

Creando el caché de un mapa Web


Configurando una aplicación web


• Capas del servicio de mapa

– Mapas base

– Capas operacionales

• Tareas

– Consulta

– Geocodificación

– Geoprocesamiento

Aplicaciones Web

Entregar toda la información unida


Opciones para construir aplicaciones Web

Web ADF

REST

.NET

• JavaScript

• Flex

• Silverlight

Web APIs

Java

SOAP ó Conexión

Local

ArcGIS Server


• Un solo sitio para acceder a:

– Software development kits (SDKs)

– Comunidades

– Galerías de código

Centro de recursos de ArcGIS Server


• Beneficios

– Aplicaciones Web configurables

• No es necesario programación

– Despliegue rápido

– Herramientas listas para empezar

Visores de Ejemplo


• Diseño

– Flujo de trabajo cartográfico

– Elementos de diseño

– Utilización de plantillas

– Recomendaciones de diseño para mapas Web

• Creación

– Organización de datos

– Análisis y optimización del mapa

• Publicación

– Generación de cache

• Puesta en una aplicación Web

Resumen


Seminario…

http://www.esri.com/events/seminars/bettermaps/index.html


Recomendados

Designing Better Maps:

A Guide for GIS Users

Designed Maps:

A Sourcebook for

GIS Users

Map Use:

Reading and Analysis


• Cursos presenciales

– Introducción a ArcGIS Server

– Creando y publicando mapas con ArcGIS

– ArcGIS Server: Administracion Web con .Net

– Building Web maps using the ArcGIS API for Java Script

– Building Web maps using the ArcGIS API for Flex

– Building Web maps using the ArcGIS API for Microsoft Silverlight/WPF

• Seminarios Web gratuitos de entrenamiento

– Getting Started with Map Templates

– Authoring and Deploying fast Web Maps

Mucho mas por aprender…


¿PREGUNTAS?


GRACIAS

mejores prácticas en el diseño y creación de mapas para la web_2.00pm

Documents