Comparado con lo que viene, se dice que los diseñadores hemos estado hasta el momento “daltónicos“, trabajando sólo con una milésima de la mínima parte del espectro cromático. Por supuesto que dicho término es una broma y no es porque vayan a surgirle nuevos matices al arco iris.

Lo que va a suceder es que los valores de color van a ser definidos en nuevas formas, será agregado todo el espectro de niveles de opacidad y además serán lanzados gradientes basados en puro CSS en lugar de imágenes.

Algunos sitios que poseen la vista bien larga, como el impresionante 24 Ways to Impress Your Friends (24 maneras de impresionar a tus amigos) ya están jugando con RGBa para lograr efectos de texto y fondo —y los resultados son impresionantes.

24ways.org hace uso de la opacidad y del RGBa para crear su curioso diseño.

Pregunta rápida: ¿Qué es RGBa?

No serás ni escéptico ni ignorante por no saberlo, no obstante si no conoces qué es exactamente RGBa aquí te tenemos la respuesta.

Según los chicos de ConClase.net RGBa no es más que, cito:

Se trata del mismo modelo RGB, pero con otra propiedad: canal alfa. Este canal se usa como un índice de transparencia en un píxel. Esto nos sirve a la hora de mezclar varios colores designados para un solo píxel. Este modelo es más reciente y se suele usar para crear efectos y técnicas visuales como el suavizado de imagen (anti-aliasing), niebla, llamas, y objetos semi-transparentes: cristal, agua, vidrieras, etc.

No obstante si te interesa ampliar un poco más sobre este término, por así decirle, los chicos de DesarrolloWeb tienen el concepto mucho más ampliado.

La verdad sobre HEX.

El modelo RGB lleva bastante tiempo activo en la web. Los valores de color RGB funcionan en cada navegador que te puedas imaginar, por lo que no son cosa nueva. Es solo que muchos desarrolladores (y diseñadores) han preferido definir los colores en HEX sin tener la más mínima razón para cambiar de parecer. Créanme, ahora la tienen.

Los sistemas HEX y RGB definen los millones de colores disponibles en tu pantalla de similar manera:

Cada uno de estos valores de color producen el mismo resultado.

HEX posee un pequeño punto a favor respecto RGB: es compacto —mucho más si escribes de manera taquigráfica. Esto es altamente significativo si eres un desarrollador que emplea de manera estricta cada código en busca de la optimización divina. Por lo único que es bueno escribir taquigráficamente con HEX es debido a sus colores seguros. Si hasta el momento has sido de los que se limita a usar colores seguros únicamente, es tiempo de que sigas adelante con lo nuevo.

Nuevo RGB totalmente mejorado: ¡Ahora con Alfa!

Aquí tienes una razón para comenzar a usar valores RGB: éstos pueden incluir un valor alfa para crear opacidad. Agregar un valor alfa dentro de un color RGB es así de sencillo:

background-color: rgba(100%, 0, 0, 0.5)

o:

background-color: rgba(255, 0, 0, 0.5)

Ambos valores producen color rojo pero a un 50% de opacidad. Cuando uses RGBa, asegúrate de especificar rgba() como el valor (no la a), y a continuación agrega los valores alfa como un cuarto valor separado por comas estableciendo un rango desde 0 (transparente) hasta 1.0 (opaco). El valor de 0 es equivalente al valor de color transparente.

Valores de color, desde opaco hasta transparente.

¿Por que HEX no puede soportar similar configuración? Bueno, realmente si puede, como podremos ver más adelante, pero sucede que, aparentemente, el W3C no tiene planes de agregarla dentro de sus especificaciones de color en la web.

En tanto los navegadores soporten CSS3, podrás hacer uso de un valor RGBa para obtener transparencia donde quiera que exista un valor de color: en textos, fondos, bordes, sombreado de texto, etc. —donde sea. La única pregunta que queda en el aire es ¿que hay sobre los navegadores que no soportan RGBa? He oído por ahí que existe un navegador que algunas personas aún usan (digamos de 70% a 75% del público web), y no soporta CSS3, incluyendo RGBa. No es casualidad que ¡ese navegador sea Internet Explorer!

¿Qué hacer con IE?

Si un navegador se encuentra un valor que no entiende, se supone que lo ignore y procese cualquier otro valor que esté configurado para dicha propiedad. El siguiente código CSS debería cubrir IE:

color: rgb(255, 0 , 0);
color: rgba(255, 0, 0, .5);

Ajustar los colores de manera tal que más menos luzcan como transparentes, es posible. Por ejemplo, si sabes que un bloque de texto aparecerá en un fondo blanco, puedes hacer uso del valor rgb(255, 127, 127) para que se vea un 50% transparente. En cambio si el fondo cambia, la diferencia será evidente:

El valor rosado simula lo que luce un rojo con transparencia al 50%. Pero en la medida en que sitúes el texto en un fondo oscuro, la ilusión queda al descubierto.

No es una solución perfecta porque realmente no es transparente. Eso no se puede arreglar. En cambio puedo compartir unos trucos sobre cómo poner colores transparentes en el fondo de cualquier elemento en cualquier navegador moderno.

I: Colores transparentes en tus fondos.

Un pequeño capricho de Internet Explorer es que incluye muchos “filters”. Dichos filtros no son parte del standard que estima el lenguaje CSS… y de hecho nunca lo será, en cambio podemos explotarlos de interesantes maneras para obtener resultados similares a algunas de las características de CSS3.

Con uno de estos filtros de IE podemos agregar un gradiente al fondo de un elemento e incluir colores transparentes haciendo uso de notación hexadecimal. El primer valor dentro de la cadena de valores de HEX es para la opacidad del color, y hace un rango desde 00 (opaco) hasta ff (transparente). Esto nos aporta un interesante hueco, ya que configurando los valores inicial y final del gradiente para que sean el mismo color, podremos establecer de manera efectiva un color de fondo transparente:

/* For CSS3 */
 background-color: rgba(255,0,0,.5);
/* For lt IE8 */
 filter: progid:DXImageTransform.Microsoft.gradient
(gradientype=0,startColorstr='#88ff0000', endColorstr='#88ff0000');
/* For gte IE8 */
 -ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientype=0,startColorstr='#88ff0000', endColorstr='#88ff0000');

Tenemos que usar el filtro dos veces: una para versiones antiguas de IE (lt se usa por “menor que”) y otra para IE8 y superior (gte se usa por “mayor que o igual que”), el cual usa el nuevo prefijo -ms para identificarse a sí mismo como extensiones de Microsoft. Esto agrega un 50% de fondo de transparencia a ambos estándares compatibles de dichos navegadores.

II: Gradientes en tus fondos.

Lo que estamos buscando es una solución cross-browser que nos permita agregar gradientes en el fondo usando nada más que CSS: nada de imágenes, gráficos, PNGs transparentes, sobretodo no más molestia con Photoshop cada vez que a un cliente se le ocurre cambiar una sombra morada a un poco más azul. Puedes hacer esto con Firefox 3.6, Safari 4 y Chrome 5.

Eso si, no creas que la aplicación de gradientes es cosa fácil, existe una pequeña complicación que, lo creas o no, no proviene de Internet Explorer. El W3C recientemente ha comenzado a desarrollar una sintaxis de gradiente para CSS, y luce muy lejos de estar completada, sin embargo Mozilla (Firefox) y Webkit (Safari) han agregado sus propias especificaciones (conflictivas). El intento de estas “extensiones” es para llevar la industria a un siguiente nivel adicionando necesarias y deseables características, mucho más allá de las que posee actualmente el W3C.

No todo está perdido. Cada versión tiene su propio prefijo de extensión, así que si agregamos todas las sintaxis de gradientes a nuestro código, entonces todos los navegadores jugarán limpio:

/* For WebKit */
 background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,0,0,1)), to(rgba(0,0,255,.25)));
/* For Mozilla */
 background: -moz-linear-gradient(top, rgba(255,0,0,1), rgba(0,0,255,.25));
/* For lt IE8 */
 filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');
/* For gt IE8 */
 -moz-filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');

Para poder cambiar la dirección del gradiente, Webkit define las esquinas de comienzo y de finalizado, Mozilla define el lado de la esquina dónde el gradiente comienza, y IE simplemente define 0 (vertical) o 1 (horizontal). Así que, para girar nuestro gradiente a 90°, codificamos lo siguiente:

/* For WebKit */
 background: -webkit-gradient(linear, left top, right top, from(rgba(255,0,0,1)), to(rgba(0,255,0,.25)));
/* For Mozilla */
 background: -moz-linear-gradient(left, rgba(255,0,0,1), rgba(0,255,0,.25));
/* For lt IE8 */
 filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');
/* For gt IE8 */
 -ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');

Webkit y Mozilla permiten mucha variedad en sus gradientes, incluyendo gradiente radial y de múltiples colores. Las sintaxis pueden resultar complejas, pero dejémoslo de manera sencilla momentáneamente ya que IE solo soporta gradientes verticales y horizontales.

Agrégale color a tu vida.

Abrir nuestras mentes a nosotros mismos no es más que la solución eventual a cualquier problema u obstáculo que te encuentres en el tratado de color en el diseño web. Los inventos poco ortodoxos a los que acudimos hoy día para poder obtener el tan ansiado color transparente, desaparecerán. Comenzaremos a presenciar muchos más diseños, esta esfera irá creciendo hasta volverse en una tendencia y el uso de RGBa será de uso constante.

Conoce un poco más.

• Módulo de color de CSS3
• Gradientes en Firefox
• Gradientes en Webkit
• Gradientes en Internet Explorer

Vía | WebDesigner Depot

Posts relacionados:

1. 50 técnicas avanzadas CSS para una codificación efectiva.
2. 31 diseños pie de páginas basados en CSS.
3. Incluso los vínculos pueden verse bien.

En este post te mostraremos varios ejemplos de lo que se puede hacer con esta popular herramienta. Si te encuentras algo que te guste, dedícale toda tu concentración y solo nos resta desear que mejores tus habilidades.

Manipulación de fuego.

Creación de destellos alrededor de un cuerpo.

Composición surreal. Ángel caído.

Manipulación, surrealismo y Photoshop.

Creación de una escultura griega.

Manipulación pro naturaleza.

Escena desértica surrealista.

Saltadora abstracta.

Bailarina pintada.

Crea una escena fantástica de horror.

Robótica sexy.

Modelo melancólica y surreal.

Explora un poco más por ti mismo:

• 30+ ejemplos de los más buscados de foto manipulación con Photoshop.
• 32 excelentes ejemplos de foto manipulación con Photoshop.
• 27 brillantes ejemplos de foto manipulación en Photoshop.

Posts relacionados:

1. Pequeña colección de tutoriales sobre cómo crear impresionantes efectos de texto en Photoshop.
2. 30 días de Mootools 1.2 – DÍA 5: Manipulación de eventos.
3. Retrospectiva y evolución de Adobe Photoshop.

Uno de sus mayores usos está en la creación de impresionantes efectos de texto que se explotan mayoritariamente en banners y logos. Un atractivo efecto de texto en un banner o en un logo puede llamarle la atención a una gran cantidad de visitantes, por lo que es importantísimo tener el más original de los efectos de texto posible, justo con la ayuda de Photoshop.

Teniendo esto en cuenta, hemos ensamblado este post con varios ejemplos que hemos encontrados en la web, todos puestos a tus pies para que degustes el buen trabajo de otros y quién sabe si Webizzima haga que eches a volar tu imaginación y nos aportes tu originalidad.

La decisión es tuya.

Crear un texto metálico con un fondo de concreto.

Creación de un increíble efecto de texto en 3D.

Ardiente como el infierno, en Photoshop.

Texto en 3D con fuego.

Destello colorido en Photoshop.

Cómo crear un efecto de texto soleado y en 3D.

Creación de un espacio abierto de tipografías.

Curioso efecto de texto en 3D.

Efecto de texto 3D con mecanismos de presión.

Texto con efecto ornamental.

Explora un poco más por ti mismo:

• Los mejores 80 efectos de texto de Photoshop en la web.
• 30 hermosos efectos de texto en Photoshop.
• 50 impresionantes efectos de texto en Photoshop.

Posts relacionados:

1. Manipulación de imágenes con Photoshop sin límites.
2. 70 técnicas Javascript profesionales + tutoriales avanzados.
3. Como crear un alto de caja minimo y flexible a prueba de browsers?

NOTA: El filtrado de entradas en Javascript es para asegurar que tu código corra perfecto y suave como el aire, NO SE DEBE usar como un sustituto para el filtrado de entradas del lado del servidor el cual es requerido para proteger tus aplicaciones contra ataques de inyección.

Numbers

En el 4to día terminamos con un ejemplo que tomó valores RGB desde cajas de texto y los usó para cambiar el fondo de la p´gina, hoy vamos a tomar parte del código de ese ejemplo y lo expandiremos.

rgbToHex()

T&ecute;cnicamente hablando, la funció rgbToHex() pertenece a la colleción de Array. Ya que es una funció array construida para tratar con números, hoy vamos a ir tras ella. Funcionalmente, rgbToHex() es muy sencilla de usar:

function changeColor(red_value, green_value, blue_value){
	var color = [red_value, green_value, blue_value].rgbToHex();
	alert('Converts to : ' + color);
}

changeColor('28', '17', '47')

toInt()

Ahora bien, necesitamos una manera de asegurarnos que la función rgbToHex() solamente está recibiendo números enviados a ésta – es ahí dónde entra en acción la función toInt(). Puedes llamarla dentro de una variable y hará lo mejor de sí para obtener un entero desde el contenido de dicha variable.

var toIntDemo = function(make_me_a_number){
	var number = make_me_a_number.toInt();
	alert ('Best Attempt : ' + number);
}

Como puedes ver, toInt() no puede manipular cada situación concebible,
en cambio gracias a otra pieza de la grandesa de Mootools llamada $type(), podemos lidiar con dicho problema.

$type()

$type() es otra vía que pose Mootools para enfrentar diferentes problemáticas. Examina cualquier variable que le pases y retorna una string diciéndote qué tipo de variable es:

var checkType(variable_to_check){
	var variable_type = $type(variable_to_check);
	alert("Variable is a : " + variable_type);
}

Existen muchas más cosas que $type() detecta – puedes obtener una lista exhaustiva en la documentación oficial de Core.$type(). No obstante, de momento lo que nos interesa es la detección de enteros. Si tomamos $type() y la lanzamos dentro de la función toIntDemo(), podremos lidiar fácilmente con entradas que toInt() no puede manipular:

var toIntDemo = function(make_me_a_number){
	//Trata de hacer el number
	var number = make_me_a_number.toInt();

	//Si no funciona, pon el number en 0
	if ($type(number) != 'number'){number = 0;}
	alert('Best Attempt : ' + number);
}

Cuando lo estiramos todo dentro de changeColor(), obtenemos una solución que trabaja casi perfecto:

var changeColor_2 = function(red_value, green_value, blue_value){
	//Asegúrate que todo sea un entero
	red_value = red_value.toInt();
	green_value = green_value.toInt();
	blue_value = blue_value.toInt();

	//Establece los valores por defecto en todo lo que no sea un number
	if ($type(red_value)   != 'number'){red_value = 0;}
	if ($type(green_value) != 'number'){green_value = 0;}
	if ($type(blue_value)  != 'number'){blue_value = 0;}

	//Calcula el valor hexadecimal
	var color = [red_value, green_value, blue_value].rgbToHex();
	alert('Converts to : ' + color);
}

La última función es pasando los números rgbToHex() fuera del rango RGB 0 – 255, el cual convierte debidamente el valor en su equivalente hexadecimal. Desafortunadamente esto significa que si recibimos un número fuera de dicho rango como una entrada, no podremos obtener un valor hexadecimal de color. Afortunadamente existe una pieza más dentro del kit de Mootools de la que podemos hacer uso para encargarnos de este problema.

limit()

La función limit() de Mootools es muy versátil. Puedes hacer un llamado dentro en un número con los límites inferior y superior con los que quieras limitar dicho número como argumentos, y si ese número está afuera del rango que definiste, éste redondeará apropiadamente el valor. Es importante recordar que limit REQUIERE un entero para que funcione, así que es una buena idea hacer uso de toInt() en algo que estés asumiendo sea un número antes de usar limit.

var limitDemo = function(number_to_limit){
	//Obtiene un entero
	number_to_limit = number_to_limit.toInt();

	//Obtiene el valor limitado
	var limited_number = number_to_limit.limit(0, 255);
	alert("Number Limited To : " + limited_number);
}

Profundiza aún más

var changeColor = function(red_value, green_value, blue_value){
	//Asegúrate que todo sea un entero
	red_value   = red_value.toInt();
	green_value = green_value.toInt();
	blue_value  = blue_value.toInt();

	//Establece los valores por defecto en todo lo que no sea un number
	if ($type(red_value)   != 'number'){red_value = 0;}
	if ($type(green_value) != 'number'){green_value = 0;}
	if ($type(blue_value)  != 'number'){blue_value = 0;}

	//Limita todo a la escala RGB (0 - 255)
	red_value   = red_value.limit(0, 255);
	green_value = green_value.limit(0, 255);
	blue_value  = blue_value.limit(0, 255);

	//Calcula el valor hexadecimal
	var color = [red_value, green_value, blue_value].rgbToHex();
	alert('Converts to : ' + color);
}

Para aprender más…

Descarga el zip de la clase de hoy

Vía | ConsiderOpen

Posts relacionados:

1. 30 días de Mootools 1.2 – DÍA 4: Funciones.
2. 30 días de Mootools 1.2 – DÍA 5: Manipulación de eventos.
3. 30 días de Mootools 1.2 – DÍA 3: Introducción al uso de arrays.

Últimamente he tenido un ambiente de trabajo bastante cargado y por más que me trazo metas y/o vías a seguir para organizarme y avanzar lenta, pero eficazmente, me ha resultado por instantes un tanto imposible. Por otra parte tengo un amigo que si en el día no dice “no tengo tiempo” unas 400 veces, simplemente no suena a sí mismo.

Recientemente he dejado todo a un lado y me propuse documentarme sobre cierta técnica, sentenciada por todos como eficaz. La Técnica Pomodoro™ es una muy interesante opción que deberíamos tomarnos muy en serio cuando buscamos mejorar cuantiosamente no solo la calidad de nuestro trabajo, sino además el bendito tiempo en que lo llevamos a cabo.

Muchas veces nos enfrentamos a sesiones de árduo trabajo y llegamos a ese momento en que nos ponemos en presencia de una auténtica contienda de neuronas en la cual, es recomendable tomarse de 15 a 20 minutos de descanso para evitar un dolor de cabeza, descanso que lógicamente no nos evita el nivel de trabajo. Es ahí donde quisiéramos explotar, tantas cosas pendientes para un solo ser humano y el inevitable paso del tiempo límite devorando cada minuto: es ahí donde la Técnica Pomodoro™ puede ser aplicada para ponerte de nuevo en la pista con tu concentración de vuelta.

La he visto citada como “la técnica definitiva para un desorden infinito”.

El nombre viene de esos contadores plásticos de tiempo para las cocinas en forma de tomate, o pomodoro (si eres italiano). Entonces ¿qué opinas sobre comenzar a usar esta curiosa técnica? Bueno, primeramente existe un sitio al que puedes dirigirte, incluso bajar un PDF gratis que detalla esta técnica.

Para comenzar te describiré mi forma de utilizar la Técnica Pomodoro™:

¡Páralo todo!

Exacto, cierra tu email, Twitter, Facebook, apaga tu móvil, etc. aléjate de todo lo que pueda distraerte de tu Pomodoro. Es recomendable que te sitúes en un lugar lejos de cualquier persona que pueda desconcentrarte de algún modo, normalmente yo me encierro en la oficina.

¡Estima tu trabajo partiéndolo en tareas!

Cuando trabajas en un proyecto siempre tendrás una acumulación de aspectos a seguir, materiales no procesados, etc. con los que obligatoriamente tienes que lidear, una lista de todas las cosas que se necesitan concluidas para completar dicho proyecto. Lo primero que tienes que hacer es partir cada tarea en un orden a seguir una a una, NUNCA hagas varias a la vez, ello sería contraproducente al 100%.

Comienza tu Pomodoro.

Consíguete un contador de tiempo y prográmalo para 25 minutos. Sería mucho mejor si no hiciera un sonido “tic tac” ya que esto suele ser una gran distracción. Comienza a caminar el tiempo, concéntrate en tu primera tarea sin interrupción alguna. Si tienes alguna interrupción hay un par de formas mediante las cuales puedes hacerle frente al asunto, mira la sección de interrupciones más adelante.

Finaliza tu Pomodoro.

Cuando el contador termine la cuenta de 25 minutos DETENTE inmediatamente. No finalices tu tarea o digas “dos minutos más…” DETENTE AHORA.

Aquí es donde te tomarás un descanso de 5 minutos, aléjate de la computadora, ve y toma café, té o agua, lo que sea menos pensar en tu actual tarea.

Ahora bien, si terminas tu tarea en el tiempo establecido puedes pasar para el siguiente Pomodoro, simplemente, dentro de la lista de cosas por hacer, haz una marca al lado de la tarea que indique que has gastado 1 Pomodoro en ella. Si terminas la tarea dentro de un Pomodoro mi consejo es que uses el tiempo restante sabiamente, tal vez quieras revizar lo que has hecho, chequear algún bug u ordenar aún más el formato de tu código. Solo si la tarea es completada dentro de los 10 primeros minutos de un Pomodoro podrás seleccionar la siguiente dentro de tu lista.

Bien, comienzas de nuevo. Luego del cuarto Pomodoro es recomendable tomarse un descanso más prolongado, digamos 30 minutos o el tiempo que sea que necesites, siempre más de 5 minutos y aplicando la misma regla – ¡no pensar en la tarea que estás desarrollando!

Interrupciones.

La Ténica Pomodoro™ clasifica las interrupciones en dos niveles; interno y externo. Interno es cuando te interrumpes tú mismo, éste no es preocupante la mayor parte de las veces, basta con que te propongas no extenderlo. Externo es cuando otra persona nos interrumpe sin que lo podamos evitar. Si no hay más opción que abandonar el Pomodoro entonces evacúalo completamente. Ten en cuenta que un Pomodoro no es reanudable, por tanto no se deja a medias.

Haz una nota de la interrupción debajo de un encabezamiento que diga algo así como “Interrupciones”, “Problemas inevitables”, etc. y allí refleja dónde, cuándo y cuáles fueron tus interrupciones, de manera tal que con el tiempo, de poderse, evites estos problemas y por ende perfecciones tu Pomodoro.

Esta es una pequeña guía sobre cómo he comenzado a implementar la técnica en mis proyectos personales para mejorar mi concentración y calidad. Te sugeriría que te leas toda la técnica y veas cómo puedes adaptarla a tus necesidades. Te he hablado de un tiempo de 25 minutos por cada Pomodoro, pero tú puedes elegir 45 si así te apetece.

¿Cómo te las arreglas para para lograr tu concentración y complementar las cosas? Me interesaría mucho saber cómo otras personas le hacen un seguimiento a su problema, especialmente en trabajos remotos y proyectos individuales.

Lo que opinan los grandes.

Hace algunos meses, el desarrollador de aplicaciones Peter Bell posteó algo interesante en su Twitter:

“¿Siempre desarrollas en solitario? ¿Quieres apañártelas sobre cómo adaptarte a codificar mejor? Únete a nuestro nuevo grupo“.

Dentro del grupo, uno de los posts acerca de la Técnica de Pomodoro™ fue del venerable Mark Drew:

“A tan solo un día de usar la técnica de 25 minutos y repentinamente he adquirido mucha más concentración”.

Herramientas y recursos.

Es totalmente válido aclarar que no solo se logra esta técnica con un contador de tiempo de cocina físicamente delante de uno, puedes trabajar con el contador de tiempo de tu móvil, alarma de tu reloj, y miles de variantes como las que encuentras en internet, incluso puedes construir tu propio contador de tiempo y ordenador de tareas. De momento te muestro algunas que encontré:

• Pomodairo: Una aplicación AIR desarrollada con Flex. Una de las mejores que he visto hasta el momento. Además de programar el tiempo puedes gestionar tareas.
  



• Un simple contador de tiempo hecho en Adobe AIR.
  



• Pomodoro 0.28: Una aplicación de escritorio para controlar el tiempo en tu Mac OSX. Es una vía simple y efectiva para gestionar tu tiempo, y está basada en la Técnica Pomodoro™.

  

Conclusiones.

Esta técnica, sin lugar a dudas te pondrá en un nivel de organización y concentración que nunca has experimentado, lograrás un flujo de trabajo mucho mejor y cuando hagas de esta técnica una costumbre, entonces habrás descubierto una eficacia que se quedará contigo de manera constante.

Suerte!

Posts relacionados:

1. Análisis a 12 aplicaciones de escritorio para blogs.
2. 50 técnicas avanzadas CSS para una codificación efectiva.
3. 85 soluciones AJAX para desarrollo profesional.

Concentremonos en la columna 2, el alto de la misma sera igual al contenido dentro de ella, o sea:

Ahora, si no tuviera contenido, entonces, la misma se reduciría completamente:

Es aqui donde min-height nos ayudaría a definir un alto mínimo, de modo que si el contenido en la columna 2 es más pequeño que las columnas 1 y 3, aun asi, tendrían el mismo alto, ya que pondriamos el valor min-height de la columna 2 al mismo alto que las otras. Quiero hacer un parentesis aqui, para decir, que cualquier columna no crecerá en dependencia de si las demás crecen o no, eso es otra historia; lo que queremos lograr aqui, es que al menos la columna mas pequeña se empareje con las mas grandes, en caso de que lo sean. Por lo que con esto bastaría:

#column1
{
width: 200px;
height: 300px;
float: left;
}

#column2
{
width: 500px;
min-height: 300px;
float: left;
margin-left: 8px;
}

#column3
{
width: 200px;
height: 300px;
float: left;
margin-left: 8px;
}

Notese el valor min-height de 300 pixeles asignado a la columna 2. Veriamos esto:

Ahora, que pasaría si el contenido creciera demasiado, y llegara al tope de la columna 2 ? Fácil, la columna 2 crecerá mientras, que el contenido siga aumentando:

Y que pasaría si el contenido se reduce menos, de nuestro min-height ? Entonces, la columna 2 se reducirá tambien pero solo hasta que alcanzé el valor que hemos fijado con la propiedad min-height de nuevo.

Ahora viene la pregunta del siglo: funciona esto en Internet Explorer ? La respuesta es NO, min-height no funciona en IE 7 y posterior. Pero existe otra propiedad que funciona por error exactamente como min-height, adivinan ?

Si, es  height, aunque tiene una limitación. Si agregamos a nuestro código: min-height y height.

#column1
{
width: 200px;
height: 300px;
float: left;
}

#column2
{
width: 500px;
min-height: 300px;
height: 300px;
float: left;
margin-left: 8px;
}

#column3
{
width: 200px;
height: 300px;
float: left;
margin-left: 8px;
}

Esto funcionaria solo para Internet Explorer 7 y posterior, el cual hará que crezca la columna 2 si el contenido aumenta, y hace la función de min-height pero en el resto de los navegadores estandares no aumentará la columna 2. Entonces tenemos una problematica, si declaras min-height no funcionaría en Internet Explorer 7 y posterior, y si ponemos min-height junto con height, entonces, funcionaría pero solo para Internet Explorer 7 y posterior.

Pero…………..hay una solución que vengo usando hace mucho tiempo y que quizás muchos conocen:

#column1
{
width: 200px;
height: 300px;
float: left;
}

#column2
{
width: 500px;
min-height: 300px;
height: auto !important;
height: 300px;
float: left;
margin-left: 8px;
}

#column3
{
width: 200px;
height: 300px;
float: left;
margin-left: 8px;
}

Noten el height: auto !important; en la declaración de la columna 2. Esto hará que todos los navegadores se lleven bien, y funcionen como esperamos.

min-height: 300px;
height: auto !important;
height: 300px;

Pero notese que es muy importante ese mismo orden. Por que? Vamos a explicarlo min-height: 300px; en la primera linea le dice a los navegadores estandares que ese es su valor mínimo y que pueden crecer todo lo que gusten pasado ese valor, pero Internet Explorer lo ignorará. Luego en la tercera linea tenemos height: 300px lo cual, le dira a Internet Explorer, tu puedes crecer mas de 300px pero ese es tu alto mínimo, pero el resto de los navegadores estandares, no crecerán, ya que la propiedad height no se los permite, y necesitan la propiedad auto para poder hacerlo. Por eso lo ponemos en la segunda linea, por que al asignarle la propiedad !important, los navegadores estandares no leerán la tercera linea donde el height esta fijo, y Internet explorer leerá la segunda linea pero la tercera la sobreescribirá por que no entiende la declaración !important como el resto de los navegadores.

NOTA: Puede usarse con cualquier etiqueta HTML, no es solo para columnas.

Espero que les sea de utilidad. A mi me ha servido mucho, y creo, que lo uso para todo. Pueden enviarnos cualquier pregunta y con gusto las aclararemos.

Posts relacionados:

1. Como remover el doble margen que aparece en Internet Explorer 6?
2. Pequeña colección de tutoriales sobre cómo crear impresionantes efectos de texto en Photoshop.
3. Incluso los vínculos pueden verse bien.

Un buen diseño es un aspecto que todo el mundo debería tener como meta, sobretodo ciertos jefes de proyecto congelados en cierta época, y que muchas veces frenan vorazmente la creatividad de los diseñadores partiendo de conceptos arcaicos. La originalidad no se atrapa en un solo concepto, perfectamente viene de la mano ya sea de lo antiguo como de lo contemporáneo, para ello está el libre uso de tendencias que siempre se sepan maniobrar, le brindan a un buen sitio web seriedad y profesionalidad.

La siguiente es una muestra exclusiva de sitios web cubanos, en ella se exponen varias tendencias que vale la pena observar.

Gobierno e instituciones:

Sitio del Gobierno de la República de Cuba.

Asamblea Nacional del Poder Popular.

Ministerio de Relaciones Exteriores.

Ministerio de Salud Pública.

Ministerio de Educación.

Ministerio de Educación Superior.

Ministerio para la Inversión Extranjera y Cooperación Económica.

Ministerio de Comercio Exterior.

Ministerio de Ciencia, Tecnología y Medio Ambiente.

Ministerio de Cultura.

Instituto Nacional de Deporte, Educación Física y Recreación.

Portales temáticos:

Cuba vs bloqueo.

Antiterroristas.

Cubadebate.

Cubarte.

Infomed.

Cubacine.

La jiribilla.

Bancos:

Banco Central de Cuba.

Banco Metropolitano.

Banco de Inversiones S.A.

Medios de prensa:

Granma.

Granma Internacional.

Juventud Rebelde.

Trabajadores.

Prensa Latina.

Agencia de Información Nacional

Radio Habana-Cuba

Radio Rebelde

Radio Reloj

Cubavisión Internacional

El economista.

Centros estudiantiles:

Universidad de la Habana.

Instituto Superior Politénico José Antonio Echeverría.

Universidad de Ciencias Informáticas.

Universidad de Pinar del Río.

Universidad de Matanzas.

Universidad de Cienfuegos.

Universidad Central de las Villas.

Centro Universitario de Sancti Spíritus.

Universidad de Ciego de Ávila.

Universidad de Camagüey.

Universidad de Granma.

Universidad de Holguín.

Universidad de Oriente.

Instituto Superior de Diseño Industrial.

Hoteles:

Tryp Habana Libre.

Inglaterra.

Hostal La Habanera.

Hotel Nacional de Cuba.

Hotel Parque Central.

Hotel Acuazul.

Hotel Saratoga.

Hotel Sevilla.

Hotel Habana Riviera.

Conclusiones:

En mi modesta opinión pienso que Cuba tiene aún mucho terreno que explorar y explotar. Bajo la experiencia que he vivido en más de una ocasión, los que rigen un proyecto web -también multimedia- deberían darle paso a la esfervescencia que de manera indiscutible emana la nueva generación. Noten que un buen diseño siempre es un buen objetivo, pues de él depende la atención que despierte en un visitante.

Pienso que -quiénes no lo hacen- se deberían tomar más en serio algo tan grande e importante para el mundo como es el universo web. Es increíble ver cómo instituciones importantísimas del país o bien no poseen sitios web, o bien lo tienen pero por causas injustificables no se encuentra online. Otro aspecto a destacar es la pobreza en cuanto a diseño, pienso que es una prueba irrefutable de cuántas veces somos nosotros mismos los que no avanzamos, lo digo así porque siempre me viene a la cabeza la misma pregunta retórica: ¿Acaso no tenemos potencial?

Posts relacionados:

1. Sitios de la Semana: 30 de Junio de 2009.
2. Tendencia web: Uso de paisajes vectoriales.
3. 20 ejemplos inspirantes del uso de la sencillez en el diseño web.

Empezaré con un tipico ejemplo. Un diseño de 3 columnas, un header y un footer. Algo asi:

Cuando creamos algo como esto, el mayor reto lo representa el mostar el contenido en columnas una al lado de la otra; existen varios métodos para esto, siendo el más usando el conocido float.  Digamos que nuestras columnas con id column1, column2, y column3 tendrian declaradas sus respectivas referencias en css asi:

#column1
{
width: 200px;
float: left;
}

#column2
{
width: 500px;
float: left;
margin-left: 8px;
}

#column3
{
width: 200px;
float: left;
margin-left: 8px;
}

Con esto, nuestras columnas estarán flotadas a la izquierda, una despues de la otra, y separadas por un margen izquierdo aplicado a la segunda y tercera columna.

Todo parece perfecto, verdad? Pues no. En nuestro querido Internet Explorer 6, esto provoca un doble margen, o sea, que nuestro margen izquierdo sera 16px por cada uno, lo cual, empujará la tercera columna hacia la proxima linea debajo.

Para que se entienda mejor, he puesto los margenes en rojo, y nuestra tercera columna es la que tiene el margen rojo de la derecha aplicado. Si lo medimos, verán que no cabe.

La solución? Tan rapido?, no quieren romperse la cabeza un poco más, y tirar el monitor contra la pared? No? entonces la solución es tan simple que nos daria risa.

#column1
{
width: 200px;
float: left;
}

#column2
{
width: 500px;
float: left;
margin-left: 8px;
display: inline;
}

#column3
{
width: 200px;
float: left;
margin-left: 8px;
display: inline;
}

Agregandole display: inline; a las columnas con el margen aplicado, logrará que Internet Explorer 6 entienda que son solo 8px, y no 16px. Notese que este bug solo sucederá si, se flota una columna en la misma dirección que el margen aplicado. O sea, float: left, margin-left.

Espero que les sea de utilidad. Es bien básico, pero muchas personas se rompen la cabeza con cositas asi pequeñas. Para eso son estos minitips.

Saludos

Posts relacionados:

1. Como crear un alto de caja minimo y flexible a prueba de browsers?

Cuando salió al aire la primera versión de Photoshop, muchos usuarios que hoy lo usan a diario eran bebés, otros nacieron ese año, e incluso, otros no habían nacido aún.

En este post, vamos a intentar virar el tiempo lo más atrás que se pueda con la mayor cantidad de datos posibles para ver cómo lució la primera versión y los cambios hasta la fecha, veremos una detallada evolución hasta el presente.

El icono.

– Adobe Photoshop 0.63 (1988)

– Adobe Photoshop 0.87 (1989)

– Adobe Photoshop 1.0 (1990)

– Adobe Photoshop 2.0 (1993)

– Adobe Photoshop 2.5 (1993)

– Adobe Photoshop 3.0 (1995)

– Adobe Photoshop 4.0 (1996)

– Adobe Photoshop 5.0 (1998)

– Adobe Photoshop 5.5 (1998)

– Adobe Photoshop 6.0 (2000)

– Adobe Photoshop 7.0 (2002)

– Adobe Photoshop Creative Suite (2003)

– Adobe Photoshop Creative Suite 2 (2005)

– Adobe Photoshop Creative Suite 3 (2007)

– Adobe Photoshop Creative Suite 4 (2009)

Pantalla de bienvenida / Acerca de…

Adobe Photoshop 0.07 (1988)

Adobe Photoshop 0.63 (1988)

Adobe Photoshop 0.87 (1989)

Adobe Photoshop 1.0 (1990)

Adobe Photoshop 2.0 (1993)

Adobe Photoshop 2.5 (1993)

Adobe Photoshop 3.0 (1995)

Adobe Photoshop 4.0 (1996)

Adobe Photoshop 5.0 (1998)

Adobe Photoshop 5.5 (1998)

Adobe Photoshop 6.0 (2000)

Adobe Photoshop 7.0 (2002)

Adobe Photoshop Creative Suite (2003)

Adobe Photoshop Creative Suite 2 (2005)

Adobe Photoshop Creative Suite 3 (2007)

Adobe Photoshop Creative Suite 4 (2009)

La barra de herramientas.

Adobe Photoshop 0.63 (1988)

Adobe Photoshop 0.87 (1989)

Adobe Photoshop 1.0 (1990)

Adobe Photoshop 2.0 (1993)

Adobe Photoshop 2.5 (1993)

Adobe Photoshop 3.0 (1995)

Adobe Photoshop 4.0 (1998)

Adobe Photoshop 5.0 (1998)

Adobe Photoshop 5.5 (1998)

Adobe Photoshop 6.0 (2000)

Adobe Photoshop 7.0 (2002)

Adobe Photoshop Creative Suite (2003)

Adobe Photoshop Creative Suite 2 (2005)

Adobe Photoshop Creative Suite 3 (2007)

Adobe Photoshop Creative Suite 4 (2009)

El espacio de trabajo.

Adobe Photoshop 0.63 (1988)

Adobe Photoshop 1.0 (1990)

Adobe Photoshop 2.5 (1993)

Adobe Photoshop 3.0 (1995)

Adobe Photoshop 4.0 (1996)

Adobe Photoshop 5.0 (1998)

Adobe Photoshop 5.5 (1998)

Adobe Photoshop 6.0 (2000)

Adobe Photoshop 7.0 (2002)

Adobe Photoshop Creative Suite (2003)

Adobe Photoshop Creative Suite 2 (2005)

Adobe Photoshop Creative Suite 3 (2007)

Adobe Photoshop Creative Suite 4 (2009)

Nombres de código

• Versión 2.0 (Macintosh) – Fast Eddy.
• Versión 2.5 (Macintosh) – Merlin.
• Versión 2.5 (Windows) – Brimstone.
• Versión 3.0 (Macintosh) – Tiger Mountain.
• Versión 4.0 (Macintosh) (Windows) – Big Electric Cat.
• Versión 5.0 (Macintosh) (Windows) – Strange Cargo.
• Versión 6.0 (Windows) – Venus in Furs.
• Versión  7.0 (Macintosh) (Windows) – Liquid Sky.
• Versión 8.0 (CS) (Macintosh) (Windows) – Dark Matter.
• Versión 9.0 (CS2) (Macintosh) (Windows) – Space Monkey.
• Versión 10.o (CS3) (Macintosh) (Windows) – Red Pill.
• Versión 11.0 (CS4) (Macintosh) (Windows) – Stonehenge.

Nota: Parte del contenido de este artículo ha sido obtenido de Wikipedia.

Posts relacionados:

1. Análisis de Adobe Photoshop CS4.
2. Pequeña colección de tutoriales sobre cómo crear impresionantes efectos de texto en Photoshop.
3. Manipulación de imágenes con Photoshop sin límites.

Si no te sientes listo, asegúrate de chequear el resto de los post previos en nuestra humilde serie de 30 días.

Bienvenido al día 7 de los 30 Días de Mootools 1.2. Hoy vamos a enfocarnos en cómo manipular estilos con Mootools 1.2. Combinado con lo que hemos aprendido en los últimos tutoriales, esto te dará mucho control sobre tu Interfaz de Usuario. Tratar con estilos, a decir verdad, es muy simple, no obstante, que sea simple no quiere decir que no se complique.

Vamos a introducir la idea de un objeto key/value. También vamos a pasar variables fuera del domready, tal y como aprendimos a hacerlo en el tutorial de las funciones.

De aquí en lo adelante los tutoriales van a ir saliendo de lo básico para ir entrando en complejidad para ir introduciendo varios conceptos de programación. Si eres nuevo en Javascript o estás aprendiendo Mootools por primera vez, asegúrate de entender los artículos previos.

Lo básico

.setStyle();

Esta función te permite configurar una propiedad de estilo de un elemento. En ejemplos anteriores hemos hecho uso de .setStyle();. Todo lo que debes hacer es poner .setStyle(); al final de tu selector y cambiará la propiedad de estilo de un elemento o de un array.

//define tu selector
//agrega .setStyle
//define la propiedad de estilo y el valor
$('body_wrap').setStyle('background-color', '#eeeeee');
$$('.class_name').setStyle('background-color', '#eeeeee');

.getStyle();

Este parámetro posee un nombre bastante sugestivo, .getStyle(); retornará el valor de una propiedad de estilo de un elemento.

//primeramente, configura tu variable para que obtenga el valor de estilo
var styleValue = $('body_wrap').getStyle('background-color');

Configurando y obteniendo múltiples propiedades de estilo

.setStyles();

.setStyles(), como ya puedes imaginar, te permite configurar múltiples propiedades de estilo dentro de un simple elemento o un array. La sintaxis para .setStyles(); es un tanto diferente, de manera tal que puede permitirte múltiples propiedades de estilo.

//comienza por crear tu selector, luego agrega .setStyles({
$('body_wrap').setStyles({
    //el paterno a seguir es 'property': 'value',
    'width': '1000px',
    'height': '1000px',
    //IMPORTANTE: No existe alguna coma después de la última propiedad
    //Se ocasionará un desorden si dejas la coma
    'background-color': '#eeeeee'
});

Nota: Actualmente no necesitas las ’comillas simples’ alrededor de la propiedad del selector, a menos que haya un ‘-’ en la propiedad, ejemplo: ‘background-color’.

Además nota que: Existe más flexibilidad con el valor de la propiedad (como ‘100px’ o ‘#eeeeee’). Aparte de las cadenas (una serie de caracteres… pero trataremos ese tema en un tutorial posterior), puedes además pasar números sin comillas (lo que será interpretado eventualmente como un px en muchos casos) y variables:

//esto le pasa a la variable firstBackgroundColor la CADENA '#eeeeee'
var firstBackgroundColor = '#eeeeee';

//puedes pasar una variable hacia otra variable,
//haciendo backgroundColor igual a la cadena '#eeeeee'
var backgroundColor = firstBackgroundColor;

//esto pasa a la variable divWidth el NÚMERO 500
var divWidth = 500;

$('body_wrap').setStyles({
    //en este caso, las variables son palabras sin comillas alrededor
    'width': divWidth,
    //los números son, bueno, números sin comillas alrededor
    'height': 1000,
    //otra variable
    'background-color': backgroundColor,
    //las cadenas son una serie de caracteres dentro de 'comillas simples'
    'color': 'black'
});

.getStyles();

Este te permite adquirir múltiples estilos de una sola vez. Trabaja un tanto diferente de lo que vimos anteriormente debido a que posee múltiples SETS de datos, una llave (la propiedad) y un valor (el valor de la propiedad). Este set de datos es llamado un OBJETO y .getStyles(); hace que sea muy sencillo lanzar múltiples estilos dentro de estos objetos y los mantiene igual de sencillo para adquirirlos de regreso.

//primero define una variable para tu objeto
//luego crea un selector
//entonces agrega .getStyles a tu selector
//finalmente crea una lista propiedades
//de estilos separada por comas
//asegúrate de mantener las propiedades dentro de las comillas
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color');

//primero creamos una nueva variable para almacenar el valor de la propiedad,
//posteriormente llamamos una propiedad particular por su llave,
//la cual en este caso, es el nombre de la propiedad.
//pones el nombre de la propiedad dentro de [corchetes]
//y asegúrate de poner 'comillas simples' aalrededor de la llave propiedad
var bgStyle = bodyStyles['background-color'];

Si tuviésemos el siguiente estilo en nuestro CSS:

#body_wrap {
width: 1000px;
height: 1000px;
background-color: #eeeeee;
}

Entonces bgStyle va a contener el valor ‘#eeeeee.’

Nota: Cuando deseas adquirir una propiedad simple de tu objeto de estilos, primero declara la variable de objeto (en este caso, bodyStyles), luego usas [corchetes] y ‘comillas simples’, finalmente establece la propiedad clave (tal como width o background-color). Eso es todo lo que se necesita.

Ejemplo

En este ejemplo, vamos a usar varios de los métodos que hemos aprendido anteriormente para adquirir y configurar estilos. Más que el mero uso de la manipulación de propiedades de estilo, por favor, nota la estructura como tal. Para separar nuestras funciones del domready, necesitamos pasarle a esas funciones algunas variables que están configuradas dentro del evento domready. Esto se lleva a cabo debido a que se agrega un parámetro a la función dentro del domready. Nota además que los eventos de clic usan funciones anónimas – esto nos permite pasar las variables desde el evento domready hacia las funciones que están afuera. No te preocupes si de momento te pareciera no tener sentido en tu primer intento, el ejemplo siguiente debería hacértelo más sencillo:

//Aquí están las funciones

//Nota que esta función posee un parámetro "bgColor"
//Esto es pasado dentro del evento domready domready
var seeBgColor = function(bgColor) {
	alert(bgColor);
}

var seeBorderColor = function(borderColor) {
	alert(borderColor);
}

//Pasamos por in playDiv brindándole a la función
//acceso al elemento,
//además nos evita usar el selector repetidamente,
//muy útil cuando nos enfrentamos a selectores complicados
var seeDivWidth = function(playDiv) {
        //Adquirimos el estilo nuevamente
        //separado de getStyles y lo usamos en el domready
        //porque queremos el valor actual,
        //esto mantiene el ancho exacto
        //aún cuando ha sido cambiado después que el evento domready ha pasado
	var currentDivWidth = playDiv.getStyle('width');
	alert(currentDivWidth);
}

var seeDivHeight = function(playDiv) {
	var currentDivHeight = playDiv.getStyle('height');
	alert(currentDivHeight);
}

var setDivWidth = function(playDiv) {
	playDiv.setStyle('width', '50px');
}

var setDivHeight = function(playDiv) {
	playDiv.setStyle('height', '50px');
}

//Nota que este parámetro puede ser nombrado como sea
//y será procesado no importa el nombre de valor o elemento que tengas
//el cual se coloca dentro de los paréntesis ()
//de la función dentro del domready
var resetSIze = function(foo) {
	foo.setStyles({
		'height': 200,
		'width': 200
	});
}

window.addEvent('domready', function() {
        //Ya que usamos este selector bastante,
        //nos evita tener que pasarlo a una variable
	var playDiv = $('playstyles');

        //aquí creamos un objeto de varias propiedades de estilo.
	var bodyStyles = playDiv.getStyles('background-color', 'border-bottom-color'); 

        //Puedes recuperar un estilo haciendo un llamado a la llave
        //y pasando el resultado a una variable

	var bgColor = bodyStyles['background-color']; 

        //Aquí usamos una función anónima para poder
        //pasar un parámetro fuera del evento domready
	$('bgcolor').addEvent('click', function(){
		seeBgColor(bgColor);
	});

	$('border_color').addEvent('click', function(){
                //En vez de pasar el parámetro de estilo a una variable,
                //puedes llamarla directamente con esta alerta
		seeBorderColor(bodyStyles['border-bottom-color']);
	});

	$('div_width').addEvent('click', function(){
		seeDivWidth(playDiv);
	});

	$('div_height').addEvent('click', function(){
		seeDivHeight(playDiv);
	});

	$('set_width').addEvent('click', function(){
		setDivWidth(playDiv);
	});

	$('set_height').addEvent('click', function(){
		setDivHeight(playDiv);
	}); 

	$('reset').addEvent('click', function(){
		resetSIze(playDiv);
	});
});

Aquí está el HTML

 


    See background-color
    See border-bottom-color

    See width
    See height

    Set weight to 50px
    Set height to 50px

    Reset size

Aquí está el CSS:

#playstyles {
	width: 200px
	height: 200px
	background-color: #eeeeee
	border: 3px solid #dd97a1
}

Para aprender más…

Descarga el zip de la clase de hoy

Más sobre estilos.

Para aprender más sobre estilos, chequea todo sobre Element.Style en la documentación oficial.

Próximo tutorial – Filtrando entradas.
Filtrando entradas. Parte 1 (numbers)

Vía | ConsiderOpen

Posts relacionados:

1. 30 días de Mootools 1.2 – DÍA 6: Manipulando HTML.
2. 30 días de Mootools 1.2 – DÍA 4: Funciones.
3. 30 días de Mootools 1.2 – DÍA 8: Filtrando entradas. Parte 1 (numbers).