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

Transcripción

1 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

2 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

3 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 ( y 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

4 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 _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 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 _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

5 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

6 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 _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

7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " 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" " 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" " 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: 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

8 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" " XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 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: 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

9 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"/> 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 > 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: 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

10 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 _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

11 El siguiente código HTML no está formado correctamente: <html> <head> <title>prueba de validación</title> </head> <body><table cellpadding="2" cellspacing="2" border="1"> <tr> <td> Web: </td> <a href=" <td> Heraldo de Aragón </td> </a> </tr> </table> </html> Si te fijas, verás que el elemento de Hiperenlace (a) no está correctamente introducido, ya que debería estar colocado dentro de la celda de la tabla y no contener una de ellas tal y como aparece aquí. Este pequeño error hace que en Internet Explorer 8 el enlace funcione, pero que no aparezca marcado como enlace. En el resto de exploradores ni se marca como enlace ni funciona Errores como el del ejemplo que acabamos de ver pueden darnos muchos problemas sobre todo si no los localizamos pronto. Las aplicaciones Web 2.0 suelen ser bastante complejas cuando llegamos a niveles de funcionalidad avanzados y un error fácilmente detectable como la validación de documento puede darnos más de un quebradero de cabeza Cómo saber si una página es válida Con el fin de promover y facilitar la tarea de adaptación a sus estándares, el W3C pone a nuestra disposición una herramienta con la que podemos validar nuestro código HTML de un modo fácil y rápido, informándonos además de los errores que en él encuentre para que podamos corregirlo en consecuencia. El validador podemos encontrarlo en la dirección y su modo de funcionamiento es realmente sencillo: basta con indicarle la URL de una página web, subir un archivo HTML o copiar y pegar un fragmento de código para saber al instante si dicho documento es válido o no. U.D. IV Web

12 4.1.1_11 Herramienta de validación de código HTML del W3C Si utilizamos la opción de validación por URL o subiendo un archivo, no tendremos que seleccionar más opciones, ya que detectará el tipo de documento y la codificación de caracteres del mismo. Si por el contrario optamos por copiar y pegar un fragmento de código HTML, tendremos que indicarle estos valores manualmente para que determine las reglas que debe comprobar y de los errores que debe informarnos _12 Intento de validación de un fragmento de código HTML U.D. IV Web

13 Una vez ejecutado, el validador nos devolverá el resultado de la prueba, así como los errores de formato o avisos que considere necesarios para la corrección del documento o fragmento de código introducido. Si el documento ha validado correctamente, nos lo indicará con un mensaje y nos invitará a que coloquemos en nuestra página una etiqueta que informe de dicha condición al pie de la misma _13 Validación correcta de un documento en HTML 4.01 Estricto Abre una ventana con el validador del W3C e intenta validar el siguiente código. Localiza los errores que contiene con la ayuda del validador y consigue que el código sea considerado válido. Ignora los avisos si es necesario. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>prueba de validación</title> </head> <body> </body> </html> <table cellpadding="2" cellspacing="2" border="1"> <tr> <td> Web: </td> <a href=" <td> Heraldo de Aragón </td> </a> </tr> </table> U.D. IV Web

14 Lección 2 Hojas de Estilo CSS Si en la anterior lección hemos hablado acerca de cómo debe estar formada una página (o más bien el código de la misma) para que sea adecuada y compatible con todos los navegadores, independientemente de la plataforma en la que se ejecuten, en esta vamos a tratar un tema no menos importante: cómo se presentan dichas páginas al usuario. Antiguamente las páginas HTML llevaban incorporada la información relativa al estilo de los elementos que contienen directamente incluida en el mismo código. De este modo era relativamente fácil ver fragmentos de código tal y como aparecen a continuación. <img src= images/icono.gif align= center hspace= 10 vspace= 15 > En este pequeño fragmento de código vemos un ejemplo de cómo el HTML permite la introducción de elementos de estilo en línea, es decir, a la vez que definimos el elemento que se va a mostrar. La imagen que se mostraría se alinearía al centro del párrafo en el que se encontrara, tendría un margen horizontal a ambos lados de 10 píxeles y uno vertical de 15 arriba y abajo. Esto que en principio podría resultar cómodo de definir (que luego veremos que no es tanto), no hace más que perjudicar el código y el rendimiento de nuestra aplicación ya que nos va a ocasionar dos problemas: Aumenta el tiempo de carga de la página incluyendo información de estilo en la capa que debería contener sólo información Hace que dicha información no sea repetible: Si más adelante colocamos otro elemento que tiene que disponerse del mismo modo, tendremos que repetir los mismos atributos para que aparezca posicionado del mismo modo. Para resolver esto y hacer nuestro código más manejable, separando el diseño de la programación, podemos hacer uso de las hojas de estilo CSS, pero Que es una Hoja de Estilo CSS y cómo puede ayudar a mejorar el diseño de mi página web? Para obtener la definición formal de las hojas de estilo CSS, la mejor referencia que podemos obtener es la de los creadores de dicha tecnología, una vez más el W3C, que en su guía breve de CSS define a las hojas de estilo en su guía breve de CSS ( del siguiente modo: U.D. IV Web

15 Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos Es decir, nos las define como un elemento que nos permite modificar el comportamiento de la capa de diseño de una página web cuando se reproduzca en diferentes medios tales como la pantalla, la impresora o incluso lectores de texto _1 Guía breve de CSS del W3C De un modo menos formal, diríamos que las Hojas de Estilo CSS son unos documentos que contienen reglas y definiciones de estilo, de tal modo que cuando se combinan con los elementos que contienen una página web nos van a permitir modificar el aspecto de los mismos (tamaño, colores, subrayado...) sin tener que incluir atributos específicos de estilo dentro del documento principal. Por medio de la aplicación de esta tecnología conseguiremos salvar los dos problemas que hemos definido anteriormente, ya que "aligeraremos" el código fuente, que no tendrá que contener elementos de estilo y podremos dar un nombre a cada estilo que generemos, de modo que repetir el comportamiento visual de un elemento que se encuentre dentro de una página web va a ser tan sencillo como U.D. IV Web

16 aplicarle el mismo nombre de estilo para que lo tome como referencia a la hora de mostrarse en pantalla, impresora o pronunciarse en un convertidor texto-voz. Cómo funciona una Hoja de estilo CSS Como hemos comentado anteriormente, las Hojas de Estilo CSS están formadas por reglas o declaraciones de estilo que se aplican a uno o más elementos contenidos en una página HTML. En una misma hoja podemos combinar varias reglas de modo que definamos el color de fondo de la pantalla, el tamaño y grosor de nuestros encabezados, los bordes y alineaciones de las imágenes contenidas en el documento, etc. Para definir correctamente una regla, debemos conocer las partes que contiene y el comportamiento que tiene cada una. Una regla de estilo CSS se compone siempre de un selector y una declaración. El selector va a indicar a qué elemento o elementos del código HTML se va a aplicar el estilo; por otro lado, la declaración va a contener las órdenes concretas que se van a aplicar a ese o esos elementos que hemos seleccionado por medio de dicho selector. En una regla de estilo que pretenda colorear en rojo y aplicar tamaño 14 a los encabezados de tipo 1 de una página HTML, el selector sería "H1" y las declaraciones "color: red" y "font-size: 14px" A la hora de escribir la regla de estilo completa, debemos tener claro a qué elementos se va a aplicar y qué estilo se les va a asociar. Una vez que tengamos definido este punto, pasaremos a escribir la regla del siguiente modo: SELECTOR {DECLARACION; DECLARACION; DECLARACION} De este modo podemos colocar para un mismo selector varias declaraciones de estilo separadas por punto y coma ";", permitiéndolos, por ejemplo aplicar un color rojo, letra negrita, tamaño 14 y subrayado en la misma regla de estilo. Las reglas de estilo nos permiten además incluir en un mismo selector varios elementos de HTML, por lo que las posibilidades que podemos llegar a tener en conjunto pueden ser innumerables La regla de estilo necesaria para colocar los Encabezados de tipo 1 y Encabezados de tipo 2 en color rojo, letra negrita, tamaño 14 y subrayado, se definiría tal y como aparece a continuación: H1, H2 {color:red; font-weight: bold; font-size: 14px; textdecoration: underline;} U.D. IV Web

17 Disposición de reglas de estilos en una página web Llegados a este punto, ya sabemos cómo crear reglas de estilo sencillas que cambien radicalmente el aspecto de nuestra página, pero Cómo debemos incluir o asociar dichas reglas a nuestra página para que hagan lo que están destinadas a hacer? Actualmente disponemos de tres posibilidades a la hora de aplicar estilos a una página HTML. Cada una de estas tiene sus ventajas e inconvenientes que pasaremos a definir a continuación. En cualquier caso, siempre es recomendable utilizar la primera de ellas, que digamos que es la más "correcta", pero muchas veces y por necesidades del guión, deberemos hacer el uso de las otras técnicas, menos adecuadas, pero también funcionales al 100%. Incrustación de estilos como Hoja de Estilos CSS externa Es el método recomendado y el más eficiente que existe, si bien para llevarlo a cabo deberemos tener permisos para crear un archivo externo a la página en el que ubicaremos las reglas de estilo que deban aplicarse a la página en cuestión. Una vez que tengamos todas las reglas de estilo ubicadas en el mismo archivo, deberemos guardarlo en una ubicación de nuestro servidor web y colocar una reseña en nuestra página para indicar al navegador dónde se encuentran los archivos que debe aplicar para dar por finalizada la capa de presentación. <link href="estilos.css" rel="stylesheet" type="text/css" /> Este método, como hemos comentado, tiene el inconveniente de que necesitaremos permisos para ubicar un archivo adicional dentro del servidor que aloje la página o aplicación web que vamos a "estilizar", y aunque parezca raro, esto es bastante común dependiendo de los niveles de acceso que tengamos sobre dicho hosting. Si tenemos la suerte de poder incluir archivos en el servidor, este método está lleno de ventajas, ya que los estilos se ubican en un archivo externo que tan sólo debe descargarse una vez y esto permite mejorar las tasas de transferencia cuando varias páginas comparten una misma hoja de estilo como veremos más adelante. Incrustación de reglas de estilo en el documento HTML Este segundo método, si bien no es el más adecuado ni "limpio", nos permite seguir con la separación de capas de diseño e información, pero dentro del mismo archivo, con las mismas ventajas de aplicación que hemos visto anteriormente: podríamos repetir estilos y optimizaríamos, aunque en menor medida, el ancho de banda utilizado por la aplicación. Para incluir estilos de este modo basta con que coloquemos nuestras definiciones de estilo dentro de los elementos <style> y </style>.una vez dentro de los mismos, el tratamiento de su contenido va a ser el mismo que si se ubicara en una hoja de estilos externa, pero se cargará en cada una de las recargas de nuestra página desde el servidor. U.D. IV Web

18 Estilos en línea del contenido HTML El último método de incrustación de estilos CSS es además del último posible, el menos adecuado técnicamente, ya que es muy similar al modo en el que se aplicaban los estilos anteriormente, pero en lugar de aplicar dichos estilos por medio de atributos específicos (align, hspace ) lo hace por medio de declaraciones CSS válidas. Para aplicar nuestra información de estilos a un elemento por medio de este método, tan sólo deberemos aplicar el atributo style al elemento al que queremos dar forma, seguido de las declaraciones necesarias del mismo modo que lo haríamos en una definición en hoja de estilos externa. Si ejecutamos este código en un navegador web, formateará el elemento Encabezado de tipo 1 del mismo modo que si obtuviera dichos valores desde una hoja de estilos externa: <h1 style= color:red; font-weight: bold; font-size: 14px; textdecoration: underline; >Hola mundo</h1> Declaraciones de estilo más utilizadas Tras ver cómo podemos ubicar los estilos CSS y cómo debemos formularlos para que se apliquen correctamente, es necesario hacer una breve visita a las definiciones más comunes y su significado. Si las comprendemos, junto con el uso de los selectores adecuados no nos será muy difícil aplicar estilos a una página y hacer que de este modo tome una apariencia distinta a como lo hace habitualmente. En la tabla que aparece a continuación se recogen las declaraciones más comunes, así como su significado. U.D. IV Web

19 Declaración Significado Ejemplo Margin En una caja, margen que se dispondrá en cada uno de los lados de la misma margin: 10px; Border Display Estilo, anchura y color del borde de una caja en cada uno de sus lados Comportamiento del contenedor (visibilidad) border: solid 1px red; display: none; Width Anchura del contenedor width: 100px; Height Altura del contenedor height: 50px; Color font-family font-size font-weight text-align backgroundcolor backgroundimage textdecoration Cursor Color del texto contenido en el elemento Color de fondo del elemento Imagen de fondo del elemento Especifica la tipografía a utilizar en el texto del contenedor Indica el tamaño que debe tomar la fuente contenida en el elemento definido en el selector Especifica el grosor de la fuente (negrita) Alineación del texto dentro del contenedor Atributos adicionales de texto que se deben aplicar Formato del puntero del ratón al pasar por encima del elemento color: blue; background-color: yellow; background-image: url( imágenes/fondo.jpg ); font-family: Verdana; font-size: 10px; font-weight: bold; text-align: right; text-decoration: underline; cursor: pointer; U.D. IV Web

20 Toma este fragmento de HTML en el que se han definido algunos estilos en línea sobre los elementos que aparecen y conviértelos para que toda la información de estilos se encuentre entre los elementos <style> y </style> definidos. Si lo haces correctamente el código resultante debería quedar totalmente limpio de información de estilos: <style> a {text-decoration; none; font-size: 10px; font-weight: normal;} p {font-size: 12px;} </style> <p style="text-align: center; color: black; text-decoration: none"> <a href=" Enlace a <b style="color: blue; font-size: 14px;">página externa</b> </a> </p> Selectores de estilo avanzados Si has completado el ejercicio anterior, te habrás dado cuenta que al utilizar los estilos CSS, el código HTML queda extremadamente limpio y que se hace muy fácil de entender, pero qué pasa si en el ejemplo anterior introducimos un nuevo párrafo y queremos que su tamaño de letra o color cambie con respecto al primero? Con los conocimientos adquiridos en el curso, la única opción sería deshacer la conversión de etiquetas en línea con el contenido en reglas CSS y volver a colocarlas tal y como aparecían al principio. Al hacer este gesto, los estilos no se aplicarían a todos los elementos <a>, <p> y <b>, sino solamente a aquellos que llevaran indicadas específicamente las reglas de estilo como atributo directo. Esta solución, como sabrás, no es la más adecuada, ya que no nos permite utilizar el potencial de las hojas de estilo CSS, que es reducir el ancho de banda utilizado y hacer que dichos estilos puedan aplicarse a los elementos que nos interesen de un modo selectivo. Para resolver este entuerto vamos a explicar lo que denominaríamos selectores avanzados de CSS, selectores un poco más complejos que un simple p o b y que nos permitirán seleccionar aquellos elementos que cumplan solamente las condiciones que determinemos para recibir el estilo en cuestión. Un elemento HTML como puede ser <p>, puede recibir varios atributos que se incluirán según el esquema nombre= valor. Esto nos permite asignarle un par de atributos muy preciados para aplicar estilos: el atributo id y el atributo class Cuando el elemento <p> se formula de este modo: <p class= colorrojo >, podemos utilizar un modo de selector que hará que dicho estilo se aplique solamente a los párrafos o elementos que tengan dicha propiedad. De este modo, si U.D. IV Web

21 definimos la regla CSS p.colorrojo {color: red;}, todos los párrafos con el valor colorrojo en su atributo class tomarán el estilo definido. Esto es especialmente interesante cuando son varios los elementos que deben tomar el estilo. Si queremos reutilizar dicho estilo para enlaces y negritas, bastaría con eliminar el fragmento p del selector y automáticamente cualquier tipo de operador HTML que tenga colorrojo como valor en el atributo class lo heredará directamente. La regla entonces quedaría del siguiente modo:.colorrojo {color: red;} Del mismo modo podemos utilizar el atributo id para aplicar estilos, si bien en este caso, a diferencia del class, cada id debería ser único, por lo que la lógica de utilización sería totalmente a la inversa. Utilizaríamos id para aislar un elemento concreto que tiene que tomar el estilo en cuestión. Por ejemplo al formular <p id= primerparrafo >, podríamos definir el selector p#primerparrafo y su información de estilos sólo se aplicaría al párrafo con la id primerparrafo. Del mismo modo que en el caso anterior, podemos eliminar la información del elemento y de este modo conseguir un selector que se aplique al elemento cuya id sea primerparrafo, independientemente del elemento del que se trate. A continuación se muestra un fragmento de HTML en el que puede verse el uso de los selectores para aplicar estilos por medio del atributo id al primero de los párrafos que aparecen, y como por medio del atributo class aplicamos color rojo a otros dos párrafos y a un enlace contenido en el primero de los párrafos. <style> #primerparrafo {text-decoration; none; font-size: 10px; font-weight: normal;}.colorrojo {font-size: 12px;} </style> <p id="primerparrafo"> Contenido del primer párrafo con un <a href=" class="colorrojo"> enlace en color rojo </a> </p> <p class="colorrojo"> Contenido de otro párrafo en color Rojo </p> <p class="colorrojo"> Contenido de otro párrafo más en color Rojo </p> Una gran ventaja de las hojas de estilo: El ancho de banda Si utilizamos hojas de estilo CSS y lo hacemos correctamente (ubicando los estilos correspondientes en una hoja externa), inconscientemente vamos a conseguir una mejora abismal en la velocidad de carga de las páginas que soporten esta tecnología. Cómo es posible esto? U.D. IV Web

22 Recuerdas el ejercicio en el que hemos extraído los estilos de los elementos que los incorporaban directamente en línea? Si los has extraído correctamente habrás obtenido algo parecido al fragmento que aparece a continuación: <style> a {text-decoration; none; font-size: 10px; font-weight: normal;} p {font-size: 12px; text-align: center; color: black; text-decoration: none} b {color: blue; font-size: 14px;} </style> <p> <a href=" Enlace a <b>página externa</b> </a> </p> Como ves, la información relativa a estilos ocupa más de la mitad del contenido total de la página completa. Imagina ahora que extraemos estas reglas de estilo a una hoja externa. La página nos quedaría entonces así: <link href="estilos.css" rel="stylesheet" type="text/css" /> <p> <a href=" Enlace a <b>página externa</b> </a> </p> Básicamente el contenido va a estar mucho más limpio de este modo, pero Dónde está la ventaja en sí? Al fin y al cabo a pesar de estar en una hoja externa, los estilos tienen que ser descargados por el navegador, no? La ventaja que comentamos realmente es considerada como tal cuando concentramos los estilos de varias páginas HTML (nuestra aplicación, un portal, etc.) en una misma hoja. El navegador descargará la información de estilos una única vez y después irá solicitando las páginas a medida que las necesite, pero sin descargar de nuevo la información de estilos, ahorrando mucho ancho de banda cuando el número de páginas procesadas aumente. U.D. IV Web

23 Imagina que la página inicial pesaba 10KB y al extraer estilos hemos generado una hoja de estilos CSS de 5KB, dejando nuestra página web en 5KB. La primera vez que la solicitemos nuestro explorador descargará 10KB, pero la segunda vez con 5KB tendrá bastante, ahorrando los otros 5KB de estilos que ya ha descargado. Si se tratase de una página de noticias o mensajes que consultásemos cada minuto, a lo largo de 8 horas al día, nos ahorraríamos un total de 8 Horas x 60 minutos x 5KB por petición = 2.400KB Esto tampoco es mucho con las conexiones que tenemos hoy en día, pero si esta página de noticias es de un diario que tiene usuarios suscritos, la cosa cambiaría bastante. Con el simple gesto de extraer los estilos de su página a una hoja de estilos CSS se estarían ahorrando 2,4GB diarios, que seguro que la empresa agradece a la hora de pagar su factura de alojamiento Web a fin de mes Otra gran ventaja: La versatilidad de CSS Zen Garden Además de la gran ventaja del ahorro de ancho de banda que supone el correcto uso de las hojas de estilo, el hecho de que los estilos estén aislados en un documento externo nos permite un gran margen de maniobra sobre los mismos. Imagina por un momento que creamos una revolucionaria aplicación para la gestión de las compras de una empresa. Si hemos extraído previamente los estilos a una o varias hojas CSS externas, sería relativamente sencillo crear una nueva versión de la aplicación para un nuevo cliente. Modificando la hoja de estilo deberíamos ser capaces de variar completamente la capa de diseño, ofreciendo una aplicación que con el cambio de un simple archivo podría parecer otra totalmente distinta o adaptada a un entorno que no tendría nada que ver con el que inicialmente estaba pensado. Un vivo ejemplo de esto es CSS Zen Garden ( CSS Zen Garden nace como un reto para los diseñadores en un recurso que muestra el verdadero potencial de las hojas de estilo CSS. Con el mismo código HTML, pero con el cambio de un archivo CSS, el portal toma una apariencia totalmente distinta. U.D. IV Web

24 U.D. IV Web

25 4.1.2_2, 4.1.2_3, 4.1.2_4 y 4.1.2_5 Ejemplos de CSS Zen Garden U.D. IV Web

26 Las imágenes que has visto están todas formadas con el mismo código HTML, pero variando solamente la hoja de estilo adjunta al mismo. Como puedes ver, las posibilidades son infinitas. Te animamos a que visites la web y que pinchando en los enlaces descubras diferentes versiones del portal para que descubras todo el potencial de las hojas de estilo con tus propios ojos. Que no te engañen! Visita CSS Zen Garden y comprueba que el código de las diferentes versiones de las páginas que se muestran es el mismo. Sobre cada una de las versiones, haz click con el botón derecho del ratón y selecciona Ver código fuente (varía ligeramente en función del navegador). Compara el código de diferentes versiones de la misma página y juzga el resultado. U.D. IV Web

27 Capítulo 2 XHTML En el capítulo anterior hemos visto las ventajas de que nuestra página estuviera dotada de un código HTML válido por medio del uso de las indicaciones creadas a tal efecto por el W3C. Estas recomendaciones y la condición de la validación del código van a convertirse en un requerimiento en nuestras aplicaciones Web 2.0 Como ya comentamos en el anterior capítulo, para manipular el HTML de nuestras páginas utilizaremos el modelo de objetos del documento (DOM) y técnicas de JavaScript que nos permitirán añadir funcionalidades y cambios según la interacción del usuario con las respuestas del servidor. Pues bien, para que dichas manipulaciones se realicen con éxito deberemos utilizar un código HTML bien formado y a ser posible que sea compatible con XML, que será el lenguaje con el que nos comunicaremos con el servidor para recibir o enviar datos de nuestra aplicación. Para esto qué mejor manera que utilizar la versión compatible con XML del HTML 4.01, esto es, el estándar XHTML 1.0, que cumplirá nuestras necesidades a la perfección. En la primera de las lecciones veremos ejemplos reales y casos de uso con las particularidades de este estándar para después adentrarnos en el modelo de objetos del documento y plantearnos posibles casos de manipulación de los contenidos. Para finalizar, volveremos de nuevo a las hojas de estilo en cascada CSS para ver ejemplos adicionales y funcionalidades aun más avanzadas que nos permitirán afinar la capa de diseño para cubrir las necesidades que nos imponga nuestra aplicación. Al finalizar el estudio de estas lecciones serás capaz de: Utilizar el lenguaje XHTML para crear páginas complejas Entender el Modelo de Objetos de Documento de XHTML Utilizar estilos CSS avanzados para afinar y optimizar el documento U.D. IV Web

28 Lección 1 Características del XHTML Como hemos visto en anteriores lecciones, podemos decir que la especificación XHTML 1.0 (recomendación del 26 de enero del 2000) es una reformulación del HTML 4.01 como aplicación XML, exactamente es la reformulación de las tres definiciones de tipo de documento HTML 4.01 (transicional, frameset y estricta) como aplicaciones XML. La finalidad de esta reformulación no es otra más que preservar la compatibilidad con dispositivos, adaptando el código a la especificación XML. Además de esta ventaja, si se siguen las especificaciones dadas para la conversión de HTML a XHTML, el código resultante podrá ser interpretado por navegadores antiguos sin mayor problema _1 - XHTML Vamos de todos modos a hacer un repaso de algunas características y/o mejoras de este lenguaje que hemos visto anteriormente junto con algunas nuevas que cabe reseñar: Los documentos XHTML son compatibles con XML, por lo que podemos visualizarlos, editarlos y validarlos con las mismas herramientas que utilizaríamos para trabajar con XML estándar. U.D. IV Web

29 Los documentos escritos en XHTML, al ser compatible con HTML permitirán que sean visualizados y tratados sin problemas en navegadores y dispositivos preparados para visualizar HTML. Los documentos XHTML pueden usar y ser utilizados por aplicaciones (nuestra gran ventaja) ya que están basados en el modelo de objetos de documento (DOM) de HTML y XML A medida que se vayan produciendo nuevas especificaciones de formatos en la web, los documentos creados en XHTML serán más fáciles de migrar y adaptar a los nuevos formatos que aparezcan. Con el paso del tiempo, los desarrolladores de agentes de usuario y documentos descubren nuevas etiquetas que utilizar en la creación del código (esto se da sobre todo en XML). Como XHTML está preparado y montado sobre la base de XML, crear nuevas etiquetas que sigan los estándares para estos tipos de documento es relativamente sencillo. Como vemos, cada día nuevos dispositivos tienen acceso a la red para visualizar e interaccionar con los contenidos que en ella aparecen. El uso del XHTML va a hacer esta tarea más fácil, ya que si dichos dispositivos son compatibles con XHTML y la comunidad lo utiliza como estándar, podremos aprovechar esta ventaja para optimizar nuestros desarrollos e incluso el hardware hacia esta dirección, incorporando mejoras específicas aprovechables por todas las plataformas. Queda claro con estas características que el XHTML es el nuevo estándar de la web y que desde hace ya algunos años es el más utilizado por desarrolladores de contenidos en sus documentos. Además de esto, al tener total compatibilidad con XML, podemos obtener todos los beneficios derivados del uso del lenguaje, a la vez que aseguramos la compatibilidad con agentes de los usuarios pasados y futuros Definición de Documento y plantilla En esta sección vamos a definir la estructura del documento XHTML que utilizaremos posteriormente para realizar pruebas sobre el mismo. Este punto es especialmente importante porque va a sentar las bases de todas las páginas de las que se componga nuestra aplicación, de modo que es necesario seguirlo con atención. El primer elemento que ubicaremos en la estructura de un archivo XHTML es la definición de documento en la que vamos a ubicar el contenido. Si recuerdas, XHTML nos permite definir 3 tipos de versiones de documentos: estricta, transicional y frameset. En nuestro lugar vamos a colocar la definición estricta, que debería ser el punto de partida de todos los documentos. Si más tarde vemos que tenemos que integrar fragmentos de código que no podemos validar ni convertir, pasaríamos a una de las versiones menos restrictivas... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " "> Una vez que hayamos ubicado la definición de documento, pasaremos a definir la cabecera y el contenido, que estarán ubicados dentro de la etiqueta <html> y </html>, que consideraremos como elemento raíz de la página. En esta etiqueta, además deberemos definir el lenguaje que estamos usando y que en efecto, el tipo U.D. IV Web

30 de documento utilizado es XHTML. Esto lo haremos por medio de la ubicación de los siguientes atributos en la etiqueta de apertura: <html xmlns=" xml:lang="es" lang="es"> El siguiente elemento que tenemos que ubicar en nuestra página XHTML y dentro del elemento raíz sería la cabecera del documento, que vendría delimitada por las etiquetas <head> y </head>. En este caso no tenemos que definir ningún atributo dentro de las etiquetas, pero sí deberíamos incluir al menos el título de la página para que el navegador que la procese y el usuario sepan qué les vamos a enseñar. Una vez introducido nos quedaría del siguiente modo: <head> <title>título de la página</title> </head> Dentro del elemento <head> es recomendable incluir información acerca de la codificación del documento, así como metainformación sobre la descripción de la página o las palabras clave que contiene. En nuestro caso sólo incluiremos la etiqueta de codificación, que sería como la que aparece a continuación para el caso de UTF-8, el más extendido: <meta http-equiv ="Content-Type" content="text/html;charset=utf-8" /> Llegados a este punto, deberíamos ubicar el elemento que nos va a delimitar el contenido del documento en sí, el cuerpo. Dicho elemento se define con las etiquetas <body> y </body> y se colocaría justo después del cierre de la cabecera. Dentro de él colocaremos todo el contenido de la página tal y como iremos viendo a lo largo de este capítulo. Recopilando todo lo que hemos ido viendo hasta ahora, podríamos crear una plantilla de documento XHTML que quedaría como aparece a continuación: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " "> <html xmlns=" xml:lang="es" lang="es"> <head> <meta http-equiv ="Content-Type" content="text/html;charset=utf-8" /> <title>título de la página</title> </head> <body> Contenido de la página </body> </html> Como ejercicio puedes escribirla en un editor de textos y guardarla como el archivo "plantilla.html". Posteriormente la podrás utilizar para probar los ejemplos que vayan apareciendo en esta lección. U.D. IV Web

31 Elementos y uso de los mismos en el documento A lo largo de esta sección vamos a estudiar los diferentes elementos que componen la especificación de XHTML (bueno, más bien algunos de ellos) y el comportamiento que tienen cuando se visualizan dentro de nuestra página web. Párrafos Los párrafos sirven para estructurar el contenido tal y como lo haríamos en un libro o una carta. Para crear un párrafo, introduciremos texto dentro de las etiquetas <p> y </p> <p>esto es un ejemplo de un párrafo que aparecería dentro de nuestra página web. El navegador automáticamente va a darle un margen superior e inferior para separarlo de los contenidos adyacentes</p> Atributos de texto Colocar en XHTML un texto en negrita, cursiva o subrayado es tan sencillo como utilizar el elemento <b>, <i> o <u> respectivamente. Todo el contenido que esté dentro de las etiquetas de apertura y cierre automáticamente pasará a estar marcado según el atributo seleccionado. Así de sencillo. <p>esto es un ejemplo de un <u>párrafo que aparecería dentro de nuestra página web</u>. El navegador automáticamente va a darle un <b>margen superior e inferior</b> para separarlo de los <i>contenidos adyacentes</i></p> Saltos de línea Como habrás podido comprobar, cuando introducimos un elemento de tipo párrafo se insertan saltos de línea automáticamente para que el texto no desborde de la ventana de contenido. Ahora bien, si necesitamos incluir saltos de línea manualmente el XHTML nos brinda un elemento nuevo que cumple dicha función: el salto de línea o <br/> U.D. IV Web

32 <p>esto es un ejemplo de un párrafo que aparecería dentro de nuestra página web.<br/>el navegador automáticamente va a darle un margen superior<br/>e inferior para separarlo de los contenidos adyacentes</p> En cualquier caso, el elemento <br/> debe usarse solamente para insertar saltos de línea. No debemos utilizar indiscriminados br's para separar párrafos ya que es una práctica que puede darnos sorpresas desagradables cuando probemos nuestra página en otros navegadores. Separadores Horizontales Del mismo modo que el elemento <br/> insertaba un salto de línea dentro de una párrafo, el separador horizontal o <hr/> va a introducir una línea de separación entre los contenidos que "separa". Su uso es idéntico al del salto de línea, aunque como comentamos, introducirá además una línea entre las que haya separado. Esta es la primera línea<br/> Esta es la segunda línea<hr/> Esta es la tercera línea, separada de la anterior por una línea horizontal. Los Encabezados o Títulos Los títulos nos sirven para agrupar información y son necesarios en una página que vaya disponer contenido y que pretenda ser interpretada desde diferentes navegadores y dispositivos acertadamente. Para conseguir esto, el estándar XHTML nos proporciona diferentes etiquetas de encabezado o título. Dichas etiquetas comienzan por la letra "h" seguida del número de encabezado por orden de importancia. De este modo el elemento <h1> nos daría el título principal de la página y por medio de los <h2>, <h3> y hasta el <h6> iríamos definiendo títulos secundarios de página que irían guiando al lector por las diferentes secciones que contenga. U.D. IV Web