Web2 Quiensomos

Slide 1: ¿Quienes Somos en Internet ? Joaquín Salvachua, Juan Quemada

Slide 2: data portability Es una idea.

Slide 3: DataPortability • Es la implementación de la idea. • Necesidad de adhesiones para incrementar los trabajos que podemos realizar.

Slide 4: Organización • Grupos abiertos de trabajo. • Google groups • Comunicación chat via Skype ( persistencia) •

Slide 5: Azar o Necesidad

Slide 6: Identidad • Anteriormente centradas en corporaciones. • Transmitimos este modelo a Internet. • Los usuarios NO son empleados.

Slide 7: Esquemas centrados en el usuario

Slide 8: ¿Como hacerlo?

Slide 9: Web Semántica y SOA Soluciones a los problemas.

Slide 14: No ha triunfado

Slide 16: Las mismas ideas: Web Semántica SOA Implementación KISS

Slide 17: Microformatos La web semántica de pobres

Slide 18: REST Uso de semántica de HTTP

Slide 19: Funciona

Slide 20: Organización

Slide 21: DataPortability

Slide 22: OpenId • Identidad centrada en usuario. • Soy mi url. • Evito registros repetidos.

Slide 23: Características Open-Id • Sistema descentralizado: Eliges quien deseas que gestione tu identidad. • Tu identidad es un URL • http://jsalvachua.myopenid.com • Permite un SSO con diferentes organizaciones de forma flexible.

Slide 26: RSS / ATOM ATOM-PP

Slide 27: OPML • Blogrolls • Listas de lectura.

Slide 28: FoaF

Slide 29: SIOC

Slide 30: APML

Slide 32: Microformatos • Hcard • Hcalendar • Hfn • XOXO

Slide 33: Web Semántica Semántica: “Estudio del significado de las palabras”  Sintaxis: “Estudio de las reglas de composición de las palabras” La información Web accesible esta mayoritariamente en (X)HTML  (X)HTML no puede ser procesado fácilmente por programas  (X)HTML está pensado para personas  Un programa no es capaz de deducir el significado de una página Web a partir del código (X)HTML La Web Semántica  Iniciativa para facilitar la deducción automática del significado de los contenidos Web  Añadiendo meta-datos a las páginas Web  Que definan su significado y sus propiedades

Slide 34: Web Semántica o Microformatos W3C: World Wide Web Consortium  Esta definiendo lenguajes “semánticos”  RDF (Resource Description Framework)  Para describir propiedades semánticas de recursos Web  OWL: Web Ontology Language  Para describir significado y propiedades semánticas de recursos Web  …..  Son lenguajes de bastante complejidad Microformatos  Conjunto de meta-datos sencillos y abiertos  Descritos en (X)HTML semántico  Basados en normas ampliamente adoptadas en Internet

Slide 35: Microformatos Mantenidos por un grupo de usuarios  Definidos en: http://microformats.org/  Aparecen relacionadas con el mundo de los blogs  Se crean a medida que se necesitan Ejemplos  hCard: Tarjeta de visita basada en vCard (RFC2426)  hCalendar: Datos de reunión basada en iCalendar (RFC2445)  Geo y Adr: posición y dirección  XFN: Redes sociales de conocidos  Rel-licence: licencia de publicación  Rel-tag: índice de clasificación (tag)  XMDP: XHTML Meta Data Profiles  …

Slide 36: Microformatos: características Diseñados para personas primero, maquinas después Diseñados para resolver problemas concretos Diseños iniciales lo mas sencillos posibles Modulares e insertables Reusando partes de normas ampliamente aceptadas Permitiendo y promoviendo desarrollos, contenidos y servicios descentralizados

Slide 37: Microformatos: beneficios Código (X)HTML mas eficiente y mantenible Permiten indexación y agregación de micro-contenidos  Búsquedas mas eficaces (Google, Yahoo, Technorati, …)  Agregación de recomendaciones, tags, … dispersos Interoperabilidad entre contenidos Web y aplicaciones  Por ejemplo: Outlook, Agendas, Calendarios, ....  Ejemplo basado en Firefox add-on:  https://addons.mozilla.org/es-ES/firefox/addon/4106

Slide 38: Marcado (X)HTML semántico Semántica: “Estudio del significado de las palabras”  Sintaxis: “Estudio de las reglas de composición de las palabras”  Visualización: “Presentación visual de la información” Marcado (X)HTML semántico  Marcado que define la estructura de un documento  Definiendo el formato de visualización de forma independiente  Por ejemplo, CSS (Cascading Style Sheets) (X)HTML semántico  Utiliza marcas estructurales existentes siempre que sea posible  Headings (<h1,..>), Lists (<ul>, <ol>, ..), Paragraphs (<p>), Citation (<cite>, <q>, <blockquote>,..), Abbreviations (<abbr>), ….  Cuando no es posible, se extiende (X)HTML utilizando  Marca genérica de bloque <div> o de linea (inline) <span>  Con atributos de clase “class”, identificador “id” o de relación “rel” o “rev”

Slide 39: Marcas y Atributos más usados Marcas <div>: define un bloque <span>: define un elemento de un bloque <abbr>: define una abreviatura <p>: párrafo <ul>, <ol>, <li>: listas itemizadas u ordenadas <a>: define un enlace en el cuerpo visible (body) <link>: define un enlace en la cabecera (head) Atributos: definen la semántica Atributo “class”: clase asociada a la marca Atributo “id”: identificador único en el fichero Atributo “rel”: relación con la página enlazada Atributo “rev”: relación inversa con página enlazada

Slide 40: Ejemplo: vCard y hCard hCard: Microformato para definir contactos y tarjeta de visita basados en vCard (RFC2426)  Generador de hCard: http://microformats.org/code/hcard/creator Ejemplo de hCard: <div id="hcard-Juan-Quemada" class="vcard"> <span class="fn">Juan Quemada</span> <div class="org">UPM</div> <a class="email" href="mailto:jquemada@dit.upm.es">jquemada@dit.upm.es</a> <div class="tel">+34 91 336 7331</div> <p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard">hCard</a> created with the <a href="http://microformats.org/code/hcard/creator"> hCard creator</a>. </p> </div>

Slide 41: Ejemplo: iCalendar y hCalendar hCalendar: Microformato para definir eventos y citas basados en vCard iCalendar (RFC2445)  Generador de hCalendar: http://microformats.org/code/hcalendar/creator Ejemplo de iCalendar: BEGIN:VCALENDAR PRODID:-//XYZproduct//EN VERSION:2.0 BEGIN:VEVENT URL:http://www.web2con.com/ DTSTART:20071005 DTEND:20071020 SUMMARY:Web 2.0 Conference LOCATION:Argent Hotel, San Francisco, CA END:VEVENT END:VCALENDAR Ejemplo de hCalendar: <div class="vevent"> <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a> <span class="summary">Web 2.0 Conference</span>: <abbr class="dtstart" title="2007-10-05">October 5</abbr>- <abbr class="dtend" title="2007-10-20">19</abbr>, at the <span class="location">Argent Hotel, San Francisco, CA</span> </div>

Slide 42: Relaciones Los atributos “rel” y “rev” se utilizan para definir relaciones, por ejemplo Microformato “rel-tag”: definición de índices (tags) de una página. El URL se utiliza para permitir búsquedas adicionales de dicho índice. <a rel=“tag" href=“http://technorati.com/tag/css“>CSS</a> Microformato “rel-license”: definición de licencia (URL) bajo la que se publica una página. <a rel=“license" href=“http://creativecommons.org/licenses/by/ 2.5/“> This doc is published under …..</a>

Slide 43: Ejercicio aplicación-4 Cambiar el código CSS para que la configuración del ejemplo de página Web con 2 columnas se visualice de la siguiente forma  Los colores de fondo sean en tonos verdosos  El ancho de la página sea de 500 puntos Añadir estos microformatos en el pie de página  los índices “CSS” y “W3C” como “rel-tag”  La licencia (“rel-license”) identificada por el URL:  http://creativecommons.org/licenses/by/2.5/ Visualizar la página con Firefox y el add-on “Operator” que reconoce microformatos para validar que los reconoce correctamente  Operator: https://addons.mozilla.org/es-ES/firefox/addon/4106

Slide 44: ¿Para que necesito a data portability? • Marco que permita identificar a los usuarios que se implementan dichos estándares. • Ayudar a la implantación. • ¿Están muertas otras formas de estandarización?

Slide 45: ¿Porque colaborar? • Organización abierta. • Investigación de lagunas en los distintos casos.

Slide 46: Contribuciones • Ayudando a la traducción. • WAKAME • RoR plugging

Slide 47: ¿Quereis uniros?

Slide 52: Coste de la calidad de la experiencia

Slide 55: SPAIN IS DIFFERENT

Slide 56: REST

Slide 57: Web humana y Web programable Web humana  Visor Web, HTTP y HTML  HTML: diseñado para leer documentos  A evolucionado hacia CSS, XML, XHTML, … Web programable  API, HTTP/SOAP, XML y ………  XML: Datos procesables por programa  Fuerte debate entre  REST: utilizado en los servicios reales  “Big” Web Services: propuesto por W3C  A medio desarrollar

Slide 59: Servicios o Recursos “Big” Web Services (W3C)  SOA: Arquitectura orientada a servicios  APIs de Servicio de acceso a objetos remotos tipo RMI  RMI: Remote Method Invocation RESTful Web Services  ROA: Arquitectura Orientada a Recursos  Interfaces Uniformes (métodos HTTP)  APIs de acceso y gestión de recursos Web  Los recursos se representan en XML, XHTML, JSON, ..

Slide 60: Que es REST REpresentational StateTransfer. Arquitectura de aplicaciones Web  Propuesta por Roy Fielding en su tesis doctoral (2000)  http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm  Co-diseñador de HTTP y uno de los principales desarrolladores del proyecto Apache Arquitectura desacoplada y escalable

Slide 61: Rest y HTTP REST es una abstracción que puede implementarse sobre cualquier protocolo. La mejor forma de implementarlo es sobre HTTP. Perfectamente adaptado a HTTP  Principal diferencia con SOAP

Slide 62: Principios sobre REST Recursos Identificables (Addressability)  Cualquier recurso de Internet posee un URI/URL Interfaz de acceso uniforme  Buen uso de HTTP Comunicación sin estado (Statelessness)  Servidores escables Representación de los recursos  En formatos abiertos Hypermedia (Connectedness)  Navegación basada en enlaces entre recursos

Slide 63: Identificador de recursos Recurso: cualquier cosa en Internet que “merezca la pena ser referenciada pos si misma”  Un fichero, un mapa, un usuario, un libro, un coche, … Cada recurso se identifica con un URI  El URI (Permalink) da acceso al recurso Cada URI añade valor a la red.

Slide 64: Ejemplo: Amazon S3 Servicio de almacenamiento de objetos. Tiene 3 tipos de recursos: 1. Bucket-list: conjunto de buckets* de un usuario https://s3.amazonaws.com/ 2. Bucket en particular: repositorio de objetos https://s3.amazonaws.com/{Bucket}/ 3. Objeto: posee metadato y valor https://s3.amazonaws.com/{Bucket}/{Objeto} *Bucket: disco o repositorio virtual accesible a través de HTTP

Slide 65: Interfaz uniforme Gestionar recursos solo con métodos HTTP:  GET (leer, copia solo lectura)  HEAD (cabecera)  PUT (crear)  POST (añadir)  DELETE (eliminar) Es el interfaz CRUD: Create, Read, Update, Delete Posibilidad de hacer uso extensivo de  Cabeceras y códigos de respuesta de HTTP Posibilidad de optimizar mediante el uso de caches.

Slide 66: Amazon S3: Interfaz Uniforme GET HEAD PUT DELETE Bucket-list Lista los buckets de un usuario Bucket Lista los Crear bucket Borrar bucket objetos del bucket Objeto Obtener valor Obtener Crear y/o Borrar Objeto y metadato metadato del Asignar valor del objeto objeto a objeto y metadato

Slide 67: Representación de los recursos Que es lo que obtenemos al acceder al URI del recurso?  Una representación “bien conocida” y “abierta” Pueden utilizar varios formatos:  HTML, XHTML, XML, JSON, PDF, FLASH, FLEX, ... HTTP nos facilita el tipo (MiME) y permite negociar el formato.  Habitualmente es XML.

Slide 68: Comunicación sin estado El servidor NO mantiene el estado de la conversación con cada cliente. El estado esta explicito en las llamadas.  Cada estado se representa con una URI Incrementa exponencialmente la escalabilidad. Enfoque dispara y olvida (“fire and forget”). Muy bajo acoplamiento

Slide 69: Ejemplos Ejemplo stateful:  FTP  Existe un directorio implicito de trabajo  HTTP stateful  URI relativo: dependencia entre accesos consecutivos Ejemplo statelessness:  HTTP con URLs absolutas  ATOM-PP y ATOM  Google Maps, Amazon S3, del.icio.us, …

Slide 70: Hypermedia Las transiciones entre estados  Son siempre a través de enlaces  No hay que acordarse de los comandos de memoria Usar un servicio:  similar a navegar por la Web El servidor contiene la definición del servicio  Proporciona los enlaces como parte del recurso  El cliente es genérico Modelo distribuido de fácil evolución.

Slide 71: Web humana y Web programable Un servicio REST bien diseñado  También puede ser utilizado con un visor Web  Los recursos se presentan en el visor  Con CSS, XSLT, …..  Se usa navegando  haciendo click sobre las operaciones (enlaces) Existe un problema con XHTML4  Los formularios solo soportan GET, POST  Quiza se solucione en XHTML5

Slide 72: Aplicación Web Aplicación capaz de viajar por la red  Reside en un servidor  Se ejecuta en el cliente  Normalmente se invoca automáticamente al cargar la pagina HTML que la contiene La aplicación debe ser segura  Se suele ejecutar sobre un gestor de seguridad que evita acciones peligrosas para el cliente Ejemplos:  Applets Java (los primeros)  AJAX (Asynchronous Javascript and XML)  Widgets

Slide 73: REST y AJAX El despliegue AJAX de un servicio REST  Son clientes en Javascript  que invocan el servicio con el interfaz uniforme

Slide 74: Aplicaciones Web frente a • Necesidad de Instalar un programa. • Problemas de las actualizaciones •

Slide 75: Widgets - Gadgets

Slide 76: Conclusiones ROA: Resource Oriented Architecture  REST es el protocolo para la arquitectura del mayor sistema distribuido del mundo (la web). Mayor adopción  Adoptado casi unánimemente en el Web2.0  Google, del.icio.us, Amazon, Yahoo, ….  Las normas de “Big” Web Services están todavía incompletas  RoR a discontinuado el soporte a “Big WS”