El blog de Iker Cortabarria

Hace tiempo un compañero de trabajo me mandó una url donde se encontraba un artículo que contaba con 23 señales que si se cumplían aseguraban que eras todo un geek del diseño.

El artículo original es de crestock.com. Se encuentra en inglés así que he decidido traducirlo para que todos podamos disfrutarlo.

23 señales que afirman que te estás convirtiendo en un Geek del diseño.

El mundo del diseño puede ser despiadado. No solo pasas la mayor parte de tu tiempo pensando y retocando los minuciosos detalles que la mayoría de gente encuentra insignificantes (e incluso no notarían probablemente) si no que también conseguiste desarrollar hábitos antisociales como “ver código fuente” que miras incesantemente.

Aprende a ver las señales a tiempo!

Sabes que te estás haciendo un geek del diseño cuando:

1- Ríes nerviosamente siempre que utilizas los colores F0CCED, EFF0FF y 44DDDD. (*)

2- Estás en el sol y miras alrededor para encontrar una pequeña pizca de sombra y sentarse debajo.

3- Das a tus parientes/amigos una conferencia sobre espacios y perfiles de color cuando te mandan las fotos de sus vacaciones.

4- Te hierve la sangre el hecho de que alguien utilice efectos como los destellos (lens flare) o un tipo de letra como la Comic Sans.

5- Mantienes un sistema de rejillas para colocar tus imanes del frigorífico.

6- Organizas la colección de CD´s según el tono de Pantone.

7- Te sientas en el trabajo ocho horas diarias, recto, mirando al monitor, esperando una chispa de inspiración que no llega.

8- Estás despierto hasta las 5 de la mañana porque te vino una gran idea mientras te cepillabas los dientes.

9- El sueño más caliente que has tenido en mucho tiempo ha sido “Trace contour… Find Edges… Pinch… Extrude… Smudge Stick… Motion Blur…. Sprayed Strokes…”

10- Te sabes el Lorem Ipsum de memoria.

11- Tu hijo sabe el Lorem Ipsum de memoria.

12- El profesor de preescolar se queja de que tu hijo no colorea dentro ni fuera de las líneas, si no que indica los colores en una hoja aparte.

13- Activar toda tu colección de fuentes hace que tu ordenador se cuelgue, y utilizas OSX…

14- Te has cargado tu diseño, compatible con todos los navegadores, colocándole un banner “Too Cool for IE”.

15- Prefieres un estilo de capa con opacidad al 50% (o menos) en el camisón de tu esposa.

16- Te gastas 200€ en una fuente para tu web personal por que “es la única en la que la letra g minúscula aparece recta”

17- Mirar una carta de menú en un restaurante hace que pienses “mmm…, Baskerville en cursiva…” en vez de “mmmm…, comida!”

18- Cuando finalmente te encuentras algo centrado, cortas las rebanadas de pan en capas con textura granulada…

19- Utilizas según que tipo de palabras acerca de fuentes que te disgustan que otro tipo de personas se reserva para los dictadores fascistas y los asesinos en serie.

20- Apple+Z o Ctrl+z es la primera cosa que se te pasa por la cabeza cuando se te cae algo y lo rompes.

21- Te refieres a tus amigos como terminantes (Strict), transitorios (Transitional), flojos (Loose) y futuros desempleados (the Future Unemployed).

22- Nombras a tu parte íntima como “la varita mágica”.

23- Entiendes perfectamente de lo que habla este post y decides mandarlo rápidamente a tus amigos.

(*) Los colores #F0CCED, #EFF0FF y #44DDDD recuerdan en inglés a la palabras Fucked, Fuck off y la tercera no he conseguido averiguarla.

Hace tiempo que lo llevo utilizando y todavía no entiendo cómo era capaz de maquetar un sitio web sin él. Se trata de una extensión de Firefox llamada Firebug.
Consiste en un software que se integra al navegador para añadir herramientas de desarrollo web al alcance de los usuarios que en este caso seríamos los desarrolladores.
Mientras se navega por cualquier sitio web podemos visualizar la estructura, modificar el css o controlar los tiempos de carga de las imágenes utilizadas, eso sin tener en cuenta que se trata de un complemento muy fuerte para la creación de sitios web.
Firebug es maravilloso, te permite ver en tiempo de ejecución todos esos detalles de programación o diseño que para pulir conlleva muchos más clicks o quebraderos de cabeza de los que uno quisiera.

Antes de conocer Firebug me tenía que conformar con el visor de elementos incluido en el “Web Developer”. Para controlar las herencias y ver qué propiedades tenían los elementos iba bastante bien, pero los desarrolladores web necesitábamos algo más.

Con Firebug montar HTML + CSS se convierte en un visto y no visto, podemos buscar los errores de nuestro sitio, editarlos en tiempo real desde la misma página, podemos modificar los tamaños de los distintos elementos. Donde antes teníamos que marcar los elementos con bordes de colores, ahora con un solo click lo tenemos controlado.
Firebug te dice todo sobre tus css: cómo pinta un elemento, si hereda alguna propiedad, te muestra en pantalla el ancho y alto, los márgenes que posee o el padding todo ello aplicado con un pequeño gráfico.

También puedes controlar los tiempos de carga de las imágenes, y por si fuera poco te permite revisar el javascript para ver si tiene algún error el código que estamos editando.

Firebug te ofrece:

Ver y editar el código HTML.
Nos permite ver el código fuente y encontrar elementos HTML en el código posicionándonos en ellos con el ratón, podremos editarlo mientras vemos como quedan las modificaciones. De esta manera no hace falta que recarguemos la página para ver los cambios realizados.

Visualizar y editar CSS.
Es la herramienta que más utilizo, con ella podremos editar los estilos en tiempo real sin tener que acudir al fichero css. Posee autocompletado de las propiedades y visualización del tamaño de los elementos mostrado en un gráfico que te señala el margin o padding que pueda tener.

Controlar el tiempo de carga.
Con esta opción podemos medir el tiempo de carga de cada uno de los ficheros que componen la página. Esta extensión nos muestra cada petición realizada al sitio y los segundos que tarda en obtenerla.

Debuguear el javascript.
Es uno de los puntos más fuertes del Firebug. Podemos buscar los scripts fácilmente y poner puntos de interrupción en nuestro código cuando se cumpla una condición, además nos permite controlar el tiempo de ejecución de nuestros scripts entre otras cosas.

Múltiples opciones nos esperan al instalar esta herramienta. Puedes ver más detalles de este complemento en la página oficial www.getfirebug.com

Layout gala es una creación de Alessandro Fulciniti. Consiste en 40 layouts distintos realizados con css.

Puedes utilizar diferentes plantillas en dos y tres columnas con diseño líquido, tamaño fijo, porcentaje, híbridos, etc.

Para ser sincero la verdad es que ofrece mucho juego y utilizarlos de base para nuestra página nos ahorrará algo de tiempo y algún que otro quebradero de cabeza.

Son totalmente gratuitos, muy completos y por si fuera poco te ofrece la posibilidad de descargar los layouts uno por uno o todos agrupados en un archivo zip. Cada una de sus páginas valida tanto el html como la hoja de estilos. No utiliza ningún hack y el código es bastante limpio.

Me llamó la atención el uso de columnas flotadas utilizando márgenes negativos o la posibilidad de hacer crecer el contenido sin que se nos descoloque algún que otro contenedor. Layout gala es una herramienta indispensable que debemos tener agregada en nuestros favoritos.

Existen ocasiones en las que necesitamos tener un diseño en dos columnas para mostrar elementos, imágenes párrafos, etc.
Para tener estas dos columnas existen múltiples opciones, pero una de las más comunes es crear un contenedor padre y unos elementos hijos. Estos elementos tendemos a flotarlos para conseguir este efecto de columnas ordenado. Al flotar el contenido que se encuentra dentro de nuestro contenedor padre podemos sufrir un desbordamiento.

El problema:
Tenemos dos contenedores hijos llamados “izquierda” y “derecha” contenidos dentro de un div padre llamado “container”.
Cuando flotamos los elementos que se encuentran dentro del div “container”, el padre tiende a adaptarse al contenido, como el contenido se encuentra flotado no tiene nada a lo que aferrarse y nos puede aparecer un pequeño desastre como el que tenemos en la imagen.

Queremos que nuestro div#container rodee ambos párrafos. Para corregir este pequeño desastre al contenedor le aplicaremos una propiedad css.

La solución:

div#contenedor {overflow:hidden;}

Observaremos que tanto en Firefox, como en Opera, Safari o incluso IE7 esta propiedad funciona y el padre se amolda al contenido de los hijos.
Encontraremos un pequeño problema a la hora de visualizarlo en la versión 6 de Internet Explorer y es que al aplicar la propiedad css es como si no hubieramos hecho nada.

La solución para IE6:
Al aplicarle el overflow, IE6 necesita un ancho específico para poder rodear correctamente los elementos flotados. De esta manera si le aplicamos un width ya sea en píxeles o porcentaje el contenedor padre rodeará a los hijos como deseábamos desde el principio. Al resto de navegadores este ancho no les afectará en nada y de este modo sólo será una propiedad más dentro de nuestro css.

El resultado final sería este:

div#contenedor {overflow:hidden; width:100%;}
div#izquierda {float:left;}
div#derecha {float:right;}

Hay gente que a la hora de diseñar necesita comprobar la compatibilidad en distintos navegadores.

Lo bueno es que siempre te puedes instalar navegadores como Opera, Safari, Camino, Konqueror, Firefox, etc. Y visualizar el sitio en cuestión.

Lo malo viene cuando tienes que comprobar la compatibilidad de tu página en Internet Explorer. Como ya sabíamos a la hora de diseñar teníamos algunos problemas con el css en IE6 y era inevitable tener instalado este navegador en nuestro equipo o en uno próximo. Por si esto no bastaba sacaron la versión 7 y el problema venía a la hora de diseñar para las dos versiones.

En mi caso tuve que instalarme una máquina virtual con IE7 para comprobar que mi página se visualizara correctamente.

Hace poco en el trabajo descubrí que me podía actualizar a la versión 7 de este navegador y por si fuera poco mantener la versión 6 o incluso ir más allá y tener instaladas en una misma máquina las versiones anteriores de este navegador.

El programa que lo hace posible se llama “MultipleIEs“. Lo que hace exáctamente es instalarte Internet Explorer 6, 5.5, 5, 4 y 3 aunque este último cada vez que lo abro se queda colgado.

Para algunas personas es imprescindible utilizar esta herramienta de Microsoft como es mi caso. Ya que si te dedicas a diseñar páginas comerciales tienes que tener en cuenta la compatibilidad entre todos los browsers y procurar que se vea correctamente en IE.

Y es que a pesar de todo, en Europa, Firefox solo tiene un 28% del share de navegadores, siendo aún el IE el más usado por todos, así que toca aguantarse. Si una web no se ve bien en Firefox, Netscape, Konqueror, Opera, Safari, etc, a la gente le da un poco igual, en cambio si no se ve bien en Explorer, es que no funciona.