Unidad 1.

Mi primera pgina web (I)

1.1. Introduccin
Pulsa en este icono para ver un videotutorial con el contenido de esta unidad.

El objetivo de este curso es ensear a crear pginas web, partiendo desde cero y usando herramientas gratuitas. Para seguir el curso slo necesitas un ordenador y ganas de aprender, al final del curso podrs crear pginas como la que puedes ver haciendo clic aqu o aqu. El lenguaje que se utiliza para crear una pgina web es el HTML, Hyper Text Markup Lenguage (Lenguaje de Marcas de Hypertexto) Hay muchos cursos de HTML pero creemos que este es diferente porque pretende ser un curso integral de creacin de pginas web. Vamos a explicar brevemente que queremos decir con esto. Lo fundamental para escribir pginas web es saber HTML pero no es suficiente. Si quieres poner una imagen en tu pgina necesitars saber un poco sobre grficos web, para recortar la imagen al tamao adecuado, si quieres poner un men desplegable es conveniente que conozcas algo sobre JavaScript, si quieres recoger datos de los usuarios mediante un formulario es conveniente hacerlo con un lenguaje tipo PHP. Tambin es conveniente utilizar un editor web para facilitar la escritura de pginas web, como KompoZer, para que tu pgina sea agradable es conveniente saber algo sobre diseo web, y por ltimo para que todo el mundo mundial vea tu trabajo necesitars subir tu pgina a un servidor de Internet y darla a conocer. Pues bien, todo esto y un poco ms es lo que hay en este curso. Adems hemos intentado explicarlo de forma que lo pueda entender cualquier persona sin conocimientos previos sobre todos estos temas. Dicho as, parece una misin casi imposible, esperamos que sigas todo el curso y llegues al final cumpliendo estas espectativas. Es un reto complicado pero esperamos crear un curso que sea un punto de partida a este apasionante mundo de la comunicacin global a travs de Internet y te dote de la visin general que te permita avanzar hasta lograr crear pginas web atractivas y completas. A final del curso estamos seguros que logrars crear conocimiento y ponerlo a disposicin de las personas, y algo del espiritu de colaboracin y gratuidad desde el que est hecho este curso quizs llegue a contagiarte un poco. Se acaba dando parte de lo que se recibe.

Por supuesto, tratar todos estos temas en profundidad exigira un curso de un tamao enorme, pero el objetivo es dar una introduccin a cada tema, de forma que el alumno se pueda desenvolver en las tareas bsicas y tenga las nociones suficientes para poder ampliar lo que ms le interese en otros sitios. Por esto, al final de los ltimos temas hemos puesto unas cuantas direcciones con lo mejor de la red en ese tema.

1.2. Contenidos
Para que sea ms facil de entender hemos desarrollado el temario de forma progresiva mediante la creacin de un sitio web sobre flores, introduciendo cada concepto segn se va necesitando. As, primero (tema 2,3) veremos los conceptos bsicos de HTML, escribir texto, darle formato, hiperenlaces, estilos, etc. Luego (tema 5) explicaremos brevemente el editor KompoZer, luego veremos como estructurar una pgina web y un sitio web (tema 6), ms adelante introduciremos el programa Gimp para trabajar con grficos (tema 9), unas ideas para crear grficos vectoriales, como por ejemplo un logotipo para la pgina, con el programa Inkscape. En el siguiente tema (tema 10) introduciremos conceptos sobre JavaScript, y luego un poco de PHP (tema 11). En los temas finales, teorizaremos un poco sobre cmo publicar nuestro sitio y como conseguir que aparezca en los buscadores y tenga visitas.

1.3. Metodologa
Como hemos dicho los diversos conceptos los introduciremos segn sean necesarios a medida que vamos desarrollando un sitio web. Primero crearemos una pgina sencilla para introducir los elementos bsicos de HTML, luego iremos aadiendo elementos a esa pgina, como un men, grficos, formularios, etc. En algunos temas, sobre todo al principio, la explicacin ser un poco ms teora y general. Muchas veces, encontrars la opcin de probar el cdigo que se est explicando. Te animamos a que hagas cambios sobre esos ejemplos y los vuelvas a probar, para ver qu sucede. En otros temas, nos centraremos ms en trabajar sobre el sitio de ejemplo, realizando cambios concretos. Por eso, te sugerimos que vayas creando el mismo sitio, asegurndote de haber aplicado los cambios explicados en cada tema.

Los temas estn explicados tambin en videotutoriales, a los que puedes acceder al principio de cada uno. Aunque en ellos no explicamos cosas nuevas, puede que te ayuden a entender algunos conceptos al verlos de forma ms visual. Al final de cada tema encontrars unos ejercicios propuestos. Con ellos, irs creando otro sitio con lo visto en cada tema.

Unidad 1. Mi primera pgina web (II)

1.4. Alternativas
Crear pginas web es la forma bsica de comunicar en Internet, pero no la nica, ni la ms adecuada para todos los casos. Si te gusta la informtica y quieres tener tu propio sitio web como una aficin, o si quieres crear un sitio web para tu club de ftbol, tu pequea empresa o para dedicarte profesionalmente al mundo de Internet, este curso, probablemente, te interesar mucho. Si en cambio la tecnologa te espanta un poco y slo te intersa la parte ms literara seguramente haya otras formas de publicar en Internet que te resulten ms adecuadas, como, por ejemplo, los blogs. Escribir contenidos en un blog es ms sencillo que crear una pgina web aunque menos flexible. En cualquier caso, puedes empezar a leer el curso, quizs te sorprenda lo sencillo que es crear una pgina web.

1.5. Servidores y direcciones URL

Cuando visitamos pginas web en realidad estamos accediendo a archivos en un servidor web. La direccin o URL tiene este formato: http://www.nombredominio.com/directorio/paginaweb.htm

Donde http:// es el protocolo y www. indica el sistema de pginas web. Habrs observado que no hace falta escribir esto en el navegador. Pero es porque el navegador se encarga de aadirlo, no porque nos ea necesario. nombredominio.com es el nombre del sitio. Al ir directamente ah, vamos a su pgina de inicio. La ltima parte indica el archivo del sitio que estamos viendo. En este caso, una pgina llamada paginaweb.htm que est en una carpeta llamada directorio.

Podemos visitar una direccin desde un buscador o desde un enlace en otra pgina. Podemos teclear la direccin en la barra de direcciones del navegador o acceder desde nuestros favoritos. Internet esta formada por un conjunto de servidores conectados. Un servidor es un ordenador conectado a la red de acceso a Intenet que dispone de un programa que es capaz de recibir una URL y devolver una pgina web al que hizo la peticin. Podramos decir que Internet est formado por una gran cantidad de ordenadores que pueden intercambiar informacin entre ellos. Es una gran red mundial de ordenadores. Los ordenadores se pueden comunicar porque estn unidos a travs de conexiones y gracias a que utilizan un lenguaje o protocolo comn, el TCP/IP.

Segn el esquema que podemos ver en la imagen, un usuario se conecta a la red (a travs de un mdem o un router, ya sea va lnea telefnica, cable, satlite, etc...). A partir de este momento el protocolo TCP/IP entra en juego, gracias a l puedes comunicarte con tu Proveedor de servicios de Internet (ISP) dndole a conocer tu direccin fsica.

Utilizando TCP/IP, el ISP asigna una direccin IP a tu PC y en ese momento se te da acceso a la red. Cuando queremos acceder a una pgina proporcionamos un dominio que es traducido en los Servidores DNS y localizado. Cuando sabemos en qu Servidor Web se encuentra la pgina que queremos visitar se procede a su descarga y visualizacin en el navegador del PC.

Unidad 1. Mi primera pgina web (III)

1.6. Qu es una pgina web?
Una pgina web es un documento de texto con marcas, llamadas etiquetas (tags en ingls). Cuando este documento se ve a travs de un navegador web, las etiquetas se interpretan y se visualiza el documento como una pgina web. Las etiquetas no se muestran pero determinan el aspecto de la pgina, y otras caractersticas, por ejemplo, si el texto es un enlace, en la etiqueta se indica la pgina a la que nos lleva el enlace. Por lo tanto, si somos capaces de escribir un documento de texto, seremos capaces de escribir una pgina web. Slo necesitamos conocer el lenguaje de las etiquetas o HTML. Es conveniente que vayas probando las cosas a medida que las explicamos. Para ello debers de tener dos ventanas abiertas, una con el curso y otra con el programa correspondiente. Si no sabes cmo hacerlo, te lo explicamos en este bsico .

Vamos a comenzar por escribir una pgina web muy sencilla. Para ello utilizaremos un editor de texto sin formato, como puede ser el Bloc de notas (Notepad) includo en Windows. Puedes encontrarlo en Todos los programas Accesorios. El aspecto del Bloc de notas es muy simple, una hoja en blanco con una barra de mens.

Si no ests familiarizado con las forma de escribir en un ordenador, consulta este bsico . Escribiremos el siguiente cdigo. Ms adelante ya veremos qu es cada elemento: <html> <head> <title>Mi primera pgina</title> </head> <body> <p>Hola mundo</p> </body> </html>

Una vez escrito, vamos a guardarlo. Pero antes de continuar, debemos de explicar que lo es la extensin de un archivo. La extensin indica de qu tipo es un archivo. La extensin son las tres letras que van despus del punto al final del nombre de un archivo (por ejemplo, imagen.gif o documento.doc). Puedes abrir cualquier carpeta para comprobarlo. Si no puedes ver las extensiones, es porque Windows las oculta. Si es tu caso, puedes hacer que las muestre a travs del men Organizar Opciones de carpeta y bsquedas, pestaa Ver, desmarcando la opcin Ocultar extensiones de archivo para tipos de archivos conocidos, en Windows Vista. En Windows XP encontramos esta opcin en el men Herramientas Opciones de carpeta, tambin en la pestaa Ver. Vamos a continuar guardando la pgina. Pulsamos en el men Archivo y elegimos Guardar. Introducimos el nombre, por ejemplo Primera. Si ahora pulssemos Guardar, se guardara con la extensin txt, que indica que es un documento de texto sin formato. Para guardarlo como una pgina web, debemos de emplear la extensin .htm (o .html). Por lo que completamos el nombre para que quede Primera.htm y pulsamos Guardar.

Nota: Es conveniente que guardes los archivos creados durante el curso en la misma carpeta. Ahora, utilizando el Explorador de Windows, abrimos la carpeta en la que hemos guardado el archivo y hacemos doble clic sobre el. Como el archivo tiene extensin .htm, se abrir la pgina con el navegador que tengamos como predeterminado. Por ejemplo, en Internet Explorer 7, el resultado se ve as:

Observa que no se muestra todo lo que hemos escrito. Si te fijas en el documento del Bloc de notas, vers que todo lo que aparece entre los signos < y > no se muestra. Esos signos delimitan una etiqueta de HTML, y todas las que hemos utilizado siguen el formato <etiqueta>contenido</etiqueta>. Por ejemplo, la etiqueta <title> contiene el texto que se mostrar como ttulo de la pgina, y la etiqueta <p> indica un prrafo con texto normal. Por lo tanto, un navegador web es una aplicacin capaz de interpretar el cdigo HTML, formado por etiquetas y mostralo debidamente formateado. En cualquier momento, podemos ver el cdigo HTML de la pgina que estamos viendo. En Internet Explorer, podemos hacerlo desde el men Ver Cdigo fuente, y se mostrar utilizando el Bloc de notas. En Mozilla Firefox lo hacemos tambin desde el men Ver, eligiendo la opcin Mostrar el cdigo

fuente de la pgina (teclas Ctrl + U), y muestra el cdigo fuente formateado con colores. Puedes probarlo viendo el cdigo fuente de esta pgina. Si necesitas ms ayuda con el Bloc de notas, puedes verla en este bsico .

1.7. Un sitio web

Cuando tenemos varias pginas, podemos organizarlas en un sitio web. Un sitio no es ms que una carpeta que se encuentra en un equipo informtico, ya sea nuestro ordenador personal o un potente servidor. La primera carpeta es la carpeta raiz. Por ejemplo, si accedemos a "www.aulaclic.es", estamos accediendo a la carpeta raiz del sitio de aulaClic. Cuando escribimos "www.aulaclic.es" en el navegador, en realidad estamos accediendo a la pgina www.aulaclic.es/index.htm, es decir, al escribir una direccin que no acaba en .html (o en .html), el navegador lo interpreta como el nombre de una carpeta y busca en ella un archivo que se llame index.htm, si no lo encuentra devuelve el mensaje del tipo "No se puede encontrar la pgina web". Tal como lo haramos con una carpeta de Windows, podemos organizar nuestro sitio con subcarpetas. Por ejemplo, una carpeta con todas las imgenes, otra con los vdeos, etc. Coloquialmente, es frecuente referirse a un sitio web slo como pgina web, por ejemplo "se ha actualizado la pgina web del ministerio", aunque no nos estemos refiriendo a una pgina en concreto. Veremos ms detenidamente qu es un sitio web cuando creemos los sitios para nuestras pginas, ms adelante.

Unidad 2. HTML bsico (I)

A continuacin vamos a ver los elementos bsicos o fundamentales del HTML. Primero veremos la estructura general de las etiquetas, luego la estructura bsica de la pgina, a continuacin empezaremos a colocar cosas en la pgina, primero texto, luego imgenes, enlaces y por ltimo hablaremos brevemente del elemento que nos sirve para colocar cada cosa en el sitio que queramos, las capas.

2.1. Etiquetas

El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. Al realizar nuestro primer ejemplo, hemos visto algunas etiquetas. Las etiquetas siempre van contenidas entre los signos de desigualdad < y >. Por ejemplo <body>,<title> o <p>. Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada por el signo /. Por ejemplo <body> (apertura) y </body> (cierre). Entre la apertura y el cierre, est el contenido de la etiqueta, que puede ser texto u otras etiquetas, depende del tipo de etiqueta. Algunas etiquetas, no tienen contenido, y se cierran sobre s mismas. Esto se expresa colocando la apertura y el cierre en la misma etiqueta, como por ejemplo: <br />, que equivaldra a <br></br>. La etiqueta <br /> escribe un salto de lnea. Vamos a fijarnos en la apertura de la etiqueta. La primera palabra que aparece es el nombre o identificador de la etiqueta. A parte, podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">. La forma correcta de escribirlo es escribir el nombre de la etiqueta y los atributos en minscula, y los valores contenidos entre comillas dobles. Si un atributo tiene ms de un valor, se escriben todos los valores dentro de las mismas comillas, separados por espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">. Hasta hace poco, lo ms usual a la hora de escribir pginas web era que cada etiqueta tuviera bastantes atributos, que se referan a propiedades del formato o representacin de los elementos. La tendencia actual es la de separar el formato del contenido, descartando estos atributos, sustituyndolos por propiedades de estilo. Por ejemplo, para escribir la siguiente lnea:

Bienvenidos a www.aulaclic.es
Antes, sin estilos: <p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.es</font></p> Ahora, con estilos: <p class="presentacion">Bienvenidos a www.aulaclic.es </p>

Como veremos en el siguiente tema, en otro lugar se definen las caracteristicas del estilo.

Unidad 2. HTML bsico (II)

2.2. Estructura bsica de la pgina
Todo el documento HTML viene contenido dentro de la etiqueta <html></html>. Dentro de la etiqueta <html>, encontramos dos subdivisiones, la cabecera, delimitada por las etiquetas <head></head> y el cuerpo, delimitado por las etiquetas <body></body>. Por lo tanto, el aspecto bsico de cualquier pgina web, es el siguiente: <html> <head> ... </head> <body> ... </body> </html>

La etiqueta <head> contiene informacin sobre la pgina. Por ejemplo contiene etiquetas que pueden decir de qu va la pgina, el ttulo que debe de mostrar en la barra del navegador, o cdigo javascript y estilos, que pueden estar en el propio encabezado o como llamadas a otros archivos. Normalmente, lo que contiene esta etiqueta no se muestra en el navegador. Iremos viendo lo que puede contener esta etiqueta a medida que nos haga falta. De momento slo comentaremos que obligatoriamente debe de contener la etiqueta <title></title>, que contiene el ttulo de la pgina, que es lo que se ve en la barra de ttulo del navegador.

En el <body> encontramos el contenido de la pgina, lo que se ve a travs del navegador: texto, imgenes, enlaces, tablas, etc... En el siguiente ejemplo, puedes ver que hemos modificado el cdigo que utilizamos en la pgina Primera.htm creada en el tema anterior. En l vemos los elementos que hemos comentado. Hemos aadido la etiqueta <br /> para saltar de lnea. Esta es la primera pgina del sitio que vamos a ir construyendo a lo largo del curso.

<html> <head> <title>Floramics. Amigos de </head> <body> <p>Bienvenido a <br /> En esta web encontrars asociacin y nuestra coleccin flores.</p> </body> </html>

las

flores</title>

Floramics informacin sobre la de fotografas de

Puedes copiarlo y pegarlo en la siguiente caja de texto y pulsar en Visualizar el cdigo escrito esto har que se abra una ventana o una pestaa en tu navegador en la que podrs ver cmo queda la pgina. Es equivalente a lo que hicimos en el tema anterior con el bloc de notas pero de una forma ms cmoda para ti. Observa como los espacios en blanco no son tenidos en cuenta, un poco ms adelante volveremos sobre este tema. Luego puedes aadir un salto de lnea y un nuevo texto "Tenemos las fotografas organizadas en diferentes categoras" y volverlo a visualizar.

Pg. 2.2

Unidad 2. HTML bsico (III)

2.3. Estructura del texto
Ya hemos comentado que todo el texto de la pgina estar dentro del <body>, que a su vez estar dentro del <html>. El texto dentro del <body>debe estar dentro de prrafos. En HTML, los prrafos se identifican con la etiqueta <p></p>. Dentro de los prrafos colocaremos texto e imgenes, y algunas etiquetas que nos permitan dar formato al texto, pero no podemos tener otros prrafos anidados. A su vez, disponemos de encabezados que nos permiten organizar el texto. Los encabezados van desde el <h1></h1> de mayor tamao, al <h6></h6>, el ms pequeo. Por ejemplo, utilizaramos un <h1> para poner el rtulo principal de la pgina, <h2> para los ttulos de los apartados, <h3> para los apartados de segundo nivel, etc. El texto de cada apartado ira contenido en prrafos <p></p>.

Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de lnea no se muestran como en el cdigo fuente. Si hay varios espacios seguidos, slo se mostrar uno. Por ejemplo, si en el cdigo fuente escribimos Bienvenido a Floramics se ver Bienvenido a Floramics. Si queremos poner varios espacios seguidos, utilizaremos el cdigo html para el espacio, &nbsp;. El navegador tambin ignora los saltos de lnea. As si dentro de un prrafo colocamos varios saltos de lnea pulsando Intro, estos no se vern. Como ya vimos para crear un salto de lnea dentro de un prrafo, utilizamos la etiqueta <br />. Puedes ver todo esto en el siguiente ejemplo: <html> <head> <title>Floramics. Amigos de </head> <body> <h1>Bienvenido a <h2>Presentacin</h2> <p> En esta web encontrars asociacin y nuestra coleccin flores.<br Tenemos las fotografas organizadas en <h2>Contacto</h2> <p> Si quieres visita nuestra pgina de </body> </html>

las

flores</title> Floramics</h1>

informacin sobre de fotografas diferentes

la de /> categoras</p>

comunicarte con nosotros contacto. &nbsp;&nbsp;Te esperamos.</p>

Puedes probar cmo se ve el resultado, y cambiar los tipos de encabezado:

Es interesante utilizar encabezados, ya que muchos programas podrn generar tablas de contenido a partir de cmo hayamos estructurado nuestra pgina. A la hora de escribir texto, hay ms cosas que hemos de tener en cuenta relativas al idioma y a los caracteres especiales, como las letras acentuadas y la . Puedes verlas en este tema avanzado .

Puedes realizar este ejercicio paso a paso para crear una pgina sencilla.

Unidad 2. HTML bsico (IV)

2.4. Imgenes
Uno de los elementos ms utilizados en una pgina web son las imgenes, tanto para mostrar informacin como parte del propio diseo de la pgina. Pueden ser fotografas o grficos creados por programas como Photoshop, Illustrator. etc. Ms adelante veremos cmo utilizar dos programas gratuitos de este tipo: Gimp e Inkscape. Bsicamente, en pginas web nos encontramos tres tipos de imgenes: GIF, PNG y JPG. Puedes ver con ms detalle cada formato en este bsico .

Cuando queremos introducir una imagen, lo hacemos con la etiqueta <img />. Los atributos que como mnimo ha de tener esta etiqueta son los siguientes: <img src="ubicacion/imagen.gif" alt="texto alternativo" /> Lo primero que debemos de saber es dnde est la imagen, su ubicacin, que es lo que debe contener el atributo src: Si la imagen est en una pgina Web, basta con saber su ruta, por ejemplo http://www.aulaclic.es/logo_ac1.jpg. Esto es lo que se llama una direccin absoluta.

Si la imagen est en el mismo sito que la pgina web, podemos utilizar una direccin relativa, como imagen.gif o imagenes/imagen.gif. Si no sabes cmo indicar una direccin relativa, consulta este bsico .

Cuando el navegador no encuentre la imagen ubicada en scr no podr mostrar la imagen. En su lugar puede mostrar una imagen de error, como en Internet Explorer que muestra .

Adems se mostrar el texto contenido en el atributo alt, ya que sa es su funcin: mostrar un texto alternativo cuando no se puede mostrar la imagen. Esto es importante para la accesibilidad a la web. Imaginemos que tenemos unas imgenes que hacen de botn para ir a partes de nuestra web, como Inicio o Galera. Si no ponemos el alt, y no se muestran las imgenes, el usuario no podr navegar por nuestro sitio.

Aunque no son obligatorios, es muy frecuente aadir a la imagen los atributos height (alto) y width (ancho), introduciendo en ellos las dimensiones de la imagen, en pxeles. Al cargar una pgina, el navegador muestra primero el texto y despus las imgenes. Si conoce las dimensiones de cada imagen, puede dejar un hueco reservado para ellas. Si no, pondr el texto y luego ir desplazndolo para colocar las imgenes, lo que har incmodo leer la pgina hasta que no est totalmente cargada. Otro atributo frecuente en las imgenes es title. Si lo ponemos en la imagen, al posar el cursor sobre ella se mostrar su valor. En IE7, cuando se omite title, se muestra el contenido de alt. Por ejemplo, para el siguiente cdigo se muestra la siguiente imagen: <img src="comunes/aulaclic.gif" alt="aulaClic" width="91" height="41" title="El logo de aulaClic" />

Los valores de height y width puedes verlos al seleccionar la imagen desde el Explorador de Windows o desde un programa de grficos. Si cambias esos valores la imagen tambin cambiar. Si reduces los valores, manteniendo la proporcin, la imagen se ver ms pequea, si los aumentas se ver ms grande, pero con peor calidad, como puedes ver en el siguiente ejemplo: <img src="comunes/aulaclic.gif" alt="aulaClic" width="126" height="56" title="El logo de aulaClic" />

Para aumentar o disminuir una imagen es conveniente utilizar un programa grfico, ya que estos programas tienen opciones para optimizar el tamao de las imgenes. En el tema 9 veremos cmo hacerlo con el programa grfico Gimp. Vamos a aadir la siguiente imagen a nuestra pgina de Floramics. La imagen se encuentra en graficos/flor_ejemplo2.jpg Hemos reducido su tamao variando los atributos, lo cual no es una buena tcnica ya que, aunque se ve bien, se tiene que cargar una imagen grande para luego verla ms pequea.

Este es el cdigo: <html> <head> <title>Floramics. Amigos de las flores</title> </head> <body> <h1>Bienvenido a Floramics</h1> <h2>Presentacin</h2> <p> En esta web encontrars informacin sobre la asociacin y nuestra coleccin de fotografas de flores.<br /> Tenemos las fotografas organizadas en diferentes categoras.</p> <img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="No se encuentra esta imagen" /> <h2>Contacto</h2> <p> Si quieres comunicarte con nosotros visita nuestra pgina de contacto. &nbsp;&nbsp;Te esperamos.</p> </body> </html>

Puedes probar cmo se ve el resultado, y cambiar el tamao de la imagen:

Por ltimo, a la hora de elegir una imagen, hemos de tener en cuenta que para poder mostrarla, el navegador debe de descargarla primero. Y es fcil que una sola imagen ocupe ms tamao que el resto de elementos de la pgina. Por eso hemos de intentar optimizar al mximo las imgenes, e intentar que "pesen" lo menos posible, es decir que su tamao en Kb. sea bajo. El sentido comn nos dice que cuanto ms grande sea la imagen, ms ocupa, por lo tanto, hay que procurar usar imgenes lo ms pequeas posibles, siempre que lo que queramos mostrar se vea con suficiente nitidez.

Pero dos imgenes del mismo tamao pueden tener pesos diferentes, ya que una de ellas puede tener ms resolucin de la que es necesaria para que se vea bien. Es decir que aparte del tamao influye la resolucin, para optimizar la resolucin de las imgenes conviene utilizar un programa grfico, ya que estos programas tienen opciones para ello. En el tema 10 veremos cmo hacerlo con el programa grfico GIMP. Con Photoshop se hace como se muestra en este enlace del curso de aulaClic. Y con Illustrator como se muestra aqu.

Unidad 2. HTML bsico (V)

2.5. Enlaces
Cualquier pgina web tiene imgenes o texto, que al pulsarlos nos llevan a otra pgina del mismo sitio, o a una pgina de un sitio distinto. Esto es un enlace o hiperenlace (en ingls link o hyperlink) tambin llamado hipertexto o hipervnculo. Un enlace se diferencia del texto normal porque al colocar el cursor encima, este cambia de forma y pasa de una flecha a una mano. Tambin es muy frecuente que los enlaces aparezcan subrayados, ya que es la opcin por defecto que les asigna el HTML. En HTML, el enlace se identifica con la etiqueta <a></a>. La forma ms bsica de un enlace es la siguiente: <a href="archivo_enlazado">contenido del enlace</a> El atributo href indica la direccin (URL) a la que se enlaza, que normalmente es un archivo html, por ejemplo http://www.aulaclic.es/index.html . El contenido del enlace es lo que el usuario ve en la pgina y que al pulsar sobre l nos lleva al enlace. Normalmente es texto o una imagen, en el siguiente ejemplo es el texto aqu. Pulsa <a href="http://www.aulaclic.es">aqu</a>. se ver as: Pulsa aqu. El atributo href puede ser una direccin absoluta, como

http://www.aulaclic.es/paginasweb/ejercicios/citas_celebres.htm, o una direccion relativa, como ejercicios/citas_celebres.htm, de la misma forma que vimos para las imgenes. Es muy comn aadir a los enlaces el atributo title, para que muestre informacin sobre el destino del enlace cuando el usuario deje unos instantes el cursor encima del enlace. Por ejemplo:

Pulsa aqu. Pulsa <a href="http://www.aulaclic.es" title="Visita la web de aulaClic">aqu&iacute;</a>. Por defecto, el enlace se abrir en la misma ventana. Si queremos que se abra en una nueva ventana, podemos utilizar el atributo target="_blank". Aunque, el W3C, el organismo que regula los estndares del HTML desaconseja su uso, con la idea de que se debe permitir al usuario decidir si quiere abrir el enlace en la misma u otra ventana pulsando con el botn derecho del ratn sobre el enlace, el atributo target se sigue utilizando porque la mayora de los usuarios pulsan directamente sobre el enlace, sin usar el botn derecho. As pues si en nuestra pgina queremos informar sobre la existencia de otra pgina del mismo tema, colocaremos un enlace a ella y le pondremos el atributo target="_blank" para evitar que el usuario se vaya a esa pgina y no se acuerde de volver a la nuestra. Normalmente utilizaremos enlaces para navegar por nuestro sitio. Hemos de evitar enviar al usuario a pginas en las cuales no sepa como volver a la pgina anterior o como ir a la pgina principal. Siempre es mejor aadir un enlace volver, que confiar en que el usuario utilice el botn Atrs del navegador. Ms adelante, veremos como disear un buen sistema de navegacin para nuestro sitio web. Aqu puedes ver un ejemplo con enlaces e imgenes: <html> <head> <title>Floramics. Amigos de las flores</title> </head> <body> <h1>Bienvenido a Floramics</h1> <h2>Presentacin</h2> <p> En esta web encontrars informacin sobre la asociacin y nuestra coleccin de fotografas de flores.<br /> Tenemos un ndice alfabtico con todas las fotografas, o puedes verlas organizadas en diferentes categoras.</p> <img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="No se encuentra esta imagen" /> <p>Interesante enlace sobre flores: <a href="http://www.mundoflores.net">Mundoflores</a>< h2>Contacto</h2> <p> Si quieres comunicarte con nosotros visita nuestra pgina de contacto. &nbsp;&nbsp;Te esperamos.</p> </body> </html>

Un enlace tambin puede llevarnos a una parte concreta dentro de una pgina. Por ejemplo, si la pgina es muy larga podemos poner un enlace que nos lleve al principio de la pgina. En este tema avanzado puedes ver cmo hacer esto y algunas cosas ms.

2.6. Divisiones o capas

Una etiqueta muy utilizada es la etiqueta <div></div>. Esta etiqueta forma una caja, un rectngulo, igual que el prrafo. Pero mientras que el prrafo es ms comn utilizarlo para contener texto, en un div podemos colocar lo que queramos, siempre que respetemos la anidacin. Esta etiqueta nos resultara muy til para distribuir los elementos en nuestras pginas. Esta etiqueta es denominada de muchas formas: divisiones, capas, cajas, contenedores. As que puede que a lo largo del curso utilicemos estos nombres para referirnos a ellas. Por ejemplo, si queremos colocar la imagen de nuestro ejemplo en la parte derecha, crearemos una capa con el estilo "flotar a la derecha" y pondremos la imagen dentro. Ms adelante explicaremos el estilo "flotar a la derecha" style="float: right". <html> <head> <title>Floramics. Amigos de las flores</title> </head> <body> <h1>Bienvenido a Floramics</h1> <h2>Presentacin</h2> <p> En esta web encontrars informacin sobre la asociacin y nuestra coleccin de fotografas de flores.<br /> Tenemos las fotografas organizadas en diferentes categoras.</p> <div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="No se encuentra esta imagen" /></div> <h2>Contacto</h2> <p> Si quieres comunicarte con nosotros visita nuestra pgina de contacto. &nbsp;&nbsp;Te esperamos.</p> </body> </html>

Ejercicio propuesto la Unidad 2

Prueba evaluativa de la Unidad 2

Unidad 3. Aspecto de la pgina. Estilos bsicos (I)

Hasta ahora hemos aprendido a utilizar los elementos bsicos de HTML para escribir texto, imgenes y enlaces, pero los resultados han sido muy pobres desde el punto de vista esttico. A continuacin vamos a ver como poner "guapa" nuestra pgina formateando el texto, con bordes, mrgenes y fondos. Veremos un concepto muy importante y potente: el estilo CSS. El aspecto de la pgina se controla con los estilos CSS. Por ejemplo, aadiendo estilos CSS a la pgina de nuestro ejemplo obtenemos este resultado.

Los estilos que hemos aadidos son los que puedes ver en esta imagen y que vamos a comentar a continuacin:

Puedes ver la pgina en tu navegador pulsando aqu.

Unidad 3. Aspecto de la pgina. Estilos bsicos (II)

3.1. Estilos
La forma en que se ven todos los elementos de nuestra pgina web depende del estilo. El estilo se compone de distintas propiedades y sus valores correspondientes. Las propiedades pueden ser el color de la fuente, el tamao, la alineacin, los mrgenes, etc... Los valores dependen de cada propiedad, por ejemplo, a la propiedad color le podemos asignar valores como red (rojo), blue (azul), ... y a la propiedad tamao fuente le podemos asignar un valor en porcentaje 100%, 120%, ... o en pixels 12px, 15px, .... El formato a seguir para definir una propiedad es: propiedad: valor; o propiedad: valor1 valor2 valor3; si puede tener varios valores. Por ejemplo, si queremos que el texto sea de color rojo y un tamao de fuente de 120%, escribiriamos el siguiente estilo:

color:red; font-size:120% y obtendramos el siguiente resultado:

Texto rojo a 120%

Dnde escribimos el estilo? Hay varias formas de hacerlo, como vamos a ir viendo a lo largo del curso, pero lo ms recomendable es agrupar todas las declaraciones de estilos en un solo lugar, definiendo un bloque dentro de la etiqueta Head que contega la definicin de estilos. Para ello, tenemos que incluir en la etiqueta <style type="text/css"> ... </style> y definir dentro los estilos correspondientes a cada elemento de nuestra pgina, como puedes ver al principio de esta pgina. Si queremos que un estilo afecte a todos los elementos de la pgina, debemos definir un estilo para la etiqueta body. En esta etiqueta se suele definir el color de fondo y los valores genricos de color y tamao del tipo de letra. En nuestro ejemplo hemos definido el estilo del body as: body font-size: color: text-align: background-color: #3d2e2a;} Que quiere decir que, el tipo de letra o fuente, ser Verdana, ( o Arial si no existe Verdana, o sans-serif si no existen las anteriores); el tamao ser 15 pixels, el color ser el definido por el valor #735846 (en este tema bsico sobre colores puedes ver qu quiere decir esto), la {font-family: Verdana,Arial,sans-serif; 15px; #735846; justify;

alienacin del texto ser justificada y el color de fondo de la pgina ser el #3d2e2a. A continuacin vamos a definir el estilo de la etiqueta H1, de la siguiente forma: h1{ margin-top: font-size: color: #d38451;} Que quiere decir que todas las cabeceras H1 tendrn un margen izquierdo de 80 pixels (si no se pone la unidad, se toman pixels), un margen superior de 20 pixels, un tamao de letra margin-left: 80px; 20px; 180%;

de 180% y el color #d38451 , como puedes comprobar en la imagen del principio de este punto, la cabecera "Bienvenido a Floramics" queda as:

Es decir, el color y tamao de este estilo han prevalecido sobre los ya definidos en la etiqueta Body. Siguiendo con nuestro ejemplo, a continuacin definimos un mismo estilo para las cabeceras H2 y H3, pero como queremos que la cabecera H3 tenga un color diferente, volvemos a definir otro estilo a continuacin para H3 con el valor del color deseado. Es decir, el valor vlido es el ltimo valor definido, por esto los estilos se llaman CSS (Cascade Style Sheet. Hojas de estilo en cascada). Ms adelante hablaremos ms sobre el orden de aplicacin de los estilos. A continuacin definimos el estilo de los prrafos (etiqueta p) con un line-height (interlineado) de 1.5em (en este tema bsico sobre unidades de medida quiere decir em) , una identacin de 15 pixels y un margen de 35 pixels. Con lo definido hasta ahora el texto que escribamos en los prrafos tomar las propiedades definidas en los estilos de la etiqueta Body y de la etiqueta p, pero Cmo podemos cambiar el color de una palabra concreta dentro de un prrafo? Para hacer esto tenemos que definir un nuevo tipo de estilo: las clases. Definir un estilo de clase es muy sencillo, basta escribir un punto y un nombre elegido por nosotros, por ejemplo: .azul color: #6C6CCA;} As hemos definido un estilo para la clase azul con tipo de fuente negrita y color #6C6CCA. Una vez definida la clase, para aplicrsela a una palabra basta utilizar la etiqueta span enmarcando la palabra. Por ejempo, para asignarle la clase azul a la palabra informacin (que esta dentro de un prrafo), escribiriamos: <p>En esta web sobre asociacin y flores.</p> encontrars nuestra <span class="azul">informacin de </span> la fotografas de { font-weight: bold; puedes ver qu

coleccin

Lo cual, hara que el prrafo se viese as:

Puedes observar que la clase azul ha "aadido" las propiedades color azul y negrita a la palabra informacin, manteniendo las otras propiedades que ya tena por pertenecer a un prrafo. Es decir, los estilos van sumando propiedades sin eliminar las que ya se tienen. Independencia entre el contenido y el formato. Con los estilos CSS conseguimos dar formato a las pginas web de una forma que no exista hasta que aparecieron ellos: separando el formato del contenido. Por un lado tenemos la definicin de estilos y por otro lado el propio texto de la pgina. Este concepto es muy importante porque hace que el trabajo de creacin y mantenimiento de una pgina web sea ms sencillo. Hasta que aparecieron los estilos CSS el formato y el texto estaban mezclados. Ahora se pueden separar y los estilos CSS nos proporcionan las herramientas para hacerlo, aunque tambin es posible mezclarlo todo. En este curso procuraremos hacerlo bien. Siguiendo esta forma de hacer las cosas obtendremos pginas web en las que cambiar su aspecto sea algo sencillo, simplemente habr que modificar un estilo en un solo lugar. An es posible aplicar formato sin separarlo del contenido, si quieres ver lo que no hay que hacer, mira este tema bsico.

Unidad 3. Aspecto de la pgina. Estilos bsicos (III)

3.2. Formato del texto
Hemos visto los fundamentos de los estilos CSS, ahora vamos a entrar en ms detalle viendo las posibilidades que ofrecen. Empezaremos con el formato del texto y las propiedades que se le pueden aplicar: color, fuente, tamao, inclinacin, grosor, decoracin y maysculas/minsculas. Color

El color se expresa con la propiedad color. El valor que puede tomar esta propiedad se puede expresar de varias formas: a. Un nmero hexadecimal. Por ejemplo color: #0000FF;,o color: 0x800080;. b. Tres nmeros entre 0 y 255. Por ejemplo color: rgb(0, 0, 255);. c. Tres nmeros entre 0 y 100. Por ejemplo color: rgb(10%, 20%, 75%);.

d. Un nombre. Algunos colores se pueden expresar con su nombre en ingls. Por ejemplo color: green; o color: DarkGreen;. Como todo esto es un poco lioso, hay herramientas que facilitan el trabajo con los colores, por ejemplo, ColorPic es un pequeo programa gratuito que puedes descargarte en esta direccin: http://www.iconico.com/colorpic/. Los mejores editores grficos tambin incorporan herramientas en este sentido, ms adelante veremos como trabajar con colores con el editor Kompozer. Si todava no lo has hecho, es conveniente que veas este tema bsico sobre colores Puedes encontrar ms informacin sobre los colores en el Curso de Illustrator. En el tema 8 volveremos a hablar sobre colores, ampliando algunas cuestiones relativas a la eleccin de los colores ms apropiados. Fuente Podemos elegir la fuente (o tipo de letra) a travs del atributo font-family. Podemos indicar cualquier fuente que queramos, teniendo en cuenta que si incluye espacios, debe de ir entre comillas dobles. Por ejemplo font-family: arial; o font-family: "Times New Roman";. Pero hemos de tener en cuenta que puede que quien vea la pgina no tenga instalada la fuente que queramos. Para evitar esto, existen cinco fuentes genricas que s se mostrarn en cualquier equipo: serif, sans-serif,cursive,fantasy, monospace. Esto no quiere decir que slo debamos de utilizar estas cinco. El valor de font-family pueden ser varias fuentes, separadas por comas. El navegador elegir, comenzando por la derecha, la primera disponible, por lo que es conveniente terminar por una genrica. .

Por ejemplo, font-family:Georgia, "Times New Roman", Times, serif;. Igual que ocurra con el color, los editores grficos ofrecen la posibilidad de elegir diferentes fuentes y previsualizar su forma, ms adelante veremos como hacerlo con Kompozer.

Tamao El tamao se regula a travs de la propiedad font-size. Podemos utilizar cualquiera de las unidades de tamao, pero lo ms frecuente es utilizar px (pixels), o porcentajes % o em, estas dos ltimas son tamaos relativos al tamao de la fuente del elemento que est por encima. 100% o 1em, sera el mismo tamao, mientras que 200% o 2em sera el doble y 50% o 0.5em sera la mitad. Si utilizamos valores relativos, facilitamos que se pueda cambiar de tamao todo el texto de la pgina de forma ms coherente. As los discapacitados visuales podrn utilizar el comando para cambiar el tamao de texto que tienen los navegadores. http://usalo.es/152/botonespara-cambiar-el-tamano-de-letra/ Inclinacin Podemos poner una fuente en cursiva utilizando la propiedad font-style. Puede tomar uno de los siguientes valores: normal. Coloca el estilo de forma normal, sin inclinacin. oblique. Inclina el texto. italic. Adems de inclinarlo, susituye la fuente por su versin en itlica si est disponible. Aunque la mayora de los navegadores no lo hacen. Grosor Podemos aumentar el grosor de la fuente, lo que equivaldra a ponerla en negrita, utilizando font-weight. Puede tomar los siguientes valores: normal. El texto no se muestra en negrita. bold. El texto se muestra en negrita. Nota. En teora se pueden expresar distintas intensidades de negrita, pero los navegadores no las muestran. Decoracin Con la propiedad text-decoration podemos hacer que el texto muestre, por ejemplo, los distintos tipos de subrayado, con los siguientes valores: none, el texto se muestra sin ningn tipo de decoracin. underline, el texto aparece subrayado. overline, el texto aparece sobrerrayado.

line-through, el texto aparece tachado. blink, el texto parpadea. (No funciona en Internet Explorer, en Firefox 3, si).

Unidad 3. Aspecto de la pgina. Estilos bsicos (IV)

Maysculas y minsculas Aunque escribamos el texto en maysculas o minsculas, luego podemos cambiarlo a travs del estilo. Por ejemplo utilizando text-transform podemos transformar el texto de ejemplo "Es un texto de EJEMPLO" de las siguientes maneras: uppercase, para transformarlo todo a maysculas. "ES UN TEXTO DE EJEMPLO". lowercase, para transformarlo todo a minsculas. "Es un texto de EJEMPLO". capitalize, para poner la primera letra de cada palabra en maysculas. "Es un texto de EJEMPLO". none, para no realizar ninguna transformacin. Existe otra propiedad que juega con la maysculas, font-variant. Esta propiedad puede hacer que las minsculas se muestren como maysculas de menor tamao. Vamos a utilizar "Este texto de Ejemplo". small-caps, realiza la conversin de las minsculas. "ESTE TEXTO DE EJEMPLO". normal, no realiza la conversin. Nota: El consorcio W3C regula las reglas de estilo para crear el estndar. No obstante, en la prctica, hay muchas propiedades que los navegadores no representan, o que slo se muestran en algunos, por lo que no las utilizaremos. Otras, se ven con algunas diferencias dependiendo del navegador. Por eso, es conveniente probar nuestra web en los principales navegadores. Los navegadores ms importantes actualmente son:

Internet Explorer Mozilla Firefox

Safari Opera Google Chrome Veamos un ejemplo con lo que hemos visto: <html> <head> <title>Estilo del Texto</title> <meta http-equiv="content-type" content="text/html; charset=iso8859-1" /> </head> <body> <h1 style="font-size:100%">&Eacute;ste es un h1 del mismo tama&ntilde;o que un p&aacute;rrafo normal.</h1> <p>&Eacute;ste es un p&aacute;rrafo normal.</p> <p style="color:red">&Eacute;ste p&aacute;rrafo es de color rojo, con algunas palabras en <span style="color:blue">azul</span>.</p> <p>Podemos cambiar la fuente: <span style="font-family:serif;">y poner este texto en serif</span>, <span style="font-family:sans-serif;">esta parte en sansserif</span>, <span style="font-family:cursive;"> la familia de esta palabra es cursive</span>, <span style="fontfamily:fantasy;">tambi&eacute;n tenemos fantasy</span>, <span style="font-family:monospace;">y acabamos con monospace</span>. </p> <p style="font-weight:bold; text-decoration:underline">Este p&aacute;rrafo (<span style="font-weight: normal; text-decoration: none;">menos esta parte</span>) est&aacute; en negrita y subrayado. <span style="textdecoration:overline">Este fragmento, adem&aacute;s sobrerrayado</span>.</p> <p style="text-transform:lowercase;"><span style="fontsize:85%;">&Eacute;STE,</span> EST&Aacute; <span style="font-size:110%;">ESCRITO TODO </span><span style="font-size:120%;">EN MAY&Uacute;SCULAS</span>, <span style="font-size:130%;">Y ADEM&Aacute;S VA</span><span style="font-size:140%;"> CRECIENDO.</span></p> </body> </html>

Lo normal es dar a la etiqueta body los atributos generales del documento, como el tamao o el tipo de fuente.

Unidad 3. Aspecto de la pgina. Estilos bsicos (V)

3.3. Bordes
Podemos agregar un borde alrededor de un elemento html, con la propiedad border. Esta propiedad engloba las tres propiedades del borde. color, un color RGB. Se define con la propiedad border-color. Por ejemplo, border-color: blue; o border-color: #F37760;. grosor, normalmente expresado en px. se define con la propiedad border-width. Por ejemplo, border-width: 2px;. estilo, uno de los estilos o aspecto que puede tener el borde. Puede ser cualquiera de los siguientes, que definimos con la propiedad border-style: none dotted dashed solid double groove ridge inset

outset

Por lo tanto, podramos definir el borde de un elemento de la siguiente manera: <p style="border-color:#009933; border-width: 3px; border-

style:double;">bordes</p> bordes En este caso, podemos resumirlo con el atributo border, siguiendo el formato border: color grosor estilo;, lo que quedara border:#009933 3px double;. Cada elemento tiene cuatro bordes, que podramos definir de forma independiente, como border-top, border-right, border-bottom y border-left. A su vez, para cada uno de ellos podemos definir su color, grosor y estilo de forma independiente, por ejemplo border-bottom-color o border-top-width. Si no sabes como referirte a los distintos lados de un elemento, visita este bsico .

3.4. Mrgenes
Los elementos html tienen dos mrgenes. El margen externo y el margin interno. Ambos se refieren a la la distancia hacia uno u otro lado con respecto al borde del elemento, a su lmite, independientemente de que el borde sea visible o no.

El margen externo se regula con la propiedad margin. El margen exterior es la distancia mnima que habr entre el borde exterior del elemento y el elemento siguiente, por cada uno de sus cuatros lados. margin: 0 margin: 0 margin:5px margin:5px 35px margin:15px margin: 0 margin-left:-20px Los margenes no se suman, se solapan, prevaleciendo el mayor. As, si un prrafo tiene un margen inferior de 50px y el de abajo un margen superior de 30px, entre ellos quedar un margen de 50px, por ser el mayor, pero no de 70px. Otro valor que podemos dar al margen es auto. Este valor da a ambos mrgenes el mismo valor, y nos permite, por ejemplo, horizontalmente un elemento con una anchura determinada. El margen est fuera del elemento. Observa, por ejemplo que no mantiene el color de fondo del elemento. El margen interno se regula con la propiedad padding. Se refiere a la distancia que hay ente el borde del elemento y su contenido, por ejemplo el texto. padding: 0 padding: 0 padding:5px padding:5px 35px padding:15px padding: 0 padding-bottom:20px El padding si que forma parte del elemento, por eso muestra el mismo fondo. Por defecto, la mayora de elementos incluyen un margen exterior, y algunos un margen interior, que debemos de tener en cuenta. Veamos un ejemplo con lo que hemos visto. Ve cambiando los valores: <html> <head> <title>Bordes y <meta http-equiv="content-type" 8859-1" />

m&aacute;rgenes</title> content="text/html; charset=iso-

</head> <body style="background-color:whitesmoke; font-family: sans-serif;"> <h1 style="font-size: 120%; background-color: #99CCFF; color: #FFFFFF; border-color: #6666FF; border-style: solid; border-width: 0 0 2px 5px; padding-left: 20px;">Bordes y m&aacute;rgenes</h1> <p style="background-color:#99CCFF; margin: 0;">&Eacute;ste es un p&aacute;rrafo sin margen.</p> <p style="background-color:#99CCFF; margin: 0;">&Eacute;ste es otro p&aacute;rrafo sin margen.</p> <p style="background-color:#99CCFF; margin: 20px;">&Eacute;ste es un p&aacute;rrafo con margin:20px.</p> <p style="background-color:#99CCFF; margin: 20px;">&Eacute;ste es un p&aacute;rrafo con margin:20px.</p> <p style="background-color:#99CCFF; margin: 20px; padding: 10px">&Eacute;ste es un p&aacute;rrafo con margin:20px y padding:10px.</p> <p style="background-color:#99CCFF; margin: 20px; padding: 10px; border: cyan 4px inset">&Eacute;ste es un p&aacute;rrafo con margin:20px, padding:10px y border: cyan 4px inset</p> <p style="background-color:#99CCFF; margin-right:25%;">&Eacute;ste es un p&aacute;rrafo con margin-right:25%.<br /> Cambia al cambiar la ventana.</p> </body> </html>

Unidad 3. Aspecto de la pgina. Estilos bsicos (VI)

3.5. Fondo
Otro aspecto que podemos personalizar es el fondo, con la propiedad background. background-color nos permite establecer el color de fondo del elemento. Por ejemplo, background-color: green;. Tambin podemos utilizar una imagen, con la propieadad background:

url(graficos/fondo.png);. En url() introducimos la direccin de la imagen que queremos utilizar. Si utilizamos una imagen podemos configurar otras propiedades:

background-repeat, determina si el fondo se repite. Puede tomar los valores norepeat si no queremos que se repita, repeat-x para que se repita en horizontal, repeat-y para que lo haga en vertical o repeat para que llene todo el fondo, que es el valor que toma si no le indicamos otra cosa. Si no se repite la imagen de fondo, podemos posicionarla con background-position. Podemos darle los valores de los cuatros lados (top, right, bottom y left), combinarlos para colocarla en las esquinas, por ejemplo top left, o centrarla con el valor center. Tambin podemos introducir medidas, donde el primer valor se refiere a la posicin horizontal y el segundo al vertical, por ejemplo background-position: 50% 50%;. <html> <head> <title>Bordes y <meta http-equiv="content-type" 8859-1" />

m&aacute;rgenes</title> content="text/html; charset=iso-

</head> <body style="background-image: url(graficos/fondo_ladrillos.jpg); background-color: #C9B2AC; background-repeat: repeat-y; background-position: center"> <h1 style="background-color: #CC9999; color: #FFFFFF;">Fondos</h1> <p style="background-color: #CC9999; color: #FFFFFF;">Ve cambiando los valores de background-repeat y background-position.</p> </body> </html>

3.6. Cmo declarar un estilo

Hasta ahora hemos aplicado los estilos directamente sobre el elemento, utilizando el atributo style. Esto es lo que se denomina estilos incrustados. Esto es til cuando tenemos que dar un estilo muy concreto a un elemento puntual. Pero no cuando queremos aplicarlos a todos los elementos de una pgina. Por ejemplo, imaginemos una pgina con 20 prrafos. Sera muy costoso cambiar definirlo para cada uno. Y volver a hacerlo cada vez que queramos hacer un cambio. Para evitar esto, podemos declarar un estilo.

Un estilo se declara con un selector y un bloque de declaracin, siguiendo el formato selector {bloque de declaracin;}. El selector identifica al elemento al que se le aplica el estilo. Puede hacerlo de las siguientes maneras: Si queremos formatear todas las apariciones de una etiqueta, utilizamos la etiqueta como selector. Por ejemplo, body o p. Para formatear determinados elementos, podemos definir clases. Para definir una clase, utilizamos el signo . seguido del nombre (descriptivo) que queramos dar a la clase. Por ejemplo .resaltado. De esta forma, creamos una clase genrica, y el estilo afectar a todos los elementos, sean del tipo que sean, que tengan esa clase. Tambin podemos especificar cmo se comporta la clase para cada elemento, con el formato etiqueta.clase. Por ejemplo p.resaltado. Por ltimo, para aplicar la clase a los elementos, no hay ms aadirles el atributo class con el nombre de la clase deseada. Por ejemplo <p class="resaltado">. Para darle estilo a un elemento en concreto, podemos utilizar su atributo id. En el selector, precedemos el id por el signo #. Por ejemplo, #logo. De forma opcional, podemos preceder el identificador con el tipo de elemento de que se trata. Esto puede ser til para ayudarnos a recordar de qu elemento se trata. Tambin podemos anidar selectores, separndolos por espacios. En este caso, el estilo slo afectar a los elementos contenidos en el selector que haya ms a la izquierda. Por ejemplo, el selector p.resaltado span slo afectara a las etiquetas span que estn dentro de algn prrafo (p) que tenga la clase resaltado (class="resaltado"). Al definir estilos, podemos utilizar varios selectores a la vez, si los separamos por comas. Por ejemplo, utilizando el selector p, h2, h1 podemos definir a la vez el estilo de las etiquetas p, h1 y h2. El bloque de declaracin, es la relacin de cada propiedad del estilo con el valor que toma. Es decir, contendr lo que colocaramos en la etiqueta style del propio elemento. El bloque de declaracin lo colocaremos detrs del selector, encerrado entre llaves { }. Lo normal es formatearlo para que nos sea fcil de leer. Para ello podemos utilizar saltos de lnea, espacios o tabulaciones, ya que son ignorados. Una forma comn de formatear el estilo, es como vemos en el siguiente ejemplo: p { color: blue; background-color: font-style: } #F7F0E2; oblique;

Unidad 3. Aspecto de la pgina. Estilos bsicos (VII)

3.7. Dnde declarar un estilo

En casos muy puntuales y concretos, declararemos el estilo incrustado al elemento o en lnea, utilizando el atributo style. Por ejemplo, en un determinado prrafo al que queremos aumentar un poco el margen porque queda mejor. Nos ser ms sencillo recordar que el estilo est en el elemento, que crear una clase que no nos servira de nada si borramos el elemento. De todas formas, no aqu no declararemos todo el estilo, solo los atributos que sean distintos al resto de elementos del mismo tipo. Si slo tenemos una pgina, podemos definir los estilos dentro del <head>. Para ello, tenemos que incluir en la etiqueta <style type="text/css"> ... </style>. En esta etiqueta, definiremos los estilos con el selector y su bloque de declaracin. Pero los ms habitual es tener varias pginas. En este caso resulta muy til tener los estilos definidos en una hoja independiente, una hoja de estilos. Una hoja de estilos no es ms que un archivo de texto, pero con la extensin .css, donde aparecen definidos los estilos que utilizarn las pginas. Para que funcione, debemos de enlazar con la hoja de estilo, para lo que utilizaremos la siguiente etiqueta en el <head> de nuestras pginas: <link href="hoja_de_estilo.css" rel="stylesheet" type="text/css" /> href indica la ubicacin de la hoja de estilo, tal como lo pondramos en un enlace. rel se refiere a la relacin del archivo con nuestra pgina. Al poner stylesheet le indicamos que se trata de una hoja de estilo. Por ejemplo, podramos poner alternate stylesheet lo que indicara que se trata de una hoja de estilo alternativa. Algunos navegadores como Firefox, nos permiten elegir entre la hoja normal o la alternativa a travs del men Ver Estilo de pgina. Puedes practicar algunas de las cosas que hemos visto con el ejercicio paso a paso Aplicar estilos sencillos.

3.8. Orden de aplicacin de los estilos CSS

Entonces, si definimos en varios sitios el estilo para un elemento cul se aplica? Bueno, realmente los estilos se van sumando. Por lo que si no repetimos ninguna propiedad, el estilo final de un elemento ser la suma de todos los estilos que afecten al elemento. Pero qu ocurre si repetimos una propiedad? Como norma general, prevalecer el estilo ms concreto sobre el ms genrico. Por ejemplo, si en la hoja de estilo establecemos el texto de los prrafos en rojo, y en la cabecera de la pgina definimos el color de los prrafos en azul, prevalecer ste ltimo, ya que es ms concreto, se refiere slo a los prrafos de esa

pgina. Y si en un prrafo de la pgina, en el atributo style indicamos el color de texto verde, prevalecer ste por ser el ms concreto de todos. Lo mismo ocurre con los selectores. Por ejemplo, p.inicio es ms concreto que p, ya que se refiere slo a los prrafos con esa clase. Y p#titulo sera an ms concreto, ya que se refiere directamente a un determinado prrafo. Lo mismo ocurre al anidar los selectores, p.inicio span es ms concreto que poner slo span. En caso de empate, por ejemplo si definimos varias veces la misma propiedad en una hoja de estilo, se tomar en cuenta la ltima, que machacar a las anteriores. Por ejemplo, poner p {margin: 20px; margin-bottom: 5px;} sera como poner p {margin: 20px 20px 5px;}. En cualquier momento podemos saltarnos el orden de prioridad de los estilos, aadiendo !important al final de una propiedad. Esto hace que tenga preferencia sobre el resto. Por ejemplo, en este ejemplo: p color: } { color: blue !important; red;

El prrafo debera de ser de color rojo, porque el valor rojo "machaca" al azul. Sin embargo, al poner !important, hace que el texto sea rojo. Hay que tener en cuenta que las propiedades se heredan de los elementos padre. Por ejemplo, si decimos que el texto del body ser de color azul, todos los elementos tendrn este color para el texto, a no ser que indiquemos otra cosa. La mejor forma de entender todo esto, es probando un ejemplo (recuerda que puedes modificarlo): <html> <head> <meta http-equiv="Content-Type" 8859-1" <title>Estilos</title> <style body font-family:sans-serif; background-color: } h1

content="text/html;

charset=iso/>

type="text/css"> { lightyellow; {

border-bottom: text-align: } p color:#660000; border: border-width: } p.derecha text-align: border-width: } #Pepe color: border-width: } .destacado color: white;

#FFCC66

5px

solid; center; {

#FF9933 0

10px 0 2px

solid; 2px; { right; 0; { red; 0; {

2px

2px

Unidad 4. Editor Web (I)

Quiz ests un poco cansado de escribir etiquetas HTML, si es as en este tema vamos a explicar cmo ahorrarte ese trabajo. Un editor web tambin ayuda en otros muchos aspectos de la creacin de pginas web.

4.1. Qu es un editor Web?

Un editor Web sera cualquier aplicacin que nos permita crear, editar y guardar una pgina Web. Como ya hemos visto, una pgina no es ms que un archivo de texto, por lo que cualquier programa que nos permita editar texto, puede funcionar como un editor Web. Podemos considerar tres categoras de editores Web: Editores de texto. Nos permiten editar el cdigo fuente puro y duro, como puede ser el bloc de notas. Editores de HTML. Funcionan como los editores de texto, pero pueden tener algunas opciones ms avanzadas. Como mostrar las etiquetas de colores, o cerrarlas automticamente. Editores WYSIWYG. Por un lado, nos permiten editar el cdigo fuente como los editores de HTML. Y por otro, nos permiten trabajar en vista de diseo. Es decir, ver la pgina como se vera en un navegador mientras la editamos. La mayora de estos editores suelen tener opciones para realizar tareas adicionales de forma ms fcil, como por ejemplo, crear elementos

de un formulario, insertar mens, e incluso cdigo JavaScript tipo AJAX ( ms adelante veremos de qu se trata). Editores de este tipo pueden ser Amaya o Dreamweaver. Escribir directamente el cdigo fuente nos da un mayor control sobre la pgina, obteniendo un cdigo ms preciso y sin etiquetas innecesarias. Pero el tener que escribir cada etiqueta hace que sea mucho ms lento y que debamos conocer mejor el HTML. Utilizar editores WYSIWYG resulta ms cmodo. Ya que no hemos de preocuparnos por la mayora de las etiquetas, y escribimos el texto como lo haramos en un procesador de texto. No obstante, no siempre se generar el cdigo que queramos. Y sobre todo si utilizamos editores no especializados, como Word que permite guardar como pgina web, aunque generando un cdigo muy "sucio". Por ejemplo, crear un html con Word en el que slo ponga "Hola mundo", con letra Arial y tamao 16px, genera un archivo de 22KB y 400 lneas de cdigo. Lo habitual es realizar el grueso de la pgina en vista de diseo, sobre todo escribir el texto. Y despus, cosas ms concretas y correcciones, realizarlas sobre el cdigo fuente. Esto tambin depende de los conocimientos de cada uno. Nota: Aunque en un editor WYSIWYG podemos ver cmo quedar la pgina, siempre hemos de probarla en los navegadores ms utilizados, en este momento Internet Explorer y Mozilla Firefox. Para realizar este curso, te recomendamos que no pierdas de vista el cdigo fuente, e intentes trabajar directamente con l la mayora de las veces, sobre todo al hacer cosas nuevas. Puede que vayas un poco ms despacio al principio, pero aprenders mucho mejor el HTML, y despus no tendrs problema para utilizar cualquier editor.

4.2. Elegir un editor

Existe un gran nmero de editores Web, unos ms completos que otros, con ms o menos opciones y con ms o menos fallos.

Y como al elegir cualquier programa, lo primero es optar por una solucin gratuita o de pago. Para realizar nuestra pgina Web, vamos a utilizar un editor WYSIWYG. Uno de los mejores (si no el mejor) editor de este tipo es Dreamweaver, de Adobe. Es un editor muy completo, y el elegido por la mayora de desarrolladores profesionales. Pero se trata de un editor de pago, aunque es cierto que podemos probarlo gratuitamente durante 30 das. En cuanto a opciones gratuitas, podemos encontrar, entre otros, Bluefish, ms enfocado a programadores; Amaya, desarrollado por el consorcio W3C; o KompoZer. Nos hemos quedado con este ltimo por ser bastante simple e intuitivo. Podemos descargar KompoZer desde su pgina oficial. No requiere instalacin, basta con descomprimirlo en una carpeta y ejecutarlo, aunque s deberemos instalar el paquete de idiomas en espaol como se explica en el sitio. Si necesitas ayuda para instalarlo, sigue este bsico .

Unidad 4. Editor Web (II)

4.3. El entorno de KompoZer
Vamos a echar un vistazo al entorno del editor KompoZer, y ver cmo realizamos con l las acciones ms comunes. El aspecto general es el siguiente:

En la parte superior encontramos la barra de ttulo, donde se ve el ttulo de la hoja. Debajo, encontramos una barra de mens, desde la que podemos acceder a todas las opciones del programa. Las opciones ms comunes, como Guardar, Nuevo, o insertar Enlaces o Imgenes las encontramos en la llamada barra de redaccin:

Debajo de esta barra, encontramos las barras de formato, pensadas para formatear el documento.

Normalmente no utilizaremos estos formatos, ya que todo lo referente al estilo lo trabajaremos directamente sobre la hoja de estilos. Pero si encontramos dos desplegables muy interesantes. El primero, que en la imagen muestra Texto en el cuerpo, nos permite elegir el elemento que contienen el texto que escribimos, por ejemplo un encabezado o un prrafo. El segundo, que en la imagen muestra (sin clase) nos permite asignar una clase al texto. Si seleccionamos un fragmento de texto, y le asignamos una clase, encerrar el texto en una etiqueta <span> con la clase dada. En la parte central, encontramos el rea de edicin, donde podemos editar el contenido de nuestra pgina. Podemos tener varias abiertas en distintas pestaas.

La forma en que podemos ver y trabajar con la pgina, depende del modo de edicin, de las cuatros disponibles en la parte inferior: Normal. Con este modo, vemos el diseo de la pgina como se mostrara en un navegador. Aunque aparecen algunas marcas ms, como informacin de la ubicacin de algunas etiquetas especiales, como comentarios y scripts, y lneas rojas punteadas en los bordes de tablas y divisiones. El modo Etiquetas HTML funciona como el anterior, pero mostrando en cada etiqueta un cuadradito amarillo con su identificador. El modo Cdigo fuente nos permite trabajar directamente sobre el cdigo fuente de la pgina. El modo Vista preliminar, muestra la pgina como se vera en un navegador, sin ninguna marca adicional. Tambin podemos ver el resultado en nuestro navegador predeterminado pulsando la tecla
F5.

En la parte inferior, en la barra de estado, encontramos una barra que muestra la jerarqua de etiquetas que hay sobre el lugar donde est el punto de insercin.

Es decir, lo que aqu vemos son todas las etiquetas que contienen a lo que tenemos seleccionado, desde la ms inmediata a la derecha del todo, a la primera, que suele ser el <body>. Esto nos permite seleccionar cualquier etiqueta y todo su contenido slo haciendo clic sobre ella. Si hacemos clic derecho sobre una etiqueta, aparece un men con opciones muy tiles:

Seleccionar hace lo mismo que la hacer clic sobre la etiqueta.

Eliminar etiqueta borra la etiqueta, pero no su contenido. Muy til, por ejemplo, para quitar un span. Cambiar etiqueta, sustituye una etiqueta por otra sin lateral si contenido. Por ejemplo, podemos cambiar un prrafo por un encabezado. ID muestra una lista de los ID que utilicemos en nuestros estilos, y nos permite asignrselos a un elemento. Clases, como con ID, muestra las clases disponibles y nos permite asignarlas al elemento. Adems, nos muestra la clase ya asignada a un elemento, pudiendo quitarla. Estilos en lnea. Nos permite definir el estilo del elemento, para lo que crear el atributo style. Propiedades avanzadas. Accedemos a una ventana en la que podemos ver todos los atributos del elemento y sus valores, editarlos, eliminarlos o aadir nuevos. Tambin podremos definir el estilo incrustado. Podemos mostrar u ocultar todas estas barras a travs del men Ver Mostrar / Ocultar.

Unidad 4. Editor Web (III)

4.4. Opciones de configuracin
Vamos a cambiar algunas de las opciones que vienen por defecto en KompoZer antes de comenzar a crear nuestras pginas. La ventana de Opciones es accesible a travs del men Herramientas Preferencias.... La ventana aparece dividida en cuatro secciones:

En General, nos aseguraremos de que est marcada la opcin Usar estilos CSS en lugar de elementos y atributos HTML. En Config. Nuevas pginas, si no lo est, en Conjunto de caracteres, seleccionaremos Occidental (ISO-8859-1).

En Avanzado, vamos a cambiar las siguientes opciones: En la seccin Marcado, vamos a configurar el Lenguaje como XHTML1 y el DTD como Estricto. Si quieres saber qu es esto y qu es el Doctype, consulta este avanzado . Nos aseguraremos de que est marcada la opcin Dentro de un prrafo, pulsar Enter lo cierra y crea uno nuevo. En Mostrar los siguientes caracteres como entidades, seleccionaremos Los anteriores y las letras Latin-1, para que al introducir caracteres, como letras acentuadas, KompoZer los sustituya por la entidad correspondiente. Esto no quiere decir que debamos de seleccionar estas opciones para poder crear una pgina, pero son las que utilizaremos en el curso.

4.5. Crear y guardar una pgina

Para crear una nueva pgina, basta con pulsar el botn

. Esto crear una pgina.

Con las opciones que hemos configurado, el cdigo de la pgina tendr este aspecto <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title></title> </head> <body> <br /> </body> </html>

Cuando realicemos cambios en la pgina, y no los hayamos guardado, aparecer un pequeo icono en la pestaa .

Para guardar los cambios, podemos pulsar la combinacin de teclas Ctrl + S, o el botn . La primera vez que guardemos la pgina, deberemos indicar el ttulo que le queremos dar (el contenido de la etiqueta title en la cabecera), y su ubicacin.

4.6. Escribir texto en KompoZer

La forma de escribir el texto, utilizar el teclado, etc. es la misma que con cualquier editor de texto. Es importante saber en qu elemento estamos escribiendo. Normalmente lo haremos dentro de prrafos y encabezados, incluso en divisiones. Esto podemos seleccionarlo en el primer desplegable de la barra de herramientas. En otras ocasiones, utilizaremos otros elementos como listas o tablas. Recuerda, que siempre puedes saber en qu etiqueta estamos mirndolo en la barra de estado. Nota: En este curso crearemos pginas XHTML Estrict, que no permiten escribir directamente sobre el cuerpo del documento, hay que utilizar prrafos. A la hora de escribir dentro de un prrafo, cuando pulsemos la tecla Intro crearemos un salto de lnea. Esto se debe a que cerramos el prrafo y comenzamos uno nuevo, porque as lo hemos elegido en las opciones. Si lo que queremos es crear un salto dentro del prrafo, lo que equivaldra a una etiqueta html del tipo <br />, tenemos que mantener pulsada la tecla
Maysculas (Shift) mientras pulsamos Intro.

Unidad 4. Editor Web (IV)

4.7. Hojas de estilo en KompoZer
Ya vimos cmo podemos definir un estilo incrustado para el elemento. Vamos a ver ahora como crear y definir una hoja de estilo. Todo lo referente a la hoja de estilo, se gestiona utilizando el Editor CSS, accesible a travs del botn .

Crear o adjuntar una hoja de estilo

Desde la ventana del editor, pulsamos sobre el desplegable de arriba a la izquierda, y seleccionamos Elem. enlace, ya que una hoja es eso, un archivo externo que se enlaza. La zona de la derecha cambiar como se ve en la imagen:

Si ya tenemos creada la hoja, solo tenemos que seleccionarla pulsando en Escoja archivo. Si la hoja an no existe, basta con introducir el nombre que queramos, para crear una hoja en la misma carpeta que la pgina. En ambos casos, pulsamos en Crear hoja de estilos. Si no exista an, el archivo no se crear hasta que no definamos algn estilo. Para cerrar la ventana, pulsamos Aceptar. Con esto, lo que hemos hecho realmente es incluir en la cabecera de la pgina la llamada a la hoja de estilo. Puedes comprobarlo en la vista Cdigo fuente.

Unidad 4. Editor Web (V)

Definir y editar un estilo

Podemos definir un estilo desde el mismo Editor CSS, pero seleccionando en el men la opcin Regla. Lo primero que tendremos que elegir ser el selector que queremos utilizar. Podemos seleccionar una de las opciones, segn el tipo de selector, pero es ms cmodo escribir

directamente el selector que nos interesa, por ejemplo body; o .miclase; o div#principal p... etc, cualquier selector vlido.

Cuando lo tengamos, pulsamos en Crear regla de estilo. Nos encontraremos con una serie de pestaas:

La pestaa General nos permite editar el estilo directamente, escribiendo propiedades y valores. El resto de pestaas se refieren a categoras de propiedades, y en ellas podremos definir el estilo de forma grfica, lo que puede resultarnos ms cmodo e intuitivo. Los distintos selectores que definamos, aparecern "colgando" de la hoja de estilo, en el panel de la izquierda, para que podamos editarlos. Si queremos borrar el estilo seleccionado, debemos pulsar el icono , y para cambiar el selector pulsamos en . Para editar las

propiedades del estilo, no tenemos ms que cambiar lo que queramos en las distintas pestaas. Por ejemplo, la categora de Texto tiene el siguiente aspecto:

Podemos elegir el tipo de letra o fuente desde los desplegables, as como el color, tamao y otras caractersticas. En la parte inferior de la ventana podemos previsualizar el aspecto del texto segn los valores que hayamos elegido. Para elegir un color para el texto podemos escribir su valor en el campo Color o hacer clic en el botn de la derecha para que se abra una ventana donde podremos seleccionar el color deseado.

Nota: La versin que hemos utilizado durante este curso (0.7.10) tiene un fallo o bug, que se produce si intentamos definir estilos para varios selectores sin aceptar los cambios. Por eso, recomendamos definir el nuevo selector y su estilo, aceptar los cambios, y volver a abrir el editor CSS para crear el siguiente estilo. Puedes practicar cmo crear algunos estilos bsicos con el ejercicio paso a paso Estilos con KompoZer.

Unidad 5. Preparar nuestro sitio (I)

5.1. Qu es un sitio web?

Un sitio web o website, es un conjunto de pginas web, ms o menos extenso, agrupadas bajo un dominio, como puede ser www.aulaclic.es o www.elpais.com. Lo normal, es que el sitio web parta desde una pgina inicial, o home, desde la que podemos acceder, de forma jerrquica a todo el contenido del sitio, a travs de hiperenlaces.

A su vez, podemos encontrar enlaces hacia otros sitios distintos, ya que cada sitio tiene una URL nica que nos permite acceder a l. En conjunto de los sitios publicados en Internet forman la WEB o WWW. El contenido de las pginas del sitio, puede estar escrito directamente en HTML. Esto genera un sitio esttico, que slo recibe actualizaciones de vez en cuando, ya que hay que hacerlas manualmente sobre el cdigo. En cambio, existen otros lenguajes, como PHP, ASP o JSP que generan en HTML a partir de datos, como contenidos de bases de datos, datos introducidos por el usuario, informacin global, etc. Esto origina sitios dinmicos, ya que los cambios se producen frecuentemente y son generados desde la propia pgina. Por ejemplo, una pgina que muestra la fecha del da actual sera un contenido dinmico. Otro ejemplo sera un foro.

5.2. La temtica del sitio

La idea de crear un sitio web nace porque tenemos algo que comunicar con el mundo. Y un tema que puede resultar interesante. Porque, por ejemplo, aunque crear una pgina Web con nuestros hobbies y aventuras cotidianas puede ser un buen ejercicio como aprendizaje, a la hora de la verdad a poca gente le resultar interesante leerlo. Para esto, obtendremos mejores resultados crendonos una cuenta en una de las numerosas redes sociales. El tema tambin debe de ser concreto. Si dominamos la informtica y la jardinera, no resultar serio si creamos un sitio en el que encontremos las dos cosas. Es mejor crear un sitio independiente para cada una. No slo debemos de elegir un tema que resulte atractivo para un grupo de usuarios, si no que debemos de tener informacin sobre l. No tiene demasiado sentido crear un sitio para escribir un slo artculo de media pgina. El tema elegido determinar el diseo de la pgina. No es lo mismo si pensamos mostrar fotos de animales para los amantes de las mascotas, una web para nios, una empresa de informtica, etc. Una vez elegido la temtica, debemos de distinguir cuales son las categoras en las que vamos a dividir nuestro sitio. Estas sern ms genricas o menos, dependiendo del tamao del sitio.

En nuestro ejemplo vamos a crear la web de una asociacin de aficionados a las flores. Principalmente, a esta ficticia asociacin le interesa exponer sus fotografas de flores en la web, pero tambin crearemos las pginas que den a conocer la asociacin y que permitan ponerse en contacto con ella.

Unidad 5. Preparar nuestro sitio (II)

5.3. Organizar los archivos
El sitio web se encuentra alojado en un servidor, que no es ms que un ordenador conectado a internet, capaz de "dar" archivos a quien se lo solicita. Por lo tanto, cuando accedemos a un sitio web, realmente accedemos a una carpeta de ese ordenador, que funciona como raz del sitio. Internamente, dentro de esa carpeta, encontramos archivos y subcarpetas que nos permiten organizar el sitio, igual que organizamos los documentos en las carpetas de nuestro equipo. Entonces cmo organizamos los archivos del sitio? No existe una regla exacta, ya que depende de muchos factores: nmero de pginas, cmo queremos navegar entre ellas, cmo se organiza el contenido, etc. Pero por lo general, y sin entrar en mucha teora, tendremos en cuenta una serie de cosas: En la raz del sitio, tendremos como mnimo la pgina de inicio, a la que llamaremos index.html (o .htm). Esto se debe a que cuando a un navegador le indicamos que abra una carpeta, busca el archivo index de la misma. Organizaremos los tipos de archivo en carpetas. Por ejemplo, una carpeta para las imgenes que forman parte del diseo de la pgina. Si a parte tenemos fotografas de una galera, o de productos, es mejor ponerlas en otra carpeta, ya que no tienen relacin con el diseo. Otra carpeta para los archivos javascript, etc. Si tenemos secciones claramente definidas, podemos guardar sus pginas en subcarpetas. Por ejemplo, en aulaclic.es tenemos una carpeta para cada curso. Recuerda que es conveniente incluir en cada carpeta que contenga pginas htm, un archivo index.html, ms que nada para que no se produzca un error si se accede directamente a la carpeta. Por otro lado, daremos un nombre descriptivo a los archivos. Nos resultar mucho ms sencillo si nuestros archivos se llaman contacto.html y noticias.html que si los llamamos

pagina_1.html y pagina_2.html. A no ser que se trate de pginas del mismo tipo en las que es muy importante el orden, como pginas de un manual. Es conveniente planificar cmo va a ser el sitio, y partir de las carpetas iniciales. Lgicamente, no vamos a tenerlo todo en cuenta, por lo que a medida que vaya creciendo nuestro sitio, iremos creando las carpetas que nos hagan falta. En nuestro ejemplo pensamos crear un sitio pequeo, de menos de 10 pginas. Primero crearemos el sitio en nuestro equipo, y cuando lo acabemos ya los subiremos a un servidor Web. Comenzamos por crear la carpeta raz. En este caso, la hemos llamado sitio_flores, y la hemos ubicado en la carpeta de ejercicios del curso. Qu tendremos dentro de esta carpeta? A priori, contendr las pginas, entre las que incluimos un index. Tambin tendremos una hoja de estilo, e imgenes del diseo de la pgina, como logos, imgenes para el fondo, etc. Por lo que ser mejor si agrupamos estas imgenes en una carpeta, que podemos llamar imagenes (omitimos el acento porque no conviene incluir caracteres especiales en los nombres de archivos y carpetas). Si ms adelante tenemos otros elementos, como archivos javascript, archivos para descargar, etc, ya nos preocuparemos por crear ms carpetas para ellos. Vamos a echar un vistazo a las secciones que queremos crear: Una seccin sobre las flores, con fotografas. Una pgina sobre la asociacin. Un formulario de contacto. Una pgina con noticias sobre el tema. A excepcin de la seccin de flores, las otras sern pginas simples, que podemos dejar en la carpeta raz. Pensemos en la seccin de flores. Queremos mostrar una amplia galera de fotografas. Para que el visitante pueda encontrar una flor en concreto, es importante que las clasifiquemos. Por eso crearemos in ndice alfabtico con las flores. En otra pgina, mostraremos las fotos de las flores. Como no conviene crear una pgina muy grande, con muchas fotografas, la dividiremos en las distintas categoras, que en principio sern cuatro.

En resumen, para la seccin de flores, necesitamos 5 pginas y fotografas, que estarn mejor recogidas en una carpeta, que podemos llamar fotos. No son muchos elementos, pero podemos pensar en agruparlos todos dentro de una carpeta. Esto se hace necesario cuando hay muchos archivos, pero con tan pocos puede resultar molesto, porque tendremos que tenerlo en cuenta a la hora de crear enlaces o utilizar las imgenes del diseo. De todas formas, como el fin de este curso es didctico, vamos a crear una subcarpeta para esta seccin, a la que llamaremos flores, para aprender as a manejarlas. Por lo tanto, la estructura de archivos que planteamos para nuestro sitio quedara as:

Comenzaremos por crear las carpetas, y si ya tenemos las imgenes, guardarlas en ellas. Las pginas y hoja de estilos, las iremos creando cuando nos hagan falta. KompoZer dispone de un administrador de sitios, que nos permite ver los archivos del sitio y abrirlos directamente. En este tema avanzado te explicamos cmo hacerlo .

Unidad 5. Preparar nuestro sitio (III)

5.4. Navegacin
Antes de comenzar a definir la navegacin, debemos de tener una idea de cmo va a ser el sitio web, es decir, debemos tener una idea formada de la estructura y extensin del sitio. As podremos decidir qu sistema de navegacin es el ms adecuado. Si construimos un sitio sobre la marcha, sin planificacin, segn vaya creciendo, se ir complicando la navegacin y al final no nos quedar ms remedio que hacer modificaciones que resultarn ms costosas que haberlo pensado un poco mejor con anterioridad.

Existe una regla que dice que un usuario no debera de necesitar ms de tres clics para llegar a la pgina que busca. Por eso lo primero que hemos de pensar es en facilitar a navegacin. El usuario debe de ser capaz de moverse de forma intuitiva por nuestro sitio sin perderse, para ello: Debe de saber dnde est. Debemos de dejarle claro en qu parte del sitio se encuentra. Para esto es muy til el ttulo de la pgina y utilizar un encabezado que identifique la seccin. Tambin debe de distinguir si sigue en nuestro sitio, o si ha pulsado un enlace que le lleve a un sitio distinto. Debe de saber dnde ha estado. Debemos de evitar que el usuario pase una y otra vez por la misma pgina para buscar algo. Por ejemplo, distinguiendo los enlaces ya visitados. Debe de saber dnde puede ir. Una pgina web se basa en enlaces, y estos deben de ser claramente identificables. Adems, no deben de ofrecer dudas de a dnde llevan, por ejemplo con nombres de pginas entendibles, que se muestran en la barra de estado, o con textos de informacin emergentes. Debe de poder seguir navegando. No le enviaremos a una pgina sin enlaces, desde la que no pueda continuar recorriendo el sitio. Piensa que puede acceder directamente a esa pgina, por ejemplo a travs de un buscador, por lo que no podra utilizar ni el botn Atrs del navegador. La forma de navegar por nuestro sitio, debe de ser constante. As, con visitar unas pocas pginas aprender a moverse por nuestro sitio, y le resultar ms cmodo. La forma ms habitual de solucionar todo esto es utilizar un men, que se mostrar en todas las pginas.

5.5. Estructura del men

El uso de mens es muy habitual en las pginas web. Un men no es ms que una lista de enlaces relativos a nuestro sitio, llamados elementos del men. Por lo general el men se suele colocar en la parte superior de la pgina, junto al logo o debajo de l, o en un lateral, normalmente el izquierdo. El men no debe de ser demasiado extenso. En un sitio grande no podemos pretender enlazar con todas las pginas, y no sera til hacer buscar al usuario entre cincuenta enlaces. Normalmente, aparecern las secciones de nuestro sitio web. Y por ejemplo, podemos utilizar diversos mtodos para que el usuario pueda expandir cada seccin y ver enlaces a los apartados de la seccin, o utilizar mens desplegables. Tambin podemos mostrar los enlaces a las distintas partes de la seccin en que se encuentra el usuario, ya que si est en esa seccin es probable que le interesen los apartados relacionados.

Los elementos del men deben de ser descriptivos. Por ejemplo, no es til poner una imagen, por bonita que sea, si puede que el usuario no entienda qu significa o a dnde lleva. O que para saberlo tenga que poner el cursor sobre l. El men debe de ser ligero, y no ocupar demasiado espacio, ya que se repetir en todas las pginas. En lo que se refiere al cdigo, el men suele tener estos elementos: Los mens se suelen basar en listas <ul></ul>. Dentro de cada elemento de la lista, colocaremos un enlace. Si no sabes qu son las listas, puedes verlo en este bsico . El aspecto del men se consigue por CSS. Suelen tener cdigo javascript, por ejemplo para mostrarlo, producir efectos ms o menos avanzados, o en vez de los enlaces. Por lo tanto, comenzaremos creando nuestro men como una lista, a la que ms adelante le iremos dando estilo hasta convertirla en un atractivo elemento de navegacin.

Unidad 5. Preparar nuestro sitio (IV)

5.6. Estructura de la pgina
En nuestro ejemplo, como norma general todas las pginas mantendrn la misma estructura. Por ejemplo, tendrn el mismo logo o ttulo, el sistema de navegacin en la misma posicin, el mismo pie, etc. Slo iremos cambiando el contenido. Una excepcin a esto puede ser la pgina de inicio. Pensemos que esta pgina es la presentacin de nuestro sitio, y el visitante se har una idea de qu puede encontrar en nuestro sitio a partir de ella. Por eso no es extrao que tenga ms enlaces que el resto de pginas. Esto, como siempre, depender del tamao del sitio. Pero pensando en el resto de pginas, no es una mala idea comenzar creando una pgina base, con esos elementos comunes que podamos utilizar a modo de plantilla. Vamos a ver qu elementos necesitamos en nuestro ejemplo: Un ttulo, para lo que podemos utilizar un encabezado h1. En el se mostrar el nombre de la asociacin, Floramics. Un men. En este caso pondremos un enlace a las siguientes secciones: o o o Inicio (index.html) Flores (flores/index.html) Nosotros (nosotros.html)

o o

Contacto (contacto.html) Noticias (noticias.html)

Como son slo cinco elementos, vamos a ponerlo en la parte superior, ya que en un lateral desperdiciaramos espacio. Un rea para el contenido. Cambiar en cada pgina, pero tendr un ttulo para la seccin. El pie, por ejemplo para poner el copyright de la pgina. Podemos utilizar un elemento de bloque como un prrafo o un div. Tambin existe una etiqueta especfica, <address> utilizada para contener informacin sobre el autor de la pgina. Para que nos quede mejor estructurada la pgina, vamos a utilizar divisiones en las tres secciones diferenciadas:
Encabezado Ttulo y men

Contenido Pie

De esta manera, entre pginas prcticamente slo cambiaremos el contenido. Con esta estructura en mente, vamos a escribir el cdigo: Creamos una nueva pgina, con el Doctype, head, body, etc... como ya hemos visto. Dentro, creamos tres divisiones. En la primera, colocamos un <h1> con el nombre de la asociacin. Tambin una <ul>, con un elemento y un enlace para cada una de las secciones. La divisin central la dejamos en blanco, ya que ser la que iremos cambiando. En la tercera divisin, introducimos el texto del pie. Por ejemplo, Todos los derechos reservados. Y no hemos de olvidar, que en un futuro contendr un enlace a la hoja de estilos. Por lo que es conveniente que lo pongamos ya, decidiendo un nombre para la hoja, por ejemplo estilo.css. Una vez creada, guardamos la pgina como base.html.

La pgina tiene pocos elementos, y te recomendamos que intentes hacerla escribiendo directamente el cdigo fuente. De todas formas, puedes seguir este ejercicio paso a paso para realizar la pgina con KompoZer, y comprobar el cdigo generado. Una vez creada, visualiza la pgina con un navegador. Puedes pulsar F5 desde KompoZer o hacer doble clic directamente sobre el archivo.

Unidad 5. Preparar nuestro sitio (V)

5.7. Pginas bsicas
Partiendo de la pgina que hemos creado, vamos a crear un par de pginas sencillas. La idea es tener pginas con algunos elementos, como texto, para poder comenzar con el diseo. Otra opcin podr ser crear la pginas con un texto de prueba. En este caso, como ya sabemos lo que queremos poner podemos adelantar trabajo. Como bsicamente se trata de introducir texto, lo haremos mucho ms rpido utilizando el editor de KompoZer. Vamos a comenzar por la pgina index.html. Como tenemos una pgina que nos sirve de plantilla (base.html) vamos a utilizarla. La abrimos, y en men Archivo seleccionamos Guardar como, y le damos el nombre index.html. De este modo tenemos una pgina con la misma estructura que la pgina base. Slo nos queda cambiar el contenido de la divisin central. Comenzamos por el ttulo de la seccin. Como estamos en la pgina inicial, y trata de ser una web amistosa, vamos a darle la bienvenida al usuario. Por ejemplo, lo cambiamos por Bienvenidos a la web de Floramics! Al estar en la pgina inicial, vamos describir brevemente qu puede encontrar el usuario en nuestra pgina. Recuerda que la idea principal es que los usuarios visiten nuestra galera de fotos, que pensbamos dividir en cuatro categoras. Por lo que sera una buena idea poner enlaces directamente a esas categoras, as remarcamos que es el contenido principal del sitio. De momento, crearemos el enlace, utilizando una lista como con el men. Como an no sabemos que categoras tendremos, vamos a dejar el enlace provisional, enlazando slo con # (<a href="#">Enlace</a>).

Por ejemplo, esto es lo que hemos introducido en el contenido del index.html, vindolo en el modo de edicin de etiquetas de KompoZer:

La otra pgina que vamos a crear es nosotros.html. En ella hablaremos un poco de nuestra asociacin. Como antes, partimos del archivo base.html, que guardaremos como nosotros.html, y cambiaremos el contenido:

Una vez editado el contenido, guarda la pgina. Ahora ya puedes probar los enlaces del men, para ir de inicio a nosotros y viceversa.

Ejercicio propuesto la Unidad 5

Prueba evaluativa de la Unidad 5

Unidad 6. Diseo y Usabilidad (I)

El contenido de una pgina web es lo ms importante pero un buen contenido con un mal diseo no es una buena pgina web. Tampoco sirve de nada un buen diseo con un mal contenido. Suponemos que el buen contenido lo pones t, nosotros vamos a intentar darte unas orientaciones para conseguir un buen diseo.

6.1. Un buen diseo

El cmo presentamos la informacin es muy importante para un sitio web. Y esto lo conseguimos con un buen diseo. Pero qu es un buen diseo web? Bueno, este punto puede dar para mucho, pero vamos a intentar transmitir unas pocas ideas bsicas: Comodidad para el visitante. Le debe de resultar cmodo navegar por el sitio, y tambin debe de poder captar la informacin (texto, imgenes, flash, vdeos...). Por eso es importante un buen sistema de navegacin, y presentar el contenido de forma clara y espaciada. Comodidad para el autor. Cuanto ms fcil nos resulte realizar modificaciones, mejor. Por eso separaremos el contenido del diseo, utilizando hojas de estilo. Accesibilidad. Cuanta ms gente pueda ver nuestro sitio mejor. Pensemos en cmo accede el visitante. En el aspecto tcnico, el sitio debera de seguir los estndares, para facilitar la compatibilidad con navegadores antiguos, u otros dispositivos, como telfonos mviles. Tambin es importante un diseo que soporte las pantallas pequeas, pero que aproveche las pantallas de gran tamao, cada vez ms frecuentes. Adems, hacerlo legible y poner textos descriptivos a las imgenes puede facilitar el uso para visitantes con problemas visuales.

Usabilidad. Por otra parte, pensemos en quin es el visitante. No es lo mismo si se dirige a nios, adultos, personas mayores o a todo el mundo. En cualquier caso, nuestro sitio debe de ser fcil de usar. Transmitir. El diseo debe de transmitir lo que el usuario puede esperar de l. Por ejemplo, de un banco esperamos seriedad, por lo que un diseo informal puede ser contraproducente. Bonito y original. El diseo debe de ser agradable, combinar bien colores, organizacin de los elementos, etc. Y cuanto ms original sea, ms lo ser nuestro sitio. Simple. Cuanto ms simple sea el diseo, ms se facilitarn el resto de aspectos que hemos comentado. Estos aspectos debemos de tenerlos en cuenta, pero no podemos pretender aplicar cada uno al 100%. Por ejemplo, un diseo ms original implicar utilizar ms elementos, y que todos aparezcan correctamente ordenados, lo que lo har ms complejo. Y al final un buen diseo depende de la temtica de la pgina y de lo que queramos transmitir con ella.

6.2. Colores
La eleccin de colores apropiados es una de las cosas que ms influyen en el aspecto del sitio. Lo habitual es utilizar una gama de colores armnicos, con variaciones de tonos de un mismo color. Con ellos formaremos la paleta de colores de nuestro sitio. Utilizar la misma paleta es importante, porque si no iremos utilizando variaciones del color, y al final tendremos un sitio con muchos colores distintos. Para aquellos que no sean buenos combinando colores, siempre se pueden inspirar en el diseo de pginas web, o herramientas que nos facilitan paletas de colores. Una buena idea es utilizar un selector de color, una herramienta que nos permita tomar el color de una parte de la pantalla o de la pgina web. Existen muchas herramientas gratuitas de este tipo. Nosotros hemos utilizado ColorPic. Si necesitas ayuda para instalar y utilizar la herramienta, visita este bsico .

Un buen ejercicio sera que intentases capturar la paleta del sitio que queremos crear utilizando ColorPic. Captura slo el color de los elementos HTML, no los colores que forman parte de las imgenes.

Esta es la paleta que hemos utilizado para nuestro ejemplo:

#3D2E2A #5F4232 #735846

#AF7051

#AA876F

#D38451

#FF7600 #F0D7B5 #F5E4CC

Unidad 6. Diseo y Usabilidad (II)

6.3. El texto
Al comenzar a aplicar estilos al sitio, comenzaremos por lo ms general e iremos hasta lo ms concreto. Y lo ms genrico es el estilo del texto. La mayora de los visitantes no leen todo el texto, echan un vistazo por encima buscando lo que les interesa. Es muy importante que el texto sea claramente legible, para lo que tenemos que tener en cuenta ciertas cosas: Nota: Vamos ir haciendo cambios en la hoja de estilo del sitio de ejemplo. Es conveniente que los vayas realizando y viendo cmo queda en el navegador, con las pginas que tenemos hasta ahora. Tipo de fuente. Ya comentamos al hablar del estilo bsico del texto que con la propiedad font-family nos permita asignar una o varias fuentes al texto. Debemos de escoger una fuente que se lea fcilmente, y que sea comn, para que el usuario la tenga instalada. Mientras que en el texto impreso es habitual el uso de fuentes con serifa (Times New Roman, serif), al tener menor resolucin en los monitores se leen mejor las fuentes sin serifa, como Verdana, Arial, o la genrica sans-serif. En nuestro ejemplo, vamos a utilizar la fuente Verdana. Aunque es comn, puede que el navegador no la tenga. En ese caso, indicaremos que utilice Arial, muy parecida y ms comn. Y si tampoco la tiene, que utilice la fuente sin serifa genrica del navegador. Por lo tanto, en la hoja de estilo declaramos el selector body, que contendr todo el texto, y le asignamos la propiedad font-family: Verdana,Arial,sans-serif;. Tamao de la fuente. Con el tipo de fuente ya seleccionado, ya que hay fuentes ms pequeas que otras, podemos elegir el tamao. Es obvio que un tamao muy pequeo dificultar la lectura. Tampoco utilizaremos una fuente excesivamente grande para el texto. Lo

normal son 12px para arriba, siempre que el diseo lo permita. Las recomendaciones en cuanto a usabilidad aconsejan expresar estos tamaos como relativos, utilizando em o %. Si no al body, al resto de elementos. Esto permite que despus, con slo cambiar el tamao de la fuente del body, cambie proporcionalmente el de todos los elementos, y no resulta difcil permitir que el visitante adapte esto a su gusto. En nuestro ejemplo, hemos optado por darle a la fuente en general un tamao de 15px, aadiendo al selector body la propiedad font-size:15px;. Tambin hemos controlado el tamao de los ttulos, esta vez con valores porcentuales, definiendo los estilos h1 {fontsize: 180%;} y h2 {font-size: 150%;}. Tambin tendr un tamao distinto el pie de la pgina. Para diferencialo, creamos una nueva regla de estilo, para la clase div.pie. El estilo para la nueva clase ser div.pie {font-size: 85%;}. Para que se refleje, debemos de asignarle la clase al div. Para hacerlo con KompoZer, hacemos clic en el contenido del pie, y en la barra de estado, hacemos clic derecho sobre la etiqueta div. En el men, elegimos clases pie. Color del texto. Para que el texto sea legible, debe de haber un buen contraste entre el color del texto y el color de fondo. Lo que ms cmodo resulta de leer es un texto oscuro sobre un fondo claro. Tampoco se lee bien el texto sobre una imagen con varios colores. Texto de ejemplo - Texto de ejemplo - Texto de ejemplo - Texto de ejemplo - Texto de ejemplo Adems, debemos de seguir cierta armona, ya que hay colores que al combinarlos pueden resultar demasiado intensos o casi molestos, sobre todo en textos amplios. Texto de ejemplo - Texto de ejemplo - Texto de ejemplo - Texto de ejemplo - Texto de ejemplo Al final, elegir un color u otro acaba siendo una cuestin de gusto. En nuestro ejemplo, vamos a utilizar uno de los tonos marrones oscuros de nuestra paleta para el texto en general, el color #735846. As que le aadimos al body la propiedad color: #735846;. Para los encabezados, vamos a elegir un color un poco ms llamativo, que tenga ms energa. Nos decantamos por un marrn anaranjado de la paleta, #D38451. Por tanto, aadimos la propiedad color: #D38451; a los selectores h1 y h2. Espacios. Un texto muy comprimido no invita a leerlo. Hay que dejarlo espaciado. Para ello es importante dejar separacin (margin o padding) entre el texto y otros elementos,

como imgenes, y entre prrafos. Tampoco deben de estar muy pegadas las lneas del prrafo. Esto lo podemos regular con la propiedad line-height. En nuestro ejemplo, ya iremos regulando el margen de los distintos elementos cuando se vaya complicando el estilo. Pero si vamos a separar un poco las lneas de los prrafos. Definimos un nuevo selector, p, y le aplicamos la propiedad line-height: 1.5em;, utilizando valores relativos al tamao del texto. Alineacin. Es importante alinear correctamente el texto, lo que podemos hacer con la propieada text-align. Por defecto, est alineado a la izquierda (text-align: left;), aunque en prrafos con poco texto, como el pie, suele quedar mejor centrado (text-align: center;). Cuando hay mucho texto, suele haber muchos saltos de lnea, como en las columnas. En este caso, queda mejor el texto justificado (text-align: justify;). En nuestro ejemplo, por lo general tendremos el texto justificado. Por lo que aadiremos al selector body esta propiedad. El texto del pie (div.pie) lo centraremos. De momento, la hoja de estilo de nuestro ejemplo tiene este aspecto: body { font-family: Verdana,Arial,sans-serif; font-size: 15px; color: #735846; text-align: justify; } h2 { font-size: 150%; color: #d38451; } h1 { font-size: 180%; color: #d38451; } p { line-height: 1.5em; }

div.pie { font-size: 80%; text-align: center; }

Unidad 6. Diseo y Usabilidad (III)

6.4. Fondo
Ya hemos comentado que el fondo del texto debe de tener un buen contraste. As que las zonas de nuestra pgina destinadas a contener texto tendrn un fondo normalmente de un color, evitando utilizar imgenes que puedan dificultar la lectura. Pero es habitual que las pginas no ocupen todo el contenido, dejando mrgenes laterales. Por ejemplo, pensemos en una pgina con una columna central de ancho fijo. A los lados quedan huecos, que no suelen tener el mismo fondo que el texto. Para esto es muy comn utilizar imgenes. Si decidimos utilizarlas, debemos de elegir una imagen que no resulte demasiado llamativa, para que no desve la atencin del contenido de la pgina. Puede quedar bonito, pero distrae la atencin del usuario. En nuestro ejemplo, vamos a utilizar dos fondos. Uno para el texto, para el contenido de la pgina general. Escogemos el color ms claro de nuestra paleta, #F5E4CC. En contraste, utilizaremos un fondo oscuro para la pgina. Hemos escogido el tono ms oscuro de la paleta #3D2E2A. Por lo tanto, desde el editor de CSS de KompoZer, aadimos al selector body el color para el fondo (background-color: #3D2E2A;). Como el contenido ya lo tenemos en una divisin, lo que vamos a hacer es darle una clase, que vamos a llamar contenido. En KompoZer, creamos una nueva regla de estilo, para el selector div.contenido. Le daremos el color de fondo ms claro (backgroundcolor:#F5E4CC;), y un poco de margen para que se muestre el color (margin: 20px;) oscuro del fondo. Tambin le daremos un poco de margen interno (padding: 20px;) para que el texto no quede pegado a los bordes. En resumen, hemos definido la siguiente clase: div.contenido {

margin: padding: background-color: #f5e4cc; }

20px; 20px;

Una vez creada la clase, se la vamos a asignar a las divisiones correspondientes. No tenemos ms que hacer clic en el texto que est dentro de la divisin a la que le queremos asignar la clase, y en la barra de estado de KompoZer, hacer clic derecho sobre la etiqueta div. En el men, elegimos clases contenido. Aplica las clases pie y contenido a los elementos correspondientes de todas las pginas creadas hasta ahora. Al final, el sitio nos habr quedado como podemos ver aqu.

Unidad 7. Maquetacin web (I)

7.1. Maquetar una pgina web

La maquetacin es la distribucin de los elementos en nuestra pgina. Piensa en una pgina web cualquiera. Seguro que distingues algunos elementos, como encabezados, columnas, mens laterales, etc. Hace unos aos, la maquetacin de las pginas web se realizaba utilizando tablas (<table>). Una vez entendido este proceso poda resultar sencillo, aunque si no se dominaban las tablas, poda convertirse en algo tedioso. El problema de las tablas es que generaban un pgina muy encorsetada, y el cdigo se volva complejo de entender. Adems, algunos buscadores encontraban problemas al analizar la estructura de la pgina. Actualmente, la maquetacin con tablas ha cado en desuso, y se realiza utilizando capas (<div>), tambin llamadas divisiones o contenedores. La colocacin de las capas en la pgina se realiza a travs de CSS. Esto permite, por ejemplo, que podamos pasar de un diseo con un men lateral a otro con el men en la parte superior, slo cambiando la hoja de estilos. En esta unidad veremos las tcnicas de maquetacin ms comunes, aunque hay que decir que existen diversas formas de conseguir una misma maquetacin.

Las capas pueden estar anidadas unas dentro de otra. Bsicamente, lo que haremos ser definir cmo se posiciona en la pgina, su colocacin y su tamao. Nota: Lo aqu explicado funciona para webs con el DTD XHTML Transitional o Strict. Al declarar otro DTD, o no hacerlo, puede que el resultado no sea el esperado.

7.2. Tamao
Por lo general, la maquetacin se realiza sobre elementos en bloque. Normalmente divisiones, pero tambin lo podemos hacer con prrafos, listas, o con el propio body. Por defecto los elementos de bloque ocupan todo el ancho del elemento que lo contiene, y su alto se ajusta al contenido.

Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamao: ancho (width) y alto (height). Los valores para estas medidas, pueden ser expresados en las medidas habituales: Tamaos absolutos, utilizando px, cm, etc... Tamaos relativos al elemento que lo contiene, utilizando porcentajes (%). Tamaos relativos a la fuente, utilizando em. El valor auto es el valor por defecto. Por ejemplo, un prrafo, por defecto, tienen un ancho del 100% y un alto ajustado al contenido. Por ejemplo, hemos definido el tamao para el siguiente prrafo: <p style="width:200px; height:100px; border: red 2px solid"> Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la izquierda, como en el ejemplo anterior. Una forma sencilla de centrarlo es dndole al margen (margin) derecho e izquierdo el valor auto. <p style="width:200px; height:100px; border: red 2px solid; margin:

auto;">

Con slo esto, podramos maquetar una pgina web que contenga una columna central, con un ancho fijo o relativo. En el siguiente ejemplo, hemos contenido todo el texto en una capa, a la que le hemos asignado el id="contenido", y en la hoja de estilo le hemos asignado un ancho fijo y la hemos centrado. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title>Una columna</title> <style type="text/css"> body { background-color:#C2C5E7; margin: 0; } div#contenido { width: 800px; margin: auto; border-left: #6699FF 2px solid; border-right: #6699FF 2px solid; background-color: #EDEEF8; padding: 5px; } </style> </head> <body> <div id="contenido"> <h1>P&aacute;gina con una columna</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. In eleifend sapien a neque. Etiam fermentum. Sed dapibus suscipit diam. Praesent non nisi ac leo congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi blandit dolor vitae sapien. Vivamus in neque. Integer sit amet mi. Curabitur ipsum lectus, ultricies sit amet, bibendum a, sodales vitae, massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu

nulla. Praesent vulputate dui eleifend rutrum nulla. </p>

id

lacus.

Nunc

vel

odio.

Nulla

<p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar. Suspendisse vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh. </p> <p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis tristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor, purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus. Maecenas erat. </p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum volutpat, lacus non mattis vulputate, lorem nunc varius odio, in venenatis ante augue quis nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac urna non elit pellentesque sollicitudin. Nunc pharetra nibh in quam. Proin eu magna ut ligula volutpat mollis. Quisque mollis, nulla a porttitor commodo, orci diam commodo pede, ac congue neque libero quis justo. Donec sit amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl tincidunt ipsum, in viverra dui orci vel massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas porttitor. Fusce ultrices nulla. </p> </div> </body> </html>

Unidad 7. Maquetacin web (II)

7.3. Desbordamiento
Al utilizar un elemento de bloque, como una capa, un prrafo, el body, etc... el tamao depende del contenido. Pero al definir un tamao fijo nos puede surgir un problema: qu pasa si el contenido del elemento (texto, imgenes, etc...) no cabe? Entonces se produce un desbordamiento, que podemos controlar desde el estilo con la propiedad overflow. Podemos darle estos valores: visible. Es la opcin por omisin. El contenido sale de elemento, y puede que se solape con los elementos que haya a continuacin. hidden. Lo que no quepa en el elemento, queda oculto. auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario.

scroll. Siempre muestra las barras de desplazamiento. visible. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda. hidden. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda. auto. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda. auto. ste s cabe. scroll. ste s cabe. Si el desbordamiento es visible, puede tapar a los elementos que haya despus.

7.4. Posicionamiento
El posicionamiento es el lugar donde el navegador coloca un elemento HTML para visualizarlo. Por defecto, los elementos se posicionan uno a continuacin de otro. Si se trata de elementos de bloque, como capas, prrafos, listas, etc, se irn colocando uno debajo del otro. A este posicionamiento se le denomina esttico. Utilizando CSS, con la propiedad position podemos cambiar el tipo de posicionamiento de los elementos. Existen cuatro tipos de posicionamiento: static. Es el normal. relative. El posicionamiento relativo coloca el elemento en su posicin normal. A partir de ah, podemos desplazar el elemento, permaneciendo el hueco de su posicin original. absolute. Con el posicionamiento absoluto, especificamos la posicin del elemento con respecto al elemento que lo contiene. fixed. Se establece la posicin del elemento de forma parecida al absoluto, pero el elemento queda fijo en la pantalla, aunque utilicemos barras de desplazamiento. Al cambiar el desplazamiento de un elemento, es fcil que se solape sobre otro. Esto produce que un elemento quede oculto. Para controlar esto, disponemos de la propiedad CSS z-index, a la que podemos asignar un valor numrico. Un elemento con un z-index mayor se ver por encima de otro con un z-index menor. Las cajas del siguiente ejemplo aparecen solapadas. Al pasar el cursor sobre ellas, se le asigna z-index: 10;, lo que hace que se vean por encima del resto. Nota: para que z-index funcione, se debe de haber especificado un tipo de posicionamiento para el elemento.

Unidad 7. Maquetacin web (III)

7.5. Posicionamiento relativo
El posicionamiento relativo coloca el elemento en su posicin normal, y a partir de ah lo desplaza la distancia que le indiquemos. Al desplazarlo deja un "hueco" donde estara su posicin normal.

Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: relative;. Para indicar el desplazamiento horizontal, utilizamos left para desplazarlo a la izquierda y right para hacerlo a la derecha. Utilizar valores negativos, produce el efecto opuesto. Por ejemplo, para desplazar un elemento 40px a la derecha, podramos poner right: 40px; o left: -40px;. Del mismo modo, podemos desplazarlo verticalmente utilizando top para desplazarlo hacia arriba o bottom para hacerlo hacia abajo. Si no establecemos valores de desplazamiento el elemento no cambia su posicin, por eso es muy comn asignar el posicionamiento relativo a elementos para poder utilizar una propiedad que requiere posicionamiento, como puede ser z-index.

Unidad 7. Maquetacin web (IV)

7.6. Posicionamiento absoluto
Al utilizar el posicionamiento absoluto indicamos de forma precisa la posicin del elemento en la pgina. Al contrario que con el posicionamiento relativo, el elemento al que le hemos asignado un posicionamiento absoluto no deja un hueco en la pgina. Podemos decir que el resto de elementos lo ignoran, y se colocan como si no existiese.

Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: absolute;. La posicin y tamao del elemento se indica siempre en relacin a otro elemento que lo contiene. El elemento contenedor ser el ms cercano que haya con posicionamiento no esttico. Si no hay ninguno, se utilizar el body. Para definir la posicin utilizamos top para referirnos a la distancia entre el borde superior del elemento posicionado y el borde superior del elemento contenedor. Por lo tanto left ser la distancia entre los lados izquierdos, right entre los lados derechos y bottom entre los lados inferiores. Para posicionar un elemento del que conocemos sus dimensiones, basta con indicar un punto en vertical (top o bottom) y un punto en horizontal (right o lef). En el siguiente elemento, todas las cajas tienen position: absolute; witdth: 60px; height: 60px y un borde. Para cada una hemos cambiado la posicin. Adems, a la caja que contiene a todas, le hemos dado position: relative; para que las cajas de dentro tomen su posicin a partir de ella. top: left: 0; bottom: left: 0; top: left: 50%; bottom: right: 50%; top: right: 0; top: left: 100px; top: right: 25%; 0;

0;

50%;

50%;

50%;

70px;

25%;

Utilizando este posicionamiento, obtenemos gran flexibilidad para maquetar nuestra pgina. Por ejemplo, podemos dividir la pgina en dos (o ms) columnas. Utilizaremos dos capas, con un alto al 100%, y que la suma de sus anchos sea el total de la pgina. Por ejemplo: div#columna_izquierda {

position: absolute; left: 0; top: 0; height: 100%; width: 50%; } div#columna_derecha { position: absolute; right: 0; top: 0; height: 100%; width: 50%; }

Esto originara dos columnas, cada una con un ancho de la mitad del de la pgina (o del elemento que las contenga). Si queremos obtener dos columnas, una con un ancho fijo y la otra con lo que sobre, lo haremos de otra forma. Por ejemplo, si la columna de la izquierda la queremos con un ancho fijo, por ejemplo de 200px, lo que haremos ser asignar a la columna de la derecha una distancia con el lado izquierdo de esos 200px, y con el lado derecho de 0, en vez de indicar el ancho. div#columna_izquierda { position: absolute; left: 0; top: 0; height: 100%; width: 200px; } div#columna_derecha { position: absolute; right: 0; left: 200px; top: 0;

height: 100%; }

Hay que decir que esto no funciona correctamente en Internet Explorer 6, que no interpreta correctamente el ancho del elemento si definimos la posicin de los dos lados, en vez de un lado y el ancho.

Unidad 7. Maquetacin web (V)

Podemos conseguir un efecto muy interesante controlando el desbordamiento de las columnas. Podemos dejar una columna fija, por ejemplo con un men, y otra que muestre el contenido, a la que damos la propiedad overflow: auto;. Esto har que nos podamos desplazar por el contenido de la pgina manteniendo el men siempre visible. Como por defecto, Internet Explorer siempre muestra la barra de desplazamiento en la etiqueta html, queda mejor si lo quitamos html {overflow:hidden;}. Todo esto lo veremos mejor con un ejemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title>Columna sin scroll a la izquierda</title> <style type="text/css"> html { overflow: hidden; } div#columna_izquierda { position: absolute; top:0; left: 0; height: 100%; width:20%; background-color:#FFE9D7; }

div#columna_derecha { position: absolute; top:0; right: 0; height: 100%; width: 80%; overflow: auto; background-color:#DDF2F9; } </style> </head> <body> <div id="columna_izquierda"> <ul> <li><a href="#ap1">Apartado 1</a></li> <li><a href="#ap2">Apartado 2</a></li> <li><a href="#ap3">Apartado 3</a></li> </ul> </div> <div id="columna_derecha"> <h2> Columna fija a la derecha</h2> <h3 id="ap2"> Apartado 1</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. In eleifend sapien a neque. Etiam fermentum. Sed dapibus suscipit diam. Praesent non nisi ac leo congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi blandit dolor vitae sapien. Vivamus in neque. Integer sit amet mi. Curabitur ipsum lectus, ultricies sit amet, bibendum a, sodales vitae, massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla. Praesent vulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </p> <p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar. Suspendisse vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh. </p> <h3 id="ap2">Apartado 2</h3> <p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis tristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed sapien nunc,

faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor, purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus. Maecenas erat. </p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum volutpat, lacus non mattis vulputate, lorem nunc varius odio, in venenatis ante augue quis nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac urna non elit pellentesque sollicitudin. Nunc pharetra nibh in quam. Proin eu magna ut ligula volutpat mollis. Quisque mollis, nulla a porttitor commodo, orci diam commodo pede, ac congue neque libero quis justo. Donec sit amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl tincidunt ipsum, in viverra dui orci vel massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas porttitor. Fusce ultrices nulla. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis nulla et risus. In eleifend sapien a neque. Etiam fermentum. Sed dapibus suscipit diam. Praesent non nisi ac leo congue vestibulum. Mauris ac orci eu nisl dictum ultrices. Morbi blandit dolor vitae sapien. Vivamus in neque. Integer sit amet mi. Curabitur ipsum lectus, ultricies sit amet, bibendum a, sodales vitae, massa. Quisque metus. Sed blandit hendrerit urna. Aenean eu nulla. Praesent vulputate dui id lacus. Nunc vel odio. Nulla eleifend rutrum nulla. </p> <p>Praesent ut ipsum. Nullam vitae nunc. Nam sit amet libero id mauris consectetur pulvinar. Suspendisse vulputate lorem quis lectus. Quisque commodo purus et nibh. Nunc quis mi quis risus hendrerit ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam ac dui. Mauris vulputate fermentum tellus. Morbi rhoncus lorem id nibh. </p> <h3 id="ap3">Apartado 3</h3> <p>Etiam cursus nulla ac purus. Pellentesque massa elit, dignissim et, volutpat eu, sagittis tristique, sem. Quisque nec leo. Etiam fringilla pellentesque turpis. Vestibulum at est. Sed sapien nunc, faucibus ac, suscipit sit amet, lacinia porttitor, mauris. Curabitur congue justo sed nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tristique diam vitae ligula. Nulla tincidunt, metus sit amet congue porttitor, purus pede commodo odio, vel varius mauris nulla id augue. Mauris pellentesque volutpat lacus. Maecenas erat. </p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum volutpat, lacus non mattis vulputate, lorem nunc varius odio, in venenatis ante augue quis nisl. Praesent ut mi interdum lorem consequat vulputate. Vivamus ac urna non elit pellentesque sollicitudin. Nunc pharetra nibh in quam. Proin eu magna ut ligula volutpat mollis. Quisque mollis, nulla a porttitor commodo, orci diam commodo pede, ac congue neque libero quis justo. Donec sit amet ligula. In vehicula, elit ut pellentesque viverra, arcu nisl tincidunt ipsum, in viverra dui orci vel massa. Nunc tincidunt congue risus. Donec nec sem id elit egestas porttitor. Fusce ultrices nulla. </p>

</div> </body> </html>

Recuerda que podemos anidar las capas. Por ejemplo, podramos subdividir una de las capas en otras dos dentro de ella, utilizando el mismo sistema. Otro elemento muy utilizado en la maquetacin, es el encabezado y el pie. Observa que en los ejemplos que hemos visto, colocbamos las capas en la parte superior del todo (top: 0;). Si queremos utilizar un encabezado, en vez de comenzar arriba del todo, debemos de dejar una separacin igual al alto del encabezado. Si el alto del encabezado lo indicamos en porcentajes, el alto de las columnas deber de ser del 100% - el alto del encabezado. En vez de eso, resulta ms claro si en vez del alto de las columnas, indicamos la parte superior (top) y la inferior (bottom). En este caso, nos dar igual la medida que utilicemos. Como mejor lo veremos ser con un ejemplo: div#encabezado { position: absolute; top:0; left: 0; height:10%; width:100%; background-color:RoyalBlue; } div#columna_izquierda { position: absolute; top:10%; left: 0; height: 90%; width:20%; background-color:SandyBrown; } div#columna_derecha { position: absolute; top:10%; right: 0; bottom: 0; width: 80%; background-color:LightGreen; }

Para practicar todo esto, te recomendamos hacer el ejercicio paso a paso Maquetar con posicionamiento absoluto, y despus el ejercicio paso a paso Simular pginas. Y para que veas que con un poco de imaginacin se pueden hacer muchas cosas, te recomendamos el ejercicio paso a paso Texto en 3D.

En el primero de los ejercicios ejercicio paso a paso anterior hemos visto una forma de crear una columna centrada en la pgina. Ya vimos que esto se poda hacer tambin definiendo un ancho y utilizando la propiedad margin: 0 auto;. No da igual utilizar uno u otro. Si lo hacemos con posicionamiento absoluto, y hacemos la ventana ms pequea que la columna, dejarn de verse el lado derecho y el izquierdo por igual. En cambio, de la otra forma, dejara de verse el lado derecho de la columna. Por lo que es mejor este sistema si tenemos un men de navegacin a la izquierda que queremos que se vea siempre. Los principales inconvenientes del posicionamiento absoluto es que hemos de definir el tamao del elemento, no se ajusta al contenido, y no se crean huecos en la pgina, por eso no podemos utilizarlo para cualquier cosa.

Unidad 7. Maquetacin web (VI)

7.7. Posicionamiento flotante
El posicionamiento es un poco distinto al resto. Para empezar, no se define con la propiedad position, si no con la propiedad float. Puede tomar estos valores: left : flotante a la izquierda (float: left;). right : flotante a la derecha (float: right;). none : sin flotante. Lo que hace este posicionamiento es desplazar el elemento todo lo que pueda hacia la direccin indicada, hasta encontrar el lmite del elemento contenedor, u otro elemento tambin flotante. Adems hace que todos los elementos fluyan alrededor de l. Es muy comn utilizarlo en imgenes, para que el texto fluya alrededor de ellas. En el siguiente ejemplo, todas las cajas contienen un prrafo con una imagen al principio (<p><img /> Texto</p>). Slo cambia el float de la imagen.

Normal. La imagen queda en la posicin inicial, aumentando el alto de la lnea, y no aparecen varias lneas de texto junto a la imagen.

Derecha. La imagen est en la misma posicin, pero con un float: right;. Esto permite que aparezcan varias lneas de texto junto a la imagen, y cuando llegue al final, que contine por debajo.

Izquierda. La imagen est en la misma posicin, pero con un float: left;. Esto permite que aparezcan varias lneas de texto junto a la imagen, y cuando llegue al final, que contine por debajo. Observa que el texto puede quedar demasiado pegado a la imagen. Para solucionarlo, no hay ms que aplicar un pequeo margin a la imagen, hacia el lado que est el texto. Existen algunos inconvenientes al utilizar el posicionamiento flotante. Un elemento que contiene a otro flotante, no lo tiene en cuenta para su tamao a lo alto. Por ejemplo, el siguiente prrafo tiene un borde, y vemos que si la imagen es flotante, "se sale".

Normal. El prrafo se ajusta a la imagen y el texto.

Derecha. El prrafo slo ajusta su alto al texto. Adems, si por ejemplo hay varios prrafos con elementos flotantes al mismo lado, hace que se "amontonen":

Normal. Primer prrafo.

Normal. Segundo prrafo.

Derecha. Primer prrafo

Derecha. Segundo prrafo. Para solucionar esto, disponemos de la propiedad clear, que rompe el flotamiento. Puede tomar tres valores: left: impide el flotamiento a la izquierda. right: impide el flotamiento a la derecha. both: impide el flotamiento por ambos lados. En el siguiente ejemplo, utilizamos el mismo que en el ejemplo anterior, pero al segundo prrafo le hemos dado la propiedad de estilo clear: right;.

Derecha. Primer prrafo

Derecha. Segundo prrafo. Con el posicionamiento flotante, podemos por ejemplo colocar elementos uno al lado del otro. En el siguiente ejemplo, hemos utilizado cajas, todas con float:left; y un pequeo margen para que no se peguen. Observa cmo se comportan cuando cambias el tamao de la ventana: De forma muy parecida, podemos utilizar el posicionamiento flotante para crear columnas en un documento. Basta con que la suma del ancho de las capas que harn de columnas quepa en el ancho de elemento contenedor, y que tengan posicionamiento flotante. En Internet Explorer, si la suma de los anchos es del 100%, para algunos tamaos de ventana no cabe, por lo que mostrar una columna debajo de la otra, aunque esto slo ocurre a veces. Por eso, cuando utilizamos porcentajes es mejor utilizar un ancho total un poco menor, por ejemplo del 99% o 99.5%.

De acuerdo con lo que hemos dicho, podemos dividir un elemento en dos columnas de la siguiente manera: div#columna_izquierda { float: left; width: 30%; height: 100%; background-color:SandyBrown; } div#columna_derecha { float: left; width: 69.5%; height: 100%; background-color:LightGreen; }

Para aadir una cabecera al principio, no hay ms que poner una capa antes de las columnas, con todo el ancho. Y para poner un pie, haramos lo mismo, pero colocndolo despus de las columnas, y rompiendo el flotamiento con clear:both;. div#cabecera { width: 99.5%; height: 10%; background-color:RoyalBlue; } div#columna_izquierda { float: left; width: 30%; height: 80%; background-color:SandyBrown; } div#columna_derecha { float: left; width: 69.5%; height: 80%; background-color:LightGreen; } div#pie { clear: both; width: 99.5%; height: 10%; background-color:Violet; }

La principal diferencia con el posicionamiento absoluto es que al flotante s le afectan los mrgenes, propios y del elemento contenedor, y que no estamos

obligados a definir el alto. En el ejemplo anterior, hemos establecido el alto porque no hay contenido, pero si no lo especificamos, el alto se ajustara al contenido del elemento. Para practicar lo que hemos visto, te recomendamos que hagas los ejercicios Maquetar con posicionamiento flotante y Organizar elementos.

Unidad 7. Maquetacin web (VII)

7.8. Posicionamiento fijo
El posicionamiento fijo (position: fixed;) se define igual que el posicionamiento absoluto, con las propiedades top, bottom, left y right. Pero su comportamiento es distinto: el posicionamiento fijo se refiere siempre a la ventana del navegador, independientemente de que el elemento posicionado est dentro de otro elemento con posicionamiento, como pasaba con el absoluto. Adems, el elemento siempre se muestra en la misma posicin, aunque la pgina sea larga y nos desplacemos hacia abajo o hacia un lado. En el siguiente ejemplo, tenemos dos cajas con posicionamiento fijo. La de la izquierda est al principio de la pgina. La de la derecha, est al final, dentro de elementos con posicionamiento. Observa que esto no le afecta. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title>Posicionamiento fijo</title> <style type="text/css"> div#fijo_izquierda { position: fixed; left: 10%; top: 50px; width: 100px; height: 100px;

border: #663366 5px double; } div#fijo_derecha { position: fixed; right: 10%; top: 50px; width: 100px; height: 100px; border: #663366 5px double; } div#columna { width: 50%; margin: auto; } .verde, .azul { height: 500px; border: #006666 5px dashed; border-width: 0 5px 5px 5px; position: relative; } .verde { background-color: #66CC99; } .azul { background-color:#6699FF; } </style> </head> <body> <div id="fijo_izquierda">Posicionamiento fijo<br />Izquierda</div> <div id="columna"> <div class="azul"></div> <div class="verde"></div> <div class="azul"></div>

<div class="verde"></div> <div class="azul"></div> <div class="verde"></div> <div class="azul"></div> <div class="verde"></div> <div class="azul"></div> <div class="verde"></div> <div class="azul"></div> <div class="verde"> <div id="fijo_derecha">Posicionamiento />Derecha</div></div> </div> </body> </html> fijo<br

Una de las propiedades de este posicionamiento es que si imprimimos la pgina web y ocupa varias pginas en papel, los elementos fijos se imprimen en todas las pginas, por lo que puede resultar til para pies y encabezados. Nota: Intenet Explorer 6 no soportaba este posicionamiento.

Unidad 7. Maquetacin web (VIII)

7.9. Ancho de la pgina, lquido o elstico
Al crear el diseo de una web, bsicamente existen dos tendencias: que la pgina ocupe todo el ancho de la ventana del navegador (diseo lquido), o que ocupe slo una columna con un ancho fijo (diseo fijo). No es que uno sea claramente mejor que otro, tienen sus pros y sus contras: Diseo fijo.

En el diseo fijo, la pgina tiene un tamao exacto, normalmente expresado en pxel. Esto facilita el diseo, sobre todo si est compuesto por imgenes divididas en trozos que deben casar perfectamente, ya que podemos posicionar todo de forma exacta. Tambin nos permite controlar el ancho de los elementos de texto, no creando columnas ni demasiado largas ni demasiado pequeas. Por contra, no aprovecha bien el espacio. Pensemos en una pgina de ancho fijo, de 900px. Si un usuario la ve desde la pantalla de su telfono mvil, que tiene un ancho de 320px, la mayor parte de la pgina no quedar visible. En cambio, si se ve desde un monitor panormico de 24'', con 1920px de ancho, la mayor parte del espacio estar desaprovechado. Como ejemplo de diseo fijo, tenemos la pgina de inicio de aulaClic. Diseo lquido. En el diseo lquido, en vez de unidades absolutas se utilizan relativas al tamao de la ventana. Esto hace que la pgina sea ms flexible a los distintos dispositivos de visualizacin. Por contra, es ms difcil controlar el diseo, sobre todo si se basa en muchas imgenes, porque hay que pensar en qu ocurre si la ventana es muy pequea o muy grande, y que no se descoloque todo al cambiar de tamao. Tambin puede producir lneas de texto muy largas, lo que incomoda la lectura. Aunque el usuario siempre tiene la opcin de hacer ms pequea su ventana. Para intentar controlar un poco el tamao de los elementos, existen las propiedades de estilo max-width (ancho mximo), min-width (ancho mnimo), max-height (alto mximo) y min-height (alto mnimo). Un ejemplo de diseo lquido puede ser la pgina de este curso. Diseo elstico. ltimamente, se ha acuado el trmino "diseo elstico" para el diseo en el que el tamao de los objetos, no es ni fijo ni en relacin al tamao de la ventana, si no al tamao del texto (basado en em), dando al usuario la posibilidad de cambiar su tamao, y en proporcin, el de todos los elementos. Aunque permite que el texto se controle, sigue sin adaptarse a las distintas ventanas, y resulta difcil controlar las imgenes.

Actualmente, la mayora de las pginas ofrecen un diseo fijo, sobre todo si tienen un diseo ms elaborado. Las que ofrecen un diseo ms elstico, suelen mostrar una columna central elstica, que se adapta a la pantalla, y columnas con un ancho fijo, para mens o para la publicidad.

Unidad 8. Mens (I)

8.1. El HTML del men

El men es un elemento fundamental de nuestra web, y hemos de dedicarle una atencin especial. Bsicamente, el men es un conjunto de enlaces a las distintas partes de nuestro sitio, y lo ms habitual es encontrarlo en el html de la pgina, o en un archivo javascript. De momento, vamos a ver cmo crearlo desde el HTML. La estructura puede ser cualquiera: podemos hacer un men con divs, con tablas, etc. Pero lo ms comn, por ser una estructura sencilla de manejar, es utilizar una lista (<ul></ul>), y est forma es la que explicaremos. Si desactivamos los estilos del navegador (en Firefox, men Ver Estilo de pgina Sin estilo; IE no tiene esta opcin) o vemos el cdigo fuente de webs como www.elpais.es o www.marca.es, podremos encontrar que en el lugar del men aparece una lista. Por tanto, cada elemento del men es un elemento de la lista <li></li>. El elemento, contendr normalmente un enlace (<a href=""></a>) a una pgina del sitio. Observa que hemos el men de nuestro ejemplo, siguiendo esta estructura: <ul> <li><a <li><a <li><a <li><a <li><a </ul>

href="index.html">Inicio</a></li> href="flores/index.html">Flores</a></li> href="nosotros.html">Nosotros</a></li> href="contacto.html">Contacto</a></li> href="noticias.html">Noticias</a></li>

8.2. Estilo bsico del men

Una vez creado el men, todo lo referente a su aspecto lo haremos utilizando estilos CSS. Lo ms cmodo ser darle un id, por ejemplo id="menu". De esta manera podremos referirnos la men como ul#menu, y a sus elementos como ul#menu li. Las listas se muestran casi igual en IE que en Firefox, pero en el primero se desplazan hacia la derecha utilizando margin, y en el segundo padding. Para no liarnos, podemos comenzar por poner ambos a 0, y ya les daremos algn valor si lo creemos necesario. Otra cosa caracterstica de las listas son las vietas. Podemos quitarlas con la propiedad list-style-type: none;, o utilizar una imagen con la propiedad list-style-image: url(imagen.png);. Al final los elementos de la lista tendrn el aspecto de botones que se pueden pulsar. Pero esto no es cierto, ya que el enlace slo est en el texto, porque la etiqueta <a> es un elemento en lnea que se ajusta a su contenido. Podemos cambiar este comportamiento con aplicndole a los enlaces del men la regla display: block. Esto lo convierte en un elemento de bloque, y hace que ocupe todo su contenedor. Daremos un formato apropiado al texto, a los enlaces, y aadiremos un borde a los elementos para diferenciarlos. Todo esto en funcin del diseo que queramos conseguir. ul#menu { margin: 0; padding: 0; list-style-type: none; } #menu li { background-color: #AF7051; border: #5F4232 3px solid; margin: 1px; } #menu a { color: #F0D7B5; text-decoration:none; display: block; padding: 2px; } Inicio Flores Nosotros Contacto Noticias

Unidad 8. Mens (II)

8.3. Posicin de los elementos

Por defecto, los elementos de la lista se muestran uno debajo de otro. Pero por cuestiones de diseo, podemos preferir que se muestren en horizontal, uno al lado del otro. Esto podemos conseguirlo, por ejemplo poniendo los elementos como flotantes. #menu li { background-color: #AF7051; border: #5F4232 3px solid; margin: 1px; float: left; } Inicio Flores Nosotros Contacto Noticias

Tambin podemos ponerlos en horizontal con la propiedad display: inline;. En este caso, lo mostramos como elementos en lnea, por lo que no podremos regular su tamao.

8.4. Tamao de los elementos

Por defecto, el ancho (width) de una lista es del 100% del elemento que la contiene. Su alto (height) depende de la cantidad de elementos que contenga. El ancho de los elementos es del 100% de la lista cuando estn en vertical, y ajustado al contenido cuando estn en horizontal. El alto, se ajusta siempre al contenido. Por cuestiones estticas, puede que queramos personalizar estos tamaos. Por ejemplo, para que todos los elementos que estn en lnea tengan el mismo ancho, basta con definir un ancho con la propiedad width, suficiente para contener al elemento mayor: #menu li { background-color: #AF7051; border: #5F4232 3px solid; margin: 1px; padding: 2px; float: left; width: 60px; }

Inicio Flores Nosotros Contacto Noticias

Si estamos utilizando los enlaces con display: block, debemos de darle el mismo alto para que lo llene todo. Otra opcin sera definir el tamao sobre los enlaces, ya que los elementos de lista flotantes se ajustarn al tamao. Recuerda, que siempre puedes centrar horizontalmente el contenido de un elemento con la propiedad text-align: center;. Del mismo modo, podemos definir un alto con la propiedad height. #menu li { background-color: #AF7051; border: #5F4232 3px solid; margin: 1px; width: 150px; text-align: center; height: 30px; }

Inicio Flores Nosotros Contacto Noticias

En CSS no existe una propiedad para centrar verticalmente el contenido de un elemento. Pero en casos como ste, en el que slo tenemos una lnea de texto, podemos utilizar un truco. Si al alto de la lnea (la propiedad lineheight) le damos el mismo tamao que el alto del elemento (en el ejemplo anterior, habra que aadir line-height: 30px;), el texto se mostrar centrado verticalmente.

Unidad 8. Mens (III)

8.5. Distintos estilos del elemento

Es habitual que los elementos de un men tengan varios estilos distintos: el estilo normal; el estilo que muestra cuando tiene el cursor encima, que transmite al usuario la sensacin de que se puede pulsar se elemento; y un tercer estilo que diferencia el elemento "en el que estamos", es decir el que lleva a la pgina en la que el usuario est en ese momento, lo que le ayuda a situarse. Para esto podemos utilizar clases y pseudoclases. Si no sabes cmo cambiar el estilo de un elemento al pasar el cursor sobre l, consulta este bsico en el que te explicamos las pseudoclases.

Tambin puede seguir el ejercicio paso a paso Utilizar pseudoclases CSS, en el que creamos un estilo para nuestro sitio de ejemplo. Utilizar uno o varios de estos estilos depender del diseo que queramos conseguir. Puedes practicar cmo crear algunos mens con el ejercicio paso a paso Crear mens bsicos. Ahora, vamos a darle formato al men de nuestro ejemplo, para que tenga el mismo aspecto que en las siguientes imgenes:

Lo vamos a hacer siguiendo este ejercicio paso a paso. Con los cambios realizados en el ejercicio, nuestro sitio de ejemplo habr quedado como se ve aqu.

Unidad 9. Imgenes (I)

9.1. Introduccin

Ya hemos visto que podemos incluir imgenes en nuestra pgina web utilizando la etiqueta <img src="imagen.png" alt="texto alternativo" />, y que estas imagen deben

de ser del formato jpg, gif o png, dependiendo del tipo de imagen, para obtener la mejor relacin calidad-tamao. En nuestro sitio de ejemplo, vamos a utilizar imgenes para mostrar fotografas, pero tambin como parte del diseo. Por ejemplo, vamos a crear una galera fotogrfica para las imgenes de las distintas flores que queremos colgar en nuestro sitio. La idea es tener cuatro pginas, una para cada categora de flores (silvestres, ornamentales, exticas y plantas), desde las que podamos acceder a las fotografas de las flores, que son de gran tamao. Como la mecnica es la misma, slo haremos la galera de flores silvestres. Pero te invitamos a que intentes hacer alguna otra sin ayuda al acabar el tema.

9.2. Galera con miniaturas

Las fotografas que utilizaremos puedes encontrarlas en la carpeta fotos_flores que habrs descargado con los archivos del sitio. La idea es simple: mostrar imgenes en una pgina. En principio, bastara con ir poniendo las etiquetas img para cada imagen. Esto bastara si fuesen imgenes de pequeo tamao. Pero imagina una pgina con 15 o 20 imgenes, donde cada una ocupa toda la pantalla. La pgina tardara mucho en cargarse, por el peso de las imgenes, y sera muy larga. Por eso, lo normal cuando creamos una galera es crear miniaturas (o thumnails) de las imgenes. Se trata toda o parte de la imagen original, de menor tamao, que al pulsar sobre ella muestra la imagen original. La forma ms simple de hacer esto es crear un enlace hacia el archivo de la imagen. Por ejemplo: <a href="imagen_grande.jpg"><img src="miniatura.jpg" /></a>.

alt="Descripcin"

Tambin se suele utilizar javascript para abrir la imagen, consiguiendo efectos ms vistosos. Para crear una miniatura de una fotografa, podramos poner un valor menor en los atributos width y height de la etiqueta img. Y aunque esto hace que se muestre ms pequea, el archivo sigue siendo el mismo, por lo que la pgina tardara lo mismo en cargar. La solucin es crear un nuevo archivo de imagen, reduciendo el original.

Para trabajar con imgenes debemos de emplear algn programa especializado. Nosotros hemos elegido GIMP, por ser un potente programa de retoque fotogrfico totalmente gratuito y libre. Puedes descargar su ltima versin desde

http://www.gimp.org.es/modules/mydownloads/. Si necesitas ayuda para instalarlo, consulta este bsico . Tambin puedes utilizar otros programas, como Photoshop. Incluso, si slo

vamos a redimensionar alguna foto puntualmente, puedes utilizar programas ms simples, como Paint, preinstalado en Windows. Utilizando este programa, nos resultar sencillo crear las miniaturas. Si no conoces los programas de retoque fotogrfico, puedes realizar el ejercicio paso a paso Recortar y redimensionar imgenes con GIMP. En nuestro sitio de ejemplo, tendremos todas las fotografas de las flores en la carpeta fotos, dentro de la carpeta flores. Para cada foto, tendremos la fotografa que queremos mostrar, de un tamao mayor, y la miniatura, que se llamar igual, pero terminado en _mini. La mayora de las fotos, ya estn redimensionadas y tienen la miniatura, por lo que slo tienes que copiarlas de la carpeta fotos_flores, en la carpeta de ejercicios, que habrs descargado a la carpeta del sitio, sitio_flores/flores/fotos. La foto buganvilla.jpg es mucho mayor que las dems. Debes reducirla al 50% y obtener la miniatura tal y como se explica en el ejercicio anterior.

Unidad 9. Imgenes (II)

9.3. Organizar las miniaturas
Una vez que tenemos las miniaturas, hemos de plantearnos cmo las vamos a organizar en la pgina. Esto depender del nmero de miniaturas que queramos mostrar, de su tamao, del diseo de la pgina, etc. En nuestro ejemplo, vamos a simular una ficha para cada flor. En cada ficha estar la miniatura que enlaza con la imagen (hay flores que tienen dos imgenes), el nombre de la flor y su nombre cientfico. Vamos a comenzar por crear la galera de las flores silvestres. Partiendo del archivo base.html, crea la pgina silvestres.html, guardndola dentro de la carpeta flores. Si pruebas la pgina en el navegador, comprobars que no se muestra el estilo, y los enlaces no funcionan. Esto se debe a que ni la hoja de estilo ni las otras pginas estn en la

misma carpeta. Para solucionarlo, podemos indicar delante del nombre del archivo ../, para indicar que se encuentra en un nivel superior. Por ejemplo href="../estilo.css". Pondremos la pestaa Flores siempre como activa. En el ttulo (h2) hemos escrito Galera de flores silvestres. Despus del ttulo, en un prrafo (p), hemos escrito Las flores silvestres son aquellas que crecen en nuestra regin. Para verlas, basta con acercarnos a un parque o dar un agradable paseo por los alrededores de nuestra ciudad.. A partir de aqu, vamos a comenzar a aadir las fichas de las flores silvestres que tenemos. Vamos a ver como estructuramos la ficha. Como ejemplo, vamos a utilizar la flor del Agret (Oxalis pes-caprae): Para delimitar las distintas fichas, lo ms cmodo es crear un div para cada una. Como a este div le definiremos ciertas propiedades de estilo, podemos pensar ya que necesitar ser identificado. Y como habr varios, y en varias pginas, vamos a asignarle la clase ficha. Dentro de este div.ficha, colocamos la imagen de la miniatura:

<img alt="Agret" title="Agret" src="fotos/agret_mini.jpg" height="75" width="100" />. Como al pulsar sobre la miniatura, hay que abrir el original, debemos de colocar un enlace con la imagen dentro. Por tanto quedar:

<a href="fotos/agret.jpg"><img ... /></a>. Junto a la imagen, tenemos que colocar dos elementos de texto. En la primera lnea el nombre de la flor, y en el segunda el nombre cientfico. Podramos colocar el texto en un prrafo, y separar los nombres con un salto de lnea (<br />). Pero como queremos diferenciar un poco el nombre cientfico, lo ms cmodo ser ponerlo en otro prrafo con una clase, por ejemplo class="cien". Por lo tanto, el texto nos ha quedado as: <p>Agret</p> <p class="cien">Oxalis pes-caprae</p>. Si te fijas en el resultado final del ejemplo, vers que hay una pgina con un listado de las flores, y enlaces a cada una de ellas. Para poder enlazar, vamos a asignarle in ID al div.ficha. Para no liarnos, seguiremos una nomenclatura fcil de recordar. Por ejemplo,

utilizaremos el nombre de la flor en minsculas, y si tiene espacios, los cambiaremos por guiones bajos. Por tanto, la ficha de la flor de Agret nos ha quedado as: <div id="agret" class="ficha"> <a title="Agret height="75" width="100" <p>Agret</p> <p </div> href="fotos/agret.jpg"><img alt="Agret" Oxalis pes-caprae" src="fotos/agret_mini.jpg" /></a> class="cien">Oxalis pes-caprae</p>

Y en KompoZer, en la vista normal, se ve as:

Nota: Observa que el archivo de imagen tiene el nombre de la flor, que adems hemos puesto en los atributos alt y title. Esto aumenta la importancia de la imagen en los navegadores al buscar el nombre de la flor, y hace ms probable que al buscar fotos de Agret en Google aparezca nuestra foto, lo que puede atraer usuarios interesados por la temtica de la pgina.

Unidad 9. Imgenes (III)

Ahora vamos a definir el estilo de la ficha. Para ver mejor el efecto, crea la ficha de unas cuantas flores ms. En la carpeta fotos_flores encontrars tambin el archivo

nombre_flores.txt, con los nombres comunes y cientfico de alguna de las flores utilizadas. La idea que tenemos es la de crear una fichas de tamao fijo, de 250 px de ancho por 120 px de alto. De manera que el nmero de fichas que se muestren por lnea dependa del ancho de la ventana, lo que agradecern los usuarios con grandes pantallas. Declaramos el selector div.ficha. Le asignamos las propiedades de tamao fijo width: 250px; height: 120px;. Para que queden en la misma lnea, le damos un flotante a la izquierda (float: left;). Para delimitar mejor el borde de cada ficha, le aadimos un borde (border: 1px solid #d38451;). Al estar flotantes, las fichas quedan pegadas. Para separarlas un poco, le aadimos un margen (margin: 15px;). Si lo pruebas, vers que las fichas se salen del div.contenido. Para solucionarlo, podemos aadir un prrafo vaco despus de las fichas, que rompa el flotante (<p style="clear:both;"></p>). Vamos a cambiar el estilo de las imgenes de la ficha (div.ficha img). El texto debe de quedar a la derecha de la imagen, por lo que esta deber de ser flotante (float: left;). Tambin la separaremos un poco de los bordes de la ficha (margin: 3px;). Como es un enlace, el navegador le agrega un borde azul. Vamos a cambiarlo por otro ms acorde con el diseo (border: 2px solid #d38451;). Para destacar que se puede pulsar sobre las imgenes, haremos que al pasar el cursor por encima (div.ficha img:hover), el borde cambia el mismo naranja que las pestaas (border-color: #ff7600;). As los usuarios asociarn ese color a los elementos de navegacin. Por ltimo, nos queda darle formato al texto, que lo definiremos sobre el nuevo selector div.ficha p. Al texto le daremos el color del fondo del body, (color: #3d2e2a;). Vamos a cambiarle el margen a slo 3px (margin: 3px;) y a reducir un poco el tamao de la letra (font-size: 95%;), y el alto de la lnea (line-height: 1.3em;). Esto ltimo lo notaremos cuando alguno de los nombres ocupe ms de una lnea. El prrafo que contiene el nombre cientfico (div.ficha p.cien), lo pondremos en cursiva (font-style: oblique;), y lo separaremos un poco del prrafo anterior (margintop: 1em;), y recuperamos el color de texto general (color: #735846;). Observa que no

nos hara falta poner div.ficha en el selector, pero as luego es ms fcil identificar qu estilos pertenecen a la ficha. Algunas fichas van a contener dos o tres miniaturas, por lo que no cabrn en el ancho de la ficha. As que vamos a definir otro tipo de ficha, igual que la anterior, pero con el doble del tamao, que ser el ancho de las dos fichas, ms el espacio entre ambas : 250px (ancho) + 15px (margen derecho) + 15px (margen izquierdo)+ 250px (ancho) = 530px. No tenemos que volver a definir la ficha, simplemente definimos una nueva clase con ese ancho div.ficha_doble {width: 530px;}, y se la asignamos a las divisiones que nos interese, sin quitar la clase ficha, separando las clases con espacios class="ficha ficha_doble". Esto hace, que como ambas clases son igual de concretas, si hay propiedades repetidas se prevalece la declarada en ltimo lugar. Por lo que esto slo funcionar si en la hoja de estilo, la clase div.ficha_doble est definida despus de la clase div.ficha. En resumen, todos los estilos declarados en este apartado son los siguientes: div.ficha { border: 1px solid #d38451; margin: 15px; width: 250px; height: 120px; float: left; } div.ficha img { border: 2px solid #d38451; margin: 3px; float: left; } div.ficha img:hover { border-color: #ff7600; } div.ficha p { margin: 3px; line-height: 1.3em; font-size: 90%;

color: #3d2e2a; } div.ficha p.cien { margin-top: 1em; font-style: oblique; color: #735846; } div.ficha_doble { width: 530px; }

Puedes ver como ha quedado hasta ahora la pgina con las flores silvestres aqu. Ahora, slo queda hacer lo mismo con el resto de categoras. Observa que de momento no tenemos enlaces a estas pginas. Esto lo haremos en el tema siguiente.

Unidad 9. Imgenes (IV)

9.4. Tabla de ndice
Ya tenemos, en la carpeta flores, las cuatro pginas con las galeras, correspondientes a las distintas categoras. Ahora, vamos a crear otra pgina, sin imgenes, que recoja el listado completo de las flores disponibles, ordenadas alfabticamente. A esta pgina vamos a llamarla index.html. As conseguimos que si un visitante accede directamente a la carpeta flores, se muestre esta pgina. Por lo tato, creamos la pgina index.html, dentro de la carpeta flores, con la estructura que tiene el resto. En el ttulo de la pgina (h2), hemos escrito: ndice alfabtico de flores. En el primer prrafo, hemos introducido el texto: Aqu puedes encontrar todas las flores de las que tenemos imgenes, listadas alfabticamente:. Ahora vamos a listar todas las flores. De cada una, mostraremos su nombre, categora y un enlace a su ficha. La estructura ms apropiada del HTML para listar datos es la tabla

<table></table>. Dentro de ella, podemos crear una fila (<tr></tr>) para cada flor, y una celda (<td></td>) para el nombre, otra para la categora y otra para el enlace. Si no conoces las tablas, o quieres aprender ms sobre su estructura, consulta este bsico .

Utilizando KompoZer podemos insertar una tabla pulsando en el icono de redaccin. Al hacerlo, aparece una ventana, con tres pestaas:

de la barra

En Rpido, podemos elegir con un clic el nmero de filas y columnas, para una tabla pequea. En Preciso, especificamos filas y columnas numricamente, pudiendo concretar tambin la Anchura de la tabla y el Borde. En Celda, podemos ajustar la alineacin, y las propiedades de cellpadding y cellspacing, que por defecto estn a 2. De momento, dejamos las opciones por defecto, y establecemos 3 columnas y tantas filas como flores tengamos. Con estas opciones, KompoZer nos ha creado el siguiente cdigo: <table style="text-align: cellpadding="2" <tbody> <tr> <td></td> left; width: 100%;" border="1" cellspacing="2">

<td></td> <td></td> </tr> ... </tbody> </table>

Observa que la tabla contiene un tbody. Esta etiqueta no es obligatoria, y podramos quitarla. La primera fila ser el encabezado. As que vamos a cambiar las celdas normales (<td></td>) por celdas de encabezado (<th></th>), aunque tambin podramos crear una clase para el td. Podemos hacerlo directamente en el cdigo fuente, o utilizando KompoZer, seleccionando las tres celdas con Ctrl pulsado, volviendo a pulsar en Tabla y eligiendo Estilo de celda Cabecera. En cualquier caso, tras introducir en las celdas de encabezado Nombre, Categora y Ficha, nos habr quedado el siguiente cdigo para la primera fila: <tr> <th>Nombre</th> <th>Categor&iacute;a</th> <th>Ficha</th> </tr>

Ahora, para cada una de las flores, rellenamos una fila, siguiendo el orden alfabtico de los nombres. Por ejemplo, para la flor de Agret, hemos introducido la siguiente fila: <tr> <td>Agret <td>Silvestres</td> <td><a </tr>

Oxalis

pes-caprae</td>

href="silvestres.html#agret">Ver</a></td>

Observa que el enlace apunta a la pgina de su categora, y dentro de ella, al ID de su ficha. Una vez que tenemos todas las flores, o por lo menos unas cuantas para apreciar mejor el estilo, vamos a definirlo. Como puede que tengamos ms tablas en nuestro sitio, tenemos que identificar esta tabla. Podramos utilizar una clase, pero emplearemos un ID, ya que en principio, no vamos a

aplicar este estilo a otras tablas. En todo caso siempre podramos cambiarlo. Le asignamos el id="flores". No vamos a cambiar demasiado de la tabla (table#flores). Lo nico, reducir un poco la fuente (font-size: 90%;), y aadirle un borde (border: 1px solid #ff7600;), y darle un color de fondo de nuestra paleta (background-color: #f0d7b5;), un poco ms oscuro que el del div.contenido. En vez de utilizar bordes para separar las cedas, vamos a crear una nueva clase, llamada alterna (table#flores .alterna), que aplicaremos a filas alternas para diferenciarlas, y que slo cambiar el color de fondo, para que sea el mismo que el del div.contenido (background-color: #f5e4cc;). En el HTML de la tabla, para que no muestre el borde, quitamos el atributo border o lo ponemos a 0. Asignamos la clase alterna a la primera fila, despus del encabezado, y la vamos aplicando de forma alterna a las sucesivas filas. Para acabar, como la ltima columna siempre contendr el mismo texto, vamos a darle un ancho fijo. Eso s, en em, por si ms tarde decidimos cambiar el tamao de la fuente. Para hacerlo, podramos por ejemplo definir columnas <col />, como hemos comentado en el avanzado. Pero la forma ms simple es darle el ancho que queramos a la primera celda de la columna, la del encabezado, y el resto se ajustar a ese ancho. Le asignamos al th el estilo incrustado style="width: 5em;". Puedes ver como ha quedado hasta ahora la pgina pulsando aqu.

Unidad 9. Imgenes (V)

9.5. Estilo redondeado
Si te fijas en el diseo de la pgina, vers que tiene muchas esquinas. Queda muy cuadrado. Quedara ms suave si pudisemos redondear un poco las esquinas. Los elementos de HTML son siempre rectangulares, y no hay ninguna propiedad de momento que nos permita redondear las esquinas. S existe la propiedad -moz-borderradius, que consigue este efecto. Pero de momento es una propuesta de Mozilla y slo funciona en Firefox, por lo que no es til si no se ve en el resto de navegadores. Aunque es posible que en la prxima revisin del CSS, esta propiedad se convierta en estndar.

Si buscas este tema en Internet, encontrars muchas formas de cmo lograr este efecto. Ms o menos complicadas, unas utilizando imgenes, otras libreras javascript, etc... Nosotros vamos a utilizar un mtodo, utilizando imgenes y CSS, para convertir estas divisiones: En esto otro: Se trata de dos elementos distintos. El primero, el de fondo claro sobre el fondo oscuro, y el segundo, el del borde naranja. Vamos a comenzar fijndonos en el primero: Bsicamente, lo que pretendemos hacer es simular el elemento redondeado, colocando en las esquinas estas imgenes: , , ,y .

As que el primer paso es crear nuestras imgenes. Hasta ahora habamos utilizado GIMP. Pero se trata de un programa de retoque fotogrfico, no de dibujo. Para crear grficos, necesitamos un programa de dibujo que nos permita trabajar con grficos vectoriales, como puede ser Illustrator o CorelDraw, de los que encontrars cursos en aulaClic. Siguiendo en la lnea del curso, nos hemos decantado por Inkscape, una herramienta totalmente gratuita y libre que puedes descargar desde su web. Si necesitas ayuda con la descarga e instalacin del programa, consulta este bsico .

Ahora, para crear las esquinas, puedes seguir el ejercicio paso a paso Crear esquinas redondeadas. Una vez que tenemos las imgenes, vamos a ver cmo las colocamos. Tenemos una divisin, en este caso con la clase contenido. En un principio, podemos pensar en poner las imgenes directamente en la divisin. Luego, podemos situarlas en las esquinas con posicionamiento absoluto. Podra ser una solucin, aunque la idea es que el diseo sea independiente de la pgina, que si cambiamos la hoja de estilo, podamos volver a ver las esquinas angulares, por ejemplo, o la imagen de otro color. Por lo tanto, vamos a introducir las imgenes utilizando CSS, y la nica propiedad que puede mostrar una imagen es background-image. Y esta es la que utilizaremos. Utilizando esta propiedad, es sencillo poner una imagen en una esquina de una divisin. Por ejemplo, para colocarla en la esquina superior izquierda, escribiramos:

div { background-image: url(imagenes/red_lt.png); background-position: left top; background-repeat: no-repeat; height: 25px; border: red 1px dotted; }

El problema de background-image es que slo podemos poner una imagen por elemento. Pero si por ejemplo, tenemos un div dentro de otro, podemos asignarle a cada uno una imagen. En el siguiente ejemplo, le damos in borde a cada uno para que se vea, donde estn, pero el de dentro no debe de llevar borde, porque si no las imgenes no quedan alineadas. div { background-image: url(imagenes/red_lt.png); background-position: left top; background-repeat: no-repeat; height: 25px; border: red 1px dotted; } div div{ background-image: url(imagenes/red_rt.png); background-position: right top; background-repeat: no-repeat; height: 25px; border: blue 1px dotted; }

Utilizando esto, podramos conseguir el resultado que buscamos superponiendo cuatro divisiones, y a cada una ponindole su imagen de fondo. Sera una posible solucin, si nos aseguramos de que como mnimo las divisiones tengan 50px de alto. Pero nosotros vamos a variarlo un poco. La estructura que vamos a hacer es la del ejemplo anterior, a continuacin, otro div donde introduciremos el contenido (texto, imgenes, etc...) y al final, otro div doble con las esquinas inferiores. Todo ello agrupado dentro de una divisin, que en nuestro ejemplo llamaremos div.redondo. Para ver cmo aplicamos todo esto a nuestro ejemplo, puedes seguir el ejercicio paso a paso Redondear esquinas con CSS. Tambin hemos creado otra caja redondeada para algunos elementos dentro del contenido de la pgina, como la tabla de las flores, o la cita de la pgina nosotros.html. Esta caja tiene alguna cosilla ms, porque tambin tiene un borde. Puedes ver cmo lo hemos hecho en este avanzado .

Puedes ver el aspecto de una pgina de nuestro sitio con lo visto hasta ahora pulsando aqu.

Unidad 9. Imgenes (VI)

9.6. Pestaas y botones
Si echamos otro vistazo a nuestro diseo, vemos que para que estn en consonancia, las pestaas tambin deberan de ser un poco redondeadas. Pero en este caso, como todas tienen el mismo ancho, utilizaremos una imagen, que adems nos permitir darle otros efectos, como degradados. En las pginas web, es frecuente utilizar imgenes para crear iconos, por ejemplo los de aulaClic . La idea de estos ejemplos es simple, colocar la imagen en un enlace. Pero hay que tener cuidado, y pensar siempre que las imgenes podran no cargarse. Por eso es muy importante , o para simular botones, con texto incluido, como

incluir un atributo alt en las imgenes. Y si la imagen no deja bien claro a dnde va el enlace, aadir adems un texto descriptivo en el atributo title. En elementos con texto, como botones o pestaas, para evitar problemas con las imgenes, y porque resulta mejor para navegadores, buscadores, personas con deficiencias visuales que usen navegadores especiales, etc... es muy recomendable utilizar un texto normal, y la imagen como fondo. Y esto es lo que haremos en nuestro ejemplo. Como los elementos son de un tamao determinado 90x40 px, crearemos tres imgenes de fondo: una la pondremos con el elemento normal, otra cuando est el ratn encima, y otra para la clase activa.

9.7. Inkscape. Crear la pestaa

Como se trata de una imagen, un dibujo que queremos crear desde cero, utilizaremos Inkscape. Con esta aplicacin, vamos a crear una pestaa para nuestros elementos del men, que son de 90 px de ancho y 40 px de alto. Recuerda, que en Inkscape podemos crear rectngulos con la herramienta Crear rectngulos y cuadrados . Los rectngulos, muestran un control circular en su esquina

superior derecha que nos permite regular el radio de redondeo de sus cuatro lados, mientras tengamos la herramienta seleccionada.

Tambin hemos visto que en la barra de herramientas superior hay unos controles que nos permiten cambiar el tamao del elemento.

Con esto, no nos resultar difcil crear la pestaa. Creamos un cuadrado, de 88px de ancho (ms vale que nos sobre un poco que intentar encajarlo al pxel) y 45 px de alto (el alto no tienen que ser los 40px exactos, si sobra algo, no se mostrar), con los bordes sin redondear. Una vez creado, el rectngulo, con l seleccionado pulsamos las teclas Ctrl + D. Este comando, duplica el elemento. Es decir, ahora tenemos dos rectngulos iguales, uno encima

del otro. Para poder moverlo, elegimos la herramienta Seleccionar

, y con el elemento

seleccionado, pulsamos la tecla Flecha Arriba varias veces, para desplazarlo un poco hacia arriba, sin que se pierde la alineacin vertical. Al rectngulo que queda arriba, le redondeamos las esquinas de nuevo con la herramienta Crear rectngulos y cuadrados .

Como vemos, para crear la pestaa, tenemos que unir estos elementos. Para hacerlo, seleccionamos los dos, y pulsamos en el men Trayecto Unin. Con esto hemos creado un nico elemento con la forma de la pestaa.

Unidad 9. Imgenes (VII)

9.8. Inkscape. Degradados
Como ves, el relleno de la pestaa o forma un degradado. Un degradado o gradiente es una fusin gradual entre dos o ms colores.

Para editar el relleno de un elemento, hacemos doble clic sobre el color de relleno en . En la ventana Borde y relleno, en la ventana Relleno, selecciona Gradiente lineal.

Al hacerlo, el relleno del elemento ha cambiado, mostrando un degradado de negro a transparente. Adems, muestra un control que nos permite regular la direccin de gradiente.

En este caso, lo hemos regulado para que quede en vertical (el de la derecha de las imgenes anteriores). Para cambiar los colores, pulsamos en Editar, para acceder a la ventana Editor de gradiente.

Cada color del degradado es una parada. Al inicio, solo hay dos paradas, una al principio y otra al final. Podemos aadir paradas en el medio, pulsando en Aadir parada. La nueva parada tomar el color que tiene el degradado en el punto en el que se crea. Las distintas paradas se eligen en el desplegable que hay debajo de la vista previa del degradado. Vamos a darle colores a las distintas paradas: a la primera, le hemos dado el color 5f4232ff (recuerda, que los dos ltimos valores, ff, se refieren a la opacidad). A la segunda, le hemos dado el color bf9a81ff. Los colores, se pueden introducir directamente en la casilla RGBA.

Para desplazar un poco la parte ms oscura hacia arriba, aadimos una parada. Observa que el control Desvo est a la mitad. Desplazndolo, podemos acercar la parda a uno u otro extremo, as que lo acercamos un poco a la izquierda (a la parte oscura). Con esto, hemos conseguido el siguiente relleno:

Lo mismo hemos hecho con el borde, pero de un color claro (f5e4ccff) a uno oscuro (bf9a81ff), tambin en vertical, y le hemos aumentado un poco el Ancho de borde desde la pestaa Estilo del trazo. Al cambiar el grosor, asegrate que el ancho no excede los 90 px. Si es as, cmbialo. Al final, la pestaa nos ha quedado as. La ponemos sobre el mismo color de fondo que utilizamos en la pgina, para que se vea mejor:

Una vez que tenemos la pestaa, la hemos duplicado dos veces ( Ctrl + D) para crear las otras dos que nos hacen falta. A ambas copias, le editaremos el relleno o borde. Antes de editar uno de los degradados debemos duplicarlo pulsando en Duplicar en la ventana relleno y borde.

Si no, al editarlo, vers que cambian todos los elementos que tienen asignado ese degradado. Seleccionndola, y desde el men Archivo Exportar, con el botn Seleccin pulsado, la hemos guardado en la carpeta imagenes del sitio con el nombre pest_normal.png.

Unidad 9. Imgenes (VIII)

Para la imagen que mostraremos al poner el cursor encima, le hemos cambiado el color de la primera parada del borde por el mismo naranja del borde de la pestaa, ff7600ff. Al hacerlo, hemos borrado la parada, y la hemos vuelto a crear, para que tenga un tono anaranjado.

La hemos guardado como pest_hover.png.

Y para la pestaa activa, le hemos cambiado el relleno, de modo que la parte baja acabe en el mismo color que tiene la divisin que contiene el texto (f5e4ccff), y hemos jugado con el Desvo y aadido paradas hasta encontrar un estilo que nos gustase.

La hemos guardado como pest_activa.png. Guarda el documento en el que ests creando las pestaas.

Una vez que tenemos las imgenes, cambiamos los estilos para que en vez de fondo y borde, muestren la imagen creada. Edita el estilo #menu li, y qutale todas las propiedades referentes al borde (border-) y el color de fondo (background-color). Aade las propiedades para la imagen que va a utilizar (background-image: url(imagenes/pest_normal.png);) Para que se vea bien, la colocaremos arriba del todo y centrada (background-position: center top;) y sin repeticin (background-repeat: no-repeat;). Lo mismo para #menu li:hover, le quitamos el color de borde (border-color: #ff7600;) y aadimos la imagen de fondo correspondiente (background-image: url(imagenes/pest_hover.png);). Y para #menu li.activa, quitamos el estilo, y lo cambiamos por la imagen de fondo (background-image: url(imagenes/pest_activa.png);). Puedes ver otro ejemplo de men con imgenes con el ejercicio paso a paso Men con imgenes. Puedes ver el aspecto de una pgina de nuestro sitio con lo visto hasta ahora pulsando aqu.

Unidad 9. Imgenes (IX)

9.9. Men desplegable
Tambin vamos a crear un men desplegable, con las distintas categoras, que se muestre slo al poner el cursor sobre la pestaa Flores.

Abre la pgina del sitio de ejemplo, flores/silvestres.html.

La pestaa Flores, tiene el siguiente cdigo: <li class="activa"><a href="index.html">Flores</a></li> Nota: Puede que tengas el enlace como ../flores/index.html. Funcionara igual. Lo que vamos a hacer, dentro del elemento, pero despus del enlace, crear una nueva lista, con enlaces a las cuatro categoras, asignando la clase activa a la correspondiente en cada caso: <li class="activa"><a href="../flores/index.html">Flores</a> <ul> <li><a href="exoticas.html">Ex&oacute;ticas</a></li> <li><a href="ornamentales.html">Ornamentales</a></li> <li><a href="plantas.html">Plantas</a></li> <li class="activa"><a href="silvestres.html">Silvestres</a></li> </ul> </li>

No necesitamos asignarle una clase o un ID, ya que como es una lista dentro del men, podemos utilizar el selector #menu ul. Para seguir con el diseo, utilizaremos imgenes que simulen botones. En este caso los vamos a hacer de 106 x 30 px para que nos quepa el texto ms largo. Utilizando Inkscape, y en el mismo documento que creamos las pestaas, dibujamos un rectngulo (con la herramienta Crear rectngulos y cuadrados grosor de borde que en las pestaas. ) con los bordes redondeados, y el mismo

Como son tres copias, tenemos que crear tres, duplicndolo dos veces ( Ctrl + D). Les vamos a dar el mismo estilo que a las pestaas. Para eso, asgnale un degradado tanto al borde como al relleno. Al hacerlo, vers que en la lista desplegable de los degradados, puede seleccionar cualquiera de los utilizados en el documento. Eso s, el degradado aparece horizontal, tendrs que cambiarlo a vertical. Estas son las tres imgenes que hemos creado:

Les hemos llamando, respectivamente, submenu_normal.png, submenu_hover.png y submenu_activa.png. Ahora, le damos el estilo al men, teniendo en cuenta que a sus elementos se les est aplicando el mismo estilo que a las pestaas: A la lista (#menu ul), le vamos a reducir un poco el texto (font-size: 90%;). Como siempre, le quitamos el padding (padding: 0;), margen (margin:0;) y las vietas (liststyle-type: none;). Ahora, vamos con los elementos (#menu ul li). Le damos el tamao ( height: 30px; line-height: 30px; width: 108px;) y la imagen utilizada (background-image: url(imagenes/submenu_normal.png); background-position: center center; background-repeat: no-repeat;). La pestaa (en nuestro caso) mide 88 px de ancho, mientras que el submen 108 px. Para que quede centrado, debemos de desplazarlo 10 px a la izquierda, por ejemplo con un margen negativo (margin: 2px 0 0 -10px;). Cambiamos la imagen de fondo cuando el cursor est encima (#menu ul li:hover { background-image: url(imagenes/submenu_hover.png); }) y cuando est activo #menu ul li.activa ({ background-image: url(imagenes/submenu_activa.png); }). Si lo probamos, veremos que hay que cambiar varias cosas. Por ejemplo, el color del texto siempre es el ms oscuro. Esto lo causa el estilo #menu li:activa a. Para solucionarlo, en cada selector que establece el color, debemos de aadir tambin el selector del submen con la clase activa. Y lo mismo pasara cuando la pestaa Flores no es la activa pero tienen le cursor, que todos los textos se veran naranja. As, cambiamos #menu a por #menu a, #menu li.activa ul a, #menu li:hover ul a, cambiamos #menu li:hover a por #menu li:hover a, #menu li.activa li:hover a, #menu li:hover li:hover a, y cambiamos #menu li.activa a por #menu li.activa a, #menu li.activa li.activa. Por otro lado, podemos ver que el texto queda por encima del submen:

Eso pasa porque se ve por encima el elemento que est "escrito" en ltimo lugar, y el men est antes que el texto. Para solucionarlo, basta con darle posicionamiento a los elementos (#menu ul li), ya que los elementos posicionados se muestran por encima del flujo normal. Para que no se altere nada, utilizamos el relativo (position: relative;). Si lo pruebas, vers que funciona, pero slo porque los elementos que lo taparan no tienen tambin posicionamiento. Para evitar que pueda ser tapado por elementos con posicionamiento, utilizaremos la propiedad z-index, por ejemplo con un valor 10 (z-index: 10). Esto hace que se muestre por encima de cualquier elemento sin z-index, o con z-index menor que 10. Esta propiedad slo funciona en elementos posicionados. Ahora, tendramos que hacer que el men se despliegue y se oculte, pero no podemos hacerlo con lo que hemos visto ahora, necesitamos Javascript, por lo que lo veremos en el tema siguiente. De momento, deja el men slo en la pgina flores/silvestres.html. Ya lo pondremos en el resto cuando est acabado. Puedes ver el aspecto de una pgina de nuestro sitio con lo visto hasta ahora pulsando aqu.

Unidad 9. Imgenes (X)

9.10. Mapa de imagen
Un mapa de imgenes es una imagen sobre la que podemos definir reas con enlaces. Es decir, podemos poner varios enlaces distintos en una misma imagen. El mapa lo definimos con la etiqueta <map></map>. El mapa suele llevar los atributos id y name para identificarlo. Dentro del mapa, se van definiendo las reas con etiquetas <area />. Como mnimo, llevan tres atributos:

shape, que es la forma del rea, pudiendo ser rect (rectngulo), circle (crculo) o poly (polgono). coords indica las coordenadas del rea, en pxeles. Depende de la forma. Por ejemplo, un rectngulo tiene cuatro valores: inicio-x, inicio-y, fin-x, fin-y. Un crculo, centro-x, centro-y y el radio, y un polgono un valor x e y para cada punto. href es la direccin del enlace. Despus, para asociar el mapa a la imagen, aadimos a la imagen el atributo usemap, como se ve en el siguiente ejemplo. Para nuestro sitio de ejemplo, vamos a crear el siguiente mapa para acceder a las categoras, que colocaremos en la pgina inicial: <img src="imagenes/mapa_categorias.jpg" alt="Categor&iacute;as" width="600" height="500" usemap="#Mapa" /> <map name="Mapa" id="Mapa"> <area shape="rect" coords="0,0,300,250" href="flores/exoticas.html" alt="Flores ex&oacute;ticas" title="Galer&iacute;a de flores ex&oacute;ticas" /> <area shape="rect" coords="301,0,600,250" href="flores/ornamentales.html" alt="Flores ornamentales" title="Galer&iacute;a de flores ornamentales" /> <area shape="rect" coords="0,251,300,500" href="flores/plantas.html" alt="Plantas" title="Galer&iacute;a de plantas" /> <area shape="rect" coords="301,251,600,500" href="flores/silvestres.html" alt="Flores silvestres" title="Galer&iacute;a </map> de flores silvestres" />

Observa que la imagen mide 600 px de ancho y 500 px de alto. La hemos dividido en cuatro reas, rectangulares: arriba izquierda, arriba derecha, abajo izquierda y abajo derecha. A cada una, le hemos asignado el enlace a la categora correspondiente, y le hemos aadido el atributo title para que se muestre el texto al pasar el cursor. La imagen utilizada, la hemos generado con GIMP utilizando las imgenes

mapa_exoticas.jpg, mapa_ornamentales.jpg, mapa_plantas.jpg y mapa_silvestres.jpg que puedes encontrar en la carpeta de ejercicios. En los videotutoriales del curso puedes ver detalladamente cmo fusionamos las imgenes. Puedes ver como ha quedado la pgina pulsando aqu.

Unidad 9. Imgenes (XI)

9.11. Logo
Para acabar, crearemos una imagen que haga de logo para nuestro sitio, con la que reemplazaremos el actual encabezado <h1>. El aspecto del sitio quedar as:

Como siempre que queremos crear un grfico, utilizaremos Inkscape. Esta vez lo haremos con la herramienta Texto . Nosotros hemos utilizado una tipografa Forte, con un tamao

de 16. Despus le hemos dado borde y un relleno con degradados.

Para crear el reflejo, hemos duplicado el texto, lo hemos reflejado verticalmente y lo hemos puesto debajo.

Despus, sobre el reflejo hemos creado un rectngulo con un degradado de negro a gris. Con l crearemos una mscara de opacidad. El negro indica la zona que ser transparente. Y cuando un color ms se aproxime a blanco, ms opaco ser el objeto. Es decir, se ver ms. Cuando tengamos el degradado a nuestro gusto, con el rectngulo y el reflejo seleccionado, vamos al men Objeto y elegimos Mscara Aplicar.

Utilizando el mismo sistema para el reflejo, hemos creado la imagen de la flor. Hemos llamado a las imgenes logo.png y pensamiento.png. Es hora de colocarlas en nuestro sitio. No tenemos ms que cambiar el contenido del <h1> por las dos imgenes: <h1><img src="imagenes/pensamiento.png" alt="" width="65" height="90" /> <img src="imagenes/logo.png" height="70" id="logo" /></h1> alt="Floramics" width="269"

Observa que hemos puesto el mismo texto de la imagen en su atributo alt. As, si la imagen no se carga se ver el texto como lo tenamos hasta ahora. Tambin le hemos asignado un id. Lo hemos hecho porque le vamos a dar un poco de padding arriba y abajo para alinearla mejor con la imagen de la flor: #logo { padding: 15px 0 5px; } Lo hacemos en la hoja de estilo porque puede que un da decidamos cambiar la imagen de la flor, y as no tendremos que ir pgina por pgina para ajustar los nuevos mrgenes. Haz los cambios y prueba la pgina. El primer problema que observamos es que queda una separacin entre las pestaas y el contenido de la pgina.

Esto se produce porque el h1 es ahora mayor al tener las imgenes. Para solucionarlo, podemos aadir un margen superior al men, de manera que la suma del margen, y su alto que es de 40px, sea igual o mayor al alto del h1, que ahora es de 90px. Por lo tanto, le aadimos 55px. #menu { margin: 55px 40px 0 0; padding: 0; font-size: 105%; list-style-type: none; float: right; }

Con estos cambios ocurre otra cosa. Al probar la pgina, vemos que si esta es lo bastante ancha, el logo y las pestaas se ven en una misma lnea. Pero si la reducimos, el logo "salta" encima de las pestaas, dejando la separacin del margen que le acabamos de dar, lo que no queda muy bien. Lo que vamos a hacer es dar un ancho mnimo a nuestra pgina, lo justo para que no se amonten los elementos. Si la ventana es mayor que ese ancho, no pasar nada. Pero si se hace menor, el ancho se tornar fijo, mostrando las barras de desplazamiento horizontales. Esta propiedad es min-width. Tambin tenemos min-height para el alto, y max-width y max-height para los mximos. Aplicamos la propiedad al body de la pgina. body { ...

min-width: 900px;

Cuando la ventana sea mayor de 900px, la pgina mostrar un diseo lquido, que se har fijo si la hacemos menor de ese tamao. Tras realizar todos los cambios de esta unidad, nuestro sitio ha quedado con este aspecto.

9.12. Para saber ms...

Manual oficial de GIMP en castellano. Tutoriales de Inkscape.

Unidad 10. JavaScript (I)

10.1. Introduccin

Vamos a aadir algunos comportamientos extra a nuestro sitio. Por ejemplo, vamos a crear un men desplegable, para que al ponernos sobre la pestaa Flores, se muestren las categoras existentes. Por otra parte, vamos a hacer que al pulsar sobre las imgenes, en las pginas de las categoras, se abra una nueva ventana, pero con el nombre de la flor, una imagen, y un enlace que permita cerrar la ventana. Pero todo esto no podemos hacerlo slo con HTML y CSS. JavaScript es un lenguaje de programacin que el navegador es capaz de interpretar y ejecutar sobre la pgina web. Utilizando este lenguaje podemos crear comportamientos que no estn disponibles en el html, por ejemplo mostrar un mensaje pulsando aqu, abrir una ventana, cerrarla... O tambin podemos utilizarlo para cambiar la pgina. Por ejemplo, pulsando en los colores, la divisin toma ese color como color de fondo. VerdeRojoAzul Podremos crear desde los compartimentos ms simples, hasta otros realmente complejos. Puedes ver algunas cosas que se pueden lograr con JavaScript en la web Chrome Experiments.

Unidad 10. JavaScript (II)

10.2. Cambiar el CSS
Vamos a completar nuestro men desplegable, que de momento slo tenemos en la pgina flores/silvestres.html de nuestro ejemplo. En CSS, existe la propiedad visibility, que determina la visibilidad del elemento, con tres posibles valores: visible: Muestra el elemento. Es el valor por defecto. hidden: Oculta el elemento. collapse: Se aplica e elementos de tabla, por ejemplo a una fila. La oculta contrayndola. Aunque ocultemos el elemento con esta propiedad, se sigue reservando su espacio. Para ocultar un elemento, y que adems no quede su hueco, podemos utilizar display: none;. En este caso, para volver a mostrarlo utilizamos display: block;, ya que esto se hace principalmente con elementos de bloque (capas, tablas, listas...). Lo que vamos a hacer, es utilizar JavaScript para cambiar la visibilidad del elemento, mostrndolo cuando tengamos el cursor sobre la pestaa Flores, y ocultndolo cuando salgamos de ella. Como al cargar la pgina, el submen estar oculto, le damos ese valor (display: none;) a su selector (#menu ul) de la hoja de estilo. Ahora, utilizaremos javascript para mostrar el elemento. Lo primero es referenciar al elemento. Disponemos del mtodo

getElementById('id_del_elemento'), que nos permite referenciar un elemento de la pgina con indicando su ID. Como nuestro submen no tiene un ID, le vamos a asignar el ID sub_flores. Por lo tanto, para referenciar a nuestro submen, escribiramos en el cdigo javascript document.getElementById('sub_flores'). Ponemos document, porque es el nombre del objeto al que pertenece el mtodo. El objeto document se refiere al contenido del body de nuestra pgina.

Una vez referenciado un elemento, podemos acceder a sus atributos, poniendo . (punto) detrs del elemento. Por ejemplo si ejemplo fuese el ID de una imagen, podramos cambiar su ancho a 200 px con: document.getElementById('ejemplo').width='200px'; Del mismo modo, podramos cambiar su clase por otra utilizando:

document.getElementById('ejemplo').class='nuevaclase'; Con .style. podemos acceder a las propiedades de estilo. Por ejemplo, podramos cambiar el color del texto del prrafo parrafo con:

document.getElementById('parrafo').style.color='#00ffaa'; Por lo tanto, la instruccin javascript que mostrara nuestro submen podra ser: document.getElementById('sub_flores').style.display='block'; Cuando llamemos a esa lnea de cdigo, el men se mostrar. Y cuando lo haremos? Cuando el cursor est sobre la pestaa Flores. Esto produce un evento. JavaScript dispone de una serie de eventos sobre los elementos de la pgina, es decir, una serie de acciones que permiten hacer algo cuando son detectadas. Por ejemplo: onclick. Se produce al hacer clic sobre un elemento. onmouseover. Se produce al poner el cursor sobre un elemento. onmouseout. Se produce cuando el cursor est fuera del elemento. Puedes ver los eventos existentes y cundo se producen en este avanzado .

Los eventos se colocan en el elemento que queremos que los produzcan, como si fuesen atributos HTML. En nuestro caso, queremos que el men se muestre cuando el cursor est sobre la pestaa Flores, es decir, en el evento onmouseover del li. Como valor del atributo, escribimos el cdigo JavaScript. Por tanto, quedar: <ul id="menu"> <li><a href="../index.html">Inicio</a></li> <li class="activa" onmouseover="document.getElementById('sub_flores').style.display='blo ck';"><a href="index.html">Flores</a> <ul id="sub_flores"> ...

</ul> </li> ... </ul>

Si lo pruebas, vers que el submen se muestra, pero queda siempre visible. Tenemos que ocultarlo (display: none;) cuando el cursor abandone el elemento (onmouseout;) <ul id="menu"> <li><a href="../index.html">Inicio</a></li> <li class="activa" onmouseover="document.getElementById('sub_flores').style.display='blo ck';" onmouseout="document.getElementById('sub_flores').style.display='none ';"> <a <ul id="sub_flores"> ... </ul> </li> ... </ul> href="index.html">Flores</a>

Si lo pruebas, vers que a no ser que lo hagas muy deprisa, al pasar el cursor de la pestaa al submen ste desaparece. Esto se debe a que el men permanece visible siempre que no salgamos de sus elementos (que estn dentro del <li> de la pestaa). Como en los elementos (#menu ul li) tenemos un margen superior de 2px, hace que al pasar sobre l nos quedemos fuera. As que para solucionarlo, ponemos el margen superior a 0 (margin: 0 0 0 -10px;). Para simular el margen, y que haya una pequea separacin entre elementos, aumentamos su alto en 2px (height: 32px; line-height: 32px;).

Unidad 10. JavaScript (III)

10.3. Ubicar el cdigo
Hemos visto que podemos escribir una instruccin JavaScript directamente en el evento. Pero lo normal es que en los eventos, slo llamemos a funciones o mtodos, y estas funciones las desarrollemos en otro lugar, a no ser que sean cosas muy concretas.

Bsicamente, podemos escribir el cdigo en la misma pgina o en un archivo independiente: En la pgina HTML: Colocaremos el cdigo en una etiqueta script, normalmente en el <head> de la pgina: <head> <title>Mi pgina</title> <script type="text/javascript"> <!-cdigo javascript; cdigo javascript; --> </script> </head>

A la etiqueta script le acompaa el atributo type, que se refiere al tipo de script utilizado. En caso del JavasScript, el valor debe de ser text/javascript. Observa que hemos encerrado el cdigo en un comentario HTML (<!-- -->). Esto no es necesario y no afecta al script. Lo que hace es indicar al validador que eso no es cdigo HTML, para que no lo evale como tal. Un validador es una aplicacin que analiza el cdigo de una pgina para ver si es vlido con respecto a su Doctype. En un archivo externo. Si tenemos ms de una pgina que utiliza el mismo cdigo, no sera prctico repetirlo en todas. Es mejor guardar el script en un archivo independiente, al que llamaremos desde cada pgina. El archivo no es ms que un archivo de texto, con el cdigo JavasScript, y guardado con la extensin .js. Igual que una hoja de estilo no es ms que un archivo de texto con la extensin .css. Es habitual guardar los archivos JavaScript de nuestro sitio en una carpeta llamada js. Para poder utilizar el cdigo en la pgina, debemos de cargarlo, llamando al archivo con el siguiente cdigo:

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

Empleamos la misma etiqueta script con el atributo type. Pero esta vez, como en las imgenes, aadimos el atributo src, cuyo valor ser la ubicacin del archivo. En el ejemplo, el archivo nombre_archivo.js, que estara dentro de la carpeta js. Repetiremos esta llamada para cada archivo que queramos cargar.

Unidad 10. JavaScript (IV)

10.4. Funciones
La mayora de las veces, en vez de escribir cada vez el cdigo JavaScript directamente en el evento, nos resultar ms til definir una funcin. En una definicin muy coloquial, una funcin sera como asignar un nombre a un conjunto de instrucciones, al que luego nos referiremos con ese nombre. Estas instrucciones, realizaran una accin, nos devolver un valor, etc... Resultan especialmente tiles cuando queremos utilizar las mismas instrucciones en varios lugares, ya que slo tendremos que escribirlas una vez. Por ejemplo, en nuestro ejemplo, vamos a crear las siguientes funciones, que colocamos en una etiqueta script dentro del head: <script type="text/javascript"> function verSubmenu(){ document.getElementById('sub_flores').style.display='block'; } function ocultarSubmenu(){ document.getElementById('sub_flores').style.display='none'; } </script>

Y en los eventos correspondientes, llamamos a esas funciones: <ul <li><a <li class="activa" onmouseout="ocultarSubmenu();"> id="menu"> href="../index.html">Inicio</a></li> onmouseover="verSubmenu();"

<a <ul id="sub_flores"> ... </ul> </li> ... </ul>

href="index.html">Flores</a>

Las funciones tienen los siguientes elementos: function nombreDeLaFuncin (param1, param2,..., paramn){ instrucin JavaScript; instrucin JavaScript; ...; } function es una palabra reservada, que indica que a continuacin vamos a definir la funcin. nombreDeLaFuncin, es el nombre que le queramos dar, sin espacios. Se suele escribir en minsculas, y el inicio de cada palabra (excepto la primera) en maysculas. (param1, param2,..., paramn). Entre parntesis ( ), y separados por comas, le podemos pasar a la funcin tantos parmetros como queramos. Los parmetros son valores que damos a la funcin para que los utilice. Por ejemplo, para crear una funcin que calcule el rea de un rectngulo, le deberemos de pasar dos parmetros, el alto y el ancho. Aunque la funcin no necesite parmetros, siempre pondremos los parntesis. Si en nuestro ejemplo tuvisemos varios submens, no crearamos una funcin para cada uno, le pasaramos como parmetro el ID del submen que queramos mostrar. function verSubmenu(id_submenu){

document.getElementById(id_submenu).style.visibility='visible' ; }

Entre llaves { }, estn las instrucciones de la funcin, cada una terminada en punto y coma (;). En las instrucciones podemos utilizar valores constantes, variables ,

operadores , estructuras de programacin , etc... como en cualquier lenguaje de programacin. Si queremos que la funcin devuelva un valor, lo haremos con la palabra reservada return. Por ejemplo, la siguiente funcin convierte de kilmetros a millas:

function return }

conversorKmMillas(km){ km*0.62;

En cdigo JavasScript podemos introducir comentarios. Si son de una lnea, basta con escribir // para que comience el comentario. Si lo queremos ms extenso, podemos utilizar /* para abrir el comentario y */ para cerrarlo. Una vez definida, podemos llamar a nuestra funcin directamente desde un evento (onclick="miFuncion('parmetro');"), utilizando una etiqueta scrit en el body (<script type="text/javascript">miFuncion('prametro');</script>), y

tambin podemos utilizarla como parte de otra funcin o instruccin.

Unidad 10. JavaScript (V)

10.5. Abrir una ventana
Vamos a realizar otro cambio en nuestro sitio, de momento, tambin slo en la pgina silvestres.html. Conforme lo tenemos hasta ahora, al hacer clic sobre una imagen, se muestra la imagen grande. Lo que queremos, es que en vez de slo la imagen, se abra una nueva ventana, que tenga como ttulo de la pgina, en el title y en un h1, el nombre de la flor. Y un enlace para cerrar la ventana. Una solucin sera crear una pgina como queremos. Pero si lo hacemos manualmente, tenemos que crear una pgina para cada fotografa. Lo que vamos a hacer es generar esa pgina en el momento que la necesitemos, utilizando JavasScript. Como esto lo vamos a hacer con cada imagen, crearemos una funcin. Como cada imagen es de una flor distinta, a la funcin tendremos que pasarle como parmetros el nombre de la flor, y el archivo de imagen que tiene que mostrar. Como todas las flores estn en la carpeta fotos, vamos a crear la variable carpeta en la funcin, para tener que pasarle slo el nombre. As, si cambiamos la carpeta, slo tendremos que cambiarlo en un sitio. Declaramos nuestra funcin, debajo de las que ya tenamos. function verImagen (nombre, imagen){ carpeta = 'fotos/';

Para abrir una ventana nueva, podemos valernos del objeto window. Este objeto, nos permite crear una ventana, y abrirla con el mtodo open. Un mtodo, es como una funcin que est dentro del objeto. A open, le podemos pasar como parmetro la pgina que queremos abrir. Si, le pasamos una imagen, tambin la abrir. Vamos a probarlo: function verImagen (nombre, imagen){ carpeta = 'fotos/'; window.open(carpeta+imagen); }

Vamos a probarlo con la imagen de la flor de Agret. Lo vamos a hacer en el atributo onclick del enlace, aunque lo podramos haber hecho tambin sobre la miniatura. Lo que s tenemos de quitar es el atributo href del enlace: <a href="#" onclick="verImagen('Agret Oxalis pes-capra',

'agret.jpg');"><img /></a> Si lo pruebas, comprobars que se abre una nueva ventana. Podemos utilizar window.open('url') para abrir cualquier pgina o direccin. Lo que vamos a hacer es, en vez de abrir directamente la imagen, abrir una ventana vaca, y escribir en ella el cdigo que queramos. Dentro de la funcin, escribimos el cdigo a mostrar, con los parmetros. Podemos utilizar una variable, por ejemplo: carpeta codigo = 'fotos/'; = '<html>\n<head>\n<title>'+nombre+'</title>'+ '\n</head>\n<body>\n<h2>'+nombre+'</h2>'+ '\n<img src="'+carpeta+imagen+'" alt="'+nombre+'" title="'+nombre+'" />\n'+ '</body>\n</html>';

Observa que hemos escrito el cdigo de la pgina tal cual, concatenando los parmetros con el signo + donde nos haca falta. Cada cadena viene delimitada por comillas simpes '. No podemos saltar de lnea a mitad de una cadena, debemos de cerrarla en la misma lnea, aunque s podemos concatenar con la lnea siguiente. De todas formas, estos saltos no se vern en el cdigo fuente de la pgina generada. Por eso hemos puesto el carcter de escape

\n, que generar un salto de lnea. Esto es puramente esttico, podramos quitar estos saltos sin que afecten al resultado. Como no slo vamos a abrir la ventana, si no que vamos a utilizar sus mtodos, debemos de asignar la ventana a una variable (por ejemplo, ventana). En vez de abrir la imagen, la abrimos en blanco (window.open()). Una vez abierta, vamos escribimos el cdigo en su documento, utilizando el mtodo write del document de la nueva ventana

(ventana.document.write(codigo)). Podemos escribir varias veces, pero cuando terminemos tenemos que cerrarlo con el mtodo close (ventana.document.close). ventana = ventana.document.write(codigo); ventana.document.close(); window.open();

Si lo pruebas, vers el h2 y el ttulo de la pgina en la ventana del navegador. Ahora slo nos queda complicar un poco ms el cdigo HTML de la pgina generada. Por ejemplo, le podemos adjuntar la hoja de estilo. Adems, despus de la imagen, le vamos a aadir un enlace que cierre le ventana, utilizando el mtodo close de window (window.close();). As nos ha quedado: function verImagen (nombre, imagen){ carpeta='fotos/'; codigo = '<html>\n<head>\n<title>'+nombre+'</title>\n'+ '<link rel="stylesheet" href="../estilo.css" type="text/css" />\n'+ '\n</head>\n<body>\n'+ '<div style="text-align:center;"><h2>'+nombre+'</h2>'+ '\n<img src="'+carpeta+imagen+'" alt="'+nombre+'" title="'+nombre+'" />\n'+ '<p><a href="#" onclick="window.close();">[Cerrar]</a></p>'+ '</div></body>\n</html>'; ventana = window.open(); ventana.document.write(codigo); ventana.document.close(); }

Ahora, slo nos queda cambiar los enlaces de la pgina para que llamen a la funcin. En este apartado hemos utilizado los objetos del navegador window y document. Existen otros objetos del navegador, que puedes ver en este avanzado .

Unidad 10. JavaScript (VI)

10.6. Crear una archivo js

Tenemos ya tres funciones javascript que emplearemos en nuestro sitio. La que nos sirve para mostrar la imagen, tendr que estar por lo menos en todas las pginas con galeras de imgenes, y las que muestran u ocultan el men, tendrn que estar en todas las pginas. Por eso, vamos a poner las funciones en un archivo. En la carpeta sitio_flores, creamos la subcarpeta carpeta js. Ahora, abrimos por ejemplo el Bloc de notas de Windows (Inicio Todos los programas Accesorios Bloc de notas). Copiamos las funciones de la pgina y guardamos el archivo en la carpeta js, pero renombrndolo como funciones.js. Para acabar, quitamos toda la etiqueta <script> y su contenido de la pgina, y la cambiamos por la llamada a nuestro archivo: <script type="text/javascript" src="../js/funciones.js"></script>

Observa que ponemos ../js porque estamos en la carpeta sitio_flores/flores. En pginas que estn en la raz, como index.html o nosotros.html, pondremos js/funciones.js. Comprueba que funciona.

10.7. El men en JavaScript

Ya habrs comprobado lo molesto que resulta tener que cambiar todas las pginas cada vez que cambiamos el men. Y no solo por la molestia, en un sitio con ms pginas, es fcil que en alguna pgina cometamos un error. Por eso es mejor tener el men en un nico sitio. Y aprovechando que tenemos un archivo .js, vamos a meter ah nuestro men. La idea es sencilla, igual que escribamos el HTML para ver las fotos, vamos a escribir una funcin que escriba el HTML del men, utilizando document.write(). Pero nuestra funcin necesitar parmetros, que sern aquello que hace que el men de una pgina no sea exactamente igual que el de otra. Es decir, la pestaa que est activa. Adems, debemos de saber si estamos en el raz o en una subcarpeta. Vamos a crear la funcin cargarMenu, con los parmetros pagina, con el nombre de la pgina, y sub, que ser verdadero cuando est en una subcarpeta.

function cargarMenu(pagina, sub) { }

Realmente nos da igual el valor del parmetro sub, porque lo que haremos es enviar algo cuando estemos en la subcarpeta flores, y cuando no, ni siquiera lo pondremos al llamar a la funcin. Si no lo enviamos, su valor ser null (nulo). Por lo tanto, para saber si estamos en el raz, slo tendremos que preguntar si sub == null. Primero, copiamos el men completo, con el submen, con las rutas como si estuvisemos en el raz. Por ejemplo href="nosotros.html" o href="flores/silvestres.html". Para convertirlo a cadena de texto, encerramos cada lnea entre comillas simples ' ', aadiendo al final de cada una un salto de lnea (\n). Al final de cada una, excepto de la ltima, concatenamos con la siguiente (+). Todo eso, lo pasamos como parmetro a al mtodo document.write(). document.write('<ul id="menu">\n'+ '<li>...</li>\n'+ '<li>...</li>\n'+ ... '<li>...</li>\n'+ '</ul>');

Todo el men forma una cadena. Lo que vamos a hacer, es ir concatenando un valor u otro dependiendo de los aprmetros. Para ello, vamos a utilizar la forma reducida de la sentencia If: variable = (condicin) ? valor_si_se_cumple : valor_si_no;

Por una parte la clase. Para cada pgina, evaluaremos la variable pagina, y si es la pgina, concatenaremos la clase activa, si no, no. Por ejemplo, para la pestaa nosotros pondremos: '<li'+((pagina=='nosotros') ? ' class="activa"':'')+'>...\n'+

Esto quiere decir, que entre <li y >, aadiremos class="activa" (con un espacio delante) si la pgina es nosotros. Si no, no aadimos nada, lo que expresamos con una cadena vaca (abrir y cerrar comillas). Esto, lo hacemos para cada pestaa. Pero con dos excepciones. Como tenemos dos pginas index, tenemos que poner algo ms para que no se marquen las dos como activa. Podemos comprobar el parmetro sub. Si estamos en la pgina inicial del sitio, en la pestaa Inicio, no habremos pasado el parmetro, por lo que sub ser null. Aadimos esta condicin: '<li'+((pagina=='index'&&sub==null) ? href="index.html">Inicio</a></li>\n'+ ' class="activa"':'')+'><a

El otro caso es la pestaa Flores. Ser la pestaa activa cuando estemos en cualquiera de las pginas de flores, es decir, siempre que sub no sea null. '<li'+((sub!=null) ? ' class="activa"':'')+' onmouseover="verSubmenu();" onmouseout="ocultarSubmenu();"><a href="flores/index.html">Flores</a>\n'+

Por otro lado, como los enlaces son relativos a la pgina, tenemos que cambiarlo dependiendo de si estamos en la subcarpeta o no. Si lo estamos, es decir, si sub tiene algo, o lo que es lo mismo, si sub no es nulo (sub!=null), tenemos que subir todos los enlaces una carpeta, aadiendo a la direccin del enlace (href), al principio, ../. Por ejemplo: <a href="'+((sub!=null) ? '../':'')+'index.html">Inicio</a>

La funcin completa, nos ha quedado as: function cargarMenu(pagina, sub) { document.write('<ul id="menu">\n'+ '<li'+((pagina=='index'&&sub==null) ? ' class="activa"':'')+'><a href="'+((sub!=null) ? '../':'')+'index.html">Inicio</a></li>\n'+ '<li'+((sub!=null) ? ' class="activa"':'')+' onmouseover="verSubmenu();" onmouseout="ocultarSubmenu();"><a href="'+((sub==null) ? '../':'')+'flores/index.html">Flores</a>\n'+ '<ul id="sub_flores">\n'+ '<li'+((pagina=='exoticas') ? ' class="activa"':'')+'><a href="'+((sub==null) ? '../':'')+'flores/exoticas.html">Ex&oacute;ticas</a></li>\n'+ '<li'+((pagina=='ornamentales') ? ' class="activa"':'')+'><a href="'+((sub==null) ? '../':'')+'flores/ornamentales.html">Ornamentales</a></li>\n'+

'<li'+((pagina=='plantas') ? ' class="activa"':'')+'><a href="'+((sub==null) ? '../':'')+'flores/plantas.html">Plantas</a></li>\n'+ '<li'+((pagina=='silvestres') ? ' class="activa"':'')+'><a href="'+((sub==null) ? '../':'')+'flores/silvestres.html">Silvestres</a></li>\n'+ '</ul>\n'+ '</li>\n'+ '<li'+((pagina=='nosotros') ? ' class="activa"':'')+'><a href="'+((sub!=null) ? '../':'')+'nosotros.html">Nosotros</a></li>\n'+ '<li'+((pagina=='contacto') ? ' class="activa"':'')+'><a href="'+((sub!=null) ? '../':'')+'contacto.html">Contacto</a></li>\n'+ '<li'+((pagina=='noticias') ? ' class="activa"':'')+'><a href="'+((sub!=null) ? '../':'')+'noticias.html">Noticias</a></li>\n'+ '</ul>\n'); }

Ahora, en la pgina HTML, quitamos el <ul> del men, y en su lugar, llamamos a nuestra funcin con el siguiente cdigo: <script 'S');</script> type="text/javascript">cargarMenu('silvestres',

En este caso, estamos en la pgina silvestres.html, por lo que mandamos silvestres como pagina. Como parmetro sub, hemos enviamos S, pero podramos haber puesto cualquier cosa. Lo importante es que no sea nulo. Cuando estemos en una pgina del raz, slo enviamos la pgina, por ejemplo <script type="text/javascript">cargarMenu('nosotros');</script>. Cambia el men en cada pgina. Recuerda que tambin hay que poner la llamada al archivo js/funciones.js.

Unidad 10. JavaScript (VII)

10.8. noscript
Aunque hacer cosas en JavaScript resulta muy til tiene un inconveniente. Y es que un visitante de nuestra pgina podra tener los scripts deshabilitados en su navegador.

Si slo utilizamos scripts para conseguir algunos efectos visuales, no hay problema. Pero en nuestra pgina, si no se muestra JavaScript el visitante no podr navegar, porque no se mostrar el men, ni se vern las fotografas grandes. De hecho, si has probado la pgina en Internet Explorer, vers que se muestra el siguiente aviso:

Tenemos que hacer clic sobre l para habilitar el contenido bloqueado, y mientras no lo hagamos no se muestra el men. Tambin puedes comprobarlo deshabilitando JavaScript en Firefox (men Herramientas Opciones... Contenido Activar JavaScript). Si lo desactivas, recuerda volver a activarlo despus siguiendo los mismos pasos. Esto no tiene solucin, tendramos que prescindir de JavaScript. Lo que s podemos hacer es mostrar un contenido alternativo a los usuarios con JavaScript deshabilitado. Para hacerlo, podemos utilizar la etiqueta <noscript></noscript>. El contenido de esta etiqueta, slo se mostrar cuando los scripts estn deshabilitados. Aqu podemos poner enlaces alternativos, en nuestro ejemplo enlaces a las principlaes secciones, lo justo para poder navegar. Esta realmente sera la opcin ms adecuada, ya que con nuestro men actual, los navegadores no podrn indexar correctamente nuestro sitio, y eso es fundalmental para una pgina web. Veremos ms sobre este tema en la ltima unidad. Por no complicarlo ms, vamos a mostrar simplemente mostrar un aviso, indicando que nuestro sitio requiere JavaScript para poder navegar por l. Por ejemplo, en nuestro sitio hemos puesto: <script type="text/javascript">cargarMenu('index');</script> <noscript> <div class="sinscript">Atenci&oacute;n: Necesitas habilitar JavaScript para </noscript> poder navegar por este sitio.</div>

Y hemos definido un estilo para div.sinscript. Hemos tenido que crear una clase, porque Internet Explorer no reconoce el selector noscript div. Con los cambios realizados en esta unidad, nuestro sitio de ejemplo nos ha quedado as.

10.9. Para saber ms...

Con estos enlaces puedes ver ms cosas sobre JavaScript... Seleccin de manuales en aulaClic. Scripts de JavaScripts para usar en tu sitio. Introduccin a la manipulacin del DOM (maestrosdelweb.com). jQuery, librera JavaScript muy interesante. Introduccin a jQuery.

Unidad 11. Formularios y PHP (I)

11.1. Introduccin

Hemos visto como crear una pgina web, darle formato y aadirle funcionalidades con JavaScript, pero esto es slo el comienzo. Una pgina web puede hacer muchas ms cosas, puede mostrar los datos que obtiene es ese instante de una Base de Datos que reside en un servidor de Internet, puede comunicarse con otras webs, puede utilizar mapas, informacin del tiempo, etc. En definitiva, una pgina web puede mostrar informacin actualizada cada vez que se ejecuta. Es lo que se conoce como pginas dinmicas, en contraposicin a las pginas estticas, que siempre muestran la misma informacin. Un ejemplo de pgina dinmica sera un foro de Internet, como el que hay en aulaClic. Esta pgina que ests leyendo sera un ejemplo de pgina esttica. Para crear pginas dinmicas hay que emplear un lenguaje de programacin web, como Java, .NET, o PHP. Si quieres ver las diferencias entre estos lenguajes visita este tema avanzado .

Nosotros hemos elegido PHP por ser gratuito y fcil de aprender. Para explicar PHP necesitaramos un curso completo, as que slo vamos a dar las nociones bsicas para que puedas empezar a programar en PHP.

11.2. Formularios
En nuestro ejemplo tenemos una pgina de Contacto que recoge datos mediante un formulario y los enva a una direccin de correo electrnico. Para enviar dicho correo electrnico vamos a utilizar PHP. Hay varias formas de recoger datos y enviar un correo, nosotros vamos a emplear la ms didctica utilizando dos pginas. Luego en un ejercicio la mejoraremos (con una sola pgina). Necesitamos una primera pgina escrita en HTML que contiene el formulario para recoger los datos y llamar a una segunda pgina escrita en PHP que realiza el envo del correo. A continuacin te mostramos el cdigo de la primera pgina que se llamar contacto.htm. <html><head></head><body> <form method="post" action="enviar_mail.php"> <table style="text-align: rules="rows"> <tbody> <tr> <td>Nombre:</td> <td><input type="text" name="nombre" id="nombre" /></td> </tr> <tr> <td>Correo electrnico:</td> <td><input type="text" name="email1" id="email1" /></td> </tr> <tr> <td>Repite tu correo:</td> <td><input type="text" name="email2" id="email2" /></td> </tr> <tr> <td>Cmo nos conociste?:</td> left; width: 100%;" cellpadding="3"

<td><select name="conocio" id="conocio"> <option selected="selected"></option> <option>Un amigo</option> <option>Un blog</option> <option>Un buscador</option> <option>Otros</option> </select></td> </tr> <tr> <td>Tu pregunta es referente a:</td> <td><label><input value="web" /> type="radio" name="referente" id="ref_web"

La Web </label><br /> <label><input value="fotos" /> type="radio" name="referente" id="ref_fotos"

Las fotos </label><br /> <label><input type="radio" name="referente" id="ref_asociacion" value="asociacion" /> La asocioaci&oacute;n </label></td> </tr> <tr> <td colspan="2">Escribe lo que quieres preguntarnos:</td> </tr> <tr> <td class="centrado" colspan="2"> <textarea cols="50" rows="5" name="consulta"></textarea></td> </tr> <tr> <td class="centrado" value="Enviar" /> colspan="2"><input type="submit"

<input type="reset" value="Restablecer" /></td> </tr> </tbody> </table> </form>

</body></html>

El primer paso es recoger los datos. Para ello, hemos empleado un formulario, con una serie de controles, con los que interacta el usuario. Un formulario, est delimitado por la etiqueta <form></form>. Como mnimo, suele tener dos atributos, propios del formulario: method: es la manera en la que se enviarn los datos. Sus valores pueden ser get, que muestra los datos en la barra de direcciones, o post, que los enva de forma separada. action: como valor, contiene a dnde se enviarn los datos. En nuestro caso, sera una pgina PHP (action="enviar_mail.php"). Dentro del formulario, podemos tener cualquier elemento, como prrafos o tablas para organizar los controles. Entre los controles podemos encontrar: Cajas de texto de una lnea, con la etiqueta <inputtype="text" /> Cajas de texto multilnea, con la etiqueta <textarea></textarea> Casillas de verificacin, con la etiqueta <input type="checkbox" /> Casillas de opcin, con la etiqueta <input type="radio" /> Opcin B. . . Opcin A

Men de opciones, con la etiqueta <select><option></option>...</select> . Botones, con la etiqueta <input type="submit"> o la etiqueta <button>Enviar. Los controles que recogen datos, llevan adems el atributo name con el nombre que le queramos dar al control. Es importante, porque al recoger los datos, nos referiremos al control por su nombre. Tambin es indispensable el botn, ya que al pulsarlo, enva la pgina al action del formulario.

Para ver en detalle estos controles y conocer alguno ms, puedes seguir este avanzado . Si necesitas ayuda para crear la pgina nosotros.htrml, puedes seguir el ejercicio paso a paso Crear un formulario. Puedes ver el aspecto final del formulario aqu.

Unidad 11. Formularios y PHP (II)

11.3. PHP. Cdigo de ejemplo
Una vez creado el formulario, necesitamos la pgina a la que se envan los datos, y que se encarga de recogerlos, comprobarlos y procesarlos. En nuestro caso, la hemos llamado enviar _mail.php, y su cdigo es el siguiente: <?php //comenzamos recogiendo los datos function recogeDato($campo){ return isset($_REQUEST[$campo])?$_REQUEST[$campo]:''; } //la funcin recogeDatos comprueba si se ha recibido un dato y recoge su valor

//si no se ha recibido, le asigna un valor vaco. $email1 $email2 variable $consulta $nombre $conocio = recogeDato('email1'); = recogeDato('email2'); //asignamos cada valor a una = recogeDato('consulta'); = recogeDato('nombre'); = recogeDato('conocio');

$referente = recogeDato('referente'); $algunerror = FALSE;

//una vez recogidos, los validamos (campos obligatorios, etc...) if($email1==''){ //validamos los que el email no est vacio $algunerror mensaje = TRUE; //si encontramos un error,mostramos un

echo "<p class=\"erroneo\">No has introducido tu eMail</p>\n";

} elseif($email1!=$email2){ repeticin $algunerror = TRUE;

//si

tiene

algo,

que

concida

con

la

echo "<p class=\"erroneo\">Los coinciden.</p>\n"; }

eMails

introducidos

no

if($nombre==''){ //comprobamos que el nombre no haya quedado vaco $algunerror = TRUE; echo "<p class=\"erroneo\">No has introducido tu nombre.</p>\n"; } if($consulta==''){ //comprobamos que el contenido de la pregunta no est vaco $algunerror = TRUE; echo "<p class=\"erroneo\">El quedar en blanco.</p>\n"; } if ($algunerror){ //comprobamos si ha habido algn error echo "<p>&nbsp;</p>\n"; //si los hay, se lo indicamos al usuario echo "<p>No se ha podido enviar el mensaje por los errores que se detallan arriba.</p>\n"; echo "<p>Por favor, vuelve a rellenar el formulario.</p>\n"; echo "<p class=\"centrado\"><a href=\"contacto.html\">Volver al formulario</a></p>\n"; }else{ $para="ejemplo.aulaclic@gmail.com"; enviamos el correo //si todo es correcto, rea de la consulta no puede

$asunto="Contacto web Flores - consulta sobre ".$referente; $mensaje="Datos del mensaje con los datos formulario de contacto:\n". //creamos el

"Nombre: ".$nombre." \n". "eMail: ".$email1."\n".

"Nos conocio por: ".$conocio." \n". "Pregunta: ".$consulta; mail($para, $asunto, $mensaje); //y lo enviamos echo "<p>Tu mensaje se ha enviado correctamente. Gracias por contactar con nosotros.</p>\n"; echo "<p>Nos pondremos en contacto lo antes posible.</p>\n"; }

?>

Al contrario de lo que ocurra con JavaScript, el navegador no puede interpretar el cdigo PHP. Esto quiere decir que si abrimos una pgina PHP en nuestro equipo, no se ejecutar el cdigo. El cdigo PHP, debe de ser interpretado por un servidor, as que para poder verlo, tenemos que ver la pgina a travs de un servidor. Tenemos dos opciones, o convertir nuestro equipo en un servidor, instalando por ejemplo el paquete WAMP, como se explica el curso de Dreamweaver CS4, en www.aulaclic.es, o podemos subir la pgina a un servidor Web. Para ello, podemos emplear un servidor de pago o uno gratuito. Lo malo de los gratuitos, como veremos en el ltimo tema, es que la mayora no te deja enviar eMails. Y lgicamente, para probar este ejemplo, no compensa contratar uno de pago. Seguramente, en el cdigo que hemos mostrado, has reconocido algunas estructuras, como los if. La mayora de estructuras de control de PHP (condiciones, bucles...) funcionan igual que en JavaScript. Incluso puedes ver que al principio hemos declarado una funcin tal y como lo hacamos en JavaScript. Puedes comprobar las semejanzas con este avanzado sobre las variables en PHP y ste sobre las estructuras de control en PHP .

Qu es una pgina PHP? Realmente, una pgina PHP no es ms que un archivo de texto con la extensin .php. En esa pgina, hay cdigo PHP y HTML. De hecho, podemos cambiar la extensin de una pgina HTML a PHP y se vera igual. Lo que hace el cdigo PHP es generar el cdigo fuente de la pgina final. Por ejemplo, con una condicin, decidimos si escribir un cdigo u otro. Para que el servidor interprete el cdigo PHP, este debe de ir entre las marcas <?php y ?> Por ejemplo, la estructura de una pgina PHP podra ser: <html> <head> <title>Pgina PHP</title> ...Cdigo HTML... <?php ...cdigo PHP... ?> </head> <body>

...Cdigo HTML ... <?php ...cdigo PHP... ...cdigo PHP... ...cdigo PHP... ?> ...cdigo HTML ... <?php ...cdigo PHP...

?> ...cdigo HTML... </body> </html>

Aunque no tiene por qu tener HTML. Por ejemplo, podemos tener una pgina con todas las funciones que utiliza nuestro sitio. Para incluir una pgina dentro de otra, podemos empelar la instruccin include("pagina.php");. Cuando consultemos la pgina PHP en el servidor, al navegador no le llega el cdigo PHP, le llega slo el HTML generado por el PHP.

Unidad 11. Formularios y PHP (III)

11.4. Recoger los datos
Estamos utilizando una pgina en PHP para recoger los datos de un formulario. Vamos a comenzar por ah. Al crear el formulario, establecemos el mtodo de envo (method) como post o get. Los datos del formulario llegan a la pgina PHP a travs del array $_POST o $_GET, dependiendo del mtodo de envo. O podemos usar el array $_REQUEST, que sirve para los dos. Por ejemplo, si un control del formulario tena el nombre (name) email, su valor queda almacenado en $_REQUEST['email'], y podemos tomarlo. En una instruccin, podemos asignar ese valor a una variable, por ejemplo a la variable $email (en PHP, no es necesario declarar las variables, y todas comienzan con el signo del dlar):

$email = $_REQUEST['email'];

Esto funciona mientras exista el campo email. Pero si no existe, da un error, por ejemplo, si ponemos el nombre de un checkbox, ya que estos controles slo se envan si estn marcados. Por eso, primero tenemos que confirmar si existe la variable. Para eso, tenemos la funcin isset(variable). Esta funcin, devuelve verdadero si existe la variable que le pasmos, y falso si no. La idea es comprobar si existe en $_REQUEST el campo que nos interesa. Si existe, tomamos su valor, y si no, le asignamos uno, aunque sea vaco (""). As no nos dar error. Por lo tanto, podemos recoger el valor as: $email = (isset($_REQUEST['email'])) ? $_REQUEST['email']) : "";

Observa que empleamos la estructura variable = (condicin) ? "valor si se cumple" : "valor si no"; que ya vimos en JavaScript. isset es una de las muchas funciones predefinidas en PHP. Puedes ver algunas muy tiles en este avanzado .

Como tenemos que repetir esto para cara campo del formulario, podemos crear una funcin: function recogeDato($campo) { return (isset($_REQUEST[$campo])) ? $_REQUEST[$campo]) : ""; }

$email = recogeDato('email');

De esta manera, nos aseguramos de que no se produzcan errores, aunque los datos que intentemos recoger no existan. Siguiendo esto, guardamos todos los datos en variables con nombres descriptivos. El paso siguiente es comprobar que los valores sean correctos. Por ejemplo, comprobar que si un campo era requerido no haya quedado vaco: if ($campo==""){

// error. El campo no puede quedar vaco } else { // correcto }

Dependiendo de la finalidad de los datos, se pueden hacer comprobaciones ms o menos complejas. Por ejemplo, que un nmero est en un rango, que un email tenga formato vlido, o que un dato que se guardar en una base de datos, no contenga cdigo malicioso. Una vez comprobados todos los datos, si son correctos, continuamos con la ejecucin de la pgina. En nuestro ejemplo, slo es enviar un correo, pero podra ser guardar un registro en una base de datos, confirmar una compra, etc. En caso de que haya errores, lo normal es volver a pedir los datos al usuario. En este caso, sera una ventaja tener tambin el formulario en un archivo PHP, ya que podramos marcar directamente los campos errneos, y podemos mostrar al usuario los datos introducidos para que slo tenga que corregirlos y no volver a introducirlos. Con lo que hemos visto, ya podemos crear la pgina de envo, con el ejercicio paso a paso Recoger datos y enviar un correo. Para el usuario, resulta molesto tener que enviar el formulario para que se compruebe en el servidor, que se le devuelva con errores, y tener que corregirlos o volver a rellenarlo. Por eso, es una buena idea validarlo primero con JavaScrit antes de enviarlo, como explicamos en este avanzado .

En vez de tener el formulario y el PHP en pginas separadas, vamos a unirlos en una pgina con el ejercicio paso a paso Formulario en PHP. Esto nos permitir hacer muchas ms cosas con el formulario. Con todos estos cambios, nuestro sitio web ha quedado as. Si ests viendo este curso en tu equipo, comprobars que no se ve bien, ya que vemos el cdigo fuente PHP. Puedes ver cmo quedara en un servidor capaz de ejecutar el PHP si lo ves en la web de aulaClic, pulsando aqu.

Unidad 11. Formularios y PHP (IV)

11.5. Bases de datos

Para nuestro sitio de ejemplo, hemos visto un uso muy sencillo y reducido del PHP. Pero este lenguaje ofrece posibilidades muy potentes, sobre todo combinado con bases de datos, lo que nos permite crear pginas realmente dinmicas: foros, blogs, tiendas on-line, buscadores, etc... Si no sabes qu es una base de datos, consulta este bsico .

Imaginemos lo que supondra incluir una base de datos en nuestro sitio de ejemplo. Lo que ms tiempo nos ha llevado ha sido lo relacionado con las fotografas de las flores, porque tenemos bastantes. Por una parte, las galeras, que hemos tenido que crear a mano, con el riesgo de haber puesto algn ID mal, y que el enlace desde la tabla de ndice no funcione. Y por otra parte la tabla de enlaces, que adems est ordenada alfabticamente. Si ahora queremos aadir una nueva flor, tenemos que hacerlo en la posicin que le corresponde. Como las filas alternan color de fondo, al aadir una, tendramos que cambiar los colores de todas las filas siguientes. Eso es mucho trabajo. Y si imaginamos que la pgina tiene miles de fotos, ya dems los usuarios quieren subir fotos nuevas a diario, hacerlo a mano sera sencillamente imposible. En cambio, podramos crear una base de datos, con una tabla que tenga cuatro campos: nombre de la flor, nombre cientfico, categora y nombre del archivo de imagen. Ahora, para crear las fichas de las flores, no tenemos ms que hacer una funcin PHP que cree la ficha de una flor, y repetirla en un bucle que cree fichas para todos los registros de la base de datos. Lo mismo para la tabla de ndice, solo habra que hacer una consulta que nos devuelva las flores ordenadas por nombre, y crear un bucle que muestre un registro en cada fila. Adems, no necesitaramos una pgina distinta para cada categora. Bastara con consultar en la base de datos slo las flores de una determinada categora. Adems nos permite aadir funcionalidades a nuestra web, como un buscador, guardar datos sobre las imgenes ms vistas, o que los usuarios puedan subir sus propias imgenes, ya que podemos permitir aadir y editar registros desde un sencillo formulario en la web. PHP utiliza principalmente MySQL y SQLite como sistemas de gestin de bases de datos. Utilizarlos resulta sencillo, ya que las funciones que nos permiten utilizar las bases de datos ya estn definidas en PHP. Adems, es Internet podemos encontrar un sinfn de ejemplos y ayudas.

11.6. Para saber ms...

En los siguienetes enlaces puedes aprender ms sobre lo visto en le tema: Formularios: pForm es un generador de formularios on-line. Controles de formularios, en HTML. PHP: Scripts en PHP, HotScripts. Seleccin de manuales de aulaClic.

Unidad 12. Funciones extra (I)

En este tema vamos a ver algunas de las posibilidades gratuitas que nos ofrece la red para dotar a nuestras pginas web de mayores posibilidades. Existen multitud de aplicaciones y libreras de cdigo gratuito y de gran calidad, listas para usar, es muy interesante conocer que existen. En cualquier momento se puede presentar la ocasin adecuada para utilizarlas. A continuacin vamos a dar un breve repaso a las que consideramos ms interesantes.

12.1. APIs

Aunque si combinamos HTML, JavaScript y PHP podemos hacer muchas cosas con nuestras pginas, existen an otras fuentes de datos que residen fuera de nuestra pgina y que podemos incorporar a nuestra web mediante las APIs. Para aadir funcionalidades complejas a nuestra pgina web o para acceder a informacin, podemos comunicarnos con otro software, ofrecido por sitios web especializados, utilizando una Interfaz de Programacin de Aplicaciones (API). Lo que nos ofrece una API es una serie de procedimientos para acceder e interactuar con aplicaciones o datos realizadas por terceros. Es decir, en vez de desarrollar esas funciones con un lenguaje de programacin y almacenarlas en nuestro sitio, creamos una "ventana", a travs de la cual mostramos esa aplicacin. Adems, nos ofrece una serie de funciones, normalmente en JavaScript con las que podemos interactuar con esa ventana.

Internet nos ofrece una gran cantidad de aadidos que nos permiten ampliar la funcionalidad de nuestras pginas, muchos de ellos sin necesidad de tener demasiados conocimientos de programacin ni de HTML. Podemos encontrar desde sitios que nos ofrecen un cdigo fuente listo para copiar y pegar en nuestra web, hasta otros con APIs ms avanzadas, que nos permiten una gran personalizacin de la aplicacin. Por ejemplo, si tenemos una cuenta en Photoshop On-line, podemos aadir diapositivas de nuestras imgenes, slo copiando y pegando el cdigo que nos proporcionan:

O si hemos creado una presentacin desde Google Docs, podemos incrustarla (embeberla) en nuestra pgina. Estos son slo unos pocos ejemplos, pero hay una gran cantidad de sitios web que nos permiten utilizar sus datos. Normalmente, estos sitios nos ofrecen un fragmento de cdigo includos en etiquetas <objet>, <embed> o <iframe>. Existen multitud de APIs con diferentes objetivos, por ejemplo, Flickr y Panoramio para usar sus amplios catlogos de imgenes, Google Maps para usar mapas de cualquier rincn del mundo, Digg y Meneame para comentarios y noticias, etc. Estas y otras APIs se pueden utilizar para aadir ciertas funcionalidades a nuestra web, pero es tal la cantidad y calidad de APIS, que existen sitios web que se basan nicamente en las funciones y datos suministrados por las APIs y que son conocidas como "Mashup" o aplicaciones hbridas. Hay listas de las mejores Mashup. Nota: Al utilizar APIs o aplicaciones de terceros, es importante leer las condiciones de uso. Ya que muchas imponen algunas restricciones para uso comercial, o exigen ciertas condiciones de uso, como enlaces a la pgina propietaria de los datos.

12.2. Google Maps

Una API muy utilizada es la de Google Maps. Vamos a incluir en nuestra pgina nosotros.html un mapa con la ubicacin de la asociacin. En la pgina, hemos aadido otra divisin con las esquinas redondeadas, despus de la que ya haba. Dentro, hemos aadido un texto y reservado un prrafo centrado para el mapa.

Para aadir el mapa, solo hemos de ir a http://maps.google.es/ y buscar la direccin que queramos. Cuando la tengamos, pulsamos Enlazar, y nos aparece una ventana con dos tipos de enlace:

Seleccionamos el contenido de Pegar HTML para insertar en un sitio web, lo copiamos y lo pegamos en el prrafo que habamos reservado. Por ejemplo, ste es un mapa de la zona del puerto de Valencia, en Espaa. Puedes hacer zoom, moverlo, etc, tal y como si estuvieras en Google Maps.

Ver mapa ms grande

Esta es la forma ms simple de utilizar Google Maps, en la que simplemente mostramos una direccin. Pero podemos ofrecer una versin ms avanzada, en la que los usuarios puedan, por ejemplo, buscar direcciones, o utilizar todas las opciones de Google Maps. En este caso, encontramos ms opciones a travs de la API de Google Maps.

Unidad 12. Funciones extra (II)

12.3. RSS
Otra de las cosas que podemos incluir fcilmente en nuestra web son noticias utilizando canales RSS. Un RSS es un archivo que muestra informacin sobre las ltimas actualizaciones de un sitio web. Es muy til para pginas dinmicas, como blogs o sitios de noticias. Esto permite al usuario no tener que acceder a la web para ver si hay informacin nueva, smplemente suscribindose al feed RSS, recibir la informacin en su lector.

Por ejemplo, en la ltima pestaa que nos queda, vamos a incluir noticias relacionadas con el medio ambiente desde la web de elPais.com, mostrando la informacin de su feed RSS. Como siempre, basndonos en la pgina base.html, creamos la pgina noticias.html, poniendo Noticias como texto del h2. Buscamos el icono , que en la web de el Pas se encuentra al pie de la pgina. Al

pulsar, concretamente esta web nos permite elegir la categora que queramos, en nuestro caso Medio ambiente.

Al pulsar, podemos elegir el lector que queremos utilizar. En nuestro caso, no vamos a emplear un lector, vamos a incluir el cdigo en nuestra pgina, por lo que elegimos En su propia pgina. A continuacin deberemos rellenar un pequeo formulario. En la siguiente ventana, elPais.com nos ofrece la posibilidad de personalizar nuestro estilo. As que elegimos uno que se integre bien con nuestro diseo. Cuando lo tengamos, pulsamos Enviar cdigo.

Se mostrar el cdigo generado y adems se nos enviar por correo. Lo nico que tenemos que hacer es copiar todo lo referente al estilo en el head de nuestra pgina, y el resto en el lugar donde queremos que se muestren las noticias (tambin funciona si incluimos todo el cdigo junto dentro del body, aunque es menos correcto). Lo ms interesante del RSS es el caso contrario. Es decir, dar al usuario la posibilidad de suscribirse al feed RSS de nuestra pgina, en vez de mostrar informacin de otros feeds RSS. En nuestro ejemplo, no tendra demasiado sentido, ya que no hemos diseado un sitio dinmico. Pero vamos a crear un feed RSS donde iremos mostrando las fotos de flores que vayamos subiendo. Lo nico que tenemos que hacer es crear un archivo XML con el formato apropiado. Recuerda que XML es un lenguaje de etiquetas, muy similar al XHTML, pero omitiendo cualquier atributo de estilo. Podemos crear un archivo con la siguiente estructura: <?xml version="1.0" encoding="iso-8859-1"?> <rss version="2.0"> <channel> <title>Fotos de flores en Floramics</title> <link>http://www.aulaclic.es/paginasweb/sitio_flores/</link> <description>Nuevas fotos subidas a Floramics</description> <language>es-Es</language> <item> <title>Agret - Oxalis pes-caprae</title> <guid isPermaLink="true">http://www.aulaclic.es/paginasweb/sitio_flores/flo res/silvestres.html#agret</guid> <pubDate>Wed, 25 Nov 2009 10:00:00 +0200</pubDate> <description>Foto tomada en los Jardines de la Universidad.</description> </item> <item> <title>Amapola Papaver rhoeas</title> <guid isPermaLink="true">http://www.aulaclic.es/paginasweb/sitio_flores/flo res/silvestres.html#amapola</guid> <pubDate>Tue, 24 Nov 2009 10:05:00 +0200</pubDate> <description>Algunas amapolas en un campo de trigo.</description> </item> </channel> </rss>

Observa que hemos encerrado todo el contenido del documento entre las etiquetas <rss><channel></channel></rss>. Seguidamente, hemos indicado el ttulo (<title>), el enlace al sitio (<link>) que debes de cambiar por el de tu pgina, una descripcin (<description>) y el idioma (<languaje>). Cada elemento (en nuestro caso es la foto de una flor, pero podra ser un artculo, una noticia, etc...) est marcada por la etiqueta (<item></item>). Dentro, hemos puesto el ttulo (<title>), el link del elemento (<guid>), la fecha de publicacin (<pubDate>), y una descripcin <description>. Este archivo lo hemos guardado como flores_floramics.xml. Puedes verlo aqu. Te recomendamos que lo veas con Firefox, ya que es capaz de interpretar y formatear estos archivos. Lo nico que tenemos que hacer ahora, es aadir en nuestra pgina (normalmente al pie) un enlace al archivo. Estos enlaces se marcan con unos iconos estndares, siendo el ms habitual .

Aplicando a nuestro sitio lo que hemos visto, al final nos ha quedado as.

Unidad 12. Funciones extra (III)

12.4. Aplicaciones gratuitas. Gestores de contenido, blogs y foros
Los gestores de contenido o CMS (Content Management System) son aplicaciones que engloban las funcionalidades ms comunes de un sitio web dedicado a mostrar noticias y contenidos, facilitando la participacin de los usuarios. Muchos CMS son programas de cdigo libre y gratuitos. Los CMS son uno de los grandes regalos que ofrece Internet. Antes de que existiera el movimiento del software libre era impensable que una aplicacin de la calidad de los CMS, con las miles de horas de trabajo que conlleva, pudiera ofrecerse gratuitamente y con todo el cdigo fuente disponible. Debemos agradecer el esfuerzo de todas las personas que han colaborado en este tema. Los CMS se instalan fcilmente y se pueden utilizar de inmediato una vez establecidas las opciones de configuracin. Si sabes programacin, incluso puedes modificar el cdigo para adaptarlo a tus necesidades especficas.

Hay varios tipos de aplicaciones CMS, nosotros los vamos a clasificar en las siguientes categoras: Portales, blogs, foros, wikis, educativas y comercios.

Portales. Los CMS ms genuinos son los de tipo portal que incluyen un sistema para presentar noticias y contenidos que pueden ser generados por los gestores o por los usuarios, tambin incluyen un sistema de comentarios a las noticias, foros de discusin, votaciones, descargas, etc. Incorporan funciones para gestionar las altas y bajas de usuarios. Ejemplos de este tipo de CMS son PHP-Nuke, Joomla y Drupal. PHP-Nuke es uno de los CMS pioneros, con gran cantidad de instalaciones y una amplia variedad de funciones. Hay gran cantidad de funciones extras creadas por los usuarios a lo largo de sus muchos aos de vida. Requiere PHP y MySQL. Originalmente era totalmente gratuito, ahora sigue siendo gratuito pero para obtener la versin ms reciente hay que pagar un poco. Joomla y Drupal son CMS ms modernos, de diseo ms actual. Blogs. Un Blog (abreviacin de weblog) es una pgina web que contiene una serie de textos o artculos escritos por uno o ms autores recopilados cronolgicamente. Normalmente el ms actual se coloca en primer plano. Su temtica es muy variada. Abundan muchsimo los blogs personales, pero tambin podemos encontrar otros en formato periodstico como periodistas21, o tambin en gnero literario como mujergorda, que ha conseguido pasar de la pantalla al libro.

Podemos encontrar temas especficos como en microsiervos, un blog dedicado a la tecnologa e Internet, o incluso blogs que hablan sobre blogs como bitacoras.org. Lo que est claro es que es un modo de comunicarse que est generando diarios en masa. A fecha de hoy los gigantes de Internet se han subido al carro y estn aprovechando el tirn para atraer ms trfico hacia sus sitios. De esta forma Google tiene a Blogger, un servicio gratuito que ofrece espacio ilimitado para que sus usuarios puedan escribir sus bitcoras de una forma sencilla y cada vez ms dinmica. MSN present hace un tiempo MSN Spaces donde cualquier poseedor de una cuenta Hotmail puede acceder a la posibilidad gratuita de un espacio para fotografas y bitcora en Internet. Este servicio ha sido muy bien acogido debido a la integracin del servicio con el programa de mensajera MSN Messenger. Junto a estas apuestas gratuitas de los grandes de Internet an sobreviven (y mejor que bien) las alternativas que convivieron con el nacimiento de Blogger (cuando an no perteneca a Google y era una empresa independiente): Livejournal y Bitacoras.com. Ambas propuestas (y las anteriores) ofrecen espacio gratuito y funcionalidades varias que permiten comentarios a cada entrada y subida de fotografas para enriquecer el texto del diario.

Una herramienta muy socorrida a la hora de consultar tanta informacin son los Buscadores de Blogs. Technorati es un buscador muy utilizado y consolidado en este terreno. Estos son algunos de los blogs que te puedes instalar: WordPress, con traduccin al espaol. Prubalo aqu. Movable Type TextPattern. Prubalo aqu. LifeType. Prubalo aqu.

Unidad 12. Funciones extra (IV)

Foros. Los foros de discusin, foros de opinin o simplemente, foros, son sistemas de mensajes organizados de forma temtica y cronolgica. Los mensajes se agrupan por temas y dentro de cada tema por fecha. Normalmente un usuario plantea una pregunta o comentario y otros usuarios responden, a su vez otros usuarios responden a estos, crendose una especie de rbol de respuestas. Ejemplos de foros: phpBB, vBulletin. El uso ms comn de los foros es para obtener respuestas concretas a preguntas tcnicas sobre programacin, internet, juegos, bricolaje, etc.. Normalmente hay unos usuarios habituales que contestan la mayor parte de las preguntas y otros usuarios espordicos que

visitan el foro para hacer preguntas y contestar alguna pregunta de vez en cuando. Tambin hay algunos usuarios gamberros o "troles" que solo quieren divertirse y molestar. Otro tipo de usuario conocido como "spamer" slo busca hacer publicidad. Para controlar todo esto es necesario que existan moderadores con capacidad de borrar mensajes y bloquear usuarios. Millones de personas han encontrado solucin a sus pequeos o grandes problemas a travs de los foros y sera bueno que el espritu de "echar una mano" a los dems se mantuviera por muchos aos. Educativas. Los CMS educativos o formativos son sistemas on-line de aprendizaje que simulan un aula virtual. Constan de contenidos, profesores y alumnos. Los profesores crean los contenidos y responden a las preguntas de los alumnos. Tambin se pueden realizar exmenes.

Es sorprendente la cantidad de posibilidades para la enseanza que proporcionan estos sistemas, con muy poca inversin y conocimientos informticos se puede crear un eficiente centro educativo virtual que puede ser usado por miles de alumnos. Son usados por profesores como apoyo a sus clases presenciales, por educadores de pases en vas de desarrollo para ofrecer educacin gratuita, por profesionales que quieren dedicarse a la enseanza por Internet, etc. El ms usado es Moodle originario de Australia pero que cuenta con versiones en diferentes idiomas, entre ellas el espaol, requiere PHP y admite las bases de datos ms populares (MySQL, Postgree, ... ) Otros ejemplos son: Dokeos, WebCT y Blackboard. Wikis.

Wiki es un sistema colaborativo de edicin y publicacin de contenidos web, de tal forma, que los usuarios registrados pueden crear o modificar la informacin de una pgina web sin saber HTML. La enciclopedia Wikipedia es el ejemplo ms conocido de un Wiki. Hay varios sistemas wiki, (MediaWiki, TikiWiki, ... ) pero todos tiene unas caractersticas comunes, entre ellas, la fcil edicin a travs del navegador web y la existencia de un "historial" de cada pgina que permiten al moderador deshacer los cambios realizados por los usuarios hasta una versin del historial. Comercios. Los CMS de comercio electrnico permiten crear una tienda virtual en muy poco tiempo y con multitud de funciones. Unos de los ms conocidos son Magento, PrestaShop y eCommerce. Una vez instalado uno de estos CMS permite crear un catlogo con los productos de la tienda, incluida una foto, e implementar un "carrito de compra" con los sistemas de pago ms habituales (contra reembolso, transferencia, tarjeta, PayPal, etc, ...).

Unidad 12. Funciones extra (V)

12.5. Frameworks
Un Framewoks es un software diseado para ayudar a realizar aplicaciones informticas con una base comn y bien estructurada. Consta conjunto de libreras que facilitan el desarrollo de software ya que implementa las funciones ms bsicas de todo proyecto de software. Un Framework dispone de rutinas para acceder a bases de datos, para navegar entre pginas, para el acceso de usuarios, etc. De esta forma se libera al programador de tener que realizar tareas bsicas que son comunes a la mayora de los proyectos. Usualmente un framework va asociado a un lenguaje de programacin, as tenemos frameworks para php como Zend o CakePHP, para java como Struts o Springs, Rails para ruby, Jquery para Javascript, para .NET como Microsoft .NET Framework, etc. Los frameworks son, normalmente, software libre creado y mantenido por comunidades de programadores independientes o ligados a otros proyectos de software. Aunque el uso de Frameworks es bastante recomendable hay que tener en cuenta ciertas consideraciones. Si estamos empezando a aprender un lenguaje de programacin es mejor esperar a dominarlo antes de utilizar un framework. Si nuestro proyecto es de poca complejidad quizs no saquemos rendimiento al trabajo empleado en aprender el uso del

framework. Para proyectos medianos o grandes en los que participan varias personas y con crecimiento previsto, si es interesante emplear un framework. No hay una definicin de cmo tiene que ser un framework, as que no todos son iguales y tienen ms o menos funciones implementadas. Por esto es conveniente hacer una comparativa para elegir el que mejor se adapte a nuestro caso particular teniendo en cuenta, aparte del propio framework, la seriedad de la comunidad que tienen detrs, la documentacin, los ejemplos de cdigo, etc.

12.6. AJAX
En el tema 10 vimos una introduccin al lenguaje JavaScript que permite dotar de ms dinamismo a las pginas web, AJAX es un paso ms en este sentido que conviene conocer.

AJAX es un acrnimo para Asynchronous JavaScript And XML (JavaScript Asncrono y XML). Con AJAX seremos capaces de crear sitios web que se ejecuten directamente en el navegador del usuario manteniendo una comunicacin con el servidor siempre que sea necesario pero sin recargar la pgina que estamos visualizando, simplemente se realizarn cambios sobre ella. Esto significa que la velocidad de interaccin con la aplicacin aumenta de forma significativa al reducir el nmero de peticiones que se hacen al servidor. Y an as, la comunicacin que se realiza entre el navegador y el servidor se realiza de forma asncrona y en segundo plano, por lo que es completamente transparente para el usuario. Gran parte del mrito de la integracin y rpida aceptacin que ha tenido la llamada Web 2.0 se debe a AJAX. Uno de los primeros en usar AJAX fue Google Maps que rpidamente se gan un punto al crear una interfaz rpida, accesible e interactiva.

AJAX no constituye una tecnologa en s, sino que combina mediante JavaScript, tres tecnologas ya existentes: XHTML y hojas de estilos (CSS) para el diseo que formatea la informacin. Document Object Model (DOM) que es el encargado de interactuar con la informacin presentada y es el que se ejecuta en el cliente (navegador), y XMLHttpRequest, que es un objeto encargado de intercambiar datos con el servidor web. Estos datos son devueltos en formato XML y se aaden a la pgina que estamos visualizando integrndose de nuevo gracias a XHTML y CSS. Uniendo estas tecnologas, las interfaces, es decir, la forma en la que el usuario ve o trabaja con una pgina web, se han revolucionado. De hecho, estn surgiendo nuevos portales o pginas de inicio que permiten su configuracin completamente. De forma que el usuario al abrir una ventana del navegador vea todo el contenido que le interesa en una sola ventana. Ejemplos de estas iniciativas son la pgina de inicio personalizada de Google, Live.com de Microsoft o la iniciativa de Netvibes.com muy bien orientada al pblico hispanohablante. La nica desventaja que presenta AJAX es que utiliza JavaScript como lenguaje en la parte del navegador para acceder al DOM. Aunque para utilizar AJAX no sea necesario ningn tipo de plug-in en el cliente, s es necesario tener activado JavaScript. En resumen, AJAX supone un avance en la interaccin del usuario con la web adems de un uso real de JavaScript que hasta ahora se encontraba explotado de forma muy pobre.

12.7. Para saber ms...

Enlaces para ampliar la informacin sobre este tema: CMS CMS en espaol Ayuda WordPress AJAX: Ajax: Un Nuevo acercamiento a las Aplicaciones Web

Frameworks para distintos lenguajes: Lista de Framework MVC para PHP CakePHP Zend para PHP Struts para Java Springs para Java Ruby on Rails JQuery, para JavaScript Masup: programmableweb Las mejores APIs disponibles. Aqu encontrars una lista con las APIS ms conocidas.

Unidad 13. Publicar (I)

13.1. Introduccin

Una vez tenemos terminada nuestra pgina web slo queda publicarla en Internet para hacerla accesible a los millones de internautas de todo el mundo. Hoy en da nos parece normal que cualquier persona del planeta pueda ver nuestras pginas web en Internet pero hasta la dcada de 1990 a nadie se le hubiera ocurrido soar que sera tan fcil y tan barato poder comunicarse con tanta gente. Bsicamente para publicar hace falta tener acceso a un servidor de Internet y disponer de una forma de subir los archivos al servidor. Tambin es conveniente saber lo que es un dominio de Internet y cmo hacer que nuestra pgina sea encontrada por los buscadores. Tambin podemos publicar en un servidor local instalado en nuestro ordenador, de esta forma podremos probar las pginas dinmicas sin subirlas a Internet, por ejemplo, mediante WAMP o XAMPP podemos instalar un entorno con el servidor APACHE, PHP, MySQL en Windows. Para Linux XAMPP o LAMP. Como ya dijimos en la unidad 1, si lo que te interesa es simplemente escribir en Internet y no te atrae la parte tcnica o informtica, lo ms adecuado es utilizar los blogs gratuitos como Blogger o WordPress.com.

13.2. Servidores
Para que tu pgina se vea desde Internet simplemente tiene que estar almacenada en un servidor de Internet. Es decir, debes disponer de espacio en un servidor para poder subir tus archivos, donde cualquiera pueda verlos. Cualquiera puede tener un servidor de Internet, slo hace falta un ordenador, una direccin IP fija, una conexin telefnica y un software adecuado, como el servidor Apache, que adems es gratuito. Esto explica el gran crecimiento inicial de Internet. Han surgido miles de servidores que comparten su informacin por el simple gusto de aprender y ensear. Y muchos ms que esperan hacer negocio en la red. De todas formas, crear un servidor tiene cierta complejidad y se sale del mbito de este curso, adems necesitaras una conexin permanente a Internet y un ordenador con el servidor web en funcionamiento las 24 horas del da. S es ms accesible instalar en servidor local como WAMP, en el curso de Dreamweaver de aulaClic lo tienes explicado. Para acceder a un servidor de Internet hay dos alternativas, buscar un servidor gratuito o contratar uno de pago. Para empezar puede servir un servidor gratuito pero para cosas ms serias es conveniente utilizar un servidor de pago. a) Servidores gratuitos. Podemos diferenciar dos alternativas gratuitas: Sitios especializados. Existen algunos sitios web especializado en ofrecer espacio gratuito como Fortunecity, Tripod, iEspaa, Galeon, etc. La mayora colocarn publicidad en las pginas alojadas. Los servidores gratuitos pueden imponer restricciones en el uso de ciertas instrucciones de programacin web y no te permiten cambiar la configuracin del servidor. Cada vez es ms difcil encontrar servidores gratuitos con un mnimo de calidad. Google Sites es un caso aparte. Algunos proveedores anuncian servidores gratuitos pero al leer el contrato con detalle podemos encontrar condiciones como que slo es gratuito el primer mes, que hay que tener un nmero mnimos de visitas, etc. Tambin hay que destacar que la mayora de servidores gratuitos no admiten el uso de pginas dinmicas ni bases de datos.

 Proveedores de acceso. Cuando contratas un servicio de conexin a Internet a travs de un proveedor, suelen ofrecer de forma gratuita un espacio web en sus servidores. Por ejemplo ya.com, Orange, Telefnica, etc. Si ya tienes contratada una conexin a Internet, revisa las condiciones porque probablemente tienes derecho a un espacio gratuito en el servidor. b) Servidores de pago. Si quieres tener un lugar ms profesional donde colocar tus pginas o las de tu empresa puedes utilizar los servicios de empresas especializadas que por menos dinero de lo que piensas te ofrecen muchos servicios, prueba a visitar Arsys , Acens o Alojalia y ver sus condiciones y tarifas. Los servidores pueden ser de dos tipos bsicos, compartidos o dedicados. Un servidor compartido (shared hosting) es aquel que comparte mquina fsica con otros servidores compartidos. En un servidor dedicado una mquina fsica soporta un solo servidor dedicado. En un servidor compartido no se te permiten cambiar completamente la configuracin del servidor, ni hacer reinicios fsicos de la mquina, mientras que un servidor dedicado puedes hacer todo lo que quieras puesto que el servidor est completamente a tu disposicin. Inicialmente es preferible un servidor compartido ya que es ms asequible y ofrece prcticamente todos los servicios que son necesarios para un uso particular o profesional. Un servidor dedicado es conveniente para un sitio web con muchas visitas o si se requiere una configuracin muy especial del servidor. Los servidores ubicados en EE.UU. ofrecen ms recursos por el mismo precio pero con el inconveniente de la atencin al cliente en ingls: lista de los mejores. En este buscador de alojamiento o Hosting puedes encontrar servidores con las caractersticas que desees: BuscaHost. A la hora de contratar un servidor ten en cuenta que es importante la velocidad con la que las pginas se cargan en Internet y no todos ofrecen la misma velocidad de transferencia o ancho de banda. Algunos servidores ofrecen "espacio ilimitado" pero en realidad quieren decir "espacio suficiente" para la mayor parte de los usuarios. Tambin es importante fijarse en las condiciones del servicio de atencin al cliente que ofrecen los distintos proveedores.

Unidad 13. Publicar (II)

13.3. Dominios de Internet

Un servidor web necesita disponer de un dominio de Internet para que se pueda acceder a l en la forma http://www.nombre_dominio.com. Por ejemplo, si quieres disponer del sitio web http://www.dibujosdemotos.com debers contratar el registro del dominio

"dibujosdemotos.com" (siempre que alguien no lo haya registrado antes). Los dominios hay que contratarlos en un registrador autorizado por un periodo de tiempo determinado, por ejemplo, un dominio .com por un ao vale sobre 25 euros. Las empresas que ofrecen alojamiento tambin suelen ofrecer registro de dominios: Arsys o Acens Los servidores gratuitos suelen ofrecer subdominios de la forma

http://www.servidor_gratuito.com/tu_subdominio, de forma que no necesitas registrar ningn dominio ya que los subdominios no se registran.

13.4. Subir archivos al servidor

Lo normal es desarrollar nuestro sitio de forma local, es decir, en nuestro propio equipo. Pero una vez conseguimos un servidor, gratuito o de pago, tenemos que subir a l todos nuestros archivos. Hay varias opciones a la hora de subir los archivos al servidor: a) Utilizar un programa especfico para ello como el Filezilla. Se trata de un cliente FTP. Para transferir ficheros por FTP se necesita tener instalado un programa cliente de FTP en nuestro ordenador y conocer la direccin del servidor FTP con el que queremos conectar. Nuestra direccin nos la proporcionar la empresa con la que tengamos el alojamiento. Una vez conectado, los programas FTP tienen un interfaz bastante simple. Bsicamente, nos muestran los archivos de nuestro equipo a un lado, y los del servidor a otro. Con lo que no tenemos ms que arrastrar y soltar archivos de un lado a otro.

La principal ventaja del FTP, a parte de su comodidad, es que nos permite subir varios archivos y carpetas enteras a la vez, sin tener que ir uno por uno. b) Utilizar un editor de pginas web que incorpore esta funcionalidad. Por ejemplo, el Dreamweaver. Algunos editores profesionales incorporan el acceso FTP. Esto que nos permite subir y descargar los archivos cmodamente usando el interfaz del editor. Adems, nos permiten tenerlos sincronizados, e ir subiendo automticamente aquellos archivos que vayamos actualizando. Puedes encontrar ms informacin sobre esto en el Curso de Dreamweaver en aulaClic. c) Utilizar las facilidades proporcionadas por la empresa de hosting. Realmente no necesitamos ninguno de los programas anteriores, aunque casi siempre sean de mejor calidad. Toda empresa de hosting nos proporciona un interfaz a travs del que subir archivos al servidor. Este interfaz depende de la empresa. Los de alojamientos gratuitos suelen ser bastantes simples, permitindonos subir unos pocos archivos cada vez a travs de un formulario web. Esto resulta muy tedioso si tenemos que subir un sitio completo de tamao medio. Los alojamientos de pago suelen tener un mejor servicio. Algunos implementan un interfaz muy completo (WebFTP) que realmente puede sustituir al cliente FTP.

Unidad 13. Publicar (III)

13.5. Obtener visitantes
Una vez tengas tu pgina en Internet te interesar que la visiten muchas personas (sobre todo si te lo planteas como un negocio). Para ello lo fundamental es que la pgina tenga contenido interesante, buen diseo y se actualice peridicamente. Adems de lo anterior an hay algunas otras cosas que se pueden hacer para conseguir ms visitas y que vamos a detallar a continuacin. Los visitantes llegan por primera vez a una pgina web de dos formas bsicas, una es a travs de los buscadores y la segunda a travs de enlaces que los internautas encuentran en otras pginas. No hay una estadstica oficial de la importancia de cada va de acceso, pero se estima que es ms importante a travs de los buscadores, en torno a un 80-90%, aunque

inicialmente los enlaces tienen ms importancia porque sin ellos no podremos subir puestos en los buscadores. Para conseguir visitas provenientes de los buscadores hay que utilizar tcnicas de posicionamiento y para conseguir visitas desde otras pginas hay que conseguir enlaces. Aunque ambas estn relacionadas, ya que cuantos ms enlaces tengamos, mejor apareceremos en los buscadores, y viceversa. Aunque algunos se empean en decir que las tcnicas de posicionamiento e intercambios influyen mucho en el nmero de visitas recibidas (y cobran mucho dinero por aplicarlas) en realidad lo ms importante es el contenido de la web, ya que con un buen contenido, los propios buscadores te incluyen automticamente en sus buscadores en una buena posicin y los webmasters incluyen enlaces a tu pgina sin pedrselo. Esto no quiere decir que no haya que utilizar estas tcnicas, sino que su importancia es relativa y supeditada al contenido de la pgina. Posicionamiento. Fundamentalmente nos vamos a referir al posicionamiento en el buscador Google, porque es el ms utilizado y porque los dems buscadores se basan en cosas similares para ordenar sus resultados. Cuando una persona introduce una o varias palabras claves en un buscador, ste realiza complejos procesos para obtener una lista de resultados con las pginas que mejor responden a esa bsqueda. Estos procesos son secretos y los buscadores slo dan una informacin general de los factores que influyen en los resultados. Esto es as por dos motivos, el primero para que la competencia no los copie y el segundo para que los creadores de las pginas no hagan trampas para obtener mejores posiciones. Adems segn unos van descubriendo los entresijos de los buscadores, los otros los van cambiando para penalizar a los tramposos. Al final, desde el punto de vista del creador de pginas web, se impone el sentido comn, y lo mejor es dedicarse a mejorar en contenido en lugar de andar bordeando el lmite de lo permitido en tcnicas de posicionamiento. Despus de estos prembulos, vamos ya con las tcnicas de posicionamiento. Hay que decir que conseguir buen posicionamiento es una tarea que requiere bastante tiempo, hasta las dos o tres semanas no se ven los primeros resultados y hacen falta varios meses para empezar a ver realmente el lugar que le corresponde a nuestro sitio web. Hay que

tener en cuenta que dado el gran nmero de pginas existentes, a los robots de los buscadores (tambin conocidos como araas o crawlers) les lleva bastantes das encontrar las pginas nuevas. 1. Contenido de calidad. Como ya hemos dicho ste es el factor primordial para obtener un buen posicionamiento. Sin contenido de calidad no hay nada que hacer, con contenido de calidad lo dems viene rodado. Contenido de calidad quiere decir contenido interesante, bien redactado y con diseo agradable. Una pgina con un buen contenido y mal posicionamiento tardar ms en alcanzar una buena posicin, pero lo conseguir. 2. Sitio bien estructurado y sencillo. Para los robots de Google cuanto ms fcil sea extraer la informacin de la pgina tanto mejor. Hay que colocar suficientes enlaces de texto y con las palabras clave adecuadas y huir de las excesivas florituras y virgueras tcnicas. 3. Lograr enlaces desde otros sitios web. El factor de ms peso en el PageRank de Google es el nmero y la calidad de los enlaces que apuntan a nuestro sitio. Informa de la existencia de tu pgina a todo el mundo, principalmente a los sitios de temtica similar. En el punto siguiente daremos ms informacin sobre este tema. 4. Alta en Google. El primer paso para conseguir una buena posicin en Google es aparecer en el buscador. Para hacerlo visita esta pgina: addurl. 5. Infrmate de las reglas de los buscadores y no te las saltes, si lo haces y te penalizan perders muchos meses para recuperar tu posicionamiento. En esta pgina tienes informacin sobre las directrices de calidad de Google. 6. Sobre el diseo de la pgina ten en cuenta estas recomendaciones, si utilizas demasiado Flash, frames, DHTML, JavaScript y mucha programacin web hars ms difcil el trabajo de los robots. Es conveniente utilizar ttulos cortos y claros, con los estilos de encabezados (h1, h2). Los ttulos son fundamentales en las bsquedas, procura utilizar el sinnimo ms comn, por ejemplo, coches, vehculos, autos, automviles, carros. Hay herramientas para ver cules son las palabras ms buscadas. Google no reconoce el texto incluido en imgenes, no utilices imgenes para los ttulos ni para los enlaces principales del sitio web. Si utilizas imgenes, usa el atributo ALT para poner el texto relevante. 7. Dar de alta en directorios importantes como Dmoz. Aunque han perdido importancia todava son una forma de conseguir enlaces. 8. Para conocer las palabras clave ms usadas hay herramientas como la proporcionada por Google AdWords. Con ella podemos ver la relevancia de palabras clave y las bsquedas que se han hecho con esas palabras. 9. Enlazar las pginas desde el propio sitio web de forma bien estructurada. 10. Informar a Google de la actualizaciones con Sitemaps Hay algunas recomendaciones que son contradictorias, por ejemplo, los enlaces con html son mejor indexados por los robots que los incluidos en funciones javascript, pero los mens con javascript son ms intuitivos para los usuarios y mejoran el diseo de la pgina.

Como resumen podramos decir que todas las tcnicas de posicionamiento se resumen en dos, la primera es que generes contenido de calidad y la segunda que utilices las tcnicas con sentido comn y sin hacer trampas. Conseguir enlaces. 1. Como venimos diciendo, la mejor forma de conseguir que otros webmasters enlacen nuestra pgina es creando una pgina con contenido y diseo de calidad, as los webmasters considerarn que poner un enlace a nuestra pgina es algo til para sus visitantes. 2. Dar a conocer nuestro sitio web. Esta tarea es muy importante, sobre todo en una primera fase, ya que es casi la nica forma de conseguir enlaces. Conseguir enlaces es realmente difcil por lo que no queda otro remedio que invertir tiempo y esfuerzo en ello. Hay que buscar sitios de temtica similar y registrarse, participar en las actividades, contestar preguntas en los foros, aportar algo de forma que luego podamos pedir a los dems usuarios y al webmaster que visiten y recomienden nuestro sitio. En funcin de la temtica de nuestro sitio deberemos buscar participar en determinados lugares como Foros, Blogs, Directorios, Redes sociales, etc. 3. Intercambios de enlaces. Buscar sitios web de temtica similar al nuestro y comprobar si tienen una seccin de intercambio de enlaces, si es as escribirles y proponerles un intercambio. Lo lgico es que los intercambios se realicen entre sitios de un Page Rank similar, por lo cual, al principio hay que dirigirse a sitios con un PageRank bajo ya que en otro caso ser dificil que acepten el intercambio. Segn vaya aumentando nuestro PageRank podremos solicitar intercambios con sitios ms importantes. 4. Amigos. Si conocemos a personas relacionadas con el mundo de las pginas web hay que comunicarles nuestro nuevo sitio web. Por supuesto, tambin debemos intentarlo con nuestros amigos del ciberespacio, hay muchas redes sociales, por ejemplo Hi5, Facebook, Orkut, con cientos de comunidades en las cuales podemos participar y obtener visitas de nuestros nuevos "amigos". Para conocer el Page Rank de una web, puedes instalar la barra de Google, visitar sitios especializados como mipagerank.com, o con herramientas como Seo Quake

Unidad 13. Publicar (IV)

13.6. Publicidad
Una vez tenemos publicada nuestra pgina en Internet y conseguidos muchos visitantes puede ser interesante incluir publicidad en ella. De forma mucho ms sencilla de lo que pudiera parecer se pueden poner anuncios comerciales y conseguir dinero. La cantidad de dinero es proporcional al nmero de visitantes de la pgina. Hay diferentes sistemas de publicidad en pginas web que, a efectos de este curso, agruparemos en estas categoras: publicidad contextual, publicidad directa, publicidad por registro y publicidad por agencia.

 La publicidad contextual es un sistema que inserta de forma automtica publicidad relacionada con el contenido de la pgina web, por ejemplo, si la pgina habla de deporte, se insertarn anuncios de anunciantes relacionados con el deporte. Cada vez que un usuario hace clic en un anuncio el propietario de la pgina recibe una cantidad de dinero que vara segn cada anuncio. El sistema ms popular de publicidad contextual es AdSense de Google, y lo vamos a ver ms en detalle a continuacin. La publicidad directa es la que el propietario de la pgina acuerda directamente con el anunciante, en funcin del tipo de publicidad y del nmero de visitantes se pacta el precio. Una variante de este tipo de publicidad es el patrocinio mediante el cual una empresa o entidad paga una cantidad al mes por aparecer como patrocinador de la pgina. Existen programas gratuitos que permiten gestionar este tipo de publicidad contabilizando los clics. La publicidad por registro o afiliacin se basa en pagar por cada registro o venta que produzca el anuncio, a diferencia de la publicidad contextual que paga cada vez que el usuario hace clic en el anuncio, independientemente de lo que pase despus. Es decir, en la publicidad por registro o venta el sistema controla si el usuario que hace clic acaba registrndose o comprando el producto anunciado, y en caso afirmativo el propietario de la pgina web recibe la comisin pactada previamente. Estos sistemas se basan en guardar una cookie apuntndose nmero IP, en el ordenador del usuario cuando este hace clic en el anuncio, y comprobando luego si, en un plazo determinado de das, el usuario acaba comprando el producto o registrandose en la tienda on-line. En estos sistemas se ofrecen altas comisiones pero el nmero conversiones de clics en registros o compras son bajos. Ejemplos de este tipo de publicidad son la publicidad que ofrecen los casinos on-line, TradeDoubler tambin tiene una seccin con este tipo de publicidad. La publicidad por agencia est reservada al sector empresarial, al contrario que los otros sistemas que hemos visto anteriormente y que pueden ser utilizados por autores de pginas web particulares. Las agencias de publicidad en internet gestionan los anuncios de los grandes medios de comunicacin y de empresas importantes. AdSense de Google.

Como decamos, este es el sistema ms extendido de publicidad contextual y vamos a verlo con ms detenimiento. Hay otros sistemas que tienen un funcionamiento muy similar, como Yahoo, Tradedoubler. AdSense es un sistema que supuso en el momento de su nacimiento para los pequeos webmasters o propietarios de pginas web un incremento de hasta cinco veces en las ganancias que se estaban consiguiendo hasta ese momento. Como consecuencia, algunos de ellos se pudieron dedicar profesionalmente a crear pginas web, aumentando la competitividad en un mundo hasta ese momento bastante "amateur" o de aficionados, lo cual trajo consigo un aumento de la calidad o de la comercialidad, segn se quiera ver. Los sistemas de anuncios que prometen grandes ingresos suelen resultar, al final, poco satisfactorios. Los formatos ms usuales de publicidad son el banner, el anuncio de texto, anuncios multimedia y anuncios incrustados en los vdeos. Tambin se puede poner publicidad en los dispositivos mviles. El sistema AdSense es utilizado por propietarios de pginas web (webmasters) y se encarga de mostrar anuncios de empresas (anunciantes) que quieren hacer publicidad en Internet. Los anunciantes utilizan el sistema AdWords para contratar con Google su publicidad. Simplificando un poco podemos decir que los anunciantes no saben "a priori" donde se van a mostrar sus anuncios y los webmasters no saben qu anuncios se van a mostrar en sus pginas. Google se encarga de colocar cada anuncio en las pginas que mejor se le adapten, y cuando un usuario hace clic en un anuncio cobra al anunciante y paga al webmasters , por supuesto, quedndose una comisin. Si se muestra un anuncio y nadie hace clic, ni el anunciante paga ni el webmaster cobra. Esto no es as en otros sistemas de publicidad donde se paga y cobra por mostrar el anuncio, independientemente de si el usuario hace clic o no. Decidir qu anuncio se muestra y en qu pgina no es un asunto trivial y Google tiene en cuenta varios factores para establecer una subasta instantnea entre las pginas y los anuncios de forma que se optimice el proceso para las tres partes implicadas. Uno de los factores que se usa es el contenido de la pgina, de forma que los anuncios tengan relacin

con las pginas, as es ms probable que el usuario haga clic en el anuncio que es de un tema que le interesa, por esto a este tipo de publicidad se le llama contextual.

Unidad 13. Publicar (V)

Este sistema (AdSense-AdWord) es la pieza fundamental que explica por qu Google a logrado en tan pocos aos ser una de las grandes empresas de informtica del mundo, ya que antes de implantar este sistema Google tena un buscador que usaba mucha gente pero no generaba apenas dinero. AdSense es un sistema que puede ser utilizado tanto por pequeos webmasters como por grandes empresas, es sencillo de utilizar y no hace falta estar dado de alta como una empresa o un autnomo para usar AdSense. Es necesario poseer un dominio de internet y tener acceso a un servidor. Una vez dado de alta slo hay que elegir uno de los formatos de anuncios disponibles, segn el lugar de la pgina donde vamos a incluirlo y copiar el cdigo generado por AdSense en dicho lugar. A los pocos minutos AdSense empezar a registrar los clics que realicen los visitantes de nuestra pgina y podremos comprobar el dinero generado mediante diferentes herramientas proporcionadas por el sistema. La pregunta es Cunto dinero puedo ganar con AdSense? y la respuesta es fcil y poco precisa: depende de los clics que los usuarios hagan en los anuncios. Esto, a su vez, depende de varias cosas, la ms importande es el nmero de visitantes de la pgina, pero tambin influye la calidad de la pgina ya que un mismo anuncio puede producir diferentes ingresos en una pgina o en otra. La calidad de la pgina la determina Google segn varios parmetros que tienen en cuenta la importancia de la pgina, el diseo, la historia de la pgina dentro de AdSense, etc. El dato ms manejado para medir las ganancias de una web es el eCPM (Coste por mil impresiones efectivo). Segn Google, para los sitios grandes, el eCPM vara entre 0,05 y 5,0 USD, si tomamos el valor medio 2,52 quiere decir que por cada mil pginas que vean nuestros usuarios ganaremos 2,52 USD (1,7 euros). Para los sitios pequeos quizs el eCPM vare entre 0,10 y 0,40 euros. Con estos datos puedes realizar una estimacin de lo que puedes ganar con tu web, conociendo el nmero de impresiones de pginas, ingresos = (impresiones x eCPM) / 1000. Por ejemplo, si tienes un milln de impresiones de pginas en un mes, y suponemos un valor medio del eCPM de 0,25 euros para un sitio pequeo, los ingresos seran (1.000.000 x 0.25 ) /1000 = 250 euros al mes.

Hay un minimo de dinero al que hay que llegar para recibir el pago, el mnimo para Espaa en 2009 anda sobre 70 euros. En AdSense se pueden poner anuncios de contenido, que son los ms normales, y tambin anuncios de bsqueda, as como anuncios para mviles. En una pgina adems de los anuncios de AdSense, tambin se pueden poner otro tipo de anuncios, aunque tampoco es recomendable poner excesiva publicidad porque el usuario se puede enfadar y no volver ms.

13.7. Para saber ms...

Puedes ampliar lo visto en el tema con estos enlaces: Buscadores y posicionamiento: Alta en varios buscadores, en abcdatos. Te recomendamos visitar este manual de posicionamiento, tambin en abcdatos . La web de Dirson. Cmo posicionar su pgina web en Google. Google analytics Servidores: Montar un servidor casero vicente-navarro.com Publicidad AdSense Tradedoubler.