Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Estructura de una web

Esta es la página introductoria sobre la creación de páginas web. Aquí comentamos los puntos de partida necesarios y explicamos los contenidos del resto de páginas de la sección. Los artículos se pueden leer independientemente, pero también pueden estudiarse en secuencia para ir de lo más básico hasta detalles y trucos y información concreta sobre los programas y sitios donde conseguir cosas útiles para construir nuestra web. Estas son los artículos:

Queremos aprender rápidamente a crear contenidos para la Web y editarlos. Bien. No resultará difícil. Lo era mucho más para los que empezaron hace unos años; ahora es mucho más intuitivo y las aplicaciones son mucho más fáciles de manejar. ¿Cuál es el mejor camino para introducirse en este mundo? Pensamos que la manera que puede ser más simple para la mayoría es:

En primer lugar, familiarizarse con los elementos que componen una página web y aprender la terminología que se usa. Fácil, y mejor hacerlo no de forma teórica, sino modificando páginas web o creando nuevas páginas sencillas.

Segundo, aprender a enlazar unas páginas con otras, aprender las normas básicas del diseño gráfico aplicado a la web y utilizar las imágenes con eficacia y gusto.

Si tenemos curiosidad -aunque esto ya no hace falta, realmente, hoy en día, podemos también ver en qué se basan los modernos programas editores de páginas web y aprender las principales órdenes del lenguaje HTML.

En este manual tenemos información útil para todas estas fases del aprendizaje, e ideas para los más experimentados. En esta página planteamos unos consejos iniciales para que podáis planificar vuestra iniciación y comenzar a hacer cosas concretas.

Cómo guardar páginas web (completas.)

La mejor manera de empezar en la edición y creación de páginas web es editar una página guardada en el disco duro. Primero, es necesario saber cómo guardarla correctamente (con todos los elementos gráficos incluidos.)

Tanto Internet Explorer, a partir de la versión 5, como Mozilla y Firefox pueden guardar tanto el html como todos los demás elementos, si se elige Archivo | Guardar como página Web completa. El programa guarda la página propiamente dicha, y además, en una subcarpeta que tiene el mismo nombre que la página, guarda los gráficos y otros ficheros auxiliares, tales como hojas de estilo.

Por otro lado, existen utilidades especializadas en descargar páginas (o incluso sitios web completos), como por ejemplo WebReaper o Httrack. Existe una extensión de Mozilla basada en httrack, que es excelente, llamada Spiderzilla.

Trabajar con un editor básico.

Antes de investigar el lenguaje de definición de las páginas web es aconsejable que aprendamos a modificar alguna de las páginas guardadas de la forma que hemos comentado antes. Así aprenderemos cuáles son los elementos de la página y cómo se colocan en ella. Realmente es algo sencillo. Basta abrir la aplicación FrontPage Express o Composer - los editores gratuitos incluidos, respectivamente, con Explorer y con Netscape- y familiarizarse rápidamente con la forma de crear y modificar una página. No están muy lejos de la forma de trabajar de un moderno procesador de textos. Sí, éstos también pueden generar código de página web, aunque éste tiende a ser peor que el que produce un editor de html propiamente dicho.

Incluir imágenes es muy fácil en un editor visual; además, todas las propiedades referentes a la imagen son accesibles y controlables desde menús y paletas de propiedades de manejo intuitivo (en este ejemplo, Mozilla).

La ayuda de los editores de páginas web es muy completa y fácil de entender, y no faltan manuales que se pueden comprar en cualquier librería. De manera que introducirse en la creación de páginas web, con un poco de trabajo, es algo fácil de conseguir. En esta fase es tiempo de aprender diferentes cosas:

  • Intentar la creación de tablas.
  • Cambiar los colores de los tipos de letra, y la fuente elegida.
  • Cambiar los gráficos. Eliminar, añadir, mover...
  • Manejar diferentes tipos de elementos de texto: párrafos, listas, encabezados...
  • Crear enlaces dentro de la página y a otras páginas.

Podemos hacer todas estas pruebas con una página que creemos desde el principio nosotros mismos, o bien modificando una página que hayamos guardado en el disco del ordenador.

Trabajar algo más en serio.

En poco tiempo ya sabemos cómo crear una página web sencilla. FrontPage Express o Composer son de entrada más que suficientes; y si queremos retocar alguna cosa a nivel del código HTML, basta el bloc de notas o NoteTab. Los gráficos pueden crearse con algún programa que tengáis, o incluso generarlos con una utilidad de generación de gráficos online, como las que listamos en otra sección.

Un editor profesional de web permite no sólo controlar el diseño de las páginnas individuales, sino el desarollo del conjunto de éstas y su relación.

Pero crear una web no es lo mismo que editar una página, así como no es lo mismo escribir una página que un libro entero. Deben tenerse en cuenta muchas más cosas para crear un sitio web funcional, atractivo y bien organizado. Ante todo, es necesario planear bien, y utilizar un método de trabajo flexible y eficiente.

En estas páginas hemos preparado varios artículos que pueden ayudar: Ideas básicas para la creación de páginas web, notas sobre el diseño de esta misma web.

Las herramientas comentadas, más algunos de los servicios que os recomendamos en la sección de Sugerencias, son suficientes para crear una web básica, incluso con algunas funciones avanzadas. La calidad del diseño es, evidentemente, una cuestión diferente: aquí entra en juego el buen gusto y la creatividad. Si con el tiempo nos planteamos crear una web de verdad, tal vez sea conveniente ampliar y mejorar los programas que utilizamos y los servicios que ofrecemos:

  • Probar un editor más potente, como los que comentamos en un artículo específico (Editores.)
  • contar con algún buen editor de gráficos, preferiblemente con funciones especiales para gráficos web.
  • Utilizar tal vez un editor de hojas de estilo, si el editor de páginas no lo incluye.
  • Incorporar algún applet de Java, o algún script para mejorar el aspecto o funcionalidad del sitio.
  • Ofrecer servicios aprovechando la oferta de determinadas webs: búsqueda por palabras, mapa de la web, boletines de noticias, formularios...

De todo esto encontraréis amplia información en estas páginas.