Aplicaciones WEB

De clientes ligeros... a clientes ligeros WEB.

Jose Ramón Palacios

jotarp.org

Clientes ligeros

La capacidad de proceso (software y hardware) reside en el servidor.

Ventajas:

Menor coste hardware
Mantenimiento centralizado

Inconvenientes:

Latencia
Mantenimiento centralizado

Ejemplos: telnet, X11, VNC... web.

Client (computing): definición en en.Wikipedia.org
Cliente liviano: definición en es.Wikipedia.org

Clientes pesados

La capacidad de proceso (software y hardware) reside en el cliente.

Ventajas:

Menor requerimiento de red
Descentralización

Inconvenientes:

Coste hardware y software
Descentralización

Cliente pesado: definición en es.Wikipedia.org

La WEB

La WEB como cliente ligero.

Cliente: HTML

Hipertexto

Servidor: LAMP

L: Linux
A: Apache
M: MySQL
P: Perl, PHP, ... Python, Ruby

PHP-NUKE: el omnipresente. !?
drupal: content management platform.

La WEB: servidor

Programación en el servidor.

Problemas:

Spaguetti: PHP+HTML
Dependencias rígidas: MySQL, versión PHP, ...

Soluciones:

Plantillas: Programación (PHP) «» Presentación (HTML) !?
Plantillas: Lógica negocio «» Lógica presentación
Patrón MVC
ADOdb: Database Abstraction Library (PHP & Python).
Frameworks

MVC en PHP: ¿ProductController extends ProductView? !?
MVC: MVC en tres pasos, en PHP y sin objetos (y nada más).
Plantillas en PHP: Beyond The Template Engine

La WEB "crece"

Cliente: procesamiento, definición interfaz

Applets Java, Flash.
DHTML:

Estructura: HTML 4.0, XHTML
Estructura: DOM (Document Object Model)
Presentación: CSS (Cascading Style Sheets)
Comportamiento: JavaScript

Servidor: nuevos lenguajes

J2EE
Ruby on Rails

CSS Zen Garden: Ejemplos de CSS

Ejemplo sencillo DHTML
DHTML Tutorial

Edición in situ
Juego en CSS
BOR: ejemplo de DHTML. Mala degradación. JavaScript intrusivo.
Sorttable: tablas HTML ordenables. Buena degradación. JavaScript no intrusivo.

XUL: definición en es.Wikipedia.org
robin: Escritorio XUL
MAB: aplicación XUL

JavaScript

Problemas con JavaScript

Problemas:

Spaguetti: HTML+CSS+JavaScript
JavaScript no disponible
Diferencias entre navegadores
Depuración

Soluciones:

JavaScript no intrusivo
Degradación
Librerias (Prototype, etc)
Herramientas (Inspector DOM, shell)

telefonicaonline.com: Ejemplo de página en dónde JavaScript es imprescindible.

DOM Inspector: Extensión Firefox.
Shell JavaScript
Tutorial JavaScript. Presentación.

AJAX

(Anteriormente: Remote Scripting con IFRAME)

Asynchronous JavaScript + XML

DHTML: Manipulación arbol DOM
... + XMLHttpRequest

Objetivo: evitar recarga la página.

Ejemplo:

Google Suggest

AJAX: definición en es.Wikipedia.org
Ajax: A New Approach to Web Applications. Artículo original de Jesse James Garrett
Traducción del artículo de Garrett
Ajax y el problema del posicionamiento en buscadores: malinterpretando lo que AJAX es. !?

Xmlhttprequest: definición en en.Wikipedia.org

EJEMPLOS

Google Suggest. Comprobar degradación.
Google Local. Comprobar degradación.
del.icio.us
Demos en script.aculo.us
Webnote: post-it para web programado en python.

Web 2.0

Diferentes nombres para... ¿lo mismo?:

DHTML
AJAX
RIA: Rich Internet Application
WEB 2.0
Aplicaciones Live

Página inicio: Google, Netvibes, ...
Procesador de texto: Writely, Writeboard, ...
Hoja de cálculo: Num Sum, ...
Chat: Meebo, ...
Presentaciones: S5, ...

Slashdot | The Best of Web 2.0

AJAX y Client/SOA

Problemas con AJAX

Problemas:

Latencia

Soluciones:

Proceso en servidor
Client/SOA

Latencia en AJAX: Video que muestra como la latencia puede afectar a aplicaciones AJAX.
Servicio Web: definición en es.Wikipedia.org
Client/SOA: definición en en.Wikipedia.org
Two kinds of AJAX: HTML++ vs Client / SOA: Artículo sobre AJAX y Client/SOA

Haro / 14-Marzo-2006