dirtysock

Estamos aqui agotando las últimas horas en la oficina antes de marcharnos oficialmente de vacaciones y como se nota que la mente se está adelantando un poco y está pensando en otras cosas cuando lo último que he picado ha sido:

<div class="boxContenido">
Lo que sea aqui
</boxContenido>

La cosa es que el compañero tampoco se queda corto y el tio ha puesto:

<p legend="Su texto aqui"></p>

Vamos, que para lo que queda, casi mejor lo dejamos y nos vamos ya.
Ya de paso aprovecho para desearos unas felices vacaciones a todos los que leais el blog! Hasta pronto!

Javascript sounds like it has something to do with Java. It Doesn’t.

In fact, Java is to JavaScript as ham is to hamster.

- De Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip
de Smashing Magazine de Brad Colbow.

P.S: El cómic es interesante, lectura recomendada.

Con motivo de la anterior entrada del blog, me animé a cambiar un poco el aspecto que tenian las blockquotes en el blog, así que con un poco de css i dos imágenes de unas comillas lo cambié al aspecto que se puede ver actualmente en el post anterior.

En primer lugar, con photoshop o cualquier otro editor, hay que crear dos imágenes con las comillas. Usaremos preferiblemente los formatos png o gif, para poder poner el fondo transparente y así si en el algun momento queremos cambiar el color de fondo de la blockquote, nos será mucho más facil. Tras 5 minutos de photoshop he aquí las comillas:

Una vez tenemos las imágenes, procedemos a escribir el css que dará estilo a la blockquote. Como vemos, fijamos el color nergro como fondo, para seguir con la imagen del blog, y colocamos la apertura de comillas ( background-image:url(images/bq1.png); ) arriba a la izquierda ( background-position:left top; ) y sin repetir ( background-repeat:no-repeat; ). Cambiamos también la fuente de texto y el tamaño para diferenciarlo del texto normal. Finalmente mediante margin, posicionamos el blockquote un poco separado de los márgenes del post, diferenciándolo también del resto del texto y mediante padding:1px 50px; dejamos espacio para que se vean las imágenes de las comillas.

Desde que empecé a trabajar en esto de las webs, hay una herramienta que se me hace indispensable, el Firebug.
Para el que no lo sepa es un plugin para Firefox, con el que puedes editar webs y su CSS en vivo ahorrandote de ir probando, recargar y demás.

El caso es que al abrir Firebug, aparece en la parte de abajo de la pantalla, cortándola en horizontal; así pues, con una pantalla 4:3 como la que tengo mi lugar de trabajo, todo perfecto, pero en casa, hace tiempo que abandoné el formato 4:3 y me pasé al panormámico, con lo que la division horizontal es un pelin más incómoda. Hasta hoy. Gracias a anieto2k he descubierto Widerbug, una alternativa de Firebug para pantallas panorámicas, dividiendo la pantalla en modo vertical, y haciendo el uso de Firebug infinitamente más comodo. Muchas gracias a anieto2k!