Hacer páginas Web con XHTML y CSS

Abandonar HTML y empezar a utilizar XHTML y CSS para hacer las páginas Web supone un cambio de mentalidad. De trabajar con elementos, pasamos a trabajar con bloques.

CSS nos ofrece un control mucho mayor sobre nuestras páginas y además nos simplifica enórmemente las remodelaciones y cambios de diseño que pueda tener la web a lo largo de su vida.

Pero el escollo, lo que echa para atrás a mucha gente, es que hay que cambiar el chip, empezar a pensar en bloques, en espacios, en márgenes, rellenos… cosas que antes no nos plateábamos.

Cuando vas a utilizar CSS para hacer una página, hay que tener una cosa clara: el órden es fundamental.

Hay que indentar el código y comentarlo todo lo posible, si no lo haces acabarás más perdido que un pulpo en un garaje.

A lo largo de las próximas semanas, meses o años, intentaré explicar cómo hacerse una página con XHTML y CSS partiendo de cero. Pero tenéis que tener paciencia, yo también tengo que estudiar y comprender primero antes de poder explicárselo a otros Smile

Hasta ahora era fácil, con HTML se hacía y todo, y algunos afortunados aprendían a añadir CSS con las que se controlaban los colores y las tipografías, así que el ponerse a enseñar cómo hacer una página Web era relativamente sencillo, primero HTML y luego CSS.

Pero ahora las cosas no son tan fáciles, puesto que con las nuevas especificaciones ambas tecnologías se combinan. Así que cuándo te planteas enseñarle a alguien cómo hacer una web utilizando XHTML y CSS lo primero que te preguntas es: ¿Por dónde empiezo? Si empiezo por el XHTML estos pobres se van a pasar 5 temas haciendo una cosa plana, fea y toda en fila india. Si en cambio, empiezo por CSS se van a encontrar aplicando estilos y posicionando unos elementos que no saben lo que son. Se supone que todos os habéis leido ya el manual de html para principiantes en el que explicamos las diferencias entre html y CSS por lo que lo vamos a dar por sabido

¿De verdad es tan importante CSS?

No voy a entrar a evangelizar a nadie porque ya lo he hecho bastante, así que me limitaré a poner un ejemplo de la auténtica potencia de CSS: con una sóla página HTML podemos tener presentaciones completamente distintas, sin cambiar una sola coma del código. Las posibilidades de reutilización, deberían ser obvias para cualquiera.

Si os fijáis en el código de los ejemplos, veréis que el código html es siempre el mismo:

Ejemplo 1

Ejemplo 2

Ejemplo 3

Requisitos previos

Disponer de un navegador de última generación: da igual la marca, los que mejor cumplen estándares: mozilla y opera se dice por ahín. En estos ejercicios sólo pretendemos hacer una aproximación que nos permitan entender los conceptos que hay detrás del diseño de sitios con CSS y probaremos todo en firefox.

Disponer de un block de notas, mejor si tiene alguna característica algo más avanzada como que te cuente las líneas y esas cosas pero no es necesario. El humilde block de notas de güindows nos servirá, aunque un editpad o un ultraedit harán nuestro trabajo más cómodo.

Condición imprescindible haberse leído el manual de html para principiantes.

¿Qué hoy por hoy no se pueden hacer diseños tan complejos como se hacían con tablas?

Quizá esta página te demuestre lo contrario:

http://www.adrenalyn.net/news/

Y además, valida.

¿Qué esto está muy bien, pero que para sitios comerciales/grandes/profesionales es inviable?

Algunos sitios muy importantes con millones de visitas mensuales no piensan así:

Sitepoint http://www.sitepoint.com
Hotwired http://www.hotwired.com
Alltheweb http://www.alltheweb.com/
Netscape devedge http://devedge.netscape.com/

Y …. también se pueden cumplir estándares usando tablas

http://www.nypl.org/

Volver al índice

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s