El color blanco y otros especialmente brillantes consumen hasta un 20% más de energía que el negro y las tonalidades oscuras, puesto que necesitan más luz. Este hecho ha llevado a Jon Doucette a crear Emergy-C, una gama de colores de “bajo brillo” cuyo uso minimiza el gasto eléctrico sin renunciar a la estética.
Los colores de esta paleta consumen apenas 3 ó 4 vatios más que una pantalla completamente negra, y el blanco está incluido únicamente como color de contraste para las fuentes. Los códigos hexadecimales de esta paleta son:
| #822007 |
#000000 |
#b2bbc0 |
#19472a |
#3d414c |
#FFFFFF |
| |
|
|
|
|
|
La idea no es nueva. El incremento en el consumo de energía a raíz de la expansión de la informática ha motivado un auténtico debate sobre sus usos. Uno de los datos más impactantes es el cálculo que hizo Mark Ontkush a comienzos de este año en su blog, ecoIron: si Google tuviera fondo negro, se ahorrarían unos 750 megavatios/hora, algo más de la mitad del consumo de un hogar.
¿Quiere eso decir que además de usables y accesibles, ahora tendremos que preocuparnos de hacer páginas web sostenibles? Quizá sea una exageración regir nuestros diseños por el criterio ecológico, pero el día de mañana no podremos decir que no supimos cómo ayudar al planeta con nuestro trabajo.
Por si acaso, si les interesa el green computing pueden empezar por utilizar una versión “oscura” del famoso buscador en Blackle.com.
October 26th, 2007
¿Te gusta esperar a que las páginas se carguen? A tus usuarios tampoco. Descubre cómo acelerar el tiempo de descarga de tus páginas en este artículo.
1. Da formato a tus páginas con CSS, no con tablas
El CSS se carga más rápido que las tablas porque:
1) Los navegadores tienen que leer las tablas dos veces antes de mostrarlas: una para dibujar la estructura y otra para escribir el contenido.
2) Las tablas aparecen en la pantalla de una sola vez (hasta que no se descargue y genere la tabla entera, no aparecerá ninguna de sus partes)
3) Las tablas fomentan el uso de imágenes espaciadoras para ayudar al posicionamiento
4) El CSS requiere, por lo general, menos código que las tablas.
5) El CSS puede colocarse en un documento externo, que se llama una sola vez y queda almacenado en caché. La composición con tablas se almacena en cada documento HTML y tiene que cargarse cada vez que se muestra una página.
6) Con CSS puedes controlar el orden en que los ítems se descargan en la pantalla: hacer que el contenido aparezca antes que las imágenes de descarga lenta, algo que tus usuarios sin duda apreciarán.
(…)
2. No uses imágenes para mostrar texto
Nuestro viejo amigo el CSS acude al rescate otra vez. No hace falta usar imágenes para mostrar texto si puedes hacerlo con CSS. Echa un vistazo a este código:
a:link
{
color: #ffffff;
background: #ff9900;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #99f #008 #008 #99f
}
a:hover
{
color: #ffffff;
background: #ffaa11;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #008 #99f #99f #008
}
Este código crea un botón realmente sencillo que parece presionarse al pasar el ratón por encima. Puedes verlo en acción aquí si quieres. Echa un vistazo a cómo puedes usar CSS para hacer botones de navegación.
3. Llama las imágenes decorativas a través del CSS
Es posible presentar imágenes como parte del fondo llamándolas a través de CSS. Si tienes una imagen de 200px por 100px puedes utilizar el siguiente código HTML:
<div class="pretty-image"></div>
Y este CSS:
.pretty-image
{
background: url(filename.gif);
width: 200px;
height: 100px
}
Quizá parezca innecesario, pero esta técnica realmente puede mejorar el tiempo de descarga de tus páginas. Básicamente, los navegadores descargan las imágenes de fondo después de todo lo demás. Con esta técnica, tu texto se cargará instantáneamente y tus usuarios podrán moverse por la página mientras tu fantástica imagen de 50kb se descarga.
Esta técnica impide utilizar el atributo ALT, pero si tienes mucho interés en ponerlo puedes sustituir el HTML arriba indicado por este otro:
<image src="spacer.gif" class="pretty-image" alt="description" />
Spacer.gif es una imagen transparente de 1px por 1px. Ahora tienes una imagen transparente de 50 bytes y el contenido principal cargando primero, y tu gran imagen decorativa, además del texto alternativo, cargando en segundo lugar. Perfecto.
Por favor, ten en cuenta que esta técnica sólo vale para imágenes decorativas y no imágenes que aporten información. Cualquier usuario que tenga el CSS desactivado no podrá ver tus imágenes incrustadas en el CSS (ni su texto alternativo).
4. Usa selectores contextuales
Esto es ineficaz:
<p class="text">Esto es una frase</p>
<p class="text"> Esto es otra frase </p>
<p class="text"> Esto es otra frase más</p>
<p class="text"> Y otra frase más </p>
.text
{
color: #03c;
font-size: 2em
}
En lugar de asignar un valor a cada párrafo individual, podemos anidarlos dentro de un <div> y asignar un valor a esa etiqueta.
<div class="text">
<p> Esto es una frase </p>
<p> Esto es otra frase </p>
<p> Esto es otra frase más </p>
<p> Y otra frase más</p>
</div>
.text p
{
color: #03c;
font-size:2em
}
Este segundo ejemplo CSS básicamente dice que a todos los párrafos dentro de la clase class="text" debe asignárseles un valor de color de #03c y un tamaño de fuente de 2em.
A primera vista no parece muy importante, pero si puedes aplicar esto apropiadamente a todo tu documento, fácilmente puedes ahorrar un 20% del tamaño del archivo.
Puede que hayas notado que los valores de la propiedad color son más cortos que lo normal. #03c es una versión abreviada de #0033cc (puedes aplicar este valor abreviado a cualquier valor de color como este)
5. Utiliza propiedades CSS abreviadas
Puedes utilizar las siguientes propiedades abreviadas para el comando margin:
| Usa: |
En lugar de: |
margin: 2px 1px 3px 4px
(top, right, bottom, left) |
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px;
|
margin: 5em 1em 3em
(top, right y left, bottom) |
margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em;
|
margin: 5% 1%
(top y bottom, right y left) |
margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%;
|
margin: 0
(top, bottom, right y left) |
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px;
|
Estas reglas pueden aplicarse a margin, border y padding. (…)
6. Minimizar el espacio en blanco, los saltos de línea y las etiquetas de comentario
Cada letra o espacio del HTML pesa un byte. No parece mucho, pero todo suma. Hemos comprobado que al eliminar espacios en blanco innecesarios y comentarios, puedes recortar hasta el el 10% del tamaño del archivo (si tu HTML es realmente ineficaz).
7. Usa direcciones relativas
Trata de evitar las direcciones absolutas, porque pesan más. Un ejemplo de una dirección absoluta es <a href="http://www.URL.com/filename.htm">. Sería mucho mejor <a href="filename.htm">. (…)
8. Elimina etiquetas META innecesarias y contenido META
La mayoría de las etiquetas META son innecesarias y no aportan mucho. (…) Las etiquetas más importantes para el posicionamiento en buscadores son las palabras clave y las etiquetas descriptivas, aunque debido al abuso masivo han perdido mucha importancia en los últimos tiempos. Cuando uses estas etiquetas META trata de que el contenido ocupe menos de 200 caracteres (…). Las etiquetas META demasiado largas no son buenas para los motores de búsqueda porque diluyen tus palabras clave.
9. Pon el CSS y el JavaScript en documentos externos
Para colocar el CSS en un documento externo usa:
<link type="text/css" rel="stylesheet" href="filename.css"
/>
Para colocar JavaScript en un documento externo usa:
<script language="JavaScript" src="filename.js" type="text/javascript"></script>
Cualquier archivo externo es llamado una sola vez y almacenado en el caché del ordenador del usuario. En lugar de repetir el JavaScript o el CSS una y otra vez en los archivos HTML, escríbelo una sola vez en un documento externo.
Y no lo olvides, no hay límite al número de documentos externos que puedes usar. Por ejemplo, en lugar de hacer un gran documento CSS, puedes tener uno principal y otros específicos para ciertas áreas de tu sitio.
10. Utiliza / al final al enlazar un directorio
No hagas esto:
<a href="http://www.URL.com/directoryname"></a>
En su lugar, haz esto:
<a href="http://www.URL.com/directoryname/"></a>
¿Por qué? Si no hay una barra al final de la URL, el servidor no sabe si el enlace apunta a un archivo o a un directorio. Incluyendo la barra, el servidor sabrá instantáneamente que la URL apunta a un directorio y no necesita gastar tiempo en intentar averiguarlo.
Traducción libre de “Ten ways to speed up the download time of your web pages”, artículo escrito por Trenton Moss para Webcredible.co.uk
August 31st, 2007
Si estás cansado de utilizar siempre los mismos colores, en COLOURlovers™ puedes encontrar la inspiración. Un portal de recursos para diseñadores y artistas que ofrece gamas de colores confeccionadas a partir de los objetos más diversos.
Colores claros, colores oscuros, colores con personalidad, con historia. Colores, colores y colores. Todos ellos en hexadecimal y en RGB, para que puedas incorporarlos a tus diseños. Los usuarios pueden votarlos y comentarlos, e incluso enviar sus favoritos.
Además de esta extensa colección de colores, lo más interesante de COLOURlovers™ son sus paletas, combinaciones de cinco colores inspiradas en el mundo real: obras de los maestros de la pintura, variedades de cerveza, opájaros en su hábitat natural.
Otro apartado interesante son sus análisis de tendencias portadas de revistas o en website conocidas, y las entrevistas a profesionales del sector.
Según señala su propio creador, Darius A Monsef, la idea del site es “reunir a profesionales creativos en una comunidad online en la que puedan compartir ideas sobre el color e influenciarse entre sí”
La participación de los usuarios es la clave. Ellos son quienes marcan la tendencia votando sus colores favoritos, comentando sus aplicaciones y enviando otros nuevos. Una demostración de cómo funciona el color en el mundo real.
July 25th, 2007
Kemie Guaida, editora de Diseñorama.com, expone los cinco pilares que rigen su trabajo diario como diseñadora en su portfolio personal.
Filosofía del diseño de Kemie Guaida
1. El diseño no consiste en hacer cosas bonitas
El diseño va más allá de la estética, es dar forma a un mensaje, comunicar un concepto.
2. Menos es más- Mies Van Der Rohe
La mejor manera de comunicar es a menudo la más simple.
3. La forma siempre sirve a la función- Louis Sullivan
Diseño y tecnología son medios, no fines en sí mismos, y deben adaptarse al mensaje.
4. El cliente no siempre tiene la razón
Como profesional, es tu responsabilidad aconsejar y educar, dándole al cliente lo que necesita, en lugar de lo que quiere.
5. Una buena interfaz no necesita instrucciones
Un interruptor o un grifo no necesitan un manual de instrucciones. Una interfaz debe aspirar a ser clara.
Traducción libre del original:
“Philosophy”, Kemie Guaida.
July 12th, 2007
Mi abuela tiene 74 años y maneja el Word mejor que muchos de mis amigos. Tiene una cuenta “gemai”, como ella la llama, busca información sobre las obras de teatro a las que piensa asistir con sus amigas y algunas veces habla por videoconferencia con mi madre.
Hace unas semanas, estaba enseñándole a manejar la webcam, y le dije “baja”, señalándole el scroll. “Será sube”, me contestó. “No abuela, tienes que bajar la barra”. “Pero cuando le doy el texto sube, así que eso es subir…”. ¿Cómo voy a contradecirle?
El pensamiento lineal es el peor enemigo de la usabilidad. Cosas que nos parecen lógicas e inamovibles pueden no serlo para alguien que no esté tan familiarizado con la forma de navegar más extendida. Hace unos años, la tendencia era a “domesticar” al usuario. Esto podía funcionar cuando todo estaba por hacer, y cuando el perfil de navegante era el de una persona en un continuo proceso de aprendizaje, dispuesta a amoldarse a las reglas de ese nuevo océano desconocido llamado Internet.
Sin embargo, ya no es tan común esa persona que se acerca a la Red con curiosidad. Ahora vamos a lo práctico, a lo necesario. Si a una señora de 74 años como mi abuela intentamos imponerle cierta forma de navegar, el fracaso está asegurado. En las facultades de periodismo suele decirse a los futuros redactores y locutores que cuando se dirijan a un público amplio piensen que debe entenderles cualquier persona, incluido el humilde oyente que apenas ha completado una educación primaria.
En el universo web, también debemos diseñar de una forma lo suficientemente intuitiva como para que ni siquiera nuestra abuela necesite una tarde de aprendizaje para poder navegar. Porque les aseguro que nadie se ha tenido que sentar con ella a enseñarle cómo funciona “el Gogle”.
June 14th, 2007
