El código es el siguiente:

Nótese que la etiqueta TITLE no se cierra correctamente.

Di con esto por accidente, pero me resultó curioso que navegadores como Firefox o Safari visualizaran correctamente la página, mientras que Internet Explorer símplemente mostraba una pantalla en blanco.

Una nueva técnica para fanáticos anti IE (qué desarrollador no lo es…)?

En cualquier caso es una falta intencionada de sintaxis, que por mucho odio que tengamos a este navegador, no deberíamos cometer.

Las tres reglas de oro

Lo primero y principal antes de empezar a escribir la plantilla, es definir estas tres reglas de oro del CSS. Se colocan al principio del archivo CSS, y sirven para evitar las discrepancias principales entre navegadores. Así nos evitamos más de un susto al comprobar si se ve igual en todos los navegadores.

Lo que hacen es inicializar todos los márgenes internos y externos a cero (de TODOS los elementos), prefijar un tamaño de letra uniforme para todos los navegadores, y eliminar el borde de las imágenes.

Conocer más sobre las tres reglas de oro del CSS.

Suelo añadir esta cuarta regla, que evita que salga un recuadro alrrededor de los enlaces al pulsarlos.

(más info)

Centrar contenedores (elementos div) en CSS

Para centrar un contenedor en CSS, además de definir un ancho determinado, debemos asignar el valor auto al margen izquierdo y derecho del contenedor. Esto no da resultado en Internet Explorer, que requiere de la propiedad text-align: center. Si usamos las dos, nos aseguramos la victoria.
HTML:

CSS:

(más info)

Hacer columnas con CSS

Para crear varias columnas en un skin, debemos colocar elementos de bloque (div, ul, form…) que las representen, de forma contigua (uno al lado de otro) en nuestro HTML. A continuación, en el CSS usaremos la propiedad float, que “flota” un elemento a la izquierda o a la derecha, sacándolo del flujo de contenido.

Hay varias formas de aprovechar la propiedad float para crear columnas, algunos ejemplos:

Las flechas indican si se ha flotado a izquierda o a derecha, aúnque resulta bastante obvio.

Ejemplo, el código CSS para hacer que todos los elementos li de una lista, esté flotados a la izquierda, con un tamaño de 100×100 px:

Evitar solapamiento en la propiedad Float

Da definicion en el estándar de CSS, hace que la propiedad float saque al elemento del flujo, y provoca que el resto de elementos “lo ignoren” en muchos aspectos, como que el elemento que lo contiene no adapta su ancho para incluirlo.

Lo que quiero:

Lo que ocurre:

Esto lo podemos solventar muy fácilmente.

Si queremos que un elemento que va a continuación de un float, no se vea afectado, le podemos dar la propiedad clear: both

Pero si el problema es que tenemos elementos “flotados”, y queremos que el contenedor los envuelva, nada más fácil que aplicar al contenedor la propiedad overflow: hidden. La explicación la encontraréis aquí

Todas las propiedades a mano

Es muy importante tener siempre las propiedades a mano, y sobretodo conocer las 95 propiedades del CSS 2.1 para conocer las herramientas de que disponemos. Podéis encontrar un agradable listado, muy bien explicado (en inglés) en CulturedCode CSS 2.1 Reference (es un recurso alucinante, muy muy útil)

Usar estructuras prefabricadas

Podremos ahorrarnos tiempo, si partimos de estructuras prefabricadas en CSS y HTML.

• Layout Gala contiene muchas estructuras combinando tres elementos principales, cabecera y pié de página.
• Css Easy te ofrece las principales configuraciones para skins, listas para descargar y manipular.
• En Listmatic encontraréis muchos tipos de lista, para aplicar a menús, o a lo que queráis.
• En CSS Showcase podréis encontrar muchos ejemplos de barras de navegación.

Plantillas ya elaboradas

Otro recurso es acudir a skins completamente elaborados, y extraer lo que nos interese de ellos. Algunos enlaces:
OpenSourceWebDesigns, FreeCssTemplates, Free-css-templates, TheStyleArchive, TemplateWorld

O recurrir a sitios donde muestran plantillas únicamente para inspirarte:
Inspirational CSS, CSSBeauty, Elegant Desighns

Por último, en del.icio.us (tag: css) podéis encontrar muchos recursos interesantes de CSS, y en Webéame (categoria diseño) otros tantos.

Me gustaría transcribir y traducir este interesante recurso a continuación para todos vosotros:

Doctype declarado correctamente

Parece un galimatías, pero los DOCTYPE son importantes. No sólo hace que tu código sea válido, sinó que dicen a tu navegador detalles de cómo debe renderizar tu página.

Encabezado ordenado

Que conste de título, conjunto de caracteres, enlace a hojas de estilo (incluida la de impresión!) y scripts (enlazados, que NO incluidos).
Los archivos externos (CSS o JavaScript) en carpetas propias (css/ y script/ por ejemplo).

ID para Body

El ponerle una id a la etiqueta body te permite crear propiedades CSS específicas para una página en concreto. Por ejemplo diferenciar los h2 del homepage, con un código similar a #home h2 {}, y así no afectar a ningún otro h2.

Div principal para todo el contenido de la página

El poner un div que contenga todo el contenido nos permite mantener el control del diseño sobre la página en su conjunto. Por ejemplo podemos determinar un ancho fijo de toda la página.

Menú limpio semánticamente

Un menú debe tener este aspecto:

Incluir el contenido repetido

Mucho contenido es común entre página y página. Menús, barras laterales, piés de página, etc. Este tipo de contenido debería ser incluido dinámicamente. Esto puede conseguirse con una simple instrucción de PHP.

Contenido importante primero

Es apropiado que incluyas tus contenidos más importantes al principio, como noticias, eventos, que pueden ser listadas al principio del HTML. Si tu barra lateral es sólo para navegación o cosas menos relevantes incluso, deberías ponerla al final del HTML.

Código tabulado

Si cada sección de código se presenta tabulada como un conjunto, la estructura del código queda mucho más comprensible. Cuando un código está completamente alineado a la izquierda es prácticamente imposible de comprender.

Sin estilo!

Tu HTML debe estar completamente orientado a la estructura y al contenido, no al estilo! Deja que el CSS se encargue de todo lo relacionado con el estilo, y por supuesto olvida la etiqueta font

Contenido, contenido, contenido

Aquí has de insertar todo tu contenido, así que manos a la obra. No olvides separar los distintos párrafos con la etiqueta p. Utiliza listas dónde sea apropiado. Utiliza códigos para los símbolos (& copy; & iacute; etc). No abuses de los hr para el salto de línea.

Etiquetas de cierre

Empezaste con fuerza, ahora acaba con fuerza. No seas perezos@ y cierra todas las etiquetas que lo requieran, incluso si la página se renderiza bien sin ellas!

Actualmente podemos ver montones de editores relacionados con la programación web. Es un ejemplo el abandonado NVU y su sucesor Kompozer (que hace nada liberaron su última versión), Quanta Plus (que pinta muy muy bien), el mismo gedit, etc… Muchos de ellos se complementan así mismo aunque mi preferido hasta el momento es KompoZer o Quanta plus (que explicaré el porqué).

En primer lugar NVU es un proyecto de Mozilla que pretendía revolucionar a los editores HTML del momento en Linux… y bueno, casi lo consigue solo que se abandonó el proyecto. Una verdadera pena porque estaba siendo bastante completo para lo que había actualmente en Linux. Pero gracias a unos buenos programadores se creo un fork, KompoZer, y se empezó a solucionar los bugs y a añadir nuevas herramientas en este “nuevo” programa de edición. Tiene varios modos: el modo normal (ves la página como si estuvieras en el navegador), el modo source para ver el código y el modo tag, para ver las etiquetas, son los más usados. Trae buenas herramientas que más bien podrían pasar por simples gestores de ayuda. Lo que yo creo que le hace falta… es un autocompletado al escribir código.

Tenemos también a Quanta Plus un editor gráfico que usa las librerías de KDE y por lo tanto… se ve mejor en KDE (aunque os puedo asegurar que no se ve tan mal en Gnome). Este programa parecía que iba a ser el que realmente me iba a llamar la atención… y lo fue durante un tiempo porque es el único que conozco que tiene el autocompletado, aunque es una versión muy rudimentaria y no funciona en todos los lenguajes (en CSS por ejemplo no funciona y en HTML no funciona como se espera). Este editor no tiene pestaña para ver lo que llevas hecho sin necesidad de ir al navegador.

Eso por lo que respecta a editores gráficos y nos lanzamos, pues, a editores de texto el que más destaca es sin duda Gedit el -editor de texto plano- de Gnome. Pero no os engañéis, no tiene nada que ver con el Notepad de Windows. Éste es mucho más profesional, bello y funcional. Destaca por su gran capacidad para colorear código en muchos tipos de lenguajes (no solo web, sino de código fuente de C, VB, C++, Perl, Python, etc). Éste es sin duda el preferido por cualquier usuario que se atreva a escribir a pelo sin pijadas.

Por lo que respecta a otros editores no-gráficos (como Gedit) desconozco de otros que estén a su altura (dentro de lo que cabe). Así que si alguien se siente la necesidad de informarme de algún otro programa con mucho gusto lo añadiré.

Ahora lo que realmente os traigo es una sorpresa, aunque posiblemente al sector más conservador de Linux no le agrade la idea. Os traigo a mi amigo Wine, que no es un emulador, y que gracias a él vamos a poder portar ciertas aplicaciones que para los nostálgicos y gente como yo viene realmente bien. Hablo del conocido Dreamweaver, creado por Macromedia y comprado por Adobe después. Gracias a Wine tenemos casi un perfecto porte de esta aplicación nativa de Windows a Linux. Eso sí, me temo que actualmente con la versión actual de Wine (0.9.44) no funciona en su última versión. Así que deberemos usar la versión anterior, la 8 y puedo asegurar que funciona realmente bien, aunque seguro que pronto dan soporte para la que sacaron hace poco: Dreamweaver CS3.

Para instalarlo bajo Wine no necesitáis ningún añadido extra más que el instalador (ejecutable o CD) y seguir como si fuera una instalación normal en Windows (supongo que todos sabéis como funciona Wine $ wine PROGRAMA.exe). Aunque parezca que no, Wine consigue lo imposible. Dreamweaver 8 está bastante integrado en el escritorio y funciona a la perfección con las últimas versiones de Compiz Fusion, incluido exposé, el efecto gelatina y la transparencia en los menús, una gozada.

Como ya he dicho, si tenéis dudas sobre los mismos programas o queréis añadir cosas nuevas (features o lo que sea) tenéis un maravilloso sistema de comentarios para contactar y hablar con nosotros (y con quien sea) ahí debajo.

Ajax consiste, básicamente, en mandar mensajes (con formato XML, o texto plano) del servidor al cliente mediante una petición asíncrona por parte del cliente.

Un ejemplo: Cuando el usuario pulsa en un botón de búsqueda, se envía una petición al servidor solicitando los resultados de esta búsqueda, cuando los tiene los devuelve, y el usuario los ve en pantalla, todo sin cambiar de página.

Esto implica que para que el servidor me de información, el cliente tiene que solicitarla, es decir, al ocurrir algún evento en el lado cliente. Y aquí radica la diferencia entre AJAX y Comet (o HTTP Push), y es que Comet no requiere que el ordenador cliente solicite ninguna información, sinó que es el servidor el que decide cuándo enviar la información al cliente, de forma asíncrona.

Un ejemplo: En un sistema de mensajería instantánea, en lugar de hacer contínuos chequeos al servidor, para ver si hay nuevos mensajes, símplemente cada vez que el servidor recibe un nuevo mensaje envía esta información a las máquinas cliente.

La forma de hacer esto es mediante una conexión HTTP de larga duración, de esta forma el servidor tiene una línea contínua de comunicación con el cliente. Aquí el cliente envía información al servidor, y el servidor al cliente; pero cada uno lo hace en el momento oportuno, en lugar de viajar la información como bloque de datos en respuesta a una petición.

Para usar esta tecnología tendremos que usar alguno de los pocos frameworks que actualmente existen con soporte para Comet, por ejemplo Xaja, un framework PHP que permite este tipo de conexión, o HTTP.Push, pequeña biblioteca javascript con este tipo de llamada.

Personalmente todabía he de investigar sobre esta tecnología, porque no tengo muy claro lo de generar eventos en el servidor, o lo de que un archivo en lado servidor esté siempre disponible con el cliente.