The Airborne Toxic Event en Letterman

El viernes pasado, The Airborne Toxic Event tocó en el show de David Letterman y otra vez gallina de piel. En esta actuación estuvieron acompañados por The Calder Quartet, el grupo de cuerda del hermano de Anna Bullock, la violinista de la banda.

Workplaces interesantes

El puesto de trabajo es algo muy personal, dentro de lo cabe, y como tal en mucho casos es digno de ver. Ya sea por un desorden increíble, un caos total, un diseño raruno o por la disposición perfectamente simétrica de sus elementos cada uno refleja en mayor o menor medida el carácter y la personalidad del currante. Además dicen que el sitio y el entorno de trabajo afectan al rendimiento, la productividad y la creatividad del trabajador.

Navegando por el interesantísimo blog Inspiredology encontré un post donde se recogen un gran número de “workplaces”, algunos de ellos magníficos y otros casi sobrenaturales.

Por ejemplo este primero, de los pocos que son "humildes", es el que más me gusta por ser muy hogareño y con muchas ventanas y luz.


Y mientras algunos son más corporativos pero a la vez muy funcionales, otros se pasan de modernidad dando quizás demasiada importancia al diseño:

La conclusión más clara que se puede extraer viendo todas estas imágenes es que la gente limpia su sitio de trabajo antes de tomar una foto.

Para ver más, visita el post de Inspiredology.

El preloader de Flash como expresión artística

Antes de que el ADSL y el cable fueran algo común, la gente se conectaba a Internet a través de la Red Telefónica Básica (RTB), o sea, con un módem analógico. La velocidad de navegación no era precisamente la característica más destacada. Eso sí, las animaciones en Flash ya existían, no abundaban como hoy en día, pero se empezaban a hacer un hueco. El tamaño de estos archivos era enorme, eso no ha cambiado. Conclusión, los diseñadores añadían los preloaders a sus animaciones, que mostraban algún tipo de imagen para indicar al usuario que la animación se estaba cargando.
Los típicos preloaders constaban de una barra que se iba llenando, con el texto “Cargando” en algún sitio y habitualmente también con el porcentaje de carga que iba aumentando. Debido a que los tiempos de carga eran altísimos, algunos diseñadores decidieron crear preloaders que muchas veces resultaban más entretenidos que las propias animaciones.

Ahora, de la mano de Big Spaceship, llega el primer museo online de preloaders. El museo no es nada más que preloaders que se muestran mientras se cargan otros preloaders, así de fácil. En definitiva, un bonito y sincero tributo a una forma de expresión artística muy ignorada.


Ah, el museo se llama Pretty Loaded.

Diseño en 3 columnas para blogger

Empujado por la nueva orientación de este blog, y por una tarde de aburrimiento, decidí cambiar el aspecto del susodicho. Llevando a cabo la citada tarea encontré que, raramente, todas las plantillas que ofrece blogspot son de 2 columnas. Existen por ahí una infinidad de sitios web que permiten descargar plantillas para blogger que disponen de un diseño en 3 columnas, pero si uno quiere tunearse su propio blog, añadir una tercera columna no es difícil, incluso si no se tienen demasiados conocimientos de HTML y CSS.

Manos a la obra pues. Para este ejemplo partiremos de la plantilla llamada Minima. Para el resto de plantillas, las modificaciones son parecidas, aunque no iguales. Si algún lector perdido necesita añadir una tercera columna a cualquier otra plantilla y no lo consigue, que no dude en comentarlo.

Las secciones o contenedores principales de esta plantilla, llamadas "div" en HTML, son la cabecera, cuyo nombre en el código es #header-wrapper, la sección principal (#main-wrapper), la columna lateral (#sidebar-wrapper) y el pie (#footer-wrapper). Clica en la siguiente imagen para verlo (no se muestra el #footer-wrapper):

Después de las modificaciones que aplicaremos a dicha plantilla, añadiendo una nueva columna (#extra-wrapper), la distribución va a ser la siguiente:

La plantilla resultante va a tener un ancho de 960 píxeles. Existen numerosas razones por las que optar por este ancho (accesibilidad, usabilidad, teorías...) en las que no entraré, pero para resumir, con 960 píxeles de ancho, el diseño resultante se adaptará perfectamente a cualquier resolución igual o mayor de 1024x768 y se dispone de espacio de sobras. Es verdad que con este diseño se dificulta la navegación de la gente que usa una resolución menor (debido a la molesta barra de scroll horizontal), pero hoy en día cada vez son menos los que las utilizan, y sobretodo, un diseño en 3 columnas de menos de 900 píxeles de ancho resulta un poco caótico.

En la imagen de la futura estructura se ve el ancho de cada una de las tres columnas, así como el de otros elementos característicos e indispensables en la programación web, el margin y el padding. Como se puede apreciar en la siguiente imagen, el margin es, como el nombre indica, el margen entre una sección o contenedor y el resto de elementos a su alrededor, dicho de otra manera, el espacio que se deja a partir del borde de la sección hacia fuera. El padding es lo contrario, es el espacio que se deja entre el borde y el texto o los elementos en el interior del contenedor.
Al final, todos estos elementos (margins, paddings, bordes en caso que los haya y contenedores) tienen que sumar 960 píxeles, el ancho total de nuestra página. Por lo que si a alguien no le gusta la distribución propuesta, en cuanto a tamaños, puede modificarlos a su gusto, sólo teniendo en cuenta esta condición.

Lo primero que tenemos que hacer, por lo tanto, es establecer Minima como nuestra plantilla. En nuestro panel de control vamos a "Diseño", y ahí vamos a la pestaña "Seleccionar plantilla nueva". Una vez establecido, nos dirigimos a la pestaña "Edición de HTML".

Ahora vamos añadir el contenedor de la columna al código HTML de nuestro blog (en un principio, aparecerá con el widget del perfil personal, después ya se podrá quitar o añadir más widgets en la pestaña "Elementos de la página"). Buscamos en el código:

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
 <b:section class='crosscol' id='crosscol' showaddelement='no'>
 </b:section>
</div>

<div id='main-wrapper'>
....

Teniendo en cuenta que el código de nuestra nueva columna es el siguiente:

<div id='extra-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
  <b:widget id='Profile1' locked='false' title='Mi perfil' type='Profile'/>
</b:section>
</div>

Vamos a copiar este código tal cual está entre el div del "crosscol-wrapper" y el del "main-wrapper", quedando al final el código de la siguiente manera:

<div id='content-wrapper'>

 <div id='crosscol-wrapper' style='text-align:center'>
   <b:section class='crosscol' id='crosscol' showaddelement='no'>
   </b:section>
 </div>

 <div id='extra-wrapper'>
   <b:section class='sidebar' id='left-sidebar' preferred='yes'>
     <b:widget id='Profile1' locked='false' title='Mi perfil' type='Profile'/>
   </b:section>
 </div>

 <div id='main-wrapper'>
 ....

Llegados a este punto, la columna ya está añadida, ahora sólo falta tunearla a través del CSS, las hojas de estilos.

Primero adaptamos la cabecera al ancho de la página. Localizamos en el mismo código la plantilla el lugar donde se especifica el estilo de la cabecera.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Aquí debemos modificar el width poniéndolo a 940px. Lo mismo haremos con la descripción de la cabecera.

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Cambiamos pues el max-width de 700px a 940px.

Ahora viene el punto donde realmente damos el estilo a las 3 columnas. Localizamos el siguiente código:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Y lo cambiamos por el siguiente:

#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#extra-wrapper {
width: 190px;
padding: 10px 5px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#main-wrapper {
width: 500px;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 190px;
padding: 10px 5px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Finalmente sólo nos falta adaptar el tamaño del pie. Buscamos el código siguiente:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Y modificamos el width, cambiándolo de 660 a 940px. Ahora nuestro blog dispone de tres columnas. Clicamos en el botón “Guardar Plantilla” y ya podemos ver como ha quedado.

Si nos dirigimos a “Elementos de la página”, dentro de la pestaña “Diseño”, veremos como la tercera columna ya aparece y los elementos se pueden añadir o modificar como en cualquier otra sección.

Cuando pueda crearé una plantilla genérica basada en este diseño para que cualquiera pueda subirla y ponerla a su gusto, cambiando formatos, bordes, colores o imágenes.

Cambiar el favicon de un blog (de blogger)

Dejo de lado la música durante un rato, para explicar un pequeño truco para tunear cualquier blog de blogger, concretamente el favicon. Un favicon es ese pequeño icono que aparece junto a la barra de direcciones de cualquier navegador o en cualquier pestaña, y que sirve para identificar más fácilmente un sitio web o dotarle de mayor personalidad. En el caso de los blogs de blogspot es ese horrendo icono con esa especie de B anaranjada.

Si también estáis cansados de ver este pequeño icono presidiendo vuestro blog, podéis seguir los pasos siguientes para cambiarlo.

Primero tenemos que crear el icono. Cualquier persona con conocimientos suficientes de Photoshop puede hacerlo creando una imagen con extensión .ico. El tamaño de estos iconos puede ser de 16x16 píxeles o 32x32, aunque el tamaño recomendable es el de 16x16 píxeles.

Si alguien no domina Photoshop o cualquier otro editor gráfico, la opción más fácil es visitar Favicon.cc. Aquí sólo tenemos que seleccionar “Import Image”, indicamos la imagen que queremos utilizar y la subimos. Nos aparecerá el icono generado y una muestra de cómo va a quedar. Si nos gusta le damos a “Download Favicon” y ya tenemos el icono creado y guardado en nuestro disco duro.

El siguiente paso es subir este icono a cualquier hosting que permita subir ficheros con la extensión .ico, por ejemplo Pixali. Subimos nuestro icono y después copiamos el contenido de la casilla "HTML (for websites)" en el bloc de notas o donde se quiera, porque después vamos a necesitarlo:

<a href="http://www.pixali.com/viewer.php?file=zgd7ppkfhdyv2ky3a3gn.ico"><img src="http://www.pixali.com/files/zgd7ppkfhdyv2ky3a3gn.ico" border="0" alt="Pixali" /></a>

Ahora nos dirigimos ya a nuestro blog, concretamente a la sección “Diseño”, seleccionando después la opción “Edición de HTML”. En el código buscamos esto:

  <head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

Justo después añadimos la siguiente línea:

<link href='xxxxxxxxxxxx' rel='shortcut icon' type='image/ico'/>

Reemplazando las x’s por la dirección URL del favicon que hemos subido a Pixali, y que es lo que está indicado entre comillas después de src, en el trozo de código que antes hemos pegado en el bloc de notas.

http://www.pixali.com/files/zgd7ppkfhdyv2ky3a3gn.ico

Una vez añadida esta línea de código guardamos la plantilla y nuestro blog ya dispondrá de un favicon personalizado.

2008 en 20 canciones (y II)

Aquí está la segunda parte de esta lista recopilatoria de canciones del 2008. Del número 10 al número 1.


11 - The Gaslight Anthem - The '59 Sound:

Ya se que en el anterior post terminaba en la posición 11, y ahora la repito, pero estas cosas pasan cuando te olvidas de meter una canción de debería estar. Total, que va a ser un Top 21. Y es que la mezcla perfecta de rock clásico con punk que produce The Gaslight Anthem tiene que estar en esta lista.

10 - Russian Red - Cigarretes:

Como siempre que aparece un artista o grupo estatal que es el nuevo "noseque" del mundo gafapasta, no se tardó en encumbrar a Russian Red a lo más alto. Y aunque uno intenta mantenerse al margen de tanta euforia desmedida, en plena oleada folk, la voz de Lourdes Hernández se hizo demasiado irresistible como para ignorarla. Una canción preciosa.

9 - Butch Walker - Closer To The Truth And Further From The Sky:

Butch Walker es un crack, un artista y un músico polifacético que tanto te saca un disco en solitario, como produce uno de Fall Out Boy o compone canciones para Avril Lavigne o Lindsay Lohan. Su último disco, Sycamore Meadows, es un álbum completísimo y apasionante, siendo Closer To The Truth... uno de sus más agradables exponentes.

8 - AM - Hear Me Sing:

AM es un compositor, poeta y músico californiano de adopción y coleccionista de premios. Su disco de duetos Side By Side nos deja esta canción en la que comparte protagonismo con Buddy, otro cantante y compositor líder de la banda que lleva su nombre.

7 - Frightened Rabbit - The Modern Leper:


Este grupo escocés y su último álbum, The Midnight Organ Fight, son una de las sorpresas más positivas del año, consiguiendo unir el favor del público y el de la crítica. The Modern Leper creo que resume muy bien su estilo. Escúchala.

6 - Kings Of Leon - Use Somebody:

Si existe una voz sexy por estos mundos es la de Caleb Followill, y si existe un tema sexy es este Use Somebody. De lo mejor del aclamado Only By The Night, el último trabajo de esta familia de músicos.

5 – Coldplay - Viva La Vida:

Parece que en el mundo indie duele cuando alguno de sus artistas favoritos empieza a ser escuchado por el gran público y su éxito toma medidas escandalosas. Pueden criticarlos, y con plagio o sin plagio, Viva La Vida es una canción enorme.

4 - Against Me! - Borne On The FM Waves Of The Heart:

Aunque el disco grandioso, New Wave, al que pertenece fue publicado en el 2007, esta canción no fue lanzada como sencillo hasta hace pocos meses. Este dúo con Tegan Quin de Tegan And Sara, escrito por Tom Gabel pensando ya en su voz, demuestra que estas colaboraciones, si están bien hechas, funcionan muy bien.

3 - Thriving Ivory - Angels On The Moon:

Uno de los debuts más esperanzadores del año es el del grupo Thriving Ivory. Aunque con un primer sencillo de este calibre, las composiciones de Scott Jason y la voz inconfundible Clayton Stroope el resultado no puede ser otro.

2 - Longwave - Shining Hours:

Longwave es un grupo que incomprensiblemente permanece en un segundo plano, repito, incomprensiblemente. El discazo que es Secrets Are Sinister no puede estar escondido. Para muestra este Shining Hours.

1 - The Airborne Toxic Event - Sometime Around Midnight:

Aún a riesgo de parecer pesado y exagerado con The Airborne Toxic Event, la verdad es que ninguna canción me ha acompañado durante más tiempo este año. Sometime Around Midnight es la canción del 2008.

2008 en 20 canciones (I)

Cuando uno se encuentra abrumado y arto ya de la exagerada cantidad de listas con lo mejor del año, ¿qué se debe hacer? Pues subirse al carro, claro está. Así que empiezo con un Top 20 de canciones de este año, 2008. Sólo dejar claro, por si hay alguna duda, que es una lista totalmente parcial, subjetiva, sin complejos, sin ningún tipo de prejuicio y que en ningún caso intenta establecer que canciones son mejores, sino simplemente cuales me han gustado más. Dicho esto, empezamos con la lista del puesto 20 al 11.

20 - Augustana - Meet You There:

Estos chicos tienen mucho talento, y esta canción me enganchó durante un buen número de semanas a base de folk rock con sabor indie y country. Escúchala.

19 - Alpha Rev - Phoenix Burn:

La esencia del modern rock alternativo americano mezclado con la voz de Casey McPherson, que en determinados momentos recuerda a Richard Ashcroft, da como resultado un tema enorme que crece y no para. Todavía no se ha publicado en un disco, pero en su MySpace es la más escuchada, y con razón.

18 - War Stories - Lion:

La voz característica y cargada de testosterona de Evan Robinson se hace adictiva. Y es que vienen de San Diego y eso siempre es buena señal... And this heart screams fear like a lion!

17 - Cold War Kids - Something Is Not Right With Me:

La mejor canción del nuevo trabajo indie rock de los niños de la guerra fría se resume en la voz desgarrada y destrozada de Nathan Willett, que te lleva a querer imitarla, aún sabiendo que es imposible.

16 - Weezer - Heart Songs:

Aunque algunos la odien, el resumen rápido de la vida musical de Rivers Cuomo bien merecía estar en un Top de lo que fuese. Escúchala.

15 - The New Raemon - Tú, Garfunkel:

Ramón Rodríguez y su disco en solitario dejó un gran regusto y esta canción alegra a la vez que deprime. Ahí va.

14 - The [New] Shining - Red Eyes:

Este tema es una pequeña sorpresa que llega desde Holanda, aunque parece sacado de la mismísima California.

13 - O.A.R. - Shattered (Turn The Car Around):

Un tema agradable, que entra bien y que demuestra el buen hacer de O.A.R. Y punto.

12 - Like Satellites - Innocent:

Un grupo que se intenta hacer un nombre poco a poco, como Innocent, que en las primeres escuchas parece uno más pero con el tiempo se convierte en una balada cruda y desgarradora. Escúchala.

11 - The Break And Repair Method - You Won't Be Able To Be Sad:

Un tema pegadizo y genial de Paul Doucette que demuestra lo que tarde o temprano se tenía que demostrar: Matchbox Twenty es algo más que la banda de Rob Thomas.

Aquí termina esta primera parte, pronto el resto!