Unidad didáctica 4 Programación de aplicaciones Web 2.0

213 Pages·2010·7.23 MB·Spanish

Unidad didáctica 4
Programación de aplicaciones Web 2.0
En esta última unidad didáctica del curso vamos a ver las aplicaciones Web 2.0 de
un modo distinto de como lo llevamos haciendo hasta ahora: desde el punto de
vista del programador.
Actualmente y como hemos comprobado en anteriores capítulos, la Red está llena
de portales y portales que hacen gala de todo tipo de funcionalidades avanzadas
que se integran perfectamente con los usuarios y sus necesidades. Simplemente
con el mero hecho de introducir nuestro nombre de usuario y contraseña, una
experiencia totalmente personalizada da comienzo y todo el potencial de la web 2.0
casi mágicamente nos transporta a un mundo donde las aplicaciones hablan entre
sí, comparten información y todo ello sin que nos demos prácticamente cuenta…
¿Cómo se consigue esto? Por medio de la programación, por supuesto. Youtube,
Wikipedia, Facebook... todos estos portales sin excepción alguna han sido en algún
momento un boceto en un papel y mucho antes una idea en la cabeza de algún
inquieto programador que tras muchas horas de trabajo y análisis ha conseguido
hacer realidad su sueño.
Nosotros en esta unidad vamos a ver cómo podemos hacer nuestras propias
aplicaciones web 2.0 basándonos en los conocimientos que hemos ido adquiriendo
en este curso. Por medio de elementos como HTML, CSS, AJAX y otros que iremos
viendo, finalmente seremos capaces de “crear” lo que nos pase por la mente en un
momento dado.
Al finalizar el estudio de estas lecciones serás capaz de:
Conocer las técnicas y lenguajes de programación utilizados en la Web 2.0
Definir y diseñar una aplicación completa
Optimizar el código y minimizar el tráfico generado
Consumir servicios web y crear nuestra propia aplicación
U.D. IV – Web 2.0 1
Capítulo 1
Páginas simples
Para comenzar a entender la programación de las páginas web basadas en
tecnologías 2.0 y que el resultado de dicha programación sea satisfactorio,
debemos empezar por analizar una página HTML sencilla y comprobar el formato de
la misma.
Este primer estudio no en vano es uno de los más importantes porque al fin y al
cabo, por compleja que sea la programación de las aplicaciones web 2.0 que se nos
puedan ocurrir, el resultado de dicha programación tendrá siempre que ser una
página HTML plana que un navegador de un ordenador, teléfono móvil o cualquier
otro dispositivo compatible con este lenguaje sea capaz de interpretar.
En la primera de las lecciones que comprenden este capítulo vamos a analizar los
requerimientos o buenas prácticas que una página debe cumplir para que su código
generado sea válido en función de los estándares definidos por el W3C, organismo
encargado de regular la formación de código HTML en páginas de Internet.
Si nuestro código es válido sabremos que vamos por el buen camino y podremos
pasar al punto siguiente en la creación de una página simple: aplicar estilos a
nuestro código, haciendo que la apariencia del resultado obtenido varíe hasta
límites insospechados con el uso de las hojas de estilo CSS.
Si el código de la página está bien formado y aplicamos un uso adecuado de las
hojas de estilo, tendremos una página limpia, ligera y lo más importante,
compatible con todos los navegadores, independientemente de la plataforma en la
que se ejecuten.
Al finalizar el estudio de estas lecciones serás capaz de:
Analizar y validar una página HTML, corrigiendo los errores que aparezcan
Aplicar diseño a la página generada por medio de hojas de estilo CSS
U.D. IV – Web 2.0 2
Lección 1
HTML válido
HTML válido es una etiqueta o galardón que es fácil de explicar, pero que
conseguir que aparezca en una página es complicado si desde un principio no se
tienen claras las reglas a seguir para que el código que aparece en nuestra página
web las cumpla escrupulosamente.
Para que una página contenga código HTML válido, necesariamente debe seguir
todas las directrices que el W3C ha dispuesto para el tipo de documento
seleccionado… Pero ¿qué es el W3C y qué es un tipo de documento?
El World Wide Web Consortium (W3C)
El W3C (World Wide Web Consortium) tal y como indica en su propia página web
(http://www.w3c.com y http://www.w3c.es en su versión española), “desarrolla
tecnologías inter-operativas (especificaciones, líneas maestras, software y
herramientas) para guiar la Red a su potencialidad máxima a modo de foro de
información, comercio, comunicación y conocimiento colectivo”

4.1.1_1 – Página web del W3C en su versión española
U.D. IV – Web 2.0 3
Básicamente y en lenguaje coloquial, diríamos que el W3C es el organismo
encargado de crear las guías y bases de trabajo para que la Red se desarrolle y
digamos “vaya por el buen camino”, siempre y cuando todos los usuarios y en
especial los programadores las respeten y cumplan en el desarrollo de sus
proyectos web.

4.1.1_2 – Logotipo del W3C
El W3C desde el comienzo de su andadura en 1994 ha propuesto más de 110
estándares y reglas los cuales se engloban en lo que se denominan
Recomendaciones del W3C y que pueden consultarse en la dirección web
http://www.w3.org/TR/. Dichos estándares y reglas no sólo se aplican a las páginas
web y su código HTML, sino a multitud de aspectos relacionados con la web en
general y que afectan a su funcionamiento del día a día.

4.1.1_3 – Página de Recomendaciones del W3C
Asimismo el W3C hace la función de ser un foro abierto de discusión sobre las
tecnologías relacionadas con la web y los diferentes estándares que proponen,
llegando al consenso necesario entre todas las partes implicadas en tecnologías
web para la formulación de dichos estándares.
U.D. IV – Web 2.0 4
4.1.1_4 – Tim Berners-Lee, Director del W3C e inventor de la World Wide Web
Para finalizar con nuestra introducción al W3C y darnos cuenta de su importancia,
debemos reseñar que el director de dicha organización desde su fundación en 1994
es Tim Berners-Lee, que inventó la World Wide Web en 1989, mientras trabajaba
en la Organización Europea de Investigación Nuclear (CERN), lo que nos hace a una
idea de la importancia de la organización y de su función en el desarrollo de
Internet.
Tipos de Documento utilizados en HTML
El W3C en su definición de estándares y reglas para el desarrollo de la web en
Internet ha formulado diferentes versiones de documentos HTML que han ido
evolucionando con el tiempo para adaptarse a las condiciones de los diferentes
navegadores y sus características en función de los dispositivos en los que deben
desempeñar su trabajo.
Hay que pensar que desde 1994 la web ha dado pasos de gigante y con ella los
diferentes ordenadores y dispositivos en los que se muestra, por lo que un formato
perfectamente válido hace 10 años puede que actualmente no aproveche todas las
capacidades de dispositivos más modernos y por tanto quede totalmente obsoleto
en un mundo donde la innovación es la noticia de cada día.

U.D. IV – Web 2.0 5
4.1.1_5 – El Lenguaje HTML y los tipos de documento estándar
El tipo de documento es una directiva o encabezado que se coloca nada más
comenzar un documento HTML. El tipo de documento que seleccionemos en este
punto va a determinar qué elementos HTML podemos integrar en la página, la
representación de los mismos en pantalla y el comportamiento que estos tendrán
cuando el usuario interactué con ellos, así como los atributos que podremos definir
sobre los mismos o modificar por medio del DOM en JavaScript.
En el fragmento de código que podemos ver a continuación podemos encontrar la
definición de tipo de documento, que en este caso se refiere al estándar del W3C
“HTML 4.01” en su variante “Estricta”

4.1.1_6 – Definición de tipo de documento HTML 4.01 Estricta
Como hemos comentado anteriormente, el lenguaje HTML tiene diferentes
versiones que han ido evolucionando con el tiempo y las necesidades de los
dispositivos y de los usuarios. Nosotros no vamos a detenernos en todas ellas, pero
sí que es importante nombrar las más significativas, identificando sus
características y particularidades.
HTML 4.01
La especificación 4.01 de implementación del lenguaje HTML es la más reciente
hasta la fecha y la única oficial hasta que aparezca el nuevo HTML 5, que todavía
está en proceso experimental y que solamente unos pocos navegadores soportan
en su totalidad.

4.1.1_7 – HTML 4.01
Dicha especificación nos indica el modo de utilizar los diferentes operadores y su
funcionalidad, si bien dispone de tres variantes que utilizaremos en función del
marco de trabajo que vayamos a utilizar:
Versión Frameset: Esta versión se utilizará cuando nuestra página contenga
Frames o marcos. Es una versión menos restrictiva en la que se pueden utilizar
órdenes específicas para la creación y uso de dichos marcos que actualmente se
encuentran en proceso de eliminación
U.D. IV – Web 2.0 6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Versión Estricta (Strict): Esta versión es la más rígida del HTML 4.01 y en ella se
bloquea el uso de ciertos atributos y elementos con la finalidad de extraer
totalmente la capa de diseño de la de contenido y que el código generado no
disponga de atributos de estilo que puedan convertirse en definiciones CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Versión Transicional (Transitional): Esta versión es la más utilizada en la vida
real y combina la rigidez de la versión estricta con la posibilidad de introducir
algunos parámetros de estilos y alineaciones directamente sobre los elementos
HTML que se incluyan, permitiendo que la capa de diseño se entremezcle con el
código, facilitando así la creación de código HTML en menor tiempo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
¿Cuál de las versiones es la más adecuada? Evidentemente, si conseguimos que
nuestra página utilice la versión Estricta (y que el código se valide sobre la misma,
claro), nuestra página estará mejor formada y será mucho más sencilla de
mantener y portar a tantos sistemas como sea necesario, ya que nos aseguramos
que la capa de diseño está totalmente separada de la información.
No obstante esto muchas veces no es posible ya que en multitud de ocasiones
debemos integrar elementos o fragmentos de códigos que no están preparados
para una validación Estricta por necesidades ajenas a la programación y que nos
harán cambiar la especificación a Transicional o Frameset para que nuestro
documento pueda considerarse válido con todas las ventajas que ello conlleva.
Si deseas obtener más información sobre la especificación HTML 4.01,
puedes visitar el siguiente enlace de la web del W3C, donde se recoge la
especificación completa del formato: http://www.w3.org/TR/1999/REC-
html401-19991224

XHTML 1.0
La especificación XHTML 1.0 es una simple reformulación del HTML 4.01 hecha para
preservar la compatibilidad con XML. De este modo se introducen ligeros cambios
que hacen que el código formado bajo esta especificación sea totalmente
compatible con los dispositivos que lo utilicen.
U.D. IV – Web 2.0 7
4.1.1_7 – XML
Al ser una reformulación del anterior HTML 4.01, disponemos de los mismos
subtipos disponibles para su uso, con las mismas definiciones y aplicaciones que
hemos comentado anteriormente. A continuación indicaremos las diferentes
definiciones de documento para XHTML 1.0
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
No obstante, a pesar de las aparentes similitudes en tipo de documento,
aparecerán algunas restricciones o particularidades al formato del código generado.
Vamos a comentar alguna de las más representativas:
(cid:57) Los elementos deben cerrarse siempre
Anteriormente, cuando colocábamos elementos como imágenes o saltos de
línea, no era necesario colocar la etiqueta de cierre de elemento, de este
modo, era perfectamente válido un código como el que aparece a
continuación:
U.D. IV – Web 2.0 8
4.1.1_9 – Código no válido en XHTML
El código que aquí aparece no sería validado correctamente por la
herramienta que nos proporciona el W3C y que veremos más adelante ya
que tiene dos elementos que no están cerrados correctamente, el elemento
<br> y el elemento <img>.
Para solucionar este problema deberíamos cerrar dichos elementos bien
colocando el correspondiente elemento de cierre tras la apertura del mismo
o incorporando una barra “/” al final del elemento. De este modo quedarían
como aparece a continuación:
• <br></br> o <br/>
• <img src="images/logo.gif"></img> o <img src="images/logo.gif"/>
(cid:57) Los nombres de los elementos deben ir en minúsculas y los atributos
entrecomillados

De este modo el elemento <P> no sería válido y del mismo modo la
definición <table border=0> tampoco estaría permitida según el estándar.
Los elementos correctos serían <p> y <table border=”0”>

(cid:57) Las anidaciones de los elementos deben realizarse correctamente

Es decir, no podríamos colocar fragmentos del tipo <a
href=”#”><b>Enlace</a></b>, ya que estaríamos entremezclando los
identificadores. La versión correcta en XHTML sería la siguiente: <a
href=”#”><b>Enlace</b></a>.
Si deseas obtener más información sobre la especificación XHTML 1.0,
puedes visitar el siguiente enlace de la web del W3C, donde se recoge la
especificación completa del formato: http://www.w3.org/TR/2002/REC-
xhtml1-20020801

Formatos anteriores: HTML 3.2 y HTML 2.0
Para finalizar con las definiciones de tipos de documento, debemos hacer una leve
mención a dos formatos que ahora mismo están en desuso, pero que nos servirán
para que nos hagamos a una idea del cambio que han supuesto los últimos años en
la World Wide Web.
U.D. IV – Web 2.0 9
El HTML 3.2 es la versión anterior al HTML 4.01 que hemos visto anteriormente y
está soportada por la práctica totalidad de navegadores, pero no implementa la
funcionalidad de marcos y no maneja adecuadamente la información de estilos.
El HTML 2.0 es una versión más anticuada, y como tal carece de la
implementación de marcos, tablas e internacionalización, pero tiene la curiosidad
de que permitía la creación de elementos propios para su uso en la web, de modo
que el elemento <miParrafo> sería totalmente correcto a efectos de validación de
formato.
Por qué debemos escribir HTML válido
Cuando escribimos un código HTML validado correctamente, aunque parezca que la
página se muestre del mismo modo que con algunos errores de validación, nos
estamos asegurando de que no vamos a tener problemas derivados del mal uso del
modelo de objetos (DOM) cuando procesemos nuestra página como una aplicación
Web 2.0

4.1.1_10 – XHTML válido
Esto tiene una explicación muy sencilla: cuando el navegador procesa nuestra
página web, crea un modelo de datos en función de cómo la hemos definido a nivel
de código, de modo que si dicho código es coherente y está bien formado, la
estructura que dicho navegador tenga en su memoria también lo será.
Si por el contrario nuestro código tiene elementos sin cerrar o anidaciones mal
formadas (por poner algún ejemplo), cuando vayamos a utilizar JavaScript para
incluir contenidos dinámicos o procesar respuestas del usuario nos llevaremos más
de una sorpresa desagradable.
Otro punto a valorar es que si nuestro código está validado correctamente, nos
aseguramos de que el comportamiento de dicha página va a ser el mismo en todos
los navegadores que soporten dichos formatos, lo que es extremadamente
importante cuando vayamos a ejecutar nuestra aplicación en otros dispositivos
diferentes al que ha sido creada.
U.D. IV – Web 2.0 10