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

Contenido
Primera Sesión
• 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

Introducción

Mapas en la Web
Evolución desde mapas no interactivos hasta mapas en la web
Mapas en
la Web 2.0
SIG en la
Web  Aplicaciones Web construidas
con un propósito
Herramientas  Tareas reutilizables
Mapas Web elaboradas Realización de tareas
con Para usuarios SIG específicas
búsquedas Lento y complejo
Mapas para usuarios

Mapas Búsquedas espaciales
Web Exploración en los
estáticos mapas

¿Qué es un mapa Web?
• Permite llevar a cabo tareas enfocadas y con sentido

• Contiene uno ó más servicios SIG
– Integrada en una aplicación Web

Expectativas de los mapas 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 …
PLANEAR y DISEÑAR
…nuestros mapas para la Web

Consideraciones para su mapa 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?
PLANEAR

Demostración
Explorando mapas en la Web

Diseño de mapas
Recursos Esri disponibles

Recursos disponibles
ArcGIS Resource Center
http://resources.arcgis.com/

ESRI Mapping Center
Como crear resultados cartográficos profesionales con ArcGIS
http://mappingcenter.esri.com/

Diseño del Mapa
Flujo de trabajo cartográfico

Elementos de diseño

Presentando el trabajo SIG
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

Cartografía para visualización
Cartografía Impresa
Planeación Atlas Ingeniería
Topografía Vías Análisis

Cartografía 3D
Planeación local Geología

Vista global
Arquitectura Prevención de desastres

Servicios

Cartografía interactiva

Flujo de trabajo cartográfico
Datos
Planeación Simbología
Salidas finales Diseño

Pensando en el diseño de mapa
Mensaje Audiencia Diseño

• Visualización • Plantilla • Elementos de mapa
• Objetivos • Generalización • Proyección
• Etiquetado • Simbología • Escala
• Limitaciones técnicas

Escala del mapa
0 1000 2000 3000 4000

Escala pequeña Kilómetros
0 100 200 300 400

Kilómetros
0 1 2 3 4
Escala grande Kilómetros

Seleccionando datos
Los datos deben:
Ayudar a orientar al lector
Apuntar al objetivo del mapa
Explicar la distribución de otros datos
Vías Ductos de agua
Ciudades Válvulas
Límites Perímetro de incendio
Capas de Mapa base Capas operacionales

Mapas de referencia y mapas temáticos
© Focus Corporation

Peso visual
Color vibrante
Ubicación cerca
Nueva Zelanda
al borde superior
Texto muy cercano
Ciudades
Pequeña
Mediana
Grande
Objeto grande
Forma regular
Ubicación sobre
la derecha
Objetos grandes

Peso visual
Color modificado
Nueva Zelanda
Ciudades Texto alejado

Pequeña
Mediana
Marco eliminado Grande
Tamaño y brillo
reducidos
Tamaño y brillo
reducidos

Contraste visual
Wisconsin Wisconsin
Cropland Cropland
Acreage
Acreage
Low Low
Medium Medium
High High
Source: United States Source: United States

Census Bureau
Census Bureau

Figure - Ground

Jerarquía visual
Map Title
Legend Title
Category 1
Category 2
Category 3
Category 4
12 3 4 5
0 10 20 30 40
Company
Logo

Color en el diseño
Dimensiones
Color (Hue)
Saturación
Iluminación (Value)

Sistemas para especificar color
RGB
Red
0 255
Green
0 255
Blue
0 255
20 R
150 G
230 B

HSV
Hue
0 360
203
Saturation
0 100
Value
0 100
203 H
91 S
90 V

CMYK Cyan
Red
0 100
Magenta
0 100
Yellow
0 100
Black
0 100
82 C
31 M
0 Y
10 K

Color en el diseño
Convenciones
• 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é

Consideraciones en el diseño de color
Discapacidad visual
2
5
Evite Use
Etiquete atributos
Evite Use
Verde puro Azul-verde, azul
Rojo puro Naranja, dorado
http://colorbrewer2.org/

Consideraciones en el diseño de color
Percepció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
Tablas de color
Diagrama de calibración
M
0% Y 20% Y 40% Y
Y
60% Y 80% Y 100% Y

Simbología
Datos cualitativos / Datos cuantitativos

Simbología
Variables visuales para símbolos cualitativos
Color Forma Color & forma
Forma Forma
Color Color & forma
Color Color & forma

Simbología
Variables visuales para símbolos cuantitativos
Valor
Tamaño Valor Tamaño & Valor
Tamaño Valor Tamaño & Valor

Simbología
Representaciones cartográficas
Enmascaramiento y
mejora de símbolos
Corte controlado de símbolos

dentro de achurados
Crear efectos
geométricos
Crear símbolos
personalizados
Desplazamiento
de símbolos

Textos en el mapa
Variables visuales
• Primarias:
Fuente Tamaño Color
Helvetica 12 point Rojo
Times New Roman 18 Point Azul
Arial Italic 24 Point Gris
• Secundarias
Mayúsculas/
Designación Ubicación Organización Ortografía
minúsculas
Population Newcastle Köln TEXAS
of Manitoba Upon
Tyne Cologne Texas
Manitoba
Population Newcastle Upon Tyne

Textos en el mapa
Estilo de fuente y uso
Tipo de Sans
Ejemplo Serif Roman Italic
elemento serif
Elementos
Montana Granito P P P
naturales
Elementos
Colegio Lincoln P P
culturales
Hidrográfico Lago Tarapoto P P
TT T T
Textos en el mapa
Maplex
Estilos de ubicación especial Diccionario de abreviaturas
Reducción Etiquetas apiladas

del tamaño School
de la fuente
Black Lake/Elementary School
Tumwater/Middle School
Black Hills/High School

Textos en el mapa
Anotaciones
Tipos de Licencia
Almacenamiento Manejo
anotación ArcGIS
ArcInfo
ArcMap &
Standard GDB ArcEditor
ArcCatalog
ArcView
ArcMap & ArcInfo

Feature-linked GDB
ArcCatalog ArcEditor
ArcInfo
Map MXD ArcMap ArcEditor
ArcView

Cree un gran mapa por su cuenta
• Dibujar datos SIG con ArcMap es fácil

• Crear un mapa bien diseñado requiere habilidad y experiencia.
– Implica costos en tiempo y dinero
Street Map Template

Geologic Mapping Template

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

(archivo MXD) (geodatabase)
Archivos de
estilos y layer
packages
Documentación
Herramientas o Ejemplos de
modelos de aplicaciones Web
geoprocesamiento

Demostración
Crear un mapa para los predios de San Carlos de Suba

Diseño del Mapa
Mapas Web

Mapas Web
Los mapas Web dan una dimensión adicional

Diseñando un mapa para publicación
Diseñe cada escala como si fuera un mapa individual
• 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
Escala Grande
Escala Mediana
Escala Pequeña

Diseño de símbolos de mapa
Para Mapas impresos
• 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 Web

• 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

Utilización de textos
Para Mapas impresos
• 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
T T
Para Mapas Web
• 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
T
• Configure visibilidad de etiquetas con rangos de escala

Demostración
Ajustar el mapa de predios de San Carlos de Suba

para publicación Web

Contenido
Segunda Sesión
• 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

Creando mapas para la Web

Organización de los datos
Mapas Base Capas operacionales
• Provee un marco geográfico de

referencia
• Contiene datos vector estáticos y
raster
• Servicios Cached

Mapas base
• Usar recursos existentes

– ArcGIS Online, Google Maps, Virtual Earth
• Crear recursos
– Crear y publicar sus propios datos

Organización de los datos
Mapas Base Capas operacionales
• Provee un marco geográfico de • Muestra elemento de interés

referencia • Soporta la funcionalidad de la
• Contiene datos vector estáticos y aplicación
raster • Consulta, geo-procesamiento
• Servicios Cached …
• 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

Despliegue de 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

Servicios optimizados de mapa
• Usa un motor de dibujo de alto rendimiento

• El recurso es un archivo de definición de servicio de mapa (msd)
Mapa (.mxd) 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

Evalúe los mapas
• Analice y pre-visualice directamente en ArcMap

Analice el mapa
• 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

Pre visualice 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

Demostración
Analizando el mapa Web en ArcMap

Mejores prácticas

Consejos para la creación del servicio de
mapa
• 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 de rendimiento para mapas
• 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 datos
• 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

Tipos de conexiones a la Geodatabase
Conexión Directa
Servicio
ArcSDE
Base de Datos
Cliente
Conexión SDE

Publicando mapas

ArcGIS Server y la Web
SIG Web
ArcGIS Server
ArcGIS
ArcGIS Desktop Explorer
Internet
SIG Escritorio
SIG Móvil
ArcGIS.com
Crear Publicar Usar

Publicando servicios de mapa MSD
• Dos opciones
– Publicar el servicio de mapa directamente desde ArcMap
– Salvar como MSD, y publicarlo con ArcCatalog ó el ArcGIS Server
Manager

Demostración
Publicando el mapa Web con ArcGIS Server

¿Qué es el caché del mapa?
• 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

¿Cómo funcionan los servicios con caché?
Servidor Servidor
SIG Datos
Web

¿En qué mapas debería usar caché?
• 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

Proceso de construcción del 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

Planear el 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 las escalas
• 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

Proyecto piloto
• 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

Caché en ArcGIS Server 10
• Cache mixto
• Caché colaborativo
• Formato de almacenamiento
Compacto Explotado

Demostración
Creando el caché de un mapa Web

Configurando una aplicación web

Aplicaciones Web
Entregar toda la información unida
• Capas del servicio de mapa

– Mapas base
– Capas operacionales
• Tareas
– Consulta
– Geocodificación
– Geoprocesamiento

Opciones para construir aplicaciones
Web
Web ADF Web APIs

• JavaScript
• Flex
• Silverlight
Java
.NET
SOAP ó Conexión REST

Local
ArcGIS Server

Centro de recursos de ArcGIS Server
• Un solo sitio para acceder a:

– Software development kits (SDKs)
– Comunidades
– Galerías de código

Visores de Ejemplo
• Beneficios
– Aplicaciones Web configurables
• No es necesario programación
– Despliegue rápido
– Herramientas listas para empezar

Resumen
• 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

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

Recomendados
Designing Better Maps:

A Guide for GIS Users
Designed Maps:
A Sourcebook for Map Use:
GIS Users Reading and Analysis

Mucho mas por aprender…
• 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

¿PREGUNTAS?

GRACIAS

Mejores Prácticas en El Diseño y Creación de Mapas para La Web - 2.00pm

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Mejores Prácticas en El Diseño y Creación de Mapas para La Web - 2.00pm

Transféré par

Droits d'auteur :

Formats disponibles

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Mapas para usuarios

Conferencia Colombiana de Usuarios Esri 2010

• Permite llevar a cabo tareas enfocadas y con sentido

Conferencia Colombiana de Usuarios Esri 2010

• Los mapas Web deberían ser:

• Para lograr esto debemos …

…nuestros mapas para la Web

Conferencia Colombiana de Usuarios Esri 2010

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

Conferencia Colombiana de Usuarios Esri 2010

Explorando mapas en la Web

Conferencia Colombiana de Usuarios Esri 2010

Recursos Esri disponibles

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Flujo de trabajo cartográfico

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Planeación Atlas Ingeniería

Topografía Vías Análisis

Conferencia Colombiana de Usuarios Esri 2010

Planeación local Geología

Arquitectura Prevención de desastres

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Salidas finales Diseño

Conferencia Colombiana de Usuarios Esri 2010

Mensaje Audiencia Diseño

Conferencia Colombiana de Usuarios Esri 2010

0 1000 2000 3000 4000

0 100 200 300 400

Conferencia Colombiana de Usuarios Esri 2010

Los datos deben:

Ayudar a orientar al lector

Apuntar al objetivo del mapa

Explicar la distribución de otros datos

Vías Ductos de agua

Límites Perímetro de incendio

Capas de Mapa base Capas operacionales

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Ciudades Texto alejado

Conferencia Colombiana de Usuarios Esri 2010

Source: United States Source: United States

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

• Utilice las convenciones establecidas siempre que sea posible

Conferencia Colombiana de Usuarios Esri 2010

Rojo puro Naranja, dorado

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010