PUBLICAR

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.

 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.

Dominios de Internet

http://www.nombre_dominio.com

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.

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.

c) Utilizar las facilidades proporcionadas por la empresa de hosting.

Realmente no necesitamos ninguno de los programas anteriores, aunque casi siempre sean de mejor calidad. Toda empresa de hosting nos proporciona un interfaz a través del que subir archivos al servidor. Este interfaz depende de la empresa. Los de alojamientos gratuitos suelen ser bastantes simples, permitiéndonos subir unos pocos archivos cada vez a través de un formulario web. Esto resulta muy tedioso si tenemos que subir un sitio completo de tamaño medio. Los alojamientos de pago suelen tener un mejor servicio. Algunos implementan un interfaz muy completo (WebFTP) que realmente puede sustituir al cliente FTP.

FUNCIONES EXTRA

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.

 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.

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:

 

Seleccionamos el contenido de Pegar HTML para insertar en un sitio web, lo copiamos y lo pegamos en el párrafo que habíamos reservado.

Por ejemplo, éste es un mapa de la zona del puerto de Valencia, en España. Puedes hacer zoom, moverlo, etc, tal y como si estuvieras en Google Maps.

Esta es la forma más simple de utilizar Google Maps, en la que simplemente mostramos una dirección. Pero podemos ofrecer una versión más avanzada, en la que los usuarios puedan, por ejemplo, buscar direcciones, o utilizar todas las opciones de Google Maps. En este caso, encontramos más opciones a través de la API de Google Maps.

FORMULARIOS Y PHP

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

 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.

PHP. Código de ejemplo

Una vez creado el formulario, necesitamos la página a la que se envían los datos, y que se encarga de recogerlos, comprobarlos y procesarlos. En nuestro caso, la hemos llamado enviar _mail.php,

JAVASCRIPT

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

IMÁGENES

 Introducción

Ya hemos visto que podemos incluir imágenes en nuestra página web utilizando la etiqueta <img src="imagen.png" alt="texto alternativo" />, y que estas imagen deben de ser del formato jpg, gif o png, dependiendo del tipo de imagen, para obtener la mejor relación calidad-tamaño.

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

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

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

 Galería con miniaturas

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

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

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

La forma más simple de hacer esto es crear un enlace hacia el archivo de la imagen. Por ejemplo:

<a href="imagen_grande.jpg"><img src="miniatura.jpg" alt="Descripción" /></a>.

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

Para crear una miniatura de una fotografía, podríamos poner un valor menor en los atributos width y height de la etiqueta img. Y aunque esto hace que se muestre más pequeña, el archivo sigue siendo el mismo, por lo que la página tardaría lo mismo en cargar. La solución es crear un nuevo archivo de imagen, reduciendo el original.

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

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

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

Organizar las miniaturas

Una vez que tenemos las miniaturas, hemos de plantearnos cómo las vamos a organizar en la página. Esto dependerá del número de miniaturas que queramos mostrar, de su tamaño, del diseño de la página, etc.

En nuestro ejemplo, vamos a simular una ficha para cada flor. En cada ficha estará la miniatura que enlaza con la imagen (hay flores que tienen dos imágenes), el nombre de la flor y su nombre científico.

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

Si pruebas la página en el navegador, comprobarás que no se muestra el estilo, y los enlaces no funcionan. Esto se debe a que ni la hoja de estilo ni las otras páginas están en la misma carpeta. Para solucionarlo, podemos indicar delante del nombre del archivo ../, para indicar que se encuentra en un nivel superior. Por ejemplo href="../estilo.css".

Pondremos la pestaña Flores siempre como activa.

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

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

A partir de aquí, vamos a comenzar a añadir las fichas de las flores silvestres que tenemos. Vamos a ver como estructuramos la ficha. Como ejemplo, vamos a utilizar la flor del Agret (Oxalis pes-caprae):

Para delimitar las distintas fichas, lo más cómodo es crear un div para cada una. Como a este div le definiremos ciertas propiedades de estilo, podemos pensar ya que necesitará ser identificado. Y como habrá varios, y en varias páginas, vamos a asignarle la clase ficha.

Dentro de este div.ficha, colocamos la imagen de la miniatura:

<img alt="Agret" title="Agret" src="fotos/agret_mini.jpg" height="75" width="100" />.

Como al pulsar sobre la miniatura, hay que abrir el original, debemos de colocar un enlace con la imagen dentro. Por tanto quedará:

<a href="fotos/agret.jpg"><img ... /></a>.

Junto a la imagen, tenemos que colocar dos elementos de texto. En la primera línea el nombre de la flor, y en el segunda el nombre científico. Podríamos colocar el texto en un párrafo, y separar los nombres con un salto de línea (<br />). Pero como queremos diferenciar un poco el nombre científico, lo más cómodo será ponerlo en otro párrafo con una clase, por ejemplo class="cien". Por lo tanto, el texto nos ha quedado así:

<p>Agret</p>

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

Si te fijas en el resultado final del ejemplo, verás que hay una página con un listado de las flores, y enlaces a cada una de ellas. Para poder enlazar, vamos a asignarle in ID al div.ficha. Para no liarnos, seguiremos una nomenclatura fácil de recordar. Por ejemplo, utilizaremos el nombre de la flor en minúsculas, y si tiene espacios, los cambiaremos por guiones bajos.

Por tanto, la ficha de la flor de Agret nos ha quedado así:

<div id="agret" class="ficha">

 <a href="fotos/agret.jpg"><img alt="Agret"

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

  width="100" /></a>

 <p>Agret</p>

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

</div>

EL HTML DEL MENÚ

El menú es un elemento fundamental de nuestra web, y hemos de dedicarle una atención especial.

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

La estructura puede ser cualquiera: podemos hacer un menú con divs, con tablas, etc. Pero lo más común, por ser una estructura sencilla de manejar, es utilizar una lista (<ul></ul>), y está forma es la que explicaremos. Si desactivamos los estilos del navegador (en Firefox, menú Ver → Estilo de página → Sin estilo; IE no tiene esta opción) o vemos el código fuente de webs como www.elpais.es o www.marca.es, podremos encontrar que en el lugar del menú aparece una lista.

Por tanto, cada elemento del menú es un elemento de la lista <li></li>. El elemento, contendrá normalmente un enlace (<a href=""></a>) a una página del sitio.

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

<ul>

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

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

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

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

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

</ul>

 Estilo básico del menú

Una vez creado el menú, todo lo referente a su aspecto lo haremos utilizando estilos CSS. Lo más cómodo será darle un id, por ejemplo id="menu". De esta manera podremos referirnos la menú como ul#menu, y a sus elementos como ul#menu li.

Las listas se muestran casi igual en IE que en Firefox, pero en el primero se desplazan hacia la derecha utilizando margin, y en el segundo padding. Para no liarnos, podemos comenzar por poner ambos a 0, y ya les daremos algún valor si lo creemos necesario.

Otra cosa característica de las listas son las viñetas. Podemos quitarlas con la propiedad list-style-type: none;, o utilizar una imagen con la propiedad list-style-image: url(imagen.png);.

Al final los elementos de la lista tendrán el aspecto de botones que se pueden pulsar. Pero esto no es cierto, ya que el enlace sólo está en el texto, porque la etiqueta <a> es un elemento en línea que se ajusta a su contenido. Podemos cambiar este comportamiento con aplicándole a los enlaces del menú la regla display: block. Esto lo convierte en un elemento de bloque, y hace que ocupe todo su contenedor.

Daremos un formato apropiado al texto, a los enlaces, y añadiremos un borde a los elementos para diferenciarlos. Todo esto en función del diseño que queramos conseguir.

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

Maquetar una página web

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

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

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

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

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

Nota: Lo aquí explicado funciona para webs con el DTD XHTML Transitional o Strict. Al declarar otro DTD, o no hacerlo, puede que el resultado no sea el esperado.

Tamaño

Por lo general, la maquetación se realiza sobre elementos en bloque. Normalmente divisiones, pero también lo podemos hacer con párrafos, listas, o con el propio body. Por defecto los elementos de bloque ocupan todo el ancho del elemento que lo contiene, y su alto se ajusta al contenido.

Lados y tamaño

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

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

Tamaños absolutos, utilizando px, cm, etc...

Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%).

Tamaños relativos a la fuente, utilizando em.

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.

Diseño y Usabilidad

El contenido de una página web es lo más importante pero un buen contenido con un mal diseño no es una buena página web. Tampoco sirve de nada un buen diseño con un mal contenido.

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

. Un buen diseño

 Ver el videotutorial

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

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

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

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

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

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

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

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

Simple. Cuanto más simple sea el diseño, más se facilitarán el resto de aspectos que hemos comentado.

Estos aspectos debemos de tenerlos en cuenta, pero no podemos pretender aplicar cada uno al 100%. Por ejemplo, un diseño más original implicará utilizar más elementos, y que todos aparezcan correctamente ordenados, lo que lo hará más complejo. Y al final un buen diseño depende de la temática de la página y de lo que queramos transmitir con ella.

 Colores

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

Lo habitual es utilizar una gama de colores armónicos, con variaciones de tonos de un mismo color. Con ellos formaremos la paleta de colores de nuestro sitio. Utilizar la misma paleta es importante, porque si no iremos utilizando variaciones del color, y al final tendremos un sitio con muchos colores distintos.

Para aquellos que no sean buenos combinando colores, siempre se pueden inspirar en el diseño de páginas web, o herramientas que nos facilitan paletas de colores. Una buena idea es utilizar un selector de color, una herramienta que nos permita tomar el color de una parte de la pantalla o de la página web. Existen muchas herramientas gratuitas de este tipo. Nosotros hemos utilizado ColorPic. Si necesitas ayuda para instalar y utilizar la herramienta, visita este básico Básico.

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

PREPARAR NUESTRO SITIO

 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.

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

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

editor Web?

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

Podemos considerar tres categorías de editores Web:

Editores de texto.

Nos permiten editar el código fuente puro y duro, como puede ser el bloc de notas.

Editores de HTML.

Funcionan como los editores de texto, pero pueden tener algunas opciones más avanzadas. Como mostrar las etiquetas de colores, o cerrarlas automáticamente.

Editores WYSIWYG.

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

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

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

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

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

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

. Elegir un editor

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

Y como al elegir cualquier programa, lo primero es optar por una solución gratuita o de pago. Para realizar nuestra página Web, vamos a utilizar un editor WYSIWYG. Uno de los mejores (si no el mejor) editor de este tipo es Dreamweaver, de Adobe. Es un editor muy completo, y el elegido por la mayoría de des arrolladores 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.

Podemos descargar KompoZer desde su página oficial. No requiere instalación, basta con descomprimirlo en una carpeta y ejecutarlo, aunque sí deberemos instalar el paquete de idiomas en español como se explica en el sitio. Si necesitas ayuda para instalarlo, sigue este básico Básico.

ASPECTOS DE LA PAGINA: ESTILOS BASICOS

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

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

Los estilos que hemos añadidos son los que puedes ver en esta imagen y que vamos a comentar a continuación:

A continuación vamos a ver los elementos básicos o fundamentales del HTML. Primero veremos la estructura general de las etiquetas, luego la estructura básica de la página, a continuación empezaremos a colocar cosas en la página, primero texto, luego imágenes, enlaces y por último hablaremos brevemente del elemento que nos sirve para colocar cada cosa en el sitio que queramos, las capas.

Etiquetas

El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas.

Al realizar nuestro primer ejemplo, hemos visto algunas etiquetas.

Las etiquetas siempre van contenidas entre los signos de desigualdad < y >. Por ejemplo <body>,<title> o <p>.

Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada por el signo /. Por ejemplo <body> (apertura) y </body> (cierre). Entre la apertura y el cierre, está el contenido de la etiqueta, que puede ser texto u otras etiquetas, depende del tipo de etiqueta. Algunas etiquetas, no tienen contenido, y se cierran sobre sí mismas. Esto se expresa colocando la apertura y el cierre en la misma etiqueta, como por ejemplo: <br />, que equivaldría a <br></br>. La etiqueta <br /> escribe un salto de línea.

Vamos a fijarnos en la apertura de la etiqueta. La primera palabra que aparece es el nombre o identificador de la etiqueta. A parte, podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">. La forma correcta de escribirlo es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores contenidos entre comillas dobles. Si un atributo tiene más de un valor, se escriben todos los valores dentro de las mismas comillas, separados por espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">.

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

Por ejemplo, para escribir la siguiente línea:

Bienvenidos a www.aulaclic.es

Antes, sin estilos:

<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.es</font></p>

Ahora, con estilos:

<p class="presentacion">Bienvenidos a www.aulaclic.es </p>

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