Developer Bar para Firefox 3

Si usabas esta barra antes y al actualizar a FF3 dejó de funcionar hay buenas noticias, no se exactamente desde cuando, pero ya funciona bien en FF3. Aquí puedes descargarla.

Una alternativa al clearing

¿Estás cansado de usar esto?

 
<div class="clear"></div>
 

En el sitio Quirks Mode nos muestran una solución sencilla para no usar markup extra en tu código. Ver la solución.

Lo vi en cssglobe.com

Sitio Plaza Las Palmas

Este es otro sitio que terminé hace poco, pero que no se porque no lo había publicado. El proyecto fue hecho para Plaza Las Palmas un complejo de oficinas acá en la ciudad de Hermosillo. El sitio está hecho en HXTML + CSS. Si le ven algún bug les agradecería que me lo hicieran saber. Visitar sitio de Plaza Las Palmas.

Si tienes alguna vez la necesidad de mostrar gráficas en tu sitio te recomiendo AmCharts, que es lo que usamos en este sitio para desplegar la gráfica de dona. Es uy flexible y tienes control sobre como se ve, ángulo, colores, altura, etc. Los datos se alimentan desde un archivo de texto o bien pueden ser alimentados dinámicamente. Puedes usarlo de forma gratuita sólo que te dejan una liga en la parte superior de la gráfica. Si no te importa esto puede ser una buena opción.

Sitio web Los Santos Residencial

Recién terminé este sitio para Los Santos Residencial, una colaboración entre Miguel Ayala y Trost.

A nivel de código el sitio fue relativamente sencillo pero presetnó algunos pequeños retos con el CSS. Usé más flash de lo que normalmente uso pero creo que la dosis de flash que tiene le ayuda. El sitio esta hecho completamente en XHTML + CSS y validan :). Sitio de Los Santos Residencial.

Posicionamiento con CSS

Excelente tutorial para conocer de la A a la Z el posicionamiento con CSS. Learn CSS Positioning in Ten Steps.

cssremix.com rediseña

Acabo de darme cuenta que cssremix cambió su diseño, a mi en lo personal me gustaba más el anterior, ¿ustedes qué piensan?

50+ CSS Buenas prácticas y guías para escribir CSS

Encontré este post y la verdad es que sirve mucho, hay algunas cosas realmente interesantes en la lista.

Agregar bullets a los headers

Este es un recurso muy utilizado y es fácil de hacer, a continuación vamos a ver paso a paso como hacerlo.

Este mini-turorial sirve en los casos que queremos agregar un bullet a la ziquiera de nuestros headers H1, H2, H3, según sea el caso.

Aquí un ejemplo:

Lee todo el post »

Fade out bottom

Este es un efecto interesante, los contenidos hacen fade al llegar al bottom de la página, esto se logra con un gradient en .png de blanco a transparente y con un z-index elevado para asegurarte de que quede encima de todo. ¿quiéres impresionar a tus clientes? :p

Fade out bottom

Preload de imágenes con CSS

Haces un menú con fondo transparente o de color sólido, en el rollover necesitas que despliegue una imagen, ya sea un gradient, una textura, etc. y es ahí cuando comienza el dolor de cabeza, porque la imagen que carga en el rollover tiene un delay antes de aparecer, esto es muy molesto y hace que el sitio parezca lento.

Hay soluciones basadas en javascript para hacer el preload de un menú, pero queremos evitar el uso de js al máximo, sobre todo cuando no es necesario, así que recurrimos al CSS para que haga el trabajo. Lee todo el post »

Syncotype your baselines

¿Qué significa el título? Se refiere a ajustar el alto de líneas de tu texto para que concuerde en las diferentes cajas o divs aunque tengan diferentes tamaños de letra. ¿Confuso? esta captura lo explica mejor.

Se ve bien a primera vista, incluso el autor del post usa este recurso en su blog y se ve bien, pero... es engañoso.

Como pueden veer el diseño termina muy rígido a mi parecer, otro detalle es que si bien funciona con ciertos tamaños de letra, cuando la diferencia se agranda comienza a descomponerse la cosa. Cada tamaño de texto tiene una altura de línea óptima (en la teoría y en la práctica), y este recurso llamado Syncotype lo pasa por alto.

Visualmente los textos más pequeños necesitan menos altura de línea de otro modo se vuelve dificil la lectura. Syncotype, una solución para tomarse en cuenta y tenerla en nuestro abanico de herramientas pero hay que tener cuidado con su uso.

Sitio web Alpha Group

Este sitio fue hecho en asociación con Morgan Global Solutions y debo decir que fue una experiencia muy positiva en muchos sentidos. Es un sitio de bienes raíces, promociona propiedades en Arizona y Sonora. El sitio está hecho completamente en CSS + HXTML y tiene algo de flash en el home y en los interiores, además está en inglés y en español.

Aquí pueden ver el sitio viejo, aquí pueden ver el sitio que les hicimos.

La paleta de colores del sitio la hice así porque así son los colores de nuestro entorno acá por Sonora y Arizona, cafés, naranjas, amarillos, incluso a veces los cerros se ven morados.

Quiero contarles algo que pasó con este cliente. En un principio no sabían si soltarnos el trabajo, —¿sí lo van a hacer bien? preguntaban, ahí Daniel jugó un papel muy importante en la labor de ventas y convencimiento, pasado este episodio comenzamos a trabajar y les envié el diseño, lo vieron y dijeron que gustó mucho no sin antes preguntar si realmente nosotros lo habíamos hecho, sorprendidos levantaron las cejas, al parecer no pensaban que desde este lado de la frontera, se hiciera diseño de calidad. La realidad es que los norteamericanos algunos norteamericanos tienen esa percepción de México, creen que todo es como se ve en la TV.

Terminar y entregar este trabajo fue una experiencia agridulce, por un lado fue dulce por que el nuevo sitio les gustó mucho el trabajo lo vendimos bien y un poco agria por otro lado por que creen que en México no somos capaces de hacer trabajo de calidad y eso saltaba en diferentes partes del proceso. Al final creo el balance fue bueno.

Todavía no ponen el sitio en su dominio final, no se la razón pero creo que andan en eso.