El caso que me ha llevado a conocer esta propiedad, es el intentar hacer funcionar la propiedad min-width en IE. Se trata de una propiedad no soportada en versiones de IE, pero usando el siguiente código obtenemos el mismo resultado:

Ahí queda el mini-apunte didáctico, ahora toca volver al estrés, porque estoy sumando más cosas a la lista del otro día. Si sigo así empezaré a sufrir principios de bipolaridad invertida.

Antes que nada, dos cosas básicas: papel y boli, y sobretodo paciencia. Nada sale a la primera, es muy importante el proceso de preparación, y el de prueba y error. Un replanteamiento radical a veces puede ser necesario, no creas que has perdido el tiempo, todo lo contrario.

Simplicidad

Yo diría que es el pilar fundamental del diseño. Deberemos esforzarnos al máximo por que nuestra aplicación resulte sencilla para el usuario al que va destinado.

Usaremos estructuras uniformes y con rejilla (niveles de información a la misma altura). Lo ideal es que haya un foco principal, que atraiga la atención en una primera mirada. Si uniformizamos el contenido resultaría imposible detectar lo importante, y el usuario se asusta, aburre y huye (en ese orden).

Sección de tarifas en las webs de Yoigo y la de Movistar

Usaremos una misma paleta de colores en todo el diseño. Preferiblemente un color blanco de fondo, un color principal, y otro secundario. Hay que tener siempre presente la psicología del color (rojo altera, pasión; verde relaja, naturaleza; azul calma, informa, cielo o mar; amarillo excita, alerta, no se distingue bien; naranja extraño, curioso, diferente ….)

También buscaremos simplicidad en la estructura de las secciones, haremos que sea clara, pocas secciones bien diferenciadas, substituyendo subsecciones por rutas de contenido en cada seccion.

Originalidad

Nos podemos ganar la confianza del usuario si le conseguimos sorprender. A fin de cuentas sorprender es estimular, crear reacción en la persona. Esto da fuerza y identidad a nuestra página. Mi recomendación es dejarse llevar, con mucho cuidado de no perturbar el orden lógico de las cosas.

Pueden ser guiños sutiles, alteración del lenguaje, huevos de pascua, imágenes curiosas o llamativas… imaginación al poder!

Guardar un artista como favorito, en nvivo pulsas sobre “soy fan”, y te contesta con un desenfadado “yeah”

Modelizar usuarios

Este trabajo resulta fundamental e imprescindible. Consiste en analizar todos los usuarios tipo que van a utilizar nuestra aplicación (o que pueden estar potencialmente interesados).

Tendremos que reflexionar profundamente, quién y por qué querrá usar nuestra herramienta, para tenerles preparado lo que esperan, apelando a sus necesidades. Para esto tenemos que emplear ganchos fáciles de identificar (sin mucho texto, llamativos, interesantes)

Es muy importante llamar la atención de todos y cada uno de estos modelos en nuestra portada, y en menor medida en el resto de secciones. Hay que conseguir que cada usuario siga una ruta natural, previamente establecida.

En Flickr tienen muy claro lo que ofrecen, y te lo exponen en la portada para que elijas

Diferénciate

Si haces lo mismo que otro, sobras. Deja claro a tus usuarios que tienes algo distinto que los demás, que te lo has currado, que destacas sobre el resto que se te parecen. Pero sin timar a nadie, que sea verdad!

Trata de conseguir una identidad, que se te reconozca con una palabra, un logo, una tipografía, unos colores… Si consigues que el usuario se quede con tu cara, y le gusta lo que le das, da por seguro que volverá y traerá más gente consigo.

Consejo final

Pero ante todo, disfruta haciéndolo. Porque te gusta.

Te recomiendo leer “Profesional CSS Hojas de estilo en cascada para el diseño Web. Ed. ANAYA Col.De Programadores, para Programadores“; sobretodo primeros capítulos.

Hoy quería compartir algunos enlaces sobre diseño que he acumulado hoy mismo:

• Equidistant Objects with CSS – Truco para hacer cajas equidistantes en CSS
• Formularios usables: 60 Directrices de Usabilidad – Muy interesante, para crear buenos formularios
• Navigation Menus: Trends and Examples – Muestra de menús de navegación, algunos realmente asombrosos
• 47+ Excellent Ajax CSS Forms – Plantillas ya hechas para formularios, tiene ideas muy buenas
• CSS for bar graphs – Por último, gráficos de barras con CSS

Muy pronto regresaré a hablaros de este proyecto que me traigo entre manos. Hasta la próxima!

Las tres reglas de oro

Lo primero y principal antes de empezar a escribir la plantilla, es definir estas tres reglas de oro del CSS. Se colocan al principio del archivo CSS, y sirven para evitar las discrepancias principales entre navegadores. Así nos evitamos más de un susto al comprobar si se ve igual en todos los navegadores.

Lo que hacen es inicializar todos los márgenes internos y externos a cero (de TODOS los elementos), prefijar un tamaño de letra uniforme para todos los navegadores, y eliminar el borde de las imágenes.

Conocer más sobre las tres reglas de oro del CSS.

Suelo añadir esta cuarta regla, que evita que salga un recuadro alrrededor de los enlaces al pulsarlos.

(más info)

Centrar contenedores (elementos div) en CSS

Para centrar un contenedor en CSS, además de definir un ancho determinado, debemos asignar el valor auto al margen izquierdo y derecho del contenedor. Esto no da resultado en Internet Explorer, que requiere de la propiedad text-align: center. Si usamos las dos, nos aseguramos la victoria.
HTML:

CSS:

(más info)

Hacer columnas con CSS

Para crear varias columnas en un skin, debemos colocar elementos de bloque (div, ul, form…) que las representen, de forma contigua (uno al lado de otro) en nuestro HTML. A continuación, en el CSS usaremos la propiedad float, que “flota” un elemento a la izquierda o a la derecha, sacándolo del flujo de contenido.

Hay varias formas de aprovechar la propiedad float para crear columnas, algunos ejemplos:

Las flechas indican si se ha flotado a izquierda o a derecha, aúnque resulta bastante obvio.

Ejemplo, el código CSS para hacer que todos los elementos li de una lista, esté flotados a la izquierda, con un tamaño de 100×100 px:

Evitar solapamiento en la propiedad Float

Da definicion en el estándar de CSS, hace que la propiedad float saque al elemento del flujo, y provoca que el resto de elementos “lo ignoren” en muchos aspectos, como que el elemento que lo contiene no adapta su ancho para incluirlo.

Lo que quiero:

Lo que ocurre:

Esto lo podemos solventar muy fácilmente.

Si queremos que un elemento que va a continuación de un float, no se vea afectado, le podemos dar la propiedad clear: both

Pero si el problema es que tenemos elementos “flotados”, y queremos que el contenedor los envuelva, nada más fácil que aplicar al contenedor la propiedad overflow: hidden. La explicación la encontraréis aquí

Todas las propiedades a mano

Es muy importante tener siempre las propiedades a mano, y sobretodo conocer las 95 propiedades del CSS 2.1 para conocer las herramientas de que disponemos. Podéis encontrar un agradable listado, muy bien explicado (en inglés) en CulturedCode CSS 2.1 Reference (es un recurso alucinante, muy muy útil)

Usar estructuras prefabricadas

Podremos ahorrarnos tiempo, si partimos de estructuras prefabricadas en CSS y HTML.

• Layout Gala contiene muchas estructuras combinando tres elementos principales, cabecera y pié de página.
• Css Easy te ofrece las principales configuraciones para skins, listas para descargar y manipular.
• En Listmatic encontraréis muchos tipos de lista, para aplicar a menús, o a lo que queráis.
• En CSS Showcase podréis encontrar muchos ejemplos de barras de navegación.

Plantillas ya elaboradas

Otro recurso es acudir a skins completamente elaborados, y extraer lo que nos interese de ellos. Algunos enlaces:
OpenSourceWebDesigns, FreeCssTemplates, Free-css-templates, TheStyleArchive, TemplateWorld

O recurrir a sitios donde muestran plantillas únicamente para inspirarte:
Inspirational CSS, CSSBeauty, Elegant Desighns

Por último, en del.icio.us (tag: css) podéis encontrar muchos recursos interesantes de CSS, y en Webéame (categoria diseño) otros tantos.

Pues sí, esta vez los chicos de Microsoft se han tomado realmente en serio, y me arriesgaría a decir que ‘casi’ superando a los de Mozilla…, lo de seguir los estándares. Ahora, los webmasters ya no tendrán porque crear sus webs paralelas… solo para ‘intentar’ hacerlas compatibles con Internet Explorer(5, 6 y 7….).

Microsoft se está poniendo las pilas y este sí es el camino a seguir. Una verdadera pena para ellos, aunque no por ello mala repito, puesto que se salieron de la carrera de navegadores hace muchos años y no creo que se le cambie su fama de mal navegador así como así.

Recordemos que actualmente Firefox 2 todavía no pasa el test ACID 2 y Opera, desde que yo se, siempre lo ha hecho. Mozilla Firefox 3 beta2 sí lo pasa.

El futuro está cerca… el futuro de la web estándar está más cerca que nunca. Aprovecho para decir que los que usen IE… deberían probar alguna alternativa al mismo, como Mozilla Firefox. Personalmente me alegra esta noticia, me sorprende mucho también, pero no hará que cambie de parecer ante este pésimo navegador (¡¡hablo de Internet Explorer!!) aunque… supongo que para gustos hay colores, ¿no?

Descarga Firefox [es-Es]
IEBlog

#1: Float y Clear
Cuando queremos desplazar un elemento a la izquierda o a la derecha, solemos usar la propiedad float, que saca al elemento del flujo de contenido y lo desplaza a donde queramos.

El problema viene cuando este elemento tiene un elemento padre (que lo contiene) y queremos que lo envuelva.

Esto es lo que yo quiero:

Y esto lo que obtengo:

(He de aclarar que no se trata de ningún error, sinó que el estándar CSS especifica su comportamiento de esta forma)

La solución tradicional es incluir un tercer div a continuación de los dos flotantes, y aplicarle la propiedad clear:both, pero esto nos hace meter un div sin razón de ser, y nos hace la página un poco menos semántica.

La solución que he encontrado ahora, mucho mejor, es aplicar al elemento padre la propiedad overflow:hidden. De esta forma evitamos tener que meter elementos y toquetear el flujo (que a veces trae problemas) y obtenemos el resultado deseado.

[para profundizar un poco más en este tema...]

#2: El marquito de los enlaces
Otro problema que encontraba, aúnque menos grave, era el marquito que aparece en los enlaces cuando pulsas en ellos, símplemente me parece antiestético.

Clica aquí para verlo

Esta propiedad es outline, y podemos bloquearla simplemente introduciendo en nuestra hoja de estilos el siguiente código:

[para profundizar un poco más en este tema...]

Ambas soluciones magistrales las he encontrado en el blog PlanSeldon.com.

Un recurso enorme, y con diseños realmente muy buenos.

Este es el que más me ha gustado. Y a tí, cuál te gusta más? cambiarias tu diseño?

Actualmente podemos ver montones de editores relacionados con la programación web. Es un ejemplo el abandonado NVU y su sucesor Kompozer (que hace nada liberaron su última versión), Quanta Plus (que pinta muy muy bien), el mismo gedit, etc… Muchos de ellos se complementan así mismo aunque mi preferido hasta el momento es KompoZer o Quanta plus (que explicaré el porqué).

En primer lugar NVU es un proyecto de Mozilla que pretendía revolucionar a los editores HTML del momento en Linux… y bueno, casi lo consigue solo que se abandonó el proyecto. Una verdadera pena porque estaba siendo bastante completo para lo que había actualmente en Linux. Pero gracias a unos buenos programadores se creo un fork, KompoZer, y se empezó a solucionar los bugs y a añadir nuevas herramientas en este “nuevo” programa de edición. Tiene varios modos: el modo normal (ves la página como si estuvieras en el navegador), el modo source para ver el código y el modo tag, para ver las etiquetas, son los más usados. Trae buenas herramientas que más bien podrían pasar por simples gestores de ayuda. Lo que yo creo que le hace falta… es un autocompletado al escribir código.

Tenemos también a Quanta Plus un editor gráfico que usa las librerías de KDE y por lo tanto… se ve mejor en KDE (aunque os puedo asegurar que no se ve tan mal en Gnome). Este programa parecía que iba a ser el que realmente me iba a llamar la atención… y lo fue durante un tiempo porque es el único que conozco que tiene el autocompletado, aunque es una versión muy rudimentaria y no funciona en todos los lenguajes (en CSS por ejemplo no funciona y en HTML no funciona como se espera). Este editor no tiene pestaña para ver lo que llevas hecho sin necesidad de ir al navegador.

Eso por lo que respecta a editores gráficos y nos lanzamos, pues, a editores de texto el que más destaca es sin duda Gedit el -editor de texto plano- de Gnome. Pero no os engañéis, no tiene nada que ver con el Notepad de Windows. Éste es mucho más profesional, bello y funcional. Destaca por su gran capacidad para colorear código en muchos tipos de lenguajes (no solo web, sino de código fuente de C, VB, C++, Perl, Python, etc). Éste es sin duda el preferido por cualquier usuario que se atreva a escribir a pelo sin pijadas.

Por lo que respecta a otros editores no-gráficos (como Gedit) desconozco de otros que estén a su altura (dentro de lo que cabe). Así que si alguien se siente la necesidad de informarme de algún otro programa con mucho gusto lo añadiré.

Ahora lo que realmente os traigo es una sorpresa, aunque posiblemente al sector más conservador de Linux no le agrade la idea. Os traigo a mi amigo Wine, que no es un emulador, y que gracias a él vamos a poder portar ciertas aplicaciones que para los nostálgicos y gente como yo viene realmente bien. Hablo del conocido Dreamweaver, creado por Macromedia y comprado por Adobe después. Gracias a Wine tenemos casi un perfecto porte de esta aplicación nativa de Windows a Linux. Eso sí, me temo que actualmente con la versión actual de Wine (0.9.44) no funciona en su última versión. Así que deberemos usar la versión anterior, la 8 y puedo asegurar que funciona realmente bien, aunque seguro que pronto dan soporte para la que sacaron hace poco: Dreamweaver CS3.

Para instalarlo bajo Wine no necesitáis ningún añadido extra más que el instalador (ejecutable o CD) y seguir como si fuera una instalación normal en Windows (supongo que todos sabéis como funciona Wine $ wine PROGRAMA.exe). Aunque parezca que no, Wine consigue lo imposible. Dreamweaver 8 está bastante integrado en el escritorio y funciona a la perfección con las últimas versiones de Compiz Fusion, incluido exposé, el efecto gelatina y la transparencia en los menús, una gozada.

Como ya he dicho, si tenéis dudas sobre los mismos programas o queréis añadir cosas nuevas (features o lo que sea) tenéis un maravilloso sistema de comentarios para contactar y hablar con nosotros (y con quien sea) ahí debajo.