Este documento presenta ejemplos para desarrollar aplicaciones colaborativas utilizando Flex 3, Facebook Connect, BlazeDS, Spring y Java. Explica cómo integrar aplicaciones Flex con Facebook, consultar información de perfiles de usuario, visualizar fotos y amigos. También muestra cómo obtener la ubicación de usuarios y visualizarla en un mapa usando Geoplanet y Google Maps. Finalmente, describe una aplicación colaborativa que integra estos componentes.
En la siguiente presentacion se le dara a observar una variedad de informacion sobre Microsoft Frontpage como su historia, como esta compuesto entre otros.
Curso de 4 horas con con ejemplos. Bastante completo, incluye canvas, video, almacenamiento, protocols, geolocation, WebRTC, .. y muchos punteros a sitios vistosos
En la siguiente presentacion se le dara a observar una variedad de informacion sobre Microsoft Frontpage como su historia, como esta compuesto entre otros.
Curso de 4 horas con con ejemplos. Bastante completo, incluye canvas, video, almacenamiento, protocols, geolocation, WebRTC, .. y muchos punteros a sitios vistosos
¿Qué es la web 2.0?
¿Características de la web 2.0?
¿Herramientas web 2.0?
Mozilla FireFox
Google
Almacenamiento virtual
Marcadores sociales
Gestores de bibliografías
Sindicación de contenidos
Esta presentación muestra aplicaciones que son útiles para la enseñanza educativa, nos detalla el uso de softwares que pueden ser utilizados con mayor eficiencia.
Bringing GEOSS services into Practice for Beginners: GeoNode TutorialKudos S.A.S
Bringing GEOSS services into Practice for Beginners: GeoNode Tutorial
Archivo original: ftp://orion.grid.unep.ch/GEOSS_services/geonode/Geonode_tutorial.pdf
A Web Application Designed to Publish Information of Surface Manifestations o...Kudos S.A.S
The Colombian Geological Survey (SGC, for its acronym in Spanish) developed a web application for searching public information
of surface manifestations of hydrothermal systems, particularly hot springs and fumaroles.
This application was developed as a means to provide information to the general public, national industry users and researchers in
the areas of geothermal exploration, tectonics, geochemistry of hydrothermal fluids, geochemical monitoring of volcanic activity
and microbiology. Additionally, the application aims to encourage interaction and discussion of researchers on geochemistry of
volcanic and hydrothermal fluids to strengthen this research line in the SGC.
The information of the surface manifestations, made available through this application, includes general data on geographical and
geological location, in situ physicochemical features, images (pictures and videos), availability of spa infrastructure, pathways, as
well as chemical and isotopic composition of the liquid and gas phases. The main functions of the application include information
display, variables selection, and reports generation downloaded as pdf files, for general, geological and geochemical queries. The
geochemical module includes the option to plot the most common diagrams for gas and water geochemical interpretation (relative
triangular composition diagrams, Stiff, Schoeller, Piper and X-Y charts, including time series). This will be updated periodically,
with expanded coverage analysis in liquid and gas phases.
The loaded information includes individual records for 300 hot springs (and 11 fumaroles) located mainly in the Andean, Caribbean
and Pacific regions, most of them related with volcanoes. For some of these, historical records are taken from the information
review. The great diversity of chemical composition in these hot springs is expressed in their physicochemical characteristics:
highest temperature above 90 °C, pH between 1.2 and 9.7, and highest electrical conductivity above 50,000 uS/cm.
Geo Marketing, ¿Herramienta o Gadget?: Kudos S.A.S
Geo Marketing, ¿Herramienta o Gadget?: Presentación realizada por el economista Javier Carranza en el auditorio de la Universidad Nacional de Colombia el Miercoles 24 de Junio de 2009
Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecida...Kudos S.A.S
Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecidas para Internet.
(Visualization of Earthquake Data Using Google Maps and Adobe Flash)
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
Actualmente, y debido al desarrollo tecnológico de campos como la informática y la electrónica, la mayoría de las bases de datos están en formato digital, siendo este un componente electrónico, por tanto se ha desarrollado y se ofrece un amplio rango de soluciones al problema del almacenamiento de datos.
Es un diagrama para La asistencia técnica o apoyo técnico es brindada por las compañías para que sus clientes puedan hacer uso de sus productos o servicios de la manera en que fueron puestos a la venta.
3Redu: Responsabilidad, Resiliencia y Respetocdraco
¡Hola! Somos 3Redu, conformados por Juan Camilo y Cristian. Entendemos las dificultades que enfrentan muchos estudiantes al tratar de comprender conceptos matemáticos. Nuestro objetivo es brindar una solución inclusiva y accesible para todos.
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
1. Desarrollo de aplicaciones
colaborativas utilizando Flex 3,
Facebook, BlazeDs, Spring y Java
Juan Carlos Méndez
Kudos Ltda. http://gkudos.com
2. Agenda
• Ejemplos Básicos
— Hola Mundo (1 y 2): Qué es flex? /
Animación Simple con flex
— Ejemplo 1: Integrando aplicaciones Flex
con Facebook
— Ejemplo 2: Consultando la Información
del Perfil de Usuario
Página 2
21/08/2009
http://www.gkudos.com
3. Agenda
• Ejemplos Básicos
— Ejemplo 3: Visualizando Fotos de
Facebook
— Ejemplo 4: Consultar Red Social del
Usuario
— Ejemplo 5: Cambiando Propiedades
Visuales con CSS
— Ejemplo 6: Visualizar Ubicación
Geográfica de los Usuarios
Página 3
21/08/2009
http://www.gkudos.com
4. Agenda
• Ejemplos Avanzados: Creando una
Aplicación Colaborativa utilizando
— Flex 3, Google Maps
— Facebook Connect
— BlazeDS, Java, Spring Framework, JMS,
Tomcat
— Postgresql / Postgis
— Google Translator, Flickr, Panoramio…
Página 4
21/08/2009
http://www.gkudos.com
5. Sobre el Autor
• Juan Carlos Méndez
• Ingeniero de Sistemas
• Especialista en Telemática y Negocios
por Internet
• Actualmente Arquitecto de Software
en Kudos Ltda.
http://www.gkudos.com
Página 5
21/08/2009
http://www.gkudos.com
7. Ejemplos Básicos
• Qué es Flex?
Qué
— Flex es un marco de trabajo
gratuito de código abierto para
crear aplicaciones web
interactivas utilizando el plugin
de Flash.
— Ofrece un lenguaje basado en
estándares moderno y un
modelo de programación que
admite los patrones de diseño
habituales.
Página 7
21/08/2009
http://www.gkudos.com
8. Ejemplos Básicos
• Qué es Flex?
Qué
— MXML es un lenguaje declarativo basado en
XML. Se utiliza para describir el aspecto y
comportamiento de la interfaz de usuario
— ActionScript 3, es un potente lenguaje de
programación orientado a objetos, se utiliza
para crear la lógica de clientes.
— Flex incorpora una biblioteca con más de 100
componentes de interfaz de usuario extensibles
para crear RIA’s (Rich Internet Applications
Página 8
21/08/2009
http://www.gkudos.com
9. Ejemplos Básicos
• Descarga de Código Fuente:
http://flashcamp.gkudos.com/facebo
ok/flash_camp_2009_source.rar
• Próximamente Más información en
http://blog.gkudos.com
Página 9
21/08/2009
http://www.gkudos.com
14. Ejemplos Básicos 1
• Autenticar aplicaciones Flex con
Facebook * Pasos a Seguir:
1. Registrarse en Facebook
2. Adicionar la aplicación para
desarrolladores:
http://www.facebook.com/developers/
* Tomado de “Create your first Facebook application with Flex”
Flex”
http://www.adobe.com/devnet/facebook/articles/build_your_first
_facebook_app_print.html
Página 14
21/08/2009
http://www.gkudos.com
15. Ejemplos Básicos 1
3. Autorizar el acceso de la aplicación
“facebook developers” al perfil del
facebook developers
usuario
Página 15
21/08/2009
http://www.gkudos.com
16. Ejemplos Básicos 1
4. Crear una nueva aplicación
Página 16
21/08/2009
http://www.gkudos.com
17. Ejemplos Básicos 1
4. Crear una nueva aplicación
Página 17
21/08/2009
http://www.gkudos.com
18. Ejemplos Básicos 1
5. En la opción “Basic” revisar los datos de
“Application id”, “API Key” y “Secret”
Página 18
21/08/2009
http://www.gkudos.com
19. Ejemplos Básicos 1
6. crear un xml con los datos del key de
facebook. Ejemplo api_key_secret.xml
api_key_secret.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<xml> <!-- Facebook Keys -->
<api_key>YOUR API KEY
YOUR KEY</api_key>
<secret>YOUR SECRET KEY
YOUR KEY</secret>
</xml>
Página 19
21/08/2009
http://www.gkudos.com
20. Ejemplos Básicos 1
7. Descargar API de Facebook para Flex:
facebook-actionscript-api:
facebook-actionscript-api:
Actionscript 3.0 Client for the Facebook
Platform API
http://code.google.com/p/facebook-
actionscript-api/
Página 20
21/08/2009
http://www.gkudos.com
21. Ejemplos Básicos 1
8. Crear Proyecto Flex e Incluir Librería
de Facebook
(Facebook_library_v3.2_flex.swc):
Página 21
21/08/2009
http://www.gkudos.com
26. Ejemplos Básicos 2
• Consultando la Información del Perfil
de Usuario:
— Archivo Sample2.mxml
— Se consultan los álbumes de fotos que
tiene el usuario
Página 26
21/08/2009
http://www.gkudos.com
40. Ejemplos Básicos 6
Visualizar Ubicación Geográfica de los
Usuarios
• Objetivos:
— Consultar ubicación del usuario en facebook
— Obtener coordenada (georreferenciar) el lugar
donde se encuentra localizado el usuario
utilizando Yahoo Geoplanet
— Visualizar coordenadas utilizando Google Maps
Flash Api
Página 40
21/08/2009
http://www.gkudos.com
42. Ejemplos Básicos 6
• Archivo Sample6.mxml
• Obtener Información de Ubicación del
usuario desde Facebook
Página 42
21/08/2009
http://www.gkudos.com
43. Ejemplos Básicos 6
• Facebook Retorna el Nombre del Lugar
(Ejm: Bogotá, Colombia)
• Pregunta: Cómo obtener la coordenada
(latitud, longitud) del lugar para poder
visualizarlo en el mapa?
Página 43
21/08/2009
http://www.gkudos.com
44. Ejemplos Básicos 6
• Yahoo Geoplanet: Conjunto de servicios web para
georreferenciación de información
http://developer.yahoo.com/geo/geoplanet/
A partir del nombre de un lugar retorna su
coordenada (latitud y longitud). Ejemplo:
Página 44
21/08/2009
http://www.gkudos.com
48. Ejemplos Básicos 6
• Qué es JSON?
— Wikipedia: acrónimo de "JavaScript
J S
Object Notation", es un formato ligero
para el intercambio de datos. JSON es un
subconjunto de la notación literal de
objetos de JavaScript que no requiere el
uso de XML.
— En general, la transferencia de datos en
formato JSON consume menos espacio
que su XML equivalente
Página 48
21/08/2009
http://www.gkudos.com
50. Ejemplos Básicos 6
• Ejemplo de
Respuesta
Geoplanet
Utilizando
XML
Página 50
21/08/2009
http://www.gkudos.com
51. Ejemplos Básicos 6
• Integrar Google Maps en Flex:
— Ver archivo Sample6.mxml
— Ver “Visualización de Información de
Terremotos Utilizando Adobe Flex y
Google Maps” (FlexCamp 2008)
http://gkudos.com/web/guest/portfolio/d
emos/equake
Página 51
21/08/2009
http://www.gkudos.com
54. Ejemplos Avanzados
Desarrollo de aplicaciones
colaborativas utilizando Flex 3,
Facebook, BlazeDs, Spring, Java...
55. Ejemplos Avanzados
Objetivos:
• Crear una aplicación colaborativa en
tiempo real.
• Desarrollar una GUI (interfaz gráfica de
usuario) unificada que permita
interactuar con múltiples sistemas de
forma transparente para el usuario
final.
Página 55
21/08/2009
http://www.gkudos.com
66. Referencias
• Flex
— facebook-actionscript-api: Actionscript
3.0 Client for the Facebook Platform API
http://code.google.com/p/facebook-
actionscript-api/
— Create your first Facebook application
with Flex
http://www.adobe.com/devnet/faceboo
k/articles/build_your_first_facebook_app_
print.html
Página 66
21/08/2009
http://www.gkudos.com
67. Referencias
• Flex
— Deliver rich, social experiences on the
web
http://www.adobe.com/devnet/faceboo
k/
— Flex / Facebook Integration Samples
http://www.adobe.com/devnet/faceboo
k/samples/index.html
— Swfobject
http://code.google.com/p/swfobject/
Página 67
21/08/2009
http://www.gkudos.com
68. Referencias
• Flex
— Integración de Adobe Flex y Google Maps:
Aplicaciones Geográficas Enriquecidas para
Internet
http://gkudos.com/web/guest/portfolio/demos/
equake
— Flex 3 Language Reference
http://livedocs.adobe.com/flex/3/langref
— Tour de Flex (components, samples)
http://www.adobe.com/devnet/flex/tourdeflex/
Página 68
21/08/2009
http://www.gkudos.com
69. Referencias
• Java
— Developing Web Applications With
JavaServer Pages 2.0:
http://java.sun.com/developer/technical
Articles/javaserverpages/JSP20/
— Social Java, Random Friend Facebook
Application
http://socialjava.blogspot.com/2009/01/f
acebook-facebook-connect-example-
using.html
Página 69
21/08/2009
http://www.gkudos.com
70. Referencias
• BlazeDs
— BlazeDS
http://opensource.adobe.com/wiki/displ
ay/blazeds/BlazeDS/
— Google Maps Collaboration Using
Google’s New ActionScript API, Flex, and
BlazeDS
http://coenraets.org/blog/2008/05/googl
e-maps-collaboration-using-googles-new-
actionscript-api-and-blazeds/
Página 70
21/08/2009
http://www.gkudos.com
71. Referencias
• Spring Framework
— http://www.springsource.org/
— Spring BlazeDS Integration
http://www.springsource.org/spring-flex
— Building and Running the Spring BlazeDS
Integration Samples
http://static.springsource.org/spring-
flex/docs/1.0.x/reference/html/ch06.html
Página 71
21/08/2009
http://www.gkudos.com
72. Referencias
• Facebook
— Facebook API
http://wiki.developers.facebook.com/ind
ex.php/API
— Facebook Developers
http://developers.facebook.com/
— How Connect Authentication Works
http://wiki.developers.facebook.com/ind
ex.php/How_Connect_Authentication_W
orks
Página 72
21/08/2009
http://www.gkudos.com
73. Referencias
• Facebook
— Authorizing Applications
http://wiki.developers.facebook.com/index.
php/Authorizing_Applications
— Authenticating Users with Facebook Connect
http://wiki.developers.facebook.com/index.
php/Authenticating_Users_on_Facebook
— Anatomy of a Facebook Connect Site
http://wiki.developers.facebook.com/index.
php/Anatomy_of_a_Facebook_Connect_Site
Página 73
21/08/2009
http://www.gkudos.com
74. Referencias
• Facebook
— Facebook Connect: Connect/Setting Up
Your Site
http://wiki.developers.facebook.com/ind
ex.php/Trying_Out_Facebook_Connect
— The Run Around (Facebook Connect
Sample)
http://wiki.developers.facebook.com/ind
ex.php/The_Run_Around
Página 74
21/08/2009
http://www.gkudos.com
75. Referencias
• Otros
— Introducción a JMS (Java Message Service)
http://www.programacion.net/java/articulo/jms/
— Introduction to Spatial Data Management with
Postgis
http://www.mapbender.org/presentations/Spati
al_Data_Management_Arnulf_Christl/Spatial_Dat
a_Management_Arnulf_Christl.pdf
— Building a Spatial Database in PostgreSQL
http://www.slideshare.net/dersteppenwolf/buildi
ng-a-spatial-database-in-postgresql
Página 75
21/08/2009
http://www.gkudos.com
76. Gracias por su tiempo
Más información en
http://gkudos.com
http://blog.gkudos.com