Blog

Almacenamiento en la nube. Ubuntu One Vs Dropbox

Por regla general, cualquier persona en su vida cotidiana utiliza más de un ordenador, el de la oficina, el de casa, el portátil o netbook, o incluso puede utilizar varios dispositivos móviles como un tablet o un teléfono móvil. Pero mediante uno o varios dispositivos, siempre querremos poder acceder a la misma información. Si guardo las fotos de mis vacaciones en el ordenador de casa, igual quiero poder enseñarlas en la oficina o enseñarlas a un familiar en mi teléfono móvil. Si edito un documento en el trabajo, igual me interesa terminarlo en casa o revisarlo en mi iPad en el autobús de camino al trabajo. Por todo ello me planteé abrir un espacio de almacenamiento en la nube. Era eso o copiar toda la información a todos los «cacharros» y además sincronizarla a mano. Existen multitud de servicios de almacenamiento web pero aquí voy a hablar de dos: Dropbox y Ubuntu One.

Ubuntu One viene integrado en la distribución Ubuntu desde la versión 9.04. El sistema de ficheros incorpora una carpeta especial, de tal manera que cuando copiamos o movemos algún fichero en la misma, se sube al almacenamiento remoto de manera totalmente transparente. Desde otro ordenador con Ubuntu y la misma configuración de usuario, tendremos acceso al fichero en la misma carpeta. Asímismo desde http://one.ubuntu.com podremos gestionar nuestro espacio. El paquete básico es gratuito con 2Gb de memoria de almacenamiento aunque podemos ampliarlo comprando hasta 20Gb que podemos pagar mensualmente o bien anualmente. Además de ficheros, sincroniza contactos, notas y marcadores e incorpora una tienda de música. No tiene límites en el número de ordenadores conectados a una cuenta. Podemos compartir una o varias carpetas con los demás usuarios.

Por último debemos comentar que Canonical, que es la empresa dueña de la distribución Ubuntu, ofrece un producto para dispositivos móviles (Ubuntu One Mobile) por 4€ al mes que incorpora acceso a los ficheros en red y, lo más novedoso es que puedes acceder en streaming a tus ficheros de música.

Personalmente comencé a usar este servicio pero el ordenador del trabajo tiene instalado WindowsXP y era un engorro sincronizar y subir ficheros por la web, así que decidí instalarme Ubuntu One for Windows (aún en beta). El problema es que el programa se conecta por un puerto diferente del 80, que es el que deja abierto el proxy, por lo que es imposible sincronizar y el programa se queda en segundo plano consumiendo el 40% de CPU. La última información que tengo es que estaban trabajando en solucionar esta incidencia.

Tras estos problemas decidí probar Dropbox. Es exactamente lo mismo, misma carpeta de sincronización (aunque tiene una modalidad de configuración dónde indicas las carpetas a sincronizar), mismo tamaño de almacenamiento gratuito con la opción de comprar más, posibilidad de acceso y gestión por web, incorpora una carpeta para compartir y una para crear galerías de fotos.

El programa se instala perfectamente en Windows y en las principales distribuciones de Linux y al contrario que el programa de Ubuntu One, si tienes un proxy en la red, puedes configurarlo o dejar que lo autodetecte. Además, existe una versión para iOS, por lo que si tienes un iPhone o iPod Touch, puedes acceder a tus ficheros desde donde quieras gracias a su aplicación gratuita.

Considero totalmente normal el miedo de algunas personas a dejar ficheros personales en sistemas de ficheros ajenos sin la custodia de su dueño, pero también creo que debemos sobreponernos y superar dichos miedos. Yo personalmente veo más ventajas que inconvenientes, no sólo por la sincronización y el acceso a los datos desde cualquier parte sino también indirectamenta para realizar backup de dichos datos por si ocurre un accidente con mi portatil, mi memoria USB, etc.

26 enero, 2011
Visor de Imágenes con jQuery y el plugin iViewer

Anteriormente ya he publicado varios posts hablando sobre la librería jQuery, en concreto como resaltar una búsqueda con jQuery y cómo actualizar tablas displaytag con ajax y jQuery. Gracias a esta librería y el plugin iViewer podemos cargar una imagen, visualizarla en pantalla dentro de un contenedor con la posibilidad de realizar zoom de la imagen con el ratón dentro del contenedor.

Puedes ver una demo pulsando sobre el enlace: http://joseantoniosaiz.es/samples/iviewer

¿Cómo se usa? Obviamente debemos de partir de una página que posea un contenedor en el que cargar la imagen, y al que daremos un ancho y un alto.

<html> <head> <style> .viewer { width: 768px; height: 573px; border: 1px solid black; position: relative; } .wrapper { overflow: hidden; } </style> </head> <body> <h1>jQuery Zoom</h1> <br/> <div id="viewer"></div> </body> </html>

También debemos incluir las referencias a las librerías javascript de jQuery y del plugin iViewer, así como el enlace al fichero de estilos del plugin (yo lo inserté entre los tags head de la página)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="jquery.iviewer.js" ></script> <link rel="stylesheet" href="jquery.iviewer.css" />

Para terminar debemos añadir el código javascript para invocar al plugin y cargue la imagen con los parámetros que deseemos. Al insertar el código dentro de la función ready nos aseguramos que se ejecutará cuando el documento HTML esté listo para visualizarse.

<script type="text/javascript"> var $ = jQuery; $(document).ready(function(){ var iviewer = {}; $("#viewer").iviewer( { src: "CIMG0498.JPG", initCallback: function() { iviewer = this; } }); }); </script>

En este ejemplo únicamente hemos añadido el parámetro src con la ruta a la imagen. Para ver más parámetros podemos consultar la página oficial del plugin. También he probado a cargar una imagen añadiendo una URL de una imagen publicada en cualquier web en vez de una ruta al fichero y funciona correctamente.

Una vez que se ha cargado la imagen, aparecerá una barra con un enlace para ampliar el zoom de la imagen, otro para reducirlo, otro para ver la imagen a tamaño real y otro para ajustarla al área de visión. También se ofrece el porcentaje de zoom. Pulsando el botón izquierdo del ratón podemos arrastrar la imagen para desplazarnos por ella. Si deseamos realizar zoom con la rueda del ratón podemos insertar el plugin mouse wheel extension:

<script type="text/javascript" src="jquery.mousewheel.min.js" ></script>

12 enero, 2011
Internacionalización (I18n) con DisplayTag y Spring

La librería de tags Displaytag nos permite mostrar listas de objetos en forma de tabla, facilitandónos la ordenación, la paginación de los resultados, el agrupamiento, la exportación de datos, etc., tal cómo ya habíamos comentado en un post anterior. La configuración se realiza mediante un fichero de propiedades que debe localizarse en el CLASSPATH de la aplicación, llamado display-tag.properties. En él se definen, tanto los estilos y apariencia, como los mensajes que aparecerán cuando se muestran los controles de paginación, o no hay datos, etc. La labor de configuración es bastante sencilla, pero cuando tu aplicación es multiidioma y necesitas configurar los mensajes o etiquetas que aparecen en la tabla en función del idioma del usuario, el tema no es tan trivial.

En nuestra aplicación desarrollamos con Spring framework y tenemos configurada la internacionalización en el fichero xml de configuración de Spring de la siguiente forma:
 <bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource"> <property name="basenames"> <list> <value>/WEB-INF/properties/messages</value> </list> </property>  <property name="cacheSeconds" value="60"></property> </bean>  <bean id="localeChangeInterceptor" class="org.springframework.web.servlet.i18n.LocaleChangeInterceptor"> <property name="paramName"> <value>siteLanguage</value> </property> </bean>  <bean id="localeResolver" class="org.springframework.web.servlet.i18n.SessionLocaleResolver"></bean>

Por defecto la aplicación recoge el idioma en el que esté configurado el navegador, pero una vez que hemos iniciado la aplicación podemos modificar el idioma durante la sesión del usuario. Para esto se realizará una petición al servidor con el parámetro «siteLanguage» y el nuevo locale. Hemos tenido que realizar una tarea previa en las páginas para que no inserten los mensajes de forma literal, sino que contengan una clave con la que se obtengan los mensajes almacenados en el fichero de propiedades. En nuestro caso utilizamos el fichero messages.properties para los mensajes en castellano y messages_en.properties para los mensajes en inglés, por ejemplo (el sufijo representa el idioma, en, es, de, it,fr,etc.).

Tan sólo nos falta la configuración del displaytag para que tanto los mensajes como los títulos de las columnas de la tabla se configuren siguiendo el idioma seleccionado. En el caso de los encabezados de las columnas actuamos de la misma manera que en las demás etiquetas de la página, es decir, en la cabecera hacemos referencia a una clave que recogerá el mensaje del fichero de mensajes con el idioma correspondiente:

<display:column titleKey="etiq.tabla.titulo" property="titulo" sortable="true" sortProperty="titulo"></display:column>

Los demás mensajes de la tabla se recogen del fichero de configuración displaytag.properties. En él se deben añadir estas dos líneas:
# locale provider (Jstl provider by default) locale.provider=org.displaytag.localization.I18nSpringAdapter # locale.resolver (nothing by default, simply use locale from request) locale.resolver=org.displaytag.localization.I18nSpringAdapter

Una vez hecho esto tenemos que configurar un nuevo fichero displaytag.properties con el sufijo correspondiente al idioma seleccionado (displaytag_en.properties, displaytag_de.properties, etc.), pero únicamente con las claves de los mensajes que queremos cambiar con el idioma, no es necesario duplicar todo el fichero, ya que los valores que no se encuentren los recoge del original. Este nuevo fichero se debe localizar en la misma carpeta, siempre en el classpath de la aplicación, como por ejemplo en la carpeta donde residan las clases java.

21 diciembre, 2010
Deshabilitar Cache-Control en JBoss/Tomcat

En recientes fechas el usuario de una aplicación de consulta por la Intranet nos ha solicitado la securización de la misma vía nombre de usuario y contraseña. Al hacer esto, nos han reportado una incidencia por la que al intentar guardar una imagen en formato JPG con Internet Explorer (pulsando el botón derecho y seleccionando la opción Guardar Imagen como…), el único formato en el que permite guardar es BMP. Antes de la modificación, la imagen podía almacenarse en el formato original (tanto el content-type: image/jpg como el filename se añaden a la cabecera en el servidor). Tras esto detectamos problemas al descargar ficheros pdf, pero únicamente si lo hacemos con Internet Explorer, ni Chrome, ni Firefox, ni Safari actuaban de esta forma.

Investigando un poco el tema descubrimos que el problema venía por unas cabeceras de respuesta en la petición HTTP que misteriosamente aparecían al servir la imagen:

Pragma: No-cache Cache-Control: no-cache Expires: Thu, 01 Jan 1970 01:00:00 CET

Estas cabeceras siempre las añade JBoss (por defecto) a la petición cuando la aplicación se encuentra en un entorno seguro para evitar que se cacheen los recursos. Internet Explorer las interpreta de una manera diferente a los demás navegadores y a saber por qué razón no permite descargar los ficheros o guardarlos en un formato diferente, aunque todo indica que es por motivos de seguridad.

Hemos encontrado un método de evitar esto. Se trata de incorporar una válvula (Valve) al contexto de nuestra aplicación web, que indique a JBoss que deshabilite el control de la cache para los recursos securizados. Para ello nos creamos un fichero context.xml (más información sobre el contexto de las aplicaciones web en JBoss/Tomcat) dentro de la carpeta web-inf de nuestra aplicación web:
<Context> <Valve className="org.apache.catalina.authenticator.FormAuthenticator" disableProxyCaching="false" ></Valve> </Context>
En nuestro caso utilizamos esta manera, ya que la autenticación está basada en formulario, tal y como configuramos en el fichero web.xml de la aplicación. Si el tipo de autenticación es HTTP Básica, entonces utilizaremos:
<Context> <Valve className="org.apache.catalina.authenticator.BasicAuthenticator" disableProxyCaching="false" ></Valve> </Context>
Con esto las cabeceras que indicamos más arriba no son añadidas por JBoss y solucionamos los problemas ocasionados en Internet Explorer. Esto no quiere decir que no podamos deshabilitar la caché para un recurso, sólo indica que somos nosotros los que controlamos este comportamiento, pudiendo añadir en el servidor las cabeceras para las peticiones que nos interesen, mediante el método:
response.addHeader("Cache-Control", "no-cache");
Este error no es exclusivo de JBoss, ocurre igualmente en Tomcat (JBoss está construido sobre Tomcat). La versión de JBoss que utilizamos es la 4.0.2 y las versiones de Internet Explorer en las que hemos probado son la 7 y la 8.

14 diciembre, 2010
Posicionamiento Web en Google
Durante las últimas semanas estoy bastante volcado en un tema que trae de cabeza a webmasters de todo el mundo: el posicionamiento web en buscadores, y más concretamente el posicionamiento web en Google. Tenemos que tener en cuenta que Google es el más utilizado y responde a más del 60% de las búsquedas en la Web. Conseguir un buen posicionamiento en el buscador, y aparecer en la primera lista de resultados, es lo que todo el mundo anhela para conseguir más tráfico hacia su sitio en Internet. Conociendo el algoritmo que Google utiliza podemos identificar una serie de técnicas para desarrollar sitios web sencillos, accesibles y fácilmente indexables por parte del buscador, aunque no debemos esperar resultados inmediatos, se trata de un trabajo constante y los resultados son a largo plazo.

Buenos Contenidos

Lo fundamental es tener buenos contenidos que atraigan al mayor número de visitantes. Si los contenidos merecen la pena seguro que tendrás más enlaces de otros sitios web. Google valora positivamente el número de enlaces externos a tu contenido. Además es recomendable actualizar periódicamente los contenidos ya que a Google le gustan los sitios que se renuevan y actualizan sus contenidos y además, el robot ‘Freshbot‘ pasa regularmente por aquellas páginas con los contenidos más frescos y los actualiza en la base de datos de Google en cuestión de horas.

Debes introducir contenidos reservando varias palabras clave (con 2 o 3 serán suficientes) para las cuáles quieres aparecer en las primeras posiciones de Google. Estas palabras clave las debes situar en:
- TITLE. Es el lugar más importante. Intenta que en el título aparezcan las keywords o palabras clave. Los títulos no deben ser muy largos e intenta no repetir las palabras o Google lo penalizará (lo considera spam).
- ALT: La etiqueta ALT está dentro del tag de imágenes y es el texto alternativo cuando no es posible cargar las imágenes. Google lo tiene en cuenta cuando es un enlace a otro sitio web.
- META TAGS: Aunque no se tiene en cuenta es recomendable utilizarlos.
- URL: Se sospecha que se valora positivamente que la dirección de la página contenga las palabras clave, aunque no le da demasiado peso. Intenta que el nombre de la página tenga las palabras deseadas sin abusar o Google podría penalizar. Separa las palabras con guión alto en vez de guión bajo.
En el resto de la página intenta incluir las palabras clave pensando en la legibilidad de los contenidos para los visitantes y no para los buscadores. Vigila la ortografía de las palabras clave. Además Google da mayor relevancia a aquellas palabras que aparecen en títulos (h1, h2,…) en negrita o en cursiva.

Tecnología Web

Para conseguir un buen posicionamiento debes tener buenos conocimientos sobre tecnología web, dominar el lenguaje HTML, conocer el funcionamiento de un servidor web, etc. Es recomendable que tengas tu propio dominio, tener tu sitio web en un portal de sitios gratuitos no da buena imagen.

Intenta utilizar páginas dinámicas generadas en el servidor (CGI, PHP, ASP, JSP, etc.), guardando el contenido en base de datos y no generar las páginas una a una. De igual forma, si un menú se repite en múltiples páginas deberíamos editar el código del menú una vez e incluirlo las veces que haga falta y no repetir el mismo menú en todas las páginas. Google sí indexa las páginas dinámicas pero hemos de intentar no incluir muchos parámetros en la URL o el robot no indexará la página ya que considerará que el contenido no es estable (sobre todo no incluir parámetros del tipo sessId o sessionID o similares).

Sencillez

Es muy importante diseñar páginas web sencillas y claras. A Google le gustan las páginas sin demasiados adornos, como se puede comprobar visitando su web. El robot de Google fue diseñado para rastrear páginas sencillas y los enlaces a los que apunta, es decir al robot únicamente le interesa el texto y los enlaces a otras páginas, no valora el diseño. Google no reconoce el contenido en los siguientes elementos:
- JavaScript
- DHTML
- Flash
- Frames
- Session IDs
- Applets de Java
- Imágenes: no insertes textos dentro de ellas
Intenta que tu página web se vea igual con un navegador que con otro, pero sobre todo, que se ‘vea’ con el robot de Google, es decir en modo texto sin imágenes, javascript, flash…

Como recomendación, intenta no incluir páginas muy grandes, con mucho contenido y cuida la usabilidad de las mismas para que los visitantes no se cansen y naveguen a gusto por los contenidos, de manera que vuelvan a menudo a la página.

Alta en Google

Para obtener un buen posicionamiento debemos dar de alta la URL en Google. El método más sencillo es acudir a esta página: http://www.google.com/intl/es/addurl.html aunque no se asegura el tiempo en el que aparecerá en los resultados. Google recibe multitud de sugerencias y su robot no es capaz de rastrearlas todas.

Otra opción es conseguir un enlace en alguna página que ya esté en la lista de resultados. Con esto nos aseguramos que la siguiente vez que pase el robot, indexará el contenido de dicho enlace.

Conseguir Enlaces

Esta es una de las labores más complicadas. En función del número de enlaces que obtengamos tendremos mayor PageRank (valor numérico que inserta Google a cada página web) o popularidad. A mayor PageRank, mayor valoración, pero si el enlace es de un sitio con un PageRank alto, la valoración se multiplica por lo que hay que buscar enlaces de calidad. Hay que tener en cuenta que Googlebot (robot de Google) no indexa los enlaces hechos con javascript. Al insertar enlaces, las palabras clave deben estar dentro de la etiqueta del enlace:
<a href=http://www.dominio.com/page.html>Palabra(s) clave(s)</a>

Por todo lo anterior, nuestra labor se centrará en conseguir el mayor número de enlaces de calidad posible, bien en directorios online o bien en sitios web, sobre todo si son de temática similar. Una práctica extendida es la poner comentarios (del tipo ‘estoy de acuerdo contigo, buen sitio web’) en otros sitios incluyendo el enlace deseado. Esto, aparte de ser poco ético y conseguir que el webmaster se enfade, se rumorea que está siendo vigilado por Google para penalizar sitios enlazados sin permiso del webmaster, como los libros de firmas. Otras recomendaciones son:
- Evita enlazar a sitios sospechosos de malas prácticas, ya que si Google les penaliza, también te penalizará a ti.
- Vigila que no tengas enlaces rotos, puesto que un número excesivo puede penalizar.
- Evita cobrar por enlazar o pagar por insertar enlaces. Google no consiente el hecho de que el PageRank sea un negocio
- Si es posible crea un mapa de la web con todos los enlaces de la web. A Google le gustan estos mapas y tú te aseguras que tienes toda la web indexada. Si el número de enlaces es mayor que 100, divide este mapa, puesto que Google lo puede considerar una link farm y penalizarte.
- Debes darte de alta en otros buscadores, no sólo en Google.
- Los enlaces internos también son valorados, pero debes tener también enlaces externos, pues Google puede penalizarte.
Evitar Penalizaciones

Para evitar que los usuarios abusen e intenten situar su web en las primeras posiciones, pese a que esos sitios no tienen nada que ver con lo que se ha buscado, Google puede penalizar dichas webs borrando los resultados, disminuyendo su PageRank o no teniendo en cuenta sus enlaces. Aparte de las penalizaciones comentadas en el punto anterior podemos añadir las siguientes:
- No utilices la técnica Cloaking. Es la técnica por la que se encubre la página que ven los usuarios con otra que es la que indexa el robot de Google con mayor número de palabras clave.
- Tampoco se debe redirigir por javascript al usuario hacia una página desde otra en la que hay multitud de palabras clave, pero prácticamente ininteligible que el robot sí que se toma su tiempo en indexar.
- Texto oculto. Muchos webmaster insertan multitud de palabras clave al final de la página con el mismo color de letra que el fondo. Google es capaz de detectarlo y penalizar dichas web.
- Del mismo modo ocurre con los enlaces ocultos.
- No duplicar páginas.
Conclusiones

En la actualidad es imprescindible conocer lo máximo posible sobre el algoritmo utilizado por Google para posicionar nuestra web dentro de la lista de resultados. Cada vez aparecen más SEOs (Search Engine Optimizer), personas o empresas dedicadas a que una web aparezca en las primeras posiciones de la página de resultados, utilizando diversas técnicas de posicionamiento. Para ver más información puedes leer este manual de posicionamiento web en Google.
10 diciembre, 2010