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

  • Por
Creamos en vídeo una web de segunda generación, con la técnica de maquetación por tablas, que está desfasada pero nos permite practicar nuestro HTML.

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.

Nota: si te interesa ver una discusión sobre este asunto, entra y participa en la FAQ Maquetar por tablas o por capas.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

mwilton

06/7/2010
Ayuda!!
Hola Miguel, gracias por tus aportes, una pregunta deseo hacer un pagina web que la diseñare con photoshop, y quiero que esta me ocupe toda la pantalla del navegador, es decir no la quiero centrar, ni nada, sino toda la pantalla, que dimensiones debo usar en photoshop (ancho mas que todo,en pixeles) para ese fin. Gracias

Sergio N

15/7/2010
java2me
hola miguel sabes he visto tus 2 videos y la verdad son excelentes muy bien explicados, pero abusando de tu confianza me gustaria saber si no tendras algunos videos sobre programacion movil con java2me, y si me puedes pasar el editor..... MUCHAS GRACIAS BYE

roberto

15/7/2010
Excelente para recordar como se trabaja anteriormente
Muchas gracias por sus aportes, me ayunda a refrescar la memoria sigan asi

JulioVas

12/8/2010
Que Relación
Muy buen articulo y video, Tengo una pequeña duda sobre la Relacion de una Página Web y un Blog como wordpress.
Si una persona quiere una Pagina web y se crea con Wordpress, esto ya es un Blog o es una pagina Web.
Estoy confundido con estos terminos, Yo utilizo Wordpress por la administracion, pero mis cliente no lo quieren por lo que es un blog

JulioVas

12/8/2010
Para mwilton
Amigo mwilton, para que ocupe toda la pantalla, no utilices Pixeles ya que cada monitor es diferente, mejor utiliza Porcentajes

luna

10/3/2011
como puedo subir una pagina html
hola quisiera saber los pasos de como puedo subir el codigo html que he generado gracias

Giovanni Siquiej

20/3/2011
Gracias, muy buen trabajo
Agradezco a la gente de DesarrolloWeb por estos utiles videos que me han ayudado mucho en mi desarrollo como programador. Que Dios los bendiga mucho.

omarox12

28/8/2011
Pregunta
Tercera generación sería los div???

Velisabella

12/11/2015
Agradecer por ofrecer estos videos
Hola:
Soy una persona con una discapacidad y por lo tanto ahora solo puedo trabajar desde mi casa yo arreglo computadores, hago actualizaciones, dicto cursos personalizados de sistemas y me veo en la necesidad de aprender algo que pueda hacer desde mi casa y como no tengo suficientes ingresos fijos debo ser autodidacta, mi plan es aprender hasta el punto de poder competir con los diseñadores freelance y esta es la herramienta que puedo utilizar para aprender por eso estoy muy agradecida con Uds. y pienso seguir todos los cursos y manuales que ofrecen para poder salir adelante.

Gracias por esta oportunidad.

Isabel