Foros del Web » Creando para Internet » HTML »

Usar Canvas o SVG?

Estas en el tema de Usar Canvas o SVG? en el foro de HTML en Foros del Web. Hola, tengo que implementar una aplicación (para una intranet, no de forma pública), en la cuál la interfaz gráfica ha de ser un menú superior ...
  #1 (permalink)  
Antiguo 06/07/2012, 18:41
Avatar de Mikimoto74  
Fecha de Ingreso: enero-2005
Mensajes: 88
Antigüedad: 19 años, 2 meses
Puntos: 2
Busqueda Usar Canvas o SVG?

Hola,

tengo que implementar una aplicación (para una intranet, no de forma pública), en la cuál la interfaz gráfica ha de ser un menú superior y un mapamundi.

Dependiendo de la opción de menú escogida, al clicar en un país, que debería remarcarse al pasar por encima, se debe hacer zoom en él, o esconder el resto de países, y mostrar la información referente a ese país acorde con la opción de menú elegida. Si además hay definidas regiones para ese país, se mostrarán las regiones, para poder seleccionarlas individualmente y mostrar la misma información pero por región.

He visto varias cosas hechas por ahí, pero no sé qué camino tomar. Si usar canvas de HTML5 + jQuery, si usar SVG, o usar HTML simple + jQuery... En una ocasión hice algo con un mapa de España por provincias con el tag <map> de HTML y un plugin de jQuery llamado map hilight, pero quizás para lo que quiero sea más sencillo lanzarse a aprender a usar canvas o SVG, los cuáles todavía no he usado.

Qué me aconsejaríais? De paso, si alguien conoce un buen framework, que no sea demasiado complejo, para manejar mapas en HTML, soy todo oídos.

Saludos!
  #2 (permalink)  
Antiguo 08/07/2012, 03:40
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: Usar Canvas o SVG?

Hola:

Yo no uso librerías javascript, pero tengo algo hecho con mapas, de forma gráfica (y simple javascript) puedes ver este Mapa de España, y también lo repetí en svg: SVG: Mapa de España.

He visto cosas hechas en canvas, pero no las he usado aún... y con svg tan solo he visto algunas figuras y poco más, pero me parece muy práctico.

En la página hay también una aplicación que obtiene los polígonos con colores planos de las imágenes, que pueden ayudar mucho.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Última edición por caricatos; 09/07/2012 a las 10:10 Razón: ortografía
  #3 (permalink)  
Antiguo 08/07/2012, 16:28
Avatar de Mikimoto74  
Fecha de Ingreso: enero-2005
Mensajes: 88
Antigüedad: 19 años, 2 meses
Puntos: 2
Respuesta: Usar Canvas o SVG?

Hola Caricatos, gracias por responder.

Sí, yo también hice justo un mapa de España con rollover usando un plugin de jQuery llamado Map Hilight y los viejos tags <map> y <area>.

He estado indagando por ahí y al parecer esta implementación no tiene pinta de ser muy recomendada por gente con mucha experiencia acerca de este tema. Vamos, que con esto del HTML5, se ven cosas increíbles hechas con canvas y/o SVG, o incluso mezclándolas.

Por lo que he visto, para creación de mapas es más recomendable SVG por el tema de la escalabilidad de los gráficos vectoriales. Pero siempre he oído hablar maravillas de canvas y sin embargo SVG está ahí casi desde que está XML pero no ha hecho nunca demasiado ruido (yo hasta ahora lo había usado en dos o tres ocasiones para importar algún gráfico vectorial a Freehand o Illustrator).

Además, si no entendí mal de lo que ví por ahí, a la hora de interactuar con las regiones de un mapa usando javascript, es más difícil hacerlo con canvas no? Los elementos del SVG formarán parte del DOM, pero los gráficos de canvas, si no me equivoco, son opacos a javascript.

No se... de momento creo que me decantaré por SVG, si alguien no me recomienda lo contrario.

Última edición por Mikimoto74; 08/07/2012 a las 16:39
  #4 (permalink)  
Antiguo 08/07/2012, 20:16
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Usar Canvas o SVG?

No descartes el uso de css, he visto cosas bastante interesantes, obviamente hay que analizarlas en función de tu objetivo, que desde ya, a primera vista, muy simple tampoco es.

http://www.noobcube.com/tutorials/ht...inners-guide-/
http://www.tankedup-imaging.com/css_dev/rollover.html
http://www.frankmanno.com/ideas/css-imagemap/

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 09/07/2012, 07:23
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: Usar Canvas o SVG?

Emprear, lo que noto es que con estos ejemplos css... mejor dicho divs, solo ocupan áreas cuadradas, lo que nos lleva a la exactitud o detalle del mapa.

Ahora. Los Tags area y map no son viejos (ni obsoletos ni depreciados), siguen presentes en la (WD) especificación html5.

De que puede tener un status mouseover con JavaScript puede. Pero como sustituye completamente el img original supongo que es lo que le da la sensación de primitivo. A ver si alguien por ahí descubre un Jquery para sustituir zonas parciales de una imagen.

Los 4 apectos que creo, a tomar en cuenta son
1) Exactitud/detalle de las zonas seleccionables.
2) El status/interacción Mouseover/click.
3) El detalle de la imagen/mapa.
4) Compatibilidad.

Quizá con esto se pueda decidir o encontrar alternativas.

Los candidatos son:
a) Map
b) SVG
c) Canvas
d) Divs/css

Por ejemplo.
SVG queda atrás (creo) en detalle de la imagen y en compatibilidad.
Los divs quedan atrás en exactitud y tienen cierto riesgo de descuadrarse.
De canvas no tengo ni idea... sería bueno ver alternativas.
Map se queda atrás en interacción mouseover, a menos que haya esteroides Jquery por ahí.

Interesante tema...
  #6 (permalink)  
Antiguo 09/07/2012, 08:39
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Usar Canvas o SVG?

lo mencioné como una alternativa a analizar. Todo dependerá de la compplejidad requerida.
Y desde ya que con jQuery hay, y muy buenos

http://www.outsharked.com/imagemapster/
http://davidlynch.org/projects/maphilight/docs/
y seguramente mejores si se busca con más detalle
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 09/07/2012, 10:00
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 10 meses
Puntos: 834
Respuesta: Usar Canvas o SVG?

Yo te sugiero svg. He aquí un gran ejemplo: http://mapoteca.educ.ar/mapa/republica-argentina/
  #8 (permalink)  
Antiguo 09/07/2012, 17:18
Avatar de Mikimoto74  
Fecha de Ingreso: enero-2005
Mensajes: 88
Antigüedad: 19 años, 2 meses
Puntos: 2
Respuesta: Usar Canvas o SVG?

Hola de nuevo y gracias por vuestros aportes.

A decir verdad, el ejemplo que mencioné que hice hace tiempo con <map> y el plugin jQuery llamado Map Hilight recuerdo ahora que hacía uso de canvas para el resaltado de las provincias. El canvas era transparente y situado por encima del mapa, y al hacer un rollover se dibujaba un polígono semitransparente encima del área (provincia) sobre la cuál estaba el cursor, con los mismos puntos, para que coincidiera.

A parte de eso, estoy ya metido en intentar hacerlo con SVG porque frente a canvas me parece más sencillo a la hora de moverlo con Javascript, y más que nada no uso <map> por meterme ya de lleno en algo que parece tener más futuro.

Lo único es que encuentro mucha información, pero muy confusa. Muchas herramientas, frameworks, plugins, que me han dejado un poco apabullado sin saber por dónde tirar

Está el caso de los frameworks de mapas open source como OpenLayers (el cuál usa tu ejemplo Panino), OpenStreetMap, Cartagen, Tile5, Leaflet, el propio Google Maps..., pero ofrecen demasiado y son muy complejas para lo que necesito: un mapa con países sin ninguna información cartográfica adicional, con solo dos o tres niveles de zoom (a nivel de continente, de país, o de región en algunos casos), y con interacción con el usuario . Luego he indagado más en una librería que ya conocía pero que nunca había estudiado que es Raphaël, con la cuál entre otras cosas puedes manejar más cómodamente un mapa SVG que usando javascript "a pelo". También he estado mirando otra llamada KineticJS, que se basa en canvas 100%, aunque te ofrece interacción con los vectores dibujados en el canvas: ejemplo.

Pero por sencillez y porque ya conozco bastante bien jQuery, de momento me estoy decantando por un plugin de jQuery llamado jVectorMap

Etiquetas: canvas, hilight, html5, jquery, mapas, svg
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:30.