Foros del Web » Creando para Internet » Diseño Gráfico »

(Tutorial) Como hacer Thumbnails dinámicos,accesibles y ligeros muy fácil

Estas en el tema de (Tutorial) Como hacer Thumbnails dinámicos,accesibles y ligeros muy fácil en el foro de Diseño Gráfico en Foros del Web. Primero definamos algo: Cuanto de ancho y alto,en mi caso,sera de 96x96px. Comencemos con el HTML,que sera simplemente una imagen metida dentro de un link,con ...
  #1 (permalink)  
Antiguo 14/01/2011, 17:15
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Información (Tutorial) Como hacer Thumbnails dinámicos,accesibles y ligeros muy fácil

Primero definamos algo: Cuanto de ancho y alto,en mi caso,sera de 96x96px.

Comencemos con el HTML,que sera simplemente una imagen metida dentro de un link,con su respectivo alt y demás:

Código HTML:
Ver original
  1. <span id="thumb_scatman" class="thumb">
  2. <a href="" title="titulo del thumbnail">
  3. <img src="http://linkdejemplo.com/thumbtrans.png" alt="thumbnail" />
  4. </a>
  5. </span>

ahora,como veran,la imagen lleva a una imagen png,esta imagen tendra el tamaño del thumbnail (en mi caso 96x96) y estara vacia,pero no sera blanca sino que todo lo que tendra sera el canal alpha.

Una vez hecho esto,vamos a hacer las imagen del thumbnail en mi caso sera una simple foto mia re-escala y con bordes redondeados (se los recomiendo,tambien podrian hacer que el thumb paresca un pin).

Ahora,el siguiente paso,en cualquier editor imágenes (yo uso gimp pero ustedes pueden usar photoshop o lo que sea) tomen el thumbnail que hicieron y subanle el brillo mas o menos un 35% para que quede bastante claro.

Supongamos que la imagen del thumb original sea “thumb_1.png”,la version mucho mas clara es la “thumb_1_ligth.png” y la totalmente transparente es “thumbtrans.png”.

Bueno,entonces demos lo dinámico con el todo poderoso CSS:

Código CSS:
Ver original
  1. .thumb {
  2. height: 96px;
  3. width: 96px;
  4. }
  5. #thumb_scatman {
  6.   background-image: url(img/thumb_1_ligth.png);
  7. }
  8. #thumb_scatman:hover {
  9.   background-image: url(img/thumb_1.png);
  10. }

Y listo: Un thumbnail mas facil de hacer,mas accesible y facil de hacer que los basados en DHTML,ademas no pierden la dinamica.

Saludos,recuerden:

Comentar es agradecer,no pido nada mas que opiniones
__________________
Visita mi Blog,esta lleno de codigos utiles,consejos,ideas y software libre.

http://josewebmasterlibre.wordpress.com/
  #2 (permalink)  
Antiguo 15/01/2011, 10:15
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: (Tutorial) Como hacer Thumbnails dinámicos,accesibles y ligeros muy fácil

joseomaker:

Vos probaste el código expuesto? cual es el efecot que se supone debe realizar?
Porque como está no funciona.
te sugiero este código

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>thumbs</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. body {
  8. background-color: #8BD8A4;
  9. }
  10. .miniatura {
  11. background-image: url('img/miniatura.jpg');
  12. display: block;
  13. width: 96px;
  14. height: 96px;
  15. }
  16. .miniatura:hover {
  17. background-image: url('img/miniatura.jpg');
  18. background-position: 0px -96px;
  19. }
  20. </head>
  21. <div><a href="img/img.jpg" title="titulo del thumbnail" class="miniatura">
  22. <!-- fix --></a></div>
  23. </body>
  24. </html>

además de funcionar correctamente, tiene una ventaja, estás utilizando una sóla imagen para la miniatura, con lo cual evitas cualquier posible parpadeo (efecto flicker) al hacer el .hover

Demo:
http://foros.emprear.com/css/miniatura/th.html


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 15/01/2011, 12:18
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: (Tutorial) Como hacer Thumbnails dinámicos,accesibles y ligeros muy fácil

Cita:
Iniciado por emprear Ver Mensaje
joseomaker:

Vos probaste el código expuesto? cual es el efecot que se supone debe realizar?
Porque como está no funciona.
te sugiero este código

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>thumbs</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. body {
  8. background-color: #8BD8A4;
  9. }
  10. .miniatura {
  11. background-image: url('img/miniatura.jpg');
  12. display: block;
  13. width: 96px;
  14. height: 96px;
  15. }
  16. .miniatura:hover {
  17. background-image: url('img/miniatura.jpg');
  18. background-position: 0px -96px;
  19. }
  20. </head>
  21. <div><a href="img/img.jpg" title="titulo del thumbnail" class="miniatura">
  22. <!-- fix --></a></div>
  23. </body>
  24. </html>

además de funcionar correctamente, tiene una ventaja, estás utilizando una sóla imagen para la miniatura, con lo cual evitas cualquier posible parpadeo (efecto flicker) al hacer el .hover

Demo:
http://foros.emprear.com/css/miniatura/th.html


Saludos
grax,la verdad es que lo base en un codigo que si sirve,que estaba en mi maquina pero lo escribi desde una laptop que no era mia.

__________________
Visita mi Blog,esta lleno de codigos utiles,consejos,ideas y software libre.

http://josewebmasterlibre.wordpress.com/

Etiquetas: accesiblidad, gimp, photoshop, thumbnails, usabilidad, xhtml, css
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:04.