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?

Seguro uno de los temas más complicados al momento de construir un sitio tableless, se refiere a los float. Entenderlo y saber utilizarlo es un lío. Esto se complica más al momento de hacer que el sitio se vea bien en los browsers, un dolor de cabeza (Firefox es muy sensible en problemas con floats). Para ayudar en esto, existen varios hacks, o mejor, tips que facilitan la vida. Lo siguiente es una manera de manejar los floats, principalmente cuando existen varios elementos dentro de un mismo div. Juntos, suelen comportarse de manera extraña. A la antigua. Cuando un float está contenido dentro de otro contenedor (burp, redundancia….. pero se entiende) que tiene borde o fondo visible (para que se note el problema, ver img1), el float no fuerza automáticamente el borde inferior del contenedor principal a medida q este float se agranda. A su vez, el float es ignorado por el contenedor y se verá colgado del borde superior (esto no pasaba con las tablas…. maldición!). Para esto, la W3C sugiere usar un elemento clear al final de la caja contenedora, forzándolo a despejar este elemento incluído. Lo que hará, por ejemplo, un { clear: both; } al final del contenedor, será extender el margen inferior hasta que se ‘despeje’ (clear) hasta el final del float.