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 PRCTICAS EN EL DISEO Y CREACIN DE MAPAS PARA LA WEB

Seminario Preconferencia
Contenido
Primera Sesin
Introduccin
Qu es un mapa web? Expectativas de los mapas Consideraciones para su mapa en la web
Diseo del mapa

Recursos Esri Flujo de trabajo cartogrfico Elementos de diseo Plantillas
Diseo del mapa para Web

Pautas de diseo para mapas Web
Introduccin
Mapas en la Web
Evolucin desde mapas no interactivos hasta mapas en la web
SIG en la Web Mapas Web con bsquedas Mapas Web estticos

Herramientas elaboradas Para usuarios SIG Lento y complejo
Mapas en la Web 2.0

Aplicaciones Web construidas con un propsito Tareas reutilizables Realizacin de tareas especficas
Mapas para usuarios Bsquedas espaciales Exploracin en los mapas
Qu es un mapa Web?
Permite llevar a cabo tareas enfocadas y con sentido Contiene uno ms servicios SIG
Integrada en una aplicacin Web
Expectativas de los mapas Web

Los mapas Web deberan ser:
Enfocados en tareas Diseados para el usuario final Incorporar excelente cartografa Fciles y rpidos de usar
Para lograr esto debemos

PLANEAR y DISEAR
nuestros mapas para la Web

Consideraciones para su mapa web

Cul es el propsito del negocio de la aplicacin? Quines son los usuarios finales? Usaremos un sitio Web interno externo? Cules datos sern incluidos? Cmo sern usados los datos? Pueden ser combinados los datos con otros servicios? En otras aplicaciones?
PLANEAR
Demostracin
Explorando mapas en la Web
Diseo de mapas
Recursos Esri disponibles
Recursos disponibles
ArcGIS Resource Center
http://resources.arcgis.com/
ESRI Mapping Center

Como crear resultados cartogrficos profesionales con ArcGIS
http://mappingcenter.esri.com/
Diseo del Mapa

Flujo de trabajo cartogrfico Elementos de diseo
Presentando el trabajo SIG

Un buen mapa: Involucra la informacin SIG a la vida cotidiana Logra comunicacin efectiva con la audiencia Sirve como soporte para decisiones Posiciona su organizacin
Cartografa para visualizacin

Cartografa Impresa
Planeacin
Atlas
Ingeniera
Topografa
Vas
Anlisis

Cartografa 3D
Planeacin local
Vista global
Geologa
Arquitectura
Servicios
Prevencin de desastres

Cartografa interactiva
Flujo de trabajo cartogrfico
Datos Planeacin Simbologa
Salidas finales
Diseo
Pensando en el diseo de mapa
Mensaje
Visualizacin Objetivos Etiquetado
Audiencia
Plantilla Generalizacin Simbologa
Diseo
Elementos de mapa Proyeccin Escala Limitaciones tcnicas
Escala del mapa
Escala pequea
1000
2000
3000
4000
Kilmetros
100
200
300
400
Kilmetros
Escala grande
Kilmetros
Seleccionando datos
Los datos deben: Ayudar a orientar al lector Apuntar al objetivo del mapa Explicar la distribucin de otros datos
Vas Ciudades Lmites
Ductos de agua Vlvulas
Permetro de incendio
Capas de Mapa base
Capas operacionales
Mapas de referencia y mapas temticos
Focus Corporation
Elementos de diseo
Peso visual Color vibrante Ubicacin cerca al borde superior
Nueva Zelanda
Texto muy cercano
Ciudades
Pequea Mediana Grande
Forma regular
Objeto grande Ubicacin sobre la derecha
Objetos grandes
Elementos de diseo
Peso visual
Color modificado
Nueva Zelanda
Ciudades
Pequea Mediana
Texto alejado
Marco eliminado
Grande
Tamao y brillo reducidos Tamao y brillo reducidos
Elementos de diseo
Contraste visual Wisconsin Cropland Acreage
Wisconsin Cropland Acreage
Low Medium High Source: United States Census Bureau
Low Medium High

Source: United States Census Bureau
Elementos de diseo
Figure - Ground
Elementos de diseo
Jerarqua visual
Map Title
Legend Title
Category 1 Category 2 Category 3 Category 4 12 3 4 5
10
20 30 40
Company Logo
Color en el diseo
Dimensiones
Color (Hue)
Saturacin
Iluminacin (Value)
Sistemas para especificar color
RGB
Red 0 255
Green
0 Blue 0 20 R 150 G 230 B 255 255
HSV
Hue 0
203
360
Saturation 0 Value 0 203 H 91 S 90 V 100 100
CMYK
Cyan Red 0 Magenta 0 Yellow 0 100 100 100
Black
0 82 31 0 10 C M Y K
100
Color en el diseo
Convenciones
Utilice las convenciones establecidas siempre que sea posible Convenciones comunes
Agua: Azul Desierto: Caf Vegetacin: Verde reas construidas: Gris, Rojo, Purpura Temperaturas: Progresin de Azul a Rojo Curvas de nivel: Caf
Consideraciones en el diseo de color

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

Percepcin visual
Mximo 12 colores
6 7 niveles del mismo tono
Diagrama de calibracin de color

\ArcGIS\Desktop10.0\plotters\CMY_PlotterCalibrate.mxd Tablas de color Diagrama de calibracin C M Y K 60% Y 80% Y 100% Y
0% Y
20% Y
40% Y
Simbologa
Datos cualitativos / Datos cuantitativos
Simbologa
Variables visuales para smbolos cualitativos
Color
Forma
Color & forma
Forma
Forma
Color
Color & forma
Color
Color & forma

Simbologa
Variables visuales para smbolos cuantitativos
Valor
Tamao
Valor
Tamao & Valor
Tamao
Valor
Tamao & Valor
Simbologa
Representaciones cartogrficas
Enmascaramiento y mejora de smbolos Corte controlado de smbolos dentro de achurados
Crear efectos geomtricos Crear smbolos personalizados
Desplazamiento de smbolos
Textos en el mapa
Variables visuales
Primarias:
Fuente Helvetica Times New Roman Arial Italic Tamao
12 point
Color Rojo Azul Gris
18 Point
24 Point
Secundarias
Designacin Population of Manitoba Manitoba Population Ubicacin Organizacin Newcastle Upon Tyne Newcastle Upon Tyne Ortografa Kln Cologne Maysculas/ minsculas TEXAS Texas
Textos en el mapa
Estilo de fuente y uso
Tipo de elemento
Elementos naturales Elementos culturales Hidrogrfico
Ejemplo Montana Granito

Colegio Lincoln
Serif
P
Sans serif
Roman
P
Italic
P
P P
P P
Lago Tarapoto
TT T T
Textos en el mapa
Maplex Estilos de ubicacin especial Diccionario de abreviaturas
Reduccin del tamao de la fuente
Etiquetas apiladas School

Black Lake/Elementary School Tumwater/Middle School Black Hills/High School
Textos en el mapa
Anotaciones
Tipos de anotacin
Almacenamiento
Manejo
Licencia ArcGIS ArcInfo ArcEditor ArcView ArcInfo ArcEditor
Standard
GDB
ArcMap & ArcCatalog ArcMap & ArcCatalog
Feature-linked
GDB
Map
MXD
ArcMap
ArcInfo ArcEditor ArcView
Cree un gran mapa por su cuenta

Dibujar datos SIG con ArcMap es fcil Crear un mapa bien diseado requiere habilidad y experiencia.
Implica costos en tiempo y dinero
Geologic Mapping Template
Street Map Template
Que es una plantilla de mapa?

Conjunto de recursos que definen un mapa bien diseado
Documento de mapa (archivo MXD)
Ejemplos de datos (geodatabase)
Documentacin
Archivos de estilos y layer packages
Herramientas o modelos de geoprocesamiento
Ejemplos de aplicaciones Web
Demostracin
Crear un mapa para los predios de San Carlos de Suba
Diseo del Mapa

Mapas Web
Mapas Web
Los mapas Web dan una dimensin adicional
Diseando un mapa para publicacin

Disee cada escala como si fuera un mapa individual
Los mapas son diseados para ser visualizados en mltiples escalas El diseo cartogrfico debe mostrar una transicin suavizada entre escalas
Escala Grande Escala Mediana Escala Pequea
Diseo de smbolos de mapa

Para Mapas impresos
Disee para una salida de alta resolucin Disee para utilizar en una escala especifica De ser necesario, utilice smbolos complejos
Para Mapas Web
Disee para baja resolucin o para despliegue en pantalla Disee para utilizar en escalas especificas Evite smbolos complejos en mapas dinmicos Puede crear cache de imgenes (pre-simbolizar) si se requieren smbolos complejos
Utilizacin de textos
Para Mapas impresos
Utilice anotaciones para ubicacin exacta de los textos El texto debe tener un tamao mnimo de 4 ptos. Utilice fuentes serif y sans-serif
T T
Para Mapas Web
El texto debe tener un tamao mnimo de 6 ptos. Utilice fuentes sans-serif para aumentar legibilidad Utilice etiquetas (labels) con capas dinmicas Configure visibilidad de etiquetas con rangos de escala
Demostracin
Ajustar el mapa de predios de San Carlos de Suba para publicacin Web
Contenido
Segunda Sesin
Creando mapas para la Web

Organizacin de los datos Evaluar y analizar el mapa
Mejores prcticas
Consejos para la creacin de servicios de mapa Consejos de rendimiento para mapas Consejos de rendimiento para datos
Publicando mapas
Cmo crear los servicios? Cmo crear el cach de los servicios?
Creando una aplicacin Web Resumen
Creando mapas para la Web
Organizacin de los datos

Mapas Base Provee un marco geogrfico de referencia Contiene datos vector estticos y raster Servicios Cached Capas operacionales
Mapas base
Usar recursos existentes
ArcGIS Online, Google Maps, Virtual Earth
Crear recursos
Crear y publicar sus propios datos
Organizacin de los datos

Mapas Base Provee un marco geogrfico de referencia Contiene datos vector estticos y raster Servicios Cached Capas operacionales Muestra elemento de inters Soporta la funcionalidad de la aplicacin Consulta, geo-procesamiento Despliegue sobre un mapa base
Capas operacionales
Tienen contenido dinmico
Observaciones, feeds, incidentes Resultados de una consulta o clculo Capas derivadas de un geo-procesamiento Capas para edicin y acceso a datos
Despliegue de capas operacionales

Capas de mapa dinmicas
Datos en tiempo real Datos que cambian frecuentemente
Capas de mapa con cach

Alto volumen de trfico No cambian frecuentemente
Despliegue de capas operacionales

Grficos en el cliente
Pop-ups de informacin Resultado de una consulta o geo procesamiento
Capa de elementos en el cliente

Extensin de los grficos Funcionalidad de seleccin y edicin
Servicios optimizados de mapa

Usa un motor de dibujo de alto rendimiento El recurso es un archivo de definicin de servicio de mapa (msd)
Mapa (.mxd) Mapa (.msd)
Uso de los servicios basados en MSD

Dinmico o con cach Mapping, WMS, KML
Uso de los servicios basados en MXD

WFS, WCS, Mobile Data Access, Geodata Access, Geoprocessing, Network Analysis
Evale 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
Proyeccin al vuelo, sin ndices espaciales, etc
Mensajes
Sugerencias para mejorar el documento de mapa
Pre visualice el mapa

Inspeccionar visualmente
Rendimiento Calidad grfica
Ventana de pre visualizacin

Usa el nuevo motor de dibujo Incluye el tiempo de pre visualizacin
Complementar con archivos log del servidor y base de datos
Demostracin
Analizando el mapa Web en ArcMap
Mejores prcticas
Consejos para la creacin del servicio de mapa

El cach nos brinda un mayor rendimiento
Disee sus escalas Use esquemas disponibles para combinar mltiples servicios
Use servicios de mapa basados en MSD donde sea posible

El dibujo y el cache sern ms rpidos Mueva fuentes de datos especializadas a servicios MXD
Capas CAD, TIN, terrain, topologa
Servicios de mapa basados en MXD

Use las mejores prcticas de rendimiento Seminario Web: Authoring and Publishing Optimized Map Services
Ayuda en lnea
Consejos de rendimiento para mapas

Pre procesar cuando sea posible
Anotaciones Resultados de consultas y tareas Cach
Evite la proyeccin al vuelo
Mantenga los datos y mapas limpios

Remueva capas que no use Use menos geometras 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 Tamao relativo a la extensin del mapa
ndices de atributos
Use en joins y consultas frecuentes
Tipos de conexiones a la Geodatabase
Conexin Directa
Servicio ArcSDE Cliente Conexin SDE Base de Datos
Publicando mapas
ArcGIS Server y la Web

SIG Web
ArcGIS Server
ArcGIS Explorer
ArcGIS Desktop
Internet
SIG Escritorio
ArcGIS.com
SIG Mvil
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
Demostracin
Publicando el mapa Web con ArcGIS Server
Qu es el cach del mapa?

Conjunto de imgenes del mapa
Pre-generadas para un despliegue rpido Creadas a niveles de escala predefinidos.
Jerarqua de carpetas
Basada en las escalas
Tiles
Guardados en el directorio de cache de server
Cmo funcionan los servicios con cach?

Servidor Web Servidor SIG
Datos
En qu mapas debera usar cach?

Es mejor el servicio con cach para
Mapas base e imgenes Datos no cambian frecuentemente
Servicios sin cach mejores para:

Datos cambian frecuentemente Simbologa basada en atributos Datos que sern editados
Proceso de construccin del cach

Planear
Asignar recursos Decida el tipo de cach, el esquema de generacin de tiles, referencia espacial Escoja las escalas
Crear
Crear el documento de mapa Probar el mapa
Generar
Proyecto piloto Construir las imgenes
Planear el cach
Recursos
Espacio de almacenamiento Tiempo de generacin
Tipos de cach
Fused Multilayer
Esquema de generacin 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 creacin y el tamao en disco Usuarios Web limitados a estas escalas
Sugerencias
Determine la escala ms grande que necesita Duplique el factor de escala hasta la extensin total Haga coincidir su escalas con las de otros servicios
Por ejemplo ArcGIS Online
Proyecto piloto
Crear el cache para un rea pequea
Defina la extensin del marco de datos a esta rea
Trabaje con el servicio con cache para examinar

La apariencia de la simbologa, etiquetas, etc El rendimiento en su aplicacin cliente
Hacer ajustes y construir nuevamente

Estime el tiempo de creacin y espacio para todo el servicio
Cach en ArcGIS Server 10

Cache mixto
Cach colaborativo Formato de almacenamiento
Compacto
Explotado
Demostracin
Creando el cach de un mapa Web
Configurando una aplicacin web
Aplicaciones Web
Entregar toda la informacin unida
Capas del servicio de mapa

Mapas base Capas operacionales
Tareas
Consulta Geocodificacin Geoprocesamiento
Opciones para construir aplicaciones Web Web ADF Web APIs

JavaScript Flex Silverlight
Java .NET REST
SOAP Conexin Local
ArcGIS Server
Centro de recursos de ArcGIS Server

Un solo sitio para acceder a:
Software development kits (SDKs) Comunidades Galeras de cdigo
Visores de Ejemplo
Beneficios
Aplicaciones Web configurables
No es necesario programacin
Despliegue rpido Herramientas listas para empezar
Resumen
Diseo
Flujo de trabajo cartogrfico Elementos de diseo Utilizacin de plantillas Recomendaciones de diseo para mapas Web
Creacin
Organizacin de datos Anlisis y optimizacin del mapa
Publicacin
Generacin de cache
Puesta en una aplicacin 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 GIS Users
Map Use: Reading and Analysis
Mucho mas por aprender

Cursos presenciales
Introduccin 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

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

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

Cargado por

Copyright:

Formatos disponibles

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

MEJORES PRCTICAS EN EL DISEO Y CREACIN DE MAPAS PARA LA WEB

Conferencia Colombiana de Usuarios Esri 2010

Diseo del mapa

Diseo del mapa para Web

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

SIG en la Web Mapas Web con bsquedas Mapas Web estticos

Mapas en la Web 2.0

Mapas para usuarios Bsquedas espaciales Exploracin en los mapas

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Expectativas de los mapas Web

Para lograr esto debemos

nuestros mapas para la Web

Consideraciones para su mapa web

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

ESRI Mapping Center

Diseo del Mapa

Conferencia Colombiana de Usuarios Esri 2010

Presentando el trabajo SIG

Conferencia Colombiana de Usuarios Esri 2010

Cartografa para visualizacin

Conferencia Colombiana de Usuarios Esri 2010

Cartografa para visualizacin

Conferencia Colombiana de Usuarios Esri 2010

Cartografa para visualizacin

Conferencia Colombiana de Usuarios Esri 2010

Flujo de trabajo cartogrfico

Datos Planeacin Simbologa

Conferencia Colombiana de Usuarios Esri 2010

Pensando en el diseo de mapa

Conferencia Colombiana de Usuarios Esri 2010

Escala del mapa

Conferencia Colombiana de Usuarios Esri 2010

Vas Ciudades Lmites

Ductos de agua Vlvulas

Capas de Mapa base

Conferencia Colombiana de Usuarios Esri 2010

Mapas de referencia y mapas temticos

Conferencia Colombiana de Usuarios Esri 2010

Objeto grande Ubicacin sobre la derecha

Conferencia Colombiana de Usuarios Esri 2010

Tamao y brillo reducidos Tamao y brillo reducidos

Conferencia Colombiana de Usuarios Esri 2010

Wisconsin Cropland Acreage

Low Medium High Source: United States Census Bureau

Low Medium High

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Conferencia Colombiana de Usuarios Esri 2010

Sistemas para especificar color

Conferencia Colombiana de Usuarios Esri 2010

Sistemas para especificar color

Saturation 0 Value 0 203 H 91 S 90 V 100 100

Conferencia Colombiana de Usuarios Esri 2010

Sistemas para especificar color

Cyan Red 0 Magenta 0 Yellow 0 100 100 100

Conferencia Colombiana de Usuarios Esri 2010