Curso Openlayers

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA
Vctor Velarde Gutirrez
CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA (31-EX-75)

Estudios propios de la Universidad de Cantabria
MATERIALES DOCENTES Materia N 4 Difusin y publicacin de resultados
11-M4.2
D!"#$$%&&% '! #(&)*#*)%+!" ,!%,$-.)*#" /!01 O(!+L#2!$"
MATERIALES DE APOYO
P$%.!"%$1 34CTOR 3ELARDE GUTI5RRE6

E+!$% 2711 18 !')*)9+ : ;)*<%$.;!&#$'!=,>#)&.*%>
Licencia Creative Commons Este documento est bajo una licencia de Creative Commons Atribucin Compartir Igual 3.0. Los t rminos completos se pueden consultar en !ttp"##creativecommons.org#licenses#b$-sa#3.0#
4+')*! '! *%+<!+)'%"

%resentacin................................................................................................... & 1. 'uevas aplicaciones geogr(icas en la )eb...............................................* 1.1. La revolucin de las tecnolog+as geoespaciales $ la 'eogeogra(+a.....* 1.,. Los mas!ups- un nuevo estilo de combinar in(ormacin...................... 1.3. Cruce de caminos" la 'eogeogra(+a $ los /I0....................................10 1.&. 'uevos usuarios- nuevos programadores $ 1penLa$ers...................1, 1.&.1. El per(il del programador de /I0................................................13 1.&.,. 2%or 3u usar 1penLa$ers4........................................................1& ,. 5undamentos de programacin para 1penLa$ers....................................16 ,.1. Las bases t cnicas de Internet" 7C%#I% $ 877%..................................16 ,.,. Los lenguajes para la 9eb.................................................................,0 ,.,.1. :ise;ando la estructura de una pgina con 87<L.....................,0 ,.,.,. :ando estilo con !ojas en cascada =C//>...................................,& ,.,.3. 5unciones $ eventos con ?avascript............................................,@ ,.,.&. El papel de los lenguajes de servidor.........................................33 3. Aprendiendo a desarrollar con 1penLa$ers..............................................36 3.1. 2Cmo se usa 1penLa$ers4...............................................................36 3.1.1. Creacin de un mapa bsico......................................................3@ 3.1.,. 2Au tipos de dato puedo cargar con 1penLa$ers4...................3. 3.1.3. Controles bsicos para interactuar con 1penLa$ers..................&0 3.,. Becursos para pro(undiCar en el aprendiCaje de 1penLa$ers............&,
4+')*! '! )&?"<$#*)%+!"

Ilustracin 1" Al(abeto realiCado con lugares reales en 0oogle<aps..............@ Ilustracin ," <apamundi con logos de servicios sociales............................... Ilustracin 3" El primer mas!up......................................................................D Ilustracin &" /I0 tradicional (rente a 'eogeogra(+a.....................................11 Ilustracin *" Eentajas de 1penLa$ers (rente a 0oogle<aps.......................16 Ilustracin 6" 'iveles del protocolo 7C%#I%....................................................1@ Ilustracin @" 7esela de mapa de 0oogle<aps en (ormato png....................,0 Ilustracin ." <odelo de cajas C//...............................................................,6 Ilustracin D" /itio 9eb o(icial de 1penLa$ers..............................................36 Ilustracin 10" 8ola mundo con 1penLa$ers................................................3. Ilustracin 11" 7ipos comunes de capas usados en 1penLa$ers..................3D Ilustracin 1," Controles visuales comunes en 1penLa$ers =1 de ,>...........&0 Ilustracin 13" Controles visuales comunes en 1penLa$ers =, de ,> ..........&1 Ilustracin 1&" 0u+a rpida de recursos para 1penLa$ers............................&,
P$!"!+<#*)9+
1bjetivos de la asignatura Conocer 3u tipo de nuevas aplicaciones geogr(icas eFisten en la 9eb $ en 3u se di(erencian de las aplicaciones /I0 tradicionales. Ad3uirir los conocimientos bsicos sobre Internet $ los mecanismos in(ormticos 3ue !acen posible el (uncionamiento de 1penLa$ers $en general- las aplicaciones 9eb. %oder utiliCar 87<L- ?avascript $ C// a nivel bsico para realiCar un mashup con 1penLa$ers $ diversos proveedores de contenidos. Conocer la biblioteca 1penLa$ers $ sus capacidades generales para el desarrollo de pginas 9eb.
%lanteamiento de las clases La asignatura tiene un en(o3ue (undamentalmente prctico $ como tal se realiCarn varios ejercicios con el ordenador durante el curso. %ara cada ejercicio se proporcionar un documento-gu+a $ los (ic!eros necesarios $ a su (inaliCacin se proporcionarn las soluciones-tipo. :urante las clases se alternarn los ejercicios con la presentacin de contenidos bsicos. En ste documento se recogen dic!os contenidosorganiCados en torno a 3 reas" las nuevas aplicaciones geogr(icas en la 9eb- (undamentos de programacin 9eb $ (unciones bsicas de 1penLa$ers. Adems incluiremos otras re(erencias para pro(undiCar en el aprendiCaje- en (orma de enlaces a lecturas $ ejercicios complementarios. 5inalmente el alumno realiCar tras (inaliCar las clases presenciales un ejercicio prctico final 3ue remitir al pro(esor por correo electrnico- en el plaCo 3ue le sea indicado. Esta prctica ser tenida en cuenta en la evaluacin de la asignatura con un @0G de la nota (inal. El 30G restante de la nota se obtendr con el trabajo continuo realiCado en el aula.
&
1. N?!;#" #(&)*#*)%+!" ,!%,$-.)*#" !+ &# @!0.

En este apartado nuestro objetivo es proporcionar una descripcin del marco general en el 3ue se encuadra la asignatura" la realiCacin de aplicaciones geogr(icas 9eb con OpenLayers. %rimero presentaremos los actuales planteamientos para el manejo de in(ormacin geogr(ica- los cuales estn centrados en los servicios 9eb $ !an supuesto un importante cambio en la comunidad /I0 ms tradicional. /e introducirn algunos conceptos relevantes como Neogeografa $ mashupas+ como el importante papel 3ue ocupan las librer+as de programacin como 0oogle<aps $ 1penLa$ers en estos (enmenos. A continuacin comentaremos la importancia de estas nuevas tendencias $ !erramientas como la programacin para los pro(esionales 3ue trabajan con in(ormacin geogr(ica- as+ como los nuevos retos a los 3ue estos se tienen 3ue en(rentar.
1.1. La revolucin de las tecnolo !as Neo eo raf!a
eoespaciales y la
En los Hltimos a;os se est produciendo una evolucin mu$ notable de los /I0 $ las tecnolog+as geoespaciales en general. Antes slo eran usadas por un reducido grupo de cient+(icos $ pro(esionales de la gestin del territoriopero a!ora su uso es muc!o ms generaliCado $ variado. 8asta !ace pocos a;os- los Sistemas de Informacin Geogrfica se identi(icaban netamente con un so(t9are concreto =como p.ej. Arc0I/ o 0BA//>- 3ue estaba instalado en un ordenador o una estacin de trabajo mu$ potente- probablemente en una administracin pHblica- una universidad o una gran (irma de ingenier+a. La inversin en recursos !ard9are- licencias- (ormacin del personal... era tan alta 3ue los Hnicos pro$ectos en los 3ue se pod+an dar el lujo de utiliCarlos eran a3uellos con un amplio presupuesto- como por ejemplo un inventario nacional de recursos (orestales- el Catastro o el dise;o $ mantenimiento de redes en las compa;+as el ctricas. Era inviable para un no pro(esional acceder a la in(ormacin $ a las !erramientas in(ormticas implicadas. /in embargo- !o$ en d+a es mu$ comHn 3ue cual3uiera tenga instalado en su %C GoogleEarth $ plani(i3ue con l un viaje de ocio- use un navegador 0%/ con cartogra(+a de detalle en su coc!e o 3ue por ejemplo un grupo de comerciantes publi3ue dnde estn sus negocios en la pgina 9eb de su asociacin. El tras(ondo de estos pro$ectos sigue siendo el mismo" el manejo de in(ormacin con componente espacial proporciona a su usuario un conocimiento mu$ poderoso para la toma de decisiones. %ero las *
!erramientas- el per(il de los usuarios- el !ard9are... todo lo dems !a cambiado- diversi(icndose de manera intensa. Esto es lo 3ue !a llevado a algunos eFpertos a reinterpretar el neologismo de Neogeografa. La Neogeografa- segHn su concepcin ms reciente- se puede de(inir como el conjunto de herramientas y tcnicas geogrficas empleadas para actividades personales o por un grupo de usuarios no expertos, para uso informal no analtico 1! Es evidente cmo en los Hltimos a;os se !a generaliCado el uso intensivo de in(ormacin geogr(ica a trav s de la tecnolog+a $ se !a IdemocratiCadoI su uso- dejando de ser una valiosa in(ormacin recluida en silos custodiados por eFpertos.
Ilustracin 1" Al(abeto realiCado con lugares reales en Google"aps
5uente" !ttp"##goo.gl#/L9EJ
Los tres (actores (undamentales evolucin#revolucin geogr(ica son"
3ue
!an
!ec!o
posible
esta
1. la nueva cartografa K se dio el gran paso con la aparicin de la cartogra(+a de Google en ,00*. Lna base cartogr(ica gratuita- de gil consulta- cobertura mundial $ crecientemente detallada. %rimero (ue Google"aps en las pginas 9eb $ luego se introdujo la dimensin 3: en los escritorios con GoogleEarth#, $ con ambas la compa;+a
1 =,00@> A. 7LB'EB" !ttp"##!ig!eart!orbit.com#neogeograp!$-to9ards-a-de(inition# , Google"aps (ue anunciado por primera veC el . de (ebrero del ,00* $ estuvo en su (ase beta 6 meses M...N. 5ue $a en junio del ,00* cuando 0oogle lanC su A%I M...N. Las (uentes de los mapas disponibles son principalmente sat lites $ aviones
estadounidense !a revolucionado el panorama mundial de lo geogr(ico. :e manera paralela $ complementaria- se !a ido abriendo paso la tendencia de los organismos pHblicos a ir liberando parte de sus datos geogr(icos a trav s de servicios 10C =)</- )5/...>. ,. la expansi$n de los G%& - el abaratamiento de los c!ips de 0%/ !a permitido 3ue las capacidades de posicionamiento est n integradas en aparatos accesibles para los no pro(esionalesO 0%/ simples- G%&' loggers- tel (onos mviles- navegadores- cmaras (otogr(icas... todos estos dispositivos !an agiliCado enormemente la captura de in(ormacin georre(erenciada =posicin de personas $ ve!+culostraCado de rutas...>.
Ilustracin ," <apamundi con logos de servicios sociales
5uente" !ttp"##999.appappeal.com#9eb-,-0-application-9orld-mosaic#
3. el avance de (nternet y la )e* #!+ , actualmente !a$ un ma$or acceso a las redes de in(ormacin" las personas tienen cada veC coneFiones ms rpidas- en ms lugares $ tienen !erramientas ms sencillas $ potentes para eFplotarlas. %or otro lado- (rente a la primera etapa de Internet- caracteriCada por pginas con contenidos estticos- poco interactivas $ publicadas por eFpertos en in(ormtica !o$ se impone lo 3ue se !a dado en llamar la )e* #!+- un Internet
aun3ue tambi n se vale de mapas digitaliCados de compa;+as como 7eleAtlas $ Eart!/at. Google asegura 3ue su in(ormacin no tiene ms de tres a;os. P .n poco de historia y curiosidades de Google "aps/Earth =en !ttp"##999.tu(uncion.com#google-maps-eart!>.
caracteriCado por la (acilidad para publicar contenidos =(otos- v+deoscomentarios sobre lugares- documentos...> $ los sitios#servicios de generacin colectiva de in(ormacin. Es la 9eb de los blogs- 9iQis- los (ormatos de sindicacin de contenidos =B//- A71<>- de pro$ectos tan conocidos como )iQipedia- Routube $ las todopoderosas redes sociales como 5acebooQ- 7uenti o 79itter. %recisamente la creciente meCcla de lo social y lo geogrfico est produciendo avances mu$ interesantes como la (aceta espacial de 79itter- 5our/3uares5acebooQ %laces...
1.". Los #as$ups% un nuevo estilo de co#binar infor#acin

La cristaliCacin de las nuevas tendencias en in(ormacin geogr(ica se produce en lo 3ue se !a dado en denominar mashups. Ln mashup =literalmente pur o me0cla de elementos > es una pgina 9eb !+brida- en la 3ue se meCclan dos o ms componentes de origen eFterno cu$a integracin aporta valor a;adido. %or ejemplo un mashup ser+a una pgina 9eb 3ue muestra sobre un mapa las previsiones meteorolgicas de una comunidad autnoma- tomando los servicios de Google"aps $ los datos del tiempo de un servicio del <inisterio de <edio Ambiente.
Ilustracin 3" El primer mas!up
5uente" !ttp"##999.!ousingmaps.com#
El primer mashup publicado (ue la 9eb 1ousing maps- elaborada por %aul Bademac!er en el ,00*- en el 3ue se muestra sobre los mapas de 0oogle los pisos en al3uiler o venta 3ue aparecen en otra pgina 9eb llamada 2raiglist! :esde entonces !asta a!ora se !an programado miles de mas!ups- de toda temtica $ estilo- $ aun3ue no todos poseen un mapa como elemento integrador la gran ma$or+a s+ son Igeomas!upsI 3. Los elementos 3ue !acen posible un mashup son" =1> los servicios proporcionados por terceros . Entran en esta categor+a los servicios 9eb de empresas $ organismos pHblicos 3ue son accesibles pHblicamente mediante A%Is& $ 3ue o(recen recursos B//- ?/1' o S<L*... pero tambi n m todos menos IortodoFosI de captura de in(ormacin desde pginas 9eb- como p.ej. el screen scraping! Algunos de los servicios ms comunes son" el A%I de mapas de 0oogle<aps. el A%I de (otos de 5licQr. el A%I de v+deos de Routube. el A%I de microblogging de 79itter. el A%I de venta de productos AmaCon. el A%I social de 5acebooQ. el A%I de la enciclopedia )iQipedia Ln sitio 9eb interesante para descubrir servicios utiliCados en diversos mas!ups es 3he %rogramma*le )e*" !ttp"##999.programmable9eb.com# %ara el manejo de in(ormacin geogr(ica tenemos tambi n muc!os A%Is espec+(icos como Ting<aps- Ra!oo<aps- 0eonames o
3 Lna buena direccin para observar numerosos mas!ups con mapas es Google"aps "ana- !ttp"##googlemapsmania.blogspot.com# & A%I =4pplication %rogramming (nterface5 o Inter(aC de programacin de aplicaciones. Este t rmino !ace re(erencia al conjunto de (unciones proporcionado por un so(t9are 3ue tiene disponibles el programador cuando trabaja con l para construir una aplicacin. 0eneralmente junto al listado estricto de los m todos el A%I inclu$e recursos complementarios como (ic!eros de a$uda- ejemplos... * 8a$ muc!os (ormatos para obtener los datos desde estos servicios- como veremos en los ejercicios de la asignatura. Algunos usuales son B//UBeall$ /imple /$ndication- ?/1'U?ava/cript 1bject 'otation o S<LUeStensible <arQup. Language.
Cloud<ade.... de !ec!o- la importancia creciente del (actor espacial !a llevado a 3ue se eFtienda el t rmino Geoweb. =,> la programaci$n de la pgina 6e*! El creador toma los servicios previos $ los consulta- manipula- compara o combina para generar nuevos datos desde su 9eb- vali ndose de la programacin- plantillas u otras !erramientas. Lo ms !abitual es el uso de tecnolog+as 9eb estndar como 87<L $ en gran medida ?avascript. La manera de consumir los servicios suele ser relativamente sencilla $ estar bien documentada en las pginas 9eb de los productores $ por ello un gran nHmero de personas- muc!os sin ser pro(esionales in(ormticos pero s+ innovadores e in3uietos- se !an volcado en el desarrollo de mashups. =3> la e7ecuci$n de la pgina en el navegador! Lna veC publicada la 9ebel usuario se conecta a Internet $- a trav s de so(t9are como 5ire(oFC!rome o Internet EFplorer- se ponen en valor las (unciones programadas por el creador. 0eneralmente los mashups se centran especialmente en el usuario Ide a pieI- con inter(aces sencillos $ visualmente atractivos.
1.&. Cruce de ca#inos' la Neo eo raf!a y los ()*

En la actualidad !a$ un debate vivo acerca de cmo los cambios representados por la 'eogeogra(+a a(ectan a la comunidad /I0 ms tradicional. EFisten posiciones diversas al respecto- desde proclamas provocadoras 3ue reCan cmo la P Neogeografa ha matado a los &(G 8- !asta grupos de pro(esionales /I0 3ue viven al margen de las nuevas tendencias.
Ilustracin &" /I0 tradicional (rente a 'eogeogra(+a
SIG tradicional Geografa 'tradicional' / acadmica Programa complejo de escritorio Experto en anlisis del territorio Ga"inete / departamento Soft(are propietario / S)P
Neogeografa Decisiones espaciales / ocio Mashup Ci dadano com!n #e" $%& / 'ed social Ser*icios (e" grat itos / +,-
6 Eer la interesante presentacin de A. 7LB'EB en !ttp"##999.slides!are.net#ajturner#!o9-neogeograp!$-Qilled-gis
/lides!are"
10
Lo 3ue s+ es evidente es 3ue los nuevos en(o3ues de manejo de in(ormacin geogr(ica estn triun(ando por3ue estn centrados en el usuario- por encima del n(asis en las !erramientas $ se podr+a decir 3ue los /I0 !an sido empujados (uera de su ICona cmodaI $ deben adaptarse a esa realidad si 3uieren evolucionar. :esde una perspectiva integradora- ms 3ue una divisin arti(icial entre los dos en(o3ues eFisten in(luencias mutuas" los usuarios no pro(esionales evolucionan poco a poco !acia anlisis espaciales ms complejos $ los responsables de /I0 comparten cada veC ms sus datos mediante serviciosincorporan en sus (lujos nuevos (ormatos como el V<L o se bene(ician de los mapas de 0oogle como base para mostrar los su$os. Esto nos deja con un panorama 3ue !a sido denominado por algunos SIG !"- una re(ormulacin dentro de la comunidad /I0 impregnada de los principios de la 'eogeogra(+a@. En este conteFto- un pro(esional puede verse involucrado en pro$ectos 3ue manejan in(ormacin geogr(ica de manera mu$ diversa- dentro un amplio espectro de las tecnologas de la informaci$n geogrfica! :e acuerdo a su per(il- los nuevos retos a los 3ue se en(renta variarn" #! $dministrador SIG! %resente slo en organiCaciones con un nHmero medio o grande de empleados- con un /I0 departamental o corporativo. Como responsable del sistema !o$ en d+a !abr de preocuparse por cuestiones como" 23u sistema de licencias de so(t9are es ms ventajoso para mi organiCacin4 2proporcionamos acceso a nuestros datos solo a nuestros usuarios internos o lo !acemos de manera abierta $ v+a Internet al pHblico general4 2cmo lo realiCamos de manera segura $ controlada4 2montamos toda la in(raestructura !ard9are bajo nuestros servidores o contratamos servicios Ien la nubeI4 2desarrollamos nuestros servicios de mapa base o usamos 0oogle<aps4 2debemos implementar algHn estndar o(icial -)</- )5/...- u o(icioso -compatible con 0oogle<aps-4 2cmo conseguimos el mejor rendimiento $ maFimiCar el valor de nuestra in(ormacin geogr(ica4
@ %ara pro(undiCar ms detalles sobre el concepto /I0 ,.0 ver la presentacin !ttp"##999.slides!are.net#jscampbell1#gis-,0-and-neogeograp!$
11
! %esarrollador SIG. Con un per(il t cnico- !a de ser capaC de desarrollar sistemas 3ue cumplan los re3uisitos (uncionales $ no (uncionales establecidos por el Administrador /I0 o el gerente de su rea. En su d+a a d+a se pregunta sobre aspectos como" 2cmo utiliCar el A%I de 0oogle para utiliCar su geocoding gratuito dentro de mi aplicacin4 2cmo programo un procedimiento para eFportar los datos de mi base de datos a (ormato V<L $ pintarlos al vuelo sobre Open&treet"aps4 23u librer+as o !erramientas me permiten trabajar de manera ms e(iciente en mi pro$ecto de so(t9are4 2con 3u sistema de coordenadas genero la cac! de mi mapa para 3ue se pueda solapar sobre Ting<aps4 2cmo genero un portal 9eb de contenidos para mi empresa con un apartado de mapa donde pueda editar ciertas capas vinculadas a un )5/4
&! 'suario SIG. Es el blo3ue ms diverso- pudiendo incluir desde usuarios intensivos de in(ormacin geogr(ica- trabajando dentro de una organiCacin con un /I0 corporativo- a usuarios ms ocasionalesdel tipo de un pro(esional freelance de la consultor+a ambiental. :e acuerdo a su entorno pro(esional podr delegar el desarrollo de aplicaciones /I0 a otros per(iles ms especialiCados =desarrolladores /I0> o bien iniciar l mismo pro$ectos de publicacin 9eb del tipo de un mas!up- (ormndose en las !erramientas $ A%Is necesarios. 23u pro$ectos con in(ormacin urban+stica sobre un mapa municipal encuentro en la 9eb $ cmo puedo !acer algo similar4 2con 3u so(t9are de escritorio convierto mis (ic!eros .s!p para publicarlos luego en Internet4 23u servicios de mapas publica el <inisterio de <edio Ambiente $ cmo los incorporo dentro de 0oogle Eart!4 2cmo muestro sobre un mapa en la 9eb mis puntos de inter s- con in(ormacin multimedia georre(erenciada como v+deos $ (otos4
1.4. Nuevos usuarios% nuevos pro ra#adores y +penLayers

Actualmente las !erramientas para el manejo de in(ormacin geogr(ica son mu$ variadas" so(t9are /I0 de escritorio- para mvil- pginas 9eb con 1,
servicios... En este conteFto $ ante unas necesidades de in(ormacin espacial concretas nuestro primer paso debe ser buscar la solucin in(ormtica ms e(iciente. /i esta solucin de so(t9are $a !a sido desarrollada- sea de pago o gratuita- generalmente adoptarla $ ser su usuario ser la mejor opcin. /i nuestras necesidades no estn cubiertas por el so(t9are eFistente- o el 3ue !emos encontrado no nos satis(ace plenamente- entonces es el momento de considerar el desarrollo de so(t9are $ utiliCar la programacinpara lograr una solucin a medida. Los programadores re3uieren de una serie de conocimientos t cnicos $ especialmente de muc!a prctica. R para mejorar en esta labor es importante la documentacin- los ejemplos- las !erramientas $ especialmente el trabajo previo de otros programadores en (orma de componentes so(t9are especialiCados- como la librer+a 1penLa$ers.
1.4.1. E& (!$.)& '!& ($%,$#>#'%$ '! SIG

%ara pro$ectos /I0 corporativos- a partir de cierto tama;o $ complejidad- es recomendable contar con e3uipos multidisciplinares e imprescindible una buena gestin. :ise;adores- programadores- eFpertos temticos- gerentes(uturos usuarios... todos ellos deben colaborar $ alinear sus intereses $ capacidades t cnicas para 3ue el pro$ecto salga adelante. Ln buen resultado solo ser posible siguiendo una metodolog+a adecuada de desarrollo in(ormtico.- para 3ue as+ el trabajo se ajuste al presupuesto $ los plaCos establecidos. /in embargo para pro$ectos menos complejos seguramente nuestro presupuesto no nos permite tal cantidad $ especialiCacin del personal $- en lugar de tener un departamento /I0 con varios pro(esionales- nos encontramos slo con un usuario avanCado. Este usuario- con una (ormacin bsica en programacin $ los recursos disponibles en Internet =documentacin- (oros- ejemplos- lista de correo...>- puede realiCar pro$ectos /I0 para la 9eb mu$ interesantes de manera autnoma. Evidentemente con una (ormacin t cnica ms pro(unda el usuario puede si lo desea realiCar otras labores propias de un administrador o programador /I0 $ participar en pro$ectos de ma$or envergadura. El per(il de un pro(esional usuario avanCado # programador /I0 suele incluir capacidades en las siguientes reas" a> /o(t9are /I0 de escritorio.- el so(t9are /I0 clsico- del tipo de Arc0I/- gv/I0- <apIn(o o 0eomedia. El usuario avanCado lo utiliCar no slo por sus capacidades de anlisis ms potentes sino tambi n
. Aun3ue eFiste numerosa literatura sobre metodolog+as de desarrollo- nos permitimos aconsejar siempre 3ue sea posible la utiliCacin de las llamadas Imetodolog+as gilesI- como p.ej. /crum" !ttp"##es.9iQipedia.org#9iQi#/crum
13
como !erramienta para administrar sus datos- consumir servicios disponibles en servidores propios o eFternos $ automatiCar (lujos de procesamiento de datos =p.ej. con el <odelTuilder de Esri>. b> /o(t9are /I0 para servidor.- El usuario- especialmente si desarrolla labores de administracin dentro de su organiCacinnecesitar conocimientos de tecnolog+as para" El almacenamiento de datos espaciales =%ost0I/- Arc/:E1racle /patial...>. La publicacin de mapas- (enmenos o coberturas =)</- )5/)C/...> como p.ej. <ap/erver- 0eoserver o Arc0I/ /erver. La catalogacin $ bHs3ueda de in(ormacin =metadatos con Cat<:Edit- 0eonet9orQ...>.
c> /istemas de captura # georre(erenciacin de in(ormacin .- El manejo de aparatos 0%/- !erramientas de geocoding online- el geotagging de documentos- (otos- videos !!! !acen posible al usuario capturar sus datos $ producir in(ormacin espacial utiliCable. d> A%Is de mapa $ otros servicios 9eb .- /i desarrolla pro$ectos para la 9eb !abr de conocer servicios de mapa tales como 0oogle<aps- Ting<aps- 1pen/treet<ap... Conocer otros servicios complementarios =%anoramio- 79itter- etc.> le permitir a;adir nuevas (unciones a sus pro$ectos mediante integracin con redes sociales o por ejemplo elementos multimedia. e> Librer+as /I0 $ !erramientas de programacin .- Las librer+as de so(t9are /I0 como 1penLa$ers son componentes reutiliCables 3ue nos permiten una programacin a ms alto nivel $ el acceso ms sencillo a las operaciones !abituales. Los editores $ otras !erramientas- como los entornos integrados de programacin =I:Es>(acilitan usar esas librer+as $ desarrollar con ma$or (acilidad nuestras aplicaciones.
1.4.2. AP%$ B?C ?"#$ O(!+L#2!$"D

La aparicin de Google"aps, $ sobre todo de la manera de utiliCarlo gratuitamente en otras pginas mediante programacin- !a revolucionado de(initivamente el panorama geoespacial. Los puntos ms destacados del pro$ecto de 0oogle<aps son" El buen dise;o $ documentacin de su A%I D.
de 0oogle<aps es
D El sitio o(icial de la (amilia de A%Is !ttp"##code.google.com#intl#es-E/#apis#maps#indeF.!tml
1&
La cobertura- detalle $ velocidad de sus mapas. La velocidad IgoogleI- soportada por una in(raestructura !ard9are inmensa- se !a convertido en la velocidad estndar re3uerida por cual3uier usuario. La amplitud de la comunidad generada a su alrededor =con abundantes ejemplos en pginas- (oros $ blogs>. /u creciente capacidad de integracin $ sinergia con otros servicios $ tecnolog+as =del propio 0oogle 10 o de terceros>.
Estos (actores lo !an convertido en la primera opcin de manejo de in(ormacin espacial para muc!os individuos $ organiCaciones en todo el mundo. Entonces 2por 3u utiliCar otra opcin como 1penLa$ers4
Ilustracin *" Eentajas de 1penLa$ers (rente a 0oogle<aps
.pen-a/ers
Google,aps
,a/or flexi"ilidad para mapa "ase0 Google,aps1 S3lo capas "ase propias 4callejero1 satlite1 2ing,aps1 .penStreet,ap1 #,S%%% 5"rido / relie*e6%77 Implementaci3n estndares .GC 4#,S1 #8S%%%6 ,ejor manejo de entidades *ectoriales / estilos% .penSo rce1 "ajo osGeo / con licencia 2SD7$ Sinergias otros soft(are li"re como Geoser*er% 9ecnologa propia de Google Grat ito pero no a"ierto1 con c3digo f ente no accesi"le% :
7eniendo en cuenta estos (actores- en cada pro$ecto !a de elegirse la mejor opcin- sopesando adems nuestros conocimientos- objetivos $ cultura organiCativa.
10 %roductos como 0oogle )eb Vit -0)7-- 0oogle Eart!- 5usion 7ables- 0oogle 7ransit... 11 El A%I de 0oogle<aps admite- por primera veC con la versin v3- la incorporacin de tipos de mapa personaliCados =2ustom "ap 3ypes>- con un or+gen distinto del propio googlecomo 1pen/treet<aps" !ttp"##blogidee.blogspot.com#,010#0D#acceso-openstreetmap-desde-google-maps.!tml 1, Licencia TerQele$ /o(t9are :istribution" !ttp"##es.9iQipedia.org#9iQi#LicenciaWT/:
1*
2. F?+'#>!+<%" '! ($%,$#>#*)9+ (#$# O(!+L#2!$"

En(ocndonos en un usuario con inter s en avanCar en el campo de la programacin /I0 para la 9eb- en este apartado incluimos algunos temas 3ue consideramos importante conocer antes de introducir la librer+a 1penLa$ers. El primero de los apartados consistir en un rpido vistaCo a los mecanismos t cnicos principales 3ue !an permitido el (enmeno imparable de Internet" los protocolos 32%/(% $ 133%. A continuacin se realiCar una presentacin de los lenguajes imprescindibles para trabajar con 1penLa$ers" 13"L, 2&& y 9avascriptrecogiendo de ellos un subconjunto bsico pero su(iciente para comenCar a programar con la librer+a $ algunas re(erencias complementarias para pro(undiCar en su manejo.
".1. Las bases t,cnicas de )nternet' -C./). y 0--.

La ma$or+a de los usuarios estn (amiliariCados con Internet $ lo utiliCan a diario para sus labores cotidianas" navegacin- correo- contactos en redes sociales... La base t cnica 3ue !ace posible estas (unciones normalmente es ItransparenteI- permaneciendo en un discreto segundo plano. /in embargodesde el punto de vista de un programador /I0 es Htil conocer cules son los mecanismos de ms bajo nivel involucrados en las aplicaciones 9eb. La base t cnica de Internet son un conjunto de protocolos de red 3ue permiten la comunicacin entre e3uipos in(ormticos- combinando sus capacidades de procesamiento para la resolucin de problemas.
Ilustracin 6" 'iveles del protocolo 7C%#I%
Estas normas se denominan !abitualmente pila de protocolos TCP/IP $ son un estndar slido $ bien documentado- compartido por toda la comunidad de (abricantes de so(t9are $ !ard9are. Estos protocolos tambi n 16
se utiliCan para !acer (uncionar aplicaciones en redes de sistemas localesdenominadas intranets! En la pila eFisten varios protocolos- cada uno con una responsabilidad espec+(ica- pero todos ellos trabajando de manera conjunta $ coordinada para permitir 3ue las aplicaciones puedan comunicarse sobre la red. El nivel ms alto es el ms abstracto $ prFimo al usuario- mientras 3ue el nivel ms bajo es el 3ue resuelve la transmisin del (lujo de b$tes a trav s de los componentes (+sicos de la red. %ara la transmisin de cada blo3ue de in(ormacin un protocolo envuelve los datos en un pa3uete o trama $ lo transmite al protocolo inmediatamente in(eriorO cada uno a;ade una porcin de in(ormacin mediante una cabecera $ ello permite resolver todas las responsabilidades necesarias =direccionamiento- reenv+o de in(ormacin p rdida...>. Los protocolos de la pila ms importantes son los dos 3ue le dan nombre" 7C% e I%. El protocolo 7C% =3ransmission 2ontrol %rotocol> permite 3ue los pa3uetes de in(ormacin lleguen con (iabilidad a su destino $ la in(ormacin viaje entre e3uipos distantes $ diversos. Asociado al 7C% aparece el concepto de puerto- una valor num rico del 0 al 6**3& 3ue identi(ica un punto de coneFin por red de una aplicacin cliente con una aplicacin servidora13. %or su parte- el protocolo I% =(nternet %rotocol> se utiliCa para identi(icar los e3uipos $ reconocer redes- routers $ ordenadores concretos. Lna direccin I% =en la versin ms eFtendida actualmente v&>- se compone de 3, bits del tipo @&.1,*.,30..0 =3ue se corresponde con 999.google.es1&>. Cada %C tendr una direccin I% por cada tarjeta de red con(igurada. %or su parte el protocolo HTTP, cu$as siglas responden a 8$per 7eFt 7rans(er %rotocol o %rotocolo de 3ransferencia de 1ipertexto, constitu$e el medio bsico para navegar por pginas 9eb. /obre las redes 7C%#I% $- en general- sobre Internet- pueden ejecutarse muc!os tipos de aplicaciones pero las 3ue corren bajo 877% son sin duda las ms abundantes. 877% est orientado a recursos. Ln recurso- identi(icado mediante una direccin LBL =lo 3ue comHnmente conocemos como un IenlaceI>- es un elemento variado como p.ej. un (ic!ero de 87<L- una imagen- un (ic!ero de audio o una consulta a un programa.
13 EFisten 3 rangos de puertos" los primeros 10,& son puertos reservados para el uso del sistema operativo $ las aplicaciones ms eFtendidas =p.ej. 877%" .0- 57%" ,1- %1%3" 110...>. El rango siguiente- del 10,& al &D1*1 son los puertos registrados $ los podemos usar en una aplicacin servidor propia. :e &D1*, al 6**3* son puertos dinmicos y/o privados . Estos puertos pueden ser usados por 7C% o por L:% =otro protocolo de transporte pero 3ue no garantiCa la entrega de los pa3uetes de in(ormacin>. 1& %ara conocer la direccin I% de un servidor podemos utiliCar la utilidad de l+nea de comandos ping direccion" p.ej. ping 666!google!es
1@
Lna LBL se eFpresa segHn el guin-tipo siguiente"

esquema://host.dominio:puerto/rutaRecurso
Por ejemplo !ttp"##openla$ers.org".0#blog# El cliente- generalmente a trav s de un navegador 9eb- se conecta al servidor $ le solicita#env+a un recurso. En cada servidor eFiste un so(t9are espec+(ico- el Iservidor 9ebI- ma$oritariamente Apac!e o <icroso(t Internet In(ormation /erver =II/>- 3ue recibe la peticin $ la atiende devolviendo#recibiendo el recurso $ presentando un cdigo de operacin correcta o error. Cada peticin es independiente de la anterior de cara al servidor =es un protocolo sin estado>- aun3ue !a$ mecanismos como las coo:ies 3ue permiten ligar varias peticiones dentro una misma IsesinI de trabajo. El ciclo de carga t+pico de una pgina 9eb con 877% es" 1. /e introduce una direccin !ttp"##999.google.es>. en el navegador 9eb =p.ej.
,. El nombre simblico debe ser traducido en una direccin I% para establecer la coneFin e(ectiva. Esto se consigue gracias al protocolo de resolucin de nombres =:'/>. 'uestro e3uipo consulta a ese servicio de manera transparente $ obtiene 3ue !ttp"##999.google.es e3uivale p.ej. a la direccin I% 6&.,&D.D,.10& 3. El navegador 9eb de nuestro e3uipo realiCa a continuacin una peticin 877% a la direccin I% resuelta. %ara ello establece una coneFin 7C% con el servidor remoto por el puerto .0. Xste servidor 9eb tiene un programa 3ue est constantemente a la espera de peticiones. &. El servidor 9eb recibe la peticin $ la atiende- devolviendo una respuesta a trav s de la coneFin 7C%. *. El cliente recibe el resultado $ ste se canaliCa !asta el programa navegador. Cuando el documento 87<L incorpora recursos mHltiples =p.ej. imgenes- (ic!eros de ?avascript- !ojas de estilo...>- se realiCan varias peticiones 877%- una por recurso $ su resultado se ensambla en el navegador- el cual interpreta el contenido $ lo dibuja # dota de comportamiento" posicionamiento de elementos- (uentes de teFto $ colores- animaciones- etc.
7odos los aspectos previos de este apartado nos permiten entender algunos puntos importantes a tener en cuenta al trabajar con 1penLa$ers" Los servidores 9eb procesan peticiones 877% $ los servidores de mapa se apo$an en ellos para !acer llegar al navegador recursos-
1.
generalmente imgenes =de tipo gi(- jpg- png- etc.>- con la in(ormacin geogr(ica de nuestro inter s. Cuando en 1penLa$ers usemos p.ej. una capa de Google"aps, nuestro navegador pide al servidor teselas en (ormato de imagen de ,*6 F ,*6 p+Feles- con peticiones 877% de recursos como" !ttp"##mt0.google.com#vt#l$rsU!Y1&0Z!lUesZsrcUapiZFU1000Z$U@ &DZCU11ZsU0alil
Ilustracin @" 7esela de mapa de 0oogle<aps en (ormato png
En otras ocasiones el recurso solicitado es vectorial- como cuando solicitamos conectarnos a un servidor )5/ $ lo 3ue viaja desde el servidor es in(ormacin en un (ormato de teFto como 0<L =S<L>. %ara poder acceder a ciertos servicios de in(ormacin geogr(ica desde nuestras pginas !abremos de conocer la direcci$n (% del servidor o su nombre registrado $ la .;L del recurso 3ue eFpone. %.ej. para consumir un servicio )</ del %'1AA en nuestro visor debemos conocer previamente su LBL" !ttp"##999.idee.es#9ms#%'1A#%'1A %ara compartir el trabajo realiCado- $a sea un geomas!up o una pgina 9eb estndar- !abremos de contar con un servidor 9eb para trabajar con 877% $ unos clientes con navegador 9eb- todos ellos con sus propiedades de red bien con(iguradas =direccin I%- puerta de enlace $ servidor :'/>. /i al trabajar con 1penLa$ers !ubiera problemas de conectividad entre nuestra 9eb $ los servicios de los 3ue depende =p.ej. un servicio )5/ eFterno del 3ue no obtenemos respuesta>- es recomendable monitoriCar el tr(ico de red. /i nos centramos en 877%- son mu$
1D
Htiles <iddler $ la eFtensin para 5ire(oF llamada 5irebug. %ara labores ms complejas $ todo tipo de protocolos- tenemos un analiCador de protocolos o =sniffer= como Et!ereal-)ire/!arQ.
".". Los len ua1es para la 2eb

Los prFimos apartados son una breve introduccin a los lenguajes ms importantes para el desarrollo 9eb con 1penLa$ers" 87<L- C// $ ?avascript. Al (inal de cada apartado se inclu$en re(erencias para pro(undiCar en el aprendiCaje.
2.2.1. D)"!E#+'% &# !"<$?*<?$# '! ?+# (-,)+# *%+ FTML

87<L =8$per7eFt <arQup Language> es el lenguaje utiliCado para construir pginas 9eb. /us comandos se inclu$en en documentos 3ue nuestros e3uipos descargan del servidor $ son interpretados por el navegador =<oCilla 5ire(oF- 0oogle C!rome- 1pera- Internet EFplorer...>. 87<L es un lenguaje de marcado" sus comandos son marcas o Ieti3uetasI 3ue describen un elemento- escrito en teFto comHn. La sintaFis es <etiqueta>elemento</etiqueta> $ las eti3uetas pueden ir anidndose. Cada blo3ue eti3uetado puede llevar un identi(icador Hnico en el documento- su id" <etiqueta id=codigo01>elemento</etiqueta> La estructura general de un documento 87<L es"
<html> <head> 
<title>T"tulo de la p#gina</title> <script></script> <lin$/> </head> <%od&>  </%od&> </html>
Los (ic!eros son de teFto plano =tradicionalmente con la eFtensin !html> $ por ello pueden ser eFaminados o editados con un simple editor de teFto como el bloc de notas. A continuacin incluiremos las eti3uetas ms !abituales e importantes para nosotros 3ue pueden aparecer dentro de un documento 87<L. ,0
(ti)uetas generales *+,-L. *+($%. */0%1.
(ti)uetas de la ca2ecera 3+($%4 *,I,L(. 7+tulo de la pgina

<T(T)*>+i primera p#gina con ,pen)a&ers</T(T)*>
*-(,$. %ara almacenar metadatos del documento. Aui n lo cre- cundopalabras clave... Ejemplo"
<+*T- name=.e&/ords content=0(1, openla&ers, !isor>
*SC5I6,. %ara recoger cdigo de cliente en ?avascript- bien incluido en el propio documento o bien en un (ic!ero .js eFterno. Eeremos la sintaFis bsica del lenguaje ?avascript ms adelante. Ejemplos" Con cdigo en l+nea"
<0'2(3T t&pe=te4t/5a!ascript> alert678ola mundo79: </0'2(3T>
Be(erenciando un (ic!ero eFterno de javascript"

<0'2(3T src=http;/////.openla&ers.org/api/,pen)a&ers.5s t&pe=te4t/5a!ascript></0'2(3T>
*S,1L(. $ *LIN7. %ara incluir cdigo C// con estilos- bien en l+nea o bien apuntando a un (ic!ero .css eFterno. Ejemplos" En l+nea"
<0T<)* t&pe=te4t/css> %od&= >ont-color; 2ed: >ont-si?e; 1@p4: A </0T<)*>
5ic!ero eFterno"
<lin$ rel=Bst&lesheetB hre>=Bestilo.cssB t&pe=Bte4t/cssB />
,1
(ti)uetas del cuerpo 3/0%14 *%IV. Eti3ueta de blo3ue o divisor- para organiCar secciones. Ejemplo"
<C(D id=mapa>-qu" la seccin de mapa de ,pen)a&ers<C(D/>
*6. Eti3ueta de prra(o. Ejemplo"

<3>'ontenido de un p#rra>o; ),2*+ (30E+...<3/>
*/58. /alto de l+nea. *+58. L+nea !oriContal separadora. *+#. !asta *+9. Cabeceras o rtulos jerar3uiCados. *$. Eti3ueta para !iperenlaces.
<- hre>=http;/////.openla&ers.org>*nlace a la /e% ,)<-/>
*I-G. Imgenes accesibles desde la pgina.

<(+1 src=Bhttp;/////.google.es/logos/logo.gi>B/>
*,$/L(. 7abla estndar- con eti3uetas de tipo (ila =tr>- cabecera =t!> $ datos =td>
<T-F)* %order=1p4 %lac$ solid> <T2><T8>'olumna -</T8><T8>'olumna F</T8></T2> <T2><TC>Gila 1-'ol.-</TC><TC>Gila 1-'ol.F</TC></T2> <T2><TC>Gila H-'ol.-</TC><TC>Gila H-'ol.F</TC></T2> </T-F)*>
*LI.- *0L. : *'L. 1L para listas ordenadas =con numeracin> $ no ordenadas =con vi;etas>.
<,)> <)(> *lemento primero 6con numeracin9</)(> <)(> *lemento segundo </)(> </,)> <E)> <)(> *lemento primero 6con !iIetas9 </)(> <)(> *lemento segundo </)(> </E)>
*;05-. : eti)uetas de controles de entrada. %ara crear un (ormulario $ recoger in(ormacin del usuario. Los controles ms !abituales son las
,,
cajas de teFto =teFtboFes>- casillas de veri(icacin =c!ecQboFes>radiobotones =radio buttons> o las listas desplegables =select>. Ejemplo"
<G,2+ action=Bhttp;//unsitio.com/registroB method=BpostB> <)-F*) >or=Bnom%reB>Jom%re;</)-F*)> <(J3ET t&pe=Bte4tB id=Bnom%reB><F2/> <)-F*) >or=BapellidoB>-pellidos;</)-F*)> <(J3ET t&pe=Bte4tB id=BapellidoB><F2/> <(J3ET t&pe=BradioB name=Bse4oB !alue=BDarnB>Darn<F2/> <(J3ET t&pe=BradioB name=Bse4oB !alue=B+u5erB>+u5er<F2/> <(J3ET t&pe=Bchec$%o4B name=Breser!aB !alue=B2eser!aB> <0*)*'T name=Btipo-a%onoB> <,3T(,J>0emanal</,3T(,J> <,3T(,J>+ensual</,3T(,J> <,3T(,J>-nual</,3T(,J> </0*)*'T> <(J3ET t&pe=Bsu%mitB !alue=B*n!iarB> <(J3ET t&pe=BresetB> </G,2+>
Aun3ue con ciertas restricciones- los controles input pueden utiliCarse (uera de un (ormulario. Alternativamente al input de tipo botn se puede utiliCar tambi n la eti3ueta <%utton t&pe=B%uttonB>'lic aqu"</%utton> %ara insertar un comentario in(ormativo- 3ue no ser procesado por el navegador se utiliCan las eti3uetas"  A pesar de 3ue 87<L inclu$e otras eti3uetas para re(lejar la apariencia =p.ej. [T\ para mostrar teFto negrita>- es un lenguaje 3ue debe utiliCarse para recoger el contenido $ la estructura de la 9eb- pero no su apariencia. %ara disposicin de los elementos- colores- bordes- (uentes- es pre(erible usar el lenguaje C//.
%ara re(lejar el uso de una versin concreta de 87<L es recomendable incluir en su inicio la declaracin del :1C7R%E. %ara el caso de 87<L & estricto- utiliCar la siguiente l+nea antes del primer tag [!tml\"
<!C,'T<3* 8T+) 3EF)(' B-//KL'//CTC 8T+) @.01//*JB Bhttp;/////./L.org/T2/html@/strict.dtdB>
,3
Referencias complementarias EFisten ms eti3uetas de 87<L- cada una con sus propiedades espec+(icas. Actualmente- la ma$or+a de las pginas 9eb estn escritas con(orme al estndar 87<L &.01- si bien est bastante avanCada la especi(icacin 87<L*. El listado completo de las eti3uetas $ sus propiedades para ambas versiones se puede consultar en !ttp"##999.93sc!ools.com#tags# En esa misma pgina eFiste una seccin interactiva mu$ prctica para estudiar cada tipo de eti3ueta =3ry it yourself>- p.ej. en el apartado de tablas" !ttp"##999.93sc!ools.com#tags#tr$it.asp4(ilenameUtr$!tmlWtableWtest
2.2.2. D#+'% !"<)&% *%+ G%H#" !+ *#"*#'# (CSS)

C// =2ascading &tyle &heets> establece de una manera estructurada las pautas visuales con las 3ue se muestran los contenidos dentro de un documento 87<L" posiciones de blo3ues- tama;os- colores- mrgenes- etc.. /e basa en la creacin de reglas- 3ue vinculan unas declaraciones de estilo con una eti3ueta#s mediante un selector. Lna declaracin consta de una propiedad $ un valor compatible asignado. %.ej. para conseguir un tama;o de ,,pF $ color rojo para un encabeCado de nivel 1 utiliCar+amos la regla"
h1 = color; 2ed: >ont-si?e; HHp4: A
donde !1 es el selector $ !a$ dos declaraciones de estilo. Las reglas pueden aparecer de varias maneras" 1. :irectamente aplicadas sobre una eti3ueta en el 87<L- mediante la propiedad st$le. 'o necesita selector ni llaves. %.ej."
<p st&le=te4t-align; right: >ont-si?e;10p4> 3#rra>o alineado a la derecha </p>
2. En una seccin de estilos del documento 87<L dentro de la cabeceracon el tag [st$le\. En este caso- el estilo puede aplicarse sobre varias eti3uetas de 1 pgina.
<html> <head> <st&le t&pe=te4t/css> /M *sto es un comentario en '00 M/ di! = padding-le>t; Np4 A p = >ont-si?e; 10p4 A
,&
</st&le> </head> <%od&> <di!><h1>'a%ecera</h1></di!> <p id=parra>o01>)orem ipsum</p> <p id=parra>o0H>)orem ipsum</p> </%od&> </html>
3. En un (ic!ero separado- con eFtensin css. As+ el estilo se puede aplicar a varias eti3uetas de varias pginas. El contenido del (ic!ero estilo.css ser+a una sucesin de reglas- como"
di! = padding-le>t; Np4 A p = >ont-si?e; 10p4 A
$ su uso desde una pgina 9eb"

<html> <head> <lin$ rel=Bst&lesheetB t&pe=Bte4t/cssB hre>=Bestilo.cssB> </head> <%od&></%od&> </html>
Los selectores C// son mu$ variados. Los 3 ms importantes son" &elector de elemento 13"L. Los ejemplos 3ue !emos visto previamente corresponden a esa categor+a. El estilo se aplica a todas las eti3uetas !tml de ese tipo bajo el mbito de in(luencia de la regla.
a = >ont->amil&; -rial, Derdana: A
&elector por identificador! /e usa el atributo id de una eti3ueta para seleccionarla- utiliCando como pre(ijo la almo!adilla. %.ej."
<p id=parra>o01></p>
se le puede aplicar un estilo mediante una regla como"

Oparra>o01 = %ac$ground-color; %lac$ A
,*
&elector por clase! A di(erencia del id- una clase puede ser compartida por varias eti3uetas !tml. R una eti3ueta puede tener varias clases asociadas. El selector por clase va precedido por punto. %.ej."
<p class=cita)i%ro></p>
se le puede aplicar un estilo mediante una regla como"

.cita)i%ro = >ont-st≤ italic A
/i nos re(erimos a aspectos del dise;o como el tama;o de blo3ues- los mrgenes- bordes- relleno... es importante conocer las propiedades de lo 3ue se denomina el Pmodelo de cajas de C//]"
Ilustracin ." <odelo de cajas C//
5uente" 7utorial de C// de 87<L.'E7- disponible en !ttp"##es.!tml.net#tutorials#css#lessonD.p!p
/iguiendo este modelo- cual3uier elemento de una pgina 9eb =un div- un p- un span...> est dentro de una Pcaja rectangular]. Ajustando las propiedades de esa caja- mostradas en la (igura previa- se le puede dar" unas dimensiones mediante la eFpresin de un anc!o $ alto prede(inidos- con las propiedades 6idth y height<di! st&le=/idth; H00p4: height; H00p4></di!>
un borde visible- mediante la propiedad *order<di! st&le=%order; 1p4 red solid></di!>
,6
un margen eFterior transparente- ms all del borde- mediante la propiedad margin<di! st&le=margin-top; H0p4: margin-le>t; L0p4></di!>
un margen interior transparente- entre el borde $ el contenidomediante la propiedad padding<di! st&le=padding; @0p4></di!>
Las cajas $ otras propiedades de estilo controlan otras propiedades ms avanCadas de C//- tales como el posicionamiento relativo de elementos o las capas (lotantes =position- (loat>.
Referencias complementarias %ara un listado ms eF!austivo de selectores- puede visitarse p.ej." !ttp"##999.anieto,Q.com#,006#0D#06#selectores-css-3ue-deberiasconocer Earios ejemplos de estilos C// comunes pueden encontrarse en" !ttp"##999.93sc!ools.com#css#cssWeFamples.asp %ara aspectos ms avanCados de C// como el posicionamiento" !ttp"##999.93sc!ools.com#css#cssWpositioning.asp Lna serie de documentos mu$ completa $ en espa;ol con todos los aspectos detallados sobre C// puede descargarse en" !ttp"##999.libros9eb.es#css#indeF.!tml
2.2.3. F?+*)%+!" 2 !;!+<%" *%+ I#;#"*$)(<

87<L ^ C// nos proporcionan unas capacidades importantes para recoger contenidos $ representarlos de acuerdo al estilo 3ue consideremos ms adecuado. %ero por s+ slos estos dos lenguajes slo pueden presentar contenidos estticos. %ara dotarlos de interactividad $ ma$or ri3ueCa es necesario utiliCar lenguajes de programacin 3ue nos permitan cambiar dinmicamente los contenidos $ los estilos. Este papel es cubierto en gran parte por ?avascript. ?avascript es un lenguaje de scripting 3ue se ejecuta dentro del propio navegador 6e* =por eso se denomina lengua<e en cliente> $ lo !ace de manera interpretada- es decir sin tener 3ue ser compilado. 7ras un periodo inicial en el 3ue solo se usaba para lograr e(ectos visuales vistosos- !o$ en d+a constitu$e una pieCa angular de la )eb ,.0. :e !ec!o est detrs de la
,@
ma$or+a de mashups $ especialmente de las librer+as de mapa 1*. 1penLa$ers es una librer+a !ec!a en ?avascript $ debe utiliCarse con este lenguaje. Cuanto mejor se conoCca ?avascript =?/>- mejores pro$ectos se podrn !acer con esta librer+a. Al igual 3ue con C//- el cdigo escrito en ?/ puede ubicarse en varios lugares" 1. En una eti3ueta en el 87<L. En este caso- el cdigo se comporta como un mane7ador de eventos $ la sintaFis tipo es"
<etiqueta e!ento=codigoP a!ascript></etiqueta>
Cada eti3ueta tiene sus eventos permitidos- !abitualmente acciones desencadenadas por el usuario =como !acer clic- pasar el ratn por encima o elegir un teFto>. %.ej. para vincular una accin al clic de un botn realiCar+amos"
<%utton on'lic$=alert67hola+undo79:></etiqueta>
:e esta manera se dota de interactividad al 87<L. Cuando 3ueramos lograrlo- !abremos de conocer los eventos a los 3ue responde el control $ asignar una (uncin de ?avascript.
2. :entro de una eti3ueta de [script\- pre(eriblemente en la cabecera del documento 87<L $ organiCado en (unciones. %.ej"
<html> <head> <script t&pe=te4t/5a!ascript> alert67'argando...79: // *sto es un comentario en >unction 0aludo69= !ar n = document.get*lementF&(d67name79.!alue: alert678ola 7 Q n9: A </script> </head> 1* En este rol tiene muc!o 3ue ver una t cnica conocida como A?AS =As$nc!ronus ?avascript And S<L>- 3ue consigue realiCar peticiones de datos a los servidores 9eb sin realiCar una recarga completa de la pgina- $ dota con ello de gran dinamismo a las pginas 9eb- asemejndolas en este sentido a aplicaciones de escritorio ItradicionalesI. AjaF est detrs de pro$ectos como el A%I de 0oogle<aps $ se usa en la ma$or+a de 9ebs modernas. a!ascript
,.
<%od&> <input t&pe=te4t id=name></input> <%utton on'lic$=0aludo69:></%utton> </%od&> </html>
Con(orme el documento se carga- el navegador revisa el script. /i !a$ cdigo invocando una (uncin- como el I alertI- ste se ejecuta. /i encuentra una de(inicin de (uncin =como &aludo> se carga $ 3ueda disponible para usos posteriores.
3. En un (ic!ero eFterno- con eFtensin js. %ara situaciones en las 3ue las (unciones 3uieren reutiliCase en varias pginas 9eb o simplemente conseguir una mejor organiCacin del cdigo. El contenido del (ic!ero en ?avascript ser+a"
>unction 0aludo69= !ar n = document.get*lementF&(d67nom%re79: alert678ola 7 Q n9: A
$ su uso desde una pgina 9eb"

<html> <head> <script type="text/javascript" src="fichero.js"> </head> <%od&></%od&> </html>
A continuacin repasaremos algunos de los componentes bsicos del lenguaje 3ue nos sern Htiles al trabajar con 1penLa$ers"
Sentencias 2sicas
!ar titulo+apa = 7+apa inicial7: //declaracin de una !aria%le alert6titulo+apa9: //in!ocar una >uncin con un par#metro
!ar nue!a'oordenada = coordR Q 100: // operar con dos !alores
,D
,ipos de varia2les
// TEXTO !ar nom%re'apa = 70er!icio 3J,-7: // comillas simples o do%les
// NUMEROS 6enteros, decimales...9 !ar numeroCe'apas = N: !ar latitud = @N.@S:
// BOOLEANOS; cierto o >also !ar tiene2egistros = true: !ar la'apa*sDisi%le = >alse:
// NULO e inde>inido !ar mapa = null: !ar otro+apa: // undefined
// ARRAYS; listas de elementos ordenados !ar ciudades = T70antander7, 7+adrid7, 7Furgos7U: // otra lista !ar ciudad = ciudadesTHU: // ciudad !ale 7Furgos7 ciudades.push67Torrela!ega79: // aIadir un elemento al >inal /M +Vtodos disponi%les para arra&s e4plicados en http;/////./Lschools.com/5sre>/5sre>Po%5Parra&.asp M/ // OBJETOS !ar una3osicion = ne/ ,%5ect69: una3osicion.nom%re = W3ue%lo: una3osicion.coordenadas = T-L.@@, @N.SSU: // >ormato 0,J1X
!ar una'asa = = color; 7Flanco7, numero8a%itaciones; @,
16 ?/1'" el (ormato ?ava/cript 1bject 'otation es mu$ utiliCado en los servicios 9eb actuales $ cada veC se eFtiende ms- (rente a otros (ormatos ms IpesadosI como Fml. 30
ha%itantes; T =nom%re; 7 ohn Coe7, edad; LLA, =nom%re; 7 ac$ Fauer7, edad; @1A U A: !ar 5ohn = una'asa.ha%itantesT0U: !ar edad = 5ohn.edad: // !ale LL
0peradores
// Concatenar cadenas alert678ola 7 Q 7mapa79: // muestra 78ola mapa7 // Operadores aritmticos !ar resultado = 61 Q H Y @9 M N / -1 // Comparacin !ar numero = @: 6numero === @9 // igual 6numero !== N9 // distinto 6numero > H9 // ma&or que 6numero >= @9 // ma&or/igual que 6numero < N9 // menor que 6numero <= @9 // menor/igual que !ar condicion01 = true: !ar condicion0H = >alse: !ar - = 6condicion01 ZZ condicion0H9 // AN#$ - es >also !ar F = 6condicion01 [[ condicion0H9 // OR$ F es cierto !ar ' = !6condicion0H9 // NOT$ ' es cierto operadores !"icos // !ale N
Cdigo condicional
// %&''' ELSE ( #ecidir )* e+ec*tar en ,ase a *na condicin !ar 5a!ascript*s(mposi%leCe-prender = >alse: i> 65a!ascript*s(mposi%leCe-prender9= !ar quien = 7&o7:
31
tirar)aToalla6quien9: Aelse= practicar+as<-!an?ar69: A
// S-%TC. ( #ecidir )* e+ec*tar en ,ase a *n /a!or !ar opcion*legida = L: s/itch 6opcion*legida9 = case 1; alert67)a primera79: %rea$: case H; alert67)a segunda79: %rea$: case L; alert67)a tercera79: // Vsta s" se e5ecuta. %rea$: de>ault; alert67J, has elegido 1, H o L79: A
Cdigo iterativo
// &OR ( Rea!i0ar *na accin /arias /eces !ar indice: >or 6indice=0: i<=10: iQQ9= alert6W-hora i !ale; W Q i9: A // la >uncin alert se e5ecutar# 11 !eces
// -.%LE ( Rea!i0ar *na accin mientras se c*mp!a *na condicin !ar cantidad = 100: /hile6cantidad < 10009=
3,
cantidad = cantidad Q 100: A
Adems de las estructuras de cdigo 3ue !emos visto- con ?avascript se puede interactuar con el documento !tml mediante lo 3ue se conoce como el modelo >O"- una abstraccin 3ue permite ver el documento !tml como un rbol con nodos manipulables. Esto permite utiliCar (unciones de bHs3ueda para obtener $ manipular elementos como"
!ar listaCi!s = document.getElementsByTagName('div'); !ar un*nlace = document.get*lementF&(d67enlace0N79:
Con ?avascript se puede acceder a varios objetos $ (unciones prede(inidos del navegador. :e ellos- los ms destacados son los pertenecientes al objeto 9indo9- el cual permite (unciones como"
/indo/.alert67un mensa5e79: /indo/.document./rite6W<%r>9:
/i 3ueremos 3ue el cdigo para acceder al :1< $ otras propiedades del navegador sea ms (leFible $ sencillo- es recomendable utiliCar librer+as de ?avascript de apo$o como <=uer:.
Referencias complementarias /e puede encontrar muc!a in(ormacin sobre ?avascript en la 9eb. Es interesante el sitio !ttp"##elo3uentjavascript.net 3ue tiene elementos interactivos para practicar con los elementos ms bsicos del lenguaje. Como la programacin en ?avascript es tan usada actualmente se !an programado librer+as gratuitas mu$ Htiles- 3ue (acilitan su uso $ permiten aislar al programador de las di(erencias entre navegadores. Contienen (unciones como" e(ectos visuales- generacin dinmica de !tml- selectores complejos- comunicacin v+a A?AS con servicios eFternos- etc. Las ms utiliCadas actualmente son probablemente jAuer$ 999.j3uer$.com $ <ootools" !ttp"##mootools.net#
33
2.2.4. E& (#(!& '! &%" &!+,?#H!" '! "!$;)'%$

Los lenguajes de servidor son a3uellos cu$a ejecucin se produce en el servidor 9eb- en lugar de ejecutarse dentro del navegador 9eb como lo !ace ?avascript. /u objetivo es salvar las limitaciones del entorno de ejecucin del cliente- principalmente dotando al programador de una ma$or capacidad para acceder a recursos. Aun3ue en esta asignatura no se trabaja con lenguajes de servidores importante al menos presentarlos $ tener unas re(erencias por si deseamos pro(undiCar en su conocimiento. El servidor 9eb- una veC recibe la peticin 877% del cliente- tiene libertad para utiliCar los medios precisos para responder" librer+as de clculo- lectura de (ic!eros o bases de datos- peticiones a nuevos servidores- etc. El Hnico re3uisito es 3ue los resultados se traduCcan antes de ser enviados a un lenguaje reconocible desde el navegador =!abitualmente 87<L- S<L o ?/1'>. Las tecnolog+as en servidor son mu$ variadas" CGI =Common 0ate9a$ Inter(ace>. El sistema ms antiguo- 3ue permite la ejecucin en el servidor de programas !ec!os en C^^Eisual Tasic- %erl- %$t!on... Ln servidor de mapas mu$ eFtendido como es <apserver trabaja con esta tecnolog+a. 6erl. Ln lenguaje interpretado- con muc!as (unciones para el procesamiento de teFto. 6+6. Libre $ gratuito- mu$ eFtendido en pginas de (oros $ comunidades sociales. 8a$ un un so(t9are especialiCado en gestin de contenidos- llamado :rupal- 3ue est !ec!o con %8%- $ cuenta con un mdulo 3ue integra (unciones geogr(icas con 1penLa$ers" !ttp"##drupal.org#project#openla$ers 6:thon. Ln lenguaje de script multipropsito- utiliCado en mbitos mu$ diversos =computacin cient+(icageoprocesamientoadministracin de sistemas...>. $S6!N(,. La alternativa 9eb en servidor de <icroso(t- dentro de su estrategia de !erramientas $ servicios .'E7- con varios lenguajes disponibles" EisualTasic .'E7 $ sobre todo C_. >S6. La tecnolog+a de pginas dinmicas de ?ava- dentro de la ar3uitectura general ?,EE.
En la actualidad- la tendencia generaliCada es 3ue las corporaciones realicen sus aplicaciones 9eb en uno o varios lenguajes de servidor =C_?ava- %$t!on...>- $ 3ue internamente muc!as est n organiCadas en
3&
servicios. %or decisin de los gestores algunos de dic!os servicios se pueden abrir al uso desde clientes eFternos- bajo pago o gratuitamente- $ generalmente adoptando estndares como los servicios 9eb v+a /1A% $ los servicios 9eb tipo BE/7 =3ue se traducen generalmente en (lujos de datos S<L $ ?/1'- respectivamente>.
Referencias complementarias Como lenguaje para iniciarse en la programacin 9eb en el servidorrecomendamos %8% o %$t!on. %ara %8% tenemos cursos online como !ttp"##999.programacion9eb.net#cursos#curso.p!p4numU10 $ para %R781' recomendamos buscar en google por marcos de desarrollo como %ylons o >7ango! /i en nuestro mbito de re(erencia $a se trabaja con .'E7 o ?,EEentonces la alternativa clara es trabajar respectivamente en A/%.'E7 $ ?/%. /e puede encontrar buenos recursos en !ttp"##999.asp.net# $ !ttp"##999.jsptube.com#- respectivamente.
3*
3. A($!+')!+'% # '!"#$$%&&#$ *%+ O(!+L#2!$"

Como base para la realiCacin de los ejercicios 3ue se entregan en el aulaen este apartado presentamos las capacidades generales de 1penLa$ers $ tambi n un listado de recursos de aprendiCaje. En el primer apartado nos centraremos en los aspectos ms bsicos de la librer+a" cmo re(erenciar la librer+a para crear un mapa- conocer los distintos tipos de capas $ los controles bsicos de interaccin. En el segundo blo3ue presentaremos un conjunto de recursos interesantes para el lector" dnde encontrar ejemplos- manuales $ cmo usar la documentacin del A%I- para 3ue ste pueda avanCar en el aprendiCaje de manera autnoma.
&.1. 3C#o se usa +penLayers4

1penLa$ers es una librer+a de mapas !ec!a totalmente en ?avascript- con tecnolog+a A?AS $ sin dependencias en el servidor- 3ue toma como base de desarrollo otras dos librer+as de ?/ como son ;ico $ %rototype. /u cdigo (uente es libre $ toda la documentacin relevante puede ser encontrada en su pgina 9eb o(icial.
Ilustracin D" /itio 9eb o(icial de 1penLa$ers
999.openla$ers.org
La Hltima versin de librer+a se encuentra !ttp"##999.openla$ers.org#api#1penLa$ers.js
en
la
siguiente
LBL"
36
%ara utiliCarla- basta con apuntar a esa direccin en una pgina 9eb de la siguiente manera"
<script t&pe=Bte4t/5a!ascriptB src=Bhttp;/////.openla&ers.org/api/,pen)a&ers.5sB> </script>
LtiliCando ese (ic!ero .js- en la carpeta api- estaremos seleccionando la Hltima versin estable de la librer+a. /i cambiamos la carpeta api por dev apuntaremos a la versin en desarrollo =dev-elopment>- la cual nos permitir probar las nuevas (uncionalidades en marc!a. /i lo deseamos podemos descargar una versin concreta de la librer+a $ desplegarla en nuestro servidor 9eb. A3u+ estn todas las 3ue se !an liberado !asta el momento" !ttp"##999.openla$ers.org#do9nload#
3.1.1. C$!#*)9+ '! ?+ >#(# 0-")*%

El objetivo (undamental de la librer+a es poder publicar un mapa dentro de una pgina 9eb- lo cual se puede !acer de manera rpida $ sencilla con el siguiente cdigo"
<html> <head> <script t&pe=Bte4t/5a!ascriptB src=Bhttp;/////.openla&ers.org/api/,pen)a&ers.5sB> </script> <script t&pe=Bte4t/5a!ascriptB> !ar mapa: >unction hola+apa69= mapa = ne/ ,pen)a&ers.+ap67capa+apa79: !ar capaK+0 = ne/ ,pen)a&ers.)a&er.K+06 B,pen)a&ers K+0B, Bhttp;//!map0.tiles.osgeo.org//ms/!map0B, =la&ers; B%asicBA9: mapa.add)a&er6capaK+09: mapa.?oomTo+a4*4tent69: A </script> </head>
3@
<%od& onload=Bhola+apa69B> <di! id=7capa+apa7 st&le=Btop; 0p4: /idth; \00p4: height; @00p4:B> </di!> </%od&> </html>
El resultado de ejecutar la pgina puede verse en la siguiente ilustracin"
Ilustracin 10" 8ola mundo con 1penLa$ers
En el cdigo puede verse una constante sobre el estilo de programacin con la librer+a $ es 3ue est orientada a clases- las cuales permiten instanciar los distintos objetos =mapas- capas- controles...>. %.ej. con la l+nea mapa U ne9 1penLa$ers.<ap=Icapa<apaI>O se crea un objeto de la clase OpenLayers!"ap mediante su (uncin constructora- al cual se le !ace llegar un parmetro- 3ue es el nombre del div donde se pintar el mapa. Con la sentencia var capa)</ U ne9 1penLa$ers.La$er.)</=`1penLa$ers )</`- `!ttp"##vmap0.tiles.osgeo.org#9ms#vmap0`- ala$ers" `basic`b>O se !ace lo mismo con la (uncin constructora de la capa )</- a la cual se suministran 3 parmetros- siendo el Hltimo un objeto de tipo params ? @clave- valorA
3.1.2. AJ?C <)(%" '! '#<% (?!'% *#$,#$ *%+ O(!+L#2!$"D

1penla$ers trabaja- a di(erencia de otros A%Is- con un amplio nHmero de or+genes de datos =servicios de mapa comerciales- servidores de mapa 3.
opensource- servidores propietariosc>- $ adems lo !ace siempre 3ue sea posible de la mano de los estndares 10C ms eFtendidos =)</- )5//L:...> por lo 3ue proporciona muc!a (leFibilidad al programador. Es una Inavaja suiCaI para consumir servicios de mapa- 3ue separa los datos de las !erramientas. En 1penLa$ers eFiste el concepto de capa *ase- 3ue es la capa principal de (ondo activa- de la cual se toma el sistema de pro$eccin $ los niveles de Coom. /obre sta pueden a;adirse ms capas simultneas- a modo de overlay- sean raster o vectoriales. EFisten muc!os tipos de capas"
Ilustracin 11" 7ipos comunes de capas usados en 1penLa$ers Capa Google :escripcin Baster. E%/0 D00D131@. Earias opciones" sat lite- mapa carreteras- !+brido $ relieve. Baster. E%/0 D00D13. 1pciones" sat lite- mapa carreteras e !+brido. 'ota" !asta la v,.10 slo est disponible el tipo de capa EirtualEart! =sin acceso directo a la cac! de mapas de <icroso(t>. Baster. E%/0 variable. %ermite seleccionar las capas del )</. Baster. E%/0 D00D13. Eectorial. E%/0 variable. Eectorial. E%/0 variable. %ermite cargar (ormatos como 0eo?/1'- V<L...
/ing
?-S 0penStreet-ap G-L Vector
Las capas se localiCan en el espacio de nombres 0penLa:ers!La:er. La capa Google cuenta p.ej. con la clase correspondiente OpenLayers!Layer!Google! 7odas las capas tienen la misma manera de crearse $ a;adirse al mapa" 1. usar el constructor espec+(ico de capa- con los parmetros re3ueridos.
var capaB U ne9 1penLa$ers.La$er.0oogle=`Carreteras`- at$pe" google.maps.<ap7$peId.B1A:<A%- numJoomLevels" ,0b9: var capa8 U ne9 1penLa$ers.La$er.0oogle=`8ibrido`- at$pe" google.maps.<ap7$peId.8RTBI:- numJoomLevels" ,0b>O var aerea U ne9 1penLa$ers.La$er.Ting=aQe$" apiVe$- t$pe" `Aerial`b>O
1@ %ro$eccin I<ercator es( ricaI. E3uivalente al E%/0" 3*.@
3D
var )</ U ne9 1penLa$ers.La$er.)</=P)</]`!ttp"##vmap0.tiles.osgeo.org#9ms#vmap0`- ala$ers" IbasicIb>O var Qml U ne9 1penLa$ers.La$er.0<L=`%ueblos`- Pdatos#pueblos.Qml]a(ormat" 1penLa$ers.5ormat.V<Lb>O
2. a;adir la capa al mapa- individualmente o con otras ms a la veC"

mapa.addLa$er=capaB>O mapa.addLa$ers=Maerea- )</N>O
Adems de los tipos mostrados eFisten otros or+genes de datos admitidos =ver apartado correspondiente del A%I>. 7odas ellas !eredan de OpenLayers!Layer $ poseen ciertas propiedades $ m todos comunes =eFtensin- resolucin- sistema de coordenadas- unidades- visibilidad...>" !ttp"##dev.openla$ers.org#apidocs#(iles#1penLa$ers#La$er-js.!tml
3.1.3. C%+<$%&!" 0-")*%" (#$# )+<!$#*<?#$ *%+ O(!+L#2!$"

Los controles son componentes 3ue permiten la interaccin del usuario con el mapa de 1penLa$ers. Algunos se muestran en pantalla como el control de capas =Layer&6itcher> $ otros no son visibles $ controlan ciertos aspectos de la interaccin- como p.ej el control de seleccin para entidades vectoriales =&elect<eature>.
Ilustracin 1," Controles visuales comunes en 1penLa$ers =1 de ,>
Control # 6an6anel
:escripcin 5lec!as para el desplaCamiento en los cuatro puntos
&0
cardinales. Inclu$e en un panel 3 botones" ms Coom ms- menos Coom $ Coom a la eFtensin. Cada botn se corresponde con un control utiliCable separadamente. Combina los controles 1 $ , Controla la capa base activa si !a$ varias $ permite cambiar la visibilidad de los overlays
@oom6anel
& A
6an@oom La:erSBitcher
Ilustracin 13" Controles visuales comunes en 1penLa$ers =, de ,>
Control # 6an@oom/ar ScaleLine & A D 0vervieB-ap 6ermalinC -ouse6osition
:escripcin Inclu$e %an%anel ^ JoomTar. L+nea de escala actual. <apa de situacin. 0enerar un enlace al encuadre actual de mapa. Coordenadas actuales del cursor sobre el mapa.
Los controles se localiCan en el espacio de nombres 0penLa:ers!Controls. As+ por ejemplo el control Layer&6itcher se corresponde con la clase OpenLayers!2ontrols!Layer&6itcher!
&1
En la con(iguracin simple de mapa de 1penLa$ers- se agregan por de(ecto las (unciones de desplaCamiento $ Coom =control %anBoom5, pero si 3ueremos manejar ms controles- los podemos indicar en el constructor del mapa o agregarlos individualmente. %or ejemplo"
var opciones U a controls" M ne9 1penLa$ers.Control.'avigation=>ne9 1penLa$ers.Control.Ve$board:e(aults=>ne9 1penLa$ers.Control.%anJoomTar=>ne9 1penLa$ers.Control./cale=> NbO mapa U ne9 1penLa$ers.<ap=ImapI- opciones>O var autoria U ne9 1penLa$ers.Control.Attribution=>O mapa.addControl=autoria>O
Lna veC vinculado un control al mapa- el primero lo re(erencia en su propiedad ImapI $ el segundo lo inclu$e en su coleccin I controlsI. %ara ver todos los controles $ sus propiedades" !ttp"##dev.openla$ers.org#apidocs#(iles#1penLa$ers#Control-js.!tml
&.".
5ecursos para +penLayers
profundi6ar
en
el
aprendi6a1e
de
1penLa$ers est en constante mejora $ ampliacin $ la mejor manera de continuar el aprendiCaje es con los siguientes recursos"
Ilustracin 1&" 0u+a rpida de recursos para 1penLa$ers
'ec rso 7; Pgina oficial
Direcci3n http://www.openlayers.org Versin concreta:
$;
Ejemplos oficiales
http://dev.openlayers.org/releases/OpenLayers2.10/examples/ esarrollo: http://openlayers.org/dev/examples/
&,
Versin concreta: <; =PI de .pen-a/ers http://dev.openlayers.org/releases/OpenLayers2.10/doc/apidocs/!iles/OpenLayers-"s.html esarrollo: http://dev.openlayers.org/apidocs/!iles/OpenLayers-"s.html >; ,an al de .pen-a/ers http://www.ingemoral.es/pages#/man$alOpenLayers.html en espa?ol @ Descartes 9aller de tra"ajo con http://wor%shops.opengeo.org/openlayers-intro/ .pen-a/ers : .penGeo Ejemplos : Geotri" .pen-a/ers D .penStreet,ap -ista de correo .pen-a/ers : Fs arios -ista de correo .pen-a/ers : Programadores -ista de correo @ Com nidad 5ispana de osGeo http://geotri&$.net/taxonomy/term/1' http://wi%i.openstreetmap.org/wi%i/OpenLayers
A; B; C;
E;
http://openlayers.org/mailman/listin!o/$sers
G;
http://openlayers.org/mailman/listin!o/dev
7&;
http://www.osgeo.org/content/!a(/mailing)lists)*+.html
77;
C rsos tecnologas espaciales con soft(are http://wi%i.osgeo.org/wi%i/,ategory:,$rsos li"re @ Com nidad 5ispana de osGeo
Lna buena manera de utiliCar estos recursos podr+a ser" =a> /urge una duda con 1penLa$ers $ nos dirigimos al navegador 9eb. =b> Tuscamos directamente en 0oogle- con unas buenas palabras clave $ operadores- lo cual nos puede revelar recursos directamente aplicables. =c> En caso de no encontrar la solucin usamos los ejemplos de 1penLa$ers =recurso ,d>- re(inando la bHs3ueda con el (iltro integrado. 1tras v+as de ejemplo interesantes son los recursos &d- *d $ 6d.
&3
=d> Los ejemplos eFplican gran parte de la librer+a- pero a veces no es su(iciente. En ese caso-nos dirigiremos al A%I =recurso 3d>- 3ue documenta de manera detallada cada clase. 0eneralmente navegaremos comenCando con un objeto principal relevante =por ejemplo 3u parmetros tiene un constructor de capa )5/ \ OpenLayers!Layer!)<& o cmo generar un encuadre \ OpenLayers!Counds> $ eFaminando sus m todos $ sus propiedades. =e> 'ormalmente en el nivel previo se resuelven las dudas ms !abituales. /i no es as+- utiliCar las listas de correo =recursos 10d- .d $ Dd>. Lna veC en ellas es recomendable utiliCar previamente las !erramientas de bHs3ueda- por si $a se !ubiera (ormulado una consulta similar $ si no es as+ (ormular la consulta de manera concisa $ clara.
&&

Curso Openlayers

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

Curso Openlayers

Cargado por

Copyright:

Formatos disponibles

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA (31-EX-75)

MATERIALES DOCENTES Materia N 4 Difusin y publicacin de resultados

D!"#$$%&&% '! #(&)*#*)%+!" ,!%,$-.)*#" /!01 O(!+L#2!$"

P$%.!"%$1 34CTOR 3ELARDE GUTI5RRE6

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

4+')*! '! *%+<!+)'%"

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

4+')*! '! )&?"<$#*)%+!"

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

1. N?!;#" #(&)*#*)%+!" ,!%,$-.)*#" !+ &# @!0.

1.1. La revolucin de las tecnolo !as Neo eo raf!a

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

Ilustracin 1" Al(abeto realiCado con lugares reales en Google"aps

Los tres (actores (undamentales evolucin#revolucin geogr(ica son"

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

Ilustracin ," <apamundi con logos de servicios sociales

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

1.". Los #as$ups% un nuevo estilo de co#binar infor#acin

Ilustracin 3" El primer mas!up

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

1.&. Cruce de ca#inos' la Neo eo raf!a y los ()*

Ilustracin &" /I0 tradicional (rente a 'eogeogra(+a

6 Eer la interesante presentacin de A. 7LB'EB en !ttp"##999.slides!are.net#ajturner#!o9-neogeograp!$-Qilled-gis

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

1.4. Nuevos usuarios% nuevos pro ra#adores y +penLayers

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

1.4.1. E& (!$.)& '!& ($%,$#>#'%$ '! SIG

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

1.4.2. AP%$ B?C ?"#$ O(!+L#2!$"D

D El sitio o(icial de la (amilia de A%Is !ttp"##code.google.com#intl#es-E/#apis#maps#indeF.!tml

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

Ilustracin *" Eentajas de 1penLa$ers (rente a 0oogle<aps

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

2. F?+'#>!+<%" '! ($%,$#>#*)9+ (#$# O(!+L#2!$"

".1. Las bases t,cnicas de )nternet' -C./). y 0--.

Ilustracin 6" 'iveles del protocolo 7C%#I%

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

Lna LBL se eFpresa segHn el guin-tipo siguiente"

CURSO DE EXPERTO EN DESARROLLO Y GESTIN DE SISTEMAS DE INFORMACIN GEOGRFICA

Vctor Velarde Gutirrez

D!"#$$%&&% '! #(&)#)%+!" ,!%,$-.)*#" /!01 O(!+L#2!$"

4+')! '! %+<!+)'%"

4+')! '! )&?"<$#)%+!"

1. N?!;#" #(&)#)%+!" ,!%,$-.)*#" !+ &# @!0.

2.2.1. D)"!E#+'% &# !"<$?<?$# '! ?+# (-,)+# %+ FTML

(ti)uetas generales +,-L. +($%. */0%1.

2.2.2. D#+'% !"<)&% %+ G%H#" !+ #"*#'# (CSS)

2.2.3. F?+)%+!" 2 !;!+<%" %+ I#;#"*$)(<

3.1.1. C$!#)9+ '! ?+ >#(# 0-")%