food4thoughts

Poco que decir. Tenía un par de días libres (y un poquito de creatividad) después del trajín de estas últimas semanas y me ha dado por hacer un nuevo diseño para una web que tenía en mente. Como esa web tardará en ponerse en funcionamiento, aquí os dejo el tema, food4thoughts:

food4thoughts

El diseño (como los que vaya publicando) es de dominio público así que haced lo que queráis con él. Sigue los estándares y debería adaptarse a cualquier resolución de pantalla aunque haya sido diseñado con una resolución de 1024×768 de base.

Descargar food4thoughts [ 141,1 kB, imágenes incluídas ] y para verlo en funcionamiento, aquí lo tenéis.

Enlaces relacionados

Mi PeCé style

Hace tiempo que diseño páginas web, incluso antes de tener conexión a Internet en casa. Cuando descubrí el mundo del HTML, me fascinó. Vaya, podré hacer mi propia página web, pensé. Atrás queda el Frontpage, Dreamweaver y diseñar webs a golpe de ratón. Ahora hago todo a pelo, ya que me permite tener todo el control y casi se puede decir que soy un validator man en el cumplimiento de los estándares 😛

El caso es que nunca me había animado a publicar alguna plantilla y el otro día, pensando en un rediseño para la primera página que colgué en Internet, salió Mi PeCé style. Es un tema bastante sencillo (no soy un crack en el diseño web), poco recargado y ‘elástico’, es decir, que se adapta a la resolución que uséis en vuestro ordenador. En fin, poco más puedo decir. Lo tenéis a vuestra entera disposición [ ZIP – 25,8 kB ] para lo que queráis, totalmente libre 🙂

Mi PeCé style

Ah, ¿que queréis verlo en funcionamiento? Pues venga, aquí lo tenéis. Si es que lo queréis todo 😛

Galería de imágenes usando CSS

El otro día vi en CSSplay una galería de imágenes usando sólo CSS, es bastante sorprendente. Me picó la curiosidad (y eché un vistazo a su código) así que después de teclear un rato, he hecho algo parecido, aunque sin ese segundo nivel de aumento, es decir, mucho más sencillo.

El ‘truco’ está en crear una capa que se active cuando se hace mouse over, es decir, cuando pasamos el puntero del ratón sobre un elemento.

.thumb:hover span {
          background-color: #333;
          visibility: visible;
          right: 0;
          top:  150px;
          left: 0px;
          z-index: 50;
          margin: 0 auto;
          width: auto;
}

Fijaos en el atributo visibility, en la clase de arriba está como visible.

.thumb span {
          position: absolute;
          top: 150px;
          left: -1000px;
          visibility: hidden;
          color: #fc7;
          font-family: "Andale mono", "Trebuchet MS", sans-serif;
          font-size: 12px;
          border-bottom: 1px dashed #666;
}

Aquí, sin embargo, visibility está como hidden, es decir que no se muestra, está oculto. Así que dependiendo de si se pasa el puntero del ratón por encima de un elemento o no, se mostrará una capa u otra.

Podéis verla en funcionamiento aquí. Y por supuesto os podéis descargar la galería completa para investigar / romper / copiar / modificar el código 🙂

PD Debería funcionar bien en todos los navegadores decentes, cumple con los estándares XHTML y CSS, pero no te me quejes si usas el Internet Explorer, eso ya no es culpa mía 😛

SPGM: una galería muy válida

Hoy en día hay un montón de generadores de galerías web. Tú sólo les das las fotos, y el script se encarga de crear la galería, sin tú tener que preocuparte de escribir código. Los hay muy buenos, pero hoy os voy a hablar de SPGM (Simple Picture Gallery Manager), por varias razones:

SPGM

  • Es código abierto
  • No usa bases de datos
  • No usa la librería GD
  • Está en español
  • Las galerías que genera son XHTML 1.0 Strict válidas.

Lo cierto es que la última opción fue la que me hizo decantarme por ella.

Instalación

Debemos tener instalada la versión 4 ó superior de PHP. Nos descargamos la última versión y lo descomprimimos en un directorio. Si lo subimos a nuestro espacio web, la dirección de la galería sería algo así: http://www.tuweb.com/spgm-xxx/index.php. spgm-xxx variará según la versión que te hayas descargado. Obviamente, puedes darle el nombre que quieras a ese directorio.

Pues la instalación era eso nada más. Ahora sólo queda meterle contenido 🙂

Creando galerías

Por defecto, sólo tenemos que crear directorios dentro de la carpeta gal. Así que, si queremos crear una galería llamada Fotos, tendremos que crear un directorio con ese nombre en gal, de tal forma que nos quedaría gal/Fotos/. Los nombres de las galerías (los directorios) no pueden contener espacios, pero podemos escribir en su lugar un guión bajo ‘_’ y el script lo interpretará como un espacio: gal/Fotos_de_coches.

Ahora metemos las fotos en esos directorios. Y nos falta un último paso, debemos crear nosotros las miniaturas (thumbnails) de las fotos. Sí esto puede ser algo engorroso, pero es la desventaja de no usar la librería GD para la manipulación de imágenes. Sin embargo, dentro de la carpeta tools nos incluyen un script tanto para Windows (genthumb.bat) como para Linux (genthumb.sh) que nos facilitarán el proceso, haciendo automáticamente las miniaturas de las fotos. De todos modos, por si os sirve, yo hice un script bastante más sencillo (para Linux):

#!/bin/bash
for image in `ls *.jpg`
do
        convert $image -resize 150x113 _thb_$image
done

Es necesario tener instalado el paquete imagemagick. Lo que hace el script es que para todas las imágenes (en este caso, .jpg) que haya en el directorio donde se ejecute el script, las reduce a un tamaño de 150 píxels de ancho y 113 de alto, y les da un nuevo nombre (no borra las originales) de la forma _thb_nombre_de_la_imagen_original.jpg.

Para usar el script, primero copiáis las líneas de arriba en un fichero, lo llamáis como queráis (mejor algo descriptivo, claro) y le dais permisos de ejecución (en consola es tempwin@linux:~$ chmod +x nombre_script). Y lo ejecutáis tal que así: tempwin@linux:~$ ./nombre_script 🙂

Venga, y ya tenéis la galería creada 🙂 Pongámonos ahora con la configuración/personalización.

Archivos y directorios

Así está estructurado SPGM junto con sus archivos importantes:

  • contrib/ – Donde está una librería javascript que usa SPGM para mostrar información EXIF.
  • css/ – La hoja de estilo del aspecto superficial de la galería.
  • flavors/ – Carpeta de temas, para modificar el aspecto de la galería.
  • gal/ – Por defecto es el directorio donde se almacenarán los álbumes que queramos añadir a la galería.
  • gal/spgm.conf – Archivo de configuración de la galería, para editar algunos aspectos de la misma.
  • lang/ – Carpeta con los archivos de lenguaje, para traducir la galería.
  • tools/ – Herramientas para la creación automática de miniaturas.
  • spgm.php – Es el script que se encarga de crear la galería.

Idioma

Dentro de la carpeta lang tienes bastantes idiomas para elegir. Por defecto, viene en inglés. Si queremos cambiar el idioma, tenemos que editar el archivo spgm.conf, que está dentro de la carpeta gal. Casi al final podemos ver una línea que pone $cfg['conf']['language'] = 'en';, por defecto, está comentada (con un # delante). Borramos el # y le ponemos el idioma, es para el Español.

Número de miniaturas

Otro aspecto que nos interesará, será el número de miniaturas que queremos que se muestre en cada página de nuestra galería. Lo podemos definir también en el mismo archivo que antes. En la línea $cfg['conf']['thumbnailsPerRow'] = 4;, le indicamos que queremos que aparezcan cuatro miniaturas por fila. Y en $cfg['conf']['thumbnailsPerPage'] = 12;, decimos que queremos 12 miniaturas por página.

Modificando el aspecto

Podemos cambiar la apariencia de la galería mediante unos estilos o sabores (flavors, como dicen ellos). Hay algunos disponibles en su página web. Tan sólo los descargamos, los metemos en la carpeta flavors, extramos el contenido, y en el fichero (¿a ver si lo adivinas?) spgm.conf le decimos el nombre del tema que queremos usar en la línea $cfg['conf']['theme'] = 'clean';. Para este ejemplo, es el tema clean (debes poner el nombre que tenga la carpeta del tema).

Sólo te hace falta saber algo de CSS y XHTML para hacer tus propios temas o modificar el aspecto de la galería a tu gusto.

Alternativas

Ah, por cierto, mi galería está funcionando con SPGM 😉