Tecnología Web 2.0. MÓDULO IV: Tecnologías y frameworks de desarrollo de software libre

Transcripción

1 Tecnología Web 2.0 MÓDULO IV: Tecnologías y frameworks de desarrollo de software libre

2 Objetivos Identificar servicios web 2.0 Dominar definiciones, términos y conceptos Tecnologías subyacentes Plataformas de desarrollo RIA Aplicaciones mashup Conocimiento de CMS más populares Técnicas de producción de diseño gráfico web Claves para obtener buenos diseños

3 Índice 1. QUÉ ES WEB 2.0 Historia de la web hasta web 2.0 Redes sociales y blogs Folksonomía y web semántica Conclusiones y futuro 2. TECNOLOGÍAS WEB 2.0 Qué es RIA (Rich Internet Applications) Flex y AJAX Flash y HTML5/CSS3/JS Sindicación de contenidos Microformatos Mashups/APIS CMS/frameworks 3. DISEÑO DE APLICACIONES. INTERFAZ Cuestiones básicas de diseño Layout/Tipografía/Color Navegación e interactividad Usabilidad Wireframing/mockups Frameworks CSS Flujo de trabajo

4 Tecnologías Web 2.0 Cuándo surge la necesidad de RIA s?

5 Tecnologías Web 2.0 Se consiguen avanzar en la programación a nivel de aplicaciones basada en la web, sobre todo a nivel de manejo de datos Asignaturas pendientes: presentación de datos (tablas, estructuras muy repetitivas, tipografías comunes y toscas, poca flexibilidad en los cambios de outputs de datos,...) procesamiento cliente-servidor pesado introducir estructuras y lenguajes más interesantes, ricos, que aporten valor,...

6 Conclusiones Microformatos CSS AJAX Formatos propietarios como Flash, Flex... Todo esto impulsa el desarrollo de aplicaciones etiquetadas como web 2.0 (junto con APIS) Se puede ver como símil entre las tecnologías y los conceptos web1.0 y web2.0

7 Conclusiones

8 Microformato Planteamiento simple. Acoplamientos ligeros Forma simple de agregar significado semántico a un contenido legible por un humano y que para una máquina tan solo es texto plano. Para usar en XHTML para manipular la información. Permiten la representación de muchos tipos de información (eventos, direcciones, ubicaciones,...)

9 Microformato Formalizar distintas estructuras y que sean abiertas Zona de discusión y nuevas propuestas desde microformats.org

10 Microformato <p> Las aves anidaron en 52.48,-1.89 </p> Las aves anidaron en <span class="geo"> <span class="latitude">52.48</span>, <span class="longitude">-1.89</span> </span>

11 Microformato <div> <div>juan Pérez</div> <div>el Ejemplo S. A.</div> <div> </div> <a href=" </div> con marcado hcard pasaría a: <div class="vcard"> <div class="fn">juan Pérez</div> <div class="org">el Ejemplo S. A.</div> <div class="tel"> </div> <a class="url" href=" </a> </div>

12 Microformato <div> <img src=" /> <strong>roberto Sánchez</strong> Editor principal de Ediciones ACME Calle Mayor 4 Alcalá de Henares, Madrid </div> con marcado hcard pasaría a: <div class="vcard"> <img class="photo" src=" /> <strong class="fn">roberto Sánchez</strong> <span class="title">editor principal</span> de <span class="org">ediciones ACME</span> <span class="adr"> <span class="street-address">calle Mayor 4</span> <span class="locality">alcalá de Henares</span>, <span class="region">madrid</span> <span class="postal-code">28801</span> </span> </div>

13 Microformato Microformatos existentes: hatom hcalendar hcard hreview xfolk... Tengo significado, entonces tengo microformato

14 Microformato Los microformatos son una versión más útil a corto plazo que RDFa RDFa (web semántica más pura o tradicional) definiciones más complejas proporciona un marco más general Los microformatos parecen los triunfadores Google y metadatos

15 RSS Formato para depositar y recibir información de tipo noticias Para sitios que se actualizan con frecuencia (blogs, diarios, noticias,...) Se puede consultar la información sin tener que visitar el sitio Sindicación de contenidos = suscribirse a una fuente RSS.

16 RSS Relación con XML, Atom, RDF,... RDF permite añadir significado a las páginas por medio de unos tripletes de la forma recursopropiedad-valor. sublenguaje de XML uno de los pilares de la web semántica

17 RSS DTD y XML Schema Validan la estructura del XML PERMITE CREAR ILIMITADOS LENGUAJES define estructuras y no etiquetas XML HTML plano, sin significado etiquetas predefinidas... SURGE COMO ASCENDIENTE da lugar a sublenguajes XHTML: adaptación de HTML a XML 1 RSS: sublenguaje para distribución de noticias tiene varias versiones: RSS 0.9 y 1.0 : RDF Site Summary (impl. de RDF) RSS 0.91: Rich Site Summary RSS 2.0: Really Simple Sindication Atom: sublenguaje para lo mismo que RSS, pero no es una versión de RSS. El objetivo es el mismo, pero más completo y mejor 3 2

18 Conclusiones Ahora tengo potencia de datos y un modelo de enriquecer o transmitir valor con el contenido Falta otro empujón : interfaces más ricos reducir el procesamiento pesado de petición clienteservidor

19 AJAX Asynchronous JavaScript And XML No es un lenguaje de programación Varias tecnologías unidas de manera muy potente: XHTML y CSS (presentación basada en estándares) DOM (visualización dinámica e interacción) XML y XSLT (intercambio y manipulación de datos) XMLHttpRequest (recuperación de datos asínc.) JavaScript que lo une todo

20 Ajax Permite crear aplicaciones con respuestas similares a las de aplicaciones de escritorio Ofrecer respuestas en tiempo real a peticiones de usuario Permite la comunicación entre página activa y servidor y luego actualizar contenido sin tener que recargar la página Agiliza la conexión entre usuario-navegador y aporta nuevas experiencias de interfaz en XHTML

21 Ajax Para un usuario final, el producto es la interfaz Uno de los componentes tecnológicos fundamentales de web 2.0, pero no quiere decir que algo implementado usando AJAX sea web 2.0 Ejemplos de uso: búsquedas, procesamiento de formularios, actualizaciones de datos en la página,... La clave: el objeto asíncrono en segundo plano entre cliente-servidor

22 Ajax

23 Ajax

24 Ajax Ajax: a new approach to web applications, Jesse James Garret, Feb 2005 Cargo y renderizo la página. me mantengo mientras otros scripts en background van al servidor a buscar los datos para la actualización de la página. sólo mostrando/ocultando partes No hay el típico arranco-freno-arranco-freno...

25 Ajax Algunos ejemplos: Google Suggest Zuggest Netvibes

26 Ajax Frameworks: Rico jquery Script.aculo.us Prototype Dojo Toolkit Backbase, Aptana como IDEs Spry de Adobe

27 Flash Historia Basado en un motor de reproducción como plugin (Flash Player) SWF Format Múltiples usos (multimedia, animación, programación, videojuegos,...) Total libertad para diseñar Inconveniente: acceso a datos y otras funciones

28 Flash Uso de scripts de terceros para aplicaciones de datos Banners, video (FLV),... hoy es casi omnipresente ActionScript 3.0 muy potente Permitió el primer acercamiento al concepto de RIA Ver ejemplos de sus aplicaciones

29 Flash vs AJAX Lo bueno de AJAX Basada en XHTML, estándares... Accesible Integración con CSS Ligereza Javascript Motores de búsqueda

30 Flash vs AJAX Lo malo de AJAX El usuario puede haber deshabilitado el Javascript en el navegador Se depende de un objeto propiedad de Microsoft para las comunicaciones asíncronas. No es tan ligero como parece a primera vista El resultado final en algunos casos no es comparable al de Flash.

31 Flash vs AJAX Lo bueno de Flash Player casi universal Calidad visual La única forma solvente de incluir animaciones, contenido interactivo, vídeo, audio,... Lenguaje de programación de alto nivel orientado a objetos, aunque también sea interpretado en el player

32 Flash vs AJAX Lo malo de Flash Plug-in, propietario Abusar de efectos y técnicas innecesarias Integración con el botón de volver del navegador Poco accesible

33 Flex Elevar el concepto de RIA un paso más Calidad visual y mayor interacción junto con acceso a datos potente MXML para definición de interfaz ActionScript 3.0 para la lógica Bibliotecas de datos Gran interactividad Ventaja: carga en un player.

34 Flex Ejemplos de usos: datos gráficos y estadísticas en general, aplicaciones de cualquier tipo Modelo de programación diferente, al principio es complejo... siguiente paso...

35 AIR Objetivo: llevar las aplicaciones web al escritorio no es un poco contradictorio? Consiste en una máquina virtual que permite aprovechar los desarrollos realizados y ponerlos en el escritorio, sin necesidad de navegador y en algunos casos sin servidor Ventaja: no hay que hacer dos desarrollos distintos Desarrollas para web, entonces desarrollas para escritorio

36 HTML5+CSS3 Qué hay de nuevo? Algún ejemplo: Sketchpad Harmony

37 Mashups Aplicaciones que integran distintos contenidos y servicios procedentes de más de una fuente con el objetivo de crear algo nuevo y más rico Los primeros y más conocidos: basados en mapas de Google Otros: basados en fotografías, noticias, compras, vídeos, viajes,... Uno de los primeros y que refleja muy bien el concepto: HousingMaps

38 Mashups API (Application Programming Interface) Conjunto de funciones o métodos que el desarrollador de una aplicación ofrece a otros para que puedan interactuar con la aplicación original No hay que programar todo desde cero Flickr, Google, YouTube, ebay,... ver listado de proveedores de APIS

39 Tecnologías de desarrollo Qué será lo próximo? Las API van a ser muy importantes A nivel de interfaz: Catalyst Posiblemente, dentro de poco las aplicaciones web no serán tan similares

40 CMS cuándo emplearlos? ventajas e inconvenientes Joomla!, Wordpress, oscommerce, Drupal, Claroline, Moodle, Typo3, Movable Type, phpbb, Magento... máxima: no desarrollar nada que ya esté implementado y sea bueno, personalizable,... Imprescindibles cuando hay gran mantenimiento