Está en la página 1de 94

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


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

Conferencia Colombiana de Usuarios Esri 2010


Introducción

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


¿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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

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 disponibles
ArcGIS Resource Center

http://resources.arcgis.com/

Conferencia Colombiana de Usuarios Esri 2010


ESRI Mapping Center
Como crear resultados cartográficos profesionales con ArcGIS

http://mappingcenter.esri.com/

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


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

Conferencia Colombiana de Usuarios Esri 2010


Cartografía para visualización
Cartografía Impresa

Planeación Atlas Ingeniería

Topografía Vías Análisis

Conferencia Colombiana de Usuarios Esri 2010


Cartografía para visualización
Cartografía 3D

Planeación local Geología


Vista global

Arquitectura Prevención de desastres


Servicios

Conferencia Colombiana de Usuarios Esri 2010


Cartografía para visualización
Cartografía interactiva

Conferencia Colombiana de Usuarios Esri 2010


Flujo de trabajo cartográfico

Datos

Planeación Simbología

Salidas finales Diseño

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


Mapas de referencia y mapas temáticos

© Focus Corporation

Conferencia Colombiana de Usuarios Esri 2010


Elementos de diseño
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

Conferencia Colombiana de Usuarios Esri 2010


Elementos de diseño
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

Conferencia Colombiana de Usuarios Esri 2010


Elementos de diseño
Contraste visual

Wisconsin Wisconsin
Cropland Cropland
Acreage
Acreage

Low Low
Medium Medium
High High

Source: United States Source: United States


Census Bureau
Census Bureau

Conferencia Colombiana de Usuarios Esri 2010


Elementos de diseño
Figure - Ground

Conferencia Colombiana de Usuarios Esri 2010


Elementos de diseño
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

Conferencia Colombiana de Usuarios Esri 2010


Color en el diseño
Dimensiones

Color (Hue)

Saturación

Iluminación (Value)

Conferencia Colombiana de Usuarios Esri 2010


Sistemas para especificar color

RGB
Red
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
Hue
0 360
203

Saturation
0 100

Value

0 100

203 H
91 S
90 V

Conferencia Colombiana de Usuarios Esri 2010


Sistemas para especificar color

CMYK Cyan
Red
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


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é

Conferencia Colombiana de Usuarios Esri 2010


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/

Conferencia Colombiana de Usuarios Esri 2010


Consideraciones en el diseño de color
Percepció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

Tablas de color
Diagrama de calibración

M
0% Y 20% Y 40% Y
Y

60% Y 80% Y 100% Y

Conferencia Colombiana de Usuarios Esri 2010


Simbología
Datos cualitativos / Datos cuantitativos

Conferencia Colombiana de Usuarios Esri 2010


Simbología
Variables visuales para símbolos cualitativos

Color Forma Color & forma

Forma Forma

Color Color & forma

Color Color & forma

Conferencia Colombiana de Usuarios Esri 2010


Simbología
Variables visuales para símbolos cuantitativos

Valor

Tamaño Valor Tamaño & Valor

Tamaño Valor Tamaño & Valor

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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
Conferencia Colombiana de Usuarios Esri 2010
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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

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 Web
Los mapas Web dan una dimensión adicional

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

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


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

Conferencia Colombiana de Usuarios Esri 2010


Creando mapas para la Web

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


Mapas base

• Usar recursos existentes


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


Evalúe los mapas

• Analice y pre-visualice directamente en ArcMap

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

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


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


Tipos de conexiones a la Geodatabase

Conexión Directa

Servicio
ArcSDE
Base de Datos
Cliente
Conexión SDE

Conferencia Colombiana de Usuarios Esri 2010


Publicando mapas

Conferencia Colombiana de Usuarios Esri 2010


ArcGIS Server y la Web

SIG Web

ArcGIS Server

ArcGIS
ArcGIS Desktop Explorer

Internet
SIG Escritorio

SIG Móvil
ArcGIS.com

Crear Publicar Usar

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


Demostración

Publicando el mapa Web con ArcGIS Server

Conferencia Colombiana de Usuarios Esri 2010


¿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

Conferencia Colombiana de Usuarios Esri 2010


¿Cómo funcionan los servicios con caché?

Servidor Servidor
SIG Datos
Web

Conferencia Colombiana de Usuarios Esri 2010


¿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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


Caché en ArcGIS Server 10

• Cache mixto

• Caché colaborativo

• Formato de almacenamiento

Compacto Explotado

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


Aplicaciones Web

Entregar toda la información unida

• Capas del servicio de mapa


– Mapas base
– Capas operacionales

• Tareas
– Consulta
– Geocodificación
– Geoprocesamiento

Conferencia Colombiana de Usuarios Esri 2010


Opciones para construir aplicaciones
Web

Web ADF Web APIs


• JavaScript
• Flex
• Silverlight
Java
.NET

SOAP ó Conexión REST


Local

ArcGIS Server

Conferencia Colombiana de Usuarios Esri 2010


Centro de recursos de ArcGIS Server

• Un solo sitio para acceder a:


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

Conferencia Colombiana de Usuarios Esri 2010


Visores de Ejemplo

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

Conferencia Colombiana de Usuarios Esri 2010


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

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 Map Use:
GIS Users Reading and Analysis

Conferencia Colombiana de Usuarios Esri 2010


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

Conferencia Colombiana de Usuarios Esri 2010


¿PREGUNTAS?

Conferencia Colombiana de Usuarios Esri 2010


GRACIAS

Conferencia Colombiana de Usuarios Esri 2010

También podría gustarte