Contenido

La guia definitiva sobre GET vs POST

17 Ago

+ 3

ThinkVitamin publica un artículo sobre las diferencias entre GET y POST muy interesante.

WordPress 2.9 con papelera de reciclaje

17 Ago

+ 20

Una de las funcionalidades que nos podremos encontrar en el nuevo WordPress 2.9 es la posibilidad de usar una papelera de reciclaje. Al igual que en los sistemas operativos, será un lugar en el que el post no aparecerá listado en ningún filtro (borradores, publicados, futuros,..) pero seguirá en la base de datos.

post-trash
(Ver Imagen)

Esta opción permitirá recuperar el artículo y comentarios previamente borrados, sacándolo de la papelera de reciclaje.

trash-comment
(Ver Imagen)

Por defecto, podremos especificar cada X días queremos que se borren los elementos que haya dentro de la papelera, para ello añadiremos el siguiente código al fichero wp-config.php.

define( 'EMPTY_TRASH_DAYS', 30 ); // 30 días

Para los desarrolladores

Los desarrolladores, tendremos una serie de actions que podremos usar para extender dicha funcionalidad.

  • untrash_post: Antes de recuperar un post
  • untrashed_post: Despues de recuperar un post
  • untrash_comment: Antes de recuperar un comentario
  • untrashed_comment: Despues de recuperar un comentario

Peticiones HTTP con WordPress

17 Ago

+ 3

En PlanetOzh hacen un interesante tutorial de como lanzar peticiones HTTP mediante la API de WordPress. Desde la versión 2.7, disponemos de un interfaz muy sencillo para lanzar peticiones HTTP a servicios externos.

Peticiones HTTP

El fichero http.php que podemos encontrar en wp-includes/ nos permite hacer llamadas tan sencillas como estas:

$request = new WP_Http;
$result = $request->request( 'http://some.url.you-need.to-fetch' );

Como podemos ver, hacer las llamadas es realmente sencillo. Pero aquí no se queda la cosa:

Peticiones GET

Tambien podemos lanzar peticiones GET informando los parámetros como parte de la URL.

$url = 'http://search.twitter.com/search.json?q=rabbits';
$request = new WP_Http;
$result = $request->request( $url );
$json = $result['body'];

Peticiones POST

Si por lo contrario queremos enviar parámetros por POST, simplemente tendremos que cambiar la forma de enviarlos:

$body = array(
 'nick' => 'ozh',
 'mood' => 'happy'
);
$url = 'http://your.api.url/';
$request = new WP_Http;
$result = $request->request( $url, array( 'method' => 'POST', 'body' => $body) );

Respuesta

Una vez lanzada la petición, obtendremos una serie de parámetros con información sobre la respuesta del servidor externo.

  • headers': Un array con las cabeceras de la respuesta
  • 'body': La respuesta del servidor.
  • 'response': Un array con los códigos  HTTP  de respuesta generalmente array('code'=>200, 'message'=>'OK')
  • 'cookies': Un array con información de la cookie.

Ejemplo práctico

// Datos de Twitter
$username = 'joe'; // Twitter login
$password = '123456'; // Twitter password
$message = "Publicando desde la API";
// Lanzamos la petición HTTP
$api_url = 'http://twitter.com/statuses/update.xml';
$body = array( 'status' => $message );
$headers = array( 'Authorization' => 'Basic '.base64_encode("$username:$password") );
$request = new WP_Http;
$result = $request->request( $api_url , array( 'method' => 'POST', 'body' => $body, 'headers' => $headers ) );

Estas pocas líneas, nos permiten enviar a Twitter un actualización directamente desde nuestro WordPress, simplemente tendremos que informar los datos del usuario y lanzar la petición a la URL que obtenemos en la API de Twitter.

El tag HTML5 dialog

13 Ago

+ 10

El tag HTML5 <dialog />, pensado para marcar una conversación, un chat u otro sistema de interacción entre dos o más interlocutores, aporta un valor semántico a nuestro código.

<dialog>
 <dt> <time>14:22</time> egof </dt>
 <dd> I'm not that nerdy, I've only seen 30% of the star trek episodes</dd>
 <dt> <time>14:23</time> kaj</dt>
 <dd> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy</dd>
 <dt> <time>14:23</time> egof</dt>
 <dd> it's unarguably</dd>
 <dt> <time>14:24</time> kaj</dt>
 <dd> you are not helping your case</dd>
</dialog>

Como podemos ver en el código superior, marcamos el texto como un <dialog /> que posteriormente seccionamos en <dt /> y <dd /> para especificar nombre y frase asociada a esa persona. Tambien usamos el tag <time /> para indicar la hora de la conversación.

Twitter en HTML5

<dialog>
 <dt><a href="http://twitter.com/akamike">@akamike</a>, <time datetime="2009-08-11T12:35:54">13 minutes ago</time></dt>
 <dd>Where is a good place to eat in town?</dd>
 <dt><a href="http://twitter.com/brucel">@brucel</a>, <time datetime="2009-08-11T12:37:56">11 minutes ago</time></dt>
 <dd><a href="http://twitter.com/akamike">@akamike</a> Have your tried The Swine's Flu pub lunches?</dd>
 <dt><a href="http://twitter.com/Rich_Clark">@Rich_Clark</a>, <time datetime="2009-08-11T12:38:04">11 minutes ago</time></dt>
 <dd><a href="http://twitter.com/akamike">@akamike</a> If you like seafood, try the restaurants at the waterfront</dd>
 <dt><a href="http://twitter.com/jackosborne">@jackosborne</a>, <time datetime="2009-08-11T12:40:02">9 minutes ago</time></dt>
 <dd><a href="http://twitter.com/akamike">@akamike</a> What <a href="http://twitter.com/brucel">@brucel</a> said, or there are lots of good bakeries on the high street.</dd>
 <dt><a href="http://twitter.com/spambot148">@spambot148</a>, <time datetime="2009-08-11T12:45:16">4 minutes ago</time></dt>
 <dd><a href="http://twitter.com/akamike">@akamike</a> Gain 1000 followers in 5 minutes!</dd>
</dialog>

Este ejemplo basado en Twitter y sacado de html5Doctor permite visualizar como debería ser la portada de Twitter en HTML5.

Short URL, plugin para crear mini URL’s en tu WordPress

13 Ago

+ 10

Con la llegada de Twitter y la limitación de carácteres se han puesto de moda las mini URL’s. Estas mini URL’s permiten tener una URL funcional pero en un menor tamaño (de carácteres).

Con Short URL, podrás disponer de esta funcionalidad directamente en tu WordPress, usando tu dominio como mini URL.

screenshot-1
(Ver Imagen)

Instalación

  1. Sube el fichero short-url.php a /wp-content/plugins/short-url-plugin/
  2. Sube el fichero u.php a la raiz de tu WordPress.
  3. Activa el plugin desde el panel de administración.
  4. Entra en Plugins > ShortURL para configurar los permalinks.
  5. Tus miniURL’s tendrán este aspecto http://www.yourdomain.com/u/5

Descargar

Puedes descargarlo directamente desde aquí.

File API: La W3C tiene en cuenta a los ficheros

12 Ago

+ 5

Ajaxian informa hoy de la aparición del primer borrador de la File API propuesta por la W3C. Se trata de una especificación para la gestión de ficheros en las nuevas aplicaciones web.

En la especificación encontramos la aparición de 4 Objetos:

  • FileList: Secuencia de elementos tipo File que cargamos mediante el uso del tag <input type="file" /> en modo Upload.
  • FileData: Interfaz que tiene la información del fichero e incluye los métodos de acceso asíncrono.
  • File: Acceso directo al nombre del fichero y el tipo de fichero del que se trata.
  • FileError: Interfaz para gestionar los errores ocurridos
// HTML
<input type="file"  multiple accept="video">
<!-- Permitirmos subir múltiples ficheros de video -->


// Javascript


// Cargamos el primero fichero
var file = fileList.files[0];

// Si existe fichero
if (file) {
 // Realizamos la petición asíncrona y devolvemos handleURL()
 file.getAsDataURL(handleURL);
}

// Función de callback
function handleURL(fileAsDataURL, error) {

 // Si tenemos la URL
 if(fileAsDataURL){
 // Podemos usarla para mostrar una imagen (por ejemplo).
 image.src = fileAsDataURL;

 } else { // Si no tenemos URL
 eMsg = error.code;
 if(eMsg == error.NOT_READABLE_ERROR){
 dump("File Not Readable");
 }
 }
}

Especificación File API

WordPress 2.8.4: Actualización de seguridad

12 Ago

+ 12

Si hace unos días se hablaba de una nueva vulnerabilidad descubierta en WordPress 2.8.x. Ahora hay que hablar de la actualización a 2.8.4 que soluciona este problema y que hace que nuestro WordPress sea aún más seguro. Altamente recomendable.[Descargar]

Navegadores modernos: ¿para que tanta velocidad?

11 Ago

+ 26

Con la llegada de Google Chrome, parece que la palabra «velocidad» se ha puesto de moda.  ¿Pero realmente necesitamos tanta velocidad?

He estado haciendo unas pruebas muy rústicas, osea he copiado la página de Yahoo! España en una copia local y le he añadido 2 líneas de Javascript, una al inicio de la página y otra al final de la misma.

<script type="text/javascript">var timeTest = new Date().getTime();</script>
[...] // Toda la página
<script type="text/javascript">console.log("Tiempo: " + (new Date().getTime() - timeTest) + "ms");</script>

Misteriosamente, tiene un par de <noscript /> fuera del </html>, por eso he puesto la línea al final del fichero, fuera del </html>.

Aclaraciones

No se deben hacer ningún tipo de caso a estas pruebas, no tienen ningún valor científico son simplemente una pequeña prueba que he montado.

La prueba se ha realizado sobre la misma página, en el mismo ordenador, con las mismas aplicaciones abiertas y varios navegadores. Se han hecho 5 cargas y se ha sacado una média aritmética de los resultados obtenidos.

Resultados

Los resultados que he obtenido en la primera carga de la página, la siguientes se notaba el caché de partes de la misma,  son los siguientes.

// Windows XP
Firefox 3.5.2: 2566ms.
Chrome 3.0.195.6: 2435ms *
Safari 4.0: 2450ms.
Opera 10.00 Beta 2: 2422ms.
Internet Explorer 8: 2860ms.

* Despues termina de cargar las imagenes.

imagen(2)
(Ver Imagen)

Hemos de tener en cuenta que Google Chrome, el más rápido de los testeados ha cargado las imagenes despues de mostrar el alert() lo que hace que el tiempo sea tan bajo. Pero esta cutre medición no da para más :D.

La mayor diferencia, la encontramos entre IE8 vs Opera, y es de 438ms. Una diferencia realmente insignificante…

Realmente, ¿es tan importante la velocidad?

PD: No he tenido en cuenta la velocidad de apertura que es la que más fastidia a los usuarios de Firefox.

Mozilla Firefox 3.6 Alpha 1: Lo que nos importa a los desarrolladores

11 Ago

+ 7

Hace unos días que está disponible la última versión Alpha de Firefox, concretamente la versión 3.6 Alpha 1 en la que ya se empiezan a ver alguna de las funcionalidades que veremos en esta nueva versión.

Para los desarrolladores, estas versiones Alpha son muy reveladoras ya que se van incorporando nuevas funcionalidades que podremos usar en nuestras aplicaciones y que desde ya podemos ir probando:

  • Mejoras de velocidad en el motor de Javascript, TraceMonkey
  • Mejoras de rendimiento en el manejo de DOM, consiguiendo mejorar la velocidad de interacción con los elementos.
  • Soporte para -moz-background-size una propiedad CSS que nos permite especificar el tamaño del background.
  • Soporte de CSS Gradients.
  • Soporte para múltiples backgrounds.
  • Añadida la unidad rem como una unidad CSS unit.
  • image-rendering para imagenes, backgrounds, videos y <canvas />.
  • Se ha eliminado el método getBoxObjectFor(). No era un método estandar.
  • Ahora se envía un evento hashchange cuando se usan anclas.
  • Ya tenemos disponible soporte para la Geolocation address de donde leer información.
  • Soporte del atributo complete en document.readystate.

Nueva versión de Google Chrome: 30% más rápida todavía

6 Ago

+ 22

Google Chrome llegó pegando fuerte y desde que apareció en escena ha sido intratable. Aunque Firefox, por el momento, ocupa el 80% de mi corazón he de admitir que Google Chrome se perfila como el navegador web que aNieto2k usará en 2010.

Y es que cada vez que sacan una versión mejoran la velocidad. No solo del Javascript, sinó de la carga en general de la página, peticiones a DNS, …

Ayer, 5 de Agosto,  se publicó una nueva versión, beta todavía, que nos ofrece una mejoría de velocidad del 30% sobre la velocidad de la anterior versión.

New Tab

google.chrome
(Ver Imagen)

Entre las mejoras que nos encontramos en esta nueva versión, hay que destacar la posibilidad de personalizar a «New Tab». Hasta el momento, teníamos una página estática con los sitios más visitados y algunos enlaces más, ahora nos permite mover estos sitios o  fijarlos en un sitio.

google.chrome2
(Ver Imagen)

Omnibox

google.chrome3
(Ver Imagen)

Además el Omnibox, el cuadro de búsqueda, ha sido modificado para mostrar de forma más gráfica información relacionada encontrada en los marcadores, búsquedas, sitios sugeridos de tu histórico de navegación.

Themes

google.chrome4
(Ver Imagen)

La posibilidad de añadir themes a tu Chrome hace que nuestra ventana a Internet esté más adaptada a lo que queremos de ella. Existe un pequeño listado de themes con los que podemos ir modificando el aspecto del navegador.

HTML5

Quizás una de las mejoras que desde el propio Google han querido priorizar ha sido la aparición del tag <video /> en este navegador. Una de las apuestas del gigante de internet. Además disponemos desde ya, de Web Workers que harán las delicias de los desarrolladores más ansiosos.

Descargar