Nessy

Para hacer una Web 2.0 sacado del sitio http://www.anieto2k.com/ >

1. Una degradados, una web sin degradados no es una web, y menos 2.0.
2. Usa.un.nombre.con.puntos,si el nombre de tu web no tiene puntos, no se como te atreves a publicarla.
3. Fondos diagonales, eso es lo que denota la originalidad de los diseñadores, usa diagonales para darle un efecto más 2.0 a tus creaciones.
4. Fuentes grandes, importante piensa que con esas pantallas tan modernas quizas las vean pequeñas, los de 800×600 que hagan scroll o cambien de monitor.
5. Fondos claros, tambien es realmente importante, fondo claros sin hacer mucho contraste con las fuentes.
6. Efecto suelo mojado, para que tus usuarios patienen y se queden.
7. Fuentes pixeladas, esto es lo último de lo último, un toque retro siempre te hace más auténtico…
8. Folksonomias (tags), están de moda y aunque nadie las use como toca (yo por ejemplo), demuestras que estás a la última.

(Copia textual de: http://www.anieto2k.com/2006/08/07/8-trucos-para-hacerte-con-la-web-20/)

Para migrar de la Web 1.0 a la 2.0 >

1. Reemplaza e-loquesea.com por my-loquesea.com
2. Incrementa el tamaño de la fuente a 12-16px (1em).
3. Cambia las categorías por tags
4. Cambia la sección de noticias por un blog
5. Cambia el “Enviar a un amigo” por una suscripción RSS.
6. Cambia el “Guardar en Marcadores” por enlaces a redes sociales.
7. Cambia la “Cuenta de usuario” por “Perfil de usuario”
8. Cambia tu cutre código HTML por un semántico xHTML con CSS
9. Son visitantes, no peticiones.
10. Añade comentarios
11. Cambia e-site.com?id=1234&sort=desc&parametros=inventados por my-site.com/a-que-molo-mazo
12. Cambia tu sitio personalizado por un CMS Open Source.

(Copia textual de: http://www.anieto2k.com/2007/07/31/12-formas-para-migrar-de-la-web-10-a-la-20/)

En este link, nos explica como centrar un DIV con CSS.

Ese metodo nos evita hacer uso de tablas y asi optimizamos el renderizado final del HTML (tal como lo hemos visto en un articulo citado en este blog).

Como ejemplo, pude mejorar mi "Espere por favor" o "Cargando..." mandandolo al pie de la pagina. Fijense:

Antes:

<div id="esperaDIV" style="position:absolute;width:100%;height:100%;display:;z-Index:1500">
   <table width="100%" height="100%" cellspacing="0" cellpadding="0">
   </tr>
      <td valign="bottom">
         <div style="width:100%;background-color:#CDF821;height:22px;background-image:url(i/indicator_background.green.gif)">
            <table align="center">
            <tr>
               <td><img src="i/indicator.gif" width="16" height="16"></td>
               <td><div style="width:140px;height:16px;text-align:center"><font face="Verdana" size="2"><nobr>Espere por favor...</nobr></font></div></td>
            </tr>
            </table>
         </div>
      </td>
   </tr>
   </table>
</div>

Depues:

<div id="esperaDIV" class="barraStatus espera" align="center">
   <img src="i/indicator.gif" width="16" height="16">Espere por favor...
</div>

La clase CSS:

.barraStatus {
	position: absolute; top: 100%; width: 100%; height: 22px;
	margin-top: -22px;
}
.espera {
	background-image:url(i/indicator_background.green.gif);
	height: 22px; margin-top: -22px;
}
.espera img {
	vertical-align:bottom; margin-right:15px;
}

Link: http://www.dezinerfolio.com/2007...

A continuación un articulo del porque de evitar el uso de tabla y si de CSS a traves de DIV:

http://www.twoninemedia.com/blog/index.cfm/2007/4/19/TabledLayoutsvsCSSLayouts

A mi no me quedaba claro como reemplazar un tag TABLE por DIV, pero lo entendí una vez visto el código fuente de los 2 siguientes ejemplos:

CSS Layout: http://www.twoninemedia.com/css%5Fvs%5Fhtml/css/
Table layout: http://www.twoninemedia.com/css%5Fvs%5Fhtml/html/