Diseño Web
Para que matarse retocando las imágenes, añadiéndoles efectos, sombras, bordes, y esquinas redondeadas con el Photoshop, si un fichero javascript y algo de CSS pueden hacer todo el trabajo por nosotros. Corner.js es una pequeña librería javascript sumamente fácil de incorporar a cualquier sitio web.
Para utilizarla hay que seguir los siguientes pasos:
- Descargar la librería y subirla al servidor
- Añadir el siguiente código dentro del html de la web:
<script type="text/javascript" src="corner.js"></script> - En las imagines que querramos se muestren con esquinas redondeadas, basta añadirles lo siguiente: class="corner"
Asimismo, hay varios efectos, que pueden combinarse entre si.
Seguramente existen más herramientas online que nos permitan convertir una imagen en un favicon.ico, pero la que vamos a comentar ahora es la que siempre utilizo y, por tanto, la recomiendo.
Ya hemos comentado anteriormente algunos programas para crear un favicon. Desde plugins para photoshop, extensiones para fireworks ó programas especializados como Microangelo. Sin embargo, puede que no tengamos la extensión funcionando ó utilicemos un editor de imágenes que no permita guardar el .ico.
Para ello hay una solución: Favicon Generator. Una herramienta online, a la cual podemos subir cualquier imagen de extensión gif, jpg, png, ó bmp, que no pese más de 150 kb, para luego, pulsando un botón, crear nuestro ícono.
El favicon.ico generado aparecerá en una imagen tal cual cómo se verá en la barra de direcciones. Adjunto a esta imagen, estará el botón para descargarlo. Super sencillo.
Enlace | Favicon Generator
Cómo en los buenos tiempos, A List Apart vuelve a publicar dos sensacionales artículos:
El primero, titulado igual que este post, es un interesante artículo que nos hace reflexionar sobre si los estandares web en realidad importan y cómo éstos pueden beneficiar sustancialmente a una empresa o proyecto web.
Enlace | Where Our Standards Went Wrong
El segundo, es un artículo mucho más práctico. Aunque también esta la reflexión de cómo el flash se ha venido a menos, siendo incluso deplorado por algunos diseñadores. Según Kevin Cornell, autor del artículo, no hay nada más errado, pero hay que ser semántico y para muestra nos enseñan una muy buena técnica para crear un efecto de reflejo (muy a lo 2.0) con imágenes. Imaginen tener que repetir el mismo proceso en Photoshop para todas las imágenes de una galería. Pues con flash, lo pueden hacer muy rápido. Pueden ver el ejemplo inicial y el resultado final del artículo. Al final del mismo, pueden descargar el código fuente.
Enlace | Semantic Flash: Slippery When Wet
El eyetracking es una tecnología que permite seguir los movimientos oculares de una persona para determinar lo que esta observando en la pantalla. Esto se logra con el uso de un eye tracker, un monitor ó camara especial que emite rayos infrarrojos a los ojos de quien lo usa. Estos rayos rebotan en su pupila y vuelven al aparato, permitiendo así calcular con precisión dónde está observando.
En Baluart, ya hemos publicado algunos artículos y enlaces referentes a estudios de Eyetracking. Pero en estos días, Usolab ha publicado, creo yo, el más reciente estudio, enfocado desde el de vista de la Usabilidad y sobre webs en español. Realmente vale la pena leerlo.
Enlace | La aportación del eyetracking en el sector de usabilidad
Hace un par de meses comentamos que 37 Signals había puesto su libro “Getting Real” a disposición de cualquier lector, aunque sea sólo en línea, totalmente gratis. La novedad actual es que el libro ya ha sido traducido al español (no muy bien), por lo que no hay pretexto para dejar de leer este recomendado libro de Desarrollo Web.
Enlace | Getting Real en español
Un código fácil de personalizar, sólo CSS y XHTML válido, probado en los principales navegadores (Internet Explorer 6 y 7, Firefox 2.0, Safari 2.0 y Opera 9.0), que nos permite diseñar los comentarios como burbujas. Y, si queremos utilizar esquinas redondeadas, viene integrado con curvy corners.
Enlace | CSS Speech Bubbles
