Tu portal de
formación online
United States

Infórmate
Inicio » Catálogo » Curso de Internet 2.0 Utilidades » Evolución de la Web

Curso de Internet 2.0 Utilidades

Evolución de la Web

De acuerdo con Tim O'Reilly [4], la Web 2.0 puede ser comparada con la Web 1.0 de esta manera:

Web 1.0 Web 2.0
DoubleClick Google AdSense
Ofoto Flickr
Akamai BitTorrent
mp3.com Napster
Enciclopedia Británica Wikipedia
Webs personales Blogging
Evite upcoming.yahoo.com y eventful
Especulación de nombres de dominio Optimización de los motores de búsqueda
Páginas vistas Coste por clic
Screen scraping Servicios web
Publicación Participación
Sistema de gestión de contenidos Wiki
Directorios (taxonomía) Etiquetas (Tags) (folcsonomía)
Stickiness Redifusión


Tecnologías que apoyan la Web 2.0

Las siguientes tecnologías dan vida a un proyecto Web 2.0:

Transformar software de escritorio hacia la plataforma del web

Esto es posible gracias a los Servicios Webs (un servicio web -en inglés Web service- es un conjunto de protocolos y estándares que sirven para intercambiar datos entre aplicaciones. Distintas aplicaciones de software desarrolladas en lenguajes de programación diferentes, y ejecutadas sobre cualquier plataforma, pueden utilizar los servicios web para intercambiar datos en redes de ordenadores como Internet.), programas que residen en los servidores de internet y son accesibles por los usuarios a través del navegador, programa instalado por defecto en todos los sistemas operativos.

Respeto a los estándares como el XHTML

XHTML, acrónimo inglés de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web.

Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de presentarla estén claramente separadas.

Separar el contenido del diseño con uso de hojas de estilo

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

Por ejemplo, el elemento de HTML <H1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como <H2>.

Cuando se utiliza CSS, la etiqueta <H1> no debería proporcionar información sobre como va a ser visualizado, solamente marca la estructura del documento. La información de estilo separada en una hoja de estilo, especifica cómo se ha de mostrar <H1>: color, fuente, alineación del texto, tamaño, y otras características no visuales como definir el volumen de un sintetizador de voz, por ejemplo.

De esta forma, para diseñar una página o un sitio web completo, tenemos las páginas HTML que correspondan y una o varias hojas de estilo que indican las características de los elementos de las páginas HTML. Al tener definidos estos elementos visuales (como tamaño de letra, color de los caracteres, etc.) de la página separado del código de la página, podemos cambiarlo fácil y rápido.

Un ejemplo extremo nos lo proporcionan este conjunto de páginas:

http://www.csszengarden.com/tr/espanol/

http://www.csszengarden.com/tr/espanol/?cssfile=/213/213.css&page=0

http://www.csszengarden.com/tr/espanol/?cssfile=/212/212.css&page=0

http://www.csszengarden.com/tr/espanol/?cssfile=/211/211.css&page=0

http://www.csszengarden.com/tr/espanol/?cssfile=/210/210.css&page=0

http://www.csszengarden.com/tr/espanol/?cssfile=/209/209.css&page=0

http://www.csszengarden.com/tr/espanol/?cssfile=/208/208.css&page=0

http://www.csszengarden.com/tr/espanol/?cssfile=/207/207.css&page=0

http://www.csszengarden.com/tr/espanol/?cssfile=/206/206.css&page=0

...

Y así sucesivamente hasta llegar a la página http://www.csszengarden.com/tr/espanol/?cssfile=/001/001.css&page=0.

En total 213 páginas distintas construidas con el mismo archivo HTML (¡el contenido de la página es el mismo en todas!), variando únicamente la hora de estilos CSS.

Sindicación de contenidos

Se utiliza para suministrar información actualizada frecuentemente a suscriptores del servicio correspondiente.

El formato permite distribuir contenido sin necesidad de un navegador, utilizando un software diseñado para leer estos contenidos RSS (agregador).

A pesar de eso, es posible utilizar el mismo navegador para ver los contenidos RSS. Las últimas versiones de los principales navegadores permiten leer los RSS sin necesidad de software adicional. RSS es parte de la familia de los formatos XML desarrollado específicamente para todo tipo de sitios que se actualicen con frecuencia y por medio del cual se puede compartir la información y usarla en otros sitios web o programas. A esto se le conoce como redifusión web o sindicación web

Ejemplo de programa agregador de contenidos es RSSOWL (con licencia GPL) y algunos servicios web que proveen esta misma funcionalidad pueden ser Netvibes y Google Reader.

En los dos últimos, una vez que te has creado una cuenta, puedes suscribirte a todas las páginas que tengan este servicio de sindicación de contenidos (RSS).

Los símbolos que se suelen utilizar para indicar este servicio son:

y muchos más. Estos son sólo un ejemplo de los símbolos que podemos encontrar para suscribirnos a una página web.

También es común que aparezcan varios servicios juntos, para elegir uno:

O también en este otro formato:

Este es el estilo utilizado por Feedburner, un servicio para generar suscripciones RSS.

Ajax (javascript ascincrónico y xml)

AJAX no es una tecnología, sino la unión de varias tecnologías que juntas pueden lograr cosas realmente impresionantes como GoogleMaps, Gmail o algunas otras aplicaciones menos conocidas como Google Suggest.

AJAX, en resumen, es el acrónimo para Asynchronous JavaScript + XML y el concepto es: Cargar y renderizar una página, luego mantenerse en esa página mientras scripts y rutinas van al servidor buscando, en segundo plano, los datos que son usados para actualizar la página solo re-renderizando la página y mostrando u ocultando porciones de la misma.

Échale una mirada a Google Suggest. Mira la forma en que los términos sugeridos se van actualizando a medida que uno teclea casi instantáneamente. Ahora mira Google Maps. Haz zoom. Usa el cursor para agarrar el mapa y navegarlo un poco. Otra vez, todo sucede casi instantáneamente, sin esperar que las páginas se recarguen.

Uso de Flash, Flex o Lazlo

Adobe Flash es una aplicación en forma de estudio de animación que trabaja sobre "Fotogramas" destinado a la producción y entrega de contenido interactivo para diferentes audiencias alrededor del mundo sin importar la plataforma. Es actualmente escrito y distribuido por Adobe Systems, y utiliza gráficos vectoriales e imágenes ráster, sonido, código de programa, flujo de vídeo y audio bidireccional (el flujo de subida sólo está disponible si se usa conjuntamente con Macromedia Flash Communication Server). En sentido estricto, Flash es el entorno y Flash Player es el programa de máquina virtual utilizado para ejecutar los archivos generados con Flash.

Página principal de Flash

Adobe Flex (hasta 2005 Macromedia Flex) es un término que agrupa una serie de tecnologías publicadas desde Marzo de 2004 por Macromedia para dar soporte al despliegue y desarrollo de Aplicaciones Enriquecidas de Internet, basadas en su plataforma propietaria Flash.

Los programadores tradicionales de aplicaciones ven como un desafío adaptar la metáfora de la animación sobre la plataforma con la cual fue originalmente construido Flash. Flex minimiza elegantemente este problema proveyendo un flujo de trabajo y un modelo de programación que es familiar a los desarrolladores de aplicaciones.

Página principal de Flex

OpenLaszlo es una plataforma de código abierto para el desarrollo y distribución de RIA Rich Internet Applications (Aplicaciones Ricas de Internet). Ha sido publicado bajo la licencia Common Public License, certificada por la Open Source Initiative.

La plataforma OpenLaszlo consiste en el lenguaje de programación LZX y el Servidor OpenLaszlo.

Página principal de OpenLaszlo

Uso de Ruby on Rails para programar páginas dinámicas

Rails es un completo entorno para desarrollar aplicaciones web con base de datos de acuerdo con la estructura modelo Vista-Controlador.

Para probarlo, sólo necesitas una base de datos y un servidor web.

Utilización de redes sociales al manejar usuarios y comunidades

Una red social es un sitio web que ofrece servicios y funcionalidad de comunicación diversos para mantener en contacto a los usuarios de la red.

Generalmente son temáticas, en el sentido que se dedican a ciertos aspectos de la vida cotidiana o aficiones (fotografía, video, relaciones de pareja, música, trabajo, etc.)

Las redes sociales habitualmente se basan en un software especial que integra numerosas funciones individuales (blogs, wikis, foros, chat, mensajería, etc.) en una misma interfaz y proporciona la conectividad entre los diversos usuarios de la red.

La red más importante de habla hispana es Tuenti.

Otras importantes son FaceBook, MySpace de las generalistas, Xing de las profesionales y Ning para crear tu propia red social en una tarde.

FaceBook

MySpace

Xing

Ning

Dar control total a los usuarios en el manejo de su información

Esta una de las claves más importantes: cuanto más control tenga el usuario sobre la información que maneja, más interactivo será el sitio y más '2.0' será.

Proveer APis o XML para que las aplicaciones puedan ser manipuladas por otros

Esta es otra clave que permite poder acceder a una aplicación desde otra, proveyendo unas herramientas que lo hacen posible.

Esto permite la creación de Mashups, que son sitios web o aplicaciones web que usan contenido de otras aplicaciones Web para crear un nuevo contenido completo, consumiendo servicios directamente siempre a través de protocolo http, a través de APIs.

Los mashups pueden ser divididos en cuatros grandes categorías: "mapas", "vídeo y fotos", "búsqueda y compras" y "noticias". Algunos ejemplos de cada categoría:

Mapas

Chicago Crime - El departamento de policía de Chicago tiene un mashup (http://gis.chicagopolice.org/CLEARMap_crime_sums/startPage.htm) que integra la base de datos del departamento de crímenes reportados con Google maps para ayudar a detener crímenes en ciertas áreas y avisar a los ciudadanos de áreas potencialmente más peligrosas.

WikiCrimes - WikiCrimes (http://www.wikicrimes.org) es un sitio web tipo wiki donde los usuarios de internet pueden reportar crímenes pinchando banderas en un mapa basado en Google Maps. El sitio distingue categorías dependiendo del color.

Vídeo y fotos

Flickr - Flickr es un sitio de almacenamiento de imágenes que permite a los usuarios organizar sus colecciones de imágenes y compartirlas. Utilizando su API el contenido puede ser usado en otros sitios creando mashups. Flickrvision (http://flickrvision.com) es un ejemplo.

Flickvision

Búsqueda y compras

Travature - Travature (http://www.travature.com) es un portal de viajes que ha integrado engines de meta búsquedas con guías de viaje tipo wiki y reviews de hotels. También permite compartir experiencias entre viajantes.

Noticias

Digg - Digg (http://digg.com/) es un mashup de varios sitios de noticias controlado casi enteramente por los usuarios del sitio.

Facilitar el posicionamiento con URL sencillos

Aplicaciones


Si desea obtener un acceso sin restricciones a los contenidos del curso de Internet 2.0 Utilidades y disfrutar de todas las herramientas del aula virtual (Videos explicativos streaming, acceso a los foros, chat, ejercicios resueltos, la ayuda del tutor, audioconferencia, estudio de grabación, test y actividades de autoevaluación, etc...) puede inscribirse completamente gratis y comenzar a realizar de forma inmediata el curso.
aaa