Upload
sandra
View
815
Download
3
Embed Size (px)
Citation preview
Conferencia Colombiana de Usuarios Esri 2010
Conferencia Colombiana de Usuarios Esri 2010
BIENVENIDOS
Conferencia Colombiana de Usuarios Esri 2010
MEJORES PRÁCTICAS EN EL DISEÑO Y CREACIÓN DE MAPAS PARA LA WEB
Seminario Preconferencia
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
Introducción
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
• 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?
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
• ¿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
Conferencia Colombiana de Usuarios Esri 2010
Demostración
Explorando mapas en la Web
Conferencia Colombiana de Usuarios Esri 2010
Diseño de mapas
Recursos Esri disponibles
Conferencia Colombiana de Usuarios Esri 2010
Recursos disponiblesArcGIS Resource Center
http://resources.arcgis.com/
Conferencia Colombiana de Usuarios Esri 2010
http://mappingcenter.esri.com/
ESRI Mapping CenterComo crear resultados cartográficos profesionales con ArcGIS
Conferencia Colombiana de Usuarios Esri 2010
Diseño del Mapa
Flujo de trabajo cartográfico
Elementos de diseño
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
Cartografía para visualizaciónCartografía Impresa
Planeación Atlas Ingeniería
Topografía Vías Análisis
Conferencia Colombiana de Usuarios Esri 2010
Cartografía para visualizaciónCartografía 3D
Planeación local Vista globalGeología
ArquitecturaServicios Prevención de desastres
Conferencia Colombiana de Usuarios Esri 2010
Cartografía para visualizaciónCartografía interactiva
Conferencia Colombiana de Usuarios Esri 2010
Flujo de trabajo cartográfico
Planeación
Datos
Simbología
DiseñoSalidas finales
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
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:
Conferencia Colombiana de Usuarios Esri 2010
Mapas de referencia y mapas temáticos
© Focus Corporation
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
Elementos de diseñoFigure - Ground
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
Color en el diseñoDimensiones
Color (Hue)
Saturación
Iluminación (Value)
Conferencia Colombiana de Usuarios Esri 2010
Sistemas para especificar color
RGBRed
0 255
Green
0 255
Blue
0 255
20 R
150 G
230 B
Conferencia Colombiana de Usuarios Esri 2010
Sistemas para especificar color
HSV
203 H
91 S
90 V
Saturation
0 100
0 100
Hue
0 360203
Value
Conferencia Colombiana de Usuarios Esri 2010
Sistemas para especificar color
CMYK RedCyan
0 100
Magenta
0 100
Yellow
0 100
Black
0 100
82 C
31 M
0 Y
10 K
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
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/
Conferencia Colombiana de Usuarios Esri 2010
Consideraciones en el diseño de colorPercepción visual
Máximo 12 colores
6 – 7 niveles
del mismo tono
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
SimbologíaDatos cualitativos / Datos cuantitativos
Conferencia Colombiana de Usuarios Esri 2010
SimbologíaVariables visuales para símbolos cualitativos
Color & formaFormaColor
Color & formaColor
FormaForma
Color Color & forma
Conferencia Colombiana de Usuarios Esri 2010
SimbologíaVariables visuales para símbolos cuantitativos
Valor
ValorTamaño Tamaño & Valor
ValorTamaño Tamaño & Valor
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
Demostración
Crear un mapa para los predios de San Carlos de Suba
Conferencia Colombiana de Usuarios Esri 2010
Diseño del Mapa
Mapas Web
Conferencia Colombiana de Usuarios Esri 2010
Mapas WebLos mapas Web dan una dimensión adicional
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
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
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
Demostración
Ajustar el mapa de predios de San Carlos de Suba
para publicación Web
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
Creando mapas para la Web
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
• Usar recursos existentes
– ArcGIS Online, Google Maps, Virtual Earth
• Crear recursos
– Crear y publicar sus propios datos
Mapas base
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
• 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)
Conferencia Colombiana de Usuarios Esri 2010
• Analice y pre-visualice directamente en ArcMap
Evalúe los mapas
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
Demostración
Analizando el mapa Web en ArcMap
Conferencia Colombiana de Usuarios Esri 2010
Mejores prácticas
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
Tipos de conexiones a la Geodatabase
ClienteBase de Datos
Servicio
ArcSDE
Conexión SDE
Conexión Directa
Servicio
ArcSDE
Conexión SDE
Conferencia Colombiana de Usuarios Esri 2010
Publicando mapas
Conferencia Colombiana de Usuarios Esri 2010
ArcGIS Server y la Web
ArcGIS Server
ArcGIS.com
ArcGIS Desktop
SIG Web
ArcGIS
Explorer
SIG Escritorio
SIG Móvil
Internet
Crear Publicar Usar
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
Demostración
Publicando el mapa Web con ArcGIS Server
Conferencia Colombiana de Usuarios Esri 2010
• 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?
Conferencia Colombiana de Usuarios Esri 2010
¿Cómo funcionan los servicios con caché?
Servidor
Web
Servidor
SIG Datos
Conferencia Colombiana de Usuarios Esri 2010
• 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é?
Conferencia Colombiana de Usuarios Esri 2010
• 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é
Conferencia Colombiana de Usuarios Esri 2010
• 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é
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
Caché en ArcGIS Server 10
• Cache mixto
• Caché colaborativo
• Formato de almacenamiento
ExplotadoCompacto
Conferencia Colombiana de Usuarios Esri 2010
Demostración
Creando el caché de un mapa Web
Conferencia Colombiana de Usuarios Esri 2010
Configurando una aplicación web
Conferencia Colombiana de Usuarios Esri 2010
• Capas del servicio de mapa
– Mapas base
– Capas operacionales
• Tareas
– Consulta
– Geocodificación
– Geoprocesamiento
Aplicaciones Web
Entregar toda la información unida
Conferencia Colombiana de Usuarios Esri 2010
Opciones para construir aplicaciones Web
Web ADF
REST
.NET
• JavaScript
• Flex
• Silverlight
Web APIs
Java
SOAP ó Conexión
Local
ArcGIS Server
Conferencia Colombiana de Usuarios Esri 2010
• Un solo sitio para acceder a:
– Software development kits (SDKs)
– Comunidades
– Galerías de código
Centro de recursos de ArcGIS Server
Conferencia Colombiana de Usuarios Esri 2010
• Beneficios
– Aplicaciones Web configurables
• No es necesario programación
– Despliegue rápido
– Herramientas listas para empezar
Visores de Ejemplo
Conferencia Colombiana de Usuarios Esri 2010
• 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
Conferencia Colombiana de Usuarios Esri 2010
Seminario…
http://www.esri.com/events/seminars/bettermaps/index.html
Conferencia Colombiana de Usuarios Esri 2010
Recomendados
Designing Better Maps:
A Guide for GIS Users
Designed Maps:
A Sourcebook for
GIS Users
Map Use:
Reading and Analysis
Conferencia Colombiana de Usuarios Esri 2010
• 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…
Conferencia Colombiana de Usuarios Esri 2010
¿PREGUNTAS?
Conferencia Colombiana de Usuarios Esri 2010
GRACIAS