Contenido

Feliz 2008 a todos

31 dic

+ 12

El 2007 se acaba y deja paso al 2008 con unas altas espectativas para todos. Seguro que va a ser un gran año, como este que esta noche termina.

¡¡FELIZ 2008!!

Dejamos atrás un gran año:

Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre

WordPress 2.3.2, actualización urgente

30 dic

+ 39

La gente de WordPress, nos recomienda que nos actualizemos a la versión 2.3.2 urgentemente para evitarnos problemas de seguridad, descubiertos por Alex Concha, en los que la privacidad de nuestros borradores se veía comprometida. Al parecer, la versión actual es sensible a que personas sin loguear puedan ver estos posts desde nuestro blog.

El problema radicaba en una comprobación de usuario en el fichero wp-includes/query.php, en el que daba por supuesto que eras administrador si encontraba wp-admin/ en la URL del navegador, siendo sensible a situaciones como estas:

?x=wp-admin/&paged=1

Si por algún motivo no puedes actualizar, pero quieres solventar el problema, bastaría con realizar los siguiente cambios:

1. Editamos el fichero  wp-include/query.php y cambiamos la función is_admin(); por la siguiente.

function is_admin () {
        if ( defined('WP_ADMIN') )
                return WP_ADMIN;
        return false;
}

2. Despues en la página wp-admin/admin.php insertamos en la primera línea el siguiente código detrás del tag de PHP <?php

define('WP_ADMIN',TRUE);

Ojo, siempre que puedas, recomiendo que te actualizes todo y evites tocar código. Y si estás tocando el código, asegurate de tener copias de seguridad de los ficheros que modificas.

Como extra en esta nueva versión, se ha añadido la posibilidad de que puedas personalizar el error de conexión a base de datos fácilmente.

Personalizar la página de error de nuestro WordPress 2.3.2

En los casos en los que WordPress tiene problemas de conexión con la base de datos, podemos evitar la página fea de “DATABASE ERROR” haciendo uso del nuevo sistema de WordPress mediante una página externa.

wordpress_database_error.png

Únicamente, tendremos que crear una página llamada db-error.php y alojarla dentro del directorio wp-content/. Veamoslo por pasos :D

  1. Creamos una página PHP llamada db-error.php
  2. La úbicamos dentro de la carpeta wp-content/ de nuestro WordPress
  3. Cruzamos los dedos para no verla nueva :D

Idea para página de error personalizada

Puesto que el usuario no tiene culpa de que está ocurriendo un error, me parece interesante hacerle invisible este problema usando la caché generada por algún plugin de los que conocemos para aliviar la carga de nuestros servidores. Uso 1BlogCacher y solo lo he probado con este plugin, aunque indagando un poco encontraremos el patrón para encontrar nuestro fichero.

Se trata de emular el index de nuestro blog y avisarnos por correo de que existe algún problema. Este script se me ha ocurrido ahora mismo y seguro que te acordarás de mi si lo usas y recibes 500 mails diciendo que está la base de datos caida, habrá que perfeccionarlo.

//wp-content/db-error.php
<?php
if (eregi("dberror.php", $_SERVER["REQUEST_URI"])) die("No accedas directamente");
mail("TU_EMAIL", "Error de Base de datos", "Tienes que revisarlo");
if (!defined("ABSPATH")) define('ABSPATH', '../');
die(file_get_contents(ABSPATH."wp-cache/index.php/d41d8cd98f00b204e9800998ecf8427e.html"));
?>

Un par de apuntes:

Donde pone TU_EMAIL, debes indicar el mail al que quieres que le llegue el aviso. Debes tener disponible la función file_get_contents(), en caso de no tenerla, puedes usar curl() u otras alternativas. El hash (d41d8cd98f00b204e9800998ecf8427e), lo usa 1BlogCacher, para el index, por lo tanto no debería dar error en ningún blog, pero por si acaso, comprueba que existan los ficheros en la ruta indicada arriba.

Actualización de WordPress a la versión nueva

Seguimos los mismos pasos que en versiones anteriores.

  • Descargamos la versión nueva
  • Desactivamos todos los plugins
  • Accedemos al FTP
  • Renombramos la carpeta wp-content a _wp-content.
  • Subimos todos los ficheros de dentro del ZIP, excepto la carpeta wp-content.
  • Una vez subidos todos, probamos a acceder al sitio y probablemente veamos un error.
  • Renombramos de nuevo la carpeta _wp-content a wp-content
  • Ya podemos acceder al blog sin errores.
  • Nos dirigimos al panel de administración y seguimos los pasos de la actualización que ellos mismos te sugieren.
  • Listo, ya tenemos nuestro blog en WordPress 2.3.2.
  • Activamos los plugins que deseemos. 

Spellify, corrector ortográfico automático para nuestras webs

28 dic

+ 1

Spellify, es uno de los muchos correctores online que existen, salvo que este usa un sistema automatizado para nuestros elementos <input type=”text” /> usando ajax para devolver las opciones posibles mientras vamos escribiendo. [Demo][Descargar]

Internet Explorer 8 y la interacción con el Sistema Operativo

28 dic

+ 10

Este artículo ha sido la inocentada del 28 de Diciembre de 2007. Siento las molestias que haya podido originar. Si eres un desarrollador de Microsoft, por favor evita olvidar todo lo que hay en este post, no nos hagas sufrir :D

Via Ajaxian, descubrimos lo que el equipo de desarrollo está haciendo con Internet Explorer 8. Visto que la carrera hacia los estandares es algo que no van a conseguir a corto plazo, han decidido apostar por el usuario y plagar a su navegador de una serie de funcionalidades que harán mucho más interesantes la interacción entre el usuario y el sistema operativo.

ieribbon1xv4.jpgieribbon3ph3.jpg

No hace falta decir que estas nuevas funcionalidades son exclusivas para Windows XP (SP3), Vista y superiores, sobre Internet Explorer 8. Que aunque el estado de dichas funcionalidades es de beta están recibiendo un alto grado de aceptación por parte de los desarrolladores nipones.

La magia de navigator.parent

La apuesta de Microsoft por las redes sociales lo han llevado a crear la propiedad parent para el objeto navigator, que nos permite acceder directamente al sistema operativo y en el cual podremos encontrar funcionalidades realmente interesantes como las que veremos a continuación.

var SO = navitator.parent;  

Interacción con los dispositivos de audio

Como era de esperar, la última vuelta de tuerca de M$ ha sido reforzar el Javascript de Internet Explorer 8, a los estandares HTML5 favoraciendo la interacción con los dispositivos del que el usuario tenga instalado. Con el método onChangeSong(), nuestro navegador nos avisará cuando Windows Media Player cambie de canción, algo realmente útil para aplicaciones sociales, tipo Twitter que nos informarán de la canción que están escuchando nuestros usuarios.

Ejemplo 

var SO = navigator.parent;
SO.onChangeSong = function(song) {
	alert("Título: " + song.title + "\nAutor: " + song.title + "\n Duración: " + song.duration);
}

Interacción con dispositivos de video

Los dispositivos de video tambien se verán afectados por estas mejoras, y ahora será posible conocer las películas que nuestro usuario tiene agregadas a las listas de reproducción de su Windows Media Player mediante una simple función, getMovieList(). De esta forma crear aplicaciones p2p que nos permitan conocer las películas que tiene cada usuario será coser y cantar.  Por desgracia no detecta películas .ogg, ni .mp4 optimizadas para iPhone/iPod Touch

var SO = navigator.parent;
SO.getMovieList = function(movie) {
	alert("Título: " + movie.title + "\nDirector: " + movie.director + "\n Formato: " + movie.format);
}

Interacción con MSN Messenger

La aplicación estrella de Microsoft, MSN Messenger, no iba a ser menos, dotada con varios método y propiedades es sin dida la funcionalidad más esperada y que más revuelo está causando entre la comunidad de desarrolladores ya que la interacción con este protocolo hasta ahora había sido algo realmente complicado y casi imposible de integrar con aplicaciones web. Ahora con este ser de funcionalidades, será realmente interesante y fácil desarrollar aplicaciones web basadas en MSN.

API

var SO = navigator.parent; // Sistema Operativo
var MSN = SO.messenger; // Messenger

MSN.status; // Estado del usuario (0=inactivo, 1=conectado, 2=ausente, 3=salí a comer)
MSN.statusText; //Texto del estado
MSN.nickname; //Nombre del usuario
MSN.email; //Email del usuari
MSN.image; //Imagen del usuario
MSN.lastConnect; // Timestamp de la última conexion
MSN.contactlist; // Array de contactos

var list = MSN.contactlist;
for each(var contact in list) {
	contact.nickname; //Nombre del contacto
	contact.email; //Email del contacto
	contact.image; //Imagen del contacto
	contact.lastConnect; //Ultima conexión del contacto
	contact.status; //Estado del contacto
	contact.statusText; //Estado del contacto
}

Por desgracia, estas mejoras únicamente estarán disponibles para usuarios Windows y sobre Windows XP (SP3)/Vista, por ese motivo tendremos que comprobar si tenemos estas funcionalidades disponibles antes de usarlas.

Ejemplo 

if (navigator.parent) {
// Código IE8
} else {
//código alternativo
}

[Via] / [Imagenes via Baluart]

Ingrid, el Datagrid de jQuery

28 dic

+ 4

Ingrid, es un script desarrollado en javascript capaz de convertir una tabla estática en una dinámica, con posibilidad de realizar filtros y paginaciones para facilitar al usuario el visionado de los datos que la compongan. SE TRATA DE UN SCRIPT COMPLETAMENTE INNACCESIBLE [Demo][Descargar]

mooLabeler, mejora la información de tus imagenes.

27 dic

+ 2

mooLabeler, es un script desarrollado con MooTools que nos permite mejorar la información que ofrecemos con nuestras imagenes, usando el atributo title para mostrar una información muy valiosa para los usuarios. [Demo]

Firefox 3 acercandose al HTML5

26 dic

+ 1

Cuando hablamos de estandares, no podemos evitar asociar a WebKit con el nuevo HTML 5, y es que la verdad están haciendo un gran trabajo desarrollando las nuevas mejoras. Pero Firefox 3, está pasando algo más desapercibido por el tema, aunque tambien ha dado un paso considerable hacia el futuro estandar web.

Gestión de protocolos 

Una de las opciones que integra, es la opción de registrar protocolos personalizados,  o lo que es lo mismo, nos permite definir para ciertos tipos de protocolos, unas acciones personalizadas. Imaginemos que tenemos una aplicación en nuestra web que envia faxes, ¿por que delegar el envio de faxes a las aplicaciones del cliente?.

De esta forma, nos evitamos sorpresas y no dependemos de lo que el usuario tiene instalado en su máquina. Actualmente, un PC por defecto al pulsar sobre una dirección de correo, esta le asocia a la aplicación de correo instalada en su máquina, en Windows Outlook, en MacOS Mail,…

Pues con esta nueva gestión de protocolos, podremos dar una opción más al usuario haciendo nuestra aplicación sea 100% accesible, independientemente del dispositivo que estemos usando.

Ejemplo de uso

El método registerProtocolHandler(), formará parte del objeto navigator, y hará referencia al navegador.

navigator.registerProtocolHandler("mailto",
                                 "https://mail.google.com/mail?view=cm&tf=0&to=%s",
                                 "Google Mail");

Eventos Online y Offline

Otra opción que el nuevo estandard nos acerca y Firefox 3 nos permite comenzar a usar, es la posibilidad de conocer si estamos en modo online o offline, permitiendonos actuar de una forma u otra dependiendo del estado de nuestra conexión. La integración de almacenamiento DOM, nos permite alojar datos en una base de datos local, haciendo posible que, por ejemplo, almacenemos en dicha base de datos los datos que serán enviadas en cuanto volvamos a disponer de conexión.

Para ello usaremos el flag onLine del objeto navegator.

Ejemplo

var estado = navigator.onLine ? "ONLINE" : "OFFLINE";

Gestión del foco

Una funcionalidad realmente interesante es la relacionada con el foco de los elementos, con la nueva especificación, podemos conocer si un elemento es el activo en ese momento y tratarlo de una forma diferente a si no lo és. Usando la propiedad activeElement, de los elementos HTML podremos conocer el estado de dicho elemento. Por otro lado, tambien podemos conocer si el elemento activo (o inactivo) dispone del foco, para ello usaremos la propiedad hasFocus.

Firefox 3, ahora ya integra estas dos propiedades para ayudarnos a hacer aplicaciones más complejas.

Eventos Drag & Drop

Firefox 3 integra dos nuevos eventos para determinar si estamos haciendo uso del famoso drag&drop sobre los elementos de nuestra página. Permitiendonos delegar al navegador la tarea de crear dichos elementos movibles.

Para ello, el estandar nos ofrece una gran cantidad de eventos para tener el control en todo momento de nuestros elementos. 

Ejemplo

  var elem = document.getElementById("elem");
  elem.addEventListener("dragstart", startDrag, false);
  elem.addEventListener("drag", eventReceived, false);
  elem.addEventListener("dragend", eventReceived, false);

  var target = document.getElementById("target");
  target.addEventListener("dragenter", eventReceived, false);
  target.addEventListener("dragleave", eventReceived, false);
  target.addEventListener("dragover", eventReceived, false);
  target.addEventListener("drop", dodrop, false);

[Demo (Requiere Firefox 3)]

window.onorientationchange, conoce la orientación de tu iPhone

25 dic

+ 2

Via Ajaxian, descubor que Apple ha publicado un ejemplo con el que podremos conocer la orientación de nuestro dispositivo. Conociendo si está apaisado o vertical, podemos controlar, aún más nuestras aplicaciones web. 

Mediante una propiedad del window de Safari, podremos conocer en que posición está colocado nuestro dispositivo, y mediante un método creado para esto, nos avisará en el momento en que esta posición cambie.

Ejemplo

window.onorientationchange = function(){
  var orientation=window.orientation; //Orientación actual del dispositivo
  switch(orientation) {
    case 0: ...; break;
    case 90: ...; break;
    case -90:  ...; break;
  }
}

De esta forma en cuanto el dispositivo cambie de orientación, nos avisará mediante el método onorientationchange y mediante javascript podremos manipular nuestra página para adaptarla a las nuevas condiciones. 

WP-OpenSearch, añade tu buscador al navegador

25 dic

+ 7

Hoy Hector comentaba la forma de integrar OpenSearch en tu blog de una forma fácil y asequible para cualquiera. Y me he marcado un reto, hacer aún más fácil. ¿Y como conseguirlo? Pues con un plugin :D

¿Que es OpenSearch?

OpenSearch es un estandard basado en XML que nos ayuda a publicar resultados de busqueda. Con OpenSearch ayudas al usuario a que realice busquedas por tu sitio directamente desde el navegador, en caso de Firefox, integrandoló como motor de busqueda en el panel superior derecho.

wp-opensearch.jpg

De esa forma, el usuario únicamente tiene que seleccionar el sitio en el que quiere buscar, introducir la palabra, o palabras, a buscar y pulsar intro directamente desde su navegador. Mostrando los resultados directamente en una pestaña. Esto en mi caso es realmente útil ya que la mayoría de cosas que uso en mi día cotidiano las he comentado en el blog y buscar en él me ayuda una infinidad.

WP-OpenSearch

WP-OpenSearch, es un plugin que te facilita la fácil tarea de integrarlo en tu WordPress, únicamente con estos 2 pasos podemos tener ya integrado OpenSearch en nuestro WordPress.

  1. Descargamos el plugin
  2. Descomprimimos y subimos a nuestro directorio de plugins (wp-content/plugins/)
  3. Activamos desde el panel de administrador

Quizas debamos vaciar la caché generada por WP-Cache, 1BlogCacher o SuperCaché, para ver los resultados. Pero una vez activado, ya tendremos disponible para todos los usuarios la siguiente opción:

wp-opensearch2.jpg

Descargar

Más mejoras para WebKit

25 dic

+ 2

Es que no paran, ni siquiera en estas fechas donde lo último en lo que habría que pensar es en trabajar. Pero esto a nosotros nos va de perlas, ya que una vez más los chicos/as de WebKit han demostrado estar a la cabeza en cuanto a cumplimiento de estandares se refiere. 

Un ciclo de desarrollo basado en betas permite que nosotros, los usuarios, podamos disfrutar de estas nuevas características en el momento en el que se desarrollan, de ahí que seamos nosotros los encargados en testear la nueva funcionalidad y reportar los posibles errores que encontremos.

Esta ves, nos sorprenden con una serie de mejoras entre las que podemos encontrar, una versión mejorada del soporte HTML5 de canvas, que gracias a la ayuda de la gente de Adobe han logrado unir gráficos mediante Cairo.

webkitcairocanvasshad.png

Tambien han depurado el último ticket de la serie que permitía que la cara del Acid2 se viera perfectamente. Otro navegador que se une a la lista de los selectos que han pasado la prueba, a ver si sigue pasandola más adelante.

La tecnología móvil es algo que a nadie se le quiere escapar, y por ello se han puesto las pilas en este tema solventando algunas deficiencias de las versiones portátile. La gente de Google tambien ha contribuido con el proyecto, ayudando a mejorar la decodificación de imagenes entre GTK+ y Android. Ahora las funcionalidades diseñadas para Android serán más fácil de usar con GTK+. Además, la plataforma Maemo/Hildon, usada por Nokia en Tables y Ubuntu`s mobile dispone de una versión oficial de GTK+ y se ha mejorado el tratamiento de Javascript para los modelos N800/810.