Archive | código

Precargar imagenes con CSS


Una buena (y accesible) opción siqueremos evitar sobrecargar el servidor con elementos javascript es la de añadir por medio del lenguaje CSS la precarga de aquellas imágenes que necesitemos para la página, normalmente para utilizarlas como reemplazos en el hover. Podríamos añadir un código como este a nuestro archivo CSS:


a { background: url(image_hover.gif); }
a:link { background: url(image_default.gif); }
a:hover,
a:focus { background: url(image_hover.gif); }

Y ya que hablamos de imágenes y CSS otra opción muy vistosa es la de utilizar una pequeña imagen para que se muestren mientras las imágenes se van cargando en la página, como por ejemplo esta:

Loading

Para ello sólo tenemos que añadir en nuetsro archivo CSS el siguente código y añadir la clase preload a las imagenes en las que queramos dar una sensación de ‘precarga’.


img.preload {
border: 1px solid #000; /* Borde opcional, si no lo queremos basta con borrar la linea o ponerlo a cero */
background: url("/ruta_de_la_imagen/loading.gif") no-repeat center center;
}

Posted in código, cssComments (1)

Videos del Google Developer Day 2007


googlegears.PNGEl Google Developer Day es una serie de conferencias internacionales que reune miles de programadores en todo el mundo. La edición del 2007 se ha celebrado esta semana.

Entre las novedaees más importantes destaca la presentación de Google Gears, un plugin open source para el navegador que permite desarrollar aplicaciones capaces de funcionar sin conexión a Internet utilizando APIs JavaScript. Google Gears es multiplataforma (funciona en Linux, Windows y Mac) y compatible con Internet Explorer 6.0+ y Firefox 1.5+.

Si no pudiste asistir a las conferencias aquí tienes un enlace donde poder verlas gracias a Youtube.

Google Developer Day 2007

Posted in buscadores, código, VideoComments (0)

Quitar los bordes automáticos al hacer clic en un enlace


Seguramente os habréis fijado que a algunos elementos al funcionar como enlace dejan un nada atractivo reborde punteado tras hacer click. Se trata de un problema que afecta sobre todo a enlaces sobre imágenes.

Para solucionar esto podemos recurrir al siguiente código en nuestra hoja de estilos css:

a {outline:0;}

Sin embargo este truco no funciona bien en Internet Explorer, por lo que para este navegador podemos especificar una regla general que deje los bordes a 0.

Via: Anieto2k

Posted in código, css, diseño webComments (1)

Autodiscovery: Enviar a los buscadores el Sitemap de la página web mediante el robots.txt


Hace ya tiempo que los archivos sitemap se han postulado como una de las mejores formas de indicar a los buscadores el contenido exacto de nuestras páginas, aunque con la pega de que había que enviarlos a mano. Sin embargo ahora es posible indicar a los 4 principales buscadores (Google, Yahoo!, MSN Live Search y Ask.com) la ubicación de tu archivo sitemap mediante el archivo robots.txt añadiendo la siguiente línea con los datos de tu web:

Sitemap: http://www.ponaquituweb.com/sitemap.xml

Por una vez los buscadores se han puesto de acuerdo en aplicar un ‘estandar’ que facilite la vida a los desarrolladores web y SEOs.

Posted in buscadores, código, diseño web, google, posicionamiento, SEOComments (0)

La forma correcta y usable de abrir los enlaces en una ventana nueva


Hace algún tiempo comentamos la forma de abrir los enlaces en una nueva ventana sin utilizar el atributo target=”_blank”. Sin embargo esa opción nos planteaba algunos inconvenientes, como la imposibilidad de especificar el tamaño de la ventana o la inefectividad en aquellos casos en los que el usuario no tiene javascript activado en su navegador.

Para lanzar enlaces en una ventana nueva de forma usable, fácilmente indexable por Google, podemos utilizar el siguiente código:

<a href="/index.htm" target="_blank"
onClick="window.open(this.href, this.target, 'width=300,height=400');
return false;">
Lanzar correctamente</a>

De esta forma podemos especificar el tamaño de la nueva ventana. Además se sigue utilizando el atributo target, con lo que el popup seguirá funcionando aunque el navegador no tenga el lenguage javascript activado.

EDITADO: Si queréis especificar que la nueva ventana lleve barras de desplaamiento teneis que añadir el siguiente parámetro “scrollbars=yes”. En el siguiente ejemplo podeis ver como sería un enlace usable con barras de desplazamiento:

<a href="/index.htm" target="_blank"
onClick="window.open(this.href, this.target, 'scrollbars=yes;,width=300,height=400');
return false;">
Lanzar correctamente</a>

VIA: Nosolousabilidad.com

Posted in código, diseño web, javascript, SEO, tutoriales, XHTMLComments (1)