Archivo

Archivo para la categoría ‘programación’

Lightbox 2 no funciona en Internet Explorer 9

Jueves, 14 de Abril de 2011


Así de rotundo es, tal como dice el título de este artículo: Lightbox 2 no funciona en Internet Explorer 9. El recién estrenado navegador de Microsoft no se lleva bien con Lightbox 2, provocando que muchas webs no funcionen correctamente si navegamos con Internet Explorer 9. Y con el resto de navegadores? Pues sin problemas!!!

Lightbox es una aplicación JavaScript que permite crear diálogos modales como puede ser la clásica visión ampliada de una foto de una manera muy sencilla y rápida.

Bueno, vamos al grano… No puede ser que ahora nuestras webs no funcionen con el navegador más nuevo de Microsoft. Y no nos pueden obligar a cambiar código por eso! Así que aquí presento una solución fácil y rápida:

  • Insertar dentro de los tags “head” la siguiente línea: <meta http-equiv=”X-UA-Compatible” content=”IE=7″ />

De esta manera habilitaremos la compatibilidad con Internet Explorer 7 (en el que no había problemas con Lightbox, al igual que la versión 8) y quedará todo resuelto.

Esta solución también es válida para otros problemas parecidos con códigos JavaScript.

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, web , ,

Primero SEO, después desarrollo?

Martes, 25 de Enero de 2011


Leyendo uno de los muchos artículos que ojeo diariamente, di con un artículo de Search Engine Guide que comentaba que primero hay que realizar el trabajo SEO y después el desarrollo de la web.

Desde aquí os quiero invitar a leer el artículo y comentarlo.

En mi opinión, yo no seguiría esos pasos. Si bien es cierto que desde el inicio del proyecto es recomendable tener claro si el cliente quiere que su web esté trabajada a nivel SEO o no, no veo la obligatoriedad de seguir ese orden: primero SEO y después desarrollo.

La web la puedes desarrollar teniendo en cuenta aspectos SEO y de usabilidad (es lo recomendable), y una vez está desarrollada y tienes en tu poder los contenidos, entonces trabajar a fondo el aspecto SEO. Este orden es el que a mi me gusta aplicar…

Sería muy interesante y fructífero recibir vuestros comentarios al respecto.

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, seo, web ,

Evita spam en tu mail con CSS

Jueves, 14 de Octubre de 2010

Hace unas semanas leí un artículo muy interesante en CSSBlog.es sobre cómo evitar spam invirtiendo tu dirección de mail con CSS.

Muchos habréis recibido spam en vuestro correo, y gran parte de este spam viene dado por robots que cogen vuestra dirección de email publicada en vuestra web o blog. Con este pequeño truco de CSS se consigue evitar que estos robots lean vuestra dirección de email.

Vamos con el código CSS que debemos utilizar, creando una clase:
[css]
span.antispam { direction: rtl; unicode-bidi:bidi-override; }
[/css]

Ahora simplemente publicamos nuestro email utilizando esa clase creada en CSS:
[html]
email@email.com
[/html]

Con este simple truco evitaremos ese spam tan molesto. Podéis seguir CSSBlog también a través de Twitter: @cssblog_es

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, web ,

CarouFredSel: carrusel de imágenes con jQuery (avanzado)

Sábado, 9 de Octubre de 2010

En el anterior artículo pudimos ver cómo crear un carrusel de imágenes con un plugin de jQuery: CarouFredSel. Se trataba de un sencillo pero atractivo carrusel de imágenes. Hoy profundizaremos más en CarouFredSel, puesto que este plugin da más de sí.

Si recordamos el ejemplo de carrusel de imágenes creado en el artículo anterior, sólo pusimos un parámetro de scroll para programar cada cuantos segundos se desplazan las imágenes. Hoy realizaremos un ejemplo más avanzado para conseguir un carrusel más complejo y profesional.

Un ejemplo interesante es un carrusel de imágenes utilizando también lightbox. Para este ejemplo en concreto utilizaremos como lightbox el plugin prettyPhoto y podéis descargarlo desde la web de  no-margin-for-errors.

Lo primero que haremos una vez descargado es realizar la inclusión de la librería javascript de prettyPhoto:

[js]

[/js] A continuación escribiremos el código javascript en el que utilizaremos carouFredSel unido al plugin prettyPhoto: [js]
[/js]

Y el código html quedará de esta manera:
[html]

[/html]

Con todo esto sería suficiente para que funcione correctamente un carrusel de imágenes en el que clickando sobre una imagen se abre un lightbox.

Podemos añadir un poquito de estilo a este carrusel complementando nuestro archivo css con este poco de código:
[css]
.image_carousel {
padding: 15px 0 15px 40px;
}
.image_carousel img {
border: 1px solid #ccc;
background-color: white;
padding: 9px;
margin: 7px;
display: block;
float: left;
}
.image_carousel a {
display: block;
float: left;
}
.clearfix {
float: none;
clear: both;
}
[/css]

Y con esto finalizo este carrusel de imágenes avanzado. Para que quede más profesional aún, os recomiendo que el tamaño de las fotos que salen en el carrusel sea más pequeño que el tamaño de las fotos que salen en el lightbox.

Recordad que podéis consultar la web de carouFredSel para ver más ejemplos

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, web , , ,

CarouFredSel: carrusel de imágenes con jQuery

Martes, 28 de Septiembre de 2010

Después de haber visto 2 sliders de imágenes hechas con jQuery y Orbit, pasaré a ver cómo crear un carrusel de imágenes con jQuery basándome en carouFredSel.

CarouFredSel es un plugin de jQuery que nos ayuda a realizar un carrusel de imágenes a partir de un código HTML. El carrusel lo podemos hacer en vertical u horizontal, automático o clickando en los extremos…

Antes de nada tendremos que descargar este plugin. Una vez descargado lo guardaremos en la carpeta donde almacenemos los ficheros javascript (luego lo referenciaremos).

Así que manos a la obra y empecemos ya con el código… Para empezar, añadiremos a un documento HTML con un DOCTYPE válido la inclusión de las librerías javaScript que necesitaremos. Esto lo añadiremos dentro del <Head>:

[js]


[/js]

Si queremos que nuestro carrusel pueda realizar todo tipo de transiciones, podemos añadir también lo siguiente:

[js]
[/js] Y si queremos añadir también pausas automáticas cuando el usuario se encuentra inactivo por un tiempo determinado, añadiremos: [js]
[/js]

Ahora añadiremos el código que convierte nuestras imágenes en un carrusel automático:
[js]

[/js]
En este código anterior hacemos referencia al nombre del DIV donde se alojarán las fotos a mostrar.

Por último pasaremos a crear el código HTML donde listaremos las imágenes a mostrar. Se puede hacer con un DIV o bien con una lista (yo lo haré con un DIV):
[html]

imagen1
imagenes 2
imagenes 3
imagenes 4
imagenes 5
imagenes 6

[/html]

Es importante definir los tamaños de las imágenes para que todo funcione correctamente. Y también es conveniente completar todo esto con un buen estilo de CSS.

Ahora sólo nos queda probar este ejemplo. Podéis visualizarlo en http://www.alexmontes.es/carrusel.html

También podéis consultar toda la documentación existente en la página web del plugin carouFredSel.

En mi próximo artículo profundizaré en el plugin carouFredSel, puesto que proporciona muchas configuraciones que nos permitirán personalizarlo al 100%.

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, web , ,