Blog

Actualizar a WordPress 3.2
Ya comenté en otro post como instalar WordPress en la empresa donde tengo alojado mi dominio (1&1), pues bien, la herramienta de edición y publicación evoluciona y presenta nuevas versiones con interesantes novedades. En este post describiré cómo exportar la base de datos, hacer una copia de seguridad de la actual versión de WordPress y actualizar de forma automática a WordPress 3.2.

Por qué actualizar a WordPress 3.2

A continuación hago un rápido repaso de las novedades de la versión de WordPress, para que compruebes si merece la pena actualizar. Personalmente considero que sí merece la pena:
- Nueva interfaz de administración: Tiene un aspecto más ligero y se ha rediseñado totalmente el menú de la izquierda, con un funcionamiento más fluido.
- El editor de entradas y páginas es más minimalista y su funcionamiento ha mejorado
- Nuevo modo de escritura sin distracciones o Zen mode. Con un sólo clic de ratón eliminamos cualquier menú, enlace o botón de la pantalla, dejando únicamente el área de escritura. Sólo al pasar el ratón por la parte superior podemos ver las diferentes opciones. Esta es mi nueva funcionalidad favorita.
- Mejoras en las actualizaciones. En actualizaciones menores dentro de la misma versión, no se tocarán los ficheros core de la versión.
- Mejoras de velocidad. Se ha trabajado en la carga lenta de PHP y un parche para que el menú de administrador cargue más rápido (Aquí no he notado grandes diferencias).
- Mejoras en la API de listado de tablas.
- El escritorio no soportará Internet Explorer 6 y te avisará si la versión de tu navegador es inferior a Chrome 11, Safari 5, Firefox 4, Opera 11 e IE 9.
- Twenty Eleven. Nuevo tema por defecto para el año 2011. Es sencillamente genial, es un tema muy sencillo y claro diseñado según el enfoque del Responsive Design, es decir, que el diseño de las páginas se verán perfectamente en cualquier dispositivo, con cualquier tipo de pantalla. La única pega es el gran tamaño de la imagen de cabecera (1000 x 288).
- Además ahora, mientras estés autenticado y estás visualizando tu publicación, podrás ver una barra wordpress en la parte superior con enlaces directos a las herramientas más utilizadas.
En el siguiente vídeo se reflejan todas las novedades enumeradas anteriormente:

Haciendo copias de seguridad

Si nos hemos decidido y vamos a actualizar, es una buena costumbre realizar una copia de seguridad de nuestra base de datos MySql, así como de los ficheros de la versión que tenemos actualmente. De esta forma si ocurre algo no deseable, no perderíamos nuestros artículos, usuarios, tags, categorías, comentarios o ficheros que hayamos personalizado. En caso de que no desees hacer copias de seguridad, o tu empresa de hosting no es 1&1 puedes ir directamente al siguiente paso. Existen diferentes maneras de hacer esto (el propio wordpress incorpora herramientas para realizar un backup) pero esta vez voy a describir cómo realizarlas desde el panel de control de mi proveedor de hosting 1&1.

Para la base de datos:
1. Desde la pantalla principal del panel de control, pulsamos sobre el enlace Gestión de MySQL.
2. Aparecerá una pantalla con la lista de instancias de bases de datos que disponemos. Pulsamos sobre el botón phpmyAdmin de la base de datos que esté asociada a la instalación de wordpress. Si sólo tienes una como es mi caso pulsa el botón.
3. Aparecerá la pantalla mysql-control-center en la que aparecen las tablas de la base de datos (izquierda) y la configuración de la misma, a la derecha. Pulsamos el enlace Exportar.
4. En la siguiente pantalla aparecen todas las opciones para exportar. Como la exportación va a ser un fichero con los scripts de creación e inserción en la base de datos de todos los datos que tengamos, podemos personalizar o afinar las sentencias que genera. Si no tenemos conocimientos de BBDD, dejamos los valores por defecto y pulsamos Continuar.
5. En unos segundos aparecerá el contenido del fichero generado. Debemos seleccionar todo y copiarlo para pegarlo posteriormente en un fichero local de texto en nuestro equipo. Si el fichero lo renombramos por ejemplo BBDD16_07_2011.sql, tendremos una «fotografía» de la BBDD en un día determinado.
Para los ficheros de WordPress de la versión actual, podríamos utilizar un cliente FTP y bajarnos el directorio de instalación pero esta vez vamos a crear un fichero comprimido y a continuación lo bajaremos a nuestro disco local:
1. Desde la pantalla principal del panel de control, pulsamos sobre el enlace Gestión de Ficheros.
2. Aparecerá la pantalla con el árbol de carpetas a la izquierda, y el contenido a la derecha. En el árbol de carpetas pulsamos sobre la carpeta raíz ‘/’ y en la parte de la izquierda seleccionamos la carpeta que contiene la instalación de WordPress (en mi caso blog), es la que contiene a las carpetas wp-admin, wp-content y wp-includes. Pulsamos sobre el menú Archivo Zip y luego sobre Comprimir.
3. Aparecerá un diálogo para introducir el nombre del fichero zip. Podemos nombrarlo, como hicimos con la base de datos con la fecha actual (blog16_07_2011.zip). Generará en la carpeta raíz un fichero con todo el contenido.
4. Para bajarlo del servidor a nuestro equipo, seleccionamos dicho fichero y pulsamos sobre el menú Transferencia y luego sobre Descargar.
Con estos dos sencillos pasos nos hemos cubierto las espaldas ante posibles desastres.

Actualización a WordPress 3.2

Desde el escritorio de adiministración de WordPress nos avisa de que hay una nueva versión de la herramienta. Pero antes de actualizar es conveniente desactivar todos los plugins que se encuentren activos. En el menú plugins pulsamos sobre Plugins instalados para listar la lista de los mismos. Desde aquí desactivamos todos los que se encuentren activos.

A continuación vamos al menú Actualizar y pulsamos sobre el botón correspondiente de la actualización de WordPress 3.2. Lo normal es que haya dos opciones, una para la versión en inglés y otra para la versión en castellano, así que seleccionaremos la que tiene el sufijo es_ES. Aquí comienza el proceso de descarga e instalación automática de la actualización. Lo normal es que no haya problemas, pero mucho ojo: si se trata de un salto de una versión más antigua, reemplazará los ficheros que hayamos modificado o personalizado.

Para acabar y si todo ha ido correctamente, debemos ir activando los plugins uno a uno, es decir, activamos y probamos si es compatible con la versión. En caso negativo, lo dejamos desactivado hasta que encontremos alguna actualización o solución. Puedes aprovechar como en mi caso para actualizar el tema, yo me decanté por el TwentyEleven, un tema claro y sencillo que además, gracias al responsive design muestra el blog correctamente tanto en PC, Tablets, iPhone y Android.
17 julio, 2011

Nivo Slider, un slideshow con jQuery

Para los que nos dedicamos al desarrollo y diseño de aplicaciones para Internet nos ha sorprendido la rapidez con la que se han propagado los slideshows (también llamados sliders). No hay web actual que se precie que no tenga uno. ¿Y qué es y para qué sirve? Se trata de un componente que presenta una serie de imágenes ordenadas con información seleccionada, que se van presentando una tras otra manteniendo cada una visible un breve periodo de tiempo. Estas imágenes representan una información seleccionada que queremos destacar y pueden incluir un enlace a dicha información ampliada e incluso una etiqueta con una breve descripción. Es muy útil en páginas muy densas con mucha información para, en el mismo espacio, destacar más de un tema.

Existen multitud de estos componentes dependiendo de la funcionalidad que incorporan. En nuestro caso, para una nueva web, el usuario nos pidió incorporar un sencillo slideshow y nos hemos decantado por Nivo Slider. Incorpora 16 efectos de transición, soporta enlaces a imágenes y navegación entre imágenes mediante teclado. Su utilización es sencilla y la versión empaquetada sólo ocupa 15Kb. por lo que se agradece su ligereza. Es un código de libre uso bajo la licencia MIT. Funciona en los siguientes navegadores:

Internet Explorer v7+
Firefox v3+
Google Chrome v4+
Safari v4+
Opera v10+

Para usarlo en nuestros proyectos necesitamos incluir jQuery, el script de Nivo Slider (jquery.nivo.slider.pack.js) y el CSS de Nivo Slider (nivo-slider.css). Además necesitamos añadir un poco de código HTML a nuestra página. Suele ser un div con imágenes (images), de hecho, sólo imágenes o imágenes dentro de enlaces están permitidas dentro del div que representa el slider. Cualquier otro código HTML hará que no funcione el control.

<!-- Dentro de la sección <body> de la página --> 
<div id="slider"> 
 <img src="images/slide1.jpg" alt="" /> 
 <a href="http://dev7studios.com">
 <img src="images/slide2.jpg" alt="" title="#htmlcaption"/>
 </a> 
 <img src="images/slide3.jpg" alt="" title="Este es un ejemplo de un caption"/> 
 <img src="images/slide4.jpg" alt="" /> 
</div> 
<div id="htmlcaption" class="nivo-html-caption"> 
 <strong>Esto</strong> es un ejemplo de un caption <em>HTML</em> con <a href="#">un enlace</a>. 
</div>

Para que el slider se vea correctamente mientras está cargando añadiremos algo de estilos CSS:

#slider { position:relative; width:618px; /* Change this to your images width */ 
 height:246px; /* Change this to your images height */ 
 background:url(images/loading.gif) no-repeat 50% 50%; 
 } 
#slider img { position:absolute; 
 top:0px; left:0px; display:none; 
 } 
#slider a { border:0; display:block; }

Para enlazar la funcionalidad del slider con la capa que hemos cargado previamente cuando cargamos la página, llamamos al método nivoSlider() de la siguiente forma:

<script type="text/javascript"> 
 $(window).load(function() { 
 $('#slider').nivoSlider(); 
 }); 
</script>

Este método puede invocarse sin parámetros o bien con alguna de las opciones disponibles:

$('#slider').nivoSlider({
 effect:'random', // Efecto de transición: 'fold,fade,sliceDown'
 slices:15, // Para animaciones 'slice'
 boxCols: 8, // Para animaciones 'box'
 boxRows: 4, // Para animaciones 'box'
 animSpeed:500, // Velocidad de la transición
 pauseTime:3000, // Cuánto tiempo en milisegundos se visualiza una imagen
 startSlide:0, // Imagen de comienzo (empezando por cero)
 directionNav:true, // Si queremos que aparezcan controles para siguiente y anterior
 directionNavHide:true, // Sólo cuando el cursor se sitúa sobre el componente
                            se visualizará la navegación
 controlNav:true, // 1,2,3... navegación
 controlNavThumbs:false, // Usar miniaturas para el control de la navegación
 controlNavThumbsFromRel:false, // Usar imagen rel para miniaturas
 controlNavThumbsSearch: '.jpg', // Reemplazar este patrón del nombre de la imagen...
 controlNavThumbsReplace: '_thumb.jpg', // ...con esto para las imágenes miniatura
 keyboardNav:true, // Usar las flechas izquierda y derecha para navegación
 pauseOnHover:true, // Parar navegación al pasar el ratón sobre el componente
 manualAdvance:false, // Forzar transiciones manuales
 captionOpacity:0.8, // Opacidad para los caption o títulos de las imágenes
 prevText: 'Ant', // Texto de navegación hacia la izquierda
 nextText: 'Sig', // Texto de navegación hacia la derecha
 beforeChange: function(){}, // Función que se ejecuta antes de una transición
 afterChange: function(){}, // Función que se ejecuta después de una transición
 slideshowEnd: function(){}, // Función que se ejecuta después de que todas
                                las imágenes se han mostrado
 lastSlide: function(){}, // Función que se ejecuta cuando la última imagen se visualiza
 afterLoad: function(){} // Función que se ejecuta cuando se carga el componente
});

Hay gran variedad de efectos para las transiciones. Los valores posibles para la opción effect son: sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse,boxRainGrow, boxRainGrowReverse. Para un uso avanzado, incluir Nivo Slider en WordPress o el uso de imágenes miniatura, podemos visitar la página oficial http://nivo.dev7studios.com/.

1 julio, 2011

Cómo solucionar los problemas con la wifi en portátiles HP con Ubuntu 11.04
Aunque la instalación de Ubuntu 11.04 no resulta complicada una vez instalado el sistema podemos encontrarnos con algún problema ocasionado por los drivers propietarios del hardware del equipo (tarjeta gráfica, wifi, etc).

Mi ordenador portátil es un HP Pavilion con una tarjeta inalámbrica Broadcom y aunque durante el proceso de instalación reconoció la tarjeta y se conectó vía wifi para obtener actualizaciones, una vez terminada la instalación y tras reiniciar el sistema no detectaba la misma.

El procedimiento que seguí para poder habilitarla pasaba por reinstalar los paquetes con el gestor de paquetes Synaptics:
1. Conectar el equipo al router directamente con el cable Ethernet.
2. Abrir el gestor de paquetes Synaptics. Desde el escritorio de Unity pulsar el botón con el logo de Ubuntu situado en la esquina superior izquierda y en el cuadro de búsqueda ponemos «Synaptics». Nos dará como resultado una única aplicación que ejecutaremos pulsando sobre ella. Debemos introducir la password de Administrador que proporcionamos durante la instalación.
3. Pulsamos en Configuración > Repositorios
4. En la pestaña Otro Software seleccionamos las dos opciones que no están marcadas. Pulsamos cerrar.
5. Pulsamos la opción Recargar. Una vez que se ha recargado la lista buscamos en la caja de texto el paquete «bcmwl-kernel-source».
6. Seleccionamos el paquete de la lista con el botón derecho hacemos click en «Marcar para instalar» o «Marcar para reinstalar» en el caso de que se encuentre instalado. Después nos puede aparecer una ventana con las dependencias del paquete, si es así pulsamos Marcar. Después marcamos Aplicar.
7. Tras el proceso de instalación o reinstalación debemos reiniciar el equipo para que hagan efecto los cambios. Una vez reiniciado debería estar funcionando la tarjeta inalámbrica. Podemos retirar el cable Ethernet.
El resto del hardware del equipo lo reconoce sin problemas.
3 mayo, 2011
Deshabilitar el botón Submit manteniendo el nombre/valor en el formulario
Cuando desarrollamos aplicaciones web en las que se muestra uno o varios formularios, en ocasiones nos encontramos con que al enviar éstos, el tiempo de proceso o consulta a la Base de Datos es mayor de lo deseable. Cómo todavía no conozco un usuario paciente, lo más probable es que mientras espera haya pulsado el botón enviar el formulario varias veces más, saturando el servidor con más peticiones y haciendo que el tiempo de proceso sea aún mayor.

Lo primero que se nos ocurre es deshabilitar el botón Submit para que el usuario no vuelva a pulsar y de esa manera evitamos recibir en el servidor varias peticiones idénticas. Esta solución funciona en la mayoría de los casos pero puede darse el caso en el que tengamos varios botones de tipo Submit dentro del mismo formulario (buscar, imprimir, ordenar, completar desplegable), y nos interese consultar en el servidor cuál de ellos ha pulsado mediante una sentencia similar a:
```
if (request.getParameter("nombre_del_input_submit_pulsado") != null) {     ... }
```
En el caso de que hayamos deshabilitado el botón no es posible recuperar si ha pulsado dicho botón puesto que los elementos deshabilitados de un formulario no se envían en la petición.

Existe un plugin en jQuery llamado Lock Submit que deshabilita el botón submit después de su pulsación manteniendo el par nombre / valor pasado en el formulario. Como dice en el título de la página del plugin:

Stop Double Clicks on form submits… without losing the submits name/value

Para usarlo necesitas tener jQuery, del que ya os he hablado en más de una ocasión y seguir estos pasos:
1. Descarga el plugin
2. Incluye tanto jQuery como el plugin en tu página
3. Incluye el siguiente código adaptándolo al selector de tu botón:
```
<script type="text/javascript"> jQuery(document).ready(function() { jQuery('id_boton_submit').lockSubmit({ submitText: "Please wait" }); }); </script>
```
Internamente no deshabilita el botón, realmente el botón original se encuentra oculto y el que se muestra en la página deshabilitado es una copia del primero. La propiedad submitText permite modificar y personalizar el texto que se muestra dentro del botón. También tiene propiedades para modificar el estilo css.
19 abril, 2011
Modificar Brillo y Contraste con Java 2D

Como podéis comprobar, en el blog comento sobre ciertos temas o problemas que van surgiendo durante nuestro trabajo diario y que damos solución mediante Java y Javascript (o cualquier otra tecnología, mayoritariamente orientada a la web). Hace poco publiqué un post sobre cómo realizar zoom en imágenes publicadas en la aplicación web. Este problema afortunadamente pudimos resolverlo mediante javascript y jQuery. Tras esto, el cliente nos propuso como requisito realizar ajustes de brillo y contraste sobre imágenes digitalizadas y publicadas en nuestra aplicación. Lo primero que se nos ocurrió fue incorporar alguna librería javascript para abordar lo que nos proponían, pero no encontramos nada adecuado que funcionara en todos los navegadores (esperaremos a HTML5 y el objeto canvas). La otra opción era, obviamente, realizar una petición al servidor para que nos enviara la imagen transformada con los datos de brillo y contraste actualizados.

El lenguaje Java incorpora la librería Java2D, cuyo API proporciona un amplio conjunto de clases para la composición y transformación de la imagen. La solución consistía en realizar una petición al servidor para recargar la página y actualizar la imagen, de manera que en el atributo src de la imagen realizara una petición al servidor para obtener una nueva imagen transformada, pasando los nuevos parámetros para brillo y contraste:

<img width="687" height="960" style="position: absolute; top: 0px; left: 82px;" src="/MiApp/ImageServlet?accion=42&id_imagen=1&brillo=10.0&contrast=1.0" />

En la página incorporamos cinco botones: más brillo, más contraste, menos brillo, menos contraste y restablecer brillo y contraste originales. Establecemos una escala de manera que los valores que podamos asignar al brillo van desde -125 hasta 125 (por defecto 0) y para el contraste desde 0.0 hasta 2.0 (por defecto 1.0). Cada vez que pulsamos los botones de brillo actualizamos la página para que el valor del parámetro brillo, dentro del atributo src de la imagen, se incremente o decremente en 5 unidades (o lo que deseemos). Haremos lo mismo en el caso del contraste con una variación de +0.1 ó -0.1 unidad (también modificable). El botón restablecer deja los parámetros en 0.0 para el brillo y 1.0 para el contraste. En resumen, los botones recargan de nuevo la página, pasando los nuevos valores actualizados de brillo y contraste, aumentando o decrementando su valor en función del botón pulsado.

El controlador que sirve la imagen en el servidor (en el ejemplo de arriba sería el servlet ImageServlet cuando recupera el parámetro accion con el valor 42) recogerá dichos parámetros, y cargará la imagen en memoria desde el archivo de un modo similar a éste:

JPEGImageDecoder decoder = JPEGCodec.createJPEGDecoder(new BufferedInputStream(new FileInputStream(ruta))); BufferedImage buf = decoder.decodeAsBufferedImage();

El parámetro ruta es la ruta a la imagen en el sistema de ficheros (he omitido cómo recuperar la ruta a partir del identificador de imagen pasado como parámetro). Una vez cargada la imagen invocaremos al método que realizará la transformación, pasando como parámetro la referencia a la imagen y los valores de brillo y contraste:

buf = brightContrastChange(buf, brillo, contraste);

Y el código fuente de la función es la siguiente:

private static BufferedImage brightContrastChange(BufferedImage bufferedImagen, Float brillo, Float contraste) { //Transformación de la imagen con nuevos valores brillo y contraste BufferedImageOp operacion = new RescaleOp(contraste, brillo, null); bufferedImagen = operacion.filter(bufferedImagen, null); return bufferedImagen; }

Únicamente nos queda escribir la imagen en el outputStream para enviarla al navegador:

JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(output); encoder.encode(bufferedImage); output.flush();

Siendo output el outputStream o flujo de salida. Obviamente estos son los pasos básicos, pero se pueden incorporar numerosas mejoras.

Una de ellas es la de obtener la imagen mediante una petición AJAX, sin necesidad de recargar la página para actualizar los parámetros brillo y contraste. Otra es la de mostrar una barra sobre la que podamos seleccionar un valor determinado sin saltos de 5 en 5 (brillo) o de 0.1 en 0.1 (contraste). Un componente que nos ayudó enormemente a acometer esta funcionalidad fue el slider de jquery.ui y que comentaré en otra entrada del blog próximamente.

23 marzo, 2011