Archive for marzo, 2010

marzo 25, 2010 1

Generando CSS mediante PHP

By in CSS, PHP

Si algo se hecha de menos en CSS es el no poder hacer uso de variables o de cierta lógica. Hay que tener en cuenta que CSS es un lengauje meramente estilístico, sirve para describir los estilos y la presentación de los elementos de la página.

Si alguna vez necesitamos incluir lógica en los CSS, por ejemplo para cambiar la paleta de colores en función de la estación del año, podemos usar PHP para esto. Lo que vamos a tener ahora es un archivo PHP en lugar del CSS, por ejemplo style.php. En este archivo lo primero que tendremos será:

header("Content-type: text/css; charset: UTF-8");

De esta forma le decimos al navegador que el contenido será del tipo CSS. Veamos un ejemplo donde el color de fondo y el color del texto se seleccionará de forma aleatoria. Primero el código de nuestra página:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="es-ES">
<head>
<link rel="stylesheet" type="text/css" href="style.php"/>
</head>
<body>
<div id="bloque">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam at facilisis odio. Integer sollicitudin facilisis tortor, id
ullamcorper dolor dignissim vel. Curabitur tristique pellentesque iaculis.
Vivamus molestie condimentum hendrerit. In hac habitasse platea dictumst.</div>
</body>
</html>

Y ahora el del script PHP que genera la CSS:

<?php

header("Content-type: text/css; charset: UTF-8");

$colores = array(
  array('bg' => '#000', 'fg' => '#fff'),
  array('bg' => '#00f', 'fg' => '#fff'),
  array('bg' => '#fff', 'fg' => '#f00')
);

$color = $colores[rand(0,2)];
?>

#bloque {
color: <?php echo $color['fg'];?>;
background-color: <?php echo $color['bg'];?>;
}

Se puede ver como se elige una u otra paleta de forma aleatoria en este enlace.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: ,

marzo 11, 2010 5

Como utilizar Lightbox 2

By in JavaScript, Librerías

Lightbox es un script escrito en JavaScript que nos permite mostrar una “popup” con una imagen de una forma bastante elegante. Para hacer uso de Lightbox lo primero que vamos a hacer es descargarnos el script desde su página web.

Una vez que tenemos esto ya podemos incluirlo en nuestra página. Lo primero que tendremos que incluir es el framework Prototype y la librería de efectos Scriptaculous, ambas vienen con Lightbox, ya que Lightbox hace uso de estas. Una vez incluidas añadiremos también el script de Lightbox:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Tras añadir los script tenemos que incluir el archivo con los estilos de Lightbox:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Una vez hecho esto ya tenemos Lightbox listo para usarlo. Para ello tendremos que añadir el atributo rel con el valor “lightbox” al enlace que queremos que muestre nuestra imagen. Veamos un ejemplo:

<a href="images/image1.jpg" rel="lightbox" title="Imagen 1">imagen 1</a>

De ese modo al hacer click sobre el enlace se abrirá la imagen indicada en la propiedad href, pero lo hará mediante Lightbox. Si a la etiqueta <a> le añadimos el atributo title, en el ejemplo está, Lightbox nos mostrará también el título.

Podemos crear conjuntos añadiendo el nombre del conjunto entre corchetes en el atributo rel, de la siguiente forma:

<a href="images/image1.jpg" rel="lightbox[set]">imagen 1</a>
<a href="images/image2.jpg" rel="lightbox[set]">imagen 2</a>
<a href="images/image3.jpg" rel="lightbox[set]">imagen 3</a>

Como se ha podido ver con Lightbox podemos mostrar nuestras imágenes de una forma más elegante que mostrando solo la imagen en el navegador.

Podéis descargar un pequeño ejemplo en el siguiente enlace:

Demo de LightBox 2

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , ,

marzo 1, 2010 0

Generando thumbnails con PHP

By in Librerías, PHP

Ya hemos visto en este blog como usar algunas de las funciones de la librería GD. Hoy le va a tocar el turno a la función imagecopyresampled, que nos va a permitir escalar una imagen. El código para generar el thumbnail mediante esta función es el siguiente:

<?php
define('ANCHO', 100);
$image_path = $_GET['i'];

// Cargamos la imagen original
$original = imagecreatefromjpeg($image_path);

// obtenemos el ancho y el alto
$original_x = imagesx($original);
$original_y = imagesy($original);

// calculamos el nuevo alto de la imagen, para que guarde la relación
// de aspecto
$alto_destino = round($original_y * ANCHO / $original_x, 0);

// creamos la imagen del thumbnail
$destino = imagecreatetruecolor(ANCHO, $alto_destino);

// copiamos la imagen original y la escalamos
imagecopyresampled($destino, $original, 0, 0, 0, 0, ANCHO, $alto_destino, $original_x, $original_y);

// mostramos la imagen del thumbnail
header('Content-Type: image/jpeg');
imagejpeg($destino);

// destruimos las imagenes
imagedestroy($destino);
imagedestroy($original);

Podríamos modificar este script para que guardara los thumbnails en un directorio, y si ya existe no haría falta volver a generarlo, pero eso lo dejamos mejor como pequeña práctica.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , ,