Muchisima gente sigue usando Internet Explorer 6 como navegador, bien porque no conocen otra alternativa o por pereza/problemas a la hora de actualizarlo.

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 IE y lo quieres comprobar, tan solo tienes que seguir el siguiente enlace y esperar el resultado: IE crash!

Estaba escribiendo el CSS para IE 6 y menores del blog, sobre todo porque al usar tantas imágenes con extension .png el blog no se ve muy bien con esos navegadores. Hay muchas formas de conseguir que IE 6 e inferiores (hasta v. 5) sean capaces de mostrar correctamente este formato de imagen.

El problema que tiene el diseño de este blog es que usa pngs como background de algunos elementos y en varios de ellos con la propiedad repeat. Y es aquí donde todas las soluciones que conocía fallaban.

Haciendo un descanso, en el lector de feeds, veo vía aNieto2k que TwinHelix ha publicado una nueva versión de su PNGFix que soporta el uso de pngs como background y el uso de la propiedad repeat.

Para usarlo:

• Descargar la última versión del PNGFix
• Subir los archivos iepngfix.htc y blank.gif a tu servidor.
• Añadir el siguiente código en tu CSS:

 img, div { behavior: url(iepngfix.htc) }

Si vamos a usar un png como fondo de enlaces, inputs, botones… hay que añadir estos elementos en la declaración de CSS:

 img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }

Stumbleuponando (bonito palabro me acabo de inventar ) me he encontrado un interesante editor online de HTML con el que poder ir viendo al instante las modificaciones que realicemos en nuestro código.

La página esta dividida en 2 frames en el superior es en el que vas escribiendo el código de tu página, y el resultado va apareciendo automáticamente en el frame inferior. Pero lo que le hace para mi realmente interesante es la posibilidad de definir también las CSS de cada uno de los elementos (capas, párrafos, listas, …)

Para los vaguetes, les dejo un código con varios ejemplos de HTML y con propiedades CSS que copiar y pegar para probar el editor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<style type="text/css">
  h1 {
  text-decoration:underline;
  color: gold;
  }
  ul {
  border: 3px dashed #333;
  background: #666;
  color: white;
  }
</style>
<h1>Titulo de prueba</h1>
<p>Lorem ipsum dolor sit amet...</p>
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
<del>texto tachado</del>
<blockquote>una cita: Lorem ipsum</blockquote>

No solo he estado modificando el aspecto de este blog (todavía me quedan algunos detalles…), también he realizado un nuevo diseño para mi blog de fotografía.

En un principio había pensado en modificar el archi-conocido tema CSS-Gallery, pero finalmente decidí realizar el mio propio:

Esta realizado con XHTML y CSS válidos, usando WordPress como CMS y MooTools para los efectos añadidos. El plugin de valoración de fotografías es el WP-PostRatings.

Como podéis ver, la estructura es muy similar a CSS-Gallery, en mi caso pensé que el color negro en el fondo ayudaría a destacar mejor las fotografías publicadas.

El menú de la cabecera tan solo permite acceder a las 4 categorías principales y realizar búsquedas, en el menú lateral aparecerán las diferentes categorías según se vayan creando. También incluí una opción de valorar las fotos (al igual que en el tema que use como inspiración).

Cada fotografía publicada aparece en un recuadro con el título, la valoración y una esquina levantada cuyo color es el de la categoría a la que pertenece. Haciendo clic sobre la imagen, esta se abre a mayor tamaño en un lightbox.

Haciendo clic en el título se puede acceder a la entrada en concreto de la fotografía, en la que aparecen mas datos sobre la toma (ISO, velocidad, etc…) ,aunque todavía no los he añadido. La imagen aparece a un tamaño un poco mayor y con un leve reflejo que no se si dejar o no . Al hacer clic sobre ella también se abre a mayor tamaño en un lightbox.

¿Opiniones, fallos, mejoras…?

Ah! por cierto, quiero aprovechar y desde aquí dar las gracias a 2 sitios que me han servido de ayuda a la hora de llevar a cabo este tema: aNieto2K y AyudaWordPress

Si quieres agregar Twitter a tu blog, puedes encontrar multitud de plugins que te permitirán hacerlo facilmente, 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.

Ya de paso aprovecho y os dejo el Twitter de David Barredo (el mío) para todo aquel que le interese

Por cierto… ¿Twitter se cae? jajajaja