Como se habrán dado cuenta, esta semana que pasó no hubo posts, y es que proyectos críticos y urgentes ocuparon el 100% de mi tiempo… espero retomar la actividad blogera esta semana con un par de ideas nuevas y también para anunciar algunas novedades en las que vengo trabajando.

Saludos,

Michael M.

Interesante tabla comparativa de los mayores browsers actualmente, con respecto de su soporte para la aplicación de reglas de CSS. Incluye:

Windows

• Internet Explorer 7, 6, 5.5, 5, 4
• Mozilla 1
  
• Netscape Navigator 7, 6, 4
  
• Op 8, 7, 6, 5

Mac OS X

• Internet Explorer 5
• Mozilla 1
• OmniWeb 4
• Opera 8, 7, 6, 5
• Netscape Navigator 7, 6
• Safari 2

entre otros…
Ver tabla aquí: http://centricle.com/ref/css/filters/

• Open Source Templates
  15 exelentes templates
• OSWD
  Cientos de layouts de todo tipo
• Maxdesign
  23 layouts
• CSSplay
  Layouts profesionales de Stu Nicolls
• Changingman
  3-col-layouts
• Mollio
  Siete variacions de un template (incluye guía en pdf)
• Six Shooter Media
  15 Templates
• CSS Design Templates
  12 Templates
• ThreeColumnLayouts, by CSS Discuss
  Colección de templates de 3 columnas
• CSS Intensivstation
  15 Layouts
• CSS Frames Layouts
  Diseños con Frames usando CSS
• CSS Template Gallery
  32 templates (opción de búsqueda)
• Ex-Designz
  98 (X)HTML-based CSS-templates
• Code-Sucks
  6 templates y varios layouts de 2 a 4 columas
• Layout Gala
  40 layouts profesionales
• Little Boxes
  16 Layouts, clásicos
• Solucija
  19 Templates

Vía: Ceslava

Dato curioso… este sitio web mide 18.939 kilómetros de alto. Hecho con CSS, por supuesto.
Verlo aquí: http://worlds-highest-website.com/

Esta relativamente sencilla técnica de CSS permite incluir sombra en cualquier elemento de bloque (div) sin utilizar imágenes.

Ver el código en acción aquí.

Descarga el código fuente aquí (ZIP).

Fuente: http://www.webtoolkit.info/css-drop-shadow.html

Esta herramienta basada en CSS y Javascript, permiten crear esquinas redondeadas en módulos, sin utilizar imágenes.

Basically, Nifty Corners are a solution based on CSS and Javascript to get rounded corners without images.

Ver los ejemplos aquí.

Es el orden correcto y hasta cierto punto necesario de la declaración del selector de “links” en CSS, para que éste funcione correctamente

Leía un artículo de Nicole Hernandez en WebDesign.org acerca de este tema, en donde la autora relataba la manera de recordar el orden correcto de los links en una hoja de estilos.

Love Hate is how I taught myself to remember the order. The acronym for the order (LVHA) just wasn’t terribly easy to remember on its own. It didn’t spell anything, or really give a sensical meaning to me. But Love Hate works. So what is LVHA?.

Los únicos selectores a los que se les puede alterar el orden son a:link y a:visited.

La autora nos plantea este simple ejemplo ilustrativo:

a:link { background-color:white; color: blue }
a:active { background-color: blue; color: white;}
a:hover { background-color: black; color: white;}
a:visited {background-color:white; color:green;}

Si utilizamos el orden planteado en el ejemplo, todas las reglas funcionarán, excepto el “active“. No se mostrará, porque la declaración de “active” debe ir después de “hover“, y que son eventos consecutivos, por decirlo así.

El orden correcto ya lo conocemos, verdad? LVHA!

Este artículo se basa en hechos de la vida real. Los nombres de los personajes que figuran aquí fueron cambiados para proteger su identidades.

Pablo: Oe, José me indica que hay muchos problemas con la presentación del sitio. Son cuestiones del CSS más que nada.

Naza: Simón, ya estuve revisando y hay unas cosas que no cuadran. Pero no tengo instalado el IE6, porque esta m…. de Windows me amagó e instaló el IE7 en los auto updates, así que sólo puedo revisar en el 7 y en Firefox.

Pablo:Yo tengo el IE6, porque Dilbert me pasó un programita para poder instalar ambos.

Naza: Ah ya, bueno, yo no quiero volver al IE6, así que deja nomás. Voy a revisar el CSS en el 7 y en FF.

2 horas después…

Naza: Oe, no funca… se ve bien en IE7, más o menos en IE6 y descuadrado en FF. Pero creo que tengo una solución alterna, pero tienes que agregar unas cosas al código del “head” del sitio.

Pablo: A ver, cual e…

La solución:

En el “head” del HTML del sitio incluimos lo siguiente:

<style type="text/css"> <!-- @import url(files/css/FFstyles.css) screen; --> </style>

Este código es independiente de la línea que llama al archivo CSS original del sitio. Lo que queremos lograr, es “importar” una hoja de estilos alterna o más bien, complementaria, con estilos específicos para Firefox.

Y, ¿por qué sólo para Firefox?.

Simple, la regla @import es completamente ignorada por Internet Explorer, por lo que este nuevo CSS importado sólo lo va a leer el Firefox, y como el @import tiene prioridad en cuanto a la jerarquía de importancia de los estilos declarados, estos sobreescribirán a los que ya fueron declarados en la hoja de estilos original del sitio.

Esto nos da una gran posibilidad de crear estilos específicos para Firefox, que el IE no los tomará en cuenta, dándonos así un control mucho mayor sobre la presentación final del sitio.

El desenlace…

Pablo: Oe, avanzado eso del @import, ya se solucionaron prácticamente todos los problemas de presentación entre browsers.

Naza: Si oye, efectivo, no? Pero no cantes victoria, te acabo de pasar por mail las capturas de pantalla del sitio visto en Safari.

Pablo: %#&$/=!#

Alguna vez te debes haber topado con la necesidad de rellenar con texto ficticio algún diseño, para simular al mismo. Ésto cuando el cliente o el proyecto no tienen aún definido el contenido del mismo. Para este fin viene muy útil el “Generador de texto Lorem Ipsum“.

Lorem Ipsum is also known as: Greeked text, blind text, placeholder text, dummy content, filler text, lipsum, and mock-content.

Esta herramienta permite generar este texto ficticio con mucha facilidad.
El link aquí: http://lorem-ipsum.perbang.dk/

Encontré un interesante artículo que nos muestra como lograr alturas del 100% en un contenedor/página utilizando CSS.

Although not that widely supported, I have found a way to make 100% height with CSS work in IE, Firefox and Opera. Three of the most major browsers right now. Today, I show you how to accomplish this fun little trick. First we must look at the html and body tags. In CSS’ eyes, these tags are block level elements. Meaning by default that they have a value of auto height and width. Changing these values in your CSS, you can quickly add 100% height to your design.

El CSS:

<style> html, body {margin: 0; padding: 0;} html, body, div {height: 100%;} div {width: 50%; background-color: green; margin: 0px auto 0px; text-align: center; padding: 20px;}</style>

El código en acción aquí!

Interesante técnica para simular el uso de “frames” con CSS, sin usarlos como los conocemos.

¿Cómo funciona?

The document consists of three main blocks: headerwrap, middlewrap and footerwrap. headerwrap and footerwrap have fixed positions; headerwrap at the top and footerwrap at the bottom of the viewport. middlewrap has padding-top and padding-bottom to match the heights of headerwrap and footerwrap.

To center the content horizontally, the contents of each of the main blocks has its left and right margins set to auto.

Ver la página resultante aquí.

Esta es una buena base de datos de plantillas para web. El precio se ve razonable por acceso ilimitado ($59), claro, siempre tomando en cuenta que un sitio basado en una plantilla puede llegar a encontrarse con uno (o varios) similares en Internet.

En todo caso, tiene algunos diseños bastante buenos que podrían servir de base para un buen diseño.

Ir a Dreamtemplate.

Llenos de entusiasmo por este nuevo año, empecemos por evaluar el 2006, nuestros logros, cosas positivas y negativas, con el fin de mejorar en lo que se deba y lo que se pueda.

Algunos hacen listas con propuestas a corto y largo plazo, otros simplemente viven al día. Lo importante es vivir plenamente, con humildad y buena voluntad.

En cuanto a este blog, espero traerles mejor contenido cada vez, y complementarlo con más y mejor información.

Felicidades a todos, les desea…

Michael M.