links for 2007-03-24

ByLuis
|

Laboratorio: mostrar que thumbnails has visitado

ByLuis

Una de las cosas que más me ha gustado de Design Meltdown es que te indica que thumbnails has visitado.

Se trata de lo siguiente, tienes un enlace que contiene una imagen en miniatura que accede a la imagen con el tamaño original (thumbnail). Cuando ya has visitado la imagen el thumbnail cambia y te dice que ya lo has visitado.

imagenes-visitadas.png

Para hacerlo es sencillo, creas una capa con un tamaño específico (el del thumbnail), le indicas mediante estilo dentro de la propia etiqueta HTML la imagen de fondo, que será el thumbnail en sí.

Dentro de la capa incluyes un enlace que se mostrará como un bloque (display: block) y que no mostrará nada, bueno, en este caso si mostrará un texto que referencie a lo que enlaza, pero mediante estilos el texto no se verá, esto lo hacemos así para que los dispositivos que no admitan estilos puedan ver algo.

Modificaremos el estilo de enlace visitado para que muestre como fondo una imagen parcialmente transparente y que muestre el texto “visitada”.

.contenedor-imagen {
width: 150px;
height: 85px;
}
.contenedor-imagen a {
text-indent: -100000px;
display: block;
width: 150px;
height: 85px;
border: 2px solid #FFFFFF;
}
.contenedor-imagen a:hover {
border: 2px solid #FF0000;
}
.contenedor-imagen a:visited {
background: url(visitada.gif);
}
<div class="contenedor-imagen" style="background: url(miniatura.png)">
<a href="http://sentidoweb.com?ejemplo1">Sentido Web</a>
</div>

Ejemplo

Por qué es mejor Subversion que CVS

ByLuis

Cinco motivos por los que Subversion es mejor que CVS, el otro día lo hablábamos en el trabajo porque lo más seguro es que pasemos a Subversion y hoy encuentro esta entrada en la que lo explica muy bien:

  • Histórico de directorios y no solo de ficheros.
  • El histórico de ficheros se conserva aunque el fichero se mueva, renombre o se haga una copia.
  • Facilidad de restructuración de directorios.
  • Las revisiones son a nivel del head.
  • Sistema de resolución de conflictos, usando tres ficheros: revisión antigua, la nueva y la que tienes en local.

¿Por qué es mejor subversion que cvs?

Vía / Prográmame

links for 2007-03-23

ByLuis

Consejos para evitar crear malas aplicaciones web

ByLuis

Una lista con consejos para evitar realizar aplicaciones web que no tengan una buena calidad. Lo malo de las listas es que normalmente se basan en la experiencia del autor, por lo que a veces no se está de acuerdo totalmente con ellas. En este caso yo estoy bastante de acuerdo con la mayoría.

  • Pon los estilos y los javascript en ficheros independientes: complica la lectura, el debug y dificulta que varios desarrolladores modifiquen el mismo archivo.
  • Comprime: comprime la salida para ahorrar ancho de banda. Con esto no estoy del todo de acuerdo, ya lo hemos comentado antes en Sentido Web, hay que pensar que el comprimir la salida en el servidor requiere tiempo de ejecución en la máquina, no me imagino a Technorati, que a veces tarda un poco en darte la respuesta, despilfarrando tiempo de ejecución.
  • Valida: valida según el DOCTYPE que hayas especificado.
  • Cuidado con los mensajes de error: los mensajes de error deben estar enfocados en el usuario, no en el desarrollador para luego saber qué ha fallado. Además, mostrar mensajes de error de la aplicación específicos para los desarrolladores puede proporcionar información sensible a terceras personas.
  • No uses tablas: a parte de ser más fácil de mantener, y más claro de leer, ahorras ancho de banda al escribir menos código debido a la ausencia de TDs y TRs. Luego está, lógicamente, todas las otras razones que todos conocemos para no usar tablas.
  • Desarrolla para todos los navegadores modernos: no te centres solo en IE, existen otros, y aunque se usen menos, cada vez se usan más. Imagínate que una tienda por internet solo funciona para IE, ya que solo el 15% de los usuarios usa Firefox (por ejemplo), es bastante posible que la mayoría de ese 15% no entre en esa tienda online y busque una alternativa. Ese 15% de usuarios de Firefox quizás pueda representar un 15% de ventas.
  • Comprueba los requerimientos: si tu página necesita Javascript, cookies, flash o un plugin, comprueba que el navegador del usuario lo admite, si no es así hazlo saber.
  • Prueba la usabilidad con usuarios reales: a veces algunos sitios son difíciles de usar debido a que quienes lo usan no son quienes lo diseñan.
  • Usa una base de datos real: no uses Access u otro tipo de base de datos de ese estilo, si no puedes pagar Oracle usa MySQL.
  • Que sea multiplataforma: no uses ActiveX o cosas que sean específicas de una plataforma.
  • Piensa en el ancho de banda: no todo el mundo debe tener una línea con un ancho de banda grande, si la página tarda en cargarse es posible que el usuario huya de ella.
  • Ten en cuenta la internacionalización: si desarrollas algo para todo el mundo y solo lo realizas en inglés, es posible que no logres lo que buscas.
  • Testea: esto es lo de siempre, los test es lo más aburrido pero lo más necesario. Que los desarrolladores hagan sus pruebas primarias, pero que los verdaderos tests los hagan personas ajenas al desarrollo.

Ways to Avoid Building Web Applications That Suck

Vía / dzone

|

XMLHttpRequest: agregador de noticias web 2.0

ByLuis

xhr.pngXMLHttpRequest es un agregador de noticias sobre Ajax, web 2.0, css, dhtml y javascript. Recoge las noticias de otros agregadores y nos las muestra.
Entre los agregadores que utiliza, nos encontramos con del.icio.us, Digg, dzone, Ajaxian, furl.net y muchos otros, algunos de los cuales no tengo muy claro si los pondría, o al menos los situaría al final de la lista. Creo que es mejor que muestren los más específicos como dzone o Ajaxian que del.icio.us.
A parte también te muestra ofertas de trabajo relacionadas con la temática web 2.0.
XMLHttpRequest
Vía / PuntoGeek

links for 2007-03-22

ByLuis

IEPro: addon para Internet Explorer 7

ByLuis

iepro.pngIEPro es un addon freeware para Internet Explorer 7 que nos ofrece varias funcionalidades para este navegador.

Entre las características nos encontramos:

  • Pestañas: cerrar la pestaña usando doble click, administrador del historial de la pestaña, recuperación de error, abrir una pestaña desde la barra de direcciones, mover el menú de IE sobre la de direcciones, ocultar la barra de búsquedas, modificar el número máximo de conexiones en paralelo al servidor web y seleccionar que programa externo usaremos para ver el código fuente.
  • Bloqueo de publicidad: bloquea todo tipo de publicidad, ya sea html, flash, contenido multimedia, etc… Quizás mi inglés me falle un poco, pero he visto “spyware ads” y o se refiere a anuncios html que te llevan a instalar spyware, o IE me da mucho miedo.
  • Mouse Gesture: realiza acciones según el movimiento del ratón.
  • Recuperación por error: recupera las pestañas abiertas después de un error, no dice nada de la sesión como hacen otros navegadores.
  • Guardar como imagen: guarda la página como una imagen JPG, BMP , GIF , PNG o TIFF.
  • Seleccionador de proxy: permite cambiar de proxy de forma rápida.

Nada nuevo, encontramos esto mismo en otros navegadores, pero al menos van mejorando, aunque sea poco a poco.

IEPro

Vía / Lifehacker

PicFindr: encuentra fotos gratuitas

ByLuis

picfindr.pngPicFindr es un servicio que nos permite buscar imágenes gratuitas dentro de todos los sistemas de licencias existentes y teniendo en cuenta el uso que necesitemos.
Nos permite buscar imágenes gratuitas para usarlas de forma comercial sin necesidad de pedir permiso o pagar algún crédito.
PicFindr se trata de una aplicación realizada en Flash9 que busca dentro de diferentes sitios de almacenamiento de fotografías y nos permite descargarlas. Entre los sitios en los que busca se encuentra stock.xchng, image*after o morgeFile.
PicFindr
Vía / SitePoint Blogs