Flex Search Engine Friendly. Gonzalo Pezzi & Carlos Rovira

Transcripción

1 Flex Search Engine Friendly Gonzalo Pezzi & Carlos Rovira

2 Sumario Deeplinking History Management Google Analytics SEO Multi-idioma

3 Deep Linking

4 Deep Linking Técnicas que permiten enlazar a un recurso determinado dentro de un sitio web. Aplicaciones Flex orientadas a estados links directos a cada estado.

5 Deep Linking Conceptos: Estado de aplicación. Equivalente a página. Definido por una URL concreta. Evento de usuario. Desencadenan cambios de estado. Equivalente a enlace.

6 Deep Linking Formas de entrar en un estado Entrando al sitio: página de bienvenida. Evento de usuario Mediante URL (deep link) Desde un buscador

7 Deep Linking Nuestra aplicación debe cumplir: Orientada a estados: Si se restablece un estado, la vista reacciona correctamente al cambio. URL Rewriting. Los eventos deben escribirse en la URL Los eventos deben poder restaurarse desde la URL. El código ejecutado en consecuencia de ese evento debe ser independiente del estado anterior.

8 Deep Linking

9 Deep Linking Qué ocurre cuando el usuario provoca un evento: El controller (con el BrowserManager) escribe una representación textual del evento en la URL El controller invoca el comando correspondiente El comando utiliza un delegate para comunicarse con servicios remotos El comando almacena el nuevo estado de la aplicación

10 Deep Linking

11 Deep Linking Qué ocurre cuando un usuario entra por un deep link: El controller restaura el evento de la URL Ejecuta el comando correcto (con el evento restaurado) El comando utiliza un delegate para comunicarse con servicios remotos El comando almacena el estado de la aplicación

12 History Management

13 History Management Similar a Deep Linking El usuario pulsa Atrás / Adelante: El navegador modifica la URL. El controller captura el cambio y restaura el evento de la URL. Ejecuta el comando correcto (con el evento restaurado). El comando utiliza un delegate para comunicarse con servicios remotos. El comando almacena el estado de la aplicación.

14 Google Analytics

15 Google Analytics Herramienta de análisis web de Google Proporciona una librería para integrar aplicaciones Flash / Flex (gaforflash, en Google Code)

16 Google Analytics Gaforflash Permite registrar visitas de páginas También permite registrar eventos de usuario aunque no realicen cambios de URL

17 Google Analytics SWFAddress Alternativa al history.js del template por defecto de Flex Permite integración automática con Google Analytics en cada reescritura de URL

18 Search Engine Optimization (SEO)

19 Search Engine Optimization Características buscadores: Sistemas que indexan la web mediante Web Crawlers o Spiders. Navegan por todo el árbol de la página siguiendo los enlaces. Pagerank

20 Search Engine Optimization Evolucionan y se adaptan a nuevos tipos de contenido: Adobe Acrobat (.pdf) Adobe Postscript (.ps) Autodesk DWF (.dwf) Microsoft Excel (.xls) Microsoft Powerpoint (.ppt) Microsoft Word (.doc) Formato de Texto Enriquecido (.rtf) Shockwave Flash (.swf) Algunos leen Flash, pero no se obtienen buenos resultados. No interpretan javascript.

21 Search Engine Optimization El problema de las búsquedas en SWFs: Páginas html = documentos SWF = aplicaciones: Estado cambia dependiendo de la interacción del usuario No existe relación URL Contenido SWF es binario / los buscadores procesan texto

22 Search Engine Optimization Búsqueda en SWF: Adobe trabaja con Google y Yahoo para permitir búsquedas en swf Herramienta swf2html Limitaciones: No se tiene en cuenta el contenido obtenido de recursos externos No se indexa texto en idiomas bidireccionales (Hebreo o Árabe) Conclusión: puede servir para pequeños SWF con texto estático, pero no para aplicaciones

23 Search Engine Optimization Cloaking Mostrar versión Flash para usuarios con Flash/javascript Mostrar versión html para usuarios sin Flash/javascript (dispositivos móviles y buscadores)

24 Search Engine Optimization El Cloaking es legal? Comprobar que flash y html muestran la misma información Diferente texto flash/html penalizado por google. Alguien debe notificar directamente a Google (existe un formulario)

25 Search Engine Optimization Formas de diferenciar accesos de buscadores: Cabecera HTTP User-Agent IP Los buscadores no interpretan javascript

26 Search Engine Optimization

27 Search Engine Optimization Ejemplo de uso de Cloaking: Otros:

28 Search Engine Optimization SEO y Deep linking SEO requiere deep linking. Desde un buscador navegamos a una página concreta del sitio Wrapper html que contiene la aplicación Flash/Flex dinámico (jsp, php, cfm, asp ). Wrapper genera código html correcto según URL Aplicación Flex reacciona al deeplinking, estableciéndose en estado correcto.

29 Search Engine Optimization

30 Multi-idioma

31 Multi-idioma Detectar el idioma del navegador Capabilities (flash.system.capabilities). Proporciona el lenguaje del sistema operativo. Javascript (navigator.language / navigator.browserlanguage). Permite conocer el idioma del navegador. Cabeceras HTTP (cabecera accept-language). Permite conocer el idioma del navegador en servidor.

32 Multi-idioma Recuperar el contenido de la página según el idioma Depende de donde almacenemos el contenido Un ejemplo sencillo: XML Ficheros XML diferentes para cada idioma.