|

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

Similar Posts

Consejos para desarrollar cumpliendo estándares

ByLuis

Buenos consejos a tener en cuenta cuando se trata de desarrollar cumpliendo estándares web.

  • Menos es más, no uses mas código del necesario
  • No uses CSS o Javascript dentro del HTML, ya sea en las etiquetas como en el head.
  • Usa código semántico, las cabeceras mediante etiquetas h1, h2, …, resaltar mediante strong, …
  • No uses meta etiquetas redundantes
  • Usa microformatos para hacer tu sitio legible
  • Usa tablas solo para mostrar tablas
  • Usa rel=”external” para enlaces externos, no uses target=”_blank”, hazo mediante Javascript
  • No uses Javascript mediante enlaces
  • No muestres contenido importante mediante Flash o Ajax, siempre mediante HTML plano

10 Coding Guidelines for Perfect Findability and Web Standards

|

Internacionalización mediante PHP

ByLuis

Yo creo que el hecho de usar multilenguaje en un sitio web puede ser algo muy importante, sobre todo si deseas que tenga bastante repercusión. En Sentido Web ya hay entradas que trata el tema del multi-idioma ya sea mediante Apache o aportando recursos.

Esta vez vamos a hablar sobre un método que nos muestran en PHPBuilder. Se trata de tener varios ficheros para almacenar los textos traducidos, un fichero para cada idioma admitido (en.php, es.php, fr.php, de.php …) en el cual tendremos un array que contendrá código-traducción. En este caso, también hay un array para las imágenes, por si hay botones con texto que son realmente imágenes:

<?php
// Textos a traducir
$dicc['text'] = array (
'welcome' => 'Bienvenidos',
'thanks' => 'Gracias por participar',
...
);
// Imágenes especificas para idiomas
$dicc['imgsrc'] = array (
'title' => 'graphics/title.es.png',
'footer' => 'graphics/footer.es.jpg',
..
);
?>

Ahora solo falta obtener el idioma o asignar uno por defecto, importar el script específico del idioma seleccionado y usarlo.

// Buscamos si el idioma está especificado en la URL
if (isset($_GET['lang'])) {
// Si lo está, lo introducimos en una coockie para tenerlo la próxima vez
$lang = $_GET['lang'];
setcookie('lang', $lang, time()+(3600*24*365));
} else if (isset($_COOKIE['lang'])) {
// Miramos si lo está en una cookie
$lang = $_COOKIE['lang'];
} else {
// Por defecto en inglés
$lang = 'en';
}
// Obtenemos las traducciones
require_once "{$lang}.php"
echo $dicc['text']['welcome'];

Claro, que a parte de un diccionario/traductor se puede usar un directorio específico para cada idioma que contenga el contenido en ese idioma. Por ejemplo en un sitio de noticias no puedes tener un diccionario para introducir todo el texto de la noticia.

Afortunadamente los frameworks actuales como Seagull ya nos ofrencen módulos que nos facilitan esta labor.

Localizing a Web Page for Different Languages

Vía / dzone

|

CSSViewer: visor de CSS para Firefox

ByLuis

cssviewer.jpgCSSViewer es una extensión para Firefox que nos permite visualizar en una ventana los estilos que posee un elemento de la página web que estamos viendo. Muy útil para cuando desarrollamos o para cuando visitamos páginas que nos gustan y queremos destripar los estilos sin necesidad de meternos en el código fuente.

Un par de fallos sí que le veo:

  • los iframes los trata como objecto, cuando podría profundizar en ellos, y los frames no sabe tratarlos, por ejemplo en la página de GMail, supongo que será porque tira del elemento body, el cual no existe en la página que contiene los frames (claro que esto es una suposición),
  • el segundo fallo es que la ventana que muestra los estilos es demasiado Web 2.0, algo más anticuado hubiera quedado mejor, es demasiado grande y se sale de la pantalla y no sigue bien al ratón, por lo que a veces el ratón se posiciona encima de la ventana y obtiene los estilos de la ventana que muestra los estilos (un poco recursivo, ¿no?).

Salvo estas cosillas, una extensión que ya tengo instalada y que creo que me será muy útil.

CSSViewer

Vía / Bartelme Design

|

BonBon Buttons

ByLuis

These are way above and beyond the level of any other “CSS3 buttons” I’ve seen. Multiple backgrounds combining gradients and images, uneven border-radius, pseudo elements, HSL coloring, @font-face icons, transitions, box shadows, text shadows, hover and active states… the list goes on. Every trick in the book masterfully employed.They make my buttons …

Post original

|

Efecto fadding como en Flash con jQuery

ByLuis

Un efecto llamativo que se suele hacer con Flash es realizar una transición entre dos imágenes cuando se posiciona sobre ella.
fadding.png
El efecto es sencillo, disponemos de una cabecera (H1) en el que hay un elemento con posicionamiento absoluto y que contiene la imagen final, y un enlace (el que se suele usar para ir al home) que tiene la imagen original mediante estilos.
El proceso es el siguiente: cuando se posiciona el ratón sobre el enlace se crea efecto fadeout y cuando se sale se crea el efecto fadein. Ambos efectos se hacen con tiempo de retardo para dar continuidad.
Todo el código en el post original.
Creating a fading header
Vía / CSS Globe

| |

Se vende StyleGala

ByLuis

stylegala_is_closing.jpg Las noticias en el mundo del CSS y Showcases durante la última semana no han sido muy buenas que digamos. Ayer nos enterábamos que Web Standards Awards cierra sus puertas después de casi 2 años y únicamente 100 screenshots seleccionados.
Hace apenas unas horas leemos que la archiconocidísima Stylegala también está en venta igual que CSS Vault en su día y Unmatched Style. Más bien en un cambio de dueño a través de una subasta que empieza a partir de 30.000$ en el que uno de los factores estrella es que gana en publicidad unos 2400 dólares al mes, aunque desde hace 6 meses tiene un ritmo de publicación de 1 página al mes.
Diseñorama también habla del asunto y se pregunta qué futuro tienen los CSS Showcases.
A esta pregunta no podemos ser objetivos, y sabemos y somos conscientes de la rentabilidad, además de que nos divertimos mucho no solo manteniéndola sino sabiendo que es muy útil para todos los profesionales y aficionados del sector disipando cualquier complejo que la comunidad hispana pudiera tener en cuanto al saber hacer.
Deseamos muchísima suerte a David en su subasta y que los próximos dueños vengan con las pilas cargadas porque nosotros seguiremos innovando.