sábado, 27 de julio de 2013

Bootstrap 3 y el marcado semántico

Probablemente estés ya hasta las narices de Bootstrap. Artículos y artículos, herramientas que lo usan o generan código compatible, y lo peor de todo... muchas webs con lo que yo llamo "pestuzo Bootstrap", que no se molestan casi ni en cambiar el estilo que trae por defecto, así que son todas igualicas. Por otra parte, también es posible que no lo hayas usado jamás e incluso que ni sepas lo que es.

Acaba de salir la primera release candidate de la versión 3 de Bootstrap, una versión que imagino que puede ser polémica (igual es por eso que la han sacado un Sábado veraniego casi de Agosto), así que aprovecho la ocasión para escribir este artículo. Empezaré contando qué es Bootstrap y qué tiene de bueno, sobre todo para los que no lo conozcáis aún (¿en qué cueva os habéis metido?). Incidiré en cosas que no me gustaron de su planteamiento general, especialmente contaré cómo se puede ir más allá y mejorar la separación entre contenido y presentación, haciendo nuestro código más semántico. Finalmente, aprovecharé que llevo varias semanas usando Bootstrap 3 para contar qué puedes esperar de esta versión y por qué tiene algunos cambios realmente interesantes para el futuro, junto a otros frustrantes para los que ya estaban usando la versión 2.

¿Por qué Bootstrap?

No hay nada que haga a uno sentirse más como un perro apaleado que programar el front de una web. Desde los primeros años de la web, se ha maltratado sistemáticamente todo lo que tenía que ver con su programación, casi siempre por motivos comerciales. Primero la guerra entre Microsoft y Netscape hizo que cada uno usara el JavaScript que le daba la gana. Luego la guerra entre Microsoft y... el resto del mundo, hizo... que en general Micro$oft interpretara cualquier posible estándar de la web como le diera la gana. Programar JavaScript y CSS significaba, básicamente, perder días y días pegándose en dura batalla con los navegadores, fundamentalmente con todas y cada una de las versiones de IE, ya que era con diferencia el navegador más utilizado y encima ninguna versión era igual a la anterior (ni tampoco se acogía a los estándares).

de html5code.com
Perdón, ¿estoy hablando en pasado?. Me temo que eso aún no ha acabado. Internet Explorer 8, aún uno de los navegadores más usados, sigue haciendo lo que le da la gana con muchas cosas. No he probado aún lo suficiente IE9 para saber si también es así, aunque algo he oído de que avanza bastante respecto a las versiones anteriores en cuanto a su estandarización pero todavía no acaba de cuajar. ¿Quizá IE10?.

Los estándares intentan moverse, modernizarse. No es normal que después de tanta guerra estemos casi en el mismo punto que hace 20 años. Se crea HTML5, sí... y después de varios años, todavía es una "candidate recommendation" y cada navegador implementa las partes que quiere. CSS3... más o menos lo mismo, con la coña de que tiene partes aprobadas y otras que aún no.

El precio de todo esto es enorme. Hacer una aplicación web es muchísimo más costoso de lo que debería, y la web avanza mucho más lentamente de lo que sería normal.

Como ocurre a menudo, las soluciones las ha ido proporcionando la propia comunidad. No necesitamos estándares de iure, tengamos estándares de facto. Así, especialmente en el campo del JavaScript fueron surgiendo librerías que encapsulaban las diferencias entre los navegadores, fundamentalmente en el acceso a DOM: MooTools, Prototype... y sobre todo la que finalmente parece que se alzó como la ganadora, jQuery.

Sin embargo, la revolución real está ocurriendo ahora mismo. En cuestión de estos últimos meses. En estos momentos, Internet Explorer ya no es el rey, y está en un declive cada vez mayor. Y ahora están saliendo productos que crean una capa por encima de HTML-CSS-JavaScript. Productos con una pinta estupenda, y que facilitan la programación del front. Entre ellos, seguramente el más popular ahora mismo sea Bootstrap.

Primera impresión

La primera impresión es muy buena. Bootstrap utiliza un curioso sistema para facilitar muchísimo el diseño de la web. Lo que predica es lo siguiente: utiliza HTML5 estándar para hacer la web, y coloca estratégicamente determinados "class" en cada elemento para conseguir:
  • Un sencillo pero potente sistema de layout, basado en filas y columnas.
  • Varios componentes prediseñados. Algunos de ellos, con código JavaScript listo para hacer que esos componentes sean dinámicos, sin que tengas que hacer nada de primeras. Así tendremos botones, pestañas, menús con varios niveles, componentes de paginación... un gran número de elementos que HTML no incorpora, pero que se utilizan habitualmente como interfaz de usuario en muchas webs.
Este es un ejemplo de código HTML (de Bootstrap 2). Obsérvense los distintos class que tiene:

<div class="container">
   <!-- Main hero unit for a primary marketing message or call to action -->
   <div class="hero-unit">
     <h1>Hello, world!</h1>
     <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
     <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
   </div>

   <!-- Example row of columns -->
   <div class="row">
     <div class="span4">
       <h2>Heading</h2>
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
       <p><a class="btn" href="#">View details »</a></p>
     </div>
     <div class="span4">
       <h2>Heading</h2>
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
       <p><a class="btn" href="#">View details »</a></p>
    </div>
     <div class="span4">
       <h2>Heading</h2>
       <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
       <p><a class="btn" href="#">View details »</a></p>
     </div>
   </div>
</div> <!-- /container -->

Hacer una web con este sistema es realmente fácil, y aunque no toques apenas nada la web ya te quedará con una pinta bastante decente.

La distribución "normal" de Bootstrap trae un fichero .js y un fichero .css. Para personalizar los estilos, se supone que hay que añadir más reglas CSS, o al menos eso es a lo que parece que te invita.

Sin embargo, aunque esta es la forma de programar que propone Bootstrap, lo cierto es que no nos deberíamos conformar con eso. Eso sí, me gustaría recalcar que es una forma muy interesante y rápida por ejemplo para crear prototipos de una web. Pero si estamos haciendo algo serio podemos exigir más.

Personalizando con LESS

Modificar directamente el CSS tiene un problema, y es que estamos perdiendo una de las ventajas más importantes que realmente tiene Bootstrap, y es que está hecho en LESS. De hecho, Bootstrap se puede considerar una librería de LESS unida a otra de JavaScript.

LESS es un lenguaje que se construye sobre CSS, añadiendo características muy cómodas, fundamentalmente:

  • Anidamiento de reglas, que mejora mucho la legibilidad y te facilita el que haya un orden dentro del fichero (los ficheros CSS tienden naturalmente al caos más absoluto)
  • Variables: puedes meter valores comunes como colores, tamaños de padding, etc. en variables, y utilizarlas luego en otras reglas
  • Funciones y operaciones: también puedes crear valores que resulten de aplicar una operación sobre otro valor, como por ejemplo poner un color que sea un 20% más oscuro que otro (el cual puede estar, por ejemplo, en una variable).
  • Mixins: esto es lo más importante que aporta LESS. Los mixins son conjuntos de reglas que puedes usar en distintos sitios. Es decir, permite crear componentes reutilizables de CSS.

La librería LESS de Bootstrap está en general bien diseñada. Hay un fichero "variables.less" que tiene un montón de variables con las que se pueden controlar y personalizar muchísimos aspectos de la presentación por defecto: colores, fuentes, espaciados de márgenes y paddings... Otro fichero, "mixins.less" contiene un montón de mixins muy útiles de propósito general.

El resto de ficheros .less están dedicados a componentes o partes específicas: botones, tablas, barras de navegación, etc. En ellos se encuentran los estilos por defecto para todos estos tipos de elementos, junto a opciones de presentación de cada uno según sus clases.

Imagino que Bootstrap no incluye los ficheros LESS en la distribución normal porque intenta facilitar al máximo el que cualquiera pueda usarlo. Es decir, trata a los usuarios como idiotas. En mi opinión esta es un arma de doble filo, porque lo que está consiguiendo con ello es que mucha gente personalice muy poco lo que viene por defecto, consiguiendo así el efecto "pestuzo Bootstrap" que hay en tantas y tantas webs, y que comentaba al principio del artículo.

Créeme, trabaja directamente utilizando los ficheros .less, y creando otros less propios que redefinan las variables y pongan tus estilos. Es mucho más cómodo y a la vez mucho más potente (salvo que seas un idiota, claro).

Marcado semántico en Bootstrap

Hace muchos, muchos años, en una galaxia muy, muy lejana, el layout de las páginas se definía directamente dentro del propio HTML usando tablas. Entonces surgió la creación de layouts con CSS, la que se ha venido usando desde entonces. Lo cierto es que esta forma de crear los layouts era un coñazo integral porque cada versión de Internet Explorer interpretaba (y sigue interpretando) las propiedades CSS, y especialmente las que permiten formar layouts, como le daba la gana. A pesar de esto acabó triunfando, y una de las grandes ventajas que defendía el layout por CSS es que gracias a él se podía separar el contenido, la información que queremos mostrar, de la presentación de ese contenido. Se trataba de hacer marcado semántico, dentro de lo posible.

de coding.smashingmagazine.com
¿Cuál es el problema de la forma de hacer layouts que propone Bootstrap?. Pues precisamente esto, que volvemos a mezclar dentro del HTML el layout de la página con el contenido, aunque sea en forma de .class. Pues para eso volvemos a las tablas, ¿no?...

Es prácticamente imposible que el contenido de tu página sea semántico puro y no piense un poco en el layout. Ahí están los div, que sobre todo sirven para agrupar cosas que imaginas que pondrás luego juntas en el layout. Pero sí pienso que es bueno intentar separarlo lo máximo posible.

En mi caso es fundamental esta separación. Trabajo en un producto reutilizable, que se instala en varios clientes y que en cada uno puede cambiar la presentación. Tengo que intentar evitar al máximo el que tenga que modificar el HTML cuando lo único que necesite sea cambiar aspectos de presentación. Aparte de eso, aunque tu producto no sea reutilizable, pienso que en general es una buena práctica.

¿Entonces?. ¿Pasamos de Bootstrap?. No es necesario. Como ya he comentado antes, BS está basado en LESS. Y esa precisamente va a ser la solución.

Al principio descargué la última versión oficial de BS, la 2.3.2. Algunos de los class de Bootstrap se pueden considerar realmente semánticos: este div va a ser una barra de menú, o un elemento de paginación... Pero otros son claramente de presentación, como por ejemplo si un botón va a ser grande o pequeño, o si una barra de botones se va a poner alineada a la izquierda o a la derecha.

En seguida me di cuenta de que para la mayor parte de los casos, no era realmente necesario poner los class dentro del HTML, aprovechando las capacidades de LESS. Así, por ejemplo, si quiero que los botones de un formulario sean pequeños, no necesito poner el HTML así:

<form class="form-login">
   (...)
   <button type="button" class="btn btn-small">Ver cambios</button>
</form>


sino que puedo hacer esto otro:

<form class="form-login">
   (...)
   <button type="button" class="btn">Ver cambios</button>
</form>


y luego en el .less:

.form-login {
   .btn {
      .btn-small;
   }
}

Alegría, saltos, fiesta... pero espera... esto no ocurre para todos los casos. O mejor dicho, había un caso fundamental en el que esto no funcionaba: precisamente, el sistema de grid para el layout.

Escondidos entre los .less de Bootstrap encontré unos mixins que me podían ayudar: makeRow y makeColumn. Sin embargo, no funcionaban bien. No era lo mismo poner los class que usar estos mixins. Mi gozo en un pozo.

Cuando estaba pensando alternativas, encontré que estaba en desarrollo una versión 3. Miro los cambios y ¡bingo!, han cambiado enterito el sistema de grid. Ahora el sistema de grid es mobile-first, y no diferencia entre "filas fluid y no fluid", todas son fluidas. También han cambiado el nombre de los class.

Vuelvo a hacer la prueba y, esta vez sí, compruebo que funciona. Esto es un ejemplo de un grid en Bootstrap hecho con marcado semántico:

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Y su LESS:
.wrapper {
  .make-row();
}
.content-main {
  .make-column(8);
}
.content-secondary {
  .make-column(3);
  .make-column-offset(1);
}

De hecho, aunque hasta hace poco no estaba y yo tuve que llegar a ello a base de hacer arqueología en el código, estos mixins y la forma de usarlos ya aparecen dentro de la propia documentación del sistema de grid (bueno, a mi me ha servido para copiar el ejemplo...).

No sólo esto, sino que la librería LESS está realmente mejor diseñada. No es sólo el sistema de grids, en general todos los componentes están mucho más basados en mixins, es mucho más fácil hacer marcado semántico ahora que en la versión 2.

Así que sí, querido lector, te lo puedo decir: se puede hacer marcado semántico con Bootstrap.

Bootstrap 3: qué más me voy a encontrar

Si ya eras usuario de Bootstrap 2, tengo una noticia realmente mala para ti: no es sólo que tu código anterior no sea compatible. Es que ha cambiado un montón, muchas veces en cosas muy pequeñas.

Lo primero que te vas a encontrar es que ha cambiado el aspecto por defecto. El diseño actual pretende ser más "aséptico", menos intrusivo. Los botones y otros elementos no tienen detalles como gradientes, es un diseño más plano, más "metro". Esto es fácil de ver, basta conque vayas a la página principal de Bootstrap, porque lo que se está mostrando ahí ya es la versión 3.

Lo segundo que te vas a encontrar es que han cambiado el nombre de un montón de clases y variables. La intención es hacer los nombres más homogéneos, y en verdad lo han conseguido. Pero olvídate de que tu código funcione con ellos, claro. Los más obvios son los del sistema de layout, cuando antes se ponían las columnas con elementos como "span3" y las filas muchas veces con "row-fluid", ahora hay que utilizar cosas como "col-3" o "col-lg-3", y las filas van siempre con "row". Pero hay que decir que no se han cortado nada, han cambiado muchísimos nombres.

En cuanto a los formularios, ahora los componentes ocupan por defecto el 100% del ancho disponible, y han cambiado por completo la forma de agrupar campos.

de soyouwanna.com
Los iconos también se han rediseñado por completo, ahora se dibujan con una fuente (es decir, son glyphicons). Bueno, y han cambiado los nombres de los class, claro.

Han desaparecido muchas opciones de presentación de los distintos elementos, muchos "-inverse" por ejemplo, y muchas formas de agrupar tipos de elementos. También han desaparecido elementos enteritos, como los thumbnails. A cambio, aparecen otros nuevos como los panels y los list groups.

Si además pretendes que tu código sea compatible con IE7 o Firefox 3.6, ni intentes actualizarte: BS3 ha dejado de ser compatible con ellos.

Pero bueno, lo mejor es que chequees tú mismo la gran lista oficial de cambios realizados para la versión 3.

Habrá que ver a partir de ahora qué harán todas esas webs que generan código Bootstrap de forma gráfica, o que venden temas ya prediseñados, y que al fin y al cabo pueden considerarse una de las ventajas de usar Bootstrap: su popularidad. ¿Se actualizarán?, ¿no se actualizarán?, ¿se mantendrán compatibles con las dos versiones? (posiblemente la mejor opción). Algunas de ellas son estas:


En definitiva, si eras usuario de Bootstrap 2, actualizar tu HTML a BS3 no será nada sencillo. A pesar de eso, opino que los cambios en general son para mejor, la librería está mejor organizada, es mucho más fácil hacer HTML más semántico, los nombres son más homogéneos, y se han eliminado muchas opciones que eran quizá demasiado intrusivas.

Aunque bah! la verdad es que todo eso me importa un pimiento. Como no llegué a usar nunca la versión 2, lo único que realmente quería es que me dejara hacer marcado semántico, y ahora... ¡se puede!.

lunes, 1 de julio de 2013

Móntate la mejor Smart TV + centro de descargas + servidor con la Raspberry Pi

¿Cómo te gusta ver las pelis y las series en casa?. ¿Eres de verlas en sitios online o de descargarlas?. Si eres de los segundos, y tienes unos mínimos conocimientos de cacharreo con terminales Linux, este es tu artículo.

Controlarás tus descargas al máximo, desde cualquier sitio y en cualquier momento, con un coste energético mínimo y sin ruido. Y sin tener que hacer nada, copiar nada ni tener que arrancar nada más, encenderás tu tele y tendrás tu catálogo completo navegable con información completa y la portada de cada peli, y podrás elegir la que quieras ver manejando todo con el propio mando de la tele.

¿Preparado?

NOTA: Por supuesto, estoy hablando siempre de descargas legales. Si usas este sistema para descargar algo que no sea gratuito o sobre lo que no tengas derechos, este blog y su autor no se responsabilizan en absoluto.

Introducción

Si no teníamos suficiente inteligencia en el mundo con los smartphones, ahora vienen las teles a hacerles la competencia, y cada vez se oye más el nuevo término molón: las Smart TV.

Lo que está claro es que la tele ya no es lo que era. Hace ya mucho tiempo que eso de que sean las emisoras las que deciden lo que puedes ver es cada vez más cosa del pasado... El caso es que la tele está en un importante momento de cambio. Contratos del pasado y miedos del presente hacen que servicios online como Netflix no existan en España, y que los que existen, como Filmin o Waki.tv no tengan, en mi opinión, un precio ni un catálogo comparable (y el precio y el catálogo, amigos, es lo principal de todo esto). Eso merma mucho las posibilidades online actuales en nuestro país, aunque poco a poco el panorama está mejorando mucho. También hay sitios online de pirateo, pero tienen sus limitaciones (de muchos tipos). Mientras los servicios online acaban de estabilizarse, tenemos la interesante opción de las descargas.

En este artículo os voy a contar cómo os podéis montar la mejor Smart TV al menor precio posible. Existen otras opciones, cada vez más, sobre todo basadas en Android, y ahí están Google TV y Apple TV con el revólver desenfundado. Nosotros usaremos un ordenador barato, la Raspberry pi, perfecta para este uso. Como software principal del centro multimedia le pondremos uno de los más populares actualmente, y que es la leche: XBMC. No contentos con ello, aprovecharemos que tenemos un peazo de Linux con todas sus posibilidades, y lo convertiremos también en un centro de descargas y a la vez en un servidor.

La Raspberry Pi


La Raspberry Pi es un mini-ordenadorcillo poco potente y barato, que viene con lo mínimo minimísimo para poder llamarlo ordenador. No trae ni un solo periférico, es decir, no lleva pantalla (tiene una conexión HDMI y otra de vídeo compuesto RCA), ni teclado, ratón, etc. (tiene dos conectores USB), ni discos duros (tiene una ranura para tarjetas SD, donde se puede instalar el sistema operativo), ni siquiera fuente de alimentación (se alimenta por micro-USB). Por no tener no tiene ni caja. O sea, lo que podéis ver en la foto.

Se ha puesto un poco de moda en el mundillo geek por eso de que es un juguetito "teóricamente" barato, aunque eso ha llevado a que mucha gente no sepa qué hacer con ella pasadas las semanas. Lo cierto es que, precio aparte, le veo al cacharrillo algunas ventajas importantes para ciertos usos, que son los que voy a explorar en este artículo.

Cuidadín, aviso que la instalación de la Raspberry y sus aplicaciones no es para todo el mundo. Conviene tener un mínimo de conocimientos de Linux para ponerla en marcha, sobre todo por la parte de instalación de aplicaciones como servidor. Casi todas las instrucciones van por consola y es fácil que en algunos momentos tengamos que salirnos de lo que te cuentan e instalar algún paquete adicional para que todo funcione, y aparte de eso tendremos que ir pegándonos con el router para abrir puertos, asignar direcciones IP estáticas, etc. Si no te ves capaz, siempre puedes simplemente instalar XBMC y ya está, que eso sí es fácil y sale prácticamente solo.

La lista de la compra

El truco de la Raspberry es que es barata... porque está pelada. La mayor parte de cosas que puedes necesitar es fácil que las tengas ya por casa, pero siempre hay algo que no. Según lo que tengas o dejes de tener, tu lista de la compra real se puede parecer a la siguiente (ojo, los precios que pongo, redondeados, son los que he conseguido yo; no son los más baratos ni de coña, he buscado siempre la comodidad y conseguir lo que fuera sin tener que esperar):
  • La Raspberry Pi modelo B con 512 MB de RAM. Tanto ella como varios de los complementos los compré directamente en una tienda física de Madrid, ya que me pillaba muy cerca y no tardaba nada en comprarla: Electrónica Embajadores. Por Internet y comprando en el extranjero se pueden conseguir precios mejores, aunque sin pasarse. 44 euros.
  • Una caja donde meterla, para que no se quede con la melena al aire, que da penica. Hay cientos de tipos y diseños de cajas distintos, algunos con bastante gracia, de hecho ni siquiera tienes por qué comprártela, te puedes hacer una con Lego. Yo no me compliqué la vida y me compré una caja transparente, que también tiene su aquel. 11 euros.
  • Un cargador de corriente USB y un cable de USB a micro-USB. Esta será la alimentación de la Raspberry. Puede valer el cargador de un móvil, aunque... ¿entonces cómo cargamos el móvil?. Si tenéis alguno de sobra, os valdrá. Lo más importante es mirar los amperios del alimentador. Como poco deberían ser 700 mA. Puede valer con menos, pero hay que tener en cuenta que lo que conectemos a los USB del cacharro también chupa potencia. Para poder poner dispositivos a troche y moche sin miedo, recomiendo que tenga más potencia aún. Yo me compré uno de 2100 mA, pa que no nos falte de ná (en la misma tienda). 13 euros.
  • Una tarjeta SD de clase 10. El tamaño no es tan importante, 8 GB por ejemplo está bien, pero la velocidad de la tarjeta sí tiene importancia. Tened en cuenta que en ella va a estar el sistema operativo, así que para algunas aplicaciones nos convendrá que vaya rapidito. Si tenemos una sobrante de clase 4 ó 6 podemos probar también con ellas, que puede que nos valga. Yo compré una microSD clase 10 de 8 GB (recomendable que sea microSD porque nos valdrá para otros cacharrillos) por 12 euros.
  • Puede que te hagan falta otros cables si por lo que sea no los tienes, básicamente necesitarás un cable Ethernet y otro HDMI (también puede valer un cable de vídeo compuesto)... bueno, ¡y una tele, claro!
  • Un disco duro externo USB. Para no cagarla al final, lo suyo es que no tenga ventilador ni soniquetes "raca-raca". Si tienes ya uno, fenomenal, en mi caso me compré uno de 1TB de esos pequeñines sin alimentación ni ventilador. Ojo, si no tiene alimentación propia seguramente tengas que conectarlo a un hub USB enchufado a la corriente (yo lo he hecho). A mi me el disco me costó 70 euros.
Como veis, al final este "ordenador de 30 dólares" puede llegar a convertirse en unos 150 euros, aunque depende mucho de lo que tengamos disponible por ahí. También es verdad que todos estos componentes los podemos acabar reutilizando en otras cosas, especialmente el componente más caro, el disco duro externo.

Otras cosas que podríamos comprar... o no:
  • Adaptador Wifi USB. Entre que nuestro cacharro vamos a ponerlo a descargar como loco y que queremos que consuma lo mínimo posible, lo suyo es conectarlo al router directamente mediante un cable de red. Pero puede que eso físicamente no sea posible, en cuyo caso nos haría falta uno de estos.
  • Teclado y ratón: en general, lo cierto es que no hacen demasiada falta. En cuanto puedas acceder a un terminal en remoto, podrás manejar todo desde un ordenador, digamos, "normal". Si no tienes ordenador normal, siempre puedes ponerle unos inalámbricos. Ojo, si conectas más de dos dispositivos necesitarás también un hub USB. Si es para hacer cosillas de forma ocasional, siempre podemos comprar un mini-tecladito-touchpad 
  • Mando remoto para manejar las "pelis". Otro que no hace demasiada falta, como veremos más adelante. Hay otras opciones muy buenas. En cualquier caso, si hace falta, existen

XBMC: espectacular centro multimedia

Instalar XBMC en la Raspberry es realmente fácil. Existen varias distribuciones que lo llevan ya de serie, pero yo recomiendo seguir estas instrucciones para instalar Raspbmc. Para poder usarlo luego de servidor, es importante ponerle una IP fija. Esto se puede hacer desde el propio instalador, si se instala desde Windows.

Ahora conecta la Raspberry, con la tele encendida. ¿Por qué con la tele encendida?. Porque si tienes una tele compatible con CEC (y la mayor parte de las teles actuales lo son), vas a poder controlar XBMC con el mando de la tele, sin tener que poner ningún receptor de infrarrojos en la Rasp (la señal se transmite de la tele al cacharro por el cable HDMI). Por lo menos en mi caso, para que esto funcione la tele tiene que estar encendida cuando conectas la Raspberry (simplemente encendida, da igual en qué canal esté).

Si no te funciona, o si reiniciaste la Raspberry con la tele apagada, tienes otra opción sencilla: usar el móvil como mando. En Android tienes aplicaciones como la oficial de XBMC ó Yatse que cumplen este papel a la perfección, además de permitirte otras cosas como por ejemplo explorar tu catálogo de películas, series y música. Pruébalas conectando por wifi. Y si no... siempre puedes conectarle un teclado o un ratón a la Raspberry. Otra ventaja de tener estas aplicaciones en el móvil es que te permiten consultar tu catálogo, así que si quieres por ejemplo puedes elegir qué película vas a ver mientras vas a casa en el metro.

XBMC es una gozada. Le dices el directorio donde tienes las películas y las series, y él solito se pone a pensar un rato y te hace un catálogo completo con todas ellas: portadas, ficha técnica, argumento, información sobre el tipo de fichero... en fin, lo mejor es mirar las capturas de pantalla. ¡Todo eso sale solo!. Y por muy baratera que sea la Raspberry, reproduce vídeos HD de 1080p sin ningún problema.


XBMC tiene muchas más posibilidades. Por ejemplo, tiene un administrador de ficheros que nos puede venir muy bien para colocar ficheros recién descargados, tiene distintos skins... y sobre todo, también existen add-ons para acceder a múltiples servicios online.

Mini servidor "full time"

Ya tenemos nuestro centro multimedia "estándar". Pero... ¿por qué conformarse con eso?. La Raspberry puede ser también un gran servidor, porque:
  • Tiene un consumo energético ridículamente bajo.
  • Es silenciosa. No tiene ventilador, ni disco duro haciendo raca-raca... no que haga poco ruido... absolutamente silenciosa
Y... ¡es completamente compatible tener el servidor con tener el XBMC!. No sólo compatible, sino que se complementan a la perfección.

Como desventaja, tiene poca potencia, así que olvidaros de instalarle un servidor de base de datos, una web Java potente o simplemente cualquier servidor con un gran número de accesos concurrentes. Aunque, bueno, tampoco digo yo que no pueda servir para todo esto, sencillamente no parece la solución ideal para esos casos.

¿Entonces qué tipo de servidores le podemos instalar?. Básicamente, podemos usarlo como:
  • Centro de descargas: torrents, descargas directas, eMule...
  • Servidor web HTTP + PHP
  • Servidor de almacenamiento en la nube, al estilo de Dropbox, Drive, Box, etc.

Preparando el terreno

Por lo pronto, de serie ya trae instalado un servidor SSH. Gracias a él, podemos conectarnos con cualquier otro ordenador e instalar lo que queramos (Raspbmc es una distribución basada en Debian). No sólo eso, también podemos acceder al sistema de ficheros cómodamente con cualquier cliente FTP (como por ejemplo Filezilla) a través de SFTP.

Al acceder por primera vez por SSH, se configuran algunos elementos más: es conveniente poner el locale es-ES_UTF8 (salvo que seas iberoamericano, en cuyo caso sería el dialecto correspondiente, pero es importante que sea UTF8). También es conveniente cambiar la password, ya que para aprovechar todo esto a tope lo suyo es que el acceso SSH (así como el resto de servicios que estemos instalando) sean accesibles desde fuera de la red local. Por tanto, ya tenemos listo nuestro acceso por consola para instalar lo que queramos.

Algo importante es el montaje de nuestro disco externo. Por defecto, Raspbmc automonta el disco con el usuario pi y con permisos de escritura sólo para él (ni siquiera para el grupo). Como los servidores que le instalemos tendrán en general sus propios usuarios, lo mejor es que montemos el disco con permisos de lectura y escritura para el grupo. Para mejorar el control, podemos crear un grupo propio "ntfs":

sudo groupadd ntfs
sudo usermod -a -G ntfs pi
sudo usermod -a -G ntfs root

Como no se pueden cambiar los permisos por defecto para el automontaje, tenemos que cambiar a mano la configuración del montaje de nuestro disco en concreto en el fichero /etc/fstab. Primero obtenemos el UUID de nuestro disco:

sudo blkid /dev/sda1
(probablemente sea /dev/sda1 pero para asegurarnos podemos ejecutar antes sudo fdisk -l | grep NTFS)

Raspbmc trae un editor "cómodo" para editar ficheros, nano, que podemos usar para modificar cualquier fichero de configuración (si eres un fanático del vi lo tienes también, claro).

sudo nano /etc/fstab

Añadimos una línea con el UUID del disco (aquí pondré XXXXX, reemplazar por el que tengáis) y el punto de montaje, que normalmente será un subdirectorio de media (aquí voy a poner externaldisk, pero puede ser lo que queráis):

UUID="XXXXXXXXX" /media/externaldisk ntfs-3g auto,gid=ntfs,umask=0002,uid=pi 0 0

Para asegurarnos, creamos el subdirectorio en media:

sudo mkdir externaldisk
sudo chown pi:ntfs externaldisk
sudo chmod 775 externaldisk

A partir de aquí, por cada servidor que instaléis que queráis que tenga acceso de escritura al disco, deberéis añadir el usuario con el que se ejecute el proceso (que se puede ver ejecutando sudo ps -ef | grep <parte de nombre de proceso>) al grupo "ntfs":

sudo usermod -a -G ntfs <usuario>

Normalmente después de hacer esto habrá que reiniciar (sudo reboot).

[EDITADO] Las instrucciones anteriores suponen que el disco lo tenemos formateado en NTFS, que fue lo que hice yo para poder llevarlo con más facilidad a otras máquinas o centros multimedia ajenos. Sin embargo, si tenéis una conexión a Internet rápida es muy recomendable para el rendimiento formatearlo en ext4 (gracias a Antonio Muños por la información).

Una última recomendación: en general vamos a instalar servidores que te proporcionan un acceso web. El propio XBMC también tiene uno. Para no liar mucho el tema, recomiendo modificar el usuario por defecto y poner en todos los servidores el mismo usuario y password. Ojo, que sea uno propio, no uséis uno estándar, porque cualquiera podría acceder a ellos y liaros una buena. Aparte de eso, para que cualquiera de estos servidores sea accesible por Internet, habrá que abrir los puertos en el router.

Instalando servidores


Para empezar a darle caña, podemos poner un cliente bittorrent con estas instrucciones para instalar Transmission, y poder descargar lo que queráis al disco duro externo. Como podéis ver, Transmission incluye un interfaz web, así que si abrimos el puerto (por defecto 9091) podremos gestionar nuestras descargas desde cualquier sitio. Ojo con la password en ese caso, claro.

Añadimos el usuario debian-transmission al grupo ntfs, cambiamos la configuración para que se descarguen las cosas al disco externo, y todo debería ir como la seda. Como los torrents tienen muchísimo peligro de colapsar la conexión, es importante limitar también la velocidad de subida. En esta dirección podéis calcular qué límite de velocidad es adecuado para vuestra conexión.

Para que cualquier sitio sea cualquier sitio, también podéis controlar vuestras descargas con una aplicación móvil. Para Android por ejemplo tenéis Remote Transmission. Y... también podéis acceder desde el propio XBMC, con lo cual si estáis pegados a la tele no necesitáis despegaros del mando. Basta conque instaléis desde el mismo XBMC el correspondiente add-on.

Pero no sólo de torrents vive el hombre... también tenemos las descargas directas de la web o a través de servidores de descargas. ¿JDownloader? No... mejor instalar pyLoad, un programa que es mucho más ligero, tiene interfaz web y funciona muy bien en nuestra Raspberry. Podéis seguir estas instrucciones, aunque ojo, yo he tenido que instalar muchos más paquetes que faltaban, así que el punto 1 de la instalación a mi me quedó así:

sudo wget -O pyload-cli.deb http://get.pyload.org/get/ubuntu-cli
sudo apt-get install python python-pycurl python-crypto unrar-free tesseract-ocr tesseract-ocr-eng python-imaging spidermonkey-bin libgif4 libwebp2 libgmp10 liblcms1 python-support libnspr4 libtesseract3 tesseract-ocr-osd tesseract-ocr-equ
sudo dpkg -i pyload-cli.deb

Una vez hecho esto, todo debería funcionar correctamente. Sin embargo, veremos que al reiniciar dejará de funcionar. Añadimos el usuario al grupo ntfs y todo debería funcionar correctamente.

Por si te lo estabas preguntando, sí, pyLoad también tiene una aplicación Android para gestionar tus descargas con el móvil.

EDITADO: Antonio Muñoz añade también que es importante para el rendimiento de pyLoad configurar su servidor threaded en lugar de builtin.

Aprovechando que tenemos un cacharrillo propio constantemente encendido, también podemos aprovechar para instalarle un servidor HTTP. Seguro que en algún momento le podemos dar uso. Por ejemplo, puedes instalar el servidor ligero lighttpd, con soporte de PHP. Ponle también soporte para SSL.

Aunque tenemos un servicio sFTP, nos va a venir bien tener también acceso al sistema de ficheros con un interfaz web. Así que podemos instalar Ajaxplorer simplemente descomprimiéndolo en el directorio /var/www y dando permisos de escritura en el subdirectorio data.

sudo apt-get install unzip
wget -O ajaxplorer.zip http://sourceforge.net/projects/ajaxplorer/files/latest/download?source=files
sudo unzip ajaxplorer.zip -d /var/www
sudo mv /var/www/ajaxplorer* /var/www/ajaxplorer
rm ajaxplorer.zip
sudo apt-get install php5-cli php5-gd php5-mcrypt
sudo chmod 776 /var/www/ajaxplorer/data

(al arrancarlo aparecerán avisos varios, cada uno tiene más o menos instrucciones de cómo resolverlo; en cualquier caso, debería funcionar ya)

Ajaxplorer tiene varias cosas que están bastante bien. Permite streaming, como poco de ficheros MP3 (no sé si también será capaz de hacer streaming de vídeo). También tiene herramientas para sincronizar automáticamente un directorio local con un directorio del servidor, al estilo de Dropbox, como esta y esta. Y también permite crear usuarios y roles, por lo que podemos crear carpetas públicas, o invitar a gente a subir ficheros a una carpeta. Y si no te acaba de convencer, siempre puedes probar Owncloud (no tengo muy claro cuál de las dos es mejor o más ligera, la verdad).

¿Más cosas?. Todas las que quieras. Puedes instalar un cliente para descargas de la red de eMule, poner un sistema de administración por web, un servidor Samba, configurar rsync para hacer backups, poner un proceso que reinicie la máquina cuando estén caída, o incluso probar a instalar un servidor J2EE ligero como TJWS... en fin, todo lo que vayas necesitando. ¡Por este artículo creo que es más que suficiente!

Configuración final XBMC

Ahora vamos a cambiar algunas cosillas de la configuración de XBMC para evitar problemas. Si tenemos la Raspberry conectada a la tele por HDMI, la configuración por defecto tiene un inconveniente para nuestro servidor: si al encender la Raspberry el televisor está apagado, no detectará el HDMI y automáticamente mandará la señal de vídeo por el RCA, con lo cual no veremos nada. Esto se puede deshabilitar siguiendo estas instrucciones. Aun así, al menos en mi caso es conveniente conectar o resetear la Raspberry con la tele encendida, porque como comenté antes, parece que si no el mando no funciona. Aunque por lo menos nos aseguramos de que podemos ver lo que estamos haciendo y usar el móvil como mando.

Además, XBMC trae instalado un firewall. Para que podamos usar nuestra maquinilla por Internet, lo podemos deshabilitar. Esto se puede hacer directamente desde la pantalla de configuración de Raspbmc, en Programas > Raspbmc settings > System configuration. Esto me ha estado funcionando durante un tiempo, pero en la última actualización creo que han introducido un bug que hace que no funcione. Si estás en el mismo caso, edita el fichero /etc/network/if-up.d/secure-rmc y al final pon:

sudo /sbin/iptables --flush

¡Listo!

¿Ya lo tienes todo funcionando?. Pues ahora... revisa la agenda, llama a todos tus amigos frikis, y... ¡¡¡presume de Smart TV!!!

cookie consent