Ú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. 50 técnicas avanzadas CSS para una codificación efectiva.
2. Análisis a 12 aplicaciones de escritorio para blogs.

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. 31 diseños pie de páginas basados en CSS.

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.

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.

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 1: Introducción a la librería.

A List Apart:

Armen Thomassian:

Blogsessive:

Spoon Graphics Blog:

Design Reviver:

DevLounge:

Don’t Trust This Guy:

Evan Eckard:

iDesignStudios:

Josh Spear:

Larissa Meek:

Noupe:

OnWired:

Pearsonified:

Photoshop Lady:

Playground Blues:

ProBlogger:

PS Hero:

Simply Fired:

Superfluous Banter:

True Blue Titan:

Vectips:

Woork:

WP Designer:

Young Go Getter:

Posts relacionados:

1. Sitios de la Semana: 30 de Junio de 2009.

Studio7Designs

El sitio web de Studio7Designs está compuesto por ilustraciones brillantes, con todo el contenido encerrado dentro de un gráfico del Planeta Tierra y un efecto de aurora boreal incomparable.

Francesca Battistelli

El blog de Francesca Battistelli se caracteriza por un uso de texturas realmente bien intrincado, sin embargo curioso, posee además elementos que sugieren dibujo a mano. El conjunto general le desvía la mirada a cualquiera.

Kirdan Design Studio

Una asombrosa, brillante y colorida ilustración en el área del encabezamiento o header hace, entre otros complementos, del sitio de Kirdan un excelente estudio de diseño.

Radu Ceuca

RaduCeuca.com tiene como peculiaridad principal una ilustración muy bien desarrollada con con una variedad de colores enorme brindándole al siio una atracción única.

VixML

El sitio web de VixML está dominado por una fantástica ilustración paisajista-marina. El uso leve de texturas en el sitio difiere  al mismo de lo que podría ser un diseño normal y/o estándar para transformarlo en único y de alguna forma, tradicional.

Posts relacionados:

1. Muestra de sitios web cubanos.
2. 25 blogs espectaculares.
3. Adobe Illustrator: Lo mejor de lo mejor.

Finch

elCandor

Corporate Rick Watch

Black Estate

Jason Santa Maria

Design Hotels

Squarespace Blog

Kyle Standing

Jamie Gregory

Skinny Ships

The Typographic Reference

On

TheManInTheSea

80/20

Artypapers

F5 Fest

Zurb

Wilson Miner

We Love Typography

PixelUmbrella

asdfdsf

Posts relacionados:

1. Ejemplos de páginas con Error 404.
2. 25 maravillosos ejemplos de macrofotografía.

No es un secreto que ha habido una tendencia de total crecimiento en los recientes años por parte de los desarrolladores, especialmente los de la web, respecto a optar por una Mac como su máquina desarrolladora principal. En este post vamos a examinar algunas de las razones que se esconden detrás de esta tendencia, observaremos algunas trampas que constituye un cambio hacia Mac, y analizaremos los programas y configuraciones que todo aquel que se cambia debe conocer.

Primera razón para el cambio: Mac OS X

Hay una realidad en estos momentos y es que, como habrás notado, existe un levantamiento en número de estudiantes y desarrolladores quiénes están escogiendo una Mac como su próxima computadora. De no haberte dado cuenta, probablemente o bien trabajas para Microsoft o tienes un MBA.

Si fueras a formularle una pregunta a un fanático hasta la muerte de Windows por qué éste piensa que a la gente le gustan las Macs, probablemente te respondería de manera casi invariable que las razones se limitan a ser solo por estética. Si le fueras a hacerle la misma pregunta a desarrolladores web, las respuestas fueran unánimemente la misma: OSX. Para ser justo con Windows, en términos de capacidades crudas, ambos difieren por muy poco; ambos sistemas pueden ser configurados de la forma en que el usuario desee.

Cuando te presionas por explicar por qué ellos prefieren OSX, los usuarios de Mac se justifican a menudo con argumentos como “Se siente intuitivo”, o “Yo lo disfruto más”, o incluso “No sé explicar por qué me gusta más, solo sé que lo hago”. Cuando le presentas estos argumentos a un usuario de Windows, usualmente levantan la mirada hacia arriba y mueven la cabeza como si dijeran “no”, todo en tono de desprecio y luego siguen su camino. Es entonces hasta que alguien se propone verdaderamente exponer ideas sólidas para darle a OSX una oportunidad honesta para que ellos puedan entender a qué se debe el alboroto.

Algunos beneficios cuantificables de OSX incluyen:

1. Código abierto amigable

Como un desarrollador web, si existe una habilidad que invariablemente tienes que desarrollar, es el uso de un terminal *NIX. Por suerte, debido que OSX está construido en UNIX, el terminal está listo y esperando. Cada Apple carga una gran variedad de herramientas de programación de código abierto y frameworks tales como PHP, Apache y Ruby on Rails. Usuarios de Linux, quienes se han cansado de tratar con problemas de hardware, especialmente en laptops, a menudo escogen una Mac como su solución portátil debido a que está basado en UNIX.

Esto quiere decir que el mundo entero del software de código abierto tiene garantizado correr libremente sin molestias. En un mundo donde el software de código abierto es una forma de vida, los desarrolladores web necesitan un entorno amigable para operarlo.

2. Quartz Extreme

Quartz es el sistema de ventanas hecho con OpenGL de OSX. Quartz Extreme hace uso de la tarjeta de video exclusivamente, lo cual quiere decir que no se impone ningún ciclo del procesador. Esto permite una variedad de características útiles tales como Exposé, la cual ajusta el tamaño de cada ventana de manera tal que obtengas una “vista de águila” totalmente genérica de todo tu espacio de trabajo.

Spaces, una característica introducida en OSX 10.5 (Leopard), toma la “vista de águila” un paso más allá proporcionando una vista de múltiples escritorios. Para ilustrar un poco más allá el punto, puedes activar Exposé dentro de Spaces y arrastrar estas ventanas de un escritorio a otro – cualquier video que estés reproduciendo continuará haciéndolo y su ventana se ajustará dinámicamente para acomodar la ventana extra. Una vez que pruebas esto, te preguntas cómo pudistes haber vivido sin ello.

3. Core Animation

Core Animation proporciona una forma para desarrolladores para producer entornos de usuario animados a través de un modelo de animación implícita, así como un modelo ‘explícito’. En otras palabras, esto se traduce en que algunas características muy útiles van a mostrarse en las distintas aplicaciones de OSX, tales como el sistema animado de menú de ayuda el cual se muestra en el gráfico de arriba. Proveer a los desarrolladores con suficientes herramientas para implementar ese tipo de efectos animados quiere decir que el software será mucho más intuitivo.

4. Herramientas incluidas

Existen muchas herramientas hechas para Mac que le vienen muy bien a los diseñadores y a los desarrolladores, lo cual demuestra que OSX fue concebido con los diseñadores y los desarrolladores en mente. Un ejemplo de esto es la utilidad de captura de pantalla “Grab”, la cual posee una gran variedad de opciones, desde seleccionar el área que únicamente se desea capturar, hasta la captura de toda el área de la pantalla y exporta la imagen hacia el escritorio en formato .PNG.

De hecho, algunas herramientas fueron creadas específicamente para diseñadores debido a que Apple posee un gran abastecimiento dentro del mercado creativo profesional (de hecho, esto sustanció mucho a Apple durante sus más oscuros tiempos). Entre otras herramientas se incluyen:

• Digital Color Meter – Una herramienta que te permite adquirir el valor del color de cualquier pixel en tu pantalla.
• Console – Útil para ver archivos extremadamente extensos.
• Terminal – Antes mencionado, es una de las muchas herramientas OSS, como VIM.
• XCode Tools – El IDE de desarrollo de Apple.
• Zoom – Herramienta para hacer zooms, increíblemente fácil de usar e increíblemente importante.
• Safari Debug Mode – Herramienta similar al Firebug de Firefox.

5. Interfaz de Usuario Unificada

Como cualquier estudiante de diseño sabe, la consistencia es uno de los principios más importantes al que uno debe adherirse, y queda claro que la Interfaz de Usuario de OSX fue diseñada con esto en mente. Debido a las guías estrictas de la Interfaz de Usuario proporcionadas por las herramientas de desarrollo de software de Apple, cada aplicación y utilidad que utilices en una Mac se siente como parte del mismo sistema.

La barra de menú se adhiere a esta unificación estandarizando la localización y disposición de las opciones del menú. La funcionalidad Drag-and-drop (arrastrar y soltar) en una Mac es impresionante, poder arrastrar una imagen desde tu navegador directamente hasta tu proyecto de Photoshop es realmente una bendición de la productividad.

6. Seguridad

Ahora bien, antes que te prepares para tu argumento sobre por qué las Macs ya no son más seguras que las PCs, déjame señalar un trivial pero indebatible hecho: existe de manera considerable mucho menos software maligno (malware) para Macs que para PCs – MUCHO MENOS (en parte porque UNIX es inherentemente más seguro que Windows, en parte porque Windows es más esparcido y en parte porque los usuarios de Mac no son un blanco constante – no obstante puedes ampliar tu conocimiento al respecto en el excelente artículo (en inglés) Is The Mac Really More Secure Than Windows?). Si vas a seguir siendo un usuario de Mac (o comenzarás a serlo después de leer este artículo), puedes asegurarte a ti mismo que los días de escaneo extenso en busca de virus y spywares han quedado en el pasado.

7. Textmate, Growl, Quicksilver, y más

En Mac no existe escasez de editores de texto disponibles para los desarrolladores, no obstante uno que parece emerger cada día más por la tormenta de recomendaciones que posee es Textmate, el sencillo editor de texto GUI para OSX. Su administración de proyectos permite un control total y distinto sobre las carpetas, lo cual, para frameworks MVC como Ruby on Rails y CakePHP es una bendición de Dios.

Como Textmate, existe una inmensa cantidad de aplicaciones que también parecen haber sido creadas por personas que realmente comprenden lo que le es de más utilidad a los usuarios, ejemplo de ello es la solución rápida Quicksilver, el sistema de notificaciones Growl y el cliente de chat Adium. Estos son algunos de los tantos softwares de un calibre que muchas veces es difícil de encontrar en Windows. Al parecer ser que la calidad, no cantidad, es la mejor forma de describir la librería de softwares de Mac.

8. Una rápida mirada

OSX no solamente posee iconos que muestran en miniatura la versión del archivo que representan, también es posible ver el contenido del archivo sin tener que ejecutarlo con tan solo presionar la barra espaciadora. Además, si seleccionas un grupo de iconos, éstos se pueden expandir en una vista de galería.

9. Virtualización

OSX es el único sistema operativo que puede virtualizar los demás sistemas operativos. Esto es una utilidad de obligado uso por los desarrolladores para chequear, por ejemplo, compatibilidad de navegadores. Para hacer la vida aún más fácil, puedes hacerlo dentro de OSX usando programas como Parallels, Virtualbox y VMWare Fusion. Y si por casualidad crees que todos los navegadores renderean un sitio web exactamente de la misma forma no importa el sistema operativo en el que se ejecuten, te encuentras en un penoso error.

Segunda razón para el cambio: Intel

Cuando Apple hizo su transición con Intel se molestaron muchos fans de Mac que preferían el hecho de que Apple no fuera igual que ningún otro complemento X86 en el mercado. Debido al levantamiento de la computación móvil, sin embargo, Apple se vio forzada a encarar el hecho que PowerPC no estuviera ofreciendo una solución tan buena como la de Intel.

Ellos también concientizaron que el hecho de ofrecer un sistema que pudiera correr Windows en adicción a OSX pondría un stop a cualquier argumento de compatibilidad. Resultó ser un movimiento estratégico excelente y fueron (siguen siendo) muchos los que se cambiaron libremente y sin pensarlo a Mac debido a que cambiarse ya no suponía verse forzados a dejar a un lado sus librerías de softwares basados en Windows.

Tercera razón para el cambio: Menos molestia

“Software obstinado”

Muchos desarrolladores típicamente aman “meter sus manos en el lodo” personalizando, dando mantenimiento y optimizando sus sistemas operativos. Si de casualidad perteneces a esa categoría, probablemente Linux es lo que más encaja contigo, seguido por Windows. OSX es más obstinado que otras plataformas. Es mucho más difícil personalizar su interfaz, no existe una vía fácil para hacerlo correr en hardware que no sea el de Apple.

El llamado “software obstinado”, sin embargo, tiene una inmensidad de beneficios. Por un lado es muy difícil personalizar y hackear cada aspecto de tu OS, pero por otro lado, en mi modesta opinión, es bueno tener un sistema donde una buena cantidad de estas opciones ya han sido tomadas en cuenta de antemano para ti. Porque Apple provee una completa solución, desde el sistema operativo, hardware, los softwares que vienen con el mismo, etc., ellos tienen una forma bien sencilla de asegurarse que la experiencia sea bien probada. Entonces, el llamado “software obstinado” puede ser un concepto muy polarizado.

Por ejemplo, toma Ruby on Rails, un framework de desarrollo web donde muchas decisiones están hechas para el desarrollador basadas en el núcleo de opiniones del contribuidor sobre las mejores prácticas. Rails posee un framework basado en javascript, base de datos ORM, sistema de plantillas, y más. Sin embargo, tú puedes escoger otras configuraciones si así lo deseas, eso si, es indiscutible que brilla en toda su plenitud cuando haces las cosas “a lo Rails”.

Pasar menos tiempo personalizando y más tiempo desarrollando, esa es la esencia detrás del concepto. Esto puede apagar a algunos desarrolladores, pero la realidad es que a la inmensa mayoría les evita muchas molestias

Soporte

Cuarta razón para el cambio: Microsoft

Lo creas o no, una gran razón por la que muchos desarrolladores han migrado a Apple es en parte debido a que no es la gran Microsoft. Cuando la computación personal estaba aún en su infancia, la reversa fue verdadera. Microsoft entendió que eran los desarrolladores (desarrolladores desarrolladores) los que harían de su sistema operativo un triunfo total, mientras que el modelo cerrado de Apple terminó siendo un gran error.

Una vez que Microsoft comenzó a dominar el Mercado, sin embargo, el fenómeno monopolista dio luz al movimiento open source (código abierto), y muchos desarrolladores se preguntaron si existirían mejores opciones.

Linux es, por supuesto, el niño preferido de dicho movimiento, no obstante a pesar de los esfuerzos de Ubuntu, el cual es un gran sistema operativo, no llega a ser la revelación del milenio

Microsoft posee la desafortunada sensación como si estuviera diseñada por un comité. Las características son bien pesadas y no están de acorde a su utilidad. Cuando Vista fue lanzado oficialmente, la interfaz Aero requería para nada máquinas sencillas para poder correr ampliamente, yendo de manera contraria al argumento que Microsoft planteaba respecto a la asequibilidad de las PCs. OSX fue diseñado para correr desde en la MacPro más cara del mercado hasta en la Powerbook de hace 8 años atrás, todo esto se debe a que ellos controlan la solución desde hardware hasta software

Desafortunadamente, Windows no viene ni con PHP, Rails, o cualquier otro framework de desarrollo web de código abierto.

Quinta razón para el cambio: Diseño y minimalismo

El buen diseño siempre resalta. El buen diseño es aquel que con tan solo observarlo sientes que refresca tus ojos. Solo existen 2 tipos de laptops Apple: plateadas y blancas, la blanca solo está disponible en las configuraciones más baratas. Las laptops de Apple no poseen ningún tipo de pegatinas, tornillos, respiraderos, interruptores y gráficos.

Todo lo que queda es un sistema que capta la atención del usuario solo hacia el interior de la pantalla, siendo así como debe ser. El beneficio del ciclo de desarrollo de un producto que es fabricado por la misma “casa” es que Apple crea un sistema que verdaderamente se siente como creado por una sola persona.

En el corazón de la filosofía de diseño de Apple se encuentra el concepto de minimalismo. Es un concepto que ha sido trabajado por igual por compañías como Google.

Trampas de Mac

Para quienes cambian a Mac todo no es sol y arcoiris. Existen golpes inevitables en el camino a recorrer por todos aquellos que se sumergen en un cambio mayor de plataforma como este. Para muchas personas estos golpes son grandes obstáculos en el camino. Aquí les muestro de lo que hay que cuidarse:

1. Control ahora es Command

Romper el hábito de usar Control como la tecla modificadora principal en tu sistema puede tomar un poco de tiempo. Mi padre siempre dice que “viejos hábitos difícilmente mueren”. Este es un problema que puede ser resuelto re-mapeando Command a la tecla Control, sin embargo, cuando estás usando un sistema que asume cierta configuración, puedes entrar en una confusión eventualmente. El consejo es que no trates de acomodar el sistema a tu antigua costumbre, en cambio crea una costumbre a partir de este.

2. No hay botón secundario en el mouse

A menos que uses un mouse externo con tu laptop Apple, tendrás que vivir con el hecho de la ausencia de un botón secundario en el mouse. Por suerte puedes declarar un botón secundario de muchas formas en una Mac, tales como golpear con dos dedos simultáneamente el trackpad o presionando ctrl. Mientras haces clic.

3. No existe el maximizado de ventanas

La típica maximización que se usa en Windows no se puede encontrar en una Mac, y para algunos esto es extremadamente frustrante. De hecho los botones encargados de manejar las ventanas, los del estilo semáforo pueden, muchas veces, sentirse rancios y no intuitivos.

4. Ausencia de una Mac “asequible”

Posiblemente el punto que más resaltan los no usuarios de Mac es el del precio. Apple ha escogido no entrar en las ofertas por debajo de los $1000 no porque no quiera crecer en ventas, sino ante todo busca evitarse la “pelea de perros” que viven constantemente Sony, HP, Asus, Acer, etc. por el mercado más bajo.

En este rango los márgenes de beneficio son una navaja delgada. Apple es, sin dudas, lo más cercano que existe en la llamada boutique de estilo de consumo. Si andas escaso de dinero por estos días, problema del precio es el obstáculo que no te podrás permitir derribar.

5. Librería de softwares mucho más pequeña

Esto, de cierto modo, está mediado por el hecho de que tú puedes virtualizar perfectamente bien Windows dentro de Mac, está bien lejana la posibilidad de correr tus aplicaciones favoritas (de Windows) nativamente en Mac.

6. No puedes construir una Mac (fácilmente)

Parte del triunfo de Windows consiste en que posee licencias para corer libremente por cualquier PC. Apple siempre ha sido de un concepto mucho más cerrado, salvo un breve período de tiempo en que Apple permitió que existieran clones de Mac lo cual resultó una devastadora idea. Si eres del tipo de usuarios que le gusta armar su propia computadora, Mac no va a ofrecerte mucho.

Conclusión

Seamos claros y realistas, ciertamente no es la solución para todo el mundo, ahora bien, siguiendo el mismo contexto (claro y realista), queda claro que muchas personas están cambiándose a Mac por mucho más que un par de buenas razones. Mac es más caro y requiere de la paciencia de los usuarios para adaptarse a una interfaz completamente diferente. Mac no es una opción para cada usuario, sin embargo es una opción válida a considerar – particularmente por diseñadores o desarrolladores.

No hay ningún post relacionado.