Navegadores

Internet Explorer: Matando diseños CSS

Publicado por Claudia en Octubre 26, 2008

Aproximadamente el 70% de los cibernautas en el mundo usa Internet Explorer de Microsoft, es una realidad. No es que Explorer sea mejor, claro, simplemente es “lo que hay” siempre en una computadora, porque viene con Windows; y tampoco es que sea gratis, porque sólo sirve para Windows, y al utilizar el software de Microsoft pagamos por el derecho a usar Explorer también.

Quienes usamos Mozilla Firefox lo preferimos porque es “más rápido, seguro y personalizable”, pero hay muchísima gente que no sabe elegir, porque no tiene idea que existe Firefox, o no sabe lo que es. Yo lo escogí como mi navegador principal (y único) hace más de un año, porque me facilita enormemente la vida, aun cuando vi que las últimas versiones de IE venían con un “nuevo” sistema de pestañas copiado de Firefox. Explorer quedó ahí, olvidado, siempre como alternativa, pero ya no más.

¿Qué tiene Explorer que no tenga Firefox? La capacidad de arruinar un increíble diseño CSS, nada más. Como escribió Ryan en Dao by Design hace tiempo, es realmente doloroso crear un diseño en Firefox, que luego va a lucir desastroso en Internet Explorer, especialmente con versiones viejas de éste. Ryan incluso creó un script que avisa a los visitantes que están usando una versión obsoleta de IE (anterior a la 7).

Quienes odiamos IE,  concidimos en que los diseños se ven desconfigurados, no se ven imágenes png ni transparencias, o que hay imágenes que desaparecen, estén en el formato que estén. Según el centro de ayuda de Blogger (aunque no ocurre sólo en Blogger, sino en cualquier plantilla, esté alojada donde esté), “ello se debe a un error en la administración de elementos flotantes (las imágenes) de Internet Explorer dentro de elementos en posición relativa “.

Pero las explicaciones no son suficientes, porque ni el botón de compatibilidad de IE 8 arregla el problema (ya lo probé). ¿Qué hacer, entonces?

Las alternativas:

  • Espantar a los visitantes. Se puede hacer dejando un sitio tal cual, y poniendo en algún lado que “el sitio es compatible con Firefox solamente”, o con un script especial (como el de Ryan).
  • No usar imágenes en formato png, y hacer los cambios necesarios en la hoja de estilos.  Cambios por ahí, por allá… Un poco de ingenio, a ver si resulta.

Actualmente estoy haciendo cambios en el diseño de mi blog, para que sea compatible con Internet Explorer. Me pregunto si quienes usan sólo Firefox harán lo mismo. Después de todo, la mayoría de la gente usa sólo IE; y si un sitio no anda en IE, no importa qué tan bueno sea el diseño para Firefox o Chrome, porque simplemente (y muy lamentablemente) no sirve.

Blogger Templates

WP-Polaroid v2 Pink para Blogger

Publicado por Claudia en Octubre 26, 2008

Quedó linda, no? Es una plantilla para Wordpress, diseñada por Adii, convertida a Blogger por eBlogTemplates y pintada de rosado por mí, con las imágenes de la versión 2 que lanzó Adii para WP.

Características de WP-Polaroid v2 (Pink):

  • Tres columnas
  • Menú personalizable
  • Optimizada para adsense y otros anuncios
  • Incluye las polaroids para su modificación en Photoshop

Puede verse aquí y descargarse aquí.

*Hay cambios con respecto a la nueva versión orginal para Wordpress, pero como está se ve más bonita (por cierto, no hay demo de la plantilla para Wordpress). También arreglé la sección de los comentarios.

Para editar los anuncios de 125×125 píxeles, las fotos de flickr y las de los últimos comentarios, ir a Diseño/Edición de HTML/Expandir plantillas de artilugios y buscar los correspondientes códigos.

Para hacerlo más fácil y no tener que meterse en la edición de HTML:

Simplemente agregar texto o un código a cada widget, en Diseño/Elementos de la página.

Off topic: Me gustó tanto la plantilla (excepto por el fondo y el ancho de la columna principal, nada que no tenga arreglo), que la voy a usar para mi blog. Pero como en la vida hay que compartir, ahí está… Sería genial llenar la blogósfera de rosado.

Tags:
Blogger Templates

Kelleyroo Halloween Blogger Template

Publicado por Claudia en Octubre 26, 2008

DEMO | DOWNLOAD

ENGLISH:

This theme was originally designed for Wordpress by Kelleyroo but bloggerized by me. It’s her first theme for Wordpress. It’s a theme I personally like too much ’cause it’s simply, childlike and very cute.

Licence: Kelleyroo Halloween theme is under a Creative Commons Licence.

Instructions:

1. Make a backup of your old template (you could need it) and your widgets content.

2. Unzip the file and extract “kelleyroo-halloween.xml”.

3. Go to Layout/Edit HTML and upload the xml file. Do not copy and paste the text, it could be not well parsed. Save!

4. Change the text is next to “from”. All that you need to do is look for this code and change the word “GirlyBlogger”.

<div id="from">from <a>GirlyBlogger</a>!</div>

5. Add your widgets. To ad a searchform, create a new widget or gadget (Layout/page elements) and paste the following code:

<form id="searchform" action="/search" method="get">
<input id="s" class="txtField" name="q" size="17" type="text" />
<input id="searchsubmit" class="btnSearch" type="submit" value="Go!" />
</form>

6. Edit the menu bar by replacing your links on this code:

<li id='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
<li><a href='#'>About</a></li>

That’s all!

ESPAÑOL:

Esta plantilla fue diseñada originalmente para Wordpress por Kelleyroo, pero convertida a Blogger por mí. Personalmente me gusta mucho, porque es simple, un poquito infantil y linda.
Licencia: Creative Commons 3.0. Puedes distribuirla libremente y crear obras derivadas, siempre y cuando no remuevas el enlace del pie de página.

Instrucciones:

1. Haz una copia de tu plantilla vieja y del contenido de tus widgets (como archivo de texto).

2. Descomprime el archivo y extrae “kelleyroo-halloween.xml”.

3. Anda a Diseño/Edición de HTML y sube el archivo xml. No copies y pegues el texto, sólo sube el archivo. Guarda.

4. Cambia el texto que está al lado de “from” (mira más arriba). Puedes poner ahí tu nombre o el de tu blog. La palabra a reemplazar es “GirlyBlogger”, pero también puedes poner “por” en vez de “from”.

5. Añade tus widgets. Si quieres añadir un formulario de búsqueda, copia y pega el código que está más arriba (en inglés), justo en el paso 5. Si lo deseas, en el código puedes cambiar “Go!” por “Ir!”.

6. Modifica el menú. Para ello, tienes que buscar el código que está más arriba, justo en el paso 5, y cambiar tus links o añadir más, si es necesario.

Tags:
Hosting

Alternativa a Google pages

Publicado por Claudia en Octubre 26, 2008

Como ya se ha corrido la voz, a final de año nos quedamos sin Google pages. Pudo haber parecido un poco trágico al principio para quienes usamos Blogger y tenemos scripts alojados ahí (o bien usamos scripts que otros habían alojado antes), pero para todo hay solución.

La alternativa: Boxstr.

Photobucket

Características del sitio:

  • 5GB de almacenamiento
  • Permite archivos de hasta 1GB
  • Ancho de banda diario: 1GB

No sólo permite subir archivos javascript, sino también imágenes, documentos y música en forma totamente gratuita. Sólo es necesario registrarse. Lo único que no permite es poner archivos con copyright o cosas ilegales.

Si agregaste scripts en tu plantilla, probablemente estén alojados en Google pages, y no lo sepas. Yo, justo en este momento, tengo alojados tres scripts: uno en la plantilla, que me permite mostrar emoticonos en los comentarios; y el de Twitter y el de los últimos comentarios, que están entre los widgets del sidebar. De ellos, sólo tuve que reemplazar el primero, por hallarse en Google pages.

Procedí así:

  1. Busqué la palabra “javascript” en Diseño/Edición de HTML, y al lado izquierdo encontré esta dirección entre comillas, que es la que hay que reemplazar (no se reemplaza nada más): http://aditya.vm.googlepages.com/addSmiley.js
  2. Copié esa dirección en la barra de direcciones, y la guardé en mi escritorio.
  3. En mi cuenta Boxstr, cargué el archivo *.js (addSmiley.js, en este caso) desde mi escritorio.
  4. Reemplacé el enlace anterior en mi plantilla.
Tags:
Blogger

Adiós al error bX de Blogger

Publicado por Claudia en Octubre 1, 2008

Quienes usamos Blogger, tenemos que lidiar contra el molesto error del “código raro” de Blogger, que siempre empieza con bX, como por ejemplo, bX-fgmhye. Es realmente odioso, porque aparece al cambiar de plantilla, hacer cambios en la edición de html o los elementos, justo cuando uno menos se lo espera.

Hace más de un año, cuando empecé a usar Blogger, me preguntaba qué estaría haciendo mal, tanto así, que decidí mandar un mail a soporte de Blogger. ¡Y me respondieron! Pero justo en ese momento ya se había solucionado el error por arte de magia, así que la respuesta que obtuve no fue de gran ayuda. De hecho, aquí la tengo:

Mi solicitud de ayuda:

Subject: Error code

Item type: Blog gone

I can’t see my blog. I try to login, but I see this error code:
bX-fgmhye. I was using Adsense when I detected the problem. Please,
help me.

La respuesta:

Hi there,

Thanks for writing in. I checked your blog and the problem seems to be
resolved already. Please let us know if you continue to have any trouble
with it, though.

Sincerely,
Karl
The Blogger Team

El error de Blogger es tan, tan común, que sale más fácil tratar de resolverlo por uno mismo antes que contactarse con soporte. La espera puede ser tediosa, más cuando hay que contactarse en inglés. Aunque suele resolverse solo, y se va así como llega, si no queremos esperar que a nuestro querido blog se le pasen las mañanas, es mejor intentar por otras vías.

Solución 1:

Cambiar de navegador (visto en Blog and web) . Si usas Firefox, cambia a Explorer o Chrome mientras dura el error. Según mi experiencia, casi siempre funciona.

Solución 2:

Se me ocurrió borrar los artilugios que están de sobra (los que dice que están a punto de eliminarse) y que de todas maneras se eliminarían al cambiar de plantilla. Se puede hacer desde la edición de elementos o la de HTML (en el primer caso, hay que resfrescar la página luego). Muchas veces sí funciona, aun cuando no sea la causa principal del problema.

Solución 3:

Eliminar cookies manualmente o con un software como CCleaner. Pasa que el error se produce al cambiar de una cuenta Google a otra (visto en GosuBlogger). Yo he optado por hacerlo manualmente, para no complicarme más la vida, y lo hago así:

1. Con Firefox:

  • Herramientas /Opciones /Privacidad /Mostrar cookies /Eliminar todas las cookies
  • o bien Herramientas /Limpiar Datos Privados /Cookies

2. Con Explorer (lo odio, pero lo pongo para quienes lo usan):

  • Herramientas /Opciones de internet /General /Historial de Exploración /Eliminar

Voilá! Como decía un profesor mío, fácil y bonito.