Babelia

Marina nos envía una excelente página donde Peter-Paul Koch hace un análisis exhaustivo de las propiedades CSS y su comportamiento en los distintos navegadores. Para guardarla en “Favoritos”, sí señor.

• QuirksMode

En SmashingMagazine se han currado un buen artículo acerca de las tendencias del diseño web para el presente 2009. Aquí podemos visualizarlo:

• Web Design Trends for 2009

De http://reader.feedshow.com me traigo este artículo sencillo para solucionar el tan odiado bug

“Este maldito bug de explorer 6 que se empeña en duplicar caracteres fuera de línea y a su libre antojo me trae ya loco, hoy me habrá aparecido 5 millones de veces (bueno alguna menos) y cada vez tiene una solución distinta. Es muy extraño, menos mal, aunque suele manifestarse de muy distintas maneras, más mal, aunque parece ser que sólo suele aparecer en el último flotante de una serie de elementos flotantes y/o cuando en esta serie de float existen algún comentario del html.
En positioniseverything lo explican, pero la verdad es que es un bichito tan caprichoso que lo que unas veces funciona para solucionarlo las otras no, por eso si alguien se enrolla y conoce más soluciones estúpidas que las diga.
Yo abro la lista con las cosas que he descubierto-me han dicho-he leído y me han funcionado:

1. poner un simple espacio en blanco detrás del último carácter del elemento contenedor, al tener no-wrap por defecto no nos fastidia la maqueta y soluciona hasta un máximo de dos caracteres duplicados
2. Poner un <br /> tras el último carácter del elemento contenedor, en este caso concreto lo he solucionado así, y no me ha saltado línea, simplemente ha ignorado el retorno de carro
3. Eliminar comentarios en el html, ya que misteriosamente si tenemos muchos puede surgir este bug -vía positioniseverything-

El resto de literatura que he leído sobre este bug no me ha funcionado así que no seré yo quien la escriba (no tendría sentido,verdad?).”

Blog donde enlazan a artículos en los que nos explican interesantes técnicas CSS para obtener el mejor resultado con nuestra tipografía web:

• Web Design Ledger

Sin duda, una entrada para lectura diaria sobre temas CSS

• www.cssblog.es

Si queremos evitar la técnica faux column, siempre podemos acudir a esta técnica CSS para simular columnas de la misma altura.

Columnas de igual altura con CSS

CÓDIGO CSS

#container {
background-color: #fff;
overflow: hidden;
width: 780px;
margin: 10px auto 5px auto;
border: 1px solid #000;
}
#content {
background-color: #fff;
width: 580px;
border-right: 200px solid #0099FF; /* ancho y color del menú */
margin-right: -200px;
float: left;
}
#menu {
width: 200px;
float: left;
color: #fff;
background: #0099FF;
text-align: left;
}

CÓDIGO HTML

<div id=”container”>
<div id=”content”>
<p>bla bla bla bla</p>
<p>bla bla bla bla</p>
</div>
<div id=”menu”>
bla bla bla bla
</div>
</div>

Vía Serviweb.es

Las tablas existen y existieron desde el comienzo en HTML, pero no se crearon para diseñar un sitio, sino para la presentación de datos tabulares. La utilización del “border=0” y las imágenes transparentes hicieron posible crear una rejilla que permitió a los diseñadores organizar textos e imágenes, establecer tamaños y ubicar objetos. Pero ésto es sencillamente incorrecto. Las tablas no se crearon para maquetar y no deben utilizarse para eso, porque de esta forma se mezclan presentación y contenido.

La solución es clara: CSS+HTML/XHTML. Afortunadamente, cada vez son más las empresas que deciden dejar atrás las tediosas tablas y evolucionar desarrollando sus sitios respetando los estándares establecidos por la W3C (organización internacional que desde hace unos 12 años se dedica al desarrollo de pautas y estándares web), lo que facilita la accesibilidad y la correcta visualización de las páginas en los navegadores que respeten dichos estándares.

Algunas de las ventajas de la maquetación con CSS:

• Separación de forma y contenido. Generalmente CSS y HTML se encuentran en archivos separados, lo que facilita el trabajo en equipo porque diseñador y programador pueden trabajar independientemente. Por otro lado, permite el acceso a distintos navegadores y dispositivos.
• Tráfico en el servidor. Las páginas pueden reducir su tamaño entre un 40% y un 60%, y los navegadores guardan la hoja de estilos en la caché, ésto reduce los costos de envío de información.
• Tiempos de carga. Por la gran reducción en el peso de las páginas, mejora la experiencia del usuario, que valora de un sitio el menor tiempo en la descarga.
• Precisión. La utilización de CSS permite un control mucho mayor sobre el diseño, especificando exactamente la ubicación y tamaño de los elementos en la página. También se pueden emplear medidas relativas o variables para que la pantalla o la caja contenedora se acomode a su contenido.
• Mantenimiento. Reduce notablemente el tiempo de mantenimiento cuando es necesario introducir un cambio porque se modifica un solo archivo, el de la presentación, sin tener que tocar las páginas que contienen la estructura con el contenido.
• Diseño unificado y flexibilidad. Es posible cambiar completa o parcialmente el aspecto de un sitio con sólo modificar la hoja de estilos. Por otro lado, el tener el estilo de una web en un solo archivo permite mantener la misma apariencia en todas las páginas.
• Posicionamiento. Las páginas diseñadas con CSS tienen un código más limpio porque no llevan diseño, sólo contenido. Esto es semánticamente más correcto y la página aparecerá mejor posicionada en los buscadores. Google navega obviando el diseño.

• ASNativos (Foro sobre Adobe Flash y ActionScript)
• Acceso Web (Foro sobre Accesibilidad)
• Ovillo (Foro sobre CSS)
• Cadius (Foro de la Arquitectura de Información, Usabilidad y Diseño de Interacción)
• Domestika (Foro sobre diseño y todas sus disciplinas)

Desde webdesignerwall podemos ver una buena selección de los mejores diseños en CSS del año 2008.

• Best of CSS design

http://www.anieto2k.com/2006/12/26/css-entendiendo-y-aplicando-los-hacks/