Octubre 2006
Contenidos Evolución Características Tecnologías Protocolos básicos HTML y CSS Javascript y DOM XML y Servicios Web AJAX Ejemplos
Evolución del Hipertexto 1945 - Vannevar Bush escribe As we may think, libro de ciencia ficción que describe el hipertexto. 1965 - Ted Nelson Acuña el término de Hipertexto e Hiperenlaces. Enlaces entre texto, gráficos y audio Su sistema Xanadú no fue implementado 1968 - Douglas Engelbart implementa el primer sistema Interfaz gráfica de usuario (incluido el ratón) 1987 - Hypercard de Apple
Historia de WWW 1990 - Nacimiento de la WWW (Tim Berners-Lee) Lenguajes y protocolos de hipertexto (HTTP,URI, HTML) Primeros navegadores (Mosaic, 1993) Objetivo principal: Intercambio científico 1995 - Aplicaciones comerciales Competencia entre navegadores: Netscape vs IE Nacimiento de W3c para estandarizar 2000 - Burbuja de Internet Comercio electrónico y portales Web Pinchazo de la burbuja 2005 - Web 2.0
Qué es la Web 2.0? En 2004, se celebra la primer conferencia Servicios de Internet de segunda generación Popularidad de cierto tipo de servicios Web con muchas características comunes: Enfoque hacia el usuario Importancia de la información Interacción en múltiples formas (no sólo HTML) No existe una definición precisa... Numerosos sitios se proclaman Web 2.0 Una buzzword? Una actitud? Un conjunto de tecnologías? Algo que está de moda? Una nueva revolución?
Algunas características de la Web 2.0 La Web como plataforma Aprovechamiento de la Inteligencia colectiva Importancia de los datos Fin ciclo Software tradicional Modelos de programación ligeros Multi-dispositivo
La Web como plataforma Creación de Aplicaciones de Internet en vez de portales Enriquecimiento de la experiencia del usuario Menor diferencia entre portales web y aplicaciones de escritorio Ejemplo: GMail
Aprovechamiento de la Inteligencia colectiva Aspectos colaborativos Los usuarios participan de la creación de información Objetivo: Compartir recursos e información Ejemplos: Wikipedia y otros wikis Sistemas de reputación: ebay, Amazon, Digg Etiquetado colaborativo en lugar de taxonomías centralizadas Flickr, del.icio.us
Blogs e Inteligencia Colectiva Emergencia de los Blogs relacionada con Web 2.0 Los Blogs se diferencian de las páginas personales Utilización de RSS para publicación/suscripción a mensajes Enlaces permanentes (permalinks) facilitan el acceso a mensajes anteriores Fomento de participación (no solamente publicación) La Blogoesfera puede considerarse un entorno global de conocimiento
Importancia de los datos La información es la clave La riqueza de la aplicación radica en la información que contiene Objetivo: Facilitar acceso a los datos Combinaciones de datos en múltiples formatos Ejemplo: Housing Maps Importancia de gestión de datos Rivalidad en captar/gestionar ciertos tipos de datos: localización, identidad, agendas, etc.
Fin del ciclo de Software tradicional El software no se descarga sino que está en la Web No hay versiones de productos Versión Beta constante Actualización automática (siempre se accede a la última versión) Importancia de lenguajes dinámicos: Perl, Python, PHP, Ruby, etc. Usuarios = desarrolladores Filosofía de código abierto Liberación de API s y servicios
Modelos de programación ligeros Arquitecturas basadas en servicios simples Utilización de servicios Web con protocolos estándar Dicotomía REST vs SOAP Intercambio de información mediante estándares: XML Comunicación asíncrona: AJAX Objetivo: escalabilidad a gran escala Innovación en el ensamblaje de aplicaciones
Multi-dispositivo Importancia del acceso desde múltiples dispositivos Cada vez mayor acceso desde dispositivos móviles El acceso a la Web ya no es principalmente desde ordenadores de sobremesa Objetivo: computación ubicua Ejemplo: Podcasting (itunes)
Mejora de la Experiencia de usuario Utilización de estándares: XHTML, CSS que aumenten la accesibilidad Recuperaciones de información asíncronas durante la interacción Todos los usuarios y los sitios son importantes (Long tail) Mashups o aplicaciones Web híbridas que combinan datos de diversas fuentes. Ejemplo: Google maps, Amazon, ebay, etc. Más ejemplos en WebMashup.com
Protocolos básicos World Wide Web Protocolo de comunicación: HTTP Modelo cliente-servidor Sin estado en la comunicación
Protocolos básicos URI URI = URL + URN URL (Uniform Resource Locator) Tiene doble funcionalidad: 1. Identificar un recurso globalmente 2. Indicar el protocolo de acceso: http, ftp, telnet... URN = Nombres únicos IRI permite utilizar caracteres internacionales en el identificador
HTML y CSS HTML Ejemplo HTML (Hypertext Markup Language) es un lenguaje de marcado para hipertexto Primeras versiones de HTML usaban sintaxis SGML (un lenguaje de marcado genérico XHTML = versión reciente basada en XML <html> <head> < t i t l e>ejemplo</ t i t l e> </ head> <body> <h1>ejemplo</ h1> <p>un e n l a c e a l a <a h r e f= h t t p : / /www. u n i o v i. e s > U n i v e r s i d a d de Oviedo</a> </p> </ body> </ html>
HTML y CSS CSS CSS (Cascading Style Sheets), hojas de estilo en cascada Permite separar detalles de presentación del contenido Facilita la reutilización de las presentaciones Facilita la independencia del dispositivo en el contenido Aumenta la accesibilidad Ejemplo <html> <head> < t i t l e>ejemplo</ t i t l e> < l i n k r e l= s t y l e s h e e t h r e f= e j e m p l o. c s s type= t e x t / c s s /> </ head> <body>... </ html> body { background : y e l l o w ; } h1 { t e x t a l i g n : c e n t e r ; }
Javascript y DOM ECMAScript Ejemplo Lenguaje de scripting que puede ser ejecutado en el cliente Varias implementaciones: JavaScript, JScript Lenguaje basado en prototipos No todos los navegadores soportan el lenguaje <html> <head> < s c r i p t t y p e= t e x t / j a v a s c r i p t > f u n c t i o n d i s p a l e r t ( ) { a l e r t ( Has p u l s a d o! ) } </ s c r i p t > </head> <body> <form> <i n p u t t y p e= b utton o n c l i c k = d i s p a l e r t ( ) v a l u e = No P u l s e s > </form> </body>
Javascript y DOM DOM DOM (Document Object Model), Modelo de objetos del documento Librería de funciones (API) que permiten acceder de forma estándar al árbol del documento Originalmente, para HTML y posteriormente para XML
Javascript y DOM DHTML DHTML (Dynamic HTML) se refiere a la combinación entre HTML, CSS, Javascript y DOM Permite crear efectos dinámicos Adquirió mala fama debido a los problemas de compatibilidad entre navegadores Algunas demos son espectaculares
XML y Servicios Web XML XML (extensible Markup Language), lenguaje de marcado extensible Mismo objetivo que SGML pero pensado para la Web Mas restrictivo que SGML A la vez, más sencillo Adquirió gran éxito como lenguaje de intercambio
XML y Servicios Web Servicios Web Aplicaciones accesibles a través de la Web que se comunican mediante tecnologías estándar Habitualmente, los mensajes contienen documentos XML Gran éxito de las Arquitecturas Orientadas a Servicios
AJAX Ajax AJAX (Asynchronous Javascript and XML), XML y Javascript asíncrono Combinación de tecnologías que permiten intercambiar información con el servidor durante la interacción del usuario (de forma asíncrona) Mediante Javascript se realiza la petición de datos al servidor mediante HTTP de forma asíncrona Los datos están en formato XML A partir de dicha información se puede modificar el DOM del documento Objetivo: mejorar experiencia del usuario, dando apariencia de aplicación de escritorio
Ejemplos Del.icio.us Intercambio de marcadores y etiquetas de marcadores Creación de folksonomías Flickr Intercambio de imágenes, comentarios y etiquetas Panoramio Fotografías e información geográfica YouTube Vídeos y comentarios MySpace Información personal: gustos musicales, comentarios, etc.