Videotutorial: creación de una web de segunda generación

Este es un vídeo orientado a las personas con poca experiencia en HTML, que han seguido los pasos de el Videotutorial de HTML para aprender a hacer páginas web, o que han leído el Manual de HTML y quieren comenzar sus prácticas ayudados por nuestras explicaciones.

Como práctica de HTML, ¿qué mejor que hacer una página web completa? En este sentido ya publicamos hace semanas un videotutorial sobre la creación de una web de primera generación (con un diseño extremadamente sencillo, que implementamos en una página web con técnicas elementales de HTML), de modo que ahora vamos a retomar esa idea de web y a construir un sitio prácticamente idéntico, pero con una técnica un poco más depurada, que hemos llamado "web de segunda generación".

Bajo el concepto de "web de segunda generación" nos referimos a las páginas que se hacían en una segunda etapa concepción creativa dentro de Internet, que se daba hace poco más de 10 años (mitad final de la década de los 90). Son páginas con un diseño un poco más depurado que las primeras que aparecieron en Internet, donde ya surge una necesidad de posicionar los elementos en una especie de rejilla que nos permita mantener un estricto control de la localización de los componentes de la página.

Estas páginas de segunda generación todavía se ven bastante hoy en día y estéticamente no difieren demasiado de las webs actuales, salvo por las modas y tendencias de diseño, que en todo este tiempo han evolucionado. Pero lo que cambia radicalmente es la técnica utilizada para maquetar los contenidos. En las webs de segunda generación se utilizaban las tablas para posicionar los elementos de la página y actualmente se utilizan capas y maquetación CSS.

No maquetes con tablas

Quiero señalar que no es adecuado, en los momentos que corren, realizar la maquetación por tablas de una página web, pues es una técnica totalmente desfasada que no tiene más que desventajas sobre la maquetación actual con capas y CSS.

Entonces ¿Por qué hago un videotutorial de maquetación por tablas? Eso mismo también me pregunto yo y lo cierto es que he tenido bastantes dudas sobre si es o no adecuada la creación de estos vídeos. Pienso que no debería enseñar técnicas desfasadas para la creación de webs, pero también opino que puede estar bien para las personas que están aprendiendo, para que conozcan cómo se han ido creando webs a lo largo del tiempo y las técnicas utilizadas en distintos momentos de la historia de Internet.

Además, con los conocimientos que tenemos actualmente sobre HTML (si hemos seguido el videotutorial de HTML) no tendríamos más remedio que maquetar una web como vamos a mostrar en los presentes vídeos, usando tablas.

Como práctica de HTML estos vídeos resultan interesantes, siempre que se sepa que hay maneras más inteligentes de hacer las cosas y técnicas más adecuadas. Puede ser hasta interesante que conozcamos las chapuzillas que hacían los diseñadores, como el uso de los píxeles transparentes, antes de que existieran otras herramientas mejores para resolver los problemas.

Al final, en DesarrolloWeb.com tenemos varios artículos y vídeos explicando cómo hacer las páginas maquetadas con CSS y no teníamos casi documentos para explicar técnicas más antiguas.

Para compensar el uso de técnicas desfasadas y darle un poco más de interés y utilidad a estos vídeos, vamos a introducir el uso de CSS. De hecho, en las webs de segunda generación, maquetadas por tablas, ya se empezaban a utilizar las hojas de estilo en cascada, aunque tímidamente. Por todo ello, este vídeo representaría la secuencia lógica de aprendizaje de una persona sobre el desarrollo web.

Estos son los vídeos en los que está dividida esta práctica:

Videotutorial: creación de una web de segunda generación, parte 1 de 5

En la primera parte de esta práctica creamos un documento nuevo con el editor Komodo Edit y comenzamos a hacer la cabecera de nuestra página web. En este vídeo es muy interesante el caso que nos ocurre por causa de la etiqueta DOCTYPE que nos coloca Komodo Edit, que no funciona bien con el tipo de web que estamos realizando. Tenemos que cambiar el DOCTYPE para que el navegador reconozca bien todo el código HTML y mostramos dónde conseguir otros DOCTYPE.

Videotutorial: desarrollo de una página de segunda generación, parte 2 de 5

En la segunda parte de este ejercicio de HTML nos dedicamos a hacer la barra de navegación lateral. Explicamos con un ejemplo práctico por qué la etiqueta FONT ya no es adecuada y se ha quedado obsoleta y mostramos como un poco de CSS nos puede facilitar mucho las cosas. Luego colocamos contenido en la portada del sitio para dejarla casi lista.

Vídeo tutorial de maquetación por tablas, parte 3 de 5

En la tercera parte de este vídeo creamos el final del contenido del sitio y diseñamos un sencillo pie de página. Luego mostramos una técnica muy utilizada en la maquetación por tablas y de las webs de segunda generación, que es usar un píxel transparente para hacer márgenes.

Vídeo de maquetación por tablas, parte 4 de 5

Continuamos la práctica con la creación de unas páginas HTML adicionales de este sitio web de segunda generación, siempre basándonos en la plantilla realizada para la portada. Es decir, creamos las siguientes páginas siempre a partir de los espacios definidos en la maquetación de la portada. El problema es cuando deseamos actualizar algo de nuestra plantilla, que lo tenemos que cambiar en todas las páginas. Esa es una de las razones por las que empezamos a observar que resulta poco práctico tener la misma declaración de estilos copiada en distintos documentos, porque si tenemos que cambiarla, hay que actualizar varios archivos distintos.

Videotutorial: creación de una web de segunda generación, parte 5 de 5

En la última parte de este videotutorial lo más interesante que vemos es la creación de un archivo externo donde guardamos nuestras declaraciones CSS. Luego enlazamos con esa página desde todos los archivos y conseguimos mantener un único código CSS. Mostramos que, si actualizamos el CSS, automáticamente cambia el aspecto de todas las páginas del sitio. ¡Qué maravilla! Acabamos mostrando las diferencias entre el sitio web de primera y segunda generación.