sintesis

¿Por qué?

contexto

¿Quién?

- Tim Berners-Lee - Director World Wide Web Consortium (MIT)

bernersLee

portada

¿Qué?

que

primerServidorMundo codigo

Localizador de Recursos Universal, URL

  • URL, uniform resource locator: Secuencia de caracteres, de acuerdo a una sintaxis, que se usa para localizar recursos en internet

  • URN, uniform resource name: Secuencia de caracteres, de acuerdo a una sintaxis, que se usa para nombrar recursos en cualquier espacio de nombres

    • urn:isbn:9780136291558

    • urn:uuid:123e4567-e89b-12d3-a456-426655440000

  • URI, uniform resource name: Secuencia de caracteres, de acuerdo a una sintaxis, que se usa para identificar recursos en cualquier espacio de nombre

    • Todas las URL’s y URN’s son URI’s

url screenshot

Lenguaje de Marcas de Hipertexto, HTML

  • Para describir la estructura mediante etiquetas y el contenido en forma de texto, así como para complementarlo con imágenes, …​

html
S/GML-XML vs HTML MVC

  • S/GML, XML permite estructurar la información con metainformación para posibilitar el procesamiento de los datos frente a

  • HTML que permite estructurar la presentación de los datos dificultando el procesamiento de los datos

  • Acorde al patrón MVC (desacoplando la vista y el modelo), otros lenguajes procesarán los datos en la estructura de la información (modelo) para generar los datos deseados con la estructura de presentación (vista) requerida
Ejemplo XML Ejemplo HTML Ejemplo HTML 
<pedido>
  <codigoArticulo>458.34</codigoArticulo>
  <precioUnidad>89.345<precioUnidad>
  <cantidad>823</cantidad>
</pedido>
 
<html>
<body>
  <table>
    <tr>
      <td>Articulo</td>
      <td>Cantidad</td>
      <td>Articulo</td>
    </tr>
    <tr>
      <td>458.34</td>
      <td>89.345</td>
      <td>823</td>
    </tr>
  </table>
</body>
</html>
 
<html>
<body>
  <p>Se solicitan 823 unidades del artículo con código 458.34 al precio de 89.345 euros</p>
</body>
</html>

Protocolo de Transerencia de Hipertextos, HTTP

  • Define la sintaxis y la semántica que utilizan los elementos de software de la arquitectura web.

    • Orientado a transacciones, sigue el esquema petición-respuesta entre un cliente y un servidor sin estado, sin guardar ninguna información sobre conexiones previas

    • Estados de respuesta HTTP con gatos!

http
queWorldWideWebEstatica
queEstaticaComportamiento

¿Para qué?

1º Objetivo 2º Objetivo

  • Publicación: cualquiera que sepa poner etiquetas a su información y la aloje en un servidor web será accesible por todo aquel que tenga un cliente web, navegador presente en todos los sistemas operativos que no quieren estar fuera del nuevo servicio.

  • Economía en el Desarrollo de Software: sin desplazamientos y dietas para atención de cliente: nuevas versiones, incidencias, …​ en cada una de las plataformas clientes

  • Se extiende el servidor con páginas dinámicas (páginas generadas en la ejecución bajo demanda) vs páginas estátias (páginas editadas antes de la ejecución de la aplicación web).

    • Se le inyectan los datos de la petición (request) de la trama HTTP correspondiente a los datos del formulario de la página HTML

    • Se ejecuta el script del servidor que puede consultar BBDD, ejecutar cálculos, …​ escribiendo dinámicamente la página HTML de la respuesta en "pantalla"

    • Se le "roba" la salida por pantalla para redirigir la salida vía comunicaciones HTTP
webDinamica
queWorldWideWebDinamica

¿Cómo?

PosteriorWorldWideWed10

  • Evolución de la Web y tecnologías

    • Front-end

      • Navegadores Web

      • Clientes Web Ligeros

      • Clientes Web Pesados

      • Clientes Web Móviles

    • Sevicios Web

      • Formatos

      • Protocolos

    • Back-end

      • Servidores Web

      • Plataformas Web

    • Arquitecturas Web

      • Arquitectura Física

      • Frameworks del Back-end

      • Frameworks del Front-end

    • Herramientas de Desarrollo Web

Web 1.0

Front-end

clienteWeb
Otros navegadores Web:

  • Flock, Midori, Arora, que comparten con Safari y Chrome el motor de visualización (render) WebKit basado en el motor KHTML de navegador Konqueror.

  • AOL Explorer, … que comparte el motor Trindent con IExplorer.

  • Camino, Galeon, … que comparten el motor Gecko con Mozilla Firefox.
ClienteWEB
Batallas de los Navegadores

  • I Batalla entre Navigator de Netscape e IExplorer de Microsoft en los 90’.

    • Inicialmente ganada por Navigator y con resolución judicial a favor de Netscape por carácter monopolista de Microsoft pero éste finalmente surgió ganador en el mercado.

batallaNavegadoresI

  • II Batalla actual desde el 2003 entre los “3 grandes”, IExplorer, Firefox, Chrome,

    • o los “5 grandes”, incluyendo Safari y Opera

Clientes Web Ligeros

clientesLigeros

Clientes Web Pesados

clientesPesados

Clientes Web Móviles

clientesMoviles

Sevicios Web

Servicios Web son un conjunto de protocolos y estándares sobre Internet que sirven para intercambiar datos entre aplicaciones de software desarrolladas en lenguajes de programación diferentes y ejecutadas sobre plataformas diferentes
La Web es el transporte universal de mensajes
— SOA
La Web es el universo de la información accesible globalmente
— Rest
Berners Lee

  • En la actualidad se usa en el sentido más amplio para describir cualquier interfaz web simple que utiliza JSON/XML y HTTP

Formatos

formatos

Tecnologias XML

tecnologiasXML
colaboradoresXML
Validadores Formateadores Procesadores

  • Se define el lenguaje estándar DTD (Definition Type Document) en 1998 por la W3C que define la estructura de información de los documentos XML

  • Se define el lenguaje estándar XML Schema (vocabulario de XML) en 2001 por la W3C con la misma funcionalidad que el lenguaje DTD pero con mucha más potencia

  • Se compatibiliza con el lenguaje estándar CSS (Cascade Style Sheet) por la W3C que define el formato de presentación de los datos del documento XML

  • Se define el lenguaje estándar XSL (XML Stylesheets Transformation Language) en 1999 por la W3C que define el filtrado, orden y formato de presentación de los datos del documento XML

  • Se define el estándar del modelo DOM (Document Object Model) en 1997 por la W3C que define la estructura jerárquica en memoria de los datos del documento XML para su recuperación, generación y manipulación y acceso.

  • Interfaz estándar SAX (Simple Acces XML) define el filtrado, orden y formato de presentación de los datos del documento XML

XML vs JSON vs YAML

XML JSON (conversor XML/JSON) YAML (conversor JSON/YAML) 
<menu id="file" value="File">
  <menuitem value="New" onclick="CreateNewDoc()" />
  <menuitem value="Open" onclick="OpenDoc()" />
  <menuitem value="Close" onclick="CloseDoc()" />
</menu>
 
{
  "menu": {
  "id": "file",
  "value": "File",
  "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}
 
---
menu:
  id: file
  value: File
  menuitem:
  - value: New
    onclick: CreateNewDoc()
  - value: Open
    onclick: OpenDoc()
  - value: Close
    onclick: CloseDoc()

Protocolos

ServiciosWeb

UDDI

 
POST /get_businessDetail HTTP/1.1
Host: www.XYZ.com
Content-Type: text/xml; charset = "utf-8"
Content-Length: nnnn
SOAPAction: "get_businessDetail"

<?xml version = "1.0" encoding = "UTF-8" ?>
<Envelope xmlns = "http://schemas/xmlsoap.org/soap/envelope/">
   <Body>
      <get_businessDetail generic = "2.0" xmlns = "urn:uddi-org:api_v2">
         <businessKey = "C90D731D-772HSH-4130-9DE3-5303371170C2">
         </businessKey>
      </get_businessDetail>
   </Body>
</Envelope>

WSDL

 
<portType name = "UsuarioRegistrado">
  <operation name="opCheckAvailability"
      pattern="http://www.w3.org/ns/wsdl/in-out"
      style="http://www.w3.org/ns/wsdl/style/iri"
      wsdlx:safe = "true">
    <input messageLabel="In"
        element="ghns:checkAvailability"/>
    <output messageLabel="Out"
        element="ghns:checkAvailabilityResponse"/>
    <fault ref="tns:invalidDataFault" messageLabel="Out"/>
  </operation>
</portType>

SOAP

 
POST /Quotation HTTP/1.0
Host: www.xyz.org
Content-Type: text/xml; charset = utf-8
Content-Length: nnn

<?xml version = "1.0"?>
<SOAP-ENV:Envelope
   xmlns:SOAP-ENV = "http://www.w3.org/2001/12/soap-envelope"
   SOAP-ENV:encodingStyle = "http://www.w3.org/2001/12/soap-encoding">

   <SOAP-ENV:Body xmlns:m = "http://www.xyz.org/quotations">
      <m:GetQuotation>
         <m:QuotationsName>MiscroSoft</m:QuotationsName>
      </m:GetQuotation>
   </SOAP-ENV:Body>
</SOAP-ENV:Envelope>
Recursos vs Entidad End point Descripción

  • Los recursos no son una biyección de las entidades de la BBDD pero sí pueden coincidir.

    • un ticket puede tener un creador, una lista de receptores, un supervisor, un contenido, fechas de creación, cierre, …​ que en la BBDD puede implicar a entidades de varias tablas

    • un mensaje con fecha y contenido sí podría implicar a una sola entidad de una tabla de la BBDD

GET /tickets

Devuelve una lista de tickets

GET /tickets/12

Devuelve un ticket específico

POST /tickets

Crea un nuevo ticket

PUT /tickets/12

Actualiza el ticket #12

PATCH /tickets/12

Actualiza parcialmente el ticket #12

DELETE /tickets/12

Elimina el ticket #12

GET /tickets/12/messages

Devuelve una lista de mensajes para el ticket #12

GET /tickets/12/messages/5

Devuelve el mensaje #5 para el ticket #12

POST /tickets/12/messages

Crea un nuevo mensaje en el ticket #12

PUT /tickets/12/messages/5

Actualiza el mensaje #5 para el ticket #12

PATCH /tickets/12/messages/5

Actualiza parcialmente el mensaje #5 para el ticket #12

DELETE /tickets/12/messages/5

Borra el mensaje #5 para el ticket #12

…​

…​
Aplicación de múltiples páginas Aplicación de única página

  • Multiple page application, MPA

    • Aplicaciones de una página web por cada petición!!!

    • El servidor suministra datos con formato HTML sorbrecargando al servidor, pieza crítica en la arquitectura cliente/servidor de HTTP, en la generación de detalles de la vista

    • Los clientes, potentes PC’s disfrutando de malas comunicaciones, asumen la visualización de los elementos del DOM en la presentación del HTML

    • No cumple MVC, acoplando modelo y vista

  • Single page application, SPA

    • Aplicaciones de una sola página web al arranque!!!

    • El servidor suministra datos XML/JSON, sin formato HTML, descargando al servidor, pieza crítica en la arquitectura cliente/servidor de HTTP, centrandose en la información

    • Los clientes, potentes PC’s disfrutando de buenas comunicaciones, asumen la modificación de los elementos del DOM en la presentación del HTML para formatear los datos recibidos en XML/JSON

    • Sí cumple MVC, desacoplando modelo y vista

Back-end

Servidores Web

servidoresWEB

ServidoresWEB

Plataformas Web

scripts
Tecnología CGI de Software Libre Tecnología ASP de Microsoft 
\#include <stdio.h>
\#include <stdlib.h>

int main(void) {
  char *data;
  long m,n;
  printf("%s%c%c\n", "Content-Type:text/html;charset=iso-8859-1",13,10);
  printf("<TITLE>Multiplication results</TITLE>\n");
  printf("<H3>Multiplication results</H3>\n");
  data = getenv("QUERY_STRING");
  if(data == NULL)
    printf("<P>Error! Error in passing data from form to script.");
  else if(sscanf(data,"m=%ld&n=%ld",&m,&n)!=2)
    printf("<P>Error! Invalid data. Data must be numeric.");
  else
    printf("<P>The product of %ld and %ld is %ld.",m,n,m*n);
  return 0;
}
 
<%@ Import Namespace="System.Data.OleDb" %>
<script runat="server">
sub Page_Load
  dim dbconn,sql,dbcomm,dbread
  dbconn=New OleDbConnection ("Provider=
  Microsoft.Jet.OLEDB.4.0; data source=" &
    server.mappath("northwind.mdb"))
  dbconn.Open()
  sql="SELECT * FROM customers"
  dbcomm=New OleDbCommand(sql,dbconn)
  dbread=dbcomm.ExecuteReader()
  customers.DataSource=dbread
  customers.DataBind()
  dbread.Close()
  dbconn.Close()
end sub
</script>

<html>
  <body>
    <form runat="server">
      <asp:Repeater id="customers" runat="server">
      <HeaderTemplate>
        <table border="1" width="100%">
          <tr>
            <th>Companyname</th>
            <th>Contactname</th>
            <th>Address</th>
            <th>City</th>
          </tr>
      </HeaderTemplate>
      <ItemTemplate>
          <tr>
            <td><%#Container.DataItem("companyname")%></td>
            <td><%#Container.DataItem("contactname")%></td>
            <td><%#Container.DataItem("address")%></td>
            <td><%#Container.DataItem("city")%></td>
          </tr>
      </ItemTemplate>
      <FooterTemplate>
        </table>
      </FooterTemplate>
      </asp:Repeater>
    </form> <vista>
  </body>
</html>
Plataforma Sistema operativo Servidor Web Servidor de BBDD Lenguaje de desarrollo Lenguaje de origen

LAMP

Linux

Apache

MySQL

PHP, Perl, Python

_C, …​

Java 2

*

*

Java Data Base Connection (JDBC)

Java Server Page (JSP)

Java

.Net

Windows

Internet Information Services (IES)

SQL Server

Active Server Page (ASP)

Basic

Arquitecturas Web

Arquitectura Física

Rol Capa física Componente Arquitectura de 3 capas

Vista

Capa cliente

Navegador Web

  • Hardware, cumple los criterios del reparto de responsabilidades propio de la arquitectura MVC

  • Software, internamente, los script desarrollados entreveran líneas de código de la presentación (HTML) con la lógica (Java/C/Basic) y los datos (SQL)

Controlador

Capa Lógica o de Negocio

Servidor Web

Modelo

Capa de Datos

Servidor de BBDD

Frameworks del Back-end

Con servidor de aplicaciones Sin servidor de aplicaciones
arquitecturaMVCServidorConAplicaciones
arquitecturaMVCServidorSinAplicaciones

Frameworks del Front-end

arquitecturaMVCCliente

  • Basados en estándares Web:

    • librerías para el desarrollo de sitios web con bastante interacción con el cliente

    • donde se hace un uso intensivo de Javascript, Ajax, etc.

    • Te permite desarrollar en Javascript atendiendo a patrones, con una variante del paradigma MVC

    • facilitan las pruebas

Web 2.0

Previo a la Web 2.0

  • Burbuja de las punto.com: corriente económica especulativa muy fuerte que se dio entre 1997 y 2001, en la cual las bolsas de valores de las naciones occidentales vieron un rápido aumento de su valor debido al avance de las empresas vinculadas al nuevo sector de Internet y a la llamada Nueva Economía. La existencia de una sobrevaluación de ciertas acciones de empresas tecnológicas alimentada con fines especulativos.

  • Resurgir de estas políticas de empresas punto.com pero con ideales empresariales mucho más organizados y no como pequeñas mega empresas que aparecen y desaparecen del mercado en un abrir y cerrar de ojos

Orígenes de la Web 2.0

  • Web 2.0. Definido en 2004 por Dale Dougherty de O’Reilly Media y Craig Cline de MediaLive: O’Reilly Media

  • Es una evolución de Web 1.0 con un cambio de actitud en los modelos de negocio y no en las tecnologías que ya existían previamente al concepto, exceptuando Ajax pero es una combinación de varias. Afecta al usuario y al desarrollador

web20

  • Benner-Lee lo tilda de una simple jerga porque su definición estaba contemplada como objetivos de la Web original

  • No es una definición formal, es un núcleo gravitacional: un aplicación Web puede estar más o menos cerca del concepto de Web 2.0. La aplicación Web debe cumplir varias clavesdel centro gravitacional (principios, competencias y/o patrones de diseño):

Claves de la Web 2.0

Orientado a servicios

-Aplicaciones Web nativas, sin ventas ni licencias ni portabilidades, entregada como servicios, no como productos/paquetes software. Modelos de negocio Web:

  • Web 1.0: Netscape, Lotus, Microsoft, Oracle o SAP

  • Web 2.0: Google, eBay, Amazon o Napster

Ejemplo Web 1.0: Ejemplo Web 2.0:

  • La estrategia de Netscape era en términos del viejo paradigma del software:

    • Distintas versiones del navegador

    • Dominio en el mercado de navegadores para controlar los estándares de visualización y contenidos

    • Imitó el modelo de Microsoft con los PC pero en la Web: del desktop del PC al webtop de la Web poblado de información y applets en los servidores de Netscape

    • Pero los navegadores y servidores resultaron commodities (productos genéricos, básicos y sin mayor diferenciación entre sus variedades)

  • La estrategia de Google es en términos del nuevo paradigma del software:

    • Gestión de base de datos especializada donde el valor del software es proporcional a la escala y al dinamismo de los datos que ayuda a gestionar

    • Ocupa el espacio que se encuentra entre el navegador, el motor de búsqueda y el servidor de contenido destino, como un habilitador o intermediario entre el usuario y su experiencia on-line

La larga cola

  • Hacer uso del autoservicio del cliente y de la gestión de datos algorítmica para llegar a toda la web, hasta los extremos y no sólo al centro, a la “larga cola” y no solo a la cabeza

  • El poder colectivo de los sitios pequeños que conforman la gran mayoría del contenido de la Web.

marketplace

Ejemplo Web 1.0:

Ejemplo Web 2.0:

La estrategia de DoubleClick:

  • Servicio de atención y administración de tecnología on-line para agencias publicitarias

  • Modelo tradicional de publicación, no de participación, atendiendo a que la Web está dominada por sitios en la cima según estadísticas (MediaMetrix):

    • Con contrato formal de venta limitando su mercado

    • El lugar y formato (banners y popups) de la publicidad lo deciden los publicistas, no los consumidores

    • 2000 implementaciones exitosas

La estrategia de Yahoo Search Marketing y Google AdSense:

  • Nuevo modelo de participación:

    • Los webmasters activan publicidad en sus páginas administradas por Google y generan ingresos basándose en los clicks de los usuarios

    • Dan servicio a centenares de millares de publicistas

  • Permiten la colocación del anuncio prácticamente en cualquier página web con formatos de texto poco intrusivos, sensibles al contexto y amigables para el consumidor evitando los formatos de los publicistas

Ejemplo Web 1.0:

Ejemplo Web 2.0:

La estrategia de Akami:

  • Servicio de computación distribuida para mitigar la congestión de redde sitios con mucha demanda de contenidos sobre una plataforma de 16.000 servidores

  • Problemas de escalabilidad cuando crece el número de clientes

  • Modelo hibrido: servicio para la cola de usuarios y contrato con la cabeza, no con la cola

La estrategia de Napster, eDonkey y BitTorrent:

  • Servicio de distribución de contenidos descentralizado porque cada cliente es también un servidor y los archivos están subdivididos en fragmentos que se pueden servir desde múltiples localizaciones.

  • Pioneros de P2P, sin problemas de escalabilidad

  • El servicio mejora automáticamente cuanta más gente lo use porque cada consumidor aporta sus propios recursos al grupo.

La Web como plataforma

  • La combinación de claves anteriores consolidan la Web como plataforma:

    • Orientado a servicios y

    • Comunidad total como cliente potencial (“larga cola”)

theWeb
Ejemplo Web 1.0:

  • Microsoft como plataforma :

    • Solución a problemas de la era del PC con condiciones iguales para todos los desarrolladores de aplicaciones con multitud de problemas que previamente habían asediado a la industria.

    • Constituido en único suministrador de software cuya base instalada con su sistema operativo y API’s integrados le proporcionan el control.

    • Representa la cumbre del control propietario y una única solución monolítica controlada por un solo proveedor ya no es una solución, es un problema.

    • Desplazó con aplicaciones: Lotus 1-2-3, WordPerfect y Netscape Navigator

  • Sistema sin un dueño, agrupado mediante una serie de protocolos, estándares abiertos y acuerdos de cooperación

  • El choque:

    • No es entre una plataforma y una aplicación. Apache se aferró a los estándares de la web y ha prosperado.

    • Es entre una plataforma frente a otra plataforma y la resolución será para qué plataforma, qué arquitectura y qué modelo de negocio se ajuste más a la oportunidad que se presenta por delante.

Arquitectura implícita de la participación

Ejemplos:

  • Ética de cooperación inherente en la que el servicio actúa sobre todo como un intermediario inteligente, conectando los extremos entre sí y aprovechando las posibilidades que ofrecen los propios usuarios.

  • Arquitecturas de datos (The Cornucopia of the Commons): cada usuario ayuda automáticamente a construir el valor de la base de datos compartida para servir cualquier música que fuera descargada como Napster pero sin clasificar frente a clasificaciones taxonómicas como en Yahoo! pagando a usuarios o en Open Directory Project con voluntarios.

  • Arquitecturas software: proyectos de Software Libre con un núcleo pequeño, mecanismos de extensión bien definidos, y una aproximación que permite que cualquier persona agregue cualquier componente que demuestre un buen comportamiento.

  • Arquitecturas físicas: P2P en Napster, eDonkey y BitTorrent frente a Akami que debe agregar servidores para mejorar el servicio.

Confianza en las contribuciones de los usuarios

  • Las externalidades de red derivadas de las contribuciones del usuario son la clave para el dominio del mercado en la era de la Web 2.0.

Ejemplos de éxito:

  • Yahoo!

    • Servicio global para consumidores y negocios con un portal Web,un directorio Web y una serie de servicios: correo electrónico, …

    • El directorio web es un sitio que contiene un directorio organizado de enlaces a otros sitios web, con una estructura de categorías y subcategorías

    • Su contenido es el resultado del trabajo colectivo de millares de usuarios de la web y después millones

  • Amazón:

    • Venta de productos como otros competidores Barnesandnoble.com

    • Recibe las mismas descripciones del producto, imágenes de cubierta y contenido editorial de sus proveedores.

    • Añade un orden de magnitud con la gestión del usuario que tienen invitaciones para participar de diversas maneras en prácticamente todas las páginas

    • Sus beneficios aventajan a los de sus competidores

  • Wikipedia:

    • Enciclopedia on-line basada en la idea “inverosímil” de que una entrada puede ser agregada por cualquier usuario y corregida por cualquier otro.

    • Inspirado en el proyecto de software libre (“con ojos suficientes, todos los fallos son superficiales” - Eric Raymond)

    • Posicionada entre las 100 webs más visitadas y posiblemente estará entre las 10 de la cima. Muy por encima de la Enciclopedia Británica, gratuita durante un periodo, una de las más grandes pero que no permite la modificación ni interacción alguna.

  • del.icio.us:

    • Servicio de marcapáginas (bookmark) de sitios web favoritos accesible desde cualquier sitio evitando migraciones.

    • Permite la clasificación colaborativa de sitios usando etiquetas libremente elegidas por los usuarios (marcador social)

    • Las etiquetas (tags) definen metadatos que asocian característica a páginas Web

    • Implantado mediante microformatos que son conjuntos de formatos de datos abiertos y simples, desarrollados sobre estándares.

    • folksonomía (conjunto de personas que colaboran de forma espontánea con el objetivo de organizar la información en diferentes categorías) frente a las taxonomías (clasificación de carácter científico)

  • Cloudmark Desktop One :

    • Servicio de protección de correos frente a spam (correo basura), virus, phishing (password harvesting fishing - cosecha y pesca de contraseñas) y similares.

    • Los usuarios marcan los mensajes como indeseado y se envía un patrón de dicho mensaje a los servidores. Cuando suficientes miembros de la comunidad han marcado el mismo mensaje como indeseado, ese mensaje será bloqueado de manera automática para el resto de los usuarios.

    • Tiene una efectividad del 98%

  • Flickr:

    • Servicio de compartición de fotografías que permite la creación de álbumes presentados como diapositivas.

    • Comunidad de fotógrafos profesionales y amateurs que se dan a conocer.

    • Incorpora etiquetas como para permitir búsquedas que relacionan la imagen con otras imágenes que llevan la misma etiqueta almacenando más de 2000 M de fotografías clasificadas por folksonomías frente a las taxonomías de jerarquías en carpetas, centros de documentación, bibliotecas

nubePalabras

  • Las nubes de etiquetas (tag clouds) son una representación visual de las etiquetas de un sitio web, de modo que los temas más frecuentes en el sitio se muestren con mayor prominencia con el tamaño de la fuente y/o color

Fuentes de datos únicos y difíciles de replicar

La gestión de bases de datos es una competencia básica de las compañías Web 2.0: infoware

  • Toda aplicación significativa de Internet ha sido desplazada por una base de datos especializada:

  • la base de datos de enlaces de Google,

  • el directorio de Yahoo! (y su base de datos de enlaces),

  • la base de datos de productos y comentarios de Amazon,

  • la base de datos de vendedores y compradores de eBay,

  • la base de datos distribuida de canciones de Napster

  • La competición se centra en poseer ciertas clases de datos clave: localización, identidad, identificadores de producto, agenda de acontecimientos públicos:

    • En muchos casos, cuando crear los datos supone un coste significativo, puede existir una oportunidad para aplicar un juego del estilo Intel Inside, con una única fuente para los datos.

    • En otros, el ganador será la compañía que alcance antes una masa crítica mediante la agregación de usuarios, y convierta esa agregación de datos en un sistema de servicios.
Ejemplos Web 1.0: Ejemplos Web 2.0:

  • MapQuest:

    • Pionero en el sector de los mapas web en 1995.

    • No propietario pero basado en la base de datos NavTeq de TeleAtlas con una inversión de 750 M$ para construir su contenido de direcciones de calles y de itinerarios. Similar a Digital Globe que invirtión 500 M$ en su propio satélite.

    • No particularizó ni enriqueció los datos con la participación de los usuarios ni de ninguna otra manera

    • Desplazada por Yahoo! Maps, Google Maps y Bing Maps de Microsoft al incorporarse al mercado ofreciendo fácilmente una alternativa licenciando los mismos datos.

Amazón:

  • enriqueció incansablemente los datos de sus suministradores:

    • Introdujo su propio identificador propietario, ASIN, que equivale al ISBN cuando éste está presente y crea una asignación de nombres equivalente para los productos sin identificador.

    • Hoy es la fuente principal de datos bibliográficos, no Bowker, referencia para eruditos y bibliotecarios.

  • eBay:

    • con la ventaja competitiva proviene casi enteramente de la masa crítica de compradores y de vendedores, que convierte a cualquier nuevo competidor que ofrezca servicios similares menos atractivo significativamente:

    • Intermediario automático entre individuos para transacciones de valor reducido.

  • La conciencia de que la principal fuente de ventaja competitiva de las compañías es el control de los datos puede disparar la preocupación del usuario por la privacidad y los derechos con respecto a sus propios datos.

  • El auge de datos propietarios ha provocado el movimiento Free Data al igual que el auge del software propietario provocó el movimiento Free Software:

    • Wikipedia y Flickr bajo licencias GNU.

    • Creative Commons, organización no gubernamental sin ánimo de lucro que desarrolla planes para ayudar a reducir las barreras legales de la creatividad, por medio de nueva legislación y nuevas tecnologías

Algunos derechos reservados

Ejemplos:

  • La protección de la propiedad intelectual limita la reutilización e impide la experimentación.

    • Gran parte del software útil es realmente software abierto

    • Incluso cuando no lo es, debe tener poca protección de la propiedad intelectual lo que se conoce como "algunos derechos reservados" popularizado por Creative Commons

  • La opción del navegador web "Ver código fuente“ hizo posible que cualquier usuario copiara la página web de cualquier otro usuario.

    • RSS fue diseñado para permitir al usuario visualizar el contenido que quiera y cuando lo desee, no según lo que dicte el proveedor de información.

    • Los servicios web más exitosos son los que han sido más fáciles de llevar en nuevas direcciones inimaginables para sus creadores.

  • La combinación de modelos de programación ligera con licencias con las mínimas restricciones posibles posibilita:

    • Fomentar la disposición de la Web para la reutilización.

    • Innovar con el ensamblado cuando los componentes commodities son abundantes, permite crear valor simplemente remezclándolos de forma novedosa o eficaz.

    • Permitir oportunidades a compañías para superar la competencia siendo mejores en el aprovechamiento y la integración de los servicios proporcionados por otros.

    • Beneficiarse de la adopción colectiva, no de la restricción privada.

  • Mashup es un sitio web híbrido que de forma transparente combina contenidos de más de una fuente de un modo integrado.

    • Ejemplos:

      • Google Maps ha desplazado a Navteq del papel de fuente de datos gracias a su API en AJAX frente a otros servicios web “pesados” provistos por GIS como ESRI, MapQuest y Microsoft MapPoint

      • HousingMaps obtiene información de Google Maps y de Craiglist (red centralizada de comunidades urbanas que ofrecen anuncios clasificados gratis de empleo, vivienda, sentimentales, … con 20M de visitas al mes) para ofrecer un servicio de localización interactiva para venta/alquiler de viviendas.

Inteligencia colectiva

  • Los hipervínculos constituyen los cimientos de la web. A medida que los usuarios agregan nuevo contenido y sitios web nuevos, se enlazan con la estructura de la web gracias a otros usuarios que descubren el contenido y enlazan con él.

  • De forma muy parecida a la sinapsis del cerebro, donde las asociaciones llegan a ser más fuertes a través de la repetición o la intensidad, la red de conexiones crece orgánicamente como resultado de la actividad colectiva de todos los usuarios de la web.

Ejemplos:

  • Google:

    • El algoritmo de búsqueda de su buscador (PageRank) está basado en la propia estructura de enlaces de la web en lugar de usar sólo las características de los documentos.

      • Aprovechando la inteligencia colectiva subyacente en los enlaces entre las páginas, le convirtió en el líder indiscutible del mercado de la búsqueda proporcionando los mejores resultados respecto a otros buscadores basados en categorías.

  • Sistemas de votos:

    • Mediante widgets (window gadget – herramienta de ventana) “Me gusta” de Facebook, “Follow” de Twiter o “+1” de Google emergen los sitios de interés colectivos.

  • Sindicación:

    • RSS permite que un sitio no sólo se enlace con una página, sino suscribirse a la misma, con notificaciones cada vez que la página cambia (blogs, cotizaciones de bolsa, meteorología, …). De esta manera, es un enlace mucho más fuerte que un bookmark o un enlace a una página concreta: enlaces permanentes (permalinks).

    • Produce la web incremental o web viva donde lo que es dinámico no son sólo los contenidos de las páginas sino los enlaces.

    • El permalink fue el primer y más acertado mecanismo para construir puentes entre blogs y pasar de publicar simplemente a un caos informal de comunidades solapadas que permite discutir directamente acerca de una nota sumamente concreta de un sitio.

La versión beta perpetua

Los usuarios deben ser tratados como co-desarrolladores:

Los lenguajes de scripting desempeñan un papel fundamental:

  • Considerando las prácticas de desarrollo del software abierto incorporando nuevas funcionalidades mensual, semanal o diariamente (incluso cada media hora en Flickr) en alguna parte del sitio web y si los usuarios no las adoptan, se eliminan. Si les gustan, se introducen en todo el sitio web.

  • La herramienta elegida por los administradores de sistemas y redes, así como por los desarrolladores de aplicaciones que implementan sistemas dinámicos que requieren cambios constantes

Modelos de programación ligeros

Fomentar API’s de sitios web con: Ejemplos:

  • Servicios Web “ligeros” basados en la web original, REST o AJAX débilmente acoplados, cuando sea posible, frente a servicios Web “pesados” basados en la complejidad de la pila de protocolos SOAP con alto acoplamiento

    • Sindicación con servicios web “simples” basados en RSS o Atom, porque tratan los datos hacia el exterior, sin controlar lo que sucede cuando llegan al otro extremo de la conexión (Principio extremo a extremo -end-to-end – inherente en Internet).

  • API’s de eBay, Google y Yahoo!

    • Amazon proporciona de dos API’s: una “pesada” basada en SOAP y otra “ligera” basada en RESP. El 95% del uso corresponde al servicio ligero de tipo REST

  • Los modelos de negocio ligeros son concomitantes con la programación ligera y las conexiones ligeras.

Experiencia enriquecedoras de usuario

  • Tras la I Batalla de Navegadores, se han estabilizado losestándares y se abre actualmente un período sin precedentesen cuanto a la innovación en el campo de las interfaces de usuario, ya que los desarrolladores web pueden finalmenteconstruir aplicaciones web con interfaces de usuario tan ricascomo las de las aplicaciones locales de PC

    • Ejemplos:

      • procesadores de texto como Writely de Google

      • aplicaciones de escala empresarial como el CRM (gestión de la relación con los clientes) como Salesforce.com

  • Futuro inmediato:

    • aplicaciones verdaderamente novedosas: cliente de comunicaciones integrado que combine lo mejor del correo electrónico, la mensajería instantánea, el teléfono móvil, usando VoIP para agregar servicios de voz, …

    • aplicaciones que aprendan de sus usuarios, usando una arquitectura de participación para construir una abrumadora ventaja derivada no sólo de la interfaz software sino de la riqueza de los datos compartidos.

Software no limitado a un dispositivo

Ejemplos:

  • iTunes de Apple con iPod: desde un dispositivo portátil a un servidor web con el PC actuando como caché local y estación de control.

  • TiVo con TV: graba el contenido sobre un disco duro permitiendo almacenar entre 80 y 300 horas de programación recibida a través de cualquier medio

  • Futuro: coches, flash mobs (grupos de gente que se reúnen de improviso en un sitio público para llevar a cabo y luego se dispersan), …

Mapa meme

  • “Mapa meme” es la visualización de una unidad teórica de información cultural transmisible una generación a la siguiente

mapaMeme

Comparativa de la Web 1.0 vs la Web 2.0

  • Bajo el control del webmaster (“Jardines vallados”)

  • Dotadas de libertad yautor regulación (“Camposabiertos”) con la democratización de la edición

  • Escasos tecnólogos productores de contenidos sin actualización sistemática

  • Multitud de productores de contenidos fácilmente editables actualizados según su implicación

  • Basada en la inteligencia individual de algunos expertos

  • Basada en la inteligencia colectiva de la sabiduría de la multitudes

  • Web Informativa mediante la descarga del conocimiento

  • Web Social mediante la remezcla del conocimiento

  • Centrada en la navegación del usuario mediante solo lectura

  • Centrada en la comunicación del usuario mediante lectura/escritura,

  • Usuarios pasivos consumidores de contenidos.

  • Usuarios activos prosumidores (productor/consumidor) de contenidos.

  • Interacción mínima reducida a formularios de contacto, inscripción boletines, … (“Te lo doy hecho”)

  • Interacción máxima mediante la personalización y la adaptación a la idiosincrasia del usuario (“Hazlo tú mismo”).

webs

  • Importancia del aspecto estético de la presentación visual.

  • Importancia de la sencillez y potencia de la presentación para la experiencia de usuario.

  • Sensación de institucionalidad, impersonalidad y formalismo

  • Sensación de humanidad, personalización e informalidad.

  • Portavoz de entidades institucionales o comercio

  • Punto de encuentro para modelos participativos, colaborativos, transparentes, abiertos y flexibles

  • Éxito depende del número de visitas

  • Éxito depende del número de usuarios que aumentan el valor y contenido del sitio

  • Campañas publicitarias

  • Publicidad viral por la calidad del servicio

  • Fue creada por científicos desde la cabeza

  • Es creada por la sociedad, desde el corazón

  • La Web 1.0 es populista, el Big Bang, la carrera loca de los pioneros por plantar su bandera en los nuevos territorios

  • La Web 2.0 es cuando los hijos de los pioneros empiezan a poner postes de teléfonos, llegan los "caballos de hierro"

La filosofía Web 2.0 está soportada por nuevos modelos sobre sobre fuentes de información soportadas por las tecnologías de la Web 1.0.

platform

Posterior a la Web 2.0

Propuestas

Existen multitud de propuestas con resultados incipientes:

  • Web 3D como una extensión que incluye mundos virtuales similar a SecondLife.

  • Web Multimedia con búsquedas por similitud de contenidos no textuales

  • Web Omnipresente que estará en todos lados: coches, ropa, ventanas, electrodomésticos, …

  • …

La Web semántica

Propuesta por Beners-Lee (W3C) a finales de los 90.

  • El objetivo es que el usuario podrá encontrar respuestas a sus preguntas de forma más rápida y sencilla gracias a una información mejor definida frente a los problemas ocasionados por una Web carente de semántica (Web sintáctica) en la que el acceso a la información se convierte en una tarea difícil y frustrante.

  • Es una Web extendida, dotada de mayor significado basándose en metadatos mediante lenguajes estándar.

Comparativa

Web sintáctica (Web 1.0 y W 2.0): Web semántica:

  • Caracterizada por la sobrecarga de información y la heterogeneidad de fuentes de información.

  • Produce problema de interoperabilidad.

  • No se trata de una inteligencia artificial sino de la habilidad de una máquina para resolver problemas bien definidos, a través de operaciones bien definidas que se llevarán a cabo sobre datos existentes bien definidos con software capaz de procesar su contenido, razonar con éste, combinarlo y realizar deducciones lógicas para resolver problemas cotidianos automáticamente.

Elementos

Ejemplos

  • RDF es marco de descripción de recursos que proporciona informacióndescriptiva simple sobre los recursos que se encuentran en la Web.

 
<?xml version="1.0"?>
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:contact="http://www.w3.org/2000/10/swap/pim/contact#">
<contact:Person rdf:about="http://www.w3.org/People/EM/contact#me">
<contact:fullName>Eric Miller</contact:fullName>
<contact:mailbox rdf:resource="mailto:em@w3.org"/>
<contact:personalTitle>Dr.</contact:personalTitle>
</contact:Person>
</rdf:RDF>

  • OWL es un lenguaje para definir ontologías que definen los conceptos básicos y la relación entre ellos para describir y representar un área de conocimiento

 
<owl:Class rdf:ID="WineDescriptor”/>
<owl:Class rdf:ID="WineColor">
<rdfs:subClassOf rdf:resource="#WineDescriptor" />
</owl:Class>
<owl:ObjectProperty rdf:ID="hasWineDescriptor">
<rdfs:domain rdf:resource="#Wine" />
<rdfs:range rdf:resource="#WineDescriptor" />
</owl:ObjectProperty>
<owl:ObjectProperty rdf:ID="hasColor">
<rdfs:subPropertyOf rdf:resource="#hasWineDescriptor" />
<rdfs:range rdf:resource="#WineColor" />
</owl:ObjectProperty>

  • SPARQL es lenguaje de consulta sobre RDF y OWL que permite realizar búsquedas sobre los recursos de la Web Semántica

 
PREFIX table: http://www.daml.org/2003/01/periodictable/PeriodicTable#
SELECT ?name
FROM http://www.daml.org/2003/01/periodictable/PeriodicTable.owl
WHERE { ?element table:name ?name. }

  • Web semántica […] es una red de datos que pueden ser procesados directa o indirectamente por máquinas” [Beners-Lee, 1999]

webSemantica

Ejemplos:

  • DBpedia es un conjunto de datos extraído de Wikipedia que contiene unos 3,4 millones de conceptos descritos por 1000 M de tripletas que incluyen resúmenes en once idiomas

  • DBLP (Digital Bibliography & Library Project) ofrece su base de datos de 500 M

  • GeoNames provee más de 7.500.000 caracterisiticas geográficas del mundo

La Web N.0

Son hipótesis de futuro y no existe un acuerdo en suc definición:

  • Web 3.0 : Web del conocimiento como resultado de la combinación de la Web semántica con Agentes de Inteligencia Artificial.

  • Web 4.0: Web ubicua donde tanto las personas como las cosas se comuniquen entre sí para generar la toma de decisiones.

webN0

Sintesis

sintesis

Bibliografía

Obra, Autor y Edición Portada Obra, Autor y Edición Portada

  • Wikipedia

    • Jimmy Wales, Larry Sanger, y la comunidad

    • 15 de enero de 2001

Wiki

Ponente

  • Luis Fernández Muñoz

setillo

  • Doctor en Inteligencia Artificial por la UPM

  • Ingeniero en Informática por la UMA

  • Diplomado en Informática por la UPM

  • Profesor Titular de ETSISI de la UPM