Beruflich Dokumente
Kultur Dokumente
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto. Te esperamos.</p>
</body>
</html>
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. Si no sabes cómo indicar una dirección relativa, consulta este
básico .
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 IE7, 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/aulaclic.gif" alt="aulaClic" width="91" height="41" title="El logo de aulaClic"
/>
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.
Este es el código:
<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>
<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. Te esperamos.</p>
</body>
</html>
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 (en este tema básico sobre unidades de medida puedes ver qué quiere decir em) , 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 ejempo, para asignarle la clase azul a la palabra información (que esta dentro de un
párrafo), escribiriamos:
<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>
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.
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.
Aún es posible aplicar formato sin separarlo del contenido, si quieres ver lo que no hay que hacer,
mira este tema básico.
Unidad 3. Aspecto de la página. Estilos básicos (III)
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 Kompozer.
Si todavía no lo has hecho, es conveniente que veas este tema básico sobre colores . Puedes
encontrar más información sobre los colores en el Curso de Illustrator.
En el tema 8 volveremos a hablar sobre colores, ampliando algunas cuestiones relativas a la
elección de los colores más apropiados.
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 Kompozer.
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.
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 sobrerrayado.
line-through, el texto aparece tachado.
blink, el texto parpadea. (No funciona en Internet Explorer, en Firefox 3, si).
Unidad 3. Aspecto de la página. Estilos básicos (IV)
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.
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>
<head>
<title>Bordes y má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árgenes</h1>
<p style="background-color:#99CCFF; margin: 0;">Éste es un párrafo sin
margen.</p>
<p style="background-color:#99CCFF; margin: 0;">Éste es otro párrafo sin
margen.</p>
<p style="background-color:#99CCFF; margin: 20px;">Éste es un párrafo con
margin:20px.</p>
<p style="background-color:#99CCFF; margin: 20px;">Éste es un párrafo con
margin:20px.</p>
<p style="background-color:#99CCFF; margin: 20px; padding: 10px">Éste es un
párrafo con
margin:20px y padding:10px.</p>
<p style="background-color:#99CCFF; margin: 20px; padding: 10px; border: cyan 4px
inset">Éste
es un párrafo con margin:20px, padding:10px y border: cyan 4px inset</p>
<p style="background-color:#99CCFF; margin-right:25%;">Éste es un párrafo con
margin-right:25%.<br />
Cambia al cambiar la ventana.</p>
</body>
</html>
Unidad 3. Aspecto de la página. Estilos básicos (VI)
3.5. Fondo
Otro aspecto que podemos personalizar es el fondo, con la propiedad background.
background-color nos permite establecer el color de fondo del elemento. Por ejemplo, background-
color: green;.
También podemos utilizar una imagen, con la propieadad 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á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>
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; o KompoZer. Nos hemos quedado con este último por ser bastante simple e
intuitivo.
Unidad 4. Editor Web (II)
4.3. El entorno de KompoZer
Vamos a echar un vistazo al entorno del editor KompoZer, y ver cómo realizamos con él las
acciones más comunes.
El aspecto general es el siguiente:
En la parte superior encontramos la barra de título, donde se ve el título de la hoja.
Debajo, encontramos una barra de menús, desde la que podemos acceder a todas las opciones del
programa. Las opciones más comunes, como Guardar, Nuevo, o insertar Enlaces o Imágenes las
encontramos en la llamada barra de redacción:
Debajo de esta barra, encontramos las barras de formato, pensadas para formatear el documento.
La forma en que podemos ver y trabajar con la página, depende del modo de edición, de las cuatros
disponibles en la parte inferior:
Normal. Con este modo, vemos el diseño de la página como se mostraría en un navegador. Aunque
aparecen algunas marcas más, como información de la ubicación de algunas etiquetas especiales,
como comentarios y scripts, y líneas rojas punteadas en los bordes de tablas y divisiones.
El modo Etiquetas HTML funciona como el anterior, pero mostrando en cada etiqueta un
cuadradito amarillo con su identificador.
El modo Código fuente nos permite trabajar directamente sobre el código fuente de la página.
El modo Vista preliminar, muestra la página como se vería en un navegador, sin ninguna marca
adicional.
También podemos ver el resultado en nuestro navegador predeterminado pulsando la tecla F5.
En la parte inferior, en la barra de estado, encontramos una barra que muestra la jerarquía de
etiquetas que hay sobre el lugar donde está el punto de inserción.
Es decir, lo que aquí vemos son todas las etiquetas que contienen a lo que tenemos seleccionado,
desde la más inmediata a la derecha del todo, a la primera, que suele ser el <body>.
Esto nos permite seleccionar cualquier etiqueta y todo su contenido sólo haciendo clic sobre ella.
Si hacemos clic derecho sobre una etiqueta, aparece un menú con opciones muy útiles:
En General, nos aseguraremos de que está marcada la opción Usar estilos CSS en lugar de
elementos y atributos HTML.
En Config. Nuevas páginas, si no lo está, en Conjunto de caracteres, seleccionaremos Occidental
(ISO-8859-1).
En Avanzado, vamos a cambiar las siguientes opciones:
En la sección Marcado, vamos a configurar el Lenguaje como XHTML1 y el DTD como Estricto.
Si quieres saber qué es esto y qué es el Doctype, consulta este avanzado .
Nos aseguraremos de que está marcada la opción Dentro de un párrafo, pulsar Enter lo cierra y crea
uno nuevo.
En Mostrar los siguientes caracteres como entidades, seleccionaremos Los anteriores y las letras
Latin-1, para que al introducir caracteres, como letras acentuadas, KompoZer los sustituya por la
entidad correspondiente.
Esto no quiere decir que debamos de seleccionar estas opciones para poder crear una página, pero
son las que utilizaremos en el curso.
4.5. Crear y guardar una página
Para crear una nueva página, basta con pulsar el botón . Esto creará una página.
Con las opciones que hemos configurado, el código de la página tendrá este aspecto
<!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></title>
</head>
<body>
<br />
</body>
</html>
Cuando realicemos cambios en la página, y no los hayamos guardado, aparecerá un pequeño icono
en la pestaña .
Para guardar los cambios, podemos pulsar la combinación de teclas Ctrl + S, o el botón .
La primera vez que guardemos la página, deberemos indicar el título que le queremos dar (el
contenido de la etiqueta title en la cabecera), y su ubicación.
4.6. Escribir texto en KompoZer
La forma de escribir el texto, utilizar el teclado, etc. es la misma que con cualquier editor de texto.
Es importante saber en qué elemento estamos escribiendo. Normalmente lo haremos dentro de
párrafos y encabezados, incluso en divisiones. Esto podemos seleccionarlo en el primer desplegable
de la barra de herramientas. En otras ocasiones, utilizaremos otros elementos como listas o tablas.
Recuerda, que siempre puedes saber en qué etiqueta estamos mirándolo en la barra de estado.
Nota: En este curso crearemos páginas XHTML Estrict, que no permiten escribir directamente
sobre el cuerpo del documento, hay que utilizar párrafos.
A la hora de escribir dentro de un párrafo, cuando pulsemos la tecla Intro crearemos un salto de
línea. Esto se debe a que cerramos el párrafo y comenzamos uno nuevo, porque así lo hemos
elegido en las opciones. Si lo que queremos es crear un salto dentro del párrafo, lo que equivaldría a
una etiqueta html del tipo <br />, tenemos que mantener pulsada la tecla Mayúsculas (Shift)
mientras pulsamos Intro.
Unidad 4. Editor Web (IV)
4.7. Hojas de estilo en KompoZer
Ya vimos cómo podemos definir un estilo incrustado para el elemento. Vamos a ver ahora como
crear y definir una hoja de estilo.
Todo lo referente a la hoja de estilo, se gestiona utilizando el Editor CSS, accesible a través del
botón .
Crear o adjuntar una hoja de estilo
Desde la ventana del editor, pulsamos sobre el desplegable de arriba a la izquierda, y seleccionamos
Elem. enlace, ya que una hoja es eso, un archivo externo que se enlaza.
La zona de la derecha cambiará como se ve en la imagen:
Si ya tenemos creada la hoja, solo tenemos que seleccionarla pulsando en Escoja archivo. Si la hoja
aún no existe, basta con introducir el nombre que queramos, para crear una hoja en la misma
carpeta que la página. En ambos casos, pulsamos en Crear hoja de estilos. Si no existía aún, el
archivo no se creará hasta que no definamos algún estilo. Para cerrar la ventana, pulsamos Aceptar.
Con esto, lo que hemos hecho realmente es incluir en la cabecera de la página la llamada a la hoja
de estilo. Puedes comprobarlo en la vista Código fuente.
Unidad 4. Editor Web (V)
Definir y editar un estilo
Podemos definir un estilo desde el mismo Editor CSS, pero seleccionando en el menú la opción
Regla.
Lo primero que tendremos que elegir será el selector que queremos utilizar. Podemos seleccionar
una de las opciones, según el tipo de selector, pero es más cómodo escribir directamente el selector
que nos interesa, por ejemplo body; o .miclase; o div#principal p... etc, cualquier selector válido.
Cuando lo tengamos, pulsamos en Crear regla de estilo. Nos encontraremos con una serie de
pestañas:
La pestaña General nos permite editar el estilo directamente, escribiendo propiedades y valores. El
resto de pestañas se refieren a categorías de propiedades, y en ellas podremos definir el estilo de
forma gráfica, lo que puede resultarnos más cómodo e intuitivo.
Los distintos selectores que definamos, aparecerán "colgando" de la hoja de estilo, en el panel de la
izquierda, para que podamos editarlos. Si queremos borrar el estilo seleccionado, debemos pulsar el
icono , y para cambiar el selector pulsamos en . Para editar las propiedades del estilo, no
tenemos más que cambiar lo que queramos en las distintas pestañas.
Por ejemplo, la categoría de Texto tiene el siguiente aspecto:
Podemos elegir el tipo de letra o fuente desde los desplegables, así como el color, tamaño y otras
características.
En la parte inferior de la ventana podemos previsualizar el aspecto del texto según los valores que
hayamos elegido.
Para elegir un color para el texto podemos escribir su valor en el campo Color o hacer clic en el
botón de la derecha para que se abra una ventana donde podremos seleccionar el color deseado.
Unidad 5. Preparar nuestro sitio (I)
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.aulaclic.es o www.elpais.com.
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.
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.
Unidad 5. Preparar nuestro sitio (II)
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. Por
ejemplo, en aulaclic.es tenemos una carpeta para cada curso. 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.
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í:
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.
Unidad 5. Preparar nuestro sitio (III)
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 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. Si no sabes qué son las listas, puedes verlo en este básico .
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.
Unidad 5. Preparar nuestro sitio (IV)
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:
Inicio (index.html)
Flores (flores/index.html)
Nosotros (nosotros.html)
Contacto (contacto.html)
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:
Encabezado
Título y menú
Contenido
Pie
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, visualiza la página con un navegador. Puedes pulsar F5 desde KompoZer o hacer
doble clic directamente sobre el archivo.
Unidad 5. Preparar nuestro sitio (V)
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
KompoZer.
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.
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>).
Por ejemplo, esto es lo que hemos introducido en el contenido del index.html, viéndolo en el modo
de edición de etiquetas de KompoZer:
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:
div.pie {
font-size: 80%;
text-align: center;
}
Unidad 6. Diseño y Usabilidad (III)
6.4. Fondo
Ya hemos comentado que el fondo del texto debe de tener un buen contraste. Así que las zonas de
nuestra 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.
Puede quedar bonito, pero distrae la atención del usuario.
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.
Por lo tanto, desde el editor de CSS de KompoZer, 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 KompoZer, 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;
}
Una vez creada la clase, se la vamos a asignar a las divisiones correspondientes. No tenemos más
que hacer clic en el texto que está dentro de la división a la que le queremos asignar la clase, y en la
barra de estado de KompoZer, hacer clic derecho sobre la etiqueta div. En el menú, elegimos clases
→ contenido.
Aplica las clases pie y contenido a los elementos correspondientes de todas las páginas creadas
hasta ahora.
Unidad 7. Maquetación web (I)
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.
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.
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.
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>
http-equiv="content-type" />
<title>Una columna</title>
<style type="text/css">
body {
background-color:#C2C5E7;
margin: 0;
div#contenido {
Unidad 7. Maquetación web (II)
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.
visible. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
hidden. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. Éste sí cabe.
scroll. Éste sí cabe.
Si el desbordamiento es visible, puede tapar a los elementos que haya después.
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.
Unidad 7. Maquetación web (III)
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.
Para practicar todo esto, te recomendamos hacer el ejercicio paso a paso Maquetar con
posicionamiento absoluto, y después el ejercicio paso a paso Simular páginas. Y para que veas que
con un poco de imaginación se pueden hacer muchas cosas, te recomendamos el ejercicio paso a
paso Texto en 3D.
En el primero de los ejercicios ejercicio paso a paso anterior hemos visto una forma de crear una
columna centrada en la página. Ya vimos que esto se podía hacer también definiendo un ancho y
utilizando la propiedad margin: 0 auto;. No da igual utilizar uno u otro. Si lo hacemos con
posicionamiento absoluto, y hacemos la ventana más pequeña que la columna, dejarán de verse el
lado derecho y el izquierdo por igual. En cambio, de la otra forma, dejara de verse el lado derecho
de la columna. Por lo que es mejor este sistema si tenemos un menú de navegación a la izquierda
que queremos que se vea siempre.
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.
Unidad 7. Maquetación web (VI)
7.7. Posicionamiento flotante
El posicionamiento es un poco distinto al resto. Para empezar, no se define con la propiedad
position, si no con la propiedad float. Puede tomar estos valores:
left : flotante a la izquierda (float: left;).
right : flotante a la derecha (float: right;).
none : sin flotante.
Lo que hace este posicionamiento es desplazar el elemento todo lo que pueda hacia la 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.
Normal. La imagen queda en la posición inicial, aumentando el alto de la línea, y no aparecen varias
líneas de texto junto a la imagen.
Derecha. La imagen está en la misma posición, pero con un float: right;. Esto permite que aparezcan
varias líneas de texto junto a la imagen, y cuando llegue al final, que continúe por debajo.
Izquierda. La imagen está en la misma posición, pero con un float: left;. Esto permite que aparezcan
varias líneas de texto junto a la imagen, y cuando llegue al final, que continúe por debajo.
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".
Normal. El párrafo se ajusta a la imagen y el texto.
Derecha. El párrafo sólo ajusta su alto al texto.
Además, si por ejemplo hay varios párrafos con elementos flotantes al mismo lado, hace que se
"amontonen":
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:
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:
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%;
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.
Unidad 7. Maquetación web (VII)
7.8. Posicionamiento fijo
El posicionamiento fijo (position: fixed;) se define igual que el posicionamiento absoluto, con las
propiedades top, bottom, left y right. Pero su comportamiento es distinto: el posicionamiento fijo se
refiere siempre a la ventana del navegador, independientemente de que el elemento posicionado esté
dentro de otro elemento con posicionamiento, como pasaba con el absoluto. 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Posicionamiento fijo</title>
<style type="text/css">
div#fijo_izquierda {
position: fixed;
left: 10%;
top: 50px;
width: 100px;
height: 100px;
border: #663366 5px double;
}
div#fijo_derecha {
position: fixed;
right: 10%;
top: 50px;
width: 100px;
height: 100px;
border: #663366 5px double;
}
div#columna {
width: 50%;
margin: auto;
}
.verde, .azul {
height: 500px;
border: #006666 5px dashed;
border-width: 0 5px 5px 5px;
position: relative;
}
.verde {
background-color: #66CC99;
}
.azul {
background-color:#6699FF;
}
</style>
</head>
<body>
<div id="fijo_izquierda">Posicionamiento fijo<br />Izquierda</div>
<div id="columna">
<div class="azul"></div>
<div class="verde"></div>
<div class="azul"></div>
<div class="verde"></div>
<div class="azul"></div>
<div class="verde"></div>
<div class="azul"></div>
<div class="verde"></div>
<div class="azul"></div>
<div class="verde"></div>
<div class="azul"></div>
<div class="verde">
<div id="fijo_derecha">Posicionamiento fijo<br />Derecha</div></div>
</div>
</body>
</html>
Inicio
Flores
Nosotros
Contacto
Noticias
En CSS no existe una propiedad para centrar verticalmente el contenido de un elemento. Pero en
casos como éste, en el que 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.
Unidad 8. Menús (III)
8.5. Distintos estilos del elemento
Es habitual que los elementos de un menú tengan varios estilos distintos: el estilo normal; el estilo
que muestra cuando tiene el cursor encima, que transmite al usuario la 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.
Si no sabes cómo cambiar el estilo de un elemento al pasar el cursor sobre él, consulta este básico
en el que te explicamos las pseudoclases.
También puede seguir el ejercicio paso a paso Utilizar pseudoclases CSS, en el que creamos un
estilo para nuestro sitio de ejemplo.
Utilizar uno o varios de estos estilos dependerá del diseño que queramos conseguir.
Puedes practicar cómo crear algunos menús con el ejercicio paso a paso Crear menús básicos.
Ahora, vamos a darle formato al menú de nuestro ejemplo, para que tenga el mismo aspecto que en
las siguientes imágenes:
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;".
Unidad 9. Imágenes (V)
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:
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, de los que encontrarás cursos en aulaClic. 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.
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{
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 avanzado .
Unidad 9. Imágenes (VI)
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.
En las páginas web, es frecuente utilizar imágenes para crear iconos, por ejemplo los de aulaClic
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.
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
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.
Unidad 9. Imágenes (VII)
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
.
En la ventana Borde y relleno, en la ventana Relleno, selecciona Gradiente lineal.
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).
Con esto, hemos conseguido el siguiente relleno:
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.
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.
Unidad 9. Imágenes (VIII)
Para la imagen que mostraremos al poner el cursor encima, le hemos cambiado el color de la
primera parada del borde por el mismo naranja del borde de la pestaña, ff7600ff. Al hacerlo, hemos
borrado la parada, y la hemos vuelto a crear, para que tenga un tono anaranjado.
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.
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.
Estas son las tres imágenes que hemos creado:
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.
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.
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.
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.
Unidad 10. JavaScript (I)
10.1. Introducción
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. Por ejemplo, pulsando en los colores, la
división toma ese color como color de fondo.
Verde Rojo Azul
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.
Unidad 10. JavaScript (II)
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.
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.
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>
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;).
Unidad 10. JavaScript (III)
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.
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
Unidad 10. JavaScript (IV)
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';
}
</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 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.
Unidad 10. JavaScript (V)
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 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/';
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>'+
'\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();
}
Unidad 10. JavaScript (VI)
10.6. Crear una archivo js
Tenemos ya tres funciones javascript que emplearemos en nuestro sitio. La que nos sirve para
mostrar la imagen, tendrá que estar por lo menos en todas las 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ú.
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;
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'+
'<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ó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.
Cuando estemos en una página del raíz, sólo enviamos la página, por ejemplo <script
type="text/javascript">cargarMenu('nosotros');</script>.
Unidad 10. JavaScript (VII)
10.8. noscript
Aunque hacer cosas en JavaScript resulta muy útil tiene un inconveniente. Y es que un visitante de
nuestra 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>
<div class="sinscript">Atenció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í.
Unidad 11. Formularios y PHP (I)
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, como el
que hay en aulaClic. 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. Si quieres ver las diferencias entre estos lenguajes visita este tema avanzado .
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>
<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" />
Las fotos </label><br />
<label><input type="radio" name="referente" id="ref_asociacion" value="asociacion" />
La asocioació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").
Dentro del formulario, podemos tener cualquier elemento, como párrafos o tablas para organizar los
controles.
Entre los controles podemos encontrar:
Escibe...
Cajas de texto de una línea, con la etiqueta <input type="text" /> .
Escribe aquí...
?>
...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.
Unidad 11. Formularios y PHP (III)
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']) : "";
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. Puedes ver algunas muy útiles en este
avanzado .
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.
Para el usuario, resulta molesto tener que enviar el formulario para que se compruebe en el servidor,
que se le devuelva con errores, y tener que corregirlos o volver a rellenarlo. Por eso, es una buena
idea validarlo primero con JavaScrit antes de enviarlo, como explicamos en este avanzado .
En vez de tener el formulario y el PHP en 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 si lo ves en la web de aulaClic, pulsando aquí.
Unidad 11. Formularios y PHP (IV)
11.5. Bases de datos
Para nuestro sitio de ejemplo, hemos visto un uso muy sencillo y reducido del PHP. Pero este
lenguaje ofrece posibilidades muy potentes, sobre todo combinado con bases de datos, lo que nos
permite crear páginas realmente dinámicas: foros, blogs, tiendas on-line, buscadores, etc...
Si no sabes qué es una base de datos, consulta este básico .
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 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.
Unidad 12. Funciones extra (I)
En este tema vamos a ver algunas de las posibilidades gratuitas que nos ofrece la red para dotar a
nuestras páginas web de mayores posibilidades.
Existen multitud de aplicaciones y librerías de código gratuito y de gran calidad, listas para usar, es
muy interesante conocer que existen. En cualquier momento se puede presentar la ocasión adecuada
para utilizarlas. A continuación vamos a dar un breve repaso a las que consideramos más
interesantes.
12.1. APIs
Aunque si combinamos HTML, JavaScript y PHP podemos hacer muchas cosas con nuestras
páginas, existen aún otras fuentes de datos que residen fuera de nuestra página y que podemos
incorporar a nuestra web mediante las APIs.
Para añadir funcionalidades complejas a nuestra página web o para acceder a información, podemos
comunicarnos con otro software, ofrecido por sitios web especializados, utilizando una Interfaz de
Programación de Aplicaciones (API).
Lo que nos ofrece una API es una serie de procedimientos para acceder e interactuar con
aplicaciones o datos realizadas por terceros. Es decir, en vez de desarrollar esas funciones con un
lenguaje de programación y almacenarlas en nuestro sitio, creamos una "ventana", a través de la
cual mostramos esa aplicación. Además, nos ofrece una serie de funciones, normalmente en
JavaScript con las que podemos interactuar con esa ventana.
Internet nos ofrece una gran cantidad de añadidos que nos permiten ampliar la funcionalidad de
nuestras páginas, muchos de ellos sin necesidad de tener demasiados conocimientos de
programación ni de HTML. Podemos encontrar desde sitios que nos ofrecen un código fuente listo
para copiar y pegar en nuestra web, hasta otros con APIs más avanzadas, que nos permiten una gran
personalización de la aplicación.
Por ejemplo, si tenemos una cuenta en Photoshop On-line, podemos añadir diapositivas de nuestras
imágenes, sólo copiando y pegando el código que nos proporcionan:
O si hemos creado una presentación desde Google Docs, podemos incrustarla (embeberla) en
nuestra página. Estos son sólo unos pocos ejemplos, pero hay una gran cantidad de sitios web que
nos permiten utilizar sus datos.
Normalmente, estos sitios nos ofrecen un fragmento de código incluídos en etiquetas <objet>,
<embed> o <iframe>.
Existen multitud de APIs con diferentes objetivos, por ejemplo, Flickr y Panoramio para usar sus
amplios catálogos de imágenes, Google Maps para usar mapas de cualquier rincón del mundo, Digg
y Meneame para comentarios y noticias, etc. Estas y otras APIs se pueden utilizar para añadir
ciertas funcionalidades a nuestra web, pero es tal la cantidad y calidad de APIS, que existen sitios
web que se basan únicamente en las funciones y datos suministrados por las APIs y que son
conocidas como "Mashup" o aplicaciones híbridas. Hay listas de las mejores Mashup.
Nota: Al utilizar APIs o aplicaciones de terceros, es importante leer las condiciones de uso. Ya que
muchas imponen algunas restricciones para uso comercial, o exigen ciertas condiciones de uso,
como enlaces a la página propietaria de los datos.
12.2. Google Maps
Una API muy utilizada es la de Google Maps. Vamos a incluir en nuestra página nosotros.html un
mapa con la ubicación de la asociación.
En la página, hemos añadido otra división con las esquinas redondeadas, después de la que ya
había. Dentro, hemos añadido un texto y reservado un párrafo centrado para el mapa.
Para añadir el mapa, solo hemos de ir a http://maps.google.es/ y buscar la dirección que queramos.
Cuando la tengamos, pulsamos Enlazar, y nos aparece una ventana con dos tipos de enlace:
Al pulsar, podemos elegir el lector que queremos utilizar. En nuestro caso, no vamos a emplear un
lector, vamos a incluir el código en nuestra página, por lo que elegimos En su propia página.
A continuación deberemos rellenar un pequeño formulario.
En la siguiente ventana, elPais.com nos ofrece la posibilidad de personalizar nuestro estilo. Así que
elegimos uno que se integre bien con nuestro diseño. Cuando lo tengamos, pulsamos Enviar código.
Se mostrará el código generado y además se nos enviará por correo. Lo único que tenemos que
hacer es copiar todo lo referente al estilo en el head de nuestra página, y el resto en el lugar donde
queremos que se muestren las noticias (también funciona si incluimos todo el código junto dentro
del body, aunque es menos correcto).
Lo más interesante del RSS es el caso contrario. Es decir, dar al usuario la posibilidad de suscribirse
al feed RSS de nuestra página, en vez de mostrar información de otros feeds RSS.
En nuestro ejemplo, no tendría demasiado sentido, ya que no hemos diseñado un sitio dinámico.
Pero vamos a crear un feed RSS donde iremos mostrando las fotos de flores que vayamos subiendo.
Lo único que tenemos que hacer es crear un archivo XML con el formato apropiado. Recuerda que
XML es un lenguaje de etiquetas, muy similar al XHTML, pero omitiendo cualquier atributo de
estilo.
Podemos crear un archivo con la siguiente estructura:
<?xml version="1.0" encoding="iso-8859-1"?>
<rss version="2.0">
<channel>
<title>Fotos de flores en Floramics</title>
<link>http://www.aulaclic.es/paginasweb/sitio_flores/</link>
<description>Nuevas fotos subidas a Floramics</description>
<language>es-Es</language>
<item>
<title>Agret - Oxalis pes-caprae</title>
<guid
isPermaLink="true">http://www.aulaclic.es/paginasweb/sitio_flores/flores/silvestres.html#agret</g
uid>
<pubDate>Wed, 25 Nov 2009 10:00:00 +0200</pubDate>
<description>Foto tomada en los Jardines de la Universidad.</description>
</item>
<item>
<title>Amapola - Papaver rhoeas</title>
<guid
isPermaLink="true">http://www.aulaclic.es/paginasweb/sitio_flores/flores/silvestres.html#amapola
</guid>
<pubDate>Tue, 24 Nov 2009 10:05:00 +0200</pubDate>
<description>Algunas amapolas en un campo de trigo.</description>
</item>
</channel>
</rss>
Observa que hemos encerrado todo el contenido del documento entre las etiquetas
<rss><channel></channel></rss>. Seguidamente, hemos indicado el título (<title>), el enlace al
sitio (<link>) que debes de cambiar por el de tu página, una descripción (<description>) y el idioma
(<languaje>).
Cada elemento (en nuestro caso es la foto de una flor, pero podría ser un artículo, una noticia, etc...)
está marcada por la etiqueta (<item></item>). Dentro, hemos puesto el título (<title>), el link del
elemento (<guid>), la fecha de publicación (<pubDate>), y una descripción <description>.
Este archivo lo hemos guardado como flores_floramics.xml. Puedes verlo aquí. Te recomendamos
que lo veas con Firefox, ya que es capaz de interpretar y formatear estos archivos.
Lo único que tenemos que hacer ahora, es añadir en nuestra página (normalmente al pie) un enlace
al archivo. Estos enlaces se marcan con unos iconos estándares, siendo el más habitual .
Una herramienta muy socorrida a la hora de consultar tanta información son los Buscadores de
Blogs. Technorati es un buscador muy utilizado y consolidado en este terreno.
Unidad 12. Funciones extra (IV)
Foros.
Los foros de discusión, foros de opinión o simplemente, foros, son sistemas de mensajes
organizados de forma temática y cronológica. Los mensajes se agrupan por temas y dentro de cada
tema por fecha. Normalmente un usuario plantea una pregunta o comentario y otros usuarios
responden, a su vez otros usuarios responden a estos, creándose una especie de árbol de respuestas.
Ejemplos de foros: phpBB, vBulletin.
El uso más común de los foros es para obtener respuestas concretas a preguntas técnicas sobre
programación, internet, juegos, bricolaje, etc.. Normalmente hay unos usuarios habituales que
contestan la mayor parte de las preguntas y otros usuarios esporádicos que visitan el foro para hacer
preguntas y contestar alguna pregunta de vez en cuando. También hay algunos usuarios gamberros
o "troles" que solo quieren divertirse y molestar. Otro tipo de usuario conocido como "spamer" sólo
busca hacer publicidad. Para controlar todo esto es necesario que existan moderadores con
capacidad de borrar mensajes y bloquear usuarios.
Millones de personas han encontrado solución a sus pequeños o grandes problemas a través de los
foros y sería bueno que el espíritu de "echar una mano" a los demás se mantuviera por muchos años.
Educativas.
Los CMS educativos o formativos son sistemas on-line de aprendizaje que simulan un aula virtual.
Constan de contenidos, profesores y alumnos. Los profesores crean los contenidos y responden a las
preguntas de los alumnos. También se pueden realizar exámenes.
Es sorprendente la cantidad de posibilidades para la enseñanza que proporcionan estos sistemas, con
muy poca inversión y conocimientos informáticos se puede crear un eficiente centro educativo
virtual que puede ser usado por miles de alumnos. Son usados por profesores como apoyo a sus
clases presenciales, por educadores de países en vías de desarrollo para ofrecer educación gratuita,
por profesionales que quieren dedicarse a la enseñanza por Internet, etc.
El más usado es Moodle originario de Australia pero que cuenta con versiones en diferentes
idiomas, entre ellas el español, requiere PHP y admite las bases de datos más populares (MySQL,
Postgree, ... ) Otros ejemplos son: Dokeos, WebCT y Blackboard.
Wikis.
Wiki es un sistema colaborativo de edición y publicación de contenidos web, de tal forma, que los
usuarios registrados pueden crear o modificar la información de una página web sin saber HTML.
La enciclopedia Wikipedia es el ejemplo más conocido de un Wiki.
Hay varios sistemas wiki, (MediaWiki, TikiWiki, ... ) pero todos tiene unas características comunes,
entre ellas, la fácil edición a través del navegador web y la existencia de un "historial" de cada
página que permiten al moderador deshacer los cambios realizados por los usuarios hasta una
versión del historial.
Comercios.
Los CMS de comercio electrónico permiten crear una tienda virtual en muy poco tiempo y con
multitud de funciones. Unos de los más conocidos son Magento, PrestaShop y eCommerce. Una
vez instalado uno de estos CMS permite crear un catálogo con los productos de la tienda, incluida
una foto, e implementar un "carrito de compra" con los sistemas de pago más habituales (contra
reembolso, transferencia, tarjeta, PayPal, etc, ...).
Unidad 12. Funciones extra (V)
12.5. Frameworks
Un Framewoks es un software diseñado para ayudar a realizar aplicaciones informáticas con una
base común y bien estructurada. Consta conjunto de librerías que facilitan el desarrollo de software
ya que implementa las funciones más básicas de todo proyecto de software. Un Framework dispone
de rutinas para acceder a bases de datos, para navegar entre páginas, para el acceso de usuarios, etc.
De esta forma se libera al programador de tener que realizar tareas básicas que son comunes a la
mayoría de los proyectos.
Usualmente un framework va asociado a un lenguaje de programación, así tenemos frameworks
para php como Zend o CakePHP, para java como Struts o Springs, Rails para ruby, Jquery para
Javascript, para .NET como Microsoft .NET Framework, etc.
Los frameworks son, normalmente, software libre creado y mantenido por comunidades de
programadores independientes o ligados a otros proyectos de software.
Aunque el uso de Frameworks es bastante recomendable hay que tener en cuenta ciertas
consideraciones. Si estamos empezando a aprender un lenguaje de programación es mejor esperar a
dominarlo antes de utilizar un framework. Si nuestro proyecto es de poca complejidad quizás no
saquemos rendimiento al trabajo empleado en aprender el uso del framework. Para proyectos
medianos o grandes en los que participan varias personas y con crecimiento previsto, si es
interesante emplear un framework.
No hay una definición de cómo tiene que ser un framework, así que no todos son iguales y tienen
más o menos funciones implementadas. Por esto es conveniente hacer una comparativa para elegir
el que mejor se adapte a nuestro caso particular teniendo en cuenta, aparte del propio framework, la
seriedad de la comunidad que tienen detrás, la documentación, los ejemplos de código, etc.
12.6. AJAX
En el tema 10 vimos una introducción al lenguaje JavaScript que permite dotar de más dinamismo a
las páginas web, AJAX es un paso más en este sentido que conviene conocer.
AJAX es un acrónimo para Asynchronous JavaScript And XML (JavaScript Asíncrono y XML).
Con AJAX seremos capaces de crear sitios web que se ejecuten directamente en el navegador del
usuario manteniendo una comunicación con el servidor siempre que sea necesario pero sin recargar
la página que estamos visualizando, simplemente se realizarán cambios sobre ella.
Esto significa que la velocidad de interacción con la aplicación aumenta de forma significativa al
reducir el número de peticiones que se hacen al servidor. Y aún así, la comunicación que se realiza
entre el navegador y el servidor se realiza de forma asíncrona y en segundo plano, por lo que es
completamente transparente para el usuario.
Gran parte del mérito de la integración y rápida aceptación que ha tenido la llamada Web 2.0 se
debe a AJAX.
Uno de los primeros en usar AJAX fue Google Maps que rápidamente se ganó un punto al crear una
interfaz rápida, accesible e interactiva.
AJAX no constituye una tecnología en sí, sino que combina mediante JavaScript, tres tecnologías
ya existentes:
XHTML y hojas de estilos (CSS) para el diseño que formatea la información.
Document Object Model (DOM) que es el encargado de interactuar con la información
presentada y es el que se ejecuta en el cliente (navegador), y
XMLHttpRequest, que es un objeto encargado de intercambiar datos con el servidor web. Estos
datos son devueltos en formato XML y se añaden a la página que estamos visualizando
integrándose de nuevo gracias a XHTML y CSS.
Uniendo estas tecnologías, las interfaces, es decir, la forma en la que el usuario ve o trabaja con una
página web, se han revolucionado.
De hecho, están surgiendo nuevos portales o páginas de inicio que permiten su configuración
completamente. De forma que el usuario al abrir una ventana del navegador vea todo el contenido
que le interesa en una sola ventana.
Ejemplos de estas iniciativas son la página de inicio personalizada de Google, Live.com de
Microsoft o la iniciativa de Netvibes.com muy bien orientada al público hispanohablante.
La única desventaja que presenta AJAX es que utiliza JavaScript como lenguaje en la parte del
navegador para acceder al DOM.
Aunque para utilizar AJAX no sea necesario ningún tipo de plug-in en el cliente, sí es necesario
tener activado JavaScript.
En resumen, AJAX supone un avance en la interacción del usuario con la web además de un uso
real de JavaScript que hasta ahora se encontraba explotado de forma muy pobre.
Unidad 13. Publicar (I)
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 ordenador, 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.
Como ya dijimos en la unidad 1, si lo que te interesa es simplemente escribir en Internet y no te
atrae la parte técnica o informática, lo más adecuado es utilizar los blogs gratuitos como Blogger o
WordPress.com.
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, en
el curso de Dreamweaver de aulaClic lo tienes explicado.
Para acceder a un servidor de Internet hay dos alternativas, buscar un servidor gratuito o contratar
uno de pago. Para empezar puede servir un servidor gratuito pero para cosas más serias es
conveniente utilizar un servidor de pago.
a) Servidores gratuitos.
Podemos diferenciar dos alternativas gratuitas:
• Sitios especializados. Existen algunos sitios web especializado en ofrecer espacio gratuito como
Fortunecity, Tripod, 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.
• 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.
b) 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 Arsys , Acens o Alojalia 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 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: lista de los mejores.
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.
Unidad 13. Publicar (II)
13.3. Dominios de Internet
Un servidor web necesita disponer de un dominio de Internet para que se pueda acceder a él en la
forma http://www.nombre_dominio.com. Por ejemplo, si quieres disponer del sitio web
http://www.dibujosdemotos.com 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:
a) 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.
b) 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, nos permiten tenerlos
sincronizados, e ir subiendo automáticamente aquellos archivos que vayamos actualizando.
Puedes encontrar más información sobre esto en el Curso de Dreamweaver en aulaClic.
Conseguir enlaces.
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.
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.
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 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.
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
Unidad 13. Publicar (IV)
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 anuncios
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 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.
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.
Unidad 13. Publicar (V)
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.
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íinimo de dinero al que hay que llegar para recibir el pago, 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.