www.investic.net INTEGRACIÓN DE LAYAR CON DRUPAL Mael Taleb http://twitter.com/mael_ Drupal como gestor de contenido geopo...
www.investic.net ÍNDICE <ul><li>Layar (entorno de configuración, aplicación)
PorPOIse (server)
Drupal (Gestor de contenido)
Android, iPhone* (Plataformas de ejecución) </li></ul>
www.investic.net
www.investic.net
www.investic.net Elementos que entran en funcionamiento <ul><li>Cliente Layar (aplicación cliente)
Servicios Layar (elementos que aporta layar)
Drupal (gestor de puntos de interés)
PorPOIse (procesado de puntos de interés) </li></ul>
www.investic.net LAYAR
www.investic.net Descripción <ul><li>Desarrolladores holandeses SPRXmobile
Layar es un navegador de realidad aumentada
Superposición de contenido a la realidad que muestra la cámara
Soporta arquitectura (1D, 2D, 3D)
Aplicación para : Android, iPhone*
Navegador  (Geoposición de  POI's), definidos como capas
Actualmente dispone de más de  373 Layers (capas) publicadas </li></ul>
www.investic.net Layar
www.investic.net ¿Como funciona Layar ? <ul><li>LAYAR: su funcionamiento se basa en usar la información que proporciona el...
Superponiendo, puntos, imágenes u objetos sobre la imagen que vemos.
Y también genera otros tipos de vista (mapa, lista, imagen) </li></ul>
www.investic.net Funcionamiento básico <ul><li>El cliente Layar realiza la conexión con el Servidor Layar </li><ul><li>Env...
En modo desarrollador puedes cargar tus capas todavía no publicadas
Tras seleccionar una capa accedemos al servicio web gestionado por nuestro drupal
PorPOIse se encarga de gestionar la información de drupal y relacionarla con entorno Layar </li></ul>
www.investic.net LAYAR:REQUEST <ul><li>En la URL (mediante POST)
Datos Request: </li><ul><ul><li>Latitud-Longitud (localización del cliente)
Nombre de la capa
Filtros (opcionales)
Identificador y clave (caso de desarrolladores) </li></ul></ul><li>http://www.midominio.com/server/?countryCode=ES&lon=-1....
www.investic.net API: REQUEST
www.investic.net
www.investic.net LAYAR: RESPONSE <ul><li>Es proporcionada por el servidor PorPOIse, en nuestro caso
Formato JSON, para el paso de información
Información filtrada según lo definido en la interfaz aportada por la infraestructura de Layar
El cliente visualiza los POI's y la información definida en la capa de Layar </li></ul>
www.investic.net RESPONSE (JSON)
www.investic.net API: RESPONSE
www.investic.net Cómo crear un capa (layer)
www.investic.net Zona desarrolladores en Layar
www.investic.net Listado de capas en desarrollo
www.investic.net Distintos filtros aplicables a cada capa ( layer )
www.investic.net Entorno de prueba de capas (Layers)
www.investic.net Información de los POIs, presentada  por el entorno de test
www.investic.net Radio de búsqueda 2 km
www.investic.net Filtrando por radio de búsqueda 300 m
www.investic.net JSON generado por PorPOIse
www.investic.net Características del navegador (cliente Layar) <ul><li>   Sección del momento, populares y locales
   Función de búsqueda
   Añadir la capa a los favoritos
   Mapa y vista de lista
Upcoming SlideShare
Loading in …5
×

Integracion de layar con drupal

3,954 views

Published on

Drupal como gestor de contenidos geoposicionados

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,954
On SlideShare
0
From Embeds
0
Number of Embeds
344
Actions
Shares
0
Downloads
129
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Integracion de layar con drupal

  1. 1. www.investic.net INTEGRACIÓN DE LAYAR CON DRUPAL Mael Taleb http://twitter.com/mael_ Drupal como gestor de contenido geoposicionado DrupalCamp Barcelona 27-02-2010
  2. 2. www.investic.net ÍNDICE <ul><li>Layar (entorno de configuración, aplicación)
  3. 3. PorPOIse (server)
  4. 4. Drupal (Gestor de contenido)
  5. 5. Android, iPhone* (Plataformas de ejecución) </li></ul>
  6. 6. www.investic.net
  7. 7. www.investic.net
  8. 8. www.investic.net Elementos que entran en funcionamiento <ul><li>Cliente Layar (aplicación cliente)
  9. 9. Servicios Layar (elementos que aporta layar)
  10. 10. Drupal (gestor de puntos de interés)
  11. 11. PorPOIse (procesado de puntos de interés) </li></ul>
  12. 12. www.investic.net LAYAR
  13. 13. www.investic.net Descripción <ul><li>Desarrolladores holandeses SPRXmobile
  14. 14. Layar es un navegador de realidad aumentada
  15. 15. Superposición de contenido a la realidad que muestra la cámara
  16. 16. Soporta arquitectura (1D, 2D, 3D)
  17. 17. Aplicación para : Android, iPhone*
  18. 18. Navegador (Geoposición de POI's), definidos como capas
  19. 19. Actualmente dispone de más de 373 Layers (capas) publicadas </li></ul>
  20. 20. www.investic.net Layar
  21. 21. www.investic.net ¿Como funciona Layar ? <ul><li>LAYAR: su funcionamiento se basa en usar la información que proporciona el GPS, la cámara y la brújula del móvil para identificar su entorno y mostrar información acerca del mismo en pantalla en tiempo real.
  22. 22. Superponiendo, puntos, imágenes u objetos sobre la imagen que vemos.
  23. 23. Y también genera otros tipos de vista (mapa, lista, imagen) </li></ul>
  24. 24. www.investic.net Funcionamiento básico <ul><li>El cliente Layar realiza la conexión con el Servidor Layar </li><ul><li>Envía la latitud y la longitud del cliente </li></ul><li>El Servidor de Layar presenta al cliente las distintas capas disponibles
  25. 25. En modo desarrollador puedes cargar tus capas todavía no publicadas
  26. 26. Tras seleccionar una capa accedemos al servicio web gestionado por nuestro drupal
  27. 27. PorPOIse se encarga de gestionar la información de drupal y relacionarla con entorno Layar </li></ul>
  28. 28. www.investic.net LAYAR:REQUEST <ul><li>En la URL (mediante POST)
  29. 29. Datos Request: </li><ul><ul><li>Latitud-Longitud (localización del cliente)
  30. 30. Nombre de la capa
  31. 31. Filtros (opcionales)
  32. 32. Identificador y clave (caso de desarrolladores) </li></ul></ul><li>http://www.midominio.com/server/?countryCode=ES&lon=-1.97822570801&timestamp=1267085372929&userId=6f85d06929d160a7c8a3cc1ab4b54b87db99f74b&developerId=1111&developerHash=7e152170a2ee7711309be5696eece35a0a0c9b10&radius=500&lat=43.3221805166&layerName=gmk&phoneId=6f85d06929d160a7c8a3cc1ab4b54b87db99f74b&accuracy=100 </li></ul>
  33. 33. www.investic.net API: REQUEST
  34. 34. www.investic.net
  35. 35. www.investic.net LAYAR: RESPONSE <ul><li>Es proporcionada por el servidor PorPOIse, en nuestro caso
  36. 36. Formato JSON, para el paso de información
  37. 37. Información filtrada según lo definido en la interfaz aportada por la infraestructura de Layar
  38. 38. El cliente visualiza los POI's y la información definida en la capa de Layar </li></ul>
  39. 39. www.investic.net RESPONSE (JSON)
  40. 40. www.investic.net API: RESPONSE
  41. 41. www.investic.net Cómo crear un capa (layer)
  42. 42. www.investic.net Zona desarrolladores en Layar
  43. 43. www.investic.net Listado de capas en desarrollo
  44. 44. www.investic.net Distintos filtros aplicables a cada capa ( layer )
  45. 45. www.investic.net Entorno de prueba de capas (Layers)
  46. 46. www.investic.net Información de los POIs, presentada por el entorno de test
  47. 47. www.investic.net Radio de búsqueda 2 km
  48. 48. www.investic.net Filtrando por radio de búsqueda 300 m
  49. 49. www.investic.net JSON generado por PorPOIse
  50. 50. www.investic.net Características del navegador (cliente Layar) <ul><li>   Sección del momento, populares y locales
  51. 51.    Función de búsqueda
  52. 52.    Añadir la capa a los favoritos
  53. 53.    Mapa y vista de lista
  54. 54.    Ver la imagen cámara, reforzada con malla 3D
  55. 55.    Precisión de la información
  56. 56.    &quot;Take Me There&quot; acción (pre-definida) de localización en el mapa
  57. 57. etc.... </li></ul>
  58. 58. www.investic.net Interfaz layar
  59. 59. www.investic.net Características del dispositivo móvil <ul><li>Plataforma </li><ul><ul><li>Android
  60. 60. Iphone* (mínimo v3.1) y terminal 3Gs </li></ul></ul><li>Instalar aplicación Layar </li><ul><ul><li>AppStore en caso de iPhone
  61. 61. Market de Android (versión oficial)
  62. 62. Para Android esta disponible en la página de Layar una versión para desarrolladores </li></ul></ul><li>Cliente (móvil) </li><ul><ul><li>Conexión de datos
  63. 63. GPS (y cobertura).
  64. 64. Cámara
  65. 65. Acelerometro </li></ul></ul></ul>
  66. 66. www.investic.net Aplicación LAYAR <ul><li>Distintos modos de visualización: </li><ul><li>Cámara (imagen real)
  67. 67. Mapa (Google maps)
  68. 68. Listado de puntos </li></ul><li>Radar de ubicación de puntos
  69. 69. Distancia al punto
  70. 70. Información adicional </li></ul>
  71. 71. www.investic.net <ul>Interfaz Layar </ul>
  72. 72. www.investic.net Publicación de capas (Layer)
  73. 73. www.investic.net PorPOIse
  74. 74. www.investic.net Introducción <ul><li>Autor: Jens de Smit (licencia BSD).
  75. 75. Servidor de puntos de interés (POI's) para clientes Layar
  76. 76. Los datos son devueltos en JSON
  77. 77. Calcula distancia entre puntos
  78. 78. Versión actual 0.7a
  79. 79. Estructurado mediante el patrón de diseño “Factory” en PHP (instanciar objetos en tiempo de ejecución)
  80. 80. PorPOIse es un servidor para la gestión completa de puntos de interés desarrollado en php. </li></ul>
  81. 81. www.investic.net Flujo de datos <ul><li>ENTRADA: </li><ul><ul><li>XML (en nuestro caso)
  82. 82. Fichero -tab
  83. 83. SQL Datos almacenados en BBDD </li></ul></ul><li>SALIDA: </li><ul><ul><li>Datos formateados en JSON (requeridos por cliente Layar)
  84. 84. Paginados de 10 en 10 </li></ul></ul></ul>
  85. 85. www.investic.net Actualmente el proyecto soporta: <ul><li>Objetos en: </li><ul><ul><li>1D puntos
  86. 86. 2D imágenes
  87. 87. 3D modelos(objetos). </li></ul></ul><li>Personalizar varias acciones
  88. 88. Crear filtros personalizados
  89. 89. Autenticación de los clientes Layar
  90. 90. El proyecto también tiene implementado un frontend donde visualizar y crear POI manualmente (fase de desarrollo). Aquí es donde a nosotros, Drupal nos ha resultado más potente. </li></ul>
  91. 91. www.investic.net Para qué usamos PorPOIse? <ul><li>Transforma los datos generados por Drupal (XML) en formato JSON interpretado por Layar
  92. 92. Calcula la distancia entre los puntos y el terminal (teléfono)
  93. 93. Genera respuesta al cliente con los puntos solicitados formateados en JSON </li></ul>
  94. 94. www.investic.net DRUPAL
  95. 95. www.investic.net + módulo (Layar)
  96. 96. www.investic.net + los comercios de GMK
  97. 97. www.investic.net Requisitos de nuestro drupal <ul><li>Módulos: </li><ul><li>GMap (campo ubicación)
  98. 98. Ctools (formulario multi-step)
  99. 99. layar (módulo en desarrollo) </li></ul><li>La última versión de PorPOIse (disponible en http://code.google.com/p/porpoise/ ) </li></ul>
  100. 100. www.investic.net http://www.gipuzkoamarket.com Desarrollo que está llevando a cabo Investic para la Cámara de Gipuzkoa , enfocado al marketing online.
  101. 101. www.investic.net GipuzkoaMarket + layar (módulo en desarrollo)
  102. 102. www.investic.net XML generados
  103. 103. www.investic.net Recopilación de POI para crear fichero XML
  104. 104. www.investic.net Datos de identificación para layar
  105. 105. www.investic.net Eliminar ficheros XML almacenados
  106. 106. www.investic.net Algunos comercios geoposicionados de GMK
  107. 107. www.investic.net Y con la combinación de estos elementos obtenemos....
  108. 108. www.investic.net Capturas de la aplicación Layar
  109. 109. www.investic.net Videos, funcionamiento de Layar <ul><li>http://blip.tv/file/3283456
  110. 110. http://blip.tv/file/3283401 </li></ul>
  111. 111. www.investic.net Enlaces de interés <ul><li>http://code.google.com/p/porpoise/
  112. 112. http://www.gipuzkoamarket.com/
  113. 113. http://layar.com/
  114. 114. http://drupal.org/
  115. 115. http://www.android.com/ </li></ul>
  116. 116. www.investic.net ¿ Preguntas ?
  117. 117. www.investic.net

×