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:

(Ver actualización) Una buena razón por lo que muchas personas defienden el uso de tablas para la diagramación de contenidos de un sitio web, es porque éstas permiten el correcto centrado horizontal y vertical de los elementos contenidos dentro de sus celdas. La propiedad vertical-align no es soportada por los browsers actuales, y va a ser lanzada con CSS3.0 (junto con muchas otras bien interesantes). Pues, a continuación les presentaré un método donde se utiliza efectivamente vertical-align, junto a un atributo poco utilizado de display y un hack para IE, como siempre necesario. Antes que nada, necesitamos que nuestra superficie esté definida, en este caso al 100% de la pantalla (sin scroll). Esto lo logramos con height: 100% en 2 partes: el html y el contenedor de lo que queremos mostrar:

#17 – 29 Diciembre 2006

En la sintaxis de definiciones de CSS, es posible resumir algunas propiedades (tags), lo que nos da una gran ventaja ahorrándonos líneas de código, lo que a la larga hace que nuestra hoja de estilos pese bastante menos. Con esto también logramos que nuestro código sea más entendible, ya que juntamos en una sóla línea varios parámetros que pueden estar esparcidos en el mismo o varias classes e ID‘s. El orden y los parámetros de cada propiedad no son obligatorios respetarlos literalmente, pero recomiendo que por lo menos sigan ese mismo orden.

Un problemón de quien pretende entender esto del diseño con hojas de estilos, llega al momento de construir el layout y que todos los elementos se queden donde deberían estar, posicionándolos, flotándolos, como mejor se prefiera. Margin, padding, border y width dentro de un div suelen causar grandes conflictos, los que se explican en el Modelo de Caja de CSS, al cual describe las cajas rectangulares que son generadas por los elementos de la estructura del documento. Comencemos con esto. Dimensiones de la caja: Cada caja tiene un área de contenido (texto, imagen, ambos, ninguno) y las áreas que la circundan, como padding, margin y border; el tamaño de cada propiedad puede ser especificado al momento de construir y darle estilo a esos elementos. En el siguiente dibujo se muestran esas áreas y cómo se comportan.

Llega el momento de diseñar un sitio. Estás todo inspirado. comienzas el layout, Photoshop, Fireworks a mano. Pero luego comienzan las trabas. Necesitas un logo vectorizado, por último un JPG. Y el que tienen en su sitio es un GIF transparente del tamaño de un alfiler. Estás maqueteando, y de repente no tienes una imagen de un edificio, un paisaje, una flor, una familia… Tus CD’s de banco de fotos no dan a basto ya. Para qué hablar de tu catálogo tipográfico. Pero con Internet como co-piloto, tienes muchas chances de encontrar lo que necesites, en poco tiempo y de gran calidad. Entregaré unos links muy útiles para el diseñador al momento de requerir recursos gráficos gratuitos (no queremos infrigir ningún Copyright) y de muy buena calidad. Directo a tus Bookmarks: Logos Vectorizados: En Brands of the World encontrarás una gran cantidad de logotipos, isotipos vectorizados, en formato EPS y por lo tanto de gran calidad. Si estás en Chile, Logoteca puedes encontrar muchas marcas nacionales y extranjeras, subidas por los mismos usuarios (registro necesario). Tipografías: Da Font es un referente al momento de buscar fuentes digitales. Muy bien ordenados y catalogados, este sitio te da la posibilidad de previsualizar la tipografía con el texto que ingreses. Si quieres saber qué tipografía corresponde tal o cual isotipo, o con qué tipo escribieron un slogan, What The Font te permite subir un archivo de imagen con el texto de la discordia, y el sistema trata de adivinar a qué tipo de texto corresponde. Muy útil. NeatFonts también te ofrece un amplio catálogo de fuentes para lo que estimes conveniente. Íconos: