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.

#14 – 1 Agosto 2006

Para todos quienes hemos peleado con IE5, 5.5 y 6, nuestras pesadillas están lejos de terminar… Con el inminente lanzamiento de IE7, Microsoft ha llamado a los desarrolladores a eliminar los hacks creados durante años, ya que supuestamente estarán arreglados con el advenimiento de este nuevo browser. En ese entonces, todos nos asustamos, ya que un nuevo dolor de cabeza se nos venía en frente. Recientemente, Microsoft hace otro anuncio, donde expresa que obligará a sus usuarios a actualizarse a la última versión. Ahora, qué es lo que sugiere Microsoft: «Utilicen comentarios condicionales (conditional comments)». Este método no se considera como un hack propiamente tal, y se desarrolló con IE5, así que por lo menos hay soporte en cuanto a browsers antiguos (por no decir viejos). Estos comentarios condicionales corresponden a una sintaxis especifica para escribir comentarios en documentos XHTML, los que son interpretados solamente por Internet Explorer, permitiendo que especifiquemos una condición necesaria, por ejemplo, una versión especifica del browser, y establecer la solución para una o más detalles de ese browser.

En un blog al que estoy suscrito via RSS, y el cual recomiendo por el interesante contenido que siempre entregan, surge este interesante artículo, donde se muestra objetivamente (aunque faltan detallles, no deja de ser buena referencia) la evolución que ha tenido el HTML y el diseño y desarrollo web desde sus comienzos. Destaco las siguientes líneas, para mí un excelente desenlace: Bueno, y ¿todo esto es importante, o se trata sólo de pajas mentales de los informáticos?