Un interesante recurso utilizado por diseñadores es de utilizar bordes redondeados para delimitar secciones en sus sitios web. En CSS no es tan simple lograrlo, a veces implica utilizar más de un DIV contenedor para abrir y cerrar los bordes, además de que nos impide que éstos sean líquidos (o elásticos). navegando, me encuentro con 2 soluciones que se ven bien prometededores, y son realmente crossbrowser (no como en el que publiqué hace un tiempo, donde al parecer tiene problemas con IE6).

#19 – 30 Marzo 2007 Envía tu sitio construído en HTML+CSS

Un gran medio aún por ser explotado en latinoamérica (y que creo que lo será durante este año 2007) es el de la internet para dispositivos móviles. Aunque ya hice un acercamiento en el artículo CSS para móviles, navegando por mis RSS encuentro un link donde Brian Fling se toma la molestia de escribir un manual para diseño web para móviles. Increíble, aplaudo su iniciativa. Download directo del manual en PDF

Por usabilidad, siempre es recomendable dejarle claro al usuario dónde está parado dentro del sitio. Existen varias maneras de hacerlo, desde dejar evidente en el en qué sección se está, pasando por mostrar un pequeño mapa de navegación desde y hasta dónde está ubicado (Inicio > Quiénes Somos > Empleados por ejemplo) o dejar seleccionado en el menú de navegación dónde uno está parado, con una clase especial. En este caso, en sitios pequeños a medianos, recomiendo utilizar un pequeño y simple truco que involucra HTML y CSS. Hagamos un layout muy simple. En este caso, un menú con listas y un contenido sólo para que no esté tan vacío (reciclaré el HTML de un post anterior):                 Item Uno           Item Dos           Item Tres            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut risus hendrerit sem adipisc………

«Estaba ya cansado de, cada vez que necesitaba del código del .clearfix para incluirlo en una nueva hoja de estilos CSS, tenía que googlear y copiar-pegar desde positioniseverything… Entonces, luego de un día de investigación, ha surgido este widget. Muchas gracias a Apple por hacer la vida de todos más fácil… Sólo presiona el botón copy para hacer el código disponible en tu clipboard. Luego, pégalo en tu hoja de estilos favorita.» «I was sick and tired of, everytime I needed the .clearfix code to include it to a new CSS stylesheet, I had to google it and copy-paste from positioniseverything… So, after one day of investigation, this widget has emerged. Many thanx to Apple for making everyone’s life easier… Just press the copy button to make the code available in your clipboard. Then, paste it in your favorite stylesheet.»

Hubo un tiempo en que esto me dió varias horas de preocupación, y muchas más de búsqueda por internet. Necesitaba construir un layout con 2 columnas (pueden ser 3 o más, da igual) pero que todas las columnas tuvieran el mismo alto, o por o menos que simularan tenerlo. Bien, pasado algún tiempo ya me río de la solución, pues ahora la hago en menos de 3 minutos. Con el siguiente ejemplo, aprovecharé de explicar también cómo crear un layout de 2 columnas, y que ambas colunas tengan (aparenten) tener el mismo alto. Primero que nada, comencemos a construir nuestro layout de 2 columnas. El tendrá un con id #menulateral y otro con id #contenido. Dentro de cada , los ítems del menú (en ) y los del contenido (en este caso un texto simulado en ).

Muy seguido la gente me pregunta sobre cómo hacer que sus sitios aparezcan en los buscadores en los primeros lugares. No existe el santo grial para esto. No existe un botón que lo haga posible. Cada buscador tiene su lógica de indexar sitios, y de agregarle la relevancia que hace que tu información salga en la página 1 o en la oooooooooooooooooooogle. En Chile por lo menos, Google es el que reina entre los buscadores de contenidos Internet. Y el que la gente tiene más interés por salir bien posicionado. SEO (Search Engine Optimization) es una técnica que debieran manejar todos los webmasters, diseñadores y desarrolladores de sitios web. Corresponden a una serie de consejos que mejoran y facilitan que los buscadores indexen nuestros sitios, cataloguen la información y la muestren coorrepondientemente a lo que queremos ser mostrados. ¿Y porqué me tomo el tiempo para escribir sobre esto en CSSLab? Bueno, uno para que me dejen de preguntar. Paso el link y listo. Dos, porque el uso de XHTML y CSS está directamente relacionado, y tiene gran influencia sobre el tema.

Más de alguna vez me han preguntado cómo funciona el menu superior que comanda este sitio. Ese movimiento de la etiqueta que de tan fluído parece ser Flash. Bueno, para eso se utiliza una librería JavaScript gratuita llamada script.aculo.us, la que a través de un simple comando y fácil configuración permite ese y otros muchos interesantes efectos. Existen algunas otras librerías, también gratis que hacen lo mismo. Tal es el caso de mootools, jquery o simpleJs. Es desición de cada uno cuál utilizar.

#18 – 12 Febrero 2007

Hasta no hace poco, para lograr transparencias en imágenes para web, el método era exclusivamente hacerlo con un SWF. Con la masificación del PNG, esto se ha hecho más fácil y el resultado es bastante satisfactorio (no como esos horrendos bordes dentados de los eternos GIF), pero lo complementaremos bastante con el uso de CSS. Propiedades del browser Cada browser tiene su propio método de aplicar opacidad a las imágenes. CSS ha implementado 3 diferentes propiedades que afectan la transparencia de un elemento: