Creo que este es mi primer artículo sobre diseño en sí. ya era hora de entrar de lleno en mi área. Puedes haber notado que han proliferado 2 características principales en cuanto a diseño en los últimos 5 – 6 años. El primero vino con el gran estilo Aqua creado por Apple para su línea gráfica desde la llegada del sistema operativo Mac OSX (tanto en su sistema operativo, como en sus manuales y su sitio web). El otro son las gradientes de fondo que se han utilizado bastante también en todos lados, inclusive en este mismo sitio. Bueno, no es difícil hacerlas, pero sí necesitan de cierto control para que no lleguen a ser esos horribles gradientes que proliferaban en gráficas hechas por defecto a mediados de los ’90. Bueno, en este momento trataré cómo llegar a tener sutiles gradientes, con las que podrán potenciar considerablemente la visual de sus sitios. Con esto ganaremos profundidad, y lograremos destacar ciertas partes de nuestro contenido que estimemos necesario hacerlo. Para esto utilizaremos Adobe Photoshop. GIMP puede actuar de la misma manera. Otros, no lo sé. Primeros crearemos un encabezado para CSSLab, con otra tipografía de la utilizada normalmente aquí (ver imagen 1). Bien, en un nuevo archivo de 300x200px a 72 DPI, escribo el título de nuestro sitio (en un nuevo layer de texto) en una tipografía en bold, y condensada a -50 (ver imagen 2 ). Ahora, comenzaremos con darle estilo a la tipografía. Abrimos Layer Style (para el layer de nuestro texto) y primero, le agregamos algo de color (ver imagen 3). Utilizaremos una degradación de rojos, y he aquí la clave. Se trata de escoger un color y variaciones suaves del mismo (en hexacromía un tono hacia arriba o hacia abajo). En este caso será el rojo WebSafe #FF0000, y para el otro color, el mismo rojo pero levemente más oscuro, el #CC0000 (ver imagen 4). Importante en este caso es tener nuestra gradiente en 90º, así corre desde arriba hacia abajo de nuestra tipografía (ver imagen 5).

Actualmente ha proliferado el uso de AJAX para cargar contenido sin necesidad de refrescar el browser. Se ha hecho mas fácil con el amplio abanico de toolkits existentes, fáciles de usar e integrar, y gratis. En este momento mostraré un truco para mostrar la carga de una imagen a través de un simple GIF animado; en realidad puede ser cualquier mensaje que estimes conveniente, siempre que sea una imagen liviana (no más de 2KB).

#15 – 5 Septiembre 2006

Nadie niega el boom que ha tenido Lightbox y todos sus sucedáneos en la manera de desplegar imágenes inline, sin tener que utilizar popup. Ciertamente una de las mejores aplicaciones AJAX existentes. El problema que surge, es cuando lo utilizamos en conjunto con un SWF: esta película suele ponerse adelante del Lightbox, y no deja visualizar bien la imagen o el contenido que estamos desplegando (en el caso del Thickbox). Bueno, para solucionar esto, se deben hacer 2 cambios fundamentales: uno en el OBJECT que llama el SWF y uno en el CSS del contenedor de este SWF; en el caso de no tenerlo, es preferible crear un DIV que sólo contenga nuestra querida película Flash. Vamos por partes: En el OBJECT debemos aplicar un parámetro y un valor para la película Flash: wmode=“opaque”. Es conocida por muchos el parámetro wmode=“transparent”, pues ésta nos permite que las zonas que no tienen fondo en la película Flash se transparente, dejando ver el fondo del HTML que lo contiene (sea éste color plano, o una gradiente, o una foto, etc), similar a una película PNG Transparente (precisamente trabajando con el canal de transparencia, el canal alpha). Con opaque, la película Flash se esconderá detrás de cualquier elemento, sea éste HTML o controlado por Javascript. Por lo tanto, el HTML que llama el SWF sería:

Espero les guste este nuevo estilo gráfico que intenté darle a CSSLab. A mi gusto, 100% mejor. Estaba cansado ya de esas 2 columnas todo el rato. Además le saque el montón de herramientas que tenía ese sidebar, dejé sólo los necesarios. Errores, sugerencias, hacks, cambios… háganmelo llegar con confianza. PD. no sé si deba poner el Adsense… creo q ensucia mucho el sitio…. q opinan? Necesito para el server de alguna manera….

Buenos tiempos eran esos donde reinaban los frames… no había que pensar en semántica, preocuparse por compatibilidad… todo se veía en Netscape y Explorer. Eran, como quien dice, browsers carne de perro. Pero ahora son otros tiempos, hay más conciencia de respetar las reglas para una mejor compatibilidad entre navegadores y plataformas, como se dice: mayor accesibilidad. Bueno, a lo que voy con todo este blablabla es que mostraré ahora una manera de construir un layout similar a los viejos frames, tan mal mirados actualmente. Puede ser verdaderamente útil, dependiendo del uso que el diseñador / desarrollador estime darle. La clave: position y overflow . Comenzaremos por diagramar básicamente el sitio, con un encabezado (header), cuerpo del contenido (container) y un pie de página (footer).

Este debería de haber sido el primer post de CSSLab, como antes tarde que nunca, traduzco y transcribo 11 misivas que explican porqué no deberías de utilizar tablas para diagramar un sitio. Comencemos: 1. Porque utilizar tablas es una estupidez: Las tablas existen en HTML por un motivo: mostrar datos tabulados. Pero con la disponibilidad del border=“0”, se hizo posible para los diseñadores tener grillas para contener su diseño. Aún hoy es la forma más común de diagramar y armar sitios. 2. Convenciendo al jefe / cliente: Algunos buenos motivos para trabajar con web standards: sus sitios se cargarán más rápido los costos de hosting se reducirán con sitios más livianos los rediseños de sitios serán más eficientes y baratos será más fácil mantener una consistencia visual entre todas las páginas del sitio mejores resultados en buscadores su sitio será más accesible para todos los browsers

Desde Flash MX 2004 que se permite importar información de hojas de estilo CSS para los campos de texto dinámicos de una película Flash. Lo interesante de esto es la capacidad de manejar externamente el estilo del texto que contiene la película, sin tener que publicarla nuevamente con una nueva, por ejemplo tipografía, o color de texto. Otra ventaja es tener en una misma caja de texto diferentes estilos (recordemos que estamos trabajando con textos dinámicos, y éstos deben tener el mismo tipo de texto para cada campo) sin tener que fraccionar ese bloque en diferentes partes. A continuación veremos cómo cargar una hoja de estilos CSS, manipularla ya lo sabemos pero la implementaremos dentro de una película Flash 7+. Necesitas primero un campo de texto dinámico. Esto es lo más fácil, hazla del tamaño que quieras . Luego, un importante ítem a ser seleccionado: en Properties, asegúrate de seleccionar Multiline no wrap y Render text as HTML, como en la imagen siguiente: Ahora, dale un nombre a esa instancia (campo de texto dinámico), en este caso usaré output. Por último, hora de agregar algo de acción. En el primer frame, copia el siguiente código Actionscript:

Es indiscutible las bondades que ha traído la inclusión de Unisys del formato PNG{.blank}. Lo mejor de él, es la mayor profundidad de colores (miles, aún comprimido) y la facilidad de uso de su canal alfa. Su uso en web aún es limitado, ya que como no será sorpresa, Microsoft Internet Explorer no lo soporta ni siquiera en su versión 6 (al parecer sí en la v7). Mozilla Firefox, Apple Safari, Opera y otros no tienen problemas con visualizarlo. La idea de este post es crear un PNG transparente con un drop shadow (sombra) negro para que se note su ventaja con respecto al ultrapasado, pero nunca mal ponderado GIF transparente. Existen muchos códigos que permiten utilizarlo, con JavaScript o filtros de IE{.blank}, pero ninguno funciona correctamente sobre CSS. Sigue el estilo utilizado: #imagen { width: 400px; height: 219px; background-image: url(«pildora.png») !important; background-image: none; filter: none !important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/pildora.png’); }

Mucho se usa en el diseño web el recurso de los bordes redondeados, principalmente en formas que soportan cajas de texto. Esto se hacía fácilmente utilizando una tabla y varias celdas, y éstas se adaptaban fácilmente al tamaño del contenido. Ahora, son otros tiempos. El mundo cambia, y existen varios métodos para lograrlo sin las desprestigiadas tablas. Estos métodos incluyen imágenes (GIF), JavaScript con CSS o sólo CSS. En esta ocasión, mostrare un método que utiliza sólo CSS para su diseño, lo que nos ahorra unos cuantos bytes de peso y se adapta fácilmente a lo que contiene, sean imágenes o sólo texto. Además, te sacas la lata de andar cortando esos bordecitos en Photoshop y que calcen unos con otros.