PDF de programación - Programación Web en cliente

Table of Contents

1. Introduction
2. Frameworks JS/AJAX: jQuery
i. Concepto de framework
ii. Ventajas e inconvenientes de los frameworks
iii. Introducción a jQuery
iv. Ejercicios
3. XML y JSON

i. El lenguaje XML
ii. El formato JSON
iii. Ejercicios

4. Frameworks AJAX: jQuery II

i. Elementos draggables en jQuery
ii. Elementos droppables en jQuery
iii. Temas gráficos en jQuery
iv. Elementos redimensionables en jQuery
v. Ventanas en jQuery
vi. Desplazadores en jQuery
vii. Ejercicios

5. Ajax: Integración con proyecto
6. Frameworks AJAX: jQuery III

i. Elemento sortable en jQuery
ii. Elemento Progressbar
iii. Elemento selectable en jQuery
iv. Tabs (pestañas) en jQuery
v. Autocomplete en jQuery
vi. Ejercicios

7. Complementos AJAX / WEB2.0.

i. iBox
ii. LightBox
iii. Compresión de ficheros web
iv. DHTML History
v. Ejercicios

8. Sindicación de contenidos RSS

i. ¿Que es RSS?
ii. ¿Donde podemos encontrar fuentes RSS
iii. ¿Que versiones de RSS existen?
iv. Como crear una fuente RSS 2.0
v. Desarrollar nuestro propio lector de RSS
vi. Magpierss, un lector RSS para PHP
vii. Ejercicios

9. Web services y AJAX

i. ¿Que es un Web Service?
ii. Funcionamiento de los Web services
iii. Introducción a NuSOAP
iv. Buscando un servicio Web
v. Leyendo un documento WSDL
vi. Desarrollar un cliente de servicios Web con NuSOAP
vii. Integración en una web con AJAX
viii. Ejercicios

Introducción

En este capítulo nos introduciremos en el mundo de la programación en el cliente (la que ejecutamos en el navegador del
usuario), haciendo especial mención a todo lo relacionado con AJAX y su uso conjunto con todo lo aprendido de HTML y
CSS.

También estudiaremos los diferentes formatos que se usan habitualmente para la comunicación entre aplicaciones cliente
y servidor (XML y JSON). Trabajaremos en varias sesiones con el framework Jquery y por último, utilizaremos técnicas y
tecnologías web conjuntamente con AJAX para lograr crear nuestras propias aplicaciones web.

Frameworks JS/AJAX: jQuery

A medida que se iba haciendo más común el uso de la tecnología AJAX en los sites y aplicaciones web, los
desarrolladores fueron creando sus propias funciones, objetos y librerías para tratar de una forma más rápida con el objeto
XMLHttp y todo el lenguaje Javascript en general. Como hemos estudiado en el apartado anterior, realizar un simple
petición AJAX puede necesitar varios fragmentos de código que ademas estarán diferenciados según el navegador la
mayoría de veces (recordar que ya simplemente la forma de crear el objetoXMLHttp es diferente para Microsoft Internet
Explorer y los demás navegadores). Con el fin de crear un conjunto estable y estandarizado de librerías que permita
trabajar de forma uniforme a todos los desarrolladores se crean los frameworks para AJAX y Javascript.

Concepto de framework

Un framework en el desarrollo del software es una estructura de soporte definida en la cual otro proyecto puede ser
organizado y desarrollado. Típicamente, un framework puede incluir soporte de programas, bibliotecas y un lenguaje
interpretado entre otros softwares para ayudar a desarrollar y unir los diferentes componentes de un proyecto. En nuestro
caso concreto vamos a estudiar el framework jQuery para AJAX y Javascript, es el segundo framework con el que se va a
trabajar en el este curso, recordar que en PHP ya hemos visto Codeigniter y más adelante estudiaremos la integración en
ambos.

Ventajas e inconvenientes de los frameworks

¿Porque usar un framework para JavaScript y Ajax en nuestras aplicaciones web? La gran mayoría de las razones que se
argumentaron sobre Codeigniter se puede repetir en este caso, pero vamos a enumerar las más importantes:

Facilita y agiliza el proceso de desarrollo de aplicaciones Web.
Permite reutilizar código ya existente y promueve buenas prácticas de desarrollo. Evita reinventar la rueda.
Debido a la existencia de múltiples navegadores que se comportan de diferente forma, es necesario escribir códigos
diferentes para cada uno. Un framework nos permite “abstraernos” del navegador para solo centrarnos en la
funcionalidad del código.
El código resultante de nuestras aplicaciones utilizando un framework es mas claro y reutilizable por otros
programadores.
Un framework suele estar altamente testeado, con lo que nuestras páginas suelen ser más fiables.

Aunque los beneficios que obtenemos de trabajar con un framework son superiores a sus inconvenientes, estos también
existen:

Existe una curva de aprendizaje para cada framework. Hacernos con el control de uno requiere tiempo.
Saber utilizar un framework no implica saber como funciona ni conocer las tecnologías que soporta.
La relevancia de un framework esta sujeto a modas, es fácil que pase de ser el más el usado a un reducto del pasado
en solo un año.
El hecho de que los frameworks estén pensados para funcionar en multitud de entornos distintos en algunos casos
puede ser innecesario y conlleva una lentitud y peso añadido a nuestro código.
No siempre vamos a utilizar todas las funciones de un framework, pero normalmente las cargaremos todas.

Introducción a jQuery

jQuery es un una biblioteca o framework de Javascript que permite simplificar la manera de interactuar con los
documentos HTML, permitiendo manejar eventos, desarrollar animaciones y agregar la tecnología AJAX a nuestras
páginas web. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en Javascript que de otra
manera requerirían de mucho más código.

La elección de jQuery, en detrimento de otros frameworks AJAX y Javascript se base fundamental en la expansión que
actualmente tiene en el mundo del desarrollo web (ver siguiente figura). También posee una librería de interfaz de usuario
(jQuery UI) que incorpora efectos gráficos y de usabilidad con capacidades Drag&Drop (arrastrar y colocar), animaciones y
otro elementos gráficos y de interfaz amigable. Por último , jQuery tiene el apoyo de Google, Nokia y Microsoft,
incluyendose dentro del entorno de desarrollo Visual Studio.

Empezando a trabajar con jQuery

El núcleo de Jquery esta compuesto por un único archivo Javascript que contiene todos los objetos y funciones que vamos
a necesitar para empezar a realizar nuestros primeros scripts con funcionalidades AJAX. Podemos encontrar dos
versiones de este fichero en la dirección: http://docs.jquery.com/Downloading_jQuery. La primera versión “Minified” es el
fichero que usaremos en producción, esta escrito para ocupar el mínimo espacio, no contiene comentarios y el código esta
escrito sin espaciados ni sangrías lo que hace su entendimiento y modificación una tarea extremadamente costosa. La
segunda versión “Uncompressed” es la usada en desarrollo y la que vamos a utilizar. Esta comentada y permite entender
sus funciones y objetos. Una vez hayamos descargado el fichero .js con la última versión de desarrollo de jQuery bastará
con incluirlo en la cabecera del fichero HTML de la siguiente manera:

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Selectores CSS en jQuery

Vamos a empezar nuestro aprendizaje del núcleo de jQuery con los selectores CSS que nos permitirán modificar los
atributos y el comportamiento de los diferentes elementos de nuestras paginas web. Hasta ahora, cada vez que queríamos
acceder a un elemento de nuestra página mediante Javascript utilizábamos varios métodos. Por ejemplo para rescatar el
valor del input de un formulario lo podíamos hacer de la forma document.name_del_formulario.name_del_input.value o
atacando directamente el identificador con document.getElementById('identificador_del_input'). Al mismo tiempo en
nuestras hojas CSS utilizábamos selectores para establecer que propiedades iban a tener los diferentes elementos de la
página. Un punto seguido de un nombre (.nombre_clase) indicaba una selección de todos los elementos de la clase
“nombre_clase” mientras que una almohadilla seguida de un nombre indica el elemento con el identificador del nombre
(#identificador). Estos selectores ya se vieron en la sesión de CSS pero ahora haremos un pequeño repaso ya que con
jQuery siempre que deseemos acceder a un elemento del DOM lo haremos siguiendo la sintaxis de estos dentro de la
función $(). Por ejemplo para acceder al elemento con id “elemento1” escribiremos esta línea:

$('#elemento1');

Este selector nos devolverá una referencia única al elemento1, en cambio si como selección usamos una clase, jQuery
nos devolverá un array con todos los elementos que cumplan el selector CSS (en este caso todos los que tengan el
atributo class como “clase1”.

//recogemos todos los elementos de la clase1
var elementos = $('.clase1');

//mostramos contenido Html del primero elemento encontrado de la clase1
alert(elementos[0].innerHtml);

Existen multitud de selectores CSS que podemos usar en nuestros scripts con jQuery, muchos de ellos ya los habéis
estudiado en el módulo de Web 2.0. Ahora vamos a repasar los más importantes que nos ayudaran a lo largo de este
módulo:

$('#identificador'): hará referencia al elemento con el identificador indicado.
$('.nombreClase'): referencia a todos lo elementos con la clase “nombreClase”.
$('E F'): referenciará a todos los elemento F dentro de elementos E. Por ejemplo si escribiéramos la línea $('.clase1
a'), se estaría accediendo a todos los enlaces dentro de elementos con el atributo class como clase1.
$('E > F'): Muy parecido al caso anterior, con la salvedad que solo referencia a los hijos de primer grado (no hará
referencia a nietos, bisnietos, etc...).
$('E[atributo]'): Un ejemplo sería $('img[width=100]') que indicaría la referencia de los elementos img con el atributo
width=100.
$('E :first-child'): Se accederá al primer hijo de la selección E, un ejemplo seria $('#padre :first-child') donde se haría
referencia al primer hijo del elemento con identificador 'padre'.

Atributos

Una vez hemos seleccionado un elemento (o varios de ellos) con un selector