El blog de Iker Cortabarria

Hace tiempo que lo llevo utilizando y la verdad es que estoy bastante contento con él.

El pasado mes de junio (2007) Apple sacó un pack de Safari3 beta exclusivo para windows. A los usuarios de Windows nos viene muy bien esta herramienta ya que de esta manera podremos comprobar la compatibilidad de nuestro sitio en un navegador Mac. La interface tiene un diseño agradable (típico de Mac) y la manera de renderizar las fuentes, imágenes o campos de formulario me llamó mucho la atención. Es algo a lo que no estoy acostumbrado y al verlo, es imposible evitar una leve sonrisilla tras observar algunos efectos visuales no comunes.

Según Apple:

Tiene un rendimiento deslumbrante.
Safari, el navegador web más veloz en cualquier plataforma, carga páginas hasta al doble de velocidad que Internet Explorer 7 y hasta 1,7 veces más rápido que Firefox 2.

Además es capaz de ejecutar JavaScript hasta 3 veces más rápido que Internet Explorer 7 y hasta 2 veces más rápido que Firefox 2.
¿Y en qué te beneficia todo esto? En que las páginas tardan menos en cargarse para que dispongas de más tiempo para disfrutarlas.

O incluso arranque de aplicaciones.

Para llegar a esta conclusión en la misma página vienen los detalles de las pruebas:

Velocidad medida en segundos. Pruebas efectuadas por Apple en noviembre de 2007 en un iMac con procesador Core 2 Duo de Intel a 2,4 GHz con Windows XP Professional SP2, configurado con 1 GB de RAM y una ATI Radeon HD 2600 con 256 MB de VRAM. Batería de pruebas de HTML y JavaScript basada en la versión iBench 5.0 de VeriTest usando los ajustes por omisión. Pruebas efectuadas con una versión beta de Safari; el resto de navegadores eran versiones comerciales. La velocidad puede variar en función de la configuración del sistema, la conexión de red y otros factores.

Si deseáis descargar este navegador y hacer algunas pruebas con él lo podéis hacer desde este enlace.

Nunca he trabajado con un Mac, y odio admitirlo, pero siempre he sido un usuario de Windows. La verdad es que se agradece que poco a poco vayan sacando este tipo de herramientas que nos ayuden a ver el comportamiento de una página en distintos navegadores.

Ya he plantado un árbol y escrito un libro. Lo de tener un niño lo dejo para otro momento, así que uno de mis futuros objetivos será hacerme con un MacBook.

Debo hacer un pequeño paréntesis en el blog ya que me acabo de enterar que mi serie favorita va a estrenar una película el 27 de noviembre en Estados unidos.

Se trata de Futurama la creación de Matt Groening (creador de Los Simpson) y David X. Cohen (guionista también de Los Simpson). Según Matt “Bender’s Big Score” será la primera de cuatro películas de Futurama que saldrán directamente en DVD. Las otras tres películas, según la web de thesimpsonsrp.com saldrán a lo largo del 2008 y se llamarán “The Beast With A Billion Backs”, “Bender’s Game” y “Into The Wild Green Yonder”.

El dvd además de la película contendrá algunos extras como un capítulo completo llamado “Todo El Mundo Quiere Al Hipnosapo” donde también lo podemos encontrar en el trailer incitándonos a comprar el dvd. La verdad sea dicha, a mí me ha convencido.

El argumento me recuerda vagamente a Farscape donde John Crichton posee el conocimiento de los agujeros de gusano.

A continuación os dejo un pequeño resumen y el trailer de la película.

Antes de la Navidad del 3007, la tripulación de Planet Express lucha por salvar el mundo de los aliens spammers nudistas de Internet, que mandan a Bender al pasado para robar los mayores tesoros de la humanidad.
El secreto de los viajes en el tiempo está tatuado en el trasero de Fry, Leela encuentra el amor verdadero, y Fry descubre un terrible secreto sobre su destino y su trasero.

Muchas veces me he encontrado con el problema de no recordar cómo era el código de un acento, el símbolo del euro o incluso la letra “ñ”.

Con el tiempo algunas de ellas se van memorizando, en cambio otras si no tienes una chuletilla a mano te llegas a volver loco intentando buscar el código o perdiendo algo de tiempo googleando hasta encontrarlo.

A continuación muestro en una tabla los carácteres más comunes que podemos encontrar:

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.

Hace unas semanas estaba yo navegando en horario laboral (como otras tantas veces) y casualmente caí en el blog de Rodrigo Duarte. Me entretuve leyendo un artículo y lo ví adecuado para empezar a dar vidilla a mi blog. Se trata de los 10 mandamientos del diseño en css, ideal para comenzar a poner los apartados de diseño web.

Este artículo explica las normas principales que no debemos olvidar a la hora de maquetar nuestra página web.

Espero que lo disfrutéis como yo lo he hecho.

Gracias Rodrigo

CSS: las tablas (o DIV) de la ley otro decálogo más — (Web)

Obviamente, nuestro viejo y querido Moisés estaba out con sus tablas de la ley.

En este caso, deberían ser los DIVs de la ley… o quizá no, ya que podríamos considerar los mandamientos como datos tabulados.

Por supuesto, como este tipo de decálogos dicen tener una función educativa, hay que enfocarse en aquello que más cuesta a quienes están pasando de tablas a CSS. Propongo lo siguiente.

1. Comprenderás tu código HTML lo mejor posible
2. No utilizarás clases en vano
3. Utilizarás la herencia para evitar la redundancia
4. No utilizarás ID a tontas y a locas
5. Utilizarás tablas donde corresponde. Sólo donde corresponde
6. No desearás los estilos de tu prójimo
7. Sólo utilizarás Explorer para probar compatibilidad
8. Utilizarás unidades relativas dentro de lo posible
9. No olvidarás la accesibilidad
10. Validarás tu HTML y tu CSS

Puede ser provechoso ir por partes:

Comprenderás tu código HTML lo mejor posible

Uno de lo principales problemas que hay a la hora de enseñar CSS es que para sacarle el jugo a los CSS se requiere entender bien el HTML. Muchas veces nos saltamos la enseñanza de HTML, y eso es aún posible al enseñar diagramación con tablas, pero si estamos enseñando estándares, creo que ya no procede.

Una de las cosas que requiere más reaprendizaje es entender el HTML desde el punto de vista de la estructura del documento, y separar lo visual de lo estructural.

No utilizarás clases en vano

Las clases son una solución súper fácil para asignar formato, pero con frecuencia se utilizan clases en ocasiones en las que es mucho más limpio y elegante utilizar la estructura del documento. Es un caso usual que se asigne una clase a un enlace de encabezado, por ejemplo, siendo que es más simple definir #encabezado a, por ejemplo, en vez de ir por la vida dando <a class=”encabezado” href=”blablabla”> en el HTML y definiendo .encabezado en la hoja de estilos.

Recordemos que la idea es siempre trabajar lo menos posible.

Utilizarás la herencia para evitar la redundancia

Mirando definiciones de CSS, he notado que es común al principio ir repitiendo mucha información redundante en los estilos.

Si ya tenemos definido que nuestra página utilizará Verdana, Arial, Helvetica, Sans-serif en el body, no es necesario irlo repitiendo en los encabezados, párrafos, enlaces, etc. Misma historia si tenemos el texto base definido en un tamaño de 0.9ems, no hay para que repetirlo. Es conveniente saber qué propiedades se heredan y utilizarlas.

Puede ser útil también trabajar en porcentajes de valores conocidos. Si definimos nuestro body con un tamaño de texto de —digamos— 12px (discutiblemente pecaminoso en sí mismo), podemos definir encabezados, listas, citas, etc. en porcentajes de ese tamaño, de tal forma que si modificamos el tamaño base, todo se ajusta proporcionalmente.

No utilizarás ID a tontas y a locas

Los ID son “nombres propios” de elementos de nuestra página, que nos permiten llamarlos “de tú” mediante el gato, o selector de ID.

Es una buena idea usar ID para nombrar elementos únicos en nuestra página.

No es una buena idea usar ID para nombrar elementos que se repiten. Para eso están las clases.

También es saludable utilizar nombres asociados con la función de los elementos, para facilitar su recordación cuando abramos el código ocho meses después.

Utilizarás tablas donde corresponde. Sólo donde corresponde

Según la ley del péndulo, en algún momento, cuando nos entendemos con los DIVs y dejamos de echar de menos a las tablas, es frecuente que pasemos por la etapa de negación de éstas.

No hay para qué. Las tablas tienen una función súper bien definida, y es la de presentar información tabular.

Si bien es posible reemplazar una tabla por una serie de DIVs artísticamente dispuestos, con flotaciones y cosas, no hay para qué. Las tablas tienen su nicho, y no hay para qué ser más papista que el papa.

Por supuesto, eso no quiere decir que la zonificación y diagramación general de un documento sea información tabular

No desearás los estilos de tu prójimo

Es súper saludable revisar código para ver cómo se solucionaron distintas cosas, y es lícito también inspirarnos en trabajos ajenos, pero de ahí a copiar/pegar/presentar como propio, la cosa no es tan lícita.

Todo lo que se postea en la web es probable, lo que no quiere decir que sea deseable.

Sólo utilizarás Explorer para probar compatibilidad

Este el el infaltable comentario de sectarismo gratuito, o casi.

Ya que millones de vacas no pueden estar equivocadas (lo que hace que el pasto sea rico, como parece mostrar el que la rúcula esté de moda), Explorer es el navegador más usado, aunque no se ajusta a estándar.

Alguien puede citar al papa Zacarías, pero el hecho es que hay un estándar (el W3C) y Explorer no se conforma a él, si bien se supone que Explorer 7 sí lo hace.

Hay que hacer una serie de malabares para que Explorer haga lo que se supone que haga, incluyendo una serie de hacks que implican crear estilos “sólo Explorer”.

Para eso son los estándares: para que no se apliquen.

Utilizarás unidades relativas dentro de lo posible

Probablemente este mandamiendo causará ronchas en la feligesía. En pro de la accesibilidad, todo debería estar definido en unidades relativas (ems o porcentaje) y no en unidades absolutas (píxeles). De esa forma, los usuarios que requieran ampliar los contenidos podrán hacerlo en forma armoniosa sin que el contenido definido en píxeles cause resultados impredecibles.

Es un cacho no usar píxeles, en mi humilde opinión, pero es posible.

No olvidarás la accesibilidad

Una de las gracias de los CSS es que dejan la puerta abierta a la accesibilidad, desde el hecho de poder adjuntar distintas hojas de estilos para distintos medios (impresoras Braille, handhelds, etc.) Sería una pena dejar de lado algo tan importante como es la accesibilidad, siendo que te la pasan en bandeja.

Validarás tu HTML y tu CSS

Y por último, validar.

• Dreamweaver valida.
• Otras herramientas validan.
• Existen herramientas de validación gratuitas en línea.
• La validación nos permite asegurarnos de que nuestro código se ajuste al formato que dice tener (tanto el (X)HTML como el CSS) y nos permite prevenir errores.

Ongi etorri!

Sé que ha costado, que llevo tiempo detrás intentando publicarlo, que hay gente esperando ver a la criatura, y aquí está.
Después de unas semanitas de espera, puliendo algunos detalles y peleándome con navegadores os presento mi blog.
Me refiero a él como “Riñón” ya que me ha costado uno sacarlo adelante.

Pero… ¿Por qué este blog y no otro?
Siempre he sido la típica persona que lleva con humor la vida buscando el lado positivo y echando unas risas siempre que el momento me lo permite. ¿Por qué no hacer mi blog igual?
Por una parte quiero mostrar tutoriales y pequeños trucos del diseño en css, problemas de la vida cotidiana que me he ido encontrando, resolviendo o me han ayudado a solucionarlo. Por otra parte enseñar el lado friki de la vida, ya que todos, aunque esté muy oculto tenemos uno en nuestro interior y si somos capaces de combinar ambos diseño-freak, daría como resultado algo muy divertido.

Y… ¿Qué ofrezco?
No ofrezco reflexiones interesantes, respuestas a preguntas imposibles o soluciones inmediatas.
Ofrezco ayuda para todo aquel que se encuentre estancado por que un navegador le deja un espacio inexistente, por que a un link no se le aplica un color determinado, por que dos columnas en nuestra página se superponen cuando no deberían hacerlo o incluso para esos momentos en los que estamos tan agobiados que necesitamos desconectar viendo algún vídeo o foto graciosa.

Pero… ¿Tú quién eres?
Antes de empezar a llenar este blog de posts creo que debería presentarme.
Mi nombre es Iker Cortabarría. Soy un joven diseñador de 27 años que ha tardado en unirse a la comunidad del blog, pero… más vale tarde que nunca ¿no?
Llevo dedicando tiempo al diseño web y a todo lo relacionado con ello con buenas y malas opiniones.
Espero que os guste y que lo disfrutéis.