Saltar a contenido

Index

Trabajar con Word (docx) y Excel (xls y xlsx) desde Java

Iconos Word y Excel de MS OfficeEn Cartolab hemos trabajado ultimamente en procesar y generar documentos de Excel (xls y xlsx) y de Word (docx) desde Java. Tras probar algunas librerías open source las que estamos usando son:

Apache POI Spreadsheet para hojas de cálculo de Excel. Es fácil de usar y funciona bien tanto para los formatos binarios antiguos de xls (Excel 97-2007) como para xlsx (Excel 2007 OOXML). El How-To y la Quick Guide de la web son suficientes para empezar a escribir código.

Docx4j para documentos docx (OpenXML de Word 2007). La mejor forma de usarla es crear un documento vacio o con las cabeceras y pies de página desde Word o LibreOffice y definir en él los estilos. Desde nuestro código abrimos el documento y vamos añadiendo nuevos párrafos u otros elementos asignándole los estilos que hemos definido mediante el método addStyledParagraphOfText(styleID, text);. El styleID lo obtendremos consultado el fichero styles.xml que está comprimido dentro del docx. Si tenemos que hacer cosas más elaboradas el código se complica bastante pero al menos permite hacerlas. Para arrancar puedes leer como substituir placeholders por tu propio contenido, este otro artículo un poco más general y los ejemplos de código que vienen con la librería.

Para trabajar con documentos .doc de Word también probamos con Apache POI pero es complicado de usar y el resultado no es demasiado bueno. Así que por ahora no tenemos una alternativa válida para este formato.

En algún otro momento también hicimos pruebas con:

  • JasperReports que está muy bien para generar pdf pero el odt y el word lo saca maquetado en forma de tablas por lo que no nos valía.
  • iText. Que en versiones antiguas de la librería permitía sacar los resultados en rtf y era sencilla de emplear. Pero las últimas versiones se ha creado una nueva librería que no hemos probado todavía.

En esta pregunta de StackOverflow dan más alternativas. ¿Alguien usa otras librerías, preferiblemente open source y gratuitas, distintas a estas?

Serie: Los Soprano

the_sopranosLa casualidad hizo que empezara a ver Los Soprano el día anterior a la muerte de Gandolfini.

Es difícil (si no imposible) aportar algo sobre la serie que no haya sido contado ya. Y mucho menos sobre ese famoso final del que se han escrito sesudos ensayos (contiene spoilers).

Yo empecé a verla con ánimo crítico, me la comparaban con The Wire y eso eran palabras mayores. No cometas ese error. Son series distintas y no tienen nada que ver. Y cada una es muy grande a su modo. Si tuviera que escoger una me seguiría quedando con The Wire, por lo que me aporta como contexto, pero Los Soprano, con Gandolfini a la cabeza es inolvidable e increiblemente entretenida.

No te la pierdas (en idioma original).

Organizar los ficheros de routes en nodejs – expressjs

Una de las tecnologías que estamos probando en Cartolab para aplicaciones web es nodejs con express como framework. Hay un montón de tutoriales de como empezar a usarlos, pero a poco que escribas empiezas a preguntarte como organizar el código, y ahí empiezan los problemas. express es un framework no opinativo, es decir proporciona un montón de utilidades pero da liberar total al usuario sobre como mezclarlas, así que se van desarrollando distintos modos de hacerlo.

La primera pregunta en mi casa sobre organizar el código fue acerca de los ficheros bajo el directorio routes. Podemos entender las routes de express como el equivalente al controlador en ese patrón llamado MVC que cada framework implementa como quiere, o viéndolo de otro modo como el mapeo entre una url y una función.

Vamos a ver cuatro estrategias distintas, cada una con sus ventajas e incovenientes.

Todo en app.js

La versión que se suele emplear en los tutoriales de iniciación. Escribimos en un único fichero todo el código de la aplicación.

  • Poco código boilerplate
  • Añadir una nueva url implica tocar un sólo fichero
  • Nada reusable
  • Sólo válido para proyectos pequeños

Es tan sencillo como escribir el mapeo antes de crear el servidor y usar funciones anónimas para la lógica

<br></br>app.get('/', function(){res.send('root page'});<br></br>

Mapear en app y la lógica en ficheros distintos

Este es el segundo ejemplo más habitual. Las url se definen en el fichero principal y las funcionalidades se agrupan en distintos ficheros bajo el directorio routes.

  • Añadir una nueva url implica tocar como mínimo dos ficheros
  • Favorece la reutilización, pero siempre debemos colocar las url a mano
  • Implica escribir más código que en el anterior y perder legibilidad

A pesar de que es muy habitual ver esto no me gusta porque no ganamos demasiado, y tener que hacer cambios en dos ficheros acaba introduciendo errores.

<br></br>// app.js<br></br>var routes = require('./routes');  // Coje el fichero ./routes/index.js por defecto<br></br>var user = require('./routes/user');

app.get('/', routes.index);
app.get('/users', user.list);

<br></br>// routes/user.js<br></br>exports.list = function(req, res){<br></br>res.send("respond with a resource");<br></br>};<br></br>

<br></br>// routes/index.js<br></br>exports.index = function(req, res){<br></br>res.send("root page");<br></br>};<br></br>

Hacer el objeto app global y derivar todo hacia los ficheros de routes

Evitamos declarar app como variable local, para poder usarla en el resto de ficheros sin tener que preocuparnos de pasar parámetros. El código queda muy limpio pero se dificulta el testing y se pueden introducir bugs difíciles de detectar.

A mi me gusta esta aproximación cuando tenemos poco código y queremos hacer algo rápido, pero hay que ser consciente de los problemas que tiene.

  • No es una muy buena práctica hacer app global, en el siguiente punto vemos una mejora. Pero al hacerlo así obtenemos código más legible
  • Es bastante modular (excepto por hacer app global)
  • Es bastante legible
  • Hay separación de conceptos, cada fichero se encarga de unas determinadas url y funcionalidades

Referencias

Veamos como quedaría la implementación

<br></br>// app.js<br></br>app = express(); //IMPORTANT! define the global app variable prior to requiring routes!<br></br>require('./routes');<br></br>

<br></br>// routes/index.js<br></br>require('./main');<br></br>require('./users');<br></br>

<br></br>// routes/main.js<br></br>app.get('/', function(req, res) {<br></br>res.send("root page");<br></br>});<br></br>

<br></br>// routes/users.js. list() could be an anonymous function, this is only for showing it in another way.

function list(req, res) {
res.send("user list");
};

app.get("/users", list);

Inyectar app en los ficheros de routes

Es similar al ejemplo anterior, pero el objeto principal es inyectado en los controladores en lugar de usarlo como una variable global. Sacrificamos un poco de legibilidad (hay que meter bastante código «inútil») pero a cambio ganamos en modularidad y testabilidad.

Veamos una posible implementación, teniendo en cuenta que este código no lo he visto en ningún sitio, lo he escrito a partir del artículo de dailyjs y podría tener algún otro problema.

A mi esta es la aproximación que más me gusta, cuando el código aumenta y no nos queremos ir a soluciones más complicadas.

<br></br>// app.js<br></br>var app = express();<br></br>// ...<br></br>app.use(express.json());<br></br>require('./routes')(app); // Must be called after app.use(express.json()) and urlencoded;<br></br>

<br></br>// routes/index.js<br></br>module.exports = function(app) {<br></br>require('./main')(app);<br></br>require('./users')(app);<br></br>};<br></br>

<br></br>// routes/main.js<br></br>module.exports = function(app) {<br></br>function index(req, res) {<br></br>res.send("root page");<br></br>};<br></br>app.get('/', index);<br></br>};<br></br>

Otras estrategias

Hay estrategias más complejas, que por ahora no me ha hecho falta probar.

Montar un firefox independiente para desarrollo web

Firefox_ScreenshotEn Cartolab llevamos ya una temporada investigando en uso de tecnologías web en el ámbito de la ingeniería cvil.

Una de las cosas que me incomodaron durante los primeros experimentos, era no tener un entorno de desarrollo específico. Al margen del IDE, en desarrollo web son fundamentales las herramientas que proporciona el navegador que usas para el testeo. En este caso, me molesta el mezclar plugins de desarrollo, con plugins normales que uso para la navegación. Tengo la sensación que se me descontrola el entorno de trabajo.

La solución es configurar un navegador específico para desarrollo. Lo cual, al menos en el caso de firefox, es más sencillo de lo que parece:

  1. Le echamos un ojo a las instrucciones de mozilla de como instalar firefox a mano. En resumen: descargar y descomprimir. Yo lo descargue en /usr/local/development
  2. Si ahora simplemente ejecutamos el fichero binario firefox veremos que no hemos ganado nada, aún tendremos nuestros marcadores, plugins, etc… Esto es porque firefox, guarda esta información en perfiles y usa por defecto el perfil indicado en el fichero $HOME/.mozilla/firefox/profiles.ini
  3. Debemos por tanto crear un nuevo perfil, pero antes haremos una copia de profiles.ini
  4. Creamos el perfil como recomiendan desde mozilla, ejecutando firefox -P. Yo cree el perfil dentro de la propia carpeta del firefox descargado a mano, para poder tener un sistema autocontenido.
  5. El paso anterior habrá modificado el fichero profiles.ini, añadiendo el nuevo. Pero lo que nosotros queremos es tener el modo desarrollo lo más aislado posible así que restauramos la copia que hicimos anteriormente
  6. Creamos un miniscript en nuestro PATH o donde queramos que ejecute nuestro firefox de desarrollo y le pase el parámetro -profile y el path al perfil de desarrollo que creamos. Yo cree un script ffdev en /usr/local/bin con el siguiente contenido
    <br></br>#!/bin/sh<br></br>cd /usr/local/development/firefox<br></br>./firefox -profile development-profile<br></br>

Los menos puristas habrán observado, que en realidad, no es necesario complicarse tanto la vida bajando un firefox aparte. Llegaría con:

Crear un perfil nuevo en la carpeta por defecto, marcar el antiguo perfil como el que hay que usar por defecto y crear un script que arranque el nuevo perfil firefox -P "Nombre del Nuevo Perfil"

Si hemos optado por la primera altenativa y finalmente decidimos pasar a la segunda, un sólo firefox en el sistema que se actualice al ritmo que marca nuestra distribución, el cambio es tan sencillo, como copiar la carpeta de perfil de desarrollo a una nueva ubicación (el
directorio por defecto de perfiles sería lo lógico) y modificar el script para indicarle la nueva ruta del perfil y que firefox tiene que
usar. Si quisieramos poder abrirlo desde el Gestor de Perfiles o con la opción -P en lugar de -profile deberemos añadirlo a profiles.ini

¿Creéis que es útil configurar un perfil para desarrollo o no hace falta? ¿Cual de los dos métodos preferís?

Qué es Twitter Bootstrap y cómo aprender a usarlo

Generar una plantilla básica sobre la que empezar un proyecto web que tenga en cuenta los distintos navegadores y tamaños de dispositivos consume mucho más tiempo del que debería. Para minimizar este problema durante los últimos dos o tres años han surgido varios frameworks de diseño web. Si te dedicas a esto y no has estado debajo de una piedra este tiempo, sin duda habrás oído hablar de twitter-bootstrap, que es el que se ha hecho más popular.

¿Qué es bootstrap?

Bootstrap o twitter-bootstrap es un framework creado originalmente por dos desarrolladores/diseñadores de twitter para acelerar el diseño de nuevas aplicaciones web.

El framework proporciona clases css y código javascript para definir el layout de la página, crear componentes que respondan a eventos y estilizar los elementos html más habituales. Estos ejemplos están hechos con la versión 2, pero valen para hacerse una idea.

Podemos decir que los principios en los que se basa la última versión (la 3) son:

  • Responsive Design: Que según mi definición particular consiste en que la página trata de «hacer lo correcto» al ser visualizada independientemente del dispositivo y tamaño de la pantalla. El término fue acuñado por Ethan Marcotte en 2010.
  • Mobile first: Al contrario que en la versión 2, en la 3, el diseño responsivo es la opción por defecto al trabajar con bootstrap
  • Cross Browser: Trata de ser compatible con la mayoría de navegadores.
  • Integración con jQuery: Está muy integrado con jquery para el que define nuevos plugins
  • Buenas prácticas: Trata de emplear algunas de las prácticas más extendidas en cuanto a usabilidad, uso de css3/html5, organización del código, …

¿Qué me aporta bootstrap?

Si eres desarrollador con poca experiencia en diseño te proporciona una forma muy rápida de crear un layout responsivo básico de la página en la que empezar a meter tu código.

Si eres diseñador, obtienes una enorme cantidad de clases CSS que personalizar a tu gusto, sin tener que partir de cero.

Si quieres aprender a hacer las cosas mejor, es un compendio de buenas prácticas.

Aprendiendo a usar bootstrap

La documentación de la página de bootstrap debería ser tu principal fuente de información, sobre todo porque el resto de documentación tiende a quedar más desactualizada, aún así, hay una serie de tutoriales que a mi me han resultado más útiles para empezar, sobre todo porque te permiten coger ideas más generales de lo que permite hacer.

Los enlazo en el orden que creo que merece la pena seguirlos:

  1. Tutorial de w3resource: Hay partes del tutorial que están con la versión 2, pero cubre muchos aspectos
  2. Understanding twitter bootstrap 3. También se le escapa alguna etiqueta de la v2 como el container-fluid, pero en general te permite aprender a diseñar un ejemplo básico.
  3. Una introducción a los componentes que proporciona bootstrap como el scrollspy o las ventanas modales
  4. Actualizado 31/Agosto/2015. En Udemy acaban de publicar un post con una muy buena introducción a boostrap.
  5. Bootstrap 3 Tutorial – An Introductory Course | Udemy. Una serie de videotutoriales muy chulos donde emplean unas cuantas clases que no he visto en otros sitios. Es de pago pero barato. Con los recursos anteriores seguramente ya no te será necesario este curso, así que mira alguno de los vídeos de muestra antes de comprarlo

Otros recursos

Desde que nació bootstrap han ido apareciendo un montón de recursos que sacan partido a este framework

Conclusiones

En un par de días puedes revisar los enlaces que se proporcionan en este artículo, y refactorizar alguna web sencilla que tengas para que use bootstrap. Será un tiempo bien empleado que recuperarás con creces.

No he probado otros frameworks del estilo, pero supongo que serán parecidos, cada uno con sus fortalezas y debilidades. Si le tienes manía a bootstrap, escoge otro, pero desde luego es una herramienta a meter en tu caja si eres desarrollador web.