Guía del Estudiante DESARROLLO WEB Alumno Desarrollo Web.pdf · Inkscape. Crear la pestaña ......

165
Guía del Estudiante DESARROLLO WEB INSTITUTO DE CAPACITACIÓN WORLDKEY

Transcript of Guía del Estudiante DESARROLLO WEB Alumno Desarrollo Web.pdf · Inkscape. Crear la pestaña ......

GuíadelEstudiante

DESARROLLOWEB

INSTITUTODECAPACITACIÓNWORLDKEY

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

2

¿Sabías qué? En los últimos 10 años el mundo de la informática ha crecido 70% dentro de los puestos laborales tradicionales. Cada vez se hace más necesario tener conocimiento básico informático. Las empresas día a día prefieren contratar personal apto para el desempeño de labores que demanden un manejo de las tecnologías computacionales

Es por esto que WORLDKEY te da la oportunidad de acercarte a estas competencias mediante la variedad de cursos de disponemos.

En este curso veremos los lenguajes de programación utilizados para el desarrollo Web, acorde a los estándares actuales, preparándote para enfrentar el mercado laboral a través del manejo de la información digital.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

3

Tabla de contenido ¿Sabías qué? .................................................................................................................... 2

Unidad 1: Mi primera página web ................................................................................ 8

1.1. Introducción .......................................................................................................... 8

1.2. Contenidos ............................................................................................................ 9

1.3. Metodología ........................................................................................................... 9

1.4. Alternativas ......................................................................................................... 10

1.5. Servidores y direcciones URL ........................................................................... 10

1.6. ¿Qué es una página web? .................................................................................. 11

1.7. Un Sitio Web ....................................................................................................... 13

Unidad 2: HTML básico ............................................................................................... 14

2.1. Etiquetas .............................................................................................................. 14

2.2. Estructura básica de la página .......................................................................... 15

2.3. Estructura del texto ............................................................................................ 16

2.4. Imágenes .............................................................................................................. 18

2.5. Enlaces ................................................................................................................. 21

2.6. Divisiones o capas ............................................................................................... 23

Unidad 3:Aspecto de la página. Estilos básicos .......................................................... 25

3.1. Estilos .................................................................................................................. 25

Independencia entre el contenido y el formato ........................................................ 28

3.2. Formato del texto ............................................................................................... 28

Color ........................................................................................................................ 28

Fuente ...................................................................................................................... 29

Tamaño .................................................................................................................... 29

Inclinación ............................................................................................................... 29

Grosor ...................................................................................................................... 29

Decoración ............................................................................................................... 30

Mayúsculas y minúsculas ........................................................................................ 31

3.3. Bordes .................................................................................................................. 33

3.4. Márgenes ............................................................................................................. 33

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

4

3.5. Fondo ................................................................................................................... 36

3.6. Cómo declarar un estilo ..................................................................................... 37

3.7. Dónde declarar un estilo .................................................................................... 38

3.8. Orden de aplicación de los estilos CSS ............................................................. 39

Ejercicios de Práctica ................................................................................................ 42

Unidad 4: Editor Web .................................................................................................. 43

4.1. ¿Qué es un editor Web? ..................................................................................... 43

Editores de texto ...................................................................................................... 43

Editores de HTML ................................................................................................... 43

Editores WYSIWYG ............................................................................................... 43

4.2. Elegir un editor ................................................................................................... 44

4.3 Entorno de Notepad++ ........................................................................................ 44

Unidad 5: Preparar nuestro sitio ................................................................................. 45

5.1. ¿Qué es un sitio web? ......................................................................................... 45

5.2. La temática del sitio ........................................................................................... 45

5.3. Organizar los archivos ....................................................................................... 46

5.4. Navegación .......................................................................................................... 48

5.5. Estructura del menú ........................................................................................... 49

5.6. Estructura de la página ..................................................................................... 50

Páginas Base .............................................................................................................. 51

5.7. Páginas básicas ................................................................................................... 52

Unidad 6: Diseño y Usabilidad .................................................................................... 54

6.1. Un buen diseño ................................................................................................... 54

6.2. Colores ................................................................................................................. 55

6.3. El texto ................................................................................................................. 55

6.4. Fondo ................................................................................................................... 58

Unidad 7: Maquetación web ........................................................................................ 60

7.1. Maquetar una página web ................................................................................. 60

7.2. Tamaño ................................................................................................................ 60

7.3. Desbordamiento .................................................................................................. 63

7.4. Posicionamiento .................................................................................................. 64

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

5

7.5. Posicionamiento relativo .................................................................................... 64

7.6. Posicionamiento absoluto .................................................................................. 65

7.7. Posicionamiento flotante .................................................................................... 72

7.8. Posicionamiento fijo ........................................................................................... 77

7.9. Ancho de la página, líquido o elástico .............................................................. 80

Unidad 8: Menús ........................................................................................................... 82

8.1. El HTML del menú ............................................................................................ 82

8.2. Estilo básico del menú ........................................................................................ 82

8.3. Posición de los elementos ................................................................................... 84

8.4. Tamaño de los elementos ................................................................................... 84

8.5. Distintos estilos del elemento ............................................................................. 86

Ejercicios de Práctica ................................................................................................ 87

Objetivo ...................................................................................................................... 87

Unidad 9: Imágenes ...................................................................................................... 89

9.1. Introducción ........................................................................................................ 89

9.2. Galería con miniaturas ...................................................................................... 89

9.3. Organizar las miniaturas ................................................................................... 90

9.4. Tabla de índice .................................................................................................... 95

9.5. Estilo redondeado ............................................................................................... 98

9.6. Pestañas y botones ............................................................................................ 101

9.7. Inkscape. Crear la pestaña .............................................................................. 102

9.8. Inkscape. Degradados ...................................................................................... 103

9.9. Menú desplegable ............................................................................................. 106

9.10. Mapa de imagen ............................................................................................. 109

9.11. Logo ................................................................................................................. 111

9.12. Para saber más... ............................................................................................ 114

Unidad 10: JavaScript ................................................................................................ 115

10.2. Cambiar el CSS .............................................................................................. 115

10.3. Ubicar el código .............................................................................................. 118

10.4. Funciones ........................................................................................................ 119

10.5. Abrir una ventana .......................................................................................... 121

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

6

10.7. El menú en JavaScript ................................................................................... 124

10.8. noscript ............................................................................................................ 128

10.9. Para saber más... ............................................................................................ 129

Unidad 11: Formularios y PHP ................................................................................. 130

11.1. Introducción .................................................................................................... 130

11.2. Formularios ..................................................................................................... 130

11.3. PHP. Código de ejemplo ................................................................................ 134

11.4. Recoger los datos ............................................................................................ 137

11.5. Bases de datos ................................................................................................. 139

11.6. Para saber más... ............................................................................................ 140

Unidad 12: Publicar .................................................................................................... 141

13.1. Introducción .................................................................................................... 141

13.2. Servidores ........................................................................................................ 141

13.3. Dominios de Internet ...................................................................................... 144

13.4. Subir archivos al servidor ............................................................................. 144

13.5. Obtener visitantes ........................................................................................... 145

Posicionamiento: ................................................................................................... 146

Conseguir enlaces. ................................................................................................. 147

13.6. Publicidad ....................................................................................................... 148

AdSense de Google. .............................................................................................. 149

13.7. Para saber más... ............................................................................................ 151

Unidad 14: Wordpress ................................................................................................ 152

Anexos .......................................................................................................................... 153

Recortar y redimensionar imágenes con Gimp .................................................... 153

Objetivo ................................................................................................................. 153

Ejercicio 1: Reducir la imagen ............................................................................... 153

Ejercicio 2: Crear una miniatura .......................................................................... 154

Esquinas redondeadas con borde .......................................................................... 156

Ejercicio paso a paso: Recoger datos y enviar un correo .................................... 160

Objetivo ................................................................................................................. 160

Bases de datos .......................................................................................................... 164

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

7

Tablas de datos ...................................................................................................... 164

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

8

Unidad 1: Mi primera página web 1.1. Introducción El objetivo de este curso es enseñar a crear páginas web, partiendo desde cero y usando herramientas gratuitas.

Para seguir el curso sólo necesitas un computador y ganas de aprender. Al finalizar el curso podrás crear un Sitio Web Completo y luego uno con Gestor de Contenidos (CMS) Wordpress.

Técnicamente la palabra correcta es Sitio Web, pero popularmente se utiliza el término Página Web, la cual puede entenderse como sinónimo. En rigor un Sitio Web contiene varias Páginas Webs (Inicio, quiénes somos, galería, etc.), por lo cual difícilmente un Sitio Web contiene 1 sola Página Web. Es importante considerar esta diferencia ya que puede llevarnos a errores. Durante este curso usaremos ambos términos como sinónimos, pero ten en cuanta dicha diferencia.

El lenguaje que se utiliza para crear una página 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 creación de páginas web.

Vamos a explicar brevemente qué queremos decir con esto. Lo fundamental para escribir páginas web es saber HTML, pero no es suficiente. Si quieres poner una imagen en tu página, necesitarás saber un poco sobre gráficos web para recortar la imagen al tamaño 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.

También es conveniente utilizar un editor web para facilitar la escritura de páginas web, como KompoZer, SublimeText o simplemente Block de Notas de Windows, para que tu página sea agradable es conveniente saber algo sobre diseño web, y por último para que todo el mundo vea tu trabajo necesitarás subir tu página a un servidor de Internet y darla a conocer.

Pues bien, todo esto y un poco más es lo que hay en este curso. Además hemos intentado explicarlo de forma que lo pueda entender cualquier persona sin conocimientos previos sobre todos estos temas. Dicho así, parece una misión casi imposible, esperamos que sigas todo el curso y llegues al final cumpliendo estas expectativas. Es un reto complicado pero esperamos crear un curso que sea un punto de partida a este apasionante mundo de la comunicación global a través de Internet y te dote de la visión general que te permita avanzar hasta lograr crear páginas web atractivas y completas. A final del curso estamos seguros que lograrás crear conocimiento y ponerlo a disposición de las personas, y algo del espíritu de

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

9

colaboración, desde el que está hecho este curso, quizás llegue a contagiarte un poco. Se acaba dando parte de lo que se recibe.

Por supuesto, tratar todos estos temas en profundidad exigiría un curso de un tamaño enorme, pero el objetivo es dar una introducción a cada tema, de forma que el alumno se pueda desenvolver en las tareas básicas y tenga las nociones suficientes para poder ampliar lo que más 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 más fácil de entender hemos desarrollado el temario de forma progresiva mediante la creación de un sitio web sobre flores, introduciendo cada concepto según se va necesitando.

Así, primero (tema 2,3) veremos los conceptos básicos de HTML, escribir texto, darle formato, hiperenlaces, estilos, etc. Luego (tema 5) explicaremos brevemente el editor SublimeText, luego veremos como estructurar una página web y un sitio web (tema 6), más adelante introduciremos el programa Gimp para trabajar con gráficos (tema 9), unas ideas para crear gráficos vectoriales, como por ejemplo un logotipo para la página, 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 cómo publicar nuestro sitio y como conseguir que aparezca en los buscadores y tenga visitas.

1.3. Metodología Como hemos dicho los diversos conceptos los introduciremos según sean necesarios a medida que vamos desarrollando un sitio web. Primero crearemos una página sencilla para introducir los elementos básicos de HTML, luego iremos añadiendo elementos a esa página, como un menú, gráficos, formularios, etc.

En algunos temas, sobre todo al principio, la explicación será un poco más teoría y general. Muchas veces, encontrarás la opción de probar el código 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 más en trabajar sobre el sitio de ejemplo, realizando cambios concretos. Por eso, te sugerimos que vayas creando el mismo sitio, asegurándote de haber aplicado los cambios explicados en cada tema.

Los temas están apoyados también en videotutoriales, a los que puedes acceder a través de la plataforma. Aunque en ellos no explicamos cosas nuevas, puede que te ayuden a entender algunos conceptos al verlos de forma más visual.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

10

Al final de cada tema encontrarás unos ejercicios propuestos. Con ellos, irás creando otro sitio con lo visto en cada tema.

1.4. Alternativas Crear páginas web es la forma básica de comunicar en Internet, pero no la única, ni la más adecuada para todos los casos.

Si te gusta la informática y quieres tener tu propio sitio web como una afición, o si quieres crear un sitio web para tu club de fútbol, tu pequeña empresa o para dedicarte profesionalmente al mundo de Internet, este curso, probablemente, te interesará mucho. Si en cambio la tecnología te espanta un poco y sólo te interesa la parte más literaria seguramente haya otras formas de publicar en Internet que te resulten más adecuadas, como, por ejemplo, los blogs. Escribir contenidos en un blog es más sencillo que crear una página web aunque menos flexible. En cualquier caso, puedes empezar a leer el curso, quizás te sorprenda lo sencillo que es crear una página web.

1.5. Servidores y direcciones URL Cuando visitamos páginas web en realidad estamos accediendo a archivos en un servidor web. La dirección o URL tiene este formato:

http://www.nombredominio.com/directorio/paginaweb.htm

Donde http:// es el protocolo y www. indica el sistema de páginas web. Habrás observado que no hace falta escribir esto en el navegador. Pero es porque el navegador se encarga de añadirlo, no porque nos sea necesario. nombredominio.com es el nombre del sitio. Al ir directamente ahí, vamos a su página de inicio. La última parte indica el archivo del sitio que estamos viendo. En este caso, una página llamada paginaweb.htm que está en una carpeta llamada directorio.

Podemos visitar una dirección desde un buscador o desde un enlace en otra página. Podemos teclear la dirección 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 Internet que dispone de un programa que es capaz de recibir una URL y devolver una página web al que hizo la petición.

Podríamos decir que Internet está formado por una gran cantidad de ordenadores que pueden intercambiar información entre ellos. Es una gran red mundial de ordenadores.

Los ordenadores se pueden comunicar porque están unidos a través de conexiones y gracias a que utilizan un lenguaje o protocolo común, el TCP/IP.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

11

Según el esquema que podemos ver en la imagen, un usuario se conecta a la red (a través de un módem o un router, ya sea vía línea telefónica, cable, satélite, 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) dándole a conocer tu dirección física.

Utilizando TCP/IP, el ISP asigna una dirección IP a tu PC y en ese momento se te da acceso a la red.

Cuando queremos acceder a una página proporcionamos un dominio que es traducido en los Servidores DNS y localizado. Cuando sabemos en qué Servidor Web se encuentra la página que queremos visitar se procede a su descarga y visualización en el navegador del PC.

1.6. ¿Qué es una página web? Una página web es un documento de texto con marcas, llamadas etiquetas (tags en inglés). Cuando este documento se ve a través de un navegador web, las etiquetas se interpretan y se visualiza el documento como una página web. Las etiquetas no se muestran pero determinan el aspecto de la página, y otras características, por ejemplo, si el texto es un enlace, en la etiqueta se indica la página a la que nos lleva el enlace.

Por lo tanto, si somos capaces de escribir un documento de texto, seremos capaces de escribir una página web. Sólo necesitamos conocer el lenguaje de las etiquetas o HTML.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

12

Es conveniente que vayas probando las cosas a medida que las explicamos. Para ello deberás de tener dos ventanas abiertas, una con el curso y otra con el programa correspondiente.

Bloc de notas

Vamos a comenzar por escribir una página web muy sencilla. Para ello utilizaremos un editor de texto sin formato, como puede ser el Bloc de notas (Notepad) incluído 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 menús.

Escribiremos el siguiente código. Más adelante ya veremos qué es cada elemento:

<html>

<head>

<title>Mi primera página</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 extensión de un archivo. La extensión indica de qué tipo es un archivo. La extensión son las tres letras que van después 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 través del menú Organizar → Opciones de carpeta y búsquedas, pestaña Ver, desmarcando la opción Ocultar extensiones de archivo para tipos de archivos conocidos, en Windows 7. En Windows XP encontramos esta opción en el menú Herramientas → Opciones de carpeta, también en la pestaña Ver.

Vamos a continuar guardando la página. Pulsamos en el menú Archivo y elegimos Guardar. Introducimos el nombre, por ejemplo Primera. Si ahora pulsásemos Guardar, se guardaría con la extensión txt, que indica que es un documento de texto sin formato. Para guardarlo como una página web, debemos de emplear la extensión .htm (o .html). Por lo que completamos el nombre para que quede Primera.htm y pulsamos Guardar.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

13

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 extensión .htm, se abrirá la página con el navegador que tengamos como predeterminado. Por ejemplo, en Internet Explorer , 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, verás 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 título de la página, y la etiqueta <p> indica un párrafo con texto normal.

Por lo tanto, un navegador web es una aplicación capaz de interpretar el código HTML, formado por etiquetas y mostralo debidamente formateado. En cualquier momento, podemos ver el código HTML de la página que estamos viendo. En Internet Explorer, podemos hacerlo desde el menú Ver → Código fuente, y se mostrará utilizando el Bloc de notas. En Mozilla Firefox lo hacemos también desde el menú Ver, eligiendo la opción Mostrar el código fuente de la página (teclas Ctrl + U), y muestra el código fuente formateado con colores. Puedes probarlo viendo el código fuente de esta página.

1.7. Un Sitio Web Cuando tenemos varias páginas, podemos organizarlas en un sitio web. Un sitio no es más que una carpeta que se encuentra en un equipo informático, ya sea nuestro ordenador personal o un potente servidor. La primera carpeta es la carpeta raiz. Por ejemplo, si accedemos a "www.wkc.cl", estamos accediendo a la carpeta raiz del sitio de wkc.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

14

Cuando escribimos "www.wkc.cl" en el navegador, en realidad estamos accediendo a la página www.wkc.cl/index.htm, es decir, al escribir una dirección 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 página web".

Tal como lo haríamos con una carpeta de Windows, podemos organizar nuestro sitio con subcarpetas. Por ejemplo, una carpeta con todas las imágenes, otra con los vídeos, etc.

Coloquialmente, es frecuente referirse a un sitio web sólo como página web, por ejemplo "se ha actualizado la página web del ministerio", aunque no nos estemos refiriendo a una página en concreto.

Veremos más detenidamente qué es un sitio web cuando creemos los sitios para nuestras páginas, más adelante.

Unidad 2: HTML básico A continuación vamos a ver los elementos básicos o fundamentales del HTML. Primero veremos la estructura general de las etiquetas, luego la estructura básica de la página, a continuación empezaremos a colocar cosas en la página, primero texto, luego imágenes, 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 equivaldría a <br></br>. La etiqueta <br /> escribe un salto de línea.

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 minúscula, y los valores contenidos entre comillas dobles. Si un atributo tiene más de un valor, se

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

15

escriben todos los valores dentro de las mismas comillas, separados por espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">.

Hasta hace poco, lo más usual a la hora de escribir páginas web era que cada etiqueta tuviera bastantes atributos, que se referían a propiedades del formato o representación de los elementos. La tendencia actual es la de separar el formato del contenido, descartando estos atributos, sustituyéndolos por propiedades de estilo.

Por ejemplo, para escribir la siguiente línea:

Bienvenidos a www.wkc.cl

Antes, sin estilos:

<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial,

MS Sans Serif">Bienvenidos a www.wkc.cl</font></p>

Ahora, con estilos:

<p class="presentacion">Bienvenidos a www.wkc.cl </p>

Como veremos en el siguiente tema, en otro lugar se definen las características del estilo.

2.2. Estructura básica de la página 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 básico de cualquier página web, es el siguiente:

<html>

<head>

...

</head>

<body>

...

</body>

</html>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

16

La etiqueta <head> contiene información sobre la página. Por ejemplo contiene etiquetas que pueden decir de qué va la página, el título que debe de mostrar en la barra del navegador, o código 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 sólo comentaremos que obligatoriamente debe de contener la etiqueta <title></title>, que contiene el título de la página, que es lo que se ve en la barra de título del navegador

En el <body> encontramos el contenido de la página, lo que se ve a través del navegador: texto, imágenes, enlaces, tablas, etc...

En el siguiente ejemplo, puedes ver que hemos modificado el código que utilizamos en la página Primera.htm creada en el tema anterior. En él vemos los elementos que hemos comentado. Hemos añadido la etiqueta <br /> para saltar de línea. Esta es la primera página del sitio que vamos a ir construyendo a lo largo del curso.

<html>

<head>

<title>Floramics. Amigos de las flores</title>

</head>

<body>

<p>Bienvenido a Floramics

<br /> En esta web encontrarás información sobre la

asociación y nuestra colección de fotografías de

flores.</p>

</body>

</html>

2.3. Estructura del texto Ya hemos comentado que todo el texto de la página estará dentro del <body>, que a su vez estará dentro del <html>. El texto dentro del <body>debe estar dentro de párrafos. En HTML, los párrafos se identifican con la etiqueta <p></p>. Dentro de los párrafos

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

17

colocaremos texto e imágenes, y algunas etiquetas que nos permitan dar formato al texto, pero no podemos tener otros párrafos anidados.

A su vez, disponemos de encabezados que nos permiten organizar el texto. Los encabezados van desde el <h1></h1> de mayor tamaño, al <h6></h6>, el más pequeño. Por ejemplo, utilizaríamos un <h1> para poner el rótulo principal de la página, <h2> para los títulos de los apartados, <h3> para los apartados de segundo nivel, etc. El texto de cada apartado iría contenido en párrafos <p></p>.

Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de línea no se muestran como en el código fuente. Si hay varios espacios seguidos, sólo se mostrará uno. Por ejemplo, si en el código fuente escribimos Bienvenido a Floramics se verá Bienvenido a Floramics. Si queremos poner varios espacios seguidos, utilizaremos el código html para el espacio, &nbsp;.

El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios saltos de línea pulsando Intro, estos no se verán. Como ya vimos para crear un salto de línea dentro de un párrafo, utilizamos la etiqueta <br />.

Puedes ver todo esto en el siguiente ejemplo:

<html>

<head>

<title>Floramics. Amigos de las flores</title>

</head>

<body>

<h1>Bienvenido a Floramics</h1>

<h2>Presentación</h2>

<p> En esta web encontrarás información sobre la

asociación y nuestra colección de fotografías de

flores.<br />

Tenemos las fotografías organizadas en diferentes categorías</p>

<h2>Contacto</h2>

<p> Si quieres comunicarte con nosotros

visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</p>

</body>

</html>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

18

Es interesante utilizar encabezados, ya que muchos programas podrán generar tablas de contenido a partir de cómo hayamos estructurado nuestra página.

A la hora de escribir texto, hay más cosas que hemos de tener en cuenta relativas al idioma y a los caracteres especiales, como las letras acentuadas y la ñ. Puedes verlas en esta tabla:

Caracter Representación Caracter Representación

< &lt; € &euro;

> &gt; ç &ccedil;

á &aacute; Ç &Ccedil;

Á &Aacute; ü &uuml;

é &eacute; Ü &Uuml;

É &Eacute; & &amp;

í &iacute; ¿ &iquest;

Í &Iacute; ¡ &iexcl;

ó &oacute; " &quot;

Ó &Oacute; · &middot;

ú &uacute; º &ordm;

Ú &Uacute; ª &ordf;

ñ &ntilde; ¬ &not;

Ñ &Ntilde; © &copy;

Espacio &nbsp; ® &reg;

2.4. Imágenes Uno de los elementos más utilizados en una página web son las imágenes, tanto para mostrar información como parte del propio diseño de la página. Pueden ser fotografías o gráficos creados por programas como Photoshop, Illustrator. etc. Más adelante veremos cómo utilizar dos programas gratuitos de este tipo: Gimp e Inkscape.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

19

Básicamente, en páginas web nos encontramos tres tipos de imágenes: GIF, PNG y JPG. Puedes ver con más detalle cada formato en este básico Básico.

Cuando queremos introducir una imagen, lo hacemos con la etiqueta <img />. Los atributos que como mínimo ha de tener esta etiqueta son los siguientes:

<img src="ubicacion/imagen.gif" alt="texto alternativo" />

Lo primero que debemos de saber es dónde está la imagen, su ubicación, que es lo que debe contener el atributo src:

Si la imagen está en una página Web, basta con saber su ruta, por ejemplo http://www.wkc.cl/logo_ac1.jpg. Esto es lo que se llama una dirección absoluta.

Si la imagen está en el mismo sito que la página web, podemos utilizar una dirección relativa, como imagen.gif o imagenes/imagen.gif.

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 . Además se mostrará el texto contenido en el atributo alt, ya que ésa es su función: mostrar un texto alternativo cuando no se puede mostrar la imagen. Esto es importante para la accesibilidad a la web. Imaginemos que tenemos unas imágenes que hacen de botón para ir a partes de nuestra web, como Inicio o Galería. Si no ponemos el alt, y no se muestran las imágenes, el usuario no podrá navegar por nuestro sitio.

Aunque no son obligatorios, es muy frecuente añadir a la imagen los atributos height (alto) y width (ancho), introduciendo en ellos las dimensiones de la imagen, en píxeles. Al cargar una página, el navegador muestra primero el texto y después las imágenes. Si conoce las dimensiones de cada imagen, puede dejar un hueco reservado para ellas. Si no, pondrá el texto y luego irá desplazándolo para colocar las imágenes, lo que hará incómodo leer la página hasta que no esté totalmente cargada.

Otro atributo frecuente en las imágenes es title. Si lo ponemos en la imagen, al posar el cursor sobre ella se mostrará su valor. En IE, cuando se omite title, se muestra el contenido de alt.

Por ejemplo, para el siguiente código se muestra la siguiente imagen:

<img src="comunes/wkc.gif" alt="wkc" width="91" height="41" title="El logo de

wkc" />

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

20

Los valores de height y width puedes verlos al seleccionar la imagen desde el Explorador de Windows o desde un programa de gráficos. Si cambias esos valores la imagen también cambiará. Si reduces los valores, manteniendo la proporción, la imagen se verá más pequeña, si los aumentas se verá más grande, pero con peor calidad, como puedes ver en el siguiente ejemplo:

<img src="comunes/wkc.gif" alt="wkc" width="126" height="56" title="El logo

de wkc" />

Para aumentar o disminuir una imagen es conveniente utilizar un programa gráfico, ya que estos programas tienen opciones para optimizar el tamaño de las imágenes. En el tema 9 veremos cómo hacerlo con el programa gráfico Gimp.

Vamos a añadir la siguiente imagen a nuestra página de Floramics. La imagen se encuentra en graficos/flor_ejemplo2.jpg

Hemos reducido su tamaño variando los atributos, lo cual no es una buena técnica ya que, aunque se ve bien, se tiene que cargar una imagen grande para luego verla más pequeña.

Este es el código:

<html>

<head>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

21

<title>Floramics. Amigos de las flores</title>

</head>

<body>

<h1>Bienvenido a Floramics</h1>

<h2>Presentación</h2>

<p> En esta web encontrarás información sobre la

asociación y nuestra colección de fotografías de

flores.<br />

Tenemos las fotografías organizadas en diferentes categorías.</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 página de contacto. &nbsp;&nbsp;Te esperamos.</p>

</body>

</html>

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 fácil que una sola imagen ocupe más tamaño que el resto de elementos de la página. Por eso hemos de intentar optimizar al máximo las imágenes, e intentar que "pesen" lo menos posible, es decir que su tamaño en Kb. sea bajo. El sentido común nos dice que cuanto más grande sea la imagen, más ocupa, por lo tanto, hay que procurar usar imágenes lo más pequeñas posibles, siempre que lo que queramos mostrar se vea con suficiente nitidez.

Pero dos imágenes del mismo tamaño pueden tener pesos diferentes, ya que una de ellas puede tener más resolución de la que es necesaria para que se vea bien. Es decir que aparte del tamaño influye la resolución, para optimizar la resolución de las imágenes conviene utilizar un programa gráfico, ya que estos programas tienen opciones para ello. En el tema 10 veremos cómo hacerlo con el programa gráfico GIMP.

2.5. Enlaces Cualquier página web tiene imágenes o texto, que al pulsarlos nos llevan a otra página del mismo sitio, o a una página de un sitio distinto. Esto es un enlace o hiperenlace (en inglés link o hyperlink) también llamado hipertexto o hipervínculo.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

22

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. También es muy frecuente que los enlaces aparezcan subrayados, ya que es la opción por defecto que les asigna el HTML.

En HTML, el enlace se identifica con la etiqueta <a></a>. La forma más básica de un enlace es la siguiente:

<a href="archivo_enlazado">contenido del enlace</a>

El atributo href indica la dirección (URL) a la que se enlaza, que normalmente es un archivo html, por ejemplo http://www.wkc.cl/index.html . El contenido del enlace es lo que el usuario ve en la página 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.wkc.cl">aquí</a>.

se verá así:

Pulsa aquí.

El atributo href puede ser una dirección absoluta, como http://www.worldkey.cl/QuienesSomos/hola.html, o una direccion relativa, como QuienesSomos/hola.html, de la misma forma que vimos para las imágenes.

Es muy común añadir a los enlaces el atributo title, para que muestre información 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.wkc.cl" title="Visita la web de Wkc">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 estándares 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 botón derecho del ratón sobre el enlace, el atributo target se sigue utilizando porque la mayoría de los usuarios pulsan directamente sobre el enlace, sin usar el botón derecho. Así pues si en nuestra página queremos informar sobre la existencia de otra página del mismo tema, colocaremos un enlace a ella y le pondremos el atributo target="_blank" para evitar que el usuario se vaya a esa página y no se acuerde de volver a la nuestra.

Normalmente utilizaremos enlaces para navegar por nuestro sitio. Hemos de evitar enviar al usuario a páginas en las cuales no sepa como volver a la página anterior o como ir a la página principal. Siempre es mejor añadir un enlace volver, que confiar en que el usuario utilice el botón Atrás del navegador. Más adelante, veremos como diseñar un buen sistema de navegación para nuestro sitio web.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

23

Aquí puedes ver un ejemplo con enlaces e imágenes:

<html>

<head>

<title>Floramics. Amigos de las flores</title>

</head>

<body>

<h1>Bienvenido a Floramics</h1>

<h2>Presentación</h2>

<p> En esta web encontrarás información sobre la

asociación y nuestra colección de fotografías de

flores.<br />

Tenemos un índice alfabético con todas las fotografías, o puedes verlas

organizadas en diferentes categorías.</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 página de contacto. &nbsp;&nbsp;Te esperamos.</p>

</body>

</html>

Un enlace también puede llevarnos a una parte concreta dentro de una página. Por ejemplo, si la página es muy larga podemos poner un enlace que nos lleve al principio de la página. En este tema avanzado puedes ver cómo hacer esto y algunas cosas más.

2.6. Divisiones o capas

Una etiqueta muy utilizada es la etiqueta <div></div>. Esta etiqueta forma una caja, un rectángulo, igual que el párrafo. Pero mientras que el párrafo es más común utilizarlo

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

24

para contener texto, en un div podemos colocar lo que queramos, siempre que respetemos la anidación. Esta etiqueta nos resultara muy útil para distribuir los elementos en nuestras páginas.

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. Más 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>Presentación</h2>

<p> En esta web encontrarás información sobre la

asociación y nuestra colección de fotografías de

flores.<br />

Tenemos las fotografías organizadas en diferentes categorías.</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 página de contacto. &nbsp;&nbsp;Te esperamos.</p>

</body>

</html>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

25

Unidad 3:Aspecto de la página. Estilos básicos

Hasta ahora hemos aprendido a utilizar los elementos básicos de HTML para escribir texto, imágenes y enlaces, pero los resultados han sido muy pobres desde el punto de vista estético. A continuación vamos a ver como poner "guapa" nuestra página formateando el texto, con bordes, márgenes y fondos. Veremos un concepto muy importante y potente: el estilo CSS. El aspecto de la página se controla con los estilos CSS.

Por ejemplo, añadiendo estilos CSS a la página de nuestro ejemplo obtenemos este resultado.

3.1. Estilos La forma en que se ven todos los elementos de nuestra página 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 tamaño, la alineación, los márgenes, 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 tamaño 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 tamaño de fuente de 120%, escribiríamos el siguiente estilo:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

26

color:red; font-size:120%

y obtendríamos el siguiente resultado:

Texto rojo a 120% ¿Dónde escribimos el estilo? Hay varias formas de hacerlo, como vamos a ir viendo a lo largo del curso, pero lo más recomendable es agrupar todas las declaraciones de estilos en un solo lugar, definiendo un bloque dentro de la etiqueta Head que contega la definición 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 página, como puedes ver al principio de esta página.

Si queremos que un estilo afecte a todos los elementos de la página, debemos definir un estilo para la etiqueta body. En esta etiqueta se suele definir el color de fondo y los valores genéricos de color y tamaño del tipo de letra. En nuestro ejemplo hemos definido el estilo del body así:

body {font-family: Verdana,Arial,sans-serif;

font-size: 15px;

color: #735846;

text-align: justify;

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 tamaño será 15 pixels, el color será el definido por el valor #735846, la alienación del texto será justificada y el color de fondo de la página será el #3d2e2a.

A continuación vamos a definir el estilo de la etiqueta H1, de la siguiente forma:

h1{ margin-left: 80px;

margin-top: 20px;

font-size: 180%;

color: #d38451;}

Que quiere decir que todas las cabeceras H1 tendrán un margen izquierdo de 80 pixels (si no se pone la unidad, se toman pixels), un margen superior de 20 pixels, un tamaño de letra de 180% y el color #d38451 , como puedes comprobar en la imagen del principio de este punto, la cabecera "Bienvenido a Floramics" queda así:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

27

Es decir, el color y tamaño de este estilo han prevalecido sobre los ya definidos en la etiqueta Body.

Siguiendo con nuestro ejemplo, a continuación 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 continuación para H3 con el valor del color deseado. Es decir, el valor válido es el último valor definido, por esto los estilos se llaman CSS (Cascade Style Sheet. Hojas de estilo en cascada). Más adelante hablaremos más sobre el orden de aplicación de los estilos.

A continuación definimos el estilo de los párrafos (etiqueta p) con un line-height (interlineado) de 1.5em, una identación de 15 pixels y un margen de 35 pixels.

Con lo definido hasta ahora el texto que escribamos en los párrafos tomará las propiedades definidas en los estilos de la etiqueta Body y de la etiqueta p, pero ¿Cómo podemos cambiar el color de una palabra concreta dentro de un párrafo? 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 { font-weight: bold;

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 aplicársela a una palabra basta utilizar la etiqueta span enmarcando la palabra. Por ejempLo, para asignarle la clase azul a la palabra información (que esta dentro de un párrafo), escribiríamos:

<p>En esta web encontrarás <span class="azul">información </span> sobre la

asociación y nuestra colección de fotografías de

flores.</p>

Lo cual, haría que el párrafo se viese así:

Puedes observar que la clase azul ha "añadido" las propiedades color azul y negrita a la palabra información, manteniendo las otras propiedades que ya tenía por pertenecer a un párrafo. Es decir, los estilos van sumando propiedades sin eliminar las que ya se tienen.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

28

Independencia entre el contenido y el formato

Con los estilos CSS conseguimos dar formato a las páginas web de una forma que no existía hasta que aparecieron ellos: separando el formato del contenido. Por un lado tenemos la definición de estilos y por otro lado el propio texto de la página. Este concepto es muy importante porque hace que el trabajo de creación y mantenimiento de una página web sea más 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 también es posible mezclarlo todo. En este curso procuraremos hacerlo bien.

Siguiendo esta forma de hacer las cosas obtendremos páginas web en las que cambiar su aspecto sea algo sencillo, simplemente habrá que modificar un estilo en un solo lugar.

3.2. Formato del texto Hemos visto los fundamentos de los estilos CSS, ahora vamos a entrar en más detalle viendo las posibilidades que ofrecen. Empezaremos con el formato del texto y las propiedades que se le pueden aplicar: color, fuente, tamaño, inclinación, grosor, decoración y mayúsculas/minúsculas.

Color

El color se expresa con la propiedad color. El valor que puede tomar esta propiedad se puede expresar de varias formas:

Un número hexadecimal. Por ejemplo color: #0000FF;,o color: 0x800080;.

Tres números entre 0 y 255. Por ejemplo color: rgb(0, 0, 255);.

Tres números entre 0 y 100. Por ejemplo color: rgb(10%, 20%, 75%);. Un nombre. Algunos colores se pueden expresar con su nombre en inglés. 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 pequeño programa gratuito que puedes descargarte en esta dirección: http://www.iconico.com/colorpic/ . Los mejores editores gráficos también incorporan herramientas en este sentido, más adelante veremos como trabajar con colores con el editor SublimeText

Puedes encontrar más información sobre los colores en los anexos

En el tema 8 volveremos a hablar sobre colores, ampliando algunas cuestiones relativas a la elección de los colores más apropiados.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

29

Fuente

Podemos elegir la fuente (o tipo de letra) a través 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 página no tenga instalada la fuente que queramos. Para evitar esto, existen cinco fuentes genéricas que sí se mostrarán en cualquier equipo: serif, sans-serif,cursive,fantasy, monospace. Esto no quiere decir que sólo 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 genérica.

Por ejemplo, font-family:Georgia, "Times New Roman", Times, serif;.

Igual que ocurría con el color, los editores gráficos ofrecen la posibilidad de elegir diferentes fuentes y previsualizar su forma, más adelante veremos como hacerlo con SublimeText.

Tamaño

El tamaño se regula a través de la propiedad font-size. Podemos utilizar cualquiera de las unidades de tamaño, pero lo más frecuente es utilizar px (pixels), o porcentajes % o em, estas dos últimas son tamaños relativos al tamaño de la fuente del elemento que está por encima. 100% o 1em, sería el mismo tamaño, mientras que 200% o 2em sería el doble y 50% o 0.5em sería la mitad.

Si utilizamos valores relativos, facilitamos que se pueda cambiar de tamaño todo el texto de la página de forma más coherente. Así los discapacitados visuales podrán utilizar el comando para cambiar el tamaño de texto que tienen los navegadores. http://usalo.es/152/botones-para-cambiar-el-tamano-de-letra/

Inclinación

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 inclinación.

oblique. Inclina el texto.

italic. Además de inclinarlo, susituye la fuente por su versión en itálica si está disponible. Aunque la mayoría de los navegadores no lo hacen.

Grosor

Podemos aumentar el grosor de la fuente, lo que equivaldría a ponerla en negrita, utilizando font-weight. Puede tomar los siguientes valores:

normal. El texto no se muestra en negrita.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

30

bold. El texto se muestra en negrita.

Nota. En teoría se pueden expresar distintas intensidades de negrita, pero los navegadores no las muestran.

Decoración

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 ningún tipo de decoración.

underline, el texto aparece subrayado.

overline, el texto aparece sobre rayado.

line-through, el texto aparece tachado.

blink, el texto parpadea. (No funciona en todos los navegadores).

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

31

Mayúsculas y minúsculas

Aunque escribamos el texto en mayúsculas o minúsculas, luego podemos cambiarlo a través 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 mayúsculas. "ES UN TEXTO DE EJEMPLO".

• lowercase, para transformarlo todo a minúsculas. "es un texto de ejemplo". • capitalize, para poner la primera letra de cada palabra en mayúsculas. "Es Un

Texto De EJEMPLO". • none, para no realizar ninguna transformación.

Existe otra propiedad que juega con la mayúsculas, font-variant. Esta propiedad puede hacer que las minúsculas se muestren como mayúsculas de menor tamaño. Vamos a utilizar "Este texto de Ejemplo".

• small-caps, realiza la conversión de las minúsculas. "Este texto de Ejemplo". • normal, no realiza la conversión.

Nota: El consorcio W3C regula las reglas de estilo para crear el estándar. No obstante, en la práctica, hay muchas propiedades que los navegadores no representan, o que sólo 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 más importantes actualmente son:

• Google Chrome • Microsoft Edge (antes Internet Explorer) • Safari • Opera • Mozilla Firefox

Veamos un ejemplo con lo que hemos visto:

<html>

<head>

<title>Estilo del Texto</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</head>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

32

<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 sans-serif</span>, <span

style="font-family:cursive;">

la familia de esta palabra es cursive</span>, <span style="font-

family: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="text-decoration:overline">Este fragmento,

adem&aacute;s sobrerrayado</span>.</p>

<p style="text-transform:lowercase;"><span style="font-

size: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>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

33

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

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, : 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:

Por lo tanto, podríamos definir el borde de un elemento de la siguiente manera:

<p style="border-color:#009933; border-width: 3px; border-

style:double;">bordes</p>

En este caso, podemos resumirlo con el atributo border, siguiendo el formato border: color grosor estilo;, lo que quedaría border:#009933 3px double;. Cada elemento tiene cuatro bordes, que podríamos 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 básico Básico.

3.4. Márgenes Los elementos html tienen dos márgenes. 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 límite, independientemente de que el borde sea visible o no.

El margen externo se regula con la propiedad margin. El margen exterior es la distancia mínima que habrá entre el borde exterior del elemento y el elemento siguiente, por cada uno de sus cuatros lados.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

34

Los márgenes no se suman, se solapan, prevaleciendo el mayor. Así, si un párrafo 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 márgenes 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.

El padding si que forma parte del elemento, por eso muestra el mismo fondo.

Por defecto, la mayoría 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>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

35

<head>

<title>Bordes y m&aacute;rgenes</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</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>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

36

</html>

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;.

También podemos utilizar una imagen, con la propiedad background: url(graficos/fondo.png);. En url() introducimos la dirección 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 no-repeat 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. También podemos introducir medidas, donde el primer valor se refiere a la posición horizontal y el segundo al vertical, por ejemplo background-position: 50% 50%;.

<html>

<head>

<title>Bordes y m&aacute;rgenes</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</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>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

37

3.6. Cómo 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 página. Por ejemplo, imaginemos una página con 20 párrafos. Sería 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 declaración, siguiendo el formato selector {bloque de declaración;}.

• El selector identifica al elemento al que se le aplica el estilo. Puede hacerlo de las siguientes maneras:

o Si queremos formatear todas las apariciones de una etiqueta, utilizamos la etiqueta como selector. Por ejemplo, body o p.

o 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 genérica, y el estilo afectará a todos los elementos, sean del tipo que sean, que tengan esa clase. También podemos especificar cómo 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 más añadirles el atributo class con el nombre de la clase deseada. Por ejemplo <p class="resaltado">.

o 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.

o También podemos anidar selectores, separándolos por espacios. En este caso, el estilo sólo afectará a los elementos contenidos en el selector que haya más a la izquierda. Por ejemplo, el selector p.resaltado span sólo afectara a las etiquetas span que estén dentro de algún párrafo (p) que tenga la clase resaltado (class="resaltado").

o 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 declaración, es la relación de cada propiedad del estilo con el valor que toma. Es decir, contendrá lo que colocaríamos en la etiqueta style del propio elemento. El bloque de declaración lo colocaremos detrás del selector, encerrado entre llaves { }. Lo normal es formatearlo para que nos sea fácil de

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

38

leer. Para ello podemos utilizar saltos de línea, espacios o tabulaciones, ya que son ignorados. Una forma común de formatear el estilo, es como vemos en el siguiente ejemplo:

p {

color: blue;

background-color: #F7F0E2;

font-style: oblique;

}

3.7. Dónde declarar un estilo En casos muy puntuales y concretos, declararemos el estilo incrustado al elemento o en línea, utilizando el atributo style. Por ejemplo, en un determinado párrafo al que queremos aumentar un poco el margen porque queda mejor. Nos será más sencillo recordar que el estilo está en el elemento, que crear una clase que no nos serviría de nada si borramos el elemento. De todas formas, aquí no declararemos todo el estilo, solo los atributos que sean distintos al resto de elementos del mismo tipo.

Si sólo tenemos una página, 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 declaración.

Pero los más habitual es tener varias páginas. En este caso resulta muy útil tener los estilos definidos en una hoja independiente, una hoja de estilos. Una hoja de estilos no es más que un archivo de texto, pero con la extensión .css, donde aparecen definidos los estilos que utilizarán las páginas. Para que funcione, debemos de enlazar con la hoja de estilo, para lo que utilizaremos la siguiente etiqueta en el <head> de nuestras páginas:

<link href="hoja_de_estilo.css" rel="stylesheet" type="text/css" />

• href indica la ubicación de la hoja de estilo, tal como lo pondríamos en un enlace.

• rel se refiere a la relación del archivo con nuestra página. Al poner stylesheet le indicamos que se trata de una hoja de estilo. Por ejemplo, podríamos poner alternate stylesheet lo que indicaría que se trata de una hoja de estilo alternativa. Algunos navegadores como Firefox, nos permiten elegir entre la hoja normal o la alternativa a través del menú Ver → Estilo de página.

Puedes practicar algunas de las cosas que hemos visto con el ejercicio paso a paso Aplicar estilos sencillos.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

39

3.8. Orden de aplicación de los estilos CSS Entonces, si definimos en varios sitios el estilo para un elemento ¿cuál 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 más concreto sobre el más genérico. Por ejemplo, si en la hoja de estilo establecemos el texto de los párrafos en rojo, y en la cabecera de la página definimos el color de los párrafos en azul, prevalecerá éste último, ya que es más concreto, se refiere sólo a los párrafos de esa página. Y si en un párrafo de la página, en el atributo style indicamos el color de texto verde, prevalecerá éste por ser el más concreto de todos.

Lo mismo ocurre con los selectores. Por ejemplo, p.inicio es más concreto que p, ya que se refiere sólo a los párrafos con esa clase. Y p#titulo sería aún más concreto, ya que se refiere directamente a un determinado párrafo. Lo mismo ocurre al anidar los selectores, p.inicio span es más concreto que poner sólo 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;} sería como poner p {margin: 20px 20px 5px;}.

En cualquier momento podemos saltarnos el orden de prioridad de los estilos, añadiendo !important al final de una propiedad. Esto hace que tenga preferencia sobre el resto. Por ejemplo, en este ejemplo:

p { color: blue !important;

color: red;

}

El párrafo debería 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 tendrán este color para el texto, a no ser que indiquemos otra cosa.

La mejor forma de entender todo esto, es probando un ejemplo:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

40

<title>Estilos</title>

<style type="text/css">

body {

font-family:sans-serif;

background-color: lightyellow;

}

h1 {

border-bottom: #FFCC66 5px solid;

text-align: center;

}

p {

color:#660000;

border: #FF9933 10px solid;

border-width: 0 0 2px 2px;

}

p.derecha {

text-align: right;

border-width: 0 2px 2px 0;

}

#Pepe {

color: red;

border-width: 0;

}

.destacado {

color: white;

background-color: red;

}

p.destacado span.destacado {

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

41

color: red;

background-color: white;

}

</style>

</head>

<body>

<h1>Estilos</h1>

<p>Los estilos simplifican el dise&ntilde;o de una p&aacute;gina.</p>

<p class="derecha">Podemos definirlos en el propio <span

class="destacado">elemento</span>.</p>

<p>Definirlos en la <span class="destacado">cabecera</span>.</p>

<p class="derecha">O utilizar una <span class="destacado">hoja de

estilo</span>.</p>

<p>&nbsp;</p>

<p id="Pepe">Este es el p&aacute;rrafo Pepe, con su propio estilo.</p>

<p class="destacado">Este es un p&aacute;rafo de la clase <span

class="destacado">destacado</span>.</p>

<p class="destacado" style="background-color: orange">&Eacute;ste,

tambi&eacute;n es destacado,

pero con style=&quot;background-color: orange&quot;.</p>

</body>

</html>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

42

Ejercicios de Práctica

Utilizando el bloc de notas, SublimeText, u otro programa similar, crea una página aplicándole los estilos necesarios para que se vea como la imagen.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

43

Unidad 4: Editor Web Quizá estés un poco cansado de escribir etiquetas HTML, si es así en este tema vamos a explicar cómo ahorrarte ese trabajo. Un editor web también ayuda en otros muchos aspectos de la creación de páginas web.

4.1. ¿Qué es un editor Web? Un editor Web sería cualquier aplicación que nos permita crear, editar y guardar una página Web. Como ya hemos visto, una página no es más que un archivo de texto, por lo que cualquier programa que nos permita editar texto, puede funcionar como un editor Web.

Podemos considerar tres categorías de editores Web:

Editores de texto

Nos permiten editar el código 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 más avanzadas. Como mostrar las etiquetas de colores, o cerrarlas automáticamente.

Editores WYSIWYG

Por un lado, nos permiten editar el código fuente como los editores de HTML. Y por otro, nos permiten trabajar en vista de diseño. Es decir, ver la página como se vería en un navegador mientras la editamos. La mayoría de estos editores suelen tener opciones para realizar tareas adicionales de forma más fácil, como por ejemplo, crear elementos de un formulario, insertar menús, e incluso código JavaScript tipo AJAX ( más adelante veremos de qué se trata). Editores de este tipo pueden ser Dreamweaver.

Escribir directamente el código fuente nos da un mayor control sobre la página, obteniendo un código más preciso y sin etiquetas innecesarias. Pero el tener que escribir cada etiqueta hace que sea mucho más lento y que debamos conocer mejor el HTML.

Utilizar editores WYSIWYG resulta más cómodo. Ya que no hemos de preocuparnos por la mayoría de las etiquetas, y escribimos el texto como lo haríamos en un procesador de texto. No obstante, no siempre se generará el código que queramos. Y sobre todo si utilizamos editores no especializados, como Word que permite guardar como página web, aunque generando un código muy "sucio". Por ejemplo, crear un html con Word en el que sólo ponga "Hola mundo", con letra Arial y tamaño 16px, genera un archivo de 22KB y 400 líneas de código.

Lo habitual es realizar el grueso de la página en vista de diseño, sobre todo escribir el texto. Y después, cosas más concretas y correcciones, realizarlas sobre el código fuente. Esto también depende de los conocimientos de cada uno.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

44

Nota: Aunque en un editor WYSIWYG podemos ver cómo quedará la página, siempre hemos de probarla en los navegadores más utilizados, en este momento Internet Explorer y Mozilla Firefox.

Para realizar este curso, te recomendamos que no pierdas de vista el código fuente, e intentes trabajar directamente con él la mayoría de las veces, sobre todo al hacer cosas nuevas. Puede que vayas un poco más despacio al principio, pero aprenderás mucho mejor el HTML, y después no tendrás problema para utilizar cualquier editor.

4.2. Elegir un editor Existe un gran número de editores Web, unos más completos que otros, con más o menos opciones y con más o menos fallos.

Y como al elegir cualquier programa, lo primero es optar por una solución gratuita o de pago. Para realizar nuestra página 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 mayoría de desarrolladores profesionales. Pero se trata de un editor de pago, aunque es cierto que podemos probarlo gratuitamente durante 30 días. En cuanto a opciones gratuitas, podemos encontrar, entre otros, Bluefish, más enfocado a programadores; Amaya, desarrollado por el consorcio W3C; KompoZer o Notepad++. Nos hemos quedado con este último por ser bastante simple e intuitivo.

Podemos descargarlo desde su Sitio oficial, el cual es gratuito.

4.3 Entorno de Notepad++ Este apartado lo explicaremos a través del video tutorial “Interfaz de Notepadd ++”

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

45

Unidad 5: Preparar nuestro sitio 5.1. ¿Qué es un sitio web? Un sitio web o website, es un conjunto de páginas web, más o menos extenso, agrupadas bajo un dominio, como puede ser www.wkc.cl o www.emol.cl.

Lo normal, es que el sitio web parta desde una página inicial, o home, desde la que podemos acceder, de forma jerárquica a todo el contenido del sitio, a través 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 páginas del sitio, puede estar escrito directamente en HTML. Esto genera un sitio estático, que sólo recibe actualizaciones de vez en cuando, ya que hay que hacerlas manualmente sobre el código.

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, información global, etc. Esto origina sitios dinámicos, ya que los cambios se producen frecuentemente y son generados desde la propia página. Por ejemplo, una página que muestra la fecha del día actual sería un contenido dinámico. Otro ejemplo sería un foro.

5.2. La temática 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 página 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 creándonos una cuenta en una de las numerosas redes sociales.

El tema también debe de ser concreto. Si dominamos la informática y la jardinería, no resultará serio si creamos un sitio en el que encontremos las dos cosas. Es mejor crear un sitio independiente para cada una.

No sólo debemos de elegir un tema que resulte atractivo para un grupo de usuarios, si no que debemos de tener información sobre él. No tiene demasiado sentido crear un sitio para escribir un sólo artículo de media página.

El tema elegido determinará el diseño de la página. No es lo mismo si pensamos mostrar fotos de animales para los amantes de las mascotas, una web para niños, una empresa de informática, etc.

Una vez elegido la temática, debemos de distinguir cuales son las categorías en las que vamos a dividir nuestro sitio. Estas serán más genéricas o menos, dependiendo del tamaño del sitio.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

46

En nuestro ejemplo vamos a crear la web de una asociación de aficionados a las flores. Principalmente, a esta ficticia asociación le interesa exponer sus fotografías de flores en la web, pero también crearemos las páginas que den a conocer la asociación y que permitan ponerse en contacto con ella.

5.3. Organizar los archivos El sitio web se encuentra alojado en un servidor, que no es más 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 raíz 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 ¿cómo organizamos los archivos del sitio? No existe una regla exacta, ya que depende de muchos factores: número de páginas, cómo queremos navegar entre ellas, cómo se organiza el contenido, etc.

Pero por lo general, y sin entrar en mucha teoría, tendremos en cuenta una serie de cosas:

En la raíz del sitio, tendremos como mínimo la página 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 imágenes que forman parte del diseño de la página. Si a parte tenemos fotografías de una galería, o de productos, es mejor ponerlas en otra carpeta, ya que no tienen relación con el diseño. Otra carpeta para los archivos javascript, etc.

Si tenemos secciones claramente definidas, podemos guardar sus páginas en subcarpetas. Recuerda que es conveniente incluir en cada carpeta que contenga páginas htm, un archivo index.html, más 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 más 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 páginas del mismo tipo en las que es muy importante el orden, como páginas de un manual.

Es conveniente planificar cómo va a ser el sitio, y partir de las carpetas iniciales. Lógicamente, 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 pequeño, de menos de 10 páginas.

Primero crearemos el sitio en nuestro equipo, y cuando lo acabemos ya los subiremos a un servidor Web.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

47

Comenzamos por crear la carpeta raíz. 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 páginas, entre las que incluimos un index. También tendremos una hoja de estilo, e imágenes del diseño de la página, como logos, imágenes para el fondo, etc. Por lo que será mejor si agrupamos estas imágenes en una carpeta, que podemos llamar imagenes (omitimos el acento porque no conviene incluir caracteres especiales en los nombres de archivos y carpetas). Si más adelante tenemos otros elementos, como archivos javascript, archivos para descargar, etc, ya nos preocuparemos por crear más carpetas para ellos.

Vamos a echar un vistazo a las secciones que queremos crear:

• Una sección sobre las flores, con fotografías. • Una página sobre la asociación. • Un formulario de contacto. • Una página con noticias sobre el tema.

A excepción de la sección de flores, las otras serán páginas simples, que podemos dejar en la carpeta raíz.

Pensemos en la sección de flores. Queremos mostrar una amplia galería de fotografías. Para que el visitante pueda encontrar una flor en concreto, es importante que las clasifiquemos. Por eso crearemos in índice alfabético con las flores. En otra página, mostraremos las fotos de las flores. Como no conviene crear una página muy grande, con muchas fotografías, la dividiremos en las distintas categorías, que en principio serán cuatro.

En resumen, para la sección de flores, necesitamos 5 páginas y fotografías, que estarán 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 imágenes del diseño. De todas formas, como el fin de este curso es didáctico, vamos a crear una subcarpeta para esta sección, a la que llamaremos flores, para aprender así a manejarlas.

Por lo tanto, la estructura de archivos que planteamos para nuestro sitio quedaría así:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

48

Comenzaremos por crear las carpetas, y si ya tenemos las imágenes, guardarlas en ellas. Las páginas y hoja de estilos, las iremos creando cuando nos hagan falta.

5.4. Navegación Antes de comenzar a definir la navegación, debemos de tener una idea de cómo va a ser el sitio web, es decir, debemos tener una idea formada de la estructura y extensión del sitio. Así podremos decidir qué sistema de navegación es el más adecuado.

Si construimos un sitio sobre la marcha, sin planificación, según vaya creciendo, se irá complicando la navegación y al final no nos quedará más remedio que hacer modificaciones que resultarán más costosas que haberlo pensado un poco mejor con anterioridad.

Existe una regla que dice que un usuario no debería de necesitar más de tres clics para llegar a la página que busca. Por eso lo primero que hemos de pensar es en facilitar a navegación.

El usuario debe de ser capaz de moverse de forma intuitiva por nuestro sitio sin perderse, para ello:

• Debe de saber dónde está. Debemos de dejarle claro en qué parte del sitio se encuentra. Para esto es muy útil el título de la página y utilizar un encabezado que identifique la sección. También debe de distinguir si sigue en nuestro sitio, o si ha pulsado un enlace que le lleve a un sitio distinto.

• Debe de saber dónde ha estado. Debemos de evitar que el usuario pase una y otra vez por la misma página para buscar algo. Por ejemplo, distinguiendo los enlaces ya visitados.

• Debe de saber dónde puede ir. Una página web se basa en enlaces, y estos deben de ser claramente identificables. Además, no deben de ofrecer dudas de a dónde llevan, por ejemplo con nombres de páginas entendibles, que se muestran en la barra de estado, o con textos de información emergentes.

• Debe de poder seguir navegando. No le enviaremos a una página sin enlaces, desde la que no pueda continuar recorriendo el sitio. Piensa que puede acceder

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

49

directamente a esa página, por ejemplo a través de un buscador, por lo que no podría utilizar ni el botón Atrás del navegador.

La forma de navegar por nuestro sitio, debe de ser constante. Así, con visitar unas pocas páginas aprenderá a moverse por nuestro sitio, y le resultará más cómodo.

La forma más habitual de solucionar todo esto es utilizar un menú, que se mostrará en todas las páginas.

5.5. Estructura del menú El uso de menús es muy habitual en las páginas web. Un menú no es más 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 página, 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 páginas, y no sería útil hacer buscar al usuario entre cincuenta enlaces.

• Normalmente, aparecerán las secciones de nuestro sitio web. Y por ejemplo, podemos utilizar diversos métodos para que el usuario pueda expandir cada sección y ver enlaces a los apartados de la sección, o utilizar menús desplegables. También podemos mostrar los enlaces a las distintas partes de la sección en que se encuentra el usuario, ya que si está en esa sección 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 dónde 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 páginas.

En lo que se refiere al código, el menú suele tener estos elementos:

• Los menús se suelen basar en listas <ul></ul>. Dentro de cada elemento de la lista, colocaremos un enlace.

• El aspecto del menú se consigue por CSS. • Suelen tener código JavaScript, por ejemplo para mostrarlo, producir efectos

más o menos avanzados, o en vez de los enlaces.s

Por lo tanto, comenzaremos creando nuestro menú como una lista, a la que más adelante le iremos dando estilo hasta convertirla en un atractivo elemento de navegación

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

50

5.6. Estructura de la página En nuestro ejemplo, como norma general todas las páginas mantendrán la misma estructura. Por ejemplo, tendrán el mismo logo o título, el sistema de navegación en la misma posición, el mismo pie, etc. Sólo iremos cambiando el contenido.

Una excepción a esto puede ser la página de inicio. Pensemos que esta página es la presentación 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 extraño que tenga más enlaces que el resto de páginas. Esto, como siempre, dependerá del tamaño del sitio.

Pero pensando en el resto de páginas, no es una mala idea comenzar creando una página base, con esos elementos comunes que podamos utilizar a modo de plantilla.

Vamos a ver qué elementos necesitamos en nuestro ejemplo:

• Un título, para lo que podemos utilizar un encabezado h1. En el se mostrará el nombre de la asociación, Floramics.

• Un menú. En este caso pondremos un enlace a las siguientes secciones: o Inicio (index.html) o Flores (flores/index.html) o Nosotros (nosotros.html) o Contacto (contacto.html) o Noticias (noticias.html)

Como son sólo cinco elementos, vamos a ponerlo en la parte superior, ya que en un lateral desperdiciaríamos espacio.

• Un área para el contenido. Cambiará en cada página, pero tendrá un título para la sección.

• El pie, por ejemplo para poner el copyright de la página. Podemos utilizar un elemento de bloque como un párrafo o un div. También existe una etiqueta específica, <address> utilizada para contener información sobre el autor de la página.

Para que nos quede mejor estructurada la página, vamos a utilizar divisiones en las tres secciones diferenciadas:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

51

De esta manera, entre páginas prácticamente sólo cambiaremos el contenido.

Con esta estructura en mente, vamos a escribir el código:

Creamos una nueva página, 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 asociación. También una <ul>, con un elemento y un enlace para cada una de las secciones.

• La división central la dejamos en blanco, ya que será la que iremos cambiando. • En la tercera división, 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 página como base.html.

• La página tiene pocos elementos, y te recomendamos que intentes hacerla escribiendo directamente el código fuente. De todas formas, puedes seguir este ejercicio paso a paso para realizar la página con Notepad++, y comprobar el código generado.

Páginas Base Desarrolla un código similar al siguiente:

<!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>Floramics</title>

<link rel="stylesheet" href="estilo.css"

type="text/css" />

</head>

<body>

<div>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

52

<h1>Floramics</h1>

<ul>

<li><a href="index.html">Inicio</a></li>

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

<li><a href="nosotros.html">Nosotros</a></li>

<li><a href="contacto.html">Contacto</a></li>

<li><a href="noticias.html">Noticias</a></li>

</ul>

</div>

<div>

<h2>T&iacute;tulo</h2>

<p>Aqu&iacute; ir&aacute; el texto</p>

</div>

<div>&copy; Todos los derechos reservados</div>

</body>

</html>

5.7. Páginas básicas Partiendo de la página que hemos creado, vamos a crear un par de páginas sencillas. La idea es tener páginas con algunos elementos, como texto, para poder comenzar con el diseño.

Otra opción podrá ser crear la páginas con un texto de prueba. En este caso, como ya sabemos lo que queremos poner podemos adelantar trabajo.

Como básicamente se trata de introducir texto, lo haremos mucho más rápido utilizando el editor de Notepad++.

• Vamos a comenzar por la página index.html.

Como tenemos una página 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 página con la misma estructura que la página base. Sólo nos queda cambiar el contenido de la división central.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

53

Comenzamos por el título de la sección. Como estamos en la página 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 página inicial, vamos describir brevemente qué puede encontrar el usuario en nuestra página. Recuerda que la idea principal es que los usuarios visiten nuestra galería de fotos, que pensábamos dividir en cuatro categorías. Por lo que sería una buena idea poner enlaces directamente a esas categorías, así remarcamos que es el contenido principal del sitio. De momento, crearemos el enlace, utilizando una lista como con el menú. Como aún no sabemos que categorías tendremos, vamos a dejar el enlace provisional, enlazando sólo con # (<a href="#">Enlace</a>).

• La otra página que vamos a crear es nosotros.html. En ella hablaremos un poco de nuestra asociación.

Como antes, partimos del archivo base.html, que guardaremos como nosotros.html, y cambiaremos el contenido:

Una vez editado el contenido, guarda la página.

Ahora ya puedes probar los enlaces del menú, para ir de inicio a nosotros y viceversa.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

54

Unidad 6: Diseño y Usabilidad El contenido de una página web es lo más importante, sin embargo, un buen contenido con un mal diseño no es una buena página web. Tampoco sirve de nada un buen diseño con un mal contenido.

Suponemos que el buen contenido lo pones tú, nosotros vamos a intentar darte unas orientaciones para conseguir un buen diseño.

6.1. Un buen diseño El cómo presentamos la información es muy importante para un sitio web. Y esto lo conseguimos con un buen diseño.

Pero ¿qué es un buen diseño web? Bueno, este punto puede dar para mucho, pero vamos a intentar transmitir unas pocas ideas básicas:

Comodidad para el visitante. Le debe de resultar cómodo navegar por el sitio, y también debe de poder captar la información (texto, imágenes, flash, vídeos...). Por eso es importante un buen sistema de navegación, y presentar el contenido de forma clara y espaciada.

Comodidad para el autor. Cuanto más fácil nos resulte realizar modificaciones, mejor. Por eso separaremos el contenido del diseño, utilizando hojas de estilo.

Accesibilidad. Cuanta más gente pueda ver nuestro sitio mejor. Pensemos en cómo accede el visitante. En el aspecto técnico, el sitio debería de seguir los estándares, para facilitar la compatibilidad con navegadores antiguos, u otros dispositivos, como teléfonos móviles. También es importante un diseño que soporte las pantallas pequeñas, pero que aproveche las pantallas de gran tamaño, cada vez más frecuentes. Además, hacerlo legible y poner textos descriptivos a las imágenes puede facilitar el uso para visitantes con problemas visuales.

Usabilidad. Por otra parte, pensemos en quién es el visitante. No es lo mismo si se dirige a niños, adultos, personas mayores o a todo el mundo. En cualquier caso, nuestro sitio debe de ser fácil de usar.

Transmitir. El diseño debe de transmitir lo que el usuario puede esperar de él. Por ejemplo, de un banco esperamos seriedad, por lo que un diseño informal puede ser contraproducente.

Bonito y original. El diseño debe de ser agradable, combinar bien colores, organización de los elementos, etc. Y cuanto más original sea, más lo será nuestro sitio.

Simple. Cuanto más simple sea el diseño, más se facilitarán 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 diseño más original implicará utilizar más elementos, y

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

55

que todos aparezcan correctamente ordenados, lo que lo hará más complejo. Y al final un buen diseño depende de la temática de la página y de lo que queramos transmitir con ella.

6.2. Colores La elección de colores apropiados es una de las cosas que más influyen en el aspecto del sitio.

Lo habitual es utilizar una gama de colores armónicos, 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 diseño de páginas 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 página web. Existen muchas herramientas gratuitas de este tipo. Nosotros hemos utilizado ColorPic.

Un buen ejercicio sería que intentases capturar la paleta del sitio que queremos crear utilizando ColorPic. Captura sólo el color de los elementos HTML, no los colores que forman parte de las imágenes.

Esta es la paleta que hemos utilizado para nuestro ejemplo:

6.3. El texto Al comenzar a aplicar estilos al sitio, comenzaremos por lo más general e iremos hasta lo más concreto. Y lo más genérico es el estilo del texto.

La mayoría 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 cómo queda en el navegador, con las páginas que tenemos hasta ahora.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

56

• Tipo de fuente. Ya comentamos al hablar del estilo básico del texto que con la propiedad font-family nos permitía asignar una o varias fuentes al texto. Debemos de escoger una fuente que se lea fácilmente, y que sea común, 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 resolución en los monitores se leen mejor las fuentes sin serifa, como Verdana, Arial, o la genérica sans-serif.

En nuestro ejemplo, vamos a utilizar la fuente Verdana. Aunque es común, puede que el navegador no la tenga. En ese caso, indicaremos que utilice Arial, muy parecida y más común. Y si tampoco la tiene, que utilice la fuente sin serifa genérica 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;.

• Tamaño de la fuente. Con el tipo de fuente ya seleccionado, ya que hay fuentes más pequeñas que otras, podemos elegir el tamaño. Es obvio que un tamaño muy pequeño dificultará la lectura. Tampoco utilizaremos una fuente excesivamente grande para el texto. Lo normal son 12px para arriba, siempre que el diseño lo permita. Las recomendaciones en cuanto a usabilidad aconsejan expresar estos tamaños como relativos, utilizando em o %. Si no al body, al resto de elementos. Esto permite que después, con sólo cambiar el tamaño de la fuente del body, cambie proporcionalmente el de todos los elementos, y no resulta difícil permitir que el visitante adapte esto a su gusto.

En nuestro ejemplo, hemos optado por darle a la fuente en general un tamaño de 15px, añadiendo al selector body la propiedad font-size:15px;. También hemos controlado el tamaño de los títulos, esta vez con valores porcentuales, definiendo los estilos h1 {font-size: 180%;} y h2 {font-size: 150%;}. También tendrá un tamaño distinto el pie de la página. 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.

• 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 más cómodo 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

Además, debemos de seguir cierta armonía, ya que hay colores que al combinarlos pueden resultar demasiado intensos o casi molestos, sobre todo en textos amplios.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

57

Al final, elegir un color u otro acaba siendo una cuestión 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 añadimos al body la propiedad color: #735846;. Para los encabezados, vamos a elegir un color un poco más llamativo, que tenga más energía. Nos decantamos por un marrón anaranjado de la paleta, #D38451. Por tanto, añadimos 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 separación (margin o padding) entre el texto y otros elementos, como imágenes, y entre párrafos. Tampoco deben de estar muy pegadas las líneas del párrafo. 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 líneas de los párrafos. Definimos un nuevo selector, p, y le aplicamos la propiedad line-height: 1.5em;, utilizando valores relativos al tamaño del texto.

• Alineación. 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 párrafos con poco texto, como el pie, suele quedar mejor centrado (text-align: center;). Cuando hay mucho texto, suele haber muchos saltos de línea, 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 añadiremos 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;

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

58

}

h1 {

font-size: 180%;

color: #d38451;

}

p {

line-height: 1.5em;

}

div.pie {

font-size: 80%;

text-align: center;

}

6.4. Fondo Ya hemos comentado que el fondo del texto debe de tener un buen contraste. Así que las zonas de nuestra página destinadas a contener texto tendrán un fondo normalmente de un color, evitando utilizar imágenes que puedan dificultar la lectura.

Pero es habitual que las páginas no ocupen todo el contenido, dejando márgenes laterales. Por ejemplo, pensemos en una página 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 común utilizar imágenes. Si decidimos utilizarlas, debemos de elegir una imagen que no resulte demasiado llamativa, para que no desvíe la atención del contenido de la página.

En nuestro ejemplo, vamos a utilizar dos fondos. Uno para el texto, para el contenido de la página general. Escogemos el color más claro de nuestra paleta, #F5E4CC. En contraste, utilizaremos un fondo oscuro para la página. Hemos escogido el tono más oscuro de la paleta #3D2E2A.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

59

Por lo tanto, desde el editor de CSS de Notepad++, añadimos al selector body el color para el fondo (background-color: #3D2E2A;).

Como el contenido ya lo tenemos en una división, lo que vamos a hacer es darle una clase, que vamos a llamar contenido. En Notepad++,, creamos una nueva regla de estilo, para el selector div.contenido. Le daremos el color de fondo más claro (background-color:#F5E4CC;), y un poco de margen para que se muestre el color (margin: 20px;) oscuro del fondo. También 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: 20px;

padding: 20px;

background-color: #f5e4cc;

}

Al final, el sitio nos habrá quedado como podemos ver en la imagen:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

60

Unidad 7: Maquetación web 7.1. Maquetar una página web La maquetación es la distribución de los elementos en nuestra página. Piensa en una página web cualquiera. Seguro que distingues algunos elementos, como encabezados, columnas, menús laterales, etc.

Hace unos años, la maquetación de las páginas web se realizaba utilizando tablas (<table>). Una vez entendido este proceso podía resultar sencillo, aunque si no se dominaban las tablas, podía convertirse en algo tedioso. El problema de las tablas es que generaban un página muy encorsetada, y el código se volvía complejo de entender. Además, algunos buscadores encontraban problemas al analizar la estructura de la página.

Actualmente, la maquetación con tablas ha caído en desuso, y se realiza utilizando capas (<div>), también llamadas divisiones o contenedores. La colocación de las capas en la página se realiza a través de CSS. Esto permite, por ejemplo, que podamos pasar de un diseño con un menú lateral a otro con el menú en la parte superior, sólo cambiando la hoja de estilos.

En esta unidad veremos las técnicas de maquetación más comunes, aunque hay que decir que existen diversas formas de conseguir una misma maquetación.

Las capas pueden estar anidadas unas dentro de otra. Básicamente, lo que haremos será definir cómo se posiciona en la página, su colocación y su tamaño.

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. Tamaño Por lo general, la maquetación se realiza sobre elementos en bloque. Normalmente divisiones, pero también lo podemos hacer con párrafos, 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.

Lados y tamaño

Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamaño: ancho (width) y alto (height).

Los valores para estas medidas, pueden ser expresados en las medidas habituales:

• Tamaños absolutos, utilizando px, cm, etc... • Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%). • Tamaños relativos a la fuente, utilizando em.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

61

• El valor auto es el valor por defecto. Por ejemplo, un párrafo, por defecto, tienen un ancho del 100% y un alto ajustado al contenido.

Por ejemplo, hemos definido el tamaño para el siguiente párrafo:

<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 dándole al margen (margin) derecho e izquierdo el valor auto.

<p style="width:200px; height:100px; border: red 2px solid; margin: auto;">

Con sólo esto, podríamos maquetar una página 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;

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

62

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

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

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

63

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

7.3. Desbordamiento Al utilizar un elemento de bloque, como una capa, un párrafo, el body, etc... el tamaño depende del contenido. Pero al definir un tamaño fijo nos puede surgir un problema: ¿qué pasa si el contenido del elemento (texto, imágenes, 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 opción por omisión. El contenido sale de elemento, y puede que se solape con los elementos que haya a continuación.

• 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.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

64

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 continuación de otro. Si se trata de elementos de bloque, como capas, párrafos, listas, etc, se irán colocando uno debajo del otro. A este posicionamiento se le denomina estático.

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 posición normal.

A partir de ahí, podemos desplazar el elemento, permaneciendo el hueco de su posición original.

• absolute. Con el posicionamiento absoluto, especificamos la posición del elemento con respecto al elemento que lo contiene.

• fixed. Se establece la posición 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 fácil 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 numérico. 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.

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

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

65

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, podríamos 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 posición, por eso es muy común asignar el posicionamiento relativo a elementos para poder utilizar una propiedad que requiere posicionamiento, como puede ser z-index.

7.6. Posicionamiento absoluto Al utilizar el posicionamiento absoluto indicamos de forma precisa la posición del elemento en la página.

Al contrario que con el posicionamiento relativo, el elemento al que le hemos asignado un posicionamiento absoluto no deja un hueco en la página. 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 posición y tamaño del elemento se indica siempre en relación a otro elemento que lo contiene. El elemento contenedor será el más cercano que haya con posicionamiento no estático. Si no hay ninguno, se utilizará el body.

Para definir la posición 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

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

66

elemento, todas las cajas tienen position: absolute; witdth: 60px; height: 60px y un borde. Para cada una hemos cambiado la posición. Además, a la caja que contiene a todas, le hemos dado position: relative; para que las cajas de dentro tomen su posición a partir de ella.

Utilizando este posicionamiento, obtenemos gran flexibilidad para maquetar nuestra página. Por ejemplo, podemos dividir la página en dos (o más) columnas. Utilizaremos dos capas, con un alto al 100%, y que la suma de sus anchos sea el total de la página. 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 originaría dos columnas, cada una con un ancho de la mitad del de la página (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

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

67

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 posición de los dos lados, en vez de un lado y el ancho.

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 página 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>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

68

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

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

69

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

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

70

<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

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

71

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, podríamos subdividir una de las capas en otras dos dentro de ella, utilizando el mismo sistema.

Otro elemento muy utilizado en la maquetación, es el encabezado y el pie. Observa que en los ejemplos que hemos visto, colocábamos 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 separación 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 más 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:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

72

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;

}

Los principales inconvenientes del posicionamiento absoluto es que hemos de definir el tamaño del elemento, no se ajusta al contenido, y no se crean huecos en la página, por eso no podemos utilizarlo para cualquier cosa.

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:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

73

• 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 dirección indicada, hasta encontrar el límite del elemento contenedor, u otro elemento también flotante. Además hace que todos los elementos fluyan alrededor de él.

Es muy común utilizarlo en imágenes, para que el texto fluya alrededor de ellas. En el siguiente ejemplo, todas las cajas contienen un párrafo con una imagen al principio (<p><img /> Texto</p>). Sólo cambia el float de la imagen.

Observa que el texto puede quedar demasiado pegado a la imagen. Para solucionarlo, no hay más que aplicar un pequeño 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 tamaño a lo alto. Por ejemplo, el siguiente párrafo tiene un borde, y vemos que si la imagen es flotante, "se sale".

Además, si por ejemplo hay varios párrafos con elementos flotantes al mismo lado, hace que se "amontonen":

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

74

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 párrafo le hemos dado la propiedad de estilo clear: right;.

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 pequeño margen para que no se peguen. Observa cómo se comportan cuando cambias el tamaño de la ventana:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

75

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 harán 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 tamaños de ventana no cabe, por lo que mostrará una columna debajo de la otra, aunque esto sólo 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:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

76

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 añadir una cabecera al principio, no hay más que poner una capa antes de las columnas, con todo el ancho. Y para poner un pie, haríamos lo mismo, pero colocándolo después 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%;

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

77

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 márgenes, 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 ajustaría al contenido del elemento.

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. Además, el elemento siempre se muestra en la misma posición, aunque la página 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 página. 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">

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

78

<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;

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

79

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 fijo<br />Derecha</div></div>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

80

</div>

</body>

</html>

Una de las propiedades de este posicionamiento es que si imprimimos la página web y ocupa varias páginas en papel, los elementos fijos se imprimen en todas las páginas, por lo que puede resultar útil para pies y encabezados.

Nota: Internet Explorer 6 no soportaba este posicionamiento. 7.9. Ancho de la página, líquido o elástico Al crear el diseño de una web, básicamente existen dos tendencias: que la página ocupe todo el ancho de la ventana del navegador (diseño líquido), o que ocupe sólo una columna con un ancho fijo (diseño fijo).

No es que uno sea claramente mejor que otro, tienen sus pros y sus contras:

• Diseño fijo.

En el diseño fijo, la página tiene un tamaño exacto, normalmente expresado en píxel. Esto facilita el diseño, sobre todo si está compuesto por imágenes divididas en trozos que deben casar perfectamente, ya que podemos posicionar todo de forma exacta. También nos permite controlar el ancho de los elementos de texto, no creando columnas ni demasiado largas ni demasiado pequeñas.

Por contra, no aprovecha bien el espacio. Pensemos en una página de ancho fijo, de 900px. Si un usuario la ve desde la pantalla de su teléfono móvil, que tiene un ancho de 320px, la mayor parte de la página no quedará visible. En cambio, si se ve desde un monitor panorámico de 24'', con 1920px de ancho, la mayor parte del espacio estará desaprovechado.

• Diseño líquido.

En el diseño líquido, en vez de unidades absolutas se utilizan relativas al tamaño de la ventana. Esto hace que la página sea más flexible a los distintos dispositivos de visualización.

Por contra, es más difícil controlar el diseño, sobre todo si se basa en muchas imágenes, porque hay que pensar en qué ocurre si la ventana es muy pequeña o muy grande, y que no se descoloque todo al cambiar de tamaño. También puede producir líneas de texto muy largas, lo que incomoda la lectura. Aunque el usuario siempre tiene la opción de hacer más pequeña su ventana.

Para intentar controlar un poco el tamaño de los elementos, existen las propiedades de estilo max-width (ancho máximo), min-width (ancho mínimo), max-height (alto máximo) y min-height (alto mínimo).

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

81

Un ejemplo de diseño líquido puede ser la página de este curso.

• Diseño elástico.

Últimamente, se ha acuñado el término "diseño elástico" para el diseño en el que el tamaño de los objetos, no es ni fijo ni en relación al tamaño de la ventana, si no al tamaño del texto (basado en em), dando al usuario la posibilidad de cambiar su tamaño, y en proporción, el de todos los elementos. Aunque permite que el texto se controle, sigue sin adaptarse a las distintas ventanas, y resulta difícil controlar las imágenes.

Actualmente, la mayoría de las páginas ofrecen un diseño fijo, sobre todo si tienen un diseño más elaborado. Las que ofrecen un diseño más elástico, suelen mostrar una columna central elástica, que se adapta a la pantalla, y columnas con un ancho fijo, para menús o para la publicidad.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

82

Unidad 8: Menús 8.1. El HTML del menú El menú es un elemento fundamental de nuestra web, y hemos de dedicarle una atención especial.

Básicamente, el menú es un conjunto de enlaces a las distintas partes de nuestro sitio, y lo más habitual es encontrarlo en el html de la página, o en un archivo javascript. De momento, vamos a ver cómo crearlo desde el HTML.

La estructura puede ser cualquiera: podemos hacer un menú con divs, con tablas, etc. Pero lo más común, 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 página → Sin estilo; IE no tiene esta opción) o vemos el código 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 página del sitio.

Observa que hemos el menú de nuestro ejemplo, siguiendo esta estructura:

<ul>

<li><a href="index.html">Inicio</a></li>

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

<li><a href="nosotros.html">Nosotros</a></li>

<li><a href="contacto.html">Contacto</a></li>

<li><a href="noticias.html">Noticias</a></li>

</ul>

8.2. Estilo básico del menú Una vez creado el menú, todo lo referente a su aspecto lo haremos utilizando estilos CSS. Lo más cómodo 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 algún valor si lo creemos necesario.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

83

Otra cosa característica de las listas son las viñetas. 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 tendrán el aspecto de botones que se pueden pulsar. Pero esto no es cierto, ya que el enlace sólo está en el texto, porque la etiqueta <a> es un elemento en línea que se ajusta a su contenido. Podemos cambiar este comportamiento con aplicándole 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 añadiremos un borde a los elementos para diferenciarlos. Todo esto en función del diseño 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;

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

84

}

8.3. Posición de los elementos Por defecto, los elementos de la lista se muestran uno debajo de otro. Pero por cuestiones de diseño, 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;

}

También podemos ponerlos en horizontal con la propiedad display: inline;. En este caso, lo mostramos como elementos en línea, por lo que no podremos regular su tamaño.

8.4. Tamaño 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 están en vertical, y ajustado al contenido cuando están en horizontal. El alto, se ajusta siempre al contenido.

Por cuestiones estéticas, puede que queramos personalizar estos tamaños. Por ejemplo, para que todos los elementos que están en línea tengan el mismo ancho, basta con definir un ancho con la propiedad width, suficiente para contener al elemento mayor:

#menu li {

background-color: #AF7051;

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

85

border: #5F4232 3px solid;

margin: 1px;

padding: 2px;

float: left;

width: 60px;

}

Si estamos utilizando los enlaces con display: block, debemos de darle el mismo alto para que lo llene todo. Otra opción sería definir el tamaño sobre los enlaces, ya que los elementos de lista flotantes se ajustarán al tamaño.

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;

}

En CSS no existe una propiedad para centrar verticalmente el contenido de un elemento. Pero en casos como éste, en el que sólo tenemos una línea de texto, podemos utilizar un truco. Si al alto de la línea (la propiedad line-height) le damos el mismo tamaño que el alto del elemento (en el ejemplo anterior, habría que añadir line-height: 30px;), el texto se mostrará centrado verticalmente.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

86

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 sensación 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 página en la que el usuario está en ese momento, lo que le ayuda a situarse. Para esto podemos utilizar clases y pseudoclases.

Ahora, vamos a darle formato al menú de nuestro ejemplo, para que tenga el mismo aspecto que en las siguientes imágenes:

Lo vamos a hacer siguiendo este ejercicio paso a paso.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

87

Ejercicios de Práctica

Objetivo Vamos a definir los estilos para el menú de nuestra página de ejemplo. La idea es que el menú simule pestañas, que estén en contacto con el div que contiene el texto. Y que aparezca en la misma línea que el título, pero desplazado a la derecha.

Los elementos del menú, que serán de 90x40 px, cambiarán de estilo al pasar el cursor sobre él. También habrá un estilo distinto para el elemento que lleve a la página actual, pero éste no cambiara al pasar el cursor sobre él.

Vamos a explicar los pasos a seguir.

Ejercicio

1. Al selector #menu, quítale el margen exterior (margin: 0;) e interior (padding: 0;), las viñetas de la lista (list-style-type: none;) y aumenta un poco el tamaño de la letra (font-size: 105%;). Para que se desplace a la derecha del todo, lo pondremos flotante hacia allí (float: right;).

2. Define una nueva regla de estilo para los elementos, con el selector #menu li. 3. Al selector #menu li, dale un flotante a la izquierda (float: left;) para que se

muestren en la misma línea, y para que no queden pegados, un pequeño margen a izquierda y derecha (margin: 0 2px;). Dales también un ancho fijo de 90px (width: 90px) y una alto fijo de 40px (height: 40px;). Para que queden centrados, céntralos verticalmente dándole un alto de línea igual que el alto del elemento (line-height: 40px;) y céntralos en horizontal (text-align: center;). También hay que darles un color de relleno de nuestra paleta (background-color: #AA876F;) y un borde, excepto abajo (border-style: solid; border-color: #f0d7b5; border-width: 3px 2px 0 2px;).

4. Para cambiar el color del texto, declaramos el selector #menu a, ya que todo son enlaces, le damos el mismo color que el fondo del div.contenido (color: #f5e4cc;), y le quitamos el subrayado (text-decoration: none;).

5. Al pasar el ratón vamos a cambiar el color del texto y del borde, utilizando la pseudoclase :hover. Declara los estilos #menu li:hover {border-color: #FF7600;} y #menu li:hover a {color: #FF7600;}.

6. Vamos a crear una clase para la pestaña activa, a la que llamaremos activa. Declara el selector #menu li.activa. Vamos a quitar el borde de la pestaña, pero para no alterar el tamaño, le damos el color que pondremos al fondo y cambia el

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

88

color de borde por el de fondo (border-color: #f5e4cc;) y el color del fondo por el mismo que el div.contenido (background-color: #f5e4cc;).

7. Cambia el color del texto de la pestaña activa, declarando el estilo #menu li.activa a {color: #5F4232}.

8. Asígnale la clase activa al elemento que lleve a la página en la que estás trabajando.

9. Para que el menú quede en la misma línea que el título, podemos poner el título también flotante, pero a la izquierda. Edita el selector del título (h1), añádele posicionamiento flotante a la izquierda (float: left;).

10. Si ahora lo pruebas, verás que todo se amontona con el div del texto (div.contenido). Para evitarlo, editamos el selector div.contenido, y le añadimos la propiedad clear: both; para romper el flotante.

11. Si ahora pruebas la página en Firefox verás que el menú ya queda pegado al div que tiene el texto. En cambio en IE no. Esto se debe a que interpretan de distinta forma el margen del h1 y del div.contenido y la propiedad clear. Para solucionarlo, edita el estilo del h1, y quítale todos los márgenes, dejando a solo 40px a la izquierda (margin: 0 0 0 40px;). Edita también el selector div.contenido, y quítale el margen superior (margin: 0 20px 20px;).

12. Para que no quede tan pegada a la derecha la lista del menú, dale un margen derecho de 40px (margin: 0 40px 0 0;), editando el selector #menu.

13. Una vez acabado, a cada una de las páginas creadas, asígnale el id="menu" a la lista del menu y la class="activa" al elemento que enlaza con esa página

14. Con los cambios realizados en el ejercicio, nuestro sitio de ejemplo habrá quedado como se ve aquí. Si tienes dudas con este apartado consulta el video de apoyo para este contenido

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

89

Unidad 9: Imágenes 9.1. Introducción Ya hemos visto que podemos incluir imágenes en nuestra página 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 relación calidad-tamaño.

En nuestro sitio de ejemplo, vamos a utilizar imágenes para mostrar fotografías, pero también como parte del diseño.

Por ejemplo, vamos a crear una galería fotográfica para las imágenes de las distintas flores que queremos colgar en nuestro sitio. La idea es tener cuatro páginas, una para cada categoría de flores (silvestres, ornamentales, exóticas y plantas), desde las que podamos acceder a las fotografías de las flores, que son de gran tamaño.

Como la mecánica es la misma, sólo haremos la galería de flores silvestres. Pero te invitamos a que intentes hacer alguna otra sin ayuda al acabar el tema.

9.2. Galería con miniaturas Las fotografías que utilizaremos puedes encontrarlas en la carpeta fotos_flores que habrás descargado con los archivos del sitio.

La idea es simple: mostrar imágenes en una página. En principio, bastaría con ir poniendo las etiquetas img para cada imagen. Esto bastaría si fuesen imágenes de pequeño tamaño. Pero imagina una página con 15 o 20 imágenes, donde cada una ocupa toda la pantalla. La página tardaría mucho en cargarse, por el peso de las imágenes, y sería muy larga.

Por eso, lo normal cuando creamos una galería es crear miniaturas (o thumnails) de las imágenes. Se trata toda o parte de la imagen original, de menor tamaño, que al pulsar sobre ella muestra la imagen original.

La forma más 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" alt="Descripción"

/></a>.

También se suele utilizar javascript para abrir la imagen, consiguiendo efectos más vistosos.

Para crear una miniatura de una fotografía, podríamos poner un valor menor en los atributos width y height de la etiqueta img. Y aunque esto hace que se muestre más

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

90

pequeña, el archivo sigue siendo el mismo, por lo que la página tardaría lo mismo en cargar. La solución es crear un nuevo archivo de imagen, reduciendo el original.

Para trabajar con imágenes debemos de emplear algún programa especializado. Nosotros hemos elegido GIMP, por ser un potente programa de retoque fotográfico totalmente gratuito y libre. Puedes descargar su última versión desde http://www.gimp.org.es/descargar-gimp.html. Si necesitas ayuda para instalarlo, consulta con tu profesor. También puedes utilizar otros programas, como Photoshop. Incluso, si sólo vamos a redimensionar alguna foto puntualmente, puedes utilizar programas más simples, como Paint, preinstalado en Windows.

Utilizando este programa, nos resultará sencillo crear las miniaturas. Si no conoces los programas de retoque fotográfico, puedes realizar el ejercicio paso a paso en los Anexos “Recortar y dimensionar imágenes con Gimp”

En nuestro sitio de ejemplo, tendremos todas las fotografías de las flores en la carpeta fotos, dentro de la carpeta flores. Para cada foto, tendremos la fotografía que queremos mostrar, de un tamaño mayor, y la miniatura, que se llamará igual, pero terminado en _mini. La mayoría de las fotos, ya están redimensionadas y tienen la miniatura, por lo que sólo tienes que copiarlas de la carpeta fotos_flores, en la carpeta de ejercicios, que habrás descargado a la carpeta del sitio, sitio_flores/flores/fotos. La foto buganvilla.jpg es mucho mayor que las demás. Debes reducirla al 50% y obtener la miniatura tal y como se explica en el ejercicio anterior.

9.3. Organizar las miniaturas Una vez que tenemos las miniaturas, hemos de plantearnos cómo las vamos a organizar en la página. Esto dependerá del número de miniaturas que queramos mostrar, de su tamaño, del diseño de la página, 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 imágenes), el nombre de la flor y su nombre científico.

Vamos a comenzar por crear la galería de las flores silvestres. Partiendo del archivo base.html, crea la página silvestres.html, guardándola dentro de la carpeta flores.

Si pruebas la página en el navegador, comprobarás que no se muestra el estilo, y los enlaces no funcionan. Esto se debe a que ni la hoja de estilo ni las otras páginas están 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 pestaña Flores siempre como activa.

En el título (h2) hemos escrito Galería de flores silvestres.

Después del título, en un párrafo (p), hemos escrito Las flores silvestres son aquellas que crecen en nuestra región. Para verlas, basta con acercarnos a un parque o dar un agradable paseo por los alrededores de nuestra ciudad..

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

91

A partir de aquí, vamos a comenzar a añadir 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 más cómodo 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 páginas, 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 línea el nombre de la flor, y en el segunda el nombre científico. Podríamos colocar el texto en un párrafo, y separar los nombres con un salto de línea (<br />). Pero como queremos diferenciar un poco el nombre científico, lo más cómodo será ponerlo en otro párrafo 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, verás que hay una página 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 fácil de recordar. Por ejemplo, utilizaremos el nombre de la flor en minúsculas, 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 href="fotos/agret.jpg"><img alt="Agret"

title="Agret - Oxalis pes-caprae" src="fotos/agret_mini.jpg" height="75"

width="100" /></a>

<p>Agret</p>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

92

<p class="cien">Oxalis pes-caprae</p>

</div>

Y la vista, se vería algo así:

Nota: Observa que el archivo de imagen tiene el nombre de la flor, que además 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 más probable que al buscar fotos de Agret en Google aparezca nuestra foto, lo que puede atraer usuarios interesados por la temática de la página.

Ahora vamos a definir el estilo de la ficha. Para ver mejor el efecto, crea la ficha de unas cuantas flores más. En la carpeta fotos_flores encontrarás también el archivo nombre_flores.txt, con los nombres comunes y científico de alguna de las flores utilizadas.

La idea que tenemos es la de crear una fichas de tamaño fijo, de 250 px de ancho por 120 px de alto. De manera que el número de fichas que se muestren por línea dependa del ancho de la ventana, lo que agradecerán los usuarios con grandes pantallas.

Declaramos el selector div.ficha. Le asignamos las propiedades de tamaño fijo width: 250px; height: 120px;. Para que queden en la misma línea, le damos un flotante a la izquierda (float: left;). Para delimitar mejor el borde de cada ficha, le añadimos un borde (border: 1px solid #d38451;). Al estar flotantes, las fichas quedan pegadas. Para separarlas un poco, le añadimos un margen (margin: 15px;).

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

93

Si lo pruebas, verás que las fichas se salen del div.contenido. Para solucionarlo, podemos añadir un párrafo vacío después de las fichas, que rompa el flotante (<p style="clear:both;"></p>).

Vamos a cambiar el estilo de las imágenes 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;). También 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 más acorde con el diseño (border: 2px solid #d38451;).

Para destacar que se puede pulsar sobre las imágenes, haremos que al pasar el cursor por encima (div.ficha img:hover), el borde cambia el mismo naranja que las pestañas (border-color: #ff7600;). Así los usuarios asociarán ese color a los elementos de navegación.

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 sólo 3px (margin: 3px;) y a reducir un poco el tamaño de la letra (font-size: 95%;), y el alto de la línea (line-height: 1.3em;). Esto último lo notaremos cuando alguno de los nombres ocupe más de una línea.

El párrafo que contiene el nombre científico (div.ficha p.cien), lo pondremos en cursiva (font-style: oblique;), y lo separaremos un poco del párrafo anterior (margin-top: 1em;), y recuperamos el color de texto general (color: #735846;). Observa que no nos haría falta poner div.ficha en el selector, pero así luego es más fácil identificar qué estilos pertenecen a la ficha.

Algunas fichas van a contener dos o tres miniaturas, por lo que no cabrán en el ancho de la ficha. Así que vamos a definir otro tipo de ficha, igual que la anterior, pero con el doble del tamaño, que será el ancho de las dos fichas, más 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 sólo funcionará si en la hoja de estilo, la clase div.ficha_doble está definida después 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;

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

94

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 página con las flores silvestres:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

95

Ahora, sólo queda hacer lo mismo con el resto de categorías. Observa que de momento no tenemos enlaces a estas páginas. Esto lo haremos en el tema siguiente.

9.4. Tabla de índice Ya tenemos, en la carpeta flores, las cuatro páginas con las galerías, correspondientes a las distintas categorías. Ahora, vamos a crear otra página, sin imágenes, que recoja el listado completo de las flores disponibles, ordenadas alfabéticamente.

A esta página vamos a llamarla index.html. Así conseguimos que si un visitante accede directamente a la carpeta flores, se muestre esta página.

Por lo tato, creamos la página index.html, dentro de la carpeta flores, con la estructura que tiene el resto.

En el título de la página (h2), hemos escrito: Índice alfabético de flores.

En el primer párrafo, hemos introducido el texto: Aquí puedes encontrar todas las flores de las que tenemos imágenes, listadas alfabéticamente:.

Ahora vamos a listar todas las flores. De cada una, mostraremos su nombre, categoría y un enlace a su ficha. La estructura más 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 categoría y otra para el enlace.

Para crear una tabla debemos hacerlo de la siguiente manera:

<table style="text-align: left; width: 100%;" border="1"

cellpadding="2" cellspacing="2">

<tbody>

<tr>

<td></td>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

96

<td></td>

<td></td>

</tr>

...

</tbody>

</table>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

97

Observa que la tabla contiene un tbody. Esta etiqueta no es obligatoria, y podríamos quitarla.

La primera fila será el encabezado. Así que vamos a cambiar las celdas normales (<td></td>) por celdas de encabezado (<th></th>), aunque también podríamos crear una clase para el td. Podemos hacerlo directamente en el código fuente.

En cualquier caso, tras introducir en las celdas de encabezado Nombre, Categoría y Ficha, nos habrá quedado el siguiente código 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 alfabético de los nombres. Por ejemplo, para la flor de Agret, hemos introducido la siguiente fila:

<tr>

<td>Agret - Oxalis pes-caprae</td>

<td>Silvestres</td>

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

</tr>

Observa que el enlace apunta a la página de su categoría, 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 más tablas en nuestro sitio, tenemos que identificar esta tabla. Podríamos utilizar una clase, pero emplearemos un ID, ya que en principio, no vamos a aplicar este estilo a otras tablas. En todo caso siempre podríamos 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 añadirle un borde (border: 1px solid #ff7600;), y darle un color de fondo de nuestra paleta (background-color: #f0d7b5;), un poco más oscuro que el del div.contenido.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

98

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 sólo 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, después 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 más tarde decidimos cambiar el tamaño de la fuente. Para hacerlo, podríamos por ejemplo definir columnas <col />, como hemos comentado en el avanzado. Pero la forma más 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 página:

9.5. Estilo redondeado Si te fijas en el diseño de la página, verás que tiene muchas esquinas. Queda muy cuadrado. Quedaría más suave si pudiésemos 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-border-radius, que consigue este efecto. Pero de momento es una propuesta de Mozilla y sólo funciona en Firefox, por lo que no es útil si no se ve en el resto de navegadores. Aunque es posible que en la próxima revisión del CSS, esta propiedad se convierta en estándar.

Si buscas este tema en Internet, encontrarás muchas formas de cómo lograr este efecto. Más o menos complicadas, unas utilizando imágenes, otras librerías javascript, etc...

Nosotros vamos a utilizar un método, utilizando imágenes y CSS, para convertir estas divisiones:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

99

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 fijándonos en el primero:

Básicamente, lo que pretendemos hacer es simular el elemento redondeado, colocando

en las esquinas estas imágenes: , , , y .

Así que el primer paso es crear nuestras imágenes. Hasta ahora habíamos utilizado GIMP. Pero se trata de un programa de retoque fotográfico, no de dibujo. Para crear gráficos, necesitamos un programa de dibujo que nos permita trabajar con gráficos vectoriales, como puede ser Illustrator o CorelDraw.. Siguiendo en la línea del curso, nos hemos decantado por Inkscape, una herramienta totalmente gratuita y libre que puedes descargar desde su web.

Una vez que tenemos las imágenes, vamos a ver cómo las colocamos. Tenemos una división, en este caso con la clase contenido.

En un principio, podemos pensar en poner las imágenes directamente en la división. Luego, podemos situarlas en las esquinas con posicionamiento absoluto. Podría ser una solución, aunque la idea es que el diseño sea independiente de la página, que si cambiamos la hoja de estilo, podamos volver a ver las esquinas angulares, por ejemplo, o la imagen de otro color.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

100

Por lo tanto, vamos a introducir las imágenes 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 división. Por ejemplo, para colocarla en la esquina superior izquierda, escribiríamos:

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 sólo 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 están, pero el de dentro no debe de llevar borde, porque si no las imágenes 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{

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

101

background-image: url(imagenes/red_rt.png);

background-position: right top;

background-repeat: no-repeat;

height: 25px;

border: blue 1px dotted;

}

Utilizando esto, podríamos conseguir el resultado que buscamos superponiendo cuatro divisiones, y a cada una poniéndole su imagen de fondo. Sería una posible solución, si nos aseguramos de que como mínimo 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 continuación, otro div donde introduciremos el contenido (texto, imágenes, etc...) y al final, otro div doble con las esquinas inferiores. Todo ello agrupado dentro de una división, que en nuestro ejemplo llamaremos div.redondo.

También hemos creado otra caja redondeada para algunos elementos dentro del contenido de la página, como la tabla de las flores, o la cita de la página nosotros.html. Esta caja tiene alguna cosilla más, porque también tiene un borde. Puedes ver cómo lo hemos hecho en este Anexo Esquinas redondeadas

Puedes ver el aspecto de una página de nuestro sitio con lo visto

9.6. Pestañas y botones Si echamos otro vistazo a nuestro diseño, vemos que para que estén en consonancia, las pestañas también deberían de ser un poco redondeadas. Pero en este caso, como todas tienen el mismo ancho, utilizaremos una imagen, que además nos permitirá darle otros efectos, como degradados.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

102

En las páginas web, es frecuente utilizar imágenes para crear iconos, por ejemplo los de

botones , o para simular botones, con texto

incluido, como Inicio.

La idea de estos ejemplos es simple, colocar la imagen en un enlace. Pero hay que tener cuidado, y pensar siempre que las imágenes podrían no cargarse. Por eso es muy importante incluir un atributo alt en las imágenes. Y si la imagen no deja bien claro a dónde va el enlace, añadir además un texto descriptivo en el atributo title.

En elementos con texto, como botones o pestañas, para evitar problemas con las imágenes, 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 tamaño determinado 90x40 px, crearemos tres imágenes de fondo: una la pondremos con el elemento normal, otra cuando esté el ratón encima, y otra para la clase activa.

9.7. Inkscape. Crear la pestaña Como se trata de una imagen, un dibujo que queremos crear desde cero, utilizaremos Inkscape. Con esta aplicación, vamos a crear una pestaña para nuestros elementos del menú, que son de 90 px de ancho y 40 px de alto.

Recuerda, que en Inkscape podemos crear rectángulos con la herramienta Crear

rectángulos y cuadrados . Los rectángulos, 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.

También hemos visto que en la barra de herramientas superior hay unos controles que nos permiten cambiar el tamaño del elemento.

Con esto, no nos resultará difícil crear la pestaña. Creamos un cuadrado, de 88px de ancho (más vale que nos sobre un poco que intentar encajarlo al píxel) 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.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

103

Una vez creado, el rectángulo, con él seleccionado pulsamos las teclas Ctrl + D. Este comando, duplica el elemento. Es decir, ahora tenemos dos rectángulos 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 alineación vertical. Al rectángulo que queda arriba, le redondeamos las esquinas de nuevo con la herramienta Crear rectángulos y

cuadrados .

Como vemos, para crear la pestaña, tenemos que unir estos elementos. Para hacerlo, seleccionamos los dos, y pulsamos en el menú Trayecto → Unión. Con esto hemos creado un único elemento con la forma de la pestaña.

9.8. Inkscape. Degradados Como ves, el relleno de la pestaña o forma un degradado. Un degradado o gradiente es una fusión gradual entre dos o más colores.

Para editar el relleno de un elemento, hacemos doble clic sobre el color de relleno en

Relleno - Trazo.

En la ventana Borde y relleno, en la ventana Relleno, selecciona Gradiente lineal.

Relleno y borde

Al hacerlo, el relleno del elemento ha cambiado, mostrando un degradado de negro a transparente. Además, muestra un control que nos permite regular la dirección de gradiente.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

104

En este caso, lo hemos regulado para que quede en vertical (el de la derecha de las imágenes 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 añadir paradas en el medio, pulsando en Añadir 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 más oscura hacia arriba, añadimos una parada. Observa que el control Desvío está a la mitad. Desplazándolo, podemos acercar la parda a uno u otro extremo, así que lo acercamos un poco a la izquierda (a la parte oscura).

Lo mismo hemos hecho con el borde, pero de un color claro (f5e4ccff) a uno oscuro (bf9a81ff), también en vertical, y le hemos aumentado un poco el Ancho de borde desde la pestaña Estilo del trazo. Al cambiar el grosor, asegúrate que el ancho no excede los 90 px. Si es así, cámbialo.

Al final, la pestaña nos ha quedado así. La ponemos sobre el mismo color de fondo que utilizamos en la página, para que se vea mejor:

Una vez que tenemos la pestaña, 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.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

105

Si no, al editarlo, verás que cambian todos los elementos que tienen asignado ese degradado.

Seleccionándola, y desde el menú Archivo → Exportar, con el botón Selección pulsado, la hemos guardado en la carpeta imagenes del sitio con el nombre pest_normal.png.

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 pestaña, 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 pestaña activa, le hemos cambiado el relleno, de modo que la parte baja acabe en el mismo color que tiene la división que contiene el texto (f5e4ccff), y hemos jugado con el Desvío y añadido paradas hasta encontrar un estilo que nos gustase.

La hemos guardado como pest_activa.png.

Guarda el documento en el que estás creando las pestañas.

Una vez que tenemos las imágenes, cambiamos los estilos para que en vez de fondo y borde, muestren la imagen creada.

Edita el estilo #menu li, y quítale todas las propiedades referentes al borde (border-) y el color de fondo (background-color). Añade 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 repetición (background-repeat: no-repeat;).

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

106

Lo mismo para #menu li:hover, le quitamos el color de borde (border-color: #ff7600;) y añadimos 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 el aspecto de una página de nuestro sitio con lo visto hasta ahora.

9.9. Menú desplegable También vamos a crear un menú desplegable, con las distintas categorías, que se muestre sólo al poner el cursor sobre la pestaña Flores.

Abre la página del sitio de ejemplo, flores/silvestres.html.

La pestaña Flores, tiene el siguiente código:

<li class="activa"><a href="index.html">Flores</a></li>

Nota: Puede que tengas el enlace como ../flores/index.html. Funcionaría igual.

Lo que vamos a hacer, dentro del elemento, pero después del enlace, crear una nueva lista, con enlaces a las cuatro categorías, asignando la clase activa a la correspondiente en cada caso:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

107

<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 diseño, utilizaremos imágenes que simulen botones. En este caso los vamos a hacer de 106 x 30 px para que nos quepa el texto más largo. Utilizando Inkscape, y en el mismo documento que creamos las pestañas, dibujamos un rectángulo

(con la herramienta Crear rectángulos y cuadrados ) con los bordes redondeados, y el mismo grosor de borde que en las pestañas.

Como son tres copias, tenemos que crear tres, duplicándolo dos veces (Ctrl + D).

Les vamos a dar el mismo estilo que a las pestañas. Para eso, asígnale un degradado tanto al borde como al relleno. Al hacerlo, verás que en la lista desplegable de los degradados, puede seleccionar cualquiera de los utilizados en el documento. Eso sí, el degradado aparece horizontal, tendrás que cambiarlo a vertical.

Creamos 3 imágenes, 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 pestañas:

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 viñetas (list-style-type: none;).

Ahora, vamos con los elementos (#menu ul li). Le damos el tamaño ( 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 pestaña (en nuestro caso) mide 88 px de ancho, mientras que el

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

108

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 más oscuro. Esto lo causa el estilo #menu li:activa a. Para solucionarlo, en cada selector que establece el color, debemos de añadir también el selector del submenú con la clase activa. Y lo mismo pasaría cuando la pestaña Flores no es la activa pero tienen le cursor, que todos los textos se verían 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, verás que funciona, pero sólo porque los elementos que lo taparían no tienen también 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 sólo funciona en elementos posicionados.

Ahora, tendríamos 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ú sólo en la página flores/silvestres.html. Ya lo pondremos en el resto cuando esté acabado.

Puedes ver el aspecto de una página de nuestro sitio con lo visto hasta ahora

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

109

9.10. Mapa de imagen Un mapa de imágenes 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 mínimo, llevan tres atributos:

shape, que es la forma del área, pudiendo ser rect (rectángulo), circle (círculo) o poly (polígono).

coords indica las coordenadas del área, en píxeles. Depende de la forma. Por ejemplo, un rectángulo tiene cuatro valores: inicio-x, inicio-y, fin-x, fin-y. Un círculo, centro-x, centro-y y el radio, y un polígono un valor x e y para cada punto.

href es la dirección del enlace.

Después, para asociar el mapa a la imagen, añadimos 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 categorías, que colocaremos en la página 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" />

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

110

<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 de flores silvestres" />

</map>

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 categoría correspondiente, y le hemos añadido el atributo title para que se muestre el texto al pasar el cursor.

La imagen utilizada, la hemos generado con GIMP utilizando las imágenes 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 cómo fusionamos las imágenes.

Observa como ha quedado la página:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

111

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 gráfico, utilizaremos Inkscape. Esta vez lo

haremos con la herramienta Texto . Nosotros hemos utilizado una tipografía Forte, con un tamaño de 16. Después 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.

Después, sobre el reflejo hemos creado un rectángulo con un degradado de negro a gris. Con él crearemos una máscara de opacidad. El negro indica la zona que será transparente. Y cuando un color más se aproxime a blanco, más opaco será el objeto. Es decir, se verá más. Cuando tengamos el degradado a nuestro gusto, con el rectángulo y el reflejo seleccionado, vamos al menú Objeto y elegimos Máscara → Aplicar.

Utilizando el mismo sistema para el reflejo, hemos creado la imagen de la flor. Hemos llamado a las imágenes logo.png y pensamiento.png.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

112

Es hora de colocarlas en nuestro sitio. No tenemos más que cambiar el contenido del <h1> por las dos imágenes:

<h1><img src="imagenes/pensamiento.png" alt="" width="65" height="90" />

<img src="imagenes/logo.png" alt="Floramics" width="269" height="70"

id="logo" /></h1>

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 teníamos hasta ahora.

También 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 día decidamos cambiar la imagen de la flor, y así no tendremos que ir página por página para ajustar los nuevos márgenes.

Haz los cambios y prueba la página.

El primer problema que observamos es que queda una separación entre las pestañas y el contenido de la página.

Esto se produce porque el h1 es ahora mayor al tener las imágenes. Para solucionarlo, podemos añadir 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 añadimos 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 página, vemos que si esta es lo bastante ancha, el logo y las pestañas se ven en una misma línea. Pero si la reducimos, el logo "salta" encima de las pestañas, dejando la separación del margen que le acabamos de dar, lo que no queda muy bien.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

113

Lo que vamos a hacer es dar un ancho mínimo a nuestra página, 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. También tenemos min-height para el alto, y max-width y max-height para los máximos.

Aplicamos la propiedad al body de la página.

body {

...

min-width: 900px;

}

Cuando la ventana sea mayor de 900px, la página mostrará un diseño líquido, que se hará fijo si la hacemos menor de ese tamaño.

Tras realizar todos los cambios de esta unidad, nuestro sitio ha quedado con este aspecto.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

114

9.12. Para saber más... Manual oficial de GIMP en castellano.

Tutoriales de Inkscape.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

115

Unidad 10: JavaScript 10.1. Introducción

Ver el videotutorial

Vamos a añadir algunos comportamientos extra a nuestro sitio. Por ejemplo, vamos a crear un menú desplegable, para que al ponernos sobre la pestaña Flores, se muestren las categorías existentes. Por otra parte, vamos a hacer que al pulsar sobre las imágenes, en las páginas de las categorías, 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 sólo con HTML y CSS.

JavaScript es un lenguaje de programación que el navegador es capaz de interpretar y ejecutar sobre la página web.

Utilizando este lenguaje podemos crear comportamientos que no están disponibles en el html, por ejemplo mostrar un mensaje pulsando aquí, abrir una ventana, cerrarla...

O también podemos utilizarlo para cambiar la página.

Podremos crear desde los compartimentos más simples, hasta otros realmente complejos.

Puedes ver algunas cosas que se pueden lograr con JavaScript en la web Chrome Experiments.

10.2. Cambiar el CSS Vamos a completar nuestro menú desplegable, que de momento sólo tenemos en la página 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

contrayéndola.

Aunque ocultemos el elemento con esta propiedad, se sigue reservando su espacio. Para ocultar un elemento, y que además 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, mostrándolo cuando tengamos el cursor sobre la pestaña Flores, y ocultándolo cuando salgamos de ella.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

116

Como al cargar la página, 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 método getElementById('id_del_elemento'), que nos permite referenciar un elemento de la página 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ú, escribiríamos en el código javascript document.getElementById('sub_flores'). Ponemos document, porque es el nombre del objeto al que pertenece el método. El objeto document se refiere al contenido del body de nuestra página.

Una vez referenciado un elemento, podemos acceder a sus atributos, poniendo . (punto) detrás del elemento.

Por ejemplo si ejemplo fuese el ID de una imagen, podríamos cambiar su ancho a 200 px con:

document.getElementById('ejemplo').width='200px';

Del mismo modo, podríamos cambiar su clase por otra utilizando:

document.getElementById('ejemplo').class='nuevaclase';

Con .style. podemos acceder a las propiedades de estilo. Por ejemplo, podríamos cambiar el color del texto del párrafo parrafo con:

document.getElementById('parrafo').style.color='#00ffaa';

Por lo tanto, la instrucción javascript que mostraría nuestro submenú podría ser:

document.getElementById('sub_flores').style.display='block';

Cuando llamemos a esa línea de código, el menú se mostrará. ¿Y cuando lo haremos? Cuando el cursor esté sobre la pestaña Flores. Esto produce un evento. JavaScript dispone de una serie de eventos sobre los elementos de la página, 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 cuándo se producen en este avanzado Avanzado.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

117

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 pestaña Flores, es decir, en el evento onmouseover del li. Como valor del atributo, escribimos el código 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='block';"><a

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

<ul id="sub_flores">

...

</ul>

</li>

...

</ul>

Si lo pruebas, verás 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='block';"

onmouseout="document.getElementById('sub_flores').style.display='none';">

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

<ul id="sub_flores">

...

</ul>

</li>

...

</ul>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

118

Si lo pruebas, verás que a no ser que lo hagas muy deprisa, al pasar el cursor de la pestaña al submenú éste desaparece. Esto se debe a que el menú permanece visible siempre que no salgamos de sus elementos (que están dentro del <li> de la pestaña). 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 pequeña separación entre elementos, aumentamos su alto en 2px (height: 32px; line-height: 32px;).

10.3. Ubicar el código Hemos visto que podemos escribir una instrucción JavaScript directamente en el evento. Pero lo normal es que en los eventos, sólo llamemos a funciones o métodos, y estas funciones las desarrollemos en otro lugar, a no ser que sean cosas muy concretas.

Básicamente, podemos escribir el código en la misma página o en un archivo independiente:

En la página HTML:

Colocaremos el código en una etiqueta script, normalmente en el <head> de la página:

<head>

<title>Mi página</title>

<script type="text/javascript">

<!--

código javascript;

código javascript;

-->

</script>

</head>

A la etiqueta script le acompaña 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 código en un comentario HTML (<!-- -->). Esto no es necesario y no afecta al script. Lo que hace es indicar al validador que eso no es código HTML, para que no lo evalúe como tal. Un validador es una aplicación que analiza el código de una página para ver si es válido con respecto a su Doctype.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

119

En un archivo externo:

Si tenemos más de una página que utiliza el mismo código, no sería práctico repetirlo en todas. Es mejor guardar el script en un archivo independiente, al que llamaremos desde cada página.

El archivo no es más que un archivo de texto, con el código JavasScript, y guardado con la extensión .js. Igual que una hoja de estilo no es más que un archivo de texto con la extensión .css. Es habitual guardar los archivos JavaScript de nuestro sitio en una carpeta llamada js.

Para poder utilizar el código en la página, debemos de cargarlo, llamando al archivo con el siguiente código:

<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 imágenes, añadimos el atributo src, cuyo valor será la ubicación del archivo. En el ejemplo, el archivo nombre_archivo.js, que estaría dentro de la carpeta js.

Repetiremos esta llamada para cada archivo que queramos cargar.

10.4. Funciones La mayoría de las veces, en vez de escribir cada vez el código JavaScript directamente en el evento, nos resultará más útil definir una función.

En una definición muy coloquial, una función sería como asignar un nombre a un conjunto de instrucciones, al que luego nos referiremos con ese nombre. Estas instrucciones, realizaran una acción, nos devolverá un valor, etc...

Resultan especialmente útiles cuando queremos utilizar las mismas instrucciones en varios lugares, ya que sólo 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';

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

120

}

</script>

Y en los eventos correspondientes, llamamos a esas funciones:

<ul id="menu">

<li><a href="../index.html">Inicio</a></li>

<li class="activa" onmouseover="verSubmenu();"

onmouseout="ocultarSubmenu();">

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

<ul id="sub_flores">

...

</ul>

</li>

...

</ul>

Las funciones tienen los siguientes elementos:

function nombreDeLaFunción (param1, param2,..., paramn){

instrución JavaScript;

instrución JavaScript;

...;

}

• function es una palabra reservada, que indica que a continuación vamos a definir la función.

• nombreDeLaFunción, es el nombre que le queramos dar, sin espacios. Se suele escribir en minúsculas, y el inicio de cada palabra (excepto la primera) en mayúsculas.

• (param1, param2,..., paramn). Entre paréntesis ( ), y separados por comas, le podemos pasar a la función tantos parámetros como queramos. Los parámetros son valores que damos a la función para que los utilice. Por ejemplo, para crear una función que calcule el área de un rectángulo, le deberemos de pasar dos

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

121

parámetros, el alto y el ancho. Aunque la función no necesite parámetros, siempre pondremos los paréntesis. Si en nuestro ejemplo tuviésemos varios submenús, no crearíamos una función para cada uno, le pasaríamos como parámetro el ID del submenú que queramos mostrar.

function verSubmenu(id_submenu){

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

}

• Entre llaves { }, están las instrucciones de la función, cada una terminada en punto y coma (;). En las instrucciones podemos utilizar valores constantes, variables, operadores, estructuras de programación, etc... como en cualquier lenguaje de programación. Si queremos que la función devuelva un valor, lo haremos con la palabra reservada return. Por ejemplo, la siguiente función convierte de kilómetros a millas:

function conversorKmMillas(km){

return km*0.62;

}

En código JavasScript podemos introducir comentarios. Si son de una línea, basta con escribir // para que comience el comentario. Si lo queremos más extenso, podemos utilizar /* para abrir el comentario y */ para cerrarlo.

Una vez definida, podemos llamar a nuestra función directamente desde un evento (onclick="miFuncion('parámetro');"), utilizando una etiqueta scrit en el body (<script type="text/javascript">miFuncion('párametro');</script>), y también podemos utilizarla como parte de otra función o instrucción.

10.5. Abrir una ventana Vamos a realizar otro cambio en nuestro sitio, de momento, también sólo en la página 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 sólo la imagen, se abra una nueva ventana, que tenga como título de la página, en el title y en un h1, el nombre de la flor. Y un enlace para cerrar la ventana. Una solución sería crear una página como queremos. Pero si lo hacemos manualmente, tenemos que crear una página para cada fotografía. Lo que

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

122

vamos a hacer es generar esa página en el momento que la necesitemos, utilizando JavasScript.

Como esto lo vamos a hacer con cada imagen, crearemos una función. Como cada imagen es de una flor distinta, a la función tendremos que pasarle como parámetros el nombre de la flor, y el archivo de imagen que tiene que mostrar. Como todas las flores están en la carpeta fotos, vamos a crear la variable carpeta en la función, para tener que pasarle sólo el nombre. Así, si cambiamos la carpeta, sólo tendremos que cambiarlo en un sitio. Declaramos nuestra función, debajo de las que ya teníamos.

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 método open. Un método, es como una función que está dentro del objeto. A open, le podemos pasar como parámetro la página que queremos abrir. Si, le pasamos una imagen, también 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 podríamos haber hecho también 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, comprobarás que se abre una nueva ventana. Podemos utilizar window.open('url') para abrir cualquier página o dirección.

Lo que vamos a hacer es, en vez de abrir directamente la imagen, abrir una ventana vacía, y escribir en ella el código que queramos. Dentro de la función, escribimos el código a mostrar, con los parámetros. Podemos utilizar una variable, por ejemplo:

carpeta = 'fotos/';

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

123

codigo = '<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 código de la página tal cual, concatenando los parámetros con el signo + donde nos hacía falta. Cada cadena viene delimitada por comillas simpes '. No podemos saltar de línea a mitad de una cadena, debemos de cerrarla en la misma línea, aunque sí podemos concatenar con la línea siguiente. De todas formas, estos saltos no se verán en el código fuente de la página generada. Por eso hemos puesto el carácter de escape \n, que generará un salto de línea. Esto es puramente estético, podríamos quitar estos saltos sin que afecten al resultado.

Como no sólo vamos a abrir la ventana, si no que vamos a utilizar sus métodos, 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 código en su documento, utilizando el método write del document de la nueva ventana (ventana.document.write(codigo)). Podemos escribir varias veces, pero cuando terminemos tenemos que cerrarlo con el método close (ventana.document.close).

ventana = window.open();

ventana.document.write(codigo);

ventana.document.close();

Si lo pruebas, verás el h2 y el título de la página en la ventana del navegador.

Ahora sólo nos queda complicar un poco más el código HTML de la página generada. Por ejemplo, le podemos adjuntar la hoja de estilo. Además, después de la imagen, le vamos a añadir un enlace que cierre le ventana, utilizando el método 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>'+

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

124

'\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, sólo nos queda cambiar los enlaces de la página para que llamen a la función.

En este apartado hemos utilizado los objetos del navegador window y document. 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 páginas con galerías de imágenes, y las que muestran u ocultan el menú, tendrán que estar en todas las páginas. 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 página y guardamos el archivo en la carpeta js, pero renombrándolo como funciones.js.

Para acabar, quitamos toda la etiqueta <script> y su contenido de la página, 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 páginas que estén en la raíz, como index.html o nosotros.html, pondremos js/funciones.js.

Comprueba que funciona.

10.7. El menú en JavaScript Ya habrás comprobado lo molesto que resulta tener que cambiar todas las páginas cada vez que cambiamos el menú. Y no solo por la molestia, en un sitio con más páginas, es fácil que en alguna página 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ú.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

125

La idea es sencilla, igual que escribíamos el HTML para ver las fotos, vamos a escribir una función que escriba el HTML del menú, utilizando document.write().

Pero nuestra función necesitará parámetros, que serán aquello que hace que el menú de una página no sea exactamente igual que el de otra. Es decir, la pestaña que está activa. Además, debemos de saber si estamos en el raíz o en una subcarpeta.

Vamos a crear la función cargarMenu, con los parámetros pagina, con el nombre de la página, y sub, que será verdadero cuando esté en una subcarpeta.

function cargarMenu(pagina, sub) {

}

Realmente nos da igual el valor del parámetro 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 función. Si no lo enviamos, su valor será null (nulo). Por lo tanto, para saber si estamos en el raíz, sólo tendremos que preguntar si sub == null.

Primero, copiamos el menú completo, con el submenú, con las rutas como si estuviésemos en el raíz. Por ejemplo href="nosotros.html" o href="flores/silvestres.html".

Para convertirlo a cadena de texto, encerramos cada línea entre comillas simples ' ', añadiendo al final de cada una un salto de línea (\n). Al final de cada una, excepto de la última, concatenamos con la siguiente (+). Todo eso, lo pasamos como parámetro a al método 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 aprámetros. Para ello, vamos a utilizar la forma reducida de la sentencia If:

variable = (condición) ? valor_si_se_cumple : valor_si_no;

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

126

Por una parte la clase. Para cada página, evaluaremos la variable pagina, y si es la página, concatenaremos la clase activa, si no, no. Por ejemplo, para la pestaña nosotros pondremos:

'<li'+((pagina=='nosotros') ? ' class="activa"':'')+'>...\n'+

Esto quiere decir, que entre <li y >, añadiremos class="activa" (con un espacio delante) si la página es nosotros. Si no, no añadimos nada, lo que expresamos con una cadena vacía (abrir y cerrar comillas).

Esto, lo hacemos para cada pestaña. Pero con dos excepciones. Como tenemos dos páginas index, tenemos que poner algo más para que no se marquen las dos como activa. Podemos comprobar el parámetro sub. Si estamos en la página inicial del sitio, en la pestaña Inicio, no habremos pasado el parámetro, por lo que sub será null. Añadimos esta condición:

'<li'+((pagina=='index'&&sub==null) ? ' class="activa"':'')+'><a

href="index.html">Inicio</a></li>\n'+

El otro caso es la pestaña Flores. Será la pestaña activa cuando estemos en cualquiera de las páginas 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 página, 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, añadiendo a la dirección del enlace (href), al principio, ../. Por ejemplo:

<a href="'+((sub!=null) ? '../':'')+'index.html">Inicio</a>

La función 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'+

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

127

'<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 página HTML, quitamos el <ul> del menú, y en su lugar, llamamos a nuestra función con el siguiente código:

<script type="text/javascript">cargarMenu('silvestres', 'Sí');</script>

En este caso, estamos en la página silvestres.html, por lo que mandamos silvestres como pagina. Como parámetro sub, hemos enviamos Sí, pero podríamos haber puesto cualquier cosa. Lo importante es que no sea nulo.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

128

Cuando estemos en una página del raíz, sólo enviamos la página, por ejemplo <script type="text/javascript">cargarMenu('nosotros');</script>. Cambia el menú en cada página. Recuerda que también hay que poner la llamada al archivo js/funciones.js.

10.8. noscript Aunque hacer cosas en JavaScript resulta muy útil tiene un inconveniente. Y es que un visitante de nuestra página podría tener los scripts deshabilitados en su navegador.

Si sólo utilizamos scripts para conseguir algunos efectos visuales, no hay problema. Pero en nuestra página, si no se muestra JavaScript el visitante no podrá navegar, porque no se mostrará el menú, ni se verán las fotografías grandes.

De hecho, si has probado la página en Internet Explorer, verás 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ú.

También puedes comprobarlo deshabilitando JavaScript en Firefox (menú Herramientas → Opciones... → Contenido → Activar JavaScript). Si lo desactivas, recuerda volver a activarlo después siguiendo los mismos pasos.

Esto no tiene solución, tendríamos 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, sólo se mostrará cuando los scripts estén deshabilitados.

Aquí podemos poner enlaces alternativos, en nuestro ejemplo enlaces a las principlaes secciones, lo justo para poder navegar. Esta realmente sería la opción más adecuada, ya que con nuestro menú actual, los navegadores no podrán indexar correctamente nuestro sitio, y eso es fundalmental para una página web. Veremos más sobre este tema en la última unidad.

Por no complicarlo más, 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>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

129

<div class="sinscript">Atenci&oacute;n: Necesitas habilitar JavaScript

para poder navegar por este sitio.</div>

</noscript>

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 más... Con estos enlaces puedes ver más cosas sobre JavaScript...

Scripts de JavaScripts para usar en tu sitio.

Introducción a la manipulación del DOM (maestrosdelweb.com).

jQuery, librería JavaScript muy interesante.

Introducción a jQuery.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

130

Unidad 11: Formularios y PHP 11.1. Introducción Hemos visto como crear una página web, darle formato y añadirle funcionalidades con JavaScript, pero esto es sólo el comienzo. Una página web puede hacer muchas más 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, información del tiempo, etc.

En definitiva, una página web puede mostrar información actualizada cada vez que se ejecuta. Es lo que se conoce como páginas dinámicas, en contraposición a las páginas estáticas, que siempre muestran la misma información. Un ejemplo de página dinámica sería un foro de Internet. Esta página que estás leyendo sería un ejemplo de página estática.

Para crear páginas dinámicas hay que emplear un lenguaje de programación web, como Java, .NET, o PHP.

Nosotros hemos elegido PHP por ser gratuito y fácil de aprender. Para explicar PHP necesitaríamos un curso completo, así que sólo vamos a dar las nociones básicas para que puedas empezar a programar en PHP.

11.2. Formularios En nuestro ejemplo tenemos una página de Contacto que recoge datos mediante un formulario y los envía a una dirección de correo electrónico. Para enviar dicho correo electrónico vamos a utilizar PHP.

Hay varias formas de recoger datos y enviar un correo, nosotros vamos a emplear la más didáctica utilizando dos páginas. Luego en un ejercicio la mejoraremos (con una sola página).

Necesitamos una primera página escrita en HTML que contiene el formulario para recoger los datos y llamar a una segunda página escrita en PHP que realiza el envío del correo.

A continuación te mostramos el código de la primera página que se llamará contacto.htm.

<html><head></head><body>

<form method="post" action="enviar_mail.php">

<table style="text-align: left; width: 100%;" cellpadding="3" rules="rows">

<tbody>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

131

<tr>

<td>Nombre:</td>

<td><input type="text" name="nombre" id="nombre" /></td>

</tr>

<tr>

<td>Correo electrónico:</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>¿Cómo nos conociste?:</td>

<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 type="radio" name="referente" id="ref_web" value="web"

/>

La Web </label><br />

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

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

132

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" colspan="2"><input type="submit" value="Enviar" />

<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 interactúa el usuario.

Un formulario, está delimitado por la etiqueta <form></form>. Como mínimo, suele tener dos atributos, propios del formulario:

• method: es la manera en la que se enviarán los datos. Sus valores pueden ser get, que muestra los datos en la barra de direcciones, o post, que los envía de forma separada.

• action: como valor, contiene a dónde se enviarán los datos. En nuestro caso, sería una página PHP (action="enviar_mail.php").

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

133

Dentro del formulario, podemos tener cualquier elemento, como párrafos o tablas para organizar los controles.

Entre los controles podemos encontrar:

• Cajas de texto de una línea, con la etiqueta <input type="text" /> .

• Cajas de texto multilínea, con la etiqueta <textarea></textarea> .

• Casillas de verificación, con la etiqueta <input type="checkbox" /> . • Casillas de opción, con la etiqueta <input type="radio" />

• Menú de opciones, con la etiqueta <select><option></option>...</select> .

• Botones, con la etiqueta <input type="submit"> o la etiqueta <button>

Los controles que recogen datos, llevan además 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.

También es indispensable el botón, ya que al pulsarlo, envía la página al action del formulario.

Puedes ver el aspecto final del formulario.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

134

11.3. PHP. Código de ejemplo Una vez creado el formulario, necesitamos la página a la que se envían los datos, y que se encarga de recogerlos, comprobarlos y procesarlos. En nuestro caso, la hemos llamado enviar _mail.php, y su código es el siguiente:

<?php

//comenzamos recogiendo los datos

function recogeDato($campo){

return isset($_REQUEST[$campo])?$_REQUEST[$campo]:'';

} //la función recogeDatos comprueba si se ha recibido un dato y recoge su valor

//si no se ha recibido, le asigna un valor vacío.

$email1 = recogeDato('email1');

$email2 = recogeDato('email2'); //asignamos cada valor a una variable

$consulta = recogeDato('consulta');

$nombre = recogeDato('nombre');

$conocio = 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 = TRUE; //si encontramos un error,mostramos un mensaje

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

} elseif($email1!=$email2){ //si tiene algo, que concida con la repetición

$algunerror = TRUE;

echo "<p class=\"erroneo\">Los eMails introducidos no coinciden.</p>\n";

}

if($nombre==''){ //comprobamos que el nombre no haya quedado vacío

$algunerror = TRUE;

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

}

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

135

if($consulta==''){ //comprobamos que el contenido de la pregunta no esté vacío

$algunerror = TRUE;

echo "<p class=\"erroneo\">El área de la consulta no puede quedar en

blanco.</p>\n";

}

if ($algunerror){ //comprobamos si ha habido algún 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="[email protected]"; //si todo es correcto, enviamos el correo

$asunto="Contacto web Flores - consulta sobre ".$referente;

$mensaje="Datos del formulario de contacto:\n". //creamos el mensaje con los

datos

"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";

}

?>

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

136

Al contrario de lo que ocurría con JavaScript, el navegador no puede interpretar el código PHP. Esto quiere decir que si abrimos una página PHP en nuestro equipo, no se ejecutará el código. El código PHP, debe de ser interpretado por un servidor, así que para poder verlo, tenemos que ver la página a través de un servidor.

Tenemos dos opciones, o convertir nuestro equipo en un servidor, instalando por ejemplo el paquete WAMP, o podemos subir la página 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 mayoría no te deja enviar eMails. Y lógicamente, para probar este ejemplo, no compensa contratar uno de pago.

Seguramente, en el código que hemos mostrado, has reconocido algunas estructuras, como los if. La mayoría de estructuras de control de PHP (condiciones, bucles...) funcionan igual que en JavaScript. Incluso puedes ver que al principio hemos declarado una función tal y como lo hacíamos en JavaScript.

¿Qué es una página PHP? Realmente, una página PHP no es más que un archivo de texto con la extensión .php. En esa página, hay código PHP y HTML. De hecho, podemos cambiar la extensión de una página HTML a PHP y se vería igual. Lo que hace el código PHP es generar el código fuente de la página final. Por ejemplo, con una condición, decidimos si escribir un código u otro.

Para que el servidor interprete el código PHP, este debe de ir entre las marcas <?php y ?>

Por ejemplo, la estructura de una página PHP podría ser:

<html>

<head>

<title>Página PHP</title>

...Código HTML...

<?php ...código PHP... ?>

</head>

<body>

...Código HTML ...

<?php

...código PHP...

...código PHP...

...código PHP...

?> ...código HTML ... <?php

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

137

...código PHP...

?>

...código HTML...

</body>

</html>

Aunque no tiene por qué tener HTML. Por ejemplo, podemos tener una página con todas las funciones que utiliza nuestro sitio. Para incluir una página dentro de otra, podemos empelar la instrucción include("pagina.php");.

Cuando consultemos la página PHP en el servidor, al navegador no le llega el código PHP, le llega sólo el HTML generado por el PHP.

11.4. Recoger los datos Estamos utilizando una página en PHP para recoger los datos de un formulario. Vamos a comenzar por ahí.

Al crear el formulario, establecemos el método de envío (method) como post o get. Los datos del formulario llegan a la página PHP a través del array $_POST o $_GET, dependiendo del método de envío. O podemos usar el array $_REQUEST, que sirve para los dos. Por ejemplo, si un control del formulario tenía el nombre (name) email, su valor queda almacenado en $_REQUEST['email'], y podemos tomarlo.

En una instrucción, 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 dólar):

$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 sólo se envían si están marcados.

Por eso, primero tenemos que confirmar si existe la variable. Para eso, tenemos la función isset(variable). Esta función, 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 vacío (""). Así no nos dará error. Por lo tanto, podemos recoger el valor así:

$email = (isset($_REQUEST['email'])) ? $_REQUEST['email']) : "";

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

138

Observa que empleamos la estructura variable = (condición) ? "valor si se cumple" : "valor si no"; que ya vimos en JavaScript.

isset es una de las muchas funciones predefinidas en PHP.

Como tenemos que repetir esto para cara campo del formulario, podemos crear una función:

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 vacío:

if ($campo==""){

// error. El campo no puede quedar vacío

} else {

// correcto

}

Dependiendo de la finalidad de los datos, se pueden hacer comprobaciones más o menos complejas. Por ejemplo, que un número esté en un rango, que un email tenga formato válido, o que un dato que se guardará en una base de datos, no contenga código malicioso.

Una vez comprobados todos los datos, si son correctos, continuamos con la ejecución de la página. En nuestro ejemplo, sólo es enviar un correo, pero podría 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, sería una ventaja tener también el formulario en un archivo PHP, ya que podríamos marcar directamente los campos erróneos, y podemos mostrar al usuario los datos introducidos para que sólo tenga que corregirlos y no volver a introducirlos.

Con lo que hemos visto, ya podemos crear la página de envío, con el ejercicio paso a paso Recoger datos y enviar un correo.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

139

En vez de tener el formulario y el PHP en páginas separadas, vamos a unirlos en una página con el ejercicio paso a paso Formulario en PHP. Esto nos permitirá hacer muchas más cosas con el formulario.

Con todos estos cambios, nuestro sitio web ha quedado así.

Si estás viendo este curso en tu equipo, comprobarás que no se ve bien, ya que vemos el código fuente PHP. Puedes ver cómo quedaría en un servidor capaz de ejecutar el PHP. Consulta a tu profesor sobre esta apartado.

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 páginas realmente dinámicas: foros, blogs, tiendas on-line, buscadores, etc...

Si no sabes qué es una base de datos, consulta este anexo Base de Datos

Imaginemos lo que supondría incluir una base de datos en nuestro sitio de ejemplo.

Lo que más tiempo nos ha llevado ha sido lo relacionado con las fotografías de las flores, porque tenemos bastantes. Por una parte, las galerías, que hemos tenido que crear a mano, con el riesgo de haber puesto algún ID mal, y que el enlace desde la tabla de índice no funcione. Y por otra parte la tabla de enlaces, que además está ordenada alfabéticamente. Si ahora queremos añadir una nueva flor, tenemos que hacerlo en la posición que le corresponde. Como las filas alternan color de fondo, al añadir una, tendríamos que cambiar los colores de todas las filas siguientes. Eso es mucho trabajo.

Y si imaginamos que la página tiene miles de fotos, ya demás los usuarios quieren subir fotos nuevas a diario, hacerlo a mano sería sencillamente imposible.

En cambio, podríamos crear una base de datos, con una tabla que tenga cuatro campos: nombre de la flor, nombre científico, categoría y nombre del archivo de imagen.

Ahora, para crear las fichas de las flores, no tenemos más que hacer una función 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 habría que hacer

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

140

una consulta que nos devuelva las flores ordenadas por nombre, y crear un bucle que muestre un registro en cada fila. Además, no necesitaríamos una página distinta para cada categoría. Bastaría con consultar en la base de datos sólo las flores de una determinada categoría.

Además nos permite añadir funcionalidades a nuestra web, como un buscador, guardar datos sobre las imágenes más vistas, o que los usuarios puedan subir sus propias imágenes, ya que podemos permitir añadir y editar registros desde un sencillo formulario en la web.

PHP utiliza principalmente MySQL y SQLite como sistemas de gestión de bases de datos. Utilizarlos resulta sencillo, ya que las funciones que nos permiten utilizar las bases de datos ya están definidas en PHP. Además, es Internet podemos encontrar un sinfín de ejemplos y ayudas.

11.6. Para saber más... En los siguienetes enlaces puedes aprender más 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.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

141

Unidad 12: Publicar 13.1. Introducción Una vez tenemos terminada nuestra página web sólo queda publicarla en Internet para hacerla accesible a los millones de internautas de todo el mundo. Hoy en día nos parece normal que cualquier persona del planeta pueda ver nuestras páginas web en Internet pero hasta la década de 1990 a nadie se le hubiera ocurrido soñar que sería tan fácil y tan barato poder comunicarse con tanta gente.

Básicamente para publicar hace falta tener acceso a un servidor de Internet y disponer de una forma de subir los archivos al servidor. También es conveniente saber lo que es un dominio de Internet y cómo hacer que nuestra página sea encontrada por los buscadores.

También podemos publicar en un servidor local instalado en nuestro computador, de esta forma podremos probar las páginas dinámicas 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. Todos estos son recursos gratuitos que puedes descargar y utilizar.

13.2. Servidores Para que tu página 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, sólo hace falta un ordenador, una dirección IP fija, una conexión telefónica y un software adecuado, como el servidor Apache, que además es gratuito. Esto explica el gran crecimiento inicial de Internet. Han surgido miles de servidores que comparten su información por el simple gusto de aprender y enseñar. Y muchos más que esperan hacer negocio en la red.

De todas formas, crear un servidor tiene cierta complejidad y se sale del ámbito de este curso, además necesitarías una conexión permanente a Internet y un ordenador con el servidor web en funcionamiento las 24 horas del día. Sí es más accesible instalar en servidor local como WAMP.

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 más serias es conveniente utilizar un servidor de pago.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

142

• Servidores gratuitos.

Podemos diferenciar dos alternativas gratuitas:

o Sitios especializados. Existen algunos sitios web especializado en ofrecer espacio gratuito como Fortunecity, Tripod, iEspaña, Galeon, etc. La mayoría colocarán publicidad en las páginas alojadas. Los servidores gratuitos pueden imponer restricciones en el uso de ciertas instrucciones de programación web y no te permiten cambiar la configuración del servidor. Cada vez es más difícil encontrar servidores gratuitos con un mínimo 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 sólo es gratuito el primer mes, que hay que tener un número mínimos de visitas, etc.

También hay que destacar que la mayoría de servidores gratuitos no admiten el uso de páginas dinámicas ni bases de datos.

o Proveedores de acceso. Cuando contratas un servicio de conexión a Internet a través de un proveedor, suelen ofrecer de forma gratuita un espacio web en sus servidores. Por ejemplo ya.com, Orange, Telefónica, etc. Si ya tienes contratada una conexión a Internet, revisa las condiciones porque probablemente tienes derecho a un espacio gratuito en el servidor.

• Servidores de pago.

Si quieres tener un lugar más profesional donde colocar tus páginas 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 www.hostingDePago.com , Amazon, godaddy, entre otros y ver sus condiciones y tarifas.

Los servidores pueden ser de dos tipos básicos, compartidos o dedicados. Un servidor compartido (shared hosting) es aquel que comparte máquina física con otros servidores compartidos. En un servidor dedicado una máquina física soporta un solo servidor dedicado.

En un servidor compartido no se te permiten cambiar completamente la configuración del servidor, ni hacer reinicios físicos de la máquina, mientras que un servidor dedicado puedes hacer todo lo que quieras puesto que el servidor está completamente a tu disposición. Inicialmente es preferible un servidor compartido ya que es más asequible y ofrece

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

143

prácticamente 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 configuración muy especial del servidor.

Los servidores ubicados en EE.UU. ofrecen más recursos por el mismo precio pero con el inconveniente de la atención al cliente en inglés.

En este buscador de alojamiento o Hosting puedes encontrar servidores con las características que desees: BuscaHost.

A la hora de contratar un servidor ten en cuenta que es importante la velocidad con la que las páginas 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.

También es importante fijarse en las condiciones del servicio de atención al cliente que ofrecen los distintos proveedores.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

144

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 deberás 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 año vale sobre 25 euros. Las empresas que ofrecen alojamiento también 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 ningún 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:

1. Utilizar un programa específico 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 dirección del servidor FTP con el que queremos conectar. Nuestra dirección nos la proporcionará la empresa con la que tengamos el alojamiento.

Una vez conectado, los programas FTP tienen un interfaz bastante simple. Básicamente, nos muestran los archivos de nuestro equipo a un lado, y los del servidor a otro. Con lo que no tenemos más 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.

2. Utilizar un editor de páginas 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 cómodamente usando el interfaz del editor. Además,

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

145

nos permiten tenerlos sincronizados, e ir subiendo automáticamente aquellos archivos que vayamos actualizando.

3. 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 través del que subir archivos al servidor. Este interfaz depende de la empresa. Los de alojamientos gratuitos suelen ser bastantes simples, permitiéndonos subir unos pocos archivos cada vez a través de un formulario web. Esto resulta muy tedioso si tenemos que subir un sitio completo de tamaño medio. Los alojamientos de pago suelen tener un mejor servicio. Algunos implementan un interfaz muy completo (WebFTP) que realmente puede sustituir al cliente FTP.

13.5. Obtener visitantes Una vez tengas tu página 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 página tenga contenido interesante, buen diseño y se actualice periódicamente.

Además de lo anterior aún hay algunas otras cosas que se pueden hacer para conseguir más visitas y que vamos a detallar a continuación.

Los visitantes llegan por primera vez a una página web de dos formas básicas, una es a través de los buscadores y la segunda a través de enlaces que los internautas encuentran en otras páginas. No hay una estadística oficial de la importancia de cada vía de acceso, pero se estima que es más importante a través de los buscadores, en torno a un 80-90%, aunque inicialmente los enlaces tienen más importancia porque sin ellos no podremos subir puestos en los buscadores.

Para conseguir visitas provenientes de los buscadores hay que utilizar técnicas de posicionamiento y para conseguir visitas desde otras páginas hay que conseguir enlaces. Aunque ambas están relacionadas, ya que cuantos más enlaces tengamos, mejor apareceremos en los buscadores, y viceversa.

Aunque algunos se empeñan en decir que las técnicas de posicionamiento e intercambios influyen mucho en el número de visitas recibidas (y cobran mucho dinero por aplicarlas) en realidad lo más importante es el contenido de la web, ya que con un buen contenido, los propios buscadores te incluyen automáticamente en sus buscadores en una buena posición y los webmasters incluyen enlaces a tu página sin pedírselo. Esto no quiere decir que no haya que utilizar estas técnicas, sino que su importancia es relativa y supeditada al contenido de la página.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

146

Posicionamiento: Fundamentalmente nos vamos a referir al posicionamiento en el buscador Google, porque es el más utilizado y porque los demás 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 páginas que mejor responden a esa búsqueda. Estos procesos son secretos y los buscadores sólo dan una información 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 páginas no hagan trampas para obtener mejores posiciones. Además según 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 páginas web, se impone el sentido común, y lo mejor es dedicarse a mejorar en contenido en lugar de andar bordeando el límite de lo permitido en técnicas de posicionamiento.

Después de estos preámbulos, vamos ya con las técnicas 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 número de páginas existentes, a los robots de los buscadores (también conocidos como arañas o crawlers) les lleva bastantes días encontrar las páginas 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 demás viene rodado. Contenido de calidad quiere decir contenido interesante, bien redactado y con diseño agradable. Una página con un buen contenido y mal posicionamiento tardará más en alcanzar una buena posición, pero lo conseguirá.

2. Sitio bien estructurado y sencillo. Para los robots de Google cuanto más fácil sea extraer la información de la página tanto mejor. Hay que colocar suficientes enlaces de texto y con las palabras clave adecuadas y huir de las excesivas florituras y virguerías técnicas.

3. Lograr enlaces desde otros sitios web. El factor de más peso en el PageRank de Google es el número y la calidad de los enlaces que apuntan a nuestro sitio. Informa de la existencia de tu página a todo el mundo, principalmente a los sitios de temática similar. En el punto siguiente daremos más información sobre este tema.

4. Alta en Google. El primer paso para conseguir una buena posición en Google es aparecer en el buscador. Para hacerlo visita esta página: addurl.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

147

5. Infórmate de las reglas de los buscadores y no te las saltes, si lo haces y te penalizan perderás muchos meses para recuperar tu posicionamiento. En esta página tienes información sobre las directrices de calidad de Google.

6. Sobre el diseño de la página ten en cuenta estas recomendaciones, si utilizas demasiado Flash, frames, DHTML, JavaScript y mucha programación web harás más difícil el trabajo de los robots. Es conveniente utilizar títulos cortos y claros, con los estilos de encabezados (h1, h2). Los títulos son fundamentales en las búsquedas, procura utilizar el sinónimo más común, por ejemplo, coches, vehículos, autos, automóviles, carros. Hay herramientas para ver cuáles son las palabras más buscadas. Google no reconoce el texto incluido en imágenes, no utilices imágenes para los títulos ni para los enlaces principales del sitio web. Si utilizas imágenes, usa el atributo ALT para poner el texto relevante.

7. Para conocer las palabras clave más usadas hay herramientas como la proporcionada por Google AdWords. Con ella podemos ver la relevancia de palabras clave y las búsquedas que se han hecho con esas palabras.

8. Enlazar las páginas desde el propio sitio web de forma bien estructurada. 9. 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 menús con javascript son más intuitivos para los usuarios y mejoran el diseño de la página.

Como resumen podríamos decir que todas las técnicas de posicionamiento se resumen en dos, la primera es que generes contenido de calidad y la segunda que utilices las técnicas con sentido común y sin hacer trampas.

Conseguir enlaces. 1. Como venimos diciendo, la mejor forma de conseguir que otros webmasters

enlacen nuestra página es creando una página con contenido y diseño de calidad, así los webmasters considerarán que poner un enlace a nuestra página 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 difícil por lo que no queda otro remedio que invertir tiempo y esfuerzo en ello. Hay que buscar sitios de temática similar y registrarse, participar en las actividades, contestar preguntas en los foros, aportar algo de forma que luego podamos pedir a los demás usuarios y al webmaster que visiten y recomienden nuestro sitio. En función de la temática de nuestro sitio deberemos buscar participar en determinados lugares como Foros, Blogs, Directorios, Redes sociales, etc.

3. Intercambios de enlaces. Buscar sitios web de temática similar al nuestro y comprobar si tienen una sección de intercambio de enlaces, si es así escribirles y proponerles un intercambio. Lo lógico es que los intercambios se realicen entre

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

148

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á difíicil que acepten el intercambio. Según vaya aumentando nuestro PageRank podremos solicitar intercambios con sitios más importantes.

4. Amigos. Si conocemos a personas relacionadas con el mundo de las páginas web hay que comunicarles nuestro nuevo sitio web. Por supuesto, también 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

13.6. Publicidad Una vez tenemos publicada nuestra página en Internet y conseguidos muchos visitantes puede ser interesante incluir publicidad en ella. De forma mucho más sencilla de lo que pudiera parecer se pueden poner anuncios comerciales y conseguir dinero. La cantidad de dinero es proporcional al número de visitantes de la página.

Hay diferentes sistemas de publicidad en páginas web que, a efectos de este curso, agruparemos en estas categorías: publicidad contextual, publicidad directa, publicidad por registro y publicidad por agencia.

• La publicidad contextual es un sistema que inserta de forma automática publicidad relacionada con el contenido de la página web, por ejemplo, si la página habla de deporte, se insertarán anunci os de anunciantes relacionados con el deporte. Cada vez que un usuario hace clic en un anuncio el propietario de la página recibe una cantidad de dinero que varía según cada anuncio. El sistema más popular de publicidad contextual es AdSense de Google, y lo vamos a ver más en detalle a continuación.

• La publicidad directa es la que el propietario de la página acuerda directamente con el anunciante, en función del tipo de publicidad y del número 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 página. Existen programas gratuitos que permiten gestionar este tipo de publicidad contabilizando los clics.

• La publicidad por registro o afiliación 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 después. Es decir, en la publicidad por registro o venta el sistema controla si el usuario que hace clic acaba registrándose o comprando el producto anunciado, y en caso afirmativo el propietario de la página web recibe la comisión pactada previamente. Estos sistemas se basan en guardar una cookie

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

149

apuntándose número IP, en el ordenador del usuario cuando este hace clic en el anuncio, y comprobando luego si, en un plazo determinado de días, el usuario acaba comprando el producto o registrandose en la tienda on-line. En estos sistemas se ofrecen altas comisiones pero el número 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 también tiene una sección 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 páginas web particulares. Las agencias de publicidad en internet gestionan los anuncios de los grandes medios de comunicación y de empresas importantes.

AdSense de Google.

Como decíamos, este es el sistema más extendido de publicidad contextual y vamos a verlo con más 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 pequeños webmasters o propietarios de páginas 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 páginas 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, según se quiera ver.

Los sistemas de anuncios que prometen grandes ingresos suelen resultar, al final, poco satisfactorios.

Los formatos más usuales de publicidad son el banner, el anuncio de texto, anuncios multimedia y anuncios incrustados en los vídeos.

También se puede poner publicidad en los dispositivos móviles.

El sistema AdSense es utilizado por propietarios de páginas web (webmasters) y se encarga de mostrar anuncios de empresas (anunciantes) que quieren hacer publicidad en Internet.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

150

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 páginas. Google se encarga de colocar cada anuncio en las páginas que mejor se le adapten, y cuando un usuario hace clic en un anuncio cobra al anunciante y paga al webmasters , por supuesto, quedándose una comisión.

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é página no es un asunto trivial y Google tiene en cuenta varios factores para establecer una subasta instantánea entre las páginas 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 página, de forma que los anuncios tengan relación con las páginas, así es más 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.

Este sistema (AdSense-AdWord) es la pieza fundamental que explica por qué Google a logrado en tan pocos años ser una de las grandes empresas de informática del mundo, ya que antes de implantar este sistema Google tenía un buscador que usaba mucha gente pero no generaba apenas dinero.

AdSense es un sistema que puede ser utilizado tanto por pequeños webmasters como por grandes empresas, es sencillo de utilizar y no hace falta estar dado de alta como una empresa o un autónomo para usar AdSense. Es necesario poseer un dominio de internet y tener acceso a un servidor. Una vez dado de alta sólo hay que elegir uno de los formatos de anuncios disponibles, según el lugar de la página donde vamos a incluirlo y copiar el código generado por AdSense en dicho lugar. A los pocos minutos AdSense empezará a registrar los clics que realicen los visitantes de nuestra página y podremos comprobar el dinero generado mediante diferentes herramientas proporcionadas por el sistema.

La pregunta es ¿Cuánto dinero puedo ganar con AdSense? y la respuesta es fácil y poco precisa: depende de los clics que los usuarios hagan en los anuncios. Esto, a su vez, depende de varias cosas, la más importande es el número de visitantes de la página, pero también influye la calidad de la página ya que un mismo anuncio puede producir diferentes ingresos en una página o en otra. La calidad de la página la determina Google según varios parámetros que tienen en cuenta la importancia de la página, el diseño, la historia de la página dentro de AdSense, etc.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

151

El dato más manejado para medir las ganancias de una web es el eCPM (Coste por mil impresiones efectivo). Según Google, para los sitios grandes, el eCPM varía entre 0,05 y 5,0 USD, si tomamos el valor medio 2,52 quiere decir que por cada mil páginas que vean nuestros usuarios ganaremos 2,52 USD (1,7 euros). Para los sitios pequeños quizás el eCPM varíe entre 0,10 y 0,40 euros.

Con estos datos puedes realizar una estimación de lo que puedes ganar con tu web, conociendo el número de impresiones de páginas, ingresos = (impresiones x eCPM) / 1000. Por ejemplo, si tienes un millón de impresiones de páginas en un mes, y suponemos un valor medio del eCPM de 0,25 euros para un sitio pequeño, los ingresos serían (1.000.000 x 0.25 ) /1000 = 250 euros al mes.

Hay un mínimo de dinero al que hay que llegar para recibir el pago, por ejemplo el mínimo para España en 2009 anda sobre 70 euros. En AdSense se pueden poner anuncios de contenido, que son los más normales, y también anuncios de búsqueda, así como anuncios para móviles. En una página además de los anuncios de AdSense, también se pueden poner otro tipo de anuncios, aunque tampoco es recomendable poner excesiva publicidad porque el usuario se puede enfadar y no volver más.

13.7. Para saber más... Puedes ampliar lo visto en el tema con estos enlaces:

Buscadores y posicionamiento:

• Alta en varios buscadores, en abcdatos. • Cómo posicionar su página web en Google. • Google analytics

Servidores:

• Montar un servidor casero vicente-navarro.com

Publicidad

• AdSense • Tradedoubler.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

152

Unidad 14: Wordpress Existen formas de desarrollar Sitio Webs más rápidamente, para requerimientos específicios o más sencillos. Los CMS o Gestores de contenidos son la mejor opción para estos casos.

Este apartado lo veremos en una manual aparte llamada Wordpress

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

153

Anexos Recortar y redimensionar imágenes con Gimp

Objetivo

Utilizando GIMP y a partir de una fotografía de gran tamaño, tomada por una cámara de fotos, vamos a obtener dos fotografías: una miniatura, de un tamaño de 100x75 px, y otra grande, aunque menor que la original, para mostrarla en la página cuando se pulsa sobre la fotografía.

La foto que tomaremos es flor_amarilla_grande.gif, que puedes encontrar en la carpeta de ejercicios.

Ejercicio 1: Reducir la imagen 1. Arranca GIMP 2. Para abrir la imagen, arrastra la el archivo flor_amarilla_grande.gif desde la

ventana del explorador que muestra la carpeta de ejercicios hasta la ventana de GIMP.

3. Pulsa en el menú Imagen y selecciona Escalar la imagen... para acceder a la ventana Escalar la imagen que se muestra a continuación.

4. Vamos a reducirla a la mitad. En el desplegable que aparece junto al tamaño de la imagen, selecciona porcentajes en lugar de pixeles.

5. En Anchura, introduce 50. 6. Para aplicar el reescalado, pulsa Escala. 7. Vamos a guardar la imagen. Pulsa en el menú Archivo → Guardar como.... 8. En Nombre, cambia el nombre a flor_amarilla.jpg. 9. Pulsa Guardar. 10. En la siguiente ventana podríamos ajustar otros parámetros. No vamos a entrar

en detalles, así que pulsa Guardar.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

154

Ejercicio 2: Crear una miniatura Hasta ahora, hemos obtenido una imagen igual que la original, pero de la mitad de tamaño. Aún así, la imagen es bastante grande. Ahora, vamos a crear una miniatura de 100x75 px. Para ello no sólo reduciremos la imagen, si no que la recortamos para que muestre, sobre todo, la flor.

1. Haz clic sobre la herramienta Selección de rectángulos Selección de rectánculos.

2. Sobre la imagen, traza un cuadrado con lo que quieres que se muestre en la

miniatura. Fíjate sólo en el ancho, y deja el alto más grande de lo que correspondería. Ya lo ajustaremos al tamaño exacto.

3. En el menú Imagen, selecciona Recortar a la selección. 4. En el menú Imagen, selecciona Escalar la imagen.... 5. En el desplegable del tamaño, selecciona píxeles. 6. En anchura, introduce 100 y pulsa Escala. 7. Aumenta el zoom. En la barra de estado encontrarás un desplegable. Selecciona

100%.

8. Con la herramienta Selección de rectángulos Selección de rectánculos, traza un rectángulo más ancho que la imagen.

9. En el panel Caja de herramientas, a la izquierda, en la parte inferior, encontramos la sección Tamaño, con dos valores. El primero es el ancho de la selección y el segundo el alto. Establece el alto a la medida que se nos indicaba, 75 px. El Ancho da igual, siempre que sea mayor de 100 px.

10. Mueve la selección arriba o abajo, haciendo clic sobre ella y arrastrando, para que encierre el área que nos interesa en la miniatura. Asegúrate de que está seleccionado todo el ancho.

11. En el menú Imagen, selecciona Recortar a la selección. 12. Vamos a guardar la imagen. Pulsa en el menú Archivo → Guardar como.... 13. En Nombre, cambia el nombre a flor_amarilla_mini.jpg. 14. Pulsa Guardar. 15. Vuelve a pulsar Guardar.

Aquí tienes algunos ejemplos de cómo puede haber quedado la miniatura:

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

155

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

156

Esquinas redondeadas con borde

En la unidad ya hemos visto cómo crear las esquinas redondeadas con imágenes de fondo. Vamos a hacer lo mismo para crear la siguiente caja:

Lo primero que haremos, será crear las imágenes para las esquinas, que en este caso son: (red_naranja_lt.png), (red_naranja_rb.png), (red_naranja_lb.png) y (red_naranja_rt.png). La única diferencia con lo que habíamos hecho antes es el tamaño, que será de 10x10 px, y que hay un borde. Puede parecer poco, pero el borde es una gran diferencia. Si lo hacemos exactamente como antes, pero cambiando el alto de 25px a 10px, obtendríamos lo siguiente:

Esto se debe a que el borde está alrededor de la división, no dentro de ella. Para conseguir el efecto que buscamos, debemos de desplazar un poco la imagen para que quede encima del borde. La propiedad que nos permite desplazar un elemento con respecto a su posición inicial es el posicionamiento relativo (position: relative;). La idea es desplazar las divisiones que contienen las imágenes hasta colocarlas encima del borde. En el caso de la división con la imagen de la esquina superior izquierda (div.red_arriba), hay que desplazarla a la izquierda el grosor del borde (left: -1px) y arriba lo mismo (top: -1px). El div de la derecha (div.red_arriba div) no hará falta desplazarlo hacia arriba, porque ya hemos desplazado el div que contenía a este, y a la derecha habremos de desplazarlo el grosor + lo que lo habíamos desplazado a la izquierda (right: -2px;).

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

157

div.redondo_borde {

background-color: #f0d7b5;

border: 1px solid #ff7600;

}

div.red_arriba {

background-image:

url(graficos/red_naranja_lt.png);

background-position: left top;

background-repeat: no-repeat;

height: 10px;

position: relative;

left:-1px; top:-1px;

}

div.red_arriba div {

background-image: url(graficos/red_naranja_rt.png);

background-position: right top;

background-repeat: no-repeat;

height: 10px;

position: relative;

right: -2px;

}

En nuestro ejemplo, vamos a utilizar la misma estructura de divisiones que utilizábamos con div.redondo, pero al principal, en vez de asignarle la clase redondo, le asignaremos redondo_borde. Esto hace que que sólo tengamos que declarar las propiedades que son distintas entre redondo y redondo_borde, como son el estilo de la división principal, el alto de las divisiones anidadas (10px), la imagen que utilizan y su posicionamiento relativo.

Los estilos que hemos generado son los siguientes:

div.redondo_borde {

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

158

border: 1px solid #ff7600;

color: #3d2e2a;

background-color: #f0d7b5;

}

div.redondo_borde div.red_arriba, div.redondo_borde div.red_arriba div,

div.redondo_borde div.red_abajo, div.redondo_borde div.red_abajo div {

height: 10px;

position: relative;

}

div.redondo_borde div.red_arriba {

background-image: url(imagenes/red_naranja_lt.png);

left: -1px;

top: -1px;

}

div.redondo_borde div.red_arriba div {

background-image: url(imagenes/red_naranja_rt.png);

right: -2px;

}

div.redondo_borde div.red_abajo {

background-image: url(imagenes/red_naranja_lb.png);

left: -1px;

bottom: -1px;

}

div.redondo_borde div.red_abajo div {

background-image: url(imagenes/red_naranja_rb.png);

right: -2px;

}

div.redondo_borde div.contenido {

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

159

margin: 0 10px;

}

Una vez definidos los estilos, los hemos aplicado a elementos de nuestro sitio: al div.cita de la página nosotros.html, y a la tabla de la página flores/index.html. Para hacerlo, hemos creado al estructura de divisiones (div.redondo, div.red_arriba, div.red_arriba div, div.contenido, div.red_abajo, div.red_abajo div) y hemos puesto el elemento (div.cita y la tabla) dentro del div.contenido. En el caso de la tabla, hemos editado su estilo (table#flores) para quitarle el borde y color de fondo que le habíamos dado.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

160

Ejercicio paso a paso: Recoger datos y enviar un correo

Objetivo

Vamos a crear una página en PHP que recoja los datos del formulario de contacto.html. La página, recogerá los datos, comprobará que el nombre, la consulta y el email no estén vacíos, y que además, el email repetido sea el mismo. Si todo es correcto, enviaremos un correo a nuestra cuenta con los datos. Si algún campo no pasa la validación, informaremos al usuario, mostraremos un enlace para volver al formulario, y no enviaremos el correo.

Para enviar un correo con PHP empleamos la función mail(), de la siguiente manera:

mail("email_destino", "asunto", "cuerpo_mensaje");

Nota: Por seguridad, algunos hostings gratuitos, aunque permiten PHP, no permiten enviar mensajes.

Ejercicio

Abre el archivo base.html, y guárdalo como enviar_mail.php.

1. En el título (h2), escribe Contacto. 2. Cambia el párrafo por las marcas de apertura (<?php) y cierre (?>) del PHP.

Todo el código que escribiremos a continuación, irá dentro de esas etiquetas. 3. Comenzamos por recoger los datos. Declara la función recogeDato, explicada en

la teoría:

function recogeDato($campo) {

return (isset($_REQUEST[$campo])) ? $_REQUEST[$campo]) : "";

}

4. Utilizando la función anterior, guardamos cada uno de los datos enviados por el formulario en una variable:

$email1 = recogeDato('email1');

$email2 = recogeDato('email2');

$consulta = recogeDato('consulta');

$nombre = recogeDato('nombre');

$conocio = recogeDato('conocio');

$referente = recogeDato('referente');

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

161

5. Además, utilizaremos la variable $algunerror, a la que le damos un valor inicial Falso. Lo que haremos sera ponerla a verdadero (TRUE) si algún dato no es válido. Al final, si $algunerror es TRUE, es que hay algún dato incorrecto, por lo que no enviaremos el correo.

Añade la instrucción $algunerror = FALSE;

6. Ahora que los datos están en variables, vamos a comprobarlos. El nombre es un campo obligatorio. Comprobamos si el valor es igual al que le asigna la función recogeDato si no está defindo ($nombre==""). Si es verdadero, ponemos $algunerror a verdadero ($algunerror = TRUE;) y mostramos el mensaje de error. Si no es cierto, continuamos.

Añade el bloque If:

if($nombre==""){

$algunerror = TRUE;

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

}

7. Del mismo modo, comprobamos que $consulta no sea vacía. Añade el siguiente bloque:

if($consulta==""){

$algunerror = TRUE;

echo "<p class=\"erroneo\">El área de la consulta no puede quedar en

blanco.</p>\n";

}

8. También tenemos que comprobar el e-Mail, que aparece en dos variables ($email1 y $email2). Primero comprobamos si está vacío ($email1==""). Si lo está marcamos el error y mostramos el mensaje. Si no, tenemos que comprobar si los dos son distinto ($email1!=$email2). Si se cumple, es decir, si son distintos, marcamos el error y mostramos el mensaje. Si no, continuamos. Añade el siguiente bloque de instrucciones:

if($email1==''){

$algunerror = TRUE;

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

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

162

} elseif($email1!=$email2){

$algunerror = TRUE;

echo "<p class=\"erroneo\">Los eMails introducidos no

coinciden.</p>\n";

}

9. Ahora ya hemos comprobado los datos relevantes. Si $algunerror es verdadero, es que algún dato no era correcto. Así que escribimos un mensaje y un enlace para volver al formulario. Si no es verdadero, es que no han habido errores. Podemos componer un mensaje con los datos, y enviarlo a nuestra dirección de correo.

Escribe el siguiente bloque, cambiando [email protected] por tu dirección:

if ($algunerror){

echo "<p>&nbsp;</p>\n";

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 = "[email protected]";

$asunto = "Contacto web Floramics - consulta sobre ".$referente;

$mensaje = "Datos del formulario de contacto:\n".

"Nombre: $nombre \n".

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

"Nos conoció por: ".$conocio." \n".

"Pregunta: ".$consulta;

mail($para, $asunto, $mensaje);

echo "<p>Tu mensaje se ha enviado correctamente. Gracias por

contactar con nosotros.</p>\n";

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

163

echo "<p>Nos pondremos en contacto lo antes posible.</p>\n";

}

10. Guarda la página. 11. Añade a la hoja de estilo el estilo .erroneo {color: darkred;}. 12. Prueba la página en el servidor, subiéndola, y subiendo también el formulario.

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

164

Bases de datos Una base de datos es un conjunto de datos que están organizados para un uso determinado y el conjunto de los programas que permiten gestionar estos datos es lo que se denomina Sistema Gestor de Bases de Datos.

Casi todos los sistemas de gestión de base de datos modernos almacenan y tratan la información utilizando el modelo de gestión de bases de datos relacional.

En un sistema de base de datos relacional, los datos se organizan en Tablas.

Las tablas almacenan información sobre un tema como pueden ser los clientes de una empresa, o los pedidos realizados por cada uno de ellos; las tablas se relacionan de forma que a partir de los datos de la tabla de clientes podamos obtener información sobre los pedidos de éstos.

Tablas de datos

Una tabla de datos es un objeto que se define y utiliza para almacenar los datos. Una tabla contiene información sobre un tema o asunto particular, como pueden ser como hemos visto antes, clientes, pedidos etc...

Las tablas contienen campos o columnas que almacenan los diferentes datos como el código del cliente, nombre del cliente, dirección,...

Y al conjunto de campos para un mismo objeto de la tabla se le denomina registro o fila, así todos los campos de un cliente forman un registro, todos los datos de otro cliente forman otro registro...

Si consideramos una posible base de datos con los datos de una empresa, una tabla de CLIENTES podría ser:

Campos

Código Nombre Apellidos Dirección C.P.

Registro 1

1 Luis Grande Lilos C/ Germanías, 23 46723

Registro 2

2 Marta Fran Dardeno C/ Mayor, 34 46625

Registro 3

3 Francisco Juan López C/ Valle, 56 46625

Registro 4

4 María Huesca Buevo C/ Franciscano, 67 46521

Toda tabla debe tener un campo que sirva para identificar cada uno de sus registros, ese campo es la clave principal. La clave principal proporciona un valor único para cada fila

Guía del Estudiante | Desarrollo Web

Departamento de Docencia| Instituto de Capacitación WORLDKEY®

165

de la tabla y nos sirve de identificador de registros de forma que con esta clave podamos saber sin ningún tipo de equivocación el registro al cual identifica. No podemos definir más de una clave principal, pero podemos tener una clave principal compuesta por más de un campo.

Un campo definido como clave principal no podrá aceptar valores duplicados (es decir que no podrán existir dos filas con el mismo valor en ese campo), ni podrá contener el valor nulo.

El valor nulo es un valor especial que indica la ausencia de valor, si en un campo de una fila tenemos el valor nulo (null en inglés) esto indica que esta fila no contiene ningún valor en ese campo. Si un campo está definido como no nulo (NOT NULL) el usuario estará obligado a rellenarlo cuando introduzca una nueva fila.