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:
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:
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;
}
A la hora de realizar diseños siempre es recomendable comenzar con una buena base de imágenes. Aaquí tenéis un par de enlaces donde conseguir imágenes de calidad y libres de derechos:
Public Domain Photos: Imágenes de calidad, algunas incluso con fondo recortado. Sin embargo estan en resolución media, así que servirán para diseños web pero dificilmente para trabajos de imprenta.
Open Media: una recopilación de páginas webs que ofrecen imágenes libres de derechos. Aquñi podemos encontrar desde imágenes de dominio público, patrones, cliparts…
A la hora de realizar diseños web es imprescindible ir probando cómo se ven nuestras páginas en los navegadores y el funcionamiento de nuestros scripts, sobre todo si estamos trabajando con hojas de estilos CSS. En Mozilla Firefox tenemos disponible un plugin llamado Web Developer Toolbar, que nos añade una gran cantidad de herramientas para diseñadores web. Sin embargo también debemos comprobar cómo se visualizan las paginas en Internet Explorer, y muchas veces se echa en falta alguna ayuda adicional.
Para ayudar al depurado de las web en Internet Explorer tenemos disponible el plugin Internet Explorer Developer Toolbar que nos permite las siguientes operaciones:
Explorar y modificar el Modelo de Objeto de Documento (DOM) de una web.
Localizar y seleccionar elementos específicos en una pagina.
Deshabilitar selectivamente diversos parámetros de Internet Explorer.
Ver las clases de los objetos HTML, los ID, y detalles como las rutas de los enlaces y las teclas de acceso.
Marcar los bordes de las tablas, celdas, imágenes o etiquetas.
Muestra las dimensiones de las imágenes, su tamaño, la ruta y el texto alternativo (ALT).
Cambios de resolución del navegador.
Limpiar selectivamente la caché del navegador y las cookies.
Mostrar una regla de diseñador para alinear y medir los objetos en las páginas.
Encontrar las reglas de estilo usadas para un elemento
Ver el código fuente del HTML y el CSS formateado y coloreado.
El 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 ha desarrollado un nuevo servicio que permite navegar por su callejero en Google Maps como si fueras un peatón, esto es, visualizando fotografías panorámicas en 3D. El servicio ahora mismo sólo funciona en algunas ciudades importantes de Estados Unidos y tiene un problema añadido: ni siquiera se puede visualizar si tu dirección IP no es de Estados Unidos.
Sin embargo existe una solucion para poder utilizar el servicio desde fuera de Estados Unidos. Tan sólo hay que añadir &gl=us a la URL de Google Maps. Para que podais comprobarlo os dejamos unas cuantas direcciones para que vayáis navegando.
Para poder visualizar calles es necesario colocar el muñequito sobre alguna de las calles marcadas en azul, que son las que tienen disponible esta característica.
La ICANN ha confirmado varios nuevos dominios de primer nivel podrían estar disponibles para el verano de 2008, invitando a la comunidad a participar en los procedimientos para su creación.
Desde la implantación de los dominios .info y .biz para uso general en el año 2000 la ICANN sólo ha aprobado seis dominios regionales y específicos para industria, incluyendo el .asia, .museum y el .travel. Aunque la ICANN no especificó más detalles sobre los nuevos dominios, confirmó que trabajará para que el proceso sea más sencillo y los nuevos TLDs puedan ser creados más rápidamente en el futuro.
Por su parte la industria se ha quejado de que los nuevos dominios sólo servirán para acrecentar el cybersquatting, y se ha apuntado que los dominios .biz y .info no han tenido el éxito en la implantación que se había augurado.
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.
Muchas veces la diferencia entre un diseño soso y un diseño más animado reside en la adición de elementos decorativos. Si queremos disponer de un buen catálogo de pinceles gratis para Photoshop podemos acudir a PSbrushes, donde los tienen muy bien organizados para su descarga.
Google ha desarrollado nuevas herramientas para ayudar a los webmasters a quitar contenido de sus páginas web del índice del buscador, algo que tradicionalmente se hacía con el fichero robots.txt. La nueva herramientas, accesible a través de Google Webmasters, permite además la copia en cache de las páginas e incluso retirar información que consideren personal o confidencial.
La ventaja de la herramienta de eliminación de contenido de Google es el proceso de desaparición de la página puede tardar entre 3 y 5 días, mientras que si utilizamos herramientas tradicionales como el robots.txt o las etiquetas META puede tardar incluso semanas en ocurrir.
La nueva herramienta puede encontrarse en Google Webmaster Central, accesible desde cuentas de Google verificadas. Una vez registrados con nuestra cuenta hay que seleccionar el sitio al que queremos retirar páginas y después entrar en Diagnóstico, donde encontraremos la opción de Eliminaciones de URL.
Al cursar una nueva solicitud de eliminación se cargará una pantalla con las siguientes cuatro opciones:
URL individuales: para que determinadas páginas individuales no aparezcan en el índice de Google.
Un directorio y todos los subdirectorios de su sitio web: para eliminar todos los archivos y subdirectorios de un directorio concreto de la página para que no aparezcan en los resultados de búsqueda de Google
Su sitio web íntegro: para eliminar la página web completa y que no aparezca en los resultados de búsqueda de Google
Copia guardada en la caché de un resultado de búsqueda de Google: para eliminar la copia en caché y la descripción de una página obsoleta o a la que se haya añadido una etiqueta meta noarchive
Para perificar la petición de eliminación Google necesita ver una etiqueta meta robots en la cabecera de la página con el valor “noarchive”. Una vez lo hayamos puesto en la página que queremos eliminar y lo hayamos subido al sitio pulsamos en ‘Enviar’ y el proceso habrá comenzado.
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.
Para aquellos que están obsesionados con el posicionamiento de sus páginas en los resultados de las búsquedas de Google está disponible Free Monitor for Google, una herramienta que nos permite monitorizar cadenas de búsquedas y gestionar periódicamente su aparición en los resultados.
Su uso es tan sencillo como especificar la página web, establecer las palabras clave o cadenas de palabras que queremos monitorizar en Google y darle a buscar para obtener el resultado. Free Monitor for Google ofrece además la ventaja de permitirte cambiar la versión de Google por países, lo que nos permite delimitar mucho más las búsquedas.
ScribeFire es un plugin para Firefox que facilita la labor de administrar un blog. ScribeFire (anteriormente conocido como Performancing para Firefox) se integra con el navegador ofrewciendo numerosas herramientas adicionales. La ventaja de utilizar ScribeFire es que puede editar tus post mientras vas navegando por Internet. Para activar Scribefire tan sólo hay que pulsar F8 en la ventana de Firefox.
ScribeFire (previously Performancing for Firefox) is a full-featured blog editor that integrates with your browser and lets you easily post to your blog. You can drag and drop formatted text from pages you are browsing, take notes, and post to your blog.
El sistema Google Co-op de búsquedas personalizadas esta promoviendo proyectos muy interesantes. Entre ellos me ha llamado la atención Sparkl, un buscador especializado en diseño web. Cuando se hace una búsqueda en Sparkl el motor indaga entre más de 1400 sitios relacionados con el desarrollo web para ofrecer los resultados.
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:
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:
Si estás buscando inspiración para un proyecto y tienes en mente un sitio espectacular en flash Favourite Website Awards es lo que estás buscando. Se trata de una recopilación de páginas web con un diseño realmente innovador, generalmente basadas en flash. En FWA es fácil ver como desaparecen los límites a la creatividad cuando se utilizan las herramientas apropiadas.
La gente de Google continua añadiendo características al Centro para Webmasters de Google. La última es la posibilidad de mostrar cómo te enlazan otras páginas, mostrando las palabras más usadas en el anchor text de los enlaces hacia tu web.
Los pasos para ver esta información son:
(1) Entrar en los Sitemaps del Centro para Webmasters de Google
(2) Pulsar en estadísticas en la parte superior
(3) Pulsar en Análisis de página a la izquierda
(4) Mirar a la parte inferior derecha de la pantalla, donde dice “Links externos hacia tu sitio”
Este informe, que se puede descargar mediante un boton debajo de la tabla, muestra los anchor text de enlaces hacia tu sitio más populares.
El SPAM, o correo basura, es uno de las mayores inconvenientes que suele encontrarse cualquiera que tenga un Blog. La formas más comunes de recibir SPAM son a través de los comentarios de las noticias, a través de los trackbacks y a través del formulario de contacto. Si eres de los que usan Wordpress para administrar su blog aquí tienes unas cuantas soluciones para acabar para siempre con el spam:
SPAM en los comentarios
1. Akismet: Ésta es probablemente la mejor solución antispam que se puede instalar en Wordpress. Para poder utilizarla necesitarás una clave API gratuíta que puedes conseguir registrándote en Wordpress.com. Una vez te hayas registrado recibirás la clave en tu e-mail y podrás instalar el plugin de Akismet para Wordpress.
2. Comentarios matemáticos: Este plugin pide al usuario que responda a una sencilla pregunta matemática para determinar si es una máquina o un usuario real, en una especie de Test de turing. El plugin puede descargarse aquí.
SPAM en los Trackbacks
3. Plugin para validación de trackbacks: Verifica los trackbacks analizando la página fuente y comprobando que tiene un enlace hacia tu página. En caso contrario deja el trackback en cola de moderacion. El Simple Trackback Validation Plugin puede descargarse aquí.
SPAM en los Formularios de Contacto
4. Plugin mejorado de contacto para Wordpress: El Enhanced WordPress contactform controla la página desde la que realmente se envia la petición y, en caso de que se haya llegado a través de un motor de búsqueda, las palabras clave utilizadas. El plugin puede descargarse aquí.
Una vez que se ha terminado una página web es conveniente realizar ciertas tareas complementarias que nos ayudarán en el posionamiento en buscadores. Una de esas tareas es la comprobación de links rotos, tanto internos como externos. Ya que comprobar los enlaces a mano puede ser una tarea harto tediosa podemos contar con herramientas de gran potencia como las Herramientas de Google para Webmasters, o una algo más clásica y que voy a tratar aquí: Xenu’s Link Sleuth
Xenu’s Link Sleuth analiza páginas web en búsqueda de enlaces rotos, verificando tanto enlaces normales como imágenes, marcos, plug-ins, fondos, mapas de imágenes locales, hojas de estilos, scripts y applets de java, algo por lo que no destacan las Herramientas de Google para Webmasters. Tras la comprobación el programa muestra un informe que puede subirse directamente a la web por medio de ftp o bien ser comprobado directamente.
Entre otras características interesantes del programa podemos encontrar la limpieza de su interfaz, la recomprobación de links rotos en caso de problema de red, formato simple de informes que pueden ser enviados por e-mail, soporte de sitios SSL, comprobación parcial de ftps y sitios en gopher, detección e informes sobre las URLs redireccionadas y la posibilidad de crear un mapa del sitio automáticamente en formato HTML para ser introducido posteriormente en nuestra web.
Siempre se ha evitado abrir los enlaces externos, aquellos que nos llevan a una página distinta de la nuestra, en una nueva ventana, de manera que nunca se pierda nuestra web. El principal argumento esgrimido, y con toda la razón desde el punto de vista del márketing, es no obligar al lector a abandonar nuestra página para visitar otro enlace. Para realizar esta función se ha recurrido habitualmente al atributo target=”_blank” en el enlace. Sin embargo esta opción no es posible utilizarla si queremos que nuestra página valide como XHTML estricto, algo muy conveniente en el diseño web actual. Siempre es posible reducir los requerimientos a XHTML Transicional, pero recurrir a estas técnicas no es más que retrasar el problema.
Muchos habrán pensado en utilizar una función en javascript con el método window.open directamente. Sin embargo esta opción haría imposible la lectura de los enlaces por parte de buscadores como Google. La solución más acertada pasa por un javascript que actúe sobre una clase del enlace, tal y como explican en eslomas.com:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Ejemplo con método común</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript”><!–//–><![CDATA[//><!–
function prepareTargetBlank(){
var className = ‘external’;
var as = document.getElementsByTagName(’a');
for(i=0;i<as.length;i++){
var a = as[i];
r=new RegExp(”(^| )”+className+”($| )”);
if(r.test(a.className)){
a.onclick = function(){
window.open(this.href);
return false;
}
}
}
}
window.onload = prepareTargetBlank;
//–><!]]></script>
</head>
<body>
<ul>
<li><a href=”http://www.google.com”>enlace normal a google</a></li>
<li><a href=”http://www.google.com” class=”external”>enlace a google en ventana nueva</a><li>
</ul>
</body>
</html>
En el ejemplo se presentan 2 opciones, para un enlace normal y para un enlace en una ventana nueva
Si eres de los que siempre está deseando aprender nuevas técnicas con cualquier programa relacionado con el diseño, pero no tienes tiempo o paciencia como para leer decenas de libros, Video-Tutes es tu sitio ideal. Se trata de una galeria de tutoriales en formato video sobre programas relacionados con el diseño, como Adobe Photoshop, 3dStudio MAX, Dreamweaver, Fireworks, Illustrator o QuarkXpress.
Ahora que tan de moda esta la Web 2.0 no podemos dejar de prestar atención al diseño de los fondos de nuestras páginas web. Para ello nada mejor que los motivos, pequeños dibujos que crean un patrón al repetirse. Aquí teneis una buena muestra para utilizar en vuestras páginas web.
Si eres de los que se preocupan por el posicionamiento de sus páginas web encontrarás en DNScoop una excelente herramienta SEO. Con sólo introducir la dirección de una web en su barra de búsqueda DNScoop analiza parámetros como la antigüedad de un dominio, el ranking Alexa, el número de páginas que enlazan con esa web, el número de paginas indexadas en los diferentes buscadores, etc..
A la hora de desarrollar proyectos en Photoshop es importante contar con recursos de calidad. En Brusheezy se pueden descargar una gran cantidad de pinceles en alta resolución para el programa de Adobe, divididos por secciones.
En muchas ocasiones no desamos que los buscadores indexen el contenido del alguna de las carpetas de nuestro sitio. Para estas situaciones podemos utilizar el estandar de exclusión de robots de buscadores mediante un archivo robots.txt ubicado en el nivel superior del sitio.
Si no queremos complicarnos escribiendo a mano nuestro archivo robots.txt podemos acudir a esta dirección, donde podremos crear uno mediante un sencillo formulario. Recordad que para que funcione es necesario ubicarlo en el root de nuestro sitio.
Esta Nochevieja, al igual que otros muchos años, la hemos celebrado con los amigos con una fiesta de disfraces en un hotel rural. A pesar de que sabía que no iba a ser muy cómodo, elegí disfrazarme de Bender, el Robot de Futurama. Esther iba de Zoidberg, el medico cangrejo. Esta claro que el glamour no casa con nuestra idea de disfraz.
Siempre he tenido curiosidad sobre cual es el procedimiento correcto para comer sushi, que por cierto me encanta. Os puedo decir que no es de mala educación comer el sushi con las manos, aunque si se quieren utilizar los palillos es conveniente conocer el protocolo.
Impactante esta campaña australiana para concienciar a la población sobre la educación en la infancia. El mensaje es algo así como ‘Los niños imitan tu comportamiento. Compórtate’
Bueno, estamos de reformas en DobleClic.org. Me he decantado por un theme que permite incorporar fácilmente Plug-ins para la Web 2.0 (Del.icio.us, Flickr, etc..). Durante los proximos días (o meses, o años, depende lo liado que esté …) iré adaptando el tema y modificando el diseño. No os asustéis si véis que pasan cosas raras.
Si el gusta el nuevo aspecto de Dobleclic.org podéis descargar el theme Satori, de Felipe Lavin Zumaeta, en Yukei.net.
Hace ya muchos años que navego por Internet. He vivido la Revolución de los Blogs desde su inicio y considero los comentarios en los noticias como una forma muy positiva de interactuar con los lectores.
Sin embargo, hay personas cuyo comportamiento en Internet aún consigue desconcertarme. Presten atención al siguiente comentario que ha dejado una chica llamada Brenda en este Blog:
michael jackson yo brenda te quiero conocer en persona por que yo soy fanatica a ti jackson yo te amo muchisimo yo quisiera trabajar con tigo en los video para estar junto a ti jackson para a brazarte bailar como tu en los video tu me agrada muchisimo poreso quiero conocerte en persona cantar con tigo la cancion de thriller es mi favorita quiero estar con tigo tu me facina muchisimo yo te amo mucho quiero trabajar con tigo en los video como bailando cantando jugando brincando con tigo michael jackson tu eres MIO te amo muchisimo si tu me quiere conocer toma my msn? leejackson1991@hotmail.com hay podra conocerme ok jackson i love you vivo en puerto rico?
Ya sabes, Michael Jackson, si sueles pasar por mi Dobleclic.org no dudes en invitar a Brenda al casting de uno de tus próximos videos, si alguna vez consigues recuperar tu patética carrera.
Un soldado estadounidense se mofa de unos niños irakies haciendoles correr detrás de un camión en marcha ofreciéndoles una botella de agua como ‘premio’. Vean y juzguen.
En este mundo tan deshumanizado hay pocas cosas más reconfortantes que un buen abrazo. Al menos eso es lo que piensa Juan Mann, un hombre que se ha propuesto la misión de ofrecer abrazos gratis a extraños para iluminar sus vidas. Tal y como se ve en el video la campaña parece estar funcionando bien, aunque al final la policía ha terminado prohibiendo esta campaña
Me encanta perderme entre las ilustraciones de ConceptArt.org, una galería de dibujo conceptual donde se reunen varios artistas para aprender unos de otros. Se pueden encontrar trabajos impresionantes, y su web esta muy trabajada.
Concierto en directo en el que Stewart Copeland y Andy Summers, bateria y guitarrista de The Police, acompañan a Incubus. Me hubiera encantado estar allí para verlo.
Uno de los pasos más importantes a la hora de comenzar un nuevo proyecto de diseño es la elección de la tipografía. Si no queremos pagar licencias una buena opción son los directorios de fuentes gratuitas, entre los que destaca BetterFonts, un directorio con más de 10.000 fuentes que pueden ser previsualizadas con el texto que escribamos nosotros, para ver si nos convendría la tipografía, si tienes los acentos y todos los caracteres que podemos necesitar, etc..
Para ir con la verdad por delante debo admitir que odio a las palomas, esos bichejos que poco a poco se van adueñando del puesto que tenían las ratas en las ciudades. Tardaremos poco en ver a una paloma carroñera volando con un pobre gato en el pico.
Vuelvo tras una semana de vacaciones y me encuentro con que Akismet, el plugin antispam para Wordpress, me ha detectado 2203 nuevos comentarios SPAM. Es bueno que se haga saber que no nos interesa quedar con una gorda lesbiana que se acuesta con su hermana, ni dejarnos el sueldo del mes jugando al Poker Online y que, por el momento, no necesitamos ningún alargador de pene.
Desde que instale Akismet, me ha detectado un total de 16,836 comentarios basura. No quiero ni pensar si hubiera tenido que moderar esos comentarios a mano. Si vuestro blog utiliza Wordpress y no queréis comeros la cabeza con los comentarios, os recomiendo Akismet, el que lava más limpio.
Que buena pinta tiene el trailer de ‘Alatriste’ la película dirigida por Agustín Díaz Yanes basada en las novelas sobre el Capitán Alatriste escritas por Arturo Pérez Reverte. Por fin una producción de cine español que no deja tufillo. Esta no me la pierdo en el cine, la estrenan este viernes.
Dobleclic.org es mi blog personal. En él escribo sobre diseño web, posicionamiento en buscadores, Internet y nuevas tecnologías. Dobleclic.org pertenece a la red de Blogs de Ebooz.com. Aquí tienes disponible una lista con otros blogs publicados por Ebooz.com