Modificación básica del instalador de Ubuntu mediante Ubiquity

Ubuntu para su instalador utiliza el paquete ubiquity (basado en debian installer) el cual nos brinda la todas las opciones y vistas de instalación que se presentan en este proceso.

Obtención del paquete ubiquity

Ubuntu tiene una muy amplia gama de paquetes que proporcionan herramientas de software de todo tipo. Si se quiere obtener información sobre un paquete o descargarlos se puede recurrir al sitio web http://packages.ubuntu.com/.

Para buscar el paquete que se desea, en nuestro caso y como el nombre del artículo lo dice es ubuquity, se digita en la sección de búsqueda, previamente seleccionada la distribución respectiva, como lo vemos a continuación:

Esto nos genera una lista con los paquetes encontrados y seleccionamos el que buscamos, para este ejemplo:

Lo interesante de esto es que, en la gran mayoría de paquetes, se puede descargar el código fuente, normalmente a la derecha del sitio web, para su modificación, haciendo valer uno de los derechos fundamentales del software libre. En este paquete no es la excepción, por lo cual bajamos el archivo que tiene la extención "tar.bz2" (recordar descargarlo en un lugar donde se pueda accesar para modificar luego sus archivos):

Una vez descargado el archivo lo descomprimimos mediante el siguiente comando:

$ tar jvxf /ruta/archivo.tar.bz2

Lo mismo va para el paquete "ubiquity-slideshow-ubuntu" el cual descargamos siguiendo los pasos antes descritos. Y estamos listos para empezar a trabajar.

Modificación de los contenidos del paquete

Este punto es muy relevante, y me quiero detener un poco para recalcar la importancia de ser perseverantes y traviesos, como niños que desarman las cosas para saber como funcionan, pues eso exactamente es lo que hay que hacer, desarmar el paquete, que es ese conjunto de archivos y carpetas que a la hora de compilarse dan vida a uno o varios programas, y ver cada parte, estudiarla y aprender como funciona. Para esto está la documentación que los desarrolladores dejaron.

Paquete Ubiquity

Lo primero que hacemos es ver el árbol de directorios con que cuenta el paquete. esto mediante el comando:

$ ls /ruta/directorio_paquete

Este comando lo que hace es mostrar los elementos presentes en una carpeta, y nos ofrece el siguiente resultado:

(las letras azules representa que el elemento es una carpeta, y las verdes que son ejecutables) Entre las cosas que nos interesa cambiar, está el nombre de la distribución, agregar a los colaboradores que están modificando el paquete en la documentación (mérito a quien mérito merece), cambiar imágenes, etc. Por lo tanto describiré el contenido de algunas carpetas:

• debian: En esta carpeta se encuentran los archivos de configuración donde se describen las rutas de instalación del paquete una vez que se compile, además de las traducciones según el idioma que se elija
• d-i: En esta carpeta se encuentra el instalador de debian a modo texto, todos sus archivos de configuración y los archivos necesarios para su compilación
• doc: Acá se encuentran los archivos de documentación del paquete ubiquity
• gui: En ella se definen las pantallas de la interface gráfica de usuario, cada componente y texto que en ella se muestra.
• pixmaps: Dentro están los íconos e imágenes que se utilizan en las pantallas de instalación.
• po: En la carpeta se encuentran algunas opciones de traducción de la aplicación (cualquier carpeta con el nombre "po" nos da esas opciones en este paquete)
• ubiquity: Acá es donde está el código fuente de la instalación mediante ubiquity.

Lo que se hace una vez se conoce la estructura de un paquete es empezar a modificarlo, para cambiar las imágenes se modificaría la carpeta pixmaps por ejemplo, si se quiere cambiar de posición de esta imágen nos iríamos al formulario descrito en la carpeta "gui".

Al confeccionar una distribución nueva se tiene que identificar en cada parte del código y documentación, pero dejando créditos a quien créditos merece, osea, dejar los créditos de las personas que han participado en el desarrollo del paquete con anterioridad.

Paquete ubiquity-slideshow-ubuntu

Al igual que con el paquete anterior se empieza por ver el contenido del paquete, para lo cual utilizamos el comando:

$ ls /ruta/directorio_paquete

lo cual nos muestra el siguiente resultado:

Este paquete es un poco más complicado, pues tiene ejemplos de slideshows (tiras de imágenes) de varias distribuciones, y nos brinda herramientas para probar como va quedando el trabajo realizado. En la raíz del paquete los elementos que nos interesan por ahora serían:

• debian: Carpeta donde se encuentran todos los archivos necesarios para la compilación del paquete.
• po: Carpeta donde se encuentran todos los archivos de traducciones según la distribución
• slideshows: Carpeta que contiene los archivos de configuración, contenido e imágenes presentes en la instalación de la distribución.
• AUTHORS: Archivo donde se encuentran los nombres de las personas que participaron en la modificación del paquete.
• slideshow.ui: Archivo que establece la estructura de la ventana de slideshow
• test-slideshow.sh : Archivo que nos permite ver el resultado de las modificaciones realizadas.
• update-launchpad-translation.sh Archivo que refresca la carpeta build, que es la que tiene la compilación del paquete.

Haciendo los slideshows

Si observamos dentro de la carpeta slideshows, nos encontramos muchas carpetas con nombres de distribuciones. Estos son los slideshows que aparecen en cada distribución. Para nuestro caso, debemos crear una carpeta dentro, junto a las otras distribuciones, con el nombre de nuestro proyecto:

$ mkdir /ruta/ubiquity-slideshow-ubuntu/slideshows/Nombre_Distribucion

dentro de esta carpeta creamos un archivo llamado "slideshow.conf",donde se establece el tamaño de la tira de imágenes. Se puede hacer con un editor de texto y guardarlo dentro de la siguiente manera:

$ nano /ruta/ubiquity-slideshow-ubuntu/slideshows/Nombre_Distribucion/slideshow.conf

y dentro del archivo:

[Slideshow]
width:752
height:530

Luego creamos la carpeta "slides", que contendrá todos los archivos que se mostrarán al usuario final:

$ mkdir /ruta/ubiquity-slideshow-ubuntu/slideshows/Nombre_Distribucion/slides

Seguido a esto nos posicionamos en la recién creada carpeta:

$ cd /ruta/ubiquity-slideshow-ubuntu/slideshows/Nombre_Distribucion/slides

La estructura que debe tener la carpeta "slides" es la siguiente:

• icons: Carpeta donde se guardan todos los iconos que se utilizaran en los slides.
• link: Carpeta donde se guardan imagens y las hojas de estilo que se utilizan los slides
• link-core: Carpeta donde se guardan los scripts que manejan la operabilidad de los slides
• screenshots: Carpeta donde se guardan las capturas de pantalla que se muestran en cada slide.
• index.html: archivo donde se establecen cuales slides se mostrarán durante la instalación, el tiempo que durará cada slide y los scripts utilizados y otras cosas. En resumen es el archivo que ordena que y como se verá.
• _slides.html: representa los slides, tiene que haber un archivo html con una estructura determinada para cada slide que se quiera mostrar. Esta estructura será necesaria para que se muestren los slides en el pase de imágenes.

Para ahorrarnos el esfuerzo, podemos copiar copiar de los slideshows de otra distribución las carpetas: icons, link, link-core, y screenshots; además del archivo index.html. Con esto solo queda modificar cada elemento según nuestra necesidad.

Ahora haremos un slide, este recomiendo que sea la versión en inglés (más adelante en el tutorial se mostrará como crear la traducción), para ello creamos un archivo con un nombre descriptivo a lo que queramos mostrar, por ejemplo music.html:

$ nano music.html

Este es una simple página web que se muestra en el slideshow, y como toda página web su estructura se puede definir con una hoja de estilos (en nuestro caso la ubicamos en /link/general.css según lo copiado anteriormente). Es bueno definir bien la estructura que se desea seguir y hacerlo un estandar para el diseño de todas las slides. El slide que creamos queda así:

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title></title>
  <link href="link/general.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="header">
<h1 class="slidetitle">Make your sounds</h1>
</div>

<div class="main">

<div class="text">

<div>
<p>With Audacity you can edit audio like a professional. With a variety of
effects, versatility and intuitive way to work the audio editing is easy and
fun. </p>
</div>

<div class="featured">
<h2 class="subtitle">Included software</h2>
<ul>
  <li><img class="icon" src="icons/audacity.png">
    <p class="caption">Audacity Audio Editor</p>
  </li>
</ul>
</div>
</div>
<img class="screenshot" src="screenshots/music.jpeg"> </div>
</body>
</html>

Este paso se repite por cada slide que queramos mostrar en la instalación..


Por haber hecho los slides lo siguiente es configurar el archivo "index.html", este a diferencia del anterior si tiene que tener una estructura, pues usaremos los scripts que copiamos en la carpeta "link-core". A continuación muestro un ejemplo, con resaltado sin negrita el donde ubicamos los slides que habíamos creado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title>ubiquity-slideshow-innovaOS</title>
  <link href="link/general.css" rel="stylesheet" type="text/css">
  <base target="_blank">
  <script type="text/javascript" src="link-core/jquery.js">
 </script>
  <script type="text/javascript" src="link-core/jquery.cycle.all.js">
 </script>
  <script type="text/javascript" src="directory.js">
 </script>
  <script type="text/javascript">
                 SLIDESHOW_OPTIONS = {
                         timeout:50000,
                         speed:600,
                 }
  </script>
  <script type="text/javascript" src="link-core/slideshow.js">
 </script>
</head>

<body>

<div id="slideshow">

<div>
<a href="welcome.html"></a></div>

<div>
<a href="usc.html"></a></div>

<div>
<a href="photos.html"></a></div>

<div>
<a href="music.html"></a></div>

<div>
<a href="education.html"></a></div>

<div>
<a href="office.html"></a></div>

<div>
<a href="gethelp.html"></a></div>
</div>

<div id="controls">
<a class="control-arrow" id="prev-slide"></a> <a class="control-arrow"
id="next-slide"></a> <input type="hidden" id="current-slide"> </div>
</body>
</html>

Ahora que tenemos configurados los slides (hechos en inglés para nuestro ejemplo) nos dispondremos a traducir los slides. Para ello nos dirigimos al la carpeta ubicada en "/ruta/paquete/po":

$ cd /ruta/paquete/po

Dentro de ella encontramos carpetas con los nombres de varias distribuciones, entonces debemos crear una para la nuestra:

$ mkdir nombre_distribucion

Y nos posicionamos en ella:

$ cd nombre_distribucion

Dentro se crean archivos de traducción por cada idioma que se desee, nosotros solo haremos un archivo para el idioma español, Ahora bien, el nombre del archivo se define con la abreviatura en 2 letras del idioma más la extención "po".

$ nano es.po

Para más información y ver el funcionamiento de este tipo de archivos pueden consultar el blog de "120% linux" en el artículo: http://120linux.com/traduciendo-aplicaciones-editando-archivos-po/.


Con esto tenemos "casi" terminada esta pequeña travesía, para acabar debemos actualizar los archivos de contrucción. Ejecutamos el archivo "update-launchpad-translations.sh":

$ sh /ruta/paquete/update-launchpad-translations.sh

Para probar nuestro trabajo podemos utilizar el archivo "test-slideshow.sh", él nos dará una lista con las distribuciones y escojemos la nuestra.

y una vez escogido vemos nuestro resultado: