Nunca perdáis el contacto con el suelo, porque sólo así tendréis una idea aproximada de vuestra estatura.

Antonio Machado

Extensiones de Firefox para el desarrollo web

Cuando estoy realizando la maquetación de un sitio web siempre voy comprobando “el como va quedando” en Firefox. Cualquiera puede preguntar: ¿Porque con ese navegador y no con otro?. Por las extensiones, así de simple.

Tengo que decir que siento predilección por Firefox, pero también reconozco que tiene sus pegas (como la RAM que puede llegar a devorar) y que hay más opciones igual de válidas (de hecho las tengo instaladas casi todas ). Pero ninguno hasta ahora me ofrece la posibilidad de ampliar tanto las funciones del navegador como lo hace Firefox con sus extensiones, y eso a la hora de desarrollar un sitio web puede llegar a ahorrarte mucho tiempo.

Es más, la gente de Mozilla creó un recopilatorio de extensiones llamado Web Developer’s Toolbox con muchas extensiones capaces de ahorrarte tiempo y dolores de cabeza en esto del desarrollo web. Yo tengo mi propio recopilatorio específico o por llamarlo de otra manera mi lista de extensiones favoritas para el desarrollo web.

Seguir leyendo →

Twitter en tu blog sin usar ningun plugin

Otro post rescatado, aunque aun sobrevive en la cache de google.

Si quieres agregar Twitter a tu blog, puedes encontrar multitud de plugins que te permitirán hacerlo fácilmente, sin embargo lo que mucha gente desconoce es que es igualmente sencillo (si no más) y bastante más rápido hacerlo mediante código HTML.

El código en cuestión nos lo facilitan en la propia web de Twitter.

La parte de código que se muestra a continuación debemos colocarla en el lugar de nuestro blog/web donde deseamos que aparezcan nuestros tuiteos.

1
2
3
4

<div id="twitter_div">
    <h2 class="twitter-title">Twitter</h2>
    <ul id="twitter_update_list"></ul>
</div>

Con esto, estamos creando una capa (div) que contiene una cabecera (h2) y una lista con nuestros tuiteos (ul), por lo que podremos personalizar fácilmente su apariencia mediante CSS.

Pero el código anterior no funcionara correctamente sin incluir esta otra parte:

1
2

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USER.json?callback=twitterCallback2&count=X"></script>

Esta última parte es un javascript que recoge los datos de nuestro perfil en Twitter y los coloca en la lista de antes (ul). Aquí debemos configurar 2 parámetros:

1. USER: nuestro nombre de usuario en Twitter
2. count=X: sustituyendo la X por el número de actualizaciones que queramos mostrar

Por último añadir que esta parte del código es recomendable ponerla al final del todo de nuestra página, justo antes de la etiqueta </body> para evitar retrasar el tiempo de carga de nuestra web y posibles errores si Twitter se encuentra caído.

Letra capital con CSS

Desde hace algún tiempo quería poner algunas citas (o frases celebres) en el blog. Pero un post de unas dos lineas (a lo sumo tres) no quedaba visualmente demasiado bien, pero poniendo la primera letra como una letra capital, la cosa mejora mucho.

Tan solo son necesarias unas lineas de CSS y una class específica para las citas en cuestión:

1
2
3
4
5
6

.cita:first-letter {
    font-size: 3em;
    line-height: 0.9em;
    float: left;
    margin: .1em;
    }

.cita, selecciona los párrafos con class=”cita” que pueda haber en la página, esto junto con el first-letter lo que hace es seleccionar la primera letra de dichos párrafos para aplicar las propiedades CSS necesarias.

El resultado puedes verlo en los dos post anteriores .

Cuando apuntes con el dedo, recuerda que otros tres dedos te señalan a ti.

Proverbio ingles