Contenido

La calculadora tambien se hace 2.0

5 ene

+ 1

Una muestra que la Web 2.0 está aquí es que hasta la calculadora se está inmersa en este mundo. Lo curioso es que tenga que hacer una petición ajax para cada cálculo… pero es una aproximación.

Optimiza el CSS sin usar PHP

23 dic

+ 0

Javier Aroche de Maestros del Web publica la forma más optima de Optimizar el CSS sin usar PHP, los que tengamos la posibilidad de hacerme modificando la configuración del servidor estarán de enhorabuena ya que Javier nos muestra como conseguirlo sin morir en el intento. Un gran tutorial.

3+1 formas de comprimir nuestro CSS desde PHP

22 dic

+ 13

Una forma de conseguir que nuestras páginas parezcan que cargan más rápido es usar la comprensión Gzip para devolver los ficheros CSS/JS comprimidos y así aligerar el peso de los mismos. Para ello podemos hacerlo de 3 formas diferentes:

Llamada HTML al fichero comprimido:

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

Al tratarse de un sistema basado en PHP, simplemente tendremos que llamar al fichero .php que se encargará de comprimirnos la salida de nuestro CSS.

Test de velocidad

Vamos a provechar y testear cada uno de los métodos a ver que tal se comporta con un fichero CSS de diferentes tamaños:

  1. 21kb
  2. 105kb
  3. 2mb

Para evitar cacheos, he añadido un rand() como parámetro al nombre del fichero. En las imagenes colocadas despues de cada método veremos los resultados de los diferentes pesos de ficheros y en cada uno de ellos nos encontraremos 3 líneas de tiempo en las que veremos a uno.css y css.php que son los ficheros que nos importan para este post.

  • uno.css, el fichero CSS plano con los estilos en los diferentes pesos.
  • css.php, los métodos encargados de comprimir el fichero uno.css.

Ambos devuelven el mismo CSS, uno.css en formato plano y css.php comprimido.

1) El método Paul Stamatiou

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>
...
[CSS File]
...
<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Insertamos el contenido CSS de nuestra hoja de estilos en lugar de [CSS File].

URL del método

Test de velocidad realizado

Fichero CSS de 21kb

paul-stamatiou-2

Fichero CSS de 105kb

paul-stamatiou

Fichero CSS de 2mb

paul-stamatiou-3

2) El método Perishable Press

<?php
   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?>

Insertaremos este código al inicio de nuestro fichero CSS, podemos modificar el tiempo de expiración del fichero ampliando así el cacheo del mismo.

URL del método

Test de velocidad realizado

Fichero CSS de 21kb

perishable-press-2

Fichero CSS de 105kb

perishable-press

Fichero CSS de 2mb

perishable-press-3

3) El método Reinhold Weber

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

  /* Sus ficheros CSS */
  include('ficheros1.css');
  ...
  include('ficherosN.css');

  ob_end_flush();
?>

Simplemente tendremos que importar mediante include() los ficheros CSS que deseemos comprimir y automáticamente obtendremos un único fichero CSS comprimido para nuestra aplicación.

URL del método

Test de velocidad realizado

Fichero CSS de 21kb

reinhold-weber-2

Fichero CSS de 105kb

reinhold-weber

Fichero CSS de 2mb

reinhold-weber-3

4) El método aNieto2k

<?php
  // Directorio de estilos
  $dir = 'styles/';

  header('Content-type: text/css');
  ob_start("compress");

  function compress($buffer) {
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

  	/* Sus ficheros CSS */
	if ($gestor = opendir($dir)) {
    	while (false !== ($archivo = readdir($gestor))) {
			if (eregi(".css$",$archivo)) {
				include($dir.$archivo);
			}
    	}
    closedir($gestor);
	}
  ob_end_flush();
?>

Personalmente, me gusta el sistema propuesto por Reinhold Weber (aunque es el más lento), pero se me ha ocurrido que podría ser interesante modificarlo para que podamos coger todos los ficheros .css de un directorio y comprimirlos en uno solo. De esta forma no tendremos que modificar el fichero cada vez que añadieramos una hoja de estilos nueva.

Conclusiones

No hace falta ser un experto para darse cuenta que los métodos 1 y 2 ofrecen un mejor resultado en cuanto a compresión y tiempo de respuesta y es que el include() se nota. En el método 3, el exceso peso de los ficheros CSS es debido a que este mantiene la estructura de saltos de línea del fichero original frente a los métodos 1 y 2 que dejan el fichero CSS en una sola línea.

A la hora de elegir un sistema u otro, es interesante tener en cuenta las posibilidades de todos los métodos y sopesar los costes de tiempo y peso de cada uno de ellos.

Jugando con el API de comentarios de WordPress 2.7

20 dic

+ 12

La llegada de WordPress 2.7, además de un importante cambio visual ha significado un cambio en la forma de interactuar con el blog. Anteriormente la API del blog únicamente daba la posibilidad de insertar/editar/borrar posts, enviar pigbacks/tracbacks y poca cosa más, ahora con la inclusión de los comentarios en la API las posibilidades son espectaculares.

Una muestra de ello es, por ejemplo, el Notificador de comentarios para MacOS X, que usa esta nueva propiedad para detectar cuando se ha añadido un nuevo comentario.

Pues visto que esta nueva funcionalidad puede dar mucho juego he estado jugando un poco con ella y he montado un primer boceto de lo que sería una clase en PHP que nos permita trabajar con ella fácilment.

Requerimientos

  1. The Inutio XML-RPC Library
  2. WordPress 2.7
  3. PHP5 Akismet (Opcional)

Funcionamiento

El funcionamiento de esta clase es muy sencillo, mediante una petición XML-RPC desde el servidor origen, lanzamos una petición del tipo (insert/getComment/getComments) al servidor destino (que ha de ser un WordPress 2.7) y este nos devuelve el resultado de nuestra petición.

Continua —>

Harmony Framework, acerca PHP a tu navegador

6 dic

+ 5

Harmony es un framework que nos permite convertir nuestro código PHP en estructuras JS. Pensado para ayudar a los desarrolladores en PHP que no saben de JS, nos ofrece alguna característica interesante.

  • Convierte código PHP 5 en javascript
  • Casi todas las funcionalidades de PHP están soportadas
  • La orientación a objetos usa Mootools
  • Usa php.js para las funciones PHP
  • Harmony XML: Similar a Flex MXML
  • Harmony Toolkit: Preparado para usar componentes
  • Open Source, MIT license

PHP

<?php
class Cat {
	public $name;

	public function __construct($name) {
		$this->name = $name;
	}
}
$myCat = new Cat('Micia');

echo $myCat->name;

class Cow {
	public function __construct() {
		echo 'moooo';
	}
}
$Effie = new Cow();
?>

JS

var Cat = new Class({
	initialize: function(name){
		this.name = null;
		this.name = name;
	}
});

myCat = new Cat('Micia');
document.body.write( myCat.name);

var Cow = new Class({
	initialize: function(){
		document.body.write( 'moooo');
	}
});
Effie = new Cow();

Crea tu propio Twitter con MooTools 1.2

12 nov

+ 2

Si te gustaría crearte tu propio Twitter para compartir solo con tus amigos/compañeros/familiares/… lo que estás haciendo puedes hacerlo tu mismo con este tutorial que NETTUTS nos muestra. Con un poco de MooToos y mucho menos de PHP puedes hacer tu propio twitter :D

iMeneame.net se lava la cara

26 oct

+ 17

Hace más de un año que iMeneame vió la luz, la versión para el iPhone de Meneame.net (versión no oficial) ha tenido que aguantar con un diseño realmente horrible (evidentemente mio) hasta que me he topado con Lucas Savelli de WydStudio.

new_imeneamenew_meneame_single

Gracias a Lucas, iMeneame ha adquirido un aspecto más moderno y más eficiente para el dispositivo que fue creado. Debido a que el contenido lo saco del RSS de Meneame me veo condicionado a lo que este formato nos devuelve, las limitaciones del XSL tampoco han ayudado mucho, pero creo que el resultado es más que satisfactorio apesar de las salvedades encontradas.

Espero que os guste, y me comuniqueis todos los fallos e impresiones.

Guia básica para editar imagenes con PHP y GD

15 oct

+ 3

Alex de Boozox, me avisa de que ha desarrollado un artículo en el que nos muestra de forma clara y concisa la forma de usar la librería GD de PHP para editar y crear imagenes.

Ficheros de configuración dependientes del servidor

29 sep

+ 15

Cuando desarrollamos una aplicación, generalmente trabajamos, inicialmente en local con unos datos para conectar a la base datos, unos ficheros con datos, unas rutas diferentes,… y esto suele provocar ediciones de fichero para que al subirlo a producción (al servidor online) no provoquen un error.

Una solución sencilla que podemos usar es la siguiente:

<?php
    // Nombre del fichero 
    $configfile = $_SERVER["SERVER_NAME"].".php";

    // Cargamos el fichero
    if (file_exists($configfile)) require $configfile;
    else die("Fichero ".$configfile." no existe");

?>

De esta forma podemos tener 2 ficheros con los datos necesarios para conectar en ambas bases de datos, con las rutas correctas para cada servidor,… completamente independientes. En mi caso, los ficheros son:

  1. localhost.php
  2. www.anieto2k.com.php

Automáticamente al entrar en la aplicación, comprobaremos $_SERVER["SERVER_NAME"] y cargaremos el fichero que sea oportuno.

Es una tontería, pero yo estuve mucho tiempo modificando los ficheros antes de subirlos y volviendo a modificarlos al volver a descargarlos :D

Listas Genius de canciones similares con PHP

16 sep

+ 15

Hace unos días Apple lanzó el Firmware 2.1 para el iPhone/iTouch y la verdad es que las mejoras han sido sustanciales, no solo en cuanto a consumo de batería, velocidad del dispositivo, o mejoras visuales. Sinó que  han añadido un nuevo sistema llamado Genius.

Genius es un algoritmo que dado una canción el te sugiere canciones similares a las que tienes incluidas en el iPhone/iTouch (o tambien mediante iTunes 8 en tu equipo).

A mi personalmente me ha encantado la idea. Y he estado pensando en como deberían tener montado el tinglado para obtener esas similitudes. Evidentemente no creo que tenga los datos relacionados en su poder, deben usar una aplicación externa para sacar esas similitudes. Supongo que Last.fm es la mejor opción, pero no he leido nada y no sé exactamente si lo han sacado de ahi…. YO SI!!:D

He hecho una prueba con la API de Last.fm, que es muy sencilla de usar y he montado un buscador de similitudes de canciones, para ello tendremos que introducir un artísta y una canción, entonces Last.fm nos devuelve las canciones similares que sus millones de usuarios sabiamente han relacionado :D

Echarle un vistazo a phpGenius (a veces me asusto con lo ingenioso que soy con los nombres xDD) y el código (no controlo muchas carácteres especiales, así que acentos o comillas harán que la aplicación cause error).