La peor parte de esto, es que todos los usuarios de dicho navegador están expuestos a multitud de peligros y problemas. Una muestra de ello es un simple código de CSS y HTML como este:

1

<style>*{position:relative}</style><table><input>

El código que se encuentra por encima de estas lineas, provoca un error en IE que hace que se cierre de manera automática…

Si usas (o tienes) IE6 y lo quieres comprobar, tan solo tienes que seguir el siguiente enlace y esperar el resultado: IE crash!

Sabiduría popular

Maqueta para lo más probable, para lo más pequeño, y para lo más salvaje.

Si en ninguno de estos tres casos se fastidia el diseño, puedes decir tranquilamente que tu código esta perfecto.

Otra cosa es que en el diseño este contemplado cada uno de ellos…

Traducción libre de un articulo publicado por CSS Globe con 8 soluciones muy sencillas a problemas que nos suelen dar muchos dolores de cabeza.

Las mejores soluciones son muchas veces las más simples. Una lista de 8 consejos (o trucos) con una sola propiedad CSS.

• Centrado vertical con line-height: Cuando tenemos un objeto contenedor con una altura fija, podemos usar la propiedad line-height para centrar verticalmente el contenido. Se puede comprobar en esta demo.

  line-height: 24px;

• Prevenir que el contenido sobredimensionado en objetos flotantes con un tamaño fijo rompa nuestra plantilla: Cuando el contenido (p.ej; una imagen panorámica) se coloca en un contenedor flotante con un tamaño fijo, es posible que descuadre nuestra plantilla. Para evitar esto, se puede usar este truco que ocultara parte del contenido pero mantendrá nuestra plantilla intacta.

  #main{overflow:hidden;}

• Evitar saltos de linea en los enlaces:

  a{white-space:nowrap;}

• Mostrar siempre el scroll vertical en Firefox: Firefox esconde por defecto el scroll vertical si la página no lo necesita. El “problema” es que si tienes páginas que precisen el scroll y otras que no, al pasar de unas a otras, nuestro diseño sufrirá un pequeño salto hacia la izquierda.

  html{overflow:-moz-scrollbars-vertical;}

• Central elementos horizontalmente: Con esta linea sera suficiente en todos los navegadores modernos para centrar horizontalmente cualquier elemento.

  margin:0 auto;

• Ocultar el scroll vertical de los textarea en IE: En IE se muestra por defecto el scroll vertical en los textarea. Para ocultarlos siempre que no sean necesarios con esta sola propiedad será suficiente.

  textarea{overflow:auto;}

• Forzar saltos de página al imprimir un documento: Con esta linea de código, podemos controla los sitios donde deseamos que haya un salto de página al imprimir nuestra (valga la redundancia) página.

  h2{page-break-before:always;}

• Ocultar los bordes de los enlaces activos:

  a:active, a:focus{outline:none;}

Espero que os sean de utilidad .

Cyclops rastrea entre los principales sitios de imágenes (al momento de escribir esta entrada en: BigStockPhoto, Cutcaster, Flickr, Fotolia, Photos.com, Shutterstock, stock.xchng y stockvault) en busca de imágenes libres y/o gratuitas (o de bajo coste) según lo establecido en la búsqueda.

Los resultados los muestra agrupados por pestañas según el sitio donde las haya encontrado. Fácil y sencillo.

Antonio Machado

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.

Como puedes ver en la imagen, en esta lista se encuentran:

• Web Developer: Multitud de herramientas y utilidades para el desarrollo web.
• Html Validator: Indica el número de errores y avisos en la validación de la página.
• ColorZilla: Selector de color, cuentagotas, zoom…
• FireFTP: Cliente ftp con gestor de diferentes cuentas en el propio navegador.
• TAW3 en un clic: Con un simple clic puedes hacerte una idea de la accesibilidad de la página.
• Firebug: Permite editar, depurar y monitorear CSS, HTML y JavaScript en cualquier página web.
• YSlow: Para analizar y optimizar los tiempos de carga.
• Dust-Me Selectors: Te muestra una lista de las propiedades CSS definidas en la(s) hoja(s) de estilo y que no están siendo usadas.
• FireShot: Para crear screenshots (completos o solo la parte visible) de la página.
• Pixel Perfect: Superpone el diseño sobre el resultado de la maquetación.
• CodeBurner for Firebug: Una extensión para Firebug que amplia las referencias de CSS y HTML.
• Browser View Plus: Añade opciones al menú contextual (o botones en la barra de menú) para abrir la página o enlaces en el navegador que prefieras.

En total 12 extensiones, bueno, ahora que recuerdo en realidad son 12+1 (13 que no soy supersticioso ) con IE Tab, que con un clic muestra la página usando el motor de IE. Si te interesa puedes ver y descargar el recopilatorio Diseño y maquetación web completo desde la web de Mozilla.

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.

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 .

Proverbio ingles