SlideShare uma empresa Scribd logo
1 de 76
Baixar para ler offline
Desarrollo de aplicaciones
 colaborativas utilizando Flex 3,
Facebook, BlazeDs, Spring y Java

         Juan Carlos Méndez


       Kudos Ltda. http://gkudos.com
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
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
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
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
Ejemplos Básicos
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
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
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
Ejemplos Básicos
• Animación Simple (I)




                                       Página 10
                                       21/08/2009
               http://www.gkudos.com
Ejemplos Básicos




                            Página 11
                            21/08/2009
    http://www.gkudos.com
Ejemplos Básicos
• Animación Simple (II)




                                       Página 12
                                       21/08/2009
               http://www.gkudos.com
Ejemplos Básicos
• Arquitectura general de Aplicaciones
  Flash / Facebook




                                      Página 13
                                      21/08/2009
              http://www.gkudos.com
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
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
Ejemplos Básicos 1
4. Crear una nueva aplicación




                                      Página 16
                                      21/08/2009
              http://www.gkudos.com
Ejemplos Básicos 1
4. Crear una nueva aplicación




                                      Página 17
                                      21/08/2009
              http://www.gkudos.com
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
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
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
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
Ejemplos Básicos 1
— Crear aplicación flex (Ver archivo
  Sample1.mxml)
— Cargar archivo XML
— Iniciar sesión en Facebook




                                       Página 22
                                       21/08/2009
               http://www.gkudos.com
Página 23
                        21/08/2009
http://www.gkudos.com
Página 24
                        21/08/2009
http://www.gkudos.com
Ejemplos Básicos 1
• Resultado:
• http://flashcamp.gkudos.com/facebo
  ok/Sample1.html




                                      Página 25
                                      21/08/2009
              http://www.gkudos.com
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
Página 27
                        21/08/2009
http://www.gkudos.com
Ejemplos Básicos 2
• Resultado:
• http://flashcamp.gkudos.com/facebo
  ok/Sample2.html




                                      Página 28
                                      21/08/2009
              http://www.gkudos.com
Ejemplos Básicos 3
Visualizando Fotos de Facebook
• Archivo Sample3.mxml




                                      Página 29
                                      21/08/2009
              http://www.gkudos.com
Página 30
                        21/08/2009
http://www.gkudos.com
Ejemplos Básicos 3
• Resultado
  http://flashcamp.gkudos.com/facebook/Sample3.
  html




                                              Página 31
                                              21/08/2009
                   http://www.gkudos.com
Ejemplos Básicos 4
• Consultar Red Social del Usuario
  — Archivo Sample4.mxml
  — Cargar Lista de Amigos




                                        Página 32
                                        21/08/2009
                http://www.gkudos.com
Ejemplos Básicos 4




                             Página 33
                             21/08/2009
     http://www.gkudos.com
Ejemplos Básicos 4
• Resultado
• http://flashcamp.gkudos.com/facebo
  ok/Sample4.html




                                      Página 34
                                      21/08/2009
              http://www.gkudos.com
Página 35
                        21/08/2009
http://www.gkudos.com
Ejemplos Básicos 5
• Cambiando Propiedades Visuales con
  CSS
• Archivos: Sample5.mxml, styles.css
• Importar CSS




                                      Página 36
                                      21/08/2009
              http://www.gkudos.com
Ejemplos
 Básicos 5
• Ejemplo de CSS
  para Flex




                                      Página 37
                                      21/08/2009
              http://www.gkudos.com
Ejemplos Básicos 5
• Resultado:
• http://flashcamp.gkudos.com/facebo
  ok/Sample5.html




                                      Página 38
                                      21/08/2009
              http://www.gkudos.com
Página 39
                        21/08/2009
http://www.gkudos.com
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
Página 41
                        21/08/2009
http://www.gkudos.com
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
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
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
Ejemplos Básicos 6


• Utilizando Geoplanet desde Flex:
• Archivo samples/LocationLoader.as




                                      Página 45
                                      21/08/2009
              http://www.gkudos.com
Ejemplos Básicos 6




                             Página 46
                             21/08/2009
     http://www.gkudos.com
Ejemplos Básicos 6




                             Página 47
                             21/08/2009
     http://www.gkudos.com
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
Ejemplos Básicos 6
• Ejemplo de
  Respuesta
  Geoplanet
  Utilizando
  JSON




                                       Página 49
                                       21/08/2009
               http://www.gkudos.com
Ejemplos Básicos 6
• Ejemplo de
  Respuesta
  Geoplanet
  Utilizando
  XML




                                       Página 50
                                       21/08/2009
               http://www.gkudos.com
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
Ejemplos Básicos 6


• Resultado
  — http://flashcamp.gkudos.com/facebook/
    Sample6.html




                                       Página 52
                                       21/08/2009
               http://www.gkudos.com
Página 53
                        21/08/2009
http://www.gkudos.com
Ejemplos Avanzados

   Desarrollo de aplicaciones
  colaborativas utilizando Flex 3,
Facebook, BlazeDs, Spring, Java...
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
Ejemplos Avanzados



• Demo: Aplicación Colaborativa
  Basada en Flex
http://flashcamp.gkudos.com/facebo
  ok/


                                     Página 56
                                     21/08/2009
             http://www.gkudos.com
Página 57
                        21/08/2009
http://www.gkudos.com
Ejemplos Avanzados
• Componentes Utilizados en el Demo:
  —   Adobe Flex
  —   Facebook Connect
  —   BlazeDS, Java, Spring, Tomcat, JMS
  —   Postgresql, Postgis
  —   Google Translator, Flicrk, Panoramio
  —   Google Maps Flash API


                                             Página 58
                                             21/08/2009
                   http://www.gkudos.com
Ejemplos Avanzados

   Arquitectura General
Página 60
                        21/08/2009
http://www.gkudos.com
Publicación de Información en
          Facebook




                                  Página 61
                                  21/08/2009
          http://www.gkudos.com
Procesamiento de
Información Geográfica
   Fotografías de Flickr y
        Panoramio
Página 63
                        21/08/2009
http://www.gkudos.com
• Operaciones
  Espaciales




                                    Página 64
                                    21/08/2009
            http://www.gkudos.com
Referencias




 Enlaces seleccionados sobre
Facebook, Flex, Spring, Java…
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
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
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
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
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
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
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
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
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
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
Gracias por su tiempo

    Más información en
     http://gkudos.com
  http://blog.gkudos.com

Mais conteúdo relacionado

Destaque

REGIONES NATURALES DE COLOMBIA
REGIONES NATURALES DE COLOMBIAREGIONES NATURALES DE COLOMBIA
REGIONES NATURALES DE COLOMBIAolgaluciaavilan
 
Proyección Valencia (14 Enero 2015)
Proyección Valencia (14 Enero 2015) Proyección Valencia (14 Enero 2015)
Proyección Valencia (14 Enero 2015) Rankia
 
Monumento Pilotos
Monumento PilotosMonumento Pilotos
Monumento Pilotosguest5dad07
 
Asamblea2012
Asamblea2012Asamblea2012
Asamblea2012Ampas
 
Dossier Networking Talent Day 2015
Dossier Networking Talent Day 2015Dossier Networking Talent Day 2015
Dossier Networking Talent Day 2015Juli Boned
 
Los fundamentos del mundo clásico
Los fundamentos del mundo clásicoLos fundamentos del mundo clásico
Los fundamentos del mundo clásicoDseiz
 
Social business · El futuro de la cooperación empresarial
Social business · El futuro de la cooperación empresarialSocial business · El futuro de la cooperación empresarial
Social business · El futuro de la cooperación empresarialSalvador A. Pastor
 
Semana 2: Práctica 2. Portafolio de trabajo
Semana 2: Práctica 2. Portafolio de trabajoSemana 2: Práctica 2. Portafolio de trabajo
Semana 2: Práctica 2. Portafolio de trabajoIgnacio Monclús López
 
Asp.Net Session And Query String
Asp.Net Session And Query StringAsp.Net Session And Query String
Asp.Net Session And Query StringJuan Pablo Ibañez
 
Pres
PresPres
Presesmi
 

Destaque (20)

Agresividadw
AgresividadwAgresividadw
Agresividadw
 
Lancha
Lancha Lancha
Lancha
 
REGIONES NATURALES DE COLOMBIA
REGIONES NATURALES DE COLOMBIAREGIONES NATURALES DE COLOMBIA
REGIONES NATURALES DE COLOMBIA
 
Maquillaje
MaquillajeMaquillaje
Maquillaje
 
Alimentac
AlimentacAlimentac
Alimentac
 
Proyección Valencia (14 Enero 2015)
Proyección Valencia (14 Enero 2015) Proyección Valencia (14 Enero 2015)
Proyección Valencia (14 Enero 2015)
 
Monumento Pilotos
Monumento PilotosMonumento Pilotos
Monumento Pilotos
 
Asamblea2012
Asamblea2012Asamblea2012
Asamblea2012
 
Dossier Networking Talent Day 2015
Dossier Networking Talent Day 2015Dossier Networking Talent Day 2015
Dossier Networking Talent Day 2015
 
Los fundamentos del mundo clásico
Los fundamentos del mundo clásicoLos fundamentos del mundo clásico
Los fundamentos del mundo clásico
 
Ciencia 17
Ciencia 17Ciencia 17
Ciencia 17
 
Social business · El futuro de la cooperación empresarial
Social business · El futuro de la cooperación empresarialSocial business · El futuro de la cooperación empresarial
Social business · El futuro de la cooperación empresarial
 
Semana 2: Práctica 2. Portafolio de trabajo
Semana 2: Práctica 2. Portafolio de trabajoSemana 2: Práctica 2. Portafolio de trabajo
Semana 2: Práctica 2. Portafolio de trabajo
 
Dijimos que ......
Dijimos que ......Dijimos que ......
Dijimos que ......
 
Web 2.0c
Web 2.0cWeb 2.0c
Web 2.0c
 
Asp.Net Session And Query String
Asp.Net Session And Query StringAsp.Net Session And Query String
Asp.Net Session And Query String
 
Manual moodle
Manual moodleManual moodle
Manual moodle
 
Pres
PresPres
Pres
 
Ciencia 20
Ciencia 20Ciencia 20
Ciencia 20
 
Ciencia 9
Ciencia 9Ciencia 9
Ciencia 9
 

Semelhante a Kudos Flashcamp Bogota 2009

Del Internet a su Escritorio
Del Internet a su EscritorioDel Internet a su Escritorio
Del Internet a su EscritorioEric Menjivar
 
Aplicaciones informáticas Blanquita
Aplicaciones informáticas Blanquita Aplicaciones informáticas Blanquita
Aplicaciones informáticas Blanquita Blnquita Castillo
 
Sesion07_DW.pdf
Sesion07_DW.pdfSesion07_DW.pdf
Sesion07_DW.pdfUSAT
 
Herramientas colaborativas Web 2.0
Herramientas colaborativas Web 2.0Herramientas colaborativas Web 2.0
Herramientas colaborativas Web 2.0CenDocIEU
 
U3 a1 vaqueroe_marco
U3 a1 vaqueroe_marcoU3 a1 vaqueroe_marco
U3 a1 vaqueroe_marcoMarcoVaquero1
 
Lecturas de paginas web
Lecturas de paginas webLecturas de paginas web
Lecturas de paginas webStefania1203
 
Presentacion 3
Presentacion 3Presentacion 3
Presentacion 3ArlynLeon
 
Aplicacion web presentacion
Aplicacion web   presentacionAplicacion web   presentacion
Aplicacion web presentacionalumno17ja
 
Presentacion de aplicaciones web +sistemas oprativos+
Presentacion de aplicaciones web +sistemas oprativos+Presentacion de aplicaciones web +sistemas oprativos+
Presentacion de aplicaciones web +sistemas oprativos+Christian García
 
Awa12 anahi santiago
Awa12 anahi santiagoAwa12 anahi santiago
Awa12 anahi santiagoAnahiSantiago
 
Trabajo practico numero 2
Trabajo practico numero 2Trabajo practico numero 2
Trabajo practico numero 2delfipadilla
 
Trabajo practico numero 2
Trabajo practico numero 2Trabajo practico numero 2
Trabajo practico numero 2delfipadilla
 
Trabajo practico numero_2
Trabajo practico numero_2Trabajo practico numero_2
Trabajo practico numero_2rocioSM123
 
Introducción al Desarrollo Web Html y CSS.pdf
Introducción al Desarrollo Web Html y CSS.pdfIntroducción al Desarrollo Web Html y CSS.pdf
Introducción al Desarrollo Web Html y CSS.pdfCROWD1 GO FOR IT
 
Trabajo de computacion todo lo aprendido
Trabajo de computacion todo lo aprendidoTrabajo de computacion todo lo aprendido
Trabajo de computacion todo lo aprendidobrianmogrovejo
 
Trabajo Practico N°
Trabajo Practico N°Trabajo Practico N°
Trabajo Practico N°Cata Zerda
 

Semelhante a Kudos Flashcamp Bogota 2009 (20)

Del Internet a su Escritorio
Del Internet a su EscritorioDel Internet a su Escritorio
Del Internet a su Escritorio
 
Aplicaciones informáticas Blanquita
Aplicaciones informáticas Blanquita Aplicaciones informáticas Blanquita
Aplicaciones informáticas Blanquita
 
Sesion07_DW.pdf
Sesion07_DW.pdfSesion07_DW.pdf
Sesion07_DW.pdf
 
Herramientas colaborativas Web 2.0
Herramientas colaborativas Web 2.0Herramientas colaborativas Web 2.0
Herramientas colaborativas Web 2.0
 
U3 a1 vaqueroe_marco
U3 a1 vaqueroe_marcoU3 a1 vaqueroe_marco
U3 a1 vaqueroe_marco
 
Lecturas de paginas web
Lecturas de paginas webLecturas de paginas web
Lecturas de paginas web
 
Presentacion 3
Presentacion 3Presentacion 3
Presentacion 3
 
Aplicacion web presentacion
Aplicacion web   presentacionAplicacion web   presentacion
Aplicacion web presentacion
 
Google site
Google siteGoogle site
Google site
 
Google site
Google siteGoogle site
Google site
 
Google site
Google siteGoogle site
Google site
 
Presentacion de aplicaciones web +sistemas oprativos+
Presentacion de aplicaciones web +sistemas oprativos+Presentacion de aplicaciones web +sistemas oprativos+
Presentacion de aplicaciones web +sistemas oprativos+
 
Awa12 anahi santiago
Awa12 anahi santiagoAwa12 anahi santiago
Awa12 anahi santiago
 
Trabajo practico numero 2
Trabajo practico numero 2Trabajo practico numero 2
Trabajo practico numero 2
 
Trabajo practico numero 2
Trabajo practico numero 2Trabajo practico numero 2
Trabajo practico numero 2
 
Trabajo practico numero_2
Trabajo practico numero_2Trabajo practico numero_2
Trabajo practico numero_2
 
Trabajo practico nº2
Trabajo practico nº2Trabajo practico nº2
Trabajo practico nº2
 
Introducción al Desarrollo Web Html y CSS.pdf
Introducción al Desarrollo Web Html y CSS.pdfIntroducción al Desarrollo Web Html y CSS.pdf
Introducción al Desarrollo Web Html y CSS.pdf
 
Trabajo de computacion todo lo aprendido
Trabajo de computacion todo lo aprendidoTrabajo de computacion todo lo aprendido
Trabajo de computacion todo lo aprendido
 
Trabajo Practico N°
Trabajo Practico N°Trabajo Practico N°
Trabajo Practico N°
 

Mais de Kudos S.A.S

AWS - Ingrese a la era de las bases de datos personalizadas: Encuentre la bas...
AWS - Ingrese a la era de las bases de datos personalizadas: Encuentre la bas...AWS - Ingrese a la era de las bases de datos personalizadas: Encuentre la bas...
AWS - Ingrese a la era de las bases de datos personalizadas: Encuentre la bas...Kudos S.A.S
 
Miradas al exterior.
Miradas al exterior. Miradas al exterior.
Miradas al exterior. Kudos S.A.S
 
Bringing GEOSS services into Practice for Beginners: GeoNode Tutorial
Bringing GEOSS services into Practice for Beginners: GeoNode TutorialBringing GEOSS services into Practice for Beginners: GeoNode Tutorial
Bringing GEOSS services into Practice for Beginners: GeoNode TutorialKudos S.A.S
 
Uso de Tecnologías Geoespaciales y Big Data para mejorar los procesos de actu...
Uso de Tecnologías Geoespaciales y Big Data para mejorar los procesos de actu...Uso de Tecnologías Geoespaciales y Big Data para mejorar los procesos de actu...
Uso de Tecnologías Geoespaciales y Big Data para mejorar los procesos de actu...Kudos S.A.S
 
Using python to analyze spatial data
Using python to analyze spatial dataUsing python to analyze spatial data
Using python to analyze spatial dataKudos S.A.S
 
Proyecto Mapa Nacional de Amenaza Relativa por Movimientos en Masa
Proyecto Mapa Nacional de Amenaza Relativa por Movimientos en MasaProyecto Mapa Nacional de Amenaza Relativa por Movimientos en Masa
Proyecto Mapa Nacional de Amenaza Relativa por Movimientos en MasaKudos S.A.S
 
Presentación software libre v2
Presentación software libre v2Presentación software libre v2
Presentación software libre v2Kudos S.A.S
 
A Web Application Designed to Publish Information of Surface Manifestations o...
A Web Application Designed to Publish Information of Surface Manifestations o...A Web Application Designed to Publish Information of Surface Manifestations o...
A Web Application Designed to Publish Information of Surface Manifestations o...Kudos S.A.S
 
Portafolio Empresarial Egresados Universidad Nacional de Colombia 2013
Portafolio Empresarial Egresados Universidad Nacional de Colombia 2013Portafolio Empresarial Egresados Universidad Nacional de Colombia 2013
Portafolio Empresarial Egresados Universidad Nacional de Colombia 2013Kudos S.A.S
 
Conferencias ACIS: Análisis y visualización de información georreferenciada u...
Conferencias ACIS: Análisis y visualización de información georreferenciada u...Conferencias ACIS: Análisis y visualización de información georreferenciada u...
Conferencias ACIS: Análisis y visualización de información georreferenciada u...Kudos S.A.S
 
Implementación de Fábricas de Software en el Sector Público Colombiano
Implementación de Fábricas de Software en el Sector Público ColombianoImplementación de Fábricas de Software en el Sector Público Colombiano
Implementación de Fábricas de Software en el Sector Público ColombianoKudos S.A.S
 
Presentacion SNC : Sistema Nacional Catastral de Colombia
Presentacion SNC : Sistema Nacional Catastral de ColombiaPresentacion SNC : Sistema Nacional Catastral de Colombia
Presentacion SNC : Sistema Nacional Catastral de ColombiaKudos S.A.S
 
Analizando y visualizando información geoespacial utilizando cloud computing
Analizando y visualizando información geoespacial utilizando cloud computingAnalizando y visualizando información geoespacial utilizando cloud computing
Analizando y visualizando información geoespacial utilizando cloud computingKudos S.A.S
 
Manejo de información raster_en_post_gis-2.0-
Manejo de información raster_en_post_gis-2.0-Manejo de información raster_en_post_gis-2.0-
Manejo de información raster_en_post_gis-2.0-Kudos S.A.S
 
Crowd-sourcing free and open geographic data: information poverty solutions f...
Crowd-sourcing free and open geographic data: information poverty solutions f...Crowd-sourcing free and open geographic data: information poverty solutions f...
Crowd-sourcing free and open geographic data: information poverty solutions f...Kudos S.A.S
 
Software libre y Sistemas de Información Geográfica
Software libre y Sistemas de Información GeográficaSoftware libre y Sistemas de Información Geográfica
Software libre y Sistemas de Información GeográficaKudos S.A.S
 
Modelamiento en Web de Geoinformación de la Amazonía Colombiana con el uso de...
Modelamiento en Web de Geoinformación de la Amazonía Colombiana con el uso de...Modelamiento en Web de Geoinformación de la Amazonía Colombiana con el uso de...
Modelamiento en Web de Geoinformación de la Amazonía Colombiana con el uso de...Kudos S.A.S
 
Geo Marketing, ¿Herramienta o Gadget?:
Geo Marketing, ¿Herramienta o Gadget?: Geo Marketing, ¿Herramienta o Gadget?:
Geo Marketing, ¿Herramienta o Gadget?: Kudos S.A.S
 
Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecida...
Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecida...Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecida...
Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecida...Kudos S.A.S
 
Fundamentos VB - VBA
Fundamentos VB - VBAFundamentos VB - VBA
Fundamentos VB - VBAKudos S.A.S
 

Mais de Kudos S.A.S (20)

AWS - Ingrese a la era de las bases de datos personalizadas: Encuentre la bas...
AWS - Ingrese a la era de las bases de datos personalizadas: Encuentre la bas...AWS - Ingrese a la era de las bases de datos personalizadas: Encuentre la bas...
AWS - Ingrese a la era de las bases de datos personalizadas: Encuentre la bas...
 
Miradas al exterior.
Miradas al exterior. Miradas al exterior.
Miradas al exterior.
 
Bringing GEOSS services into Practice for Beginners: GeoNode Tutorial
Bringing GEOSS services into Practice for Beginners: GeoNode TutorialBringing GEOSS services into Practice for Beginners: GeoNode Tutorial
Bringing GEOSS services into Practice for Beginners: GeoNode Tutorial
 
Uso de Tecnologías Geoespaciales y Big Data para mejorar los procesos de actu...
Uso de Tecnologías Geoespaciales y Big Data para mejorar los procesos de actu...Uso de Tecnologías Geoespaciales y Big Data para mejorar los procesos de actu...
Uso de Tecnologías Geoespaciales y Big Data para mejorar los procesos de actu...
 
Using python to analyze spatial data
Using python to analyze spatial dataUsing python to analyze spatial data
Using python to analyze spatial data
 
Proyecto Mapa Nacional de Amenaza Relativa por Movimientos en Masa
Proyecto Mapa Nacional de Amenaza Relativa por Movimientos en MasaProyecto Mapa Nacional de Amenaza Relativa por Movimientos en Masa
Proyecto Mapa Nacional de Amenaza Relativa por Movimientos en Masa
 
Presentación software libre v2
Presentación software libre v2Presentación software libre v2
Presentación software libre v2
 
A Web Application Designed to Publish Information of Surface Manifestations o...
A Web Application Designed to Publish Information of Surface Manifestations o...A Web Application Designed to Publish Information of Surface Manifestations o...
A Web Application Designed to Publish Information of Surface Manifestations o...
 
Portafolio Empresarial Egresados Universidad Nacional de Colombia 2013
Portafolio Empresarial Egresados Universidad Nacional de Colombia 2013Portafolio Empresarial Egresados Universidad Nacional de Colombia 2013
Portafolio Empresarial Egresados Universidad Nacional de Colombia 2013
 
Conferencias ACIS: Análisis y visualización de información georreferenciada u...
Conferencias ACIS: Análisis y visualización de información georreferenciada u...Conferencias ACIS: Análisis y visualización de información georreferenciada u...
Conferencias ACIS: Análisis y visualización de información georreferenciada u...
 
Implementación de Fábricas de Software en el Sector Público Colombiano
Implementación de Fábricas de Software en el Sector Público ColombianoImplementación de Fábricas de Software en el Sector Público Colombiano
Implementación de Fábricas de Software en el Sector Público Colombiano
 
Presentacion SNC : Sistema Nacional Catastral de Colombia
Presentacion SNC : Sistema Nacional Catastral de ColombiaPresentacion SNC : Sistema Nacional Catastral de Colombia
Presentacion SNC : Sistema Nacional Catastral de Colombia
 
Analizando y visualizando información geoespacial utilizando cloud computing
Analizando y visualizando información geoespacial utilizando cloud computingAnalizando y visualizando información geoespacial utilizando cloud computing
Analizando y visualizando información geoespacial utilizando cloud computing
 
Manejo de información raster_en_post_gis-2.0-
Manejo de información raster_en_post_gis-2.0-Manejo de información raster_en_post_gis-2.0-
Manejo de información raster_en_post_gis-2.0-
 
Crowd-sourcing free and open geographic data: information poverty solutions f...
Crowd-sourcing free and open geographic data: information poverty solutions f...Crowd-sourcing free and open geographic data: information poverty solutions f...
Crowd-sourcing free and open geographic data: information poverty solutions f...
 
Software libre y Sistemas de Información Geográfica
Software libre y Sistemas de Información GeográficaSoftware libre y Sistemas de Información Geográfica
Software libre y Sistemas de Información Geográfica
 
Modelamiento en Web de Geoinformación de la Amazonía Colombiana con el uso de...
Modelamiento en Web de Geoinformación de la Amazonía Colombiana con el uso de...Modelamiento en Web de Geoinformación de la Amazonía Colombiana con el uso de...
Modelamiento en Web de Geoinformación de la Amazonía Colombiana con el uso de...
 
Geo Marketing, ¿Herramienta o Gadget?:
Geo Marketing, ¿Herramienta o Gadget?: Geo Marketing, ¿Herramienta o Gadget?:
Geo Marketing, ¿Herramienta o Gadget?:
 
Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecida...
Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecida...Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecida...
Integración de Adobe Flex y Google Maps: Aplicaciones Geográficas Enriquecida...
 
Fundamentos VB - VBA
Fundamentos VB - VBAFundamentos VB - VBA
Fundamentos VB - VBA
 

Último

Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....Aaron Betancourt
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...OLGAMILENAMONTAEZNIO
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2montoyagabriela340
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx Emialexsolar
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.marianarodriguezc797
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfangelinebocanegra1
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfcastrodanna185
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSLincangoKevin
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 

Último (20)

Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2
 
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura SilvaBEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx E
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdf
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdf
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 

Kudos Flashcamp Bogota 2009

  • 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
  • 10. Ejemplos Básicos • Animación Simple (I) Página 10 21/08/2009 http://www.gkudos.com
  • 11. Ejemplos Básicos Página 11 21/08/2009 http://www.gkudos.com
  • 12. Ejemplos Básicos • Animación Simple (II) Página 12 21/08/2009 http://www.gkudos.com
  • 13. Ejemplos Básicos • Arquitectura general de Aplicaciones Flash / Facebook Página 13 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
  • 22. Ejemplos Básicos 1 — Crear aplicación flex (Ver archivo Sample1.mxml) — Cargar archivo XML — Iniciar sesión en Facebook Página 22 21/08/2009 http://www.gkudos.com
  • 23. Página 23 21/08/2009 http://www.gkudos.com
  • 24. Página 24 21/08/2009 http://www.gkudos.com
  • 25. Ejemplos Básicos 1 • Resultado: • http://flashcamp.gkudos.com/facebo ok/Sample1.html Página 25 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
  • 27. Página 27 21/08/2009 http://www.gkudos.com
  • 28. Ejemplos Básicos 2 • Resultado: • http://flashcamp.gkudos.com/facebo ok/Sample2.html Página 28 21/08/2009 http://www.gkudos.com
  • 29. Ejemplos Básicos 3 Visualizando Fotos de Facebook • Archivo Sample3.mxml Página 29 21/08/2009 http://www.gkudos.com
  • 30. Página 30 21/08/2009 http://www.gkudos.com
  • 31. Ejemplos Básicos 3 • Resultado http://flashcamp.gkudos.com/facebook/Sample3. html Página 31 21/08/2009 http://www.gkudos.com
  • 32. Ejemplos Básicos 4 • Consultar Red Social del Usuario — Archivo Sample4.mxml — Cargar Lista de Amigos Página 32 21/08/2009 http://www.gkudos.com
  • 33. Ejemplos Básicos 4 Página 33 21/08/2009 http://www.gkudos.com
  • 34. Ejemplos Básicos 4 • Resultado • http://flashcamp.gkudos.com/facebo ok/Sample4.html Página 34 21/08/2009 http://www.gkudos.com
  • 35. Página 35 21/08/2009 http://www.gkudos.com
  • 36. Ejemplos Básicos 5 • Cambiando Propiedades Visuales con CSS • Archivos: Sample5.mxml, styles.css • Importar CSS Página 36 21/08/2009 http://www.gkudos.com
  • 37. Ejemplos Básicos 5 • Ejemplo de CSS para Flex Página 37 21/08/2009 http://www.gkudos.com
  • 38. Ejemplos Básicos 5 • Resultado: • http://flashcamp.gkudos.com/facebo ok/Sample5.html Página 38 21/08/2009 http://www.gkudos.com
  • 39. Página 39 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
  • 41. Página 41 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
  • 45. Ejemplos Básicos 6 • Utilizando Geoplanet desde Flex: • Archivo samples/LocationLoader.as Página 45 21/08/2009 http://www.gkudos.com
  • 46. Ejemplos Básicos 6 Página 46 21/08/2009 http://www.gkudos.com
  • 47. Ejemplos Básicos 6 Página 47 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
  • 49. Ejemplos Básicos 6 • Ejemplo de Respuesta Geoplanet Utilizando JSON Página 49 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
  • 52. Ejemplos Básicos 6 • Resultado — http://flashcamp.gkudos.com/facebook/ Sample6.html Página 52 21/08/2009 http://www.gkudos.com
  • 53. Página 53 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
  • 56. Ejemplos Avanzados • Demo: Aplicación Colaborativa Basada en Flex http://flashcamp.gkudos.com/facebo ok/ Página 56 21/08/2009 http://www.gkudos.com
  • 57. Página 57 21/08/2009 http://www.gkudos.com
  • 58. Ejemplos Avanzados • Componentes Utilizados en el Demo: — Adobe Flex — Facebook Connect — BlazeDS, Java, Spring, Tomcat, JMS — Postgresql, Postgis — Google Translator, Flicrk, Panoramio — Google Maps Flash API Página 58 21/08/2009 http://www.gkudos.com
  • 59. Ejemplos Avanzados Arquitectura General
  • 60. Página 60 21/08/2009 http://www.gkudos.com
  • 61. Publicación de Información en Facebook Página 61 21/08/2009 http://www.gkudos.com
  • 62. Procesamiento de Información Geográfica Fotografías de Flickr y Panoramio
  • 63. Página 63 21/08/2009 http://www.gkudos.com
  • 64. • Operaciones Espaciales Página 64 21/08/2009 http://www.gkudos.com
  • 65. Referencias Enlaces seleccionados sobre Facebook, Flex, Spring, Java…
  • 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