Archivo de la categoría: programación

Adaptar el editor para mostrar código HTML

[programación]

En muchos de mis artículos muestro código HTML. Esto no supone ningún problema para el editor a la hora de crear un nuevo artículo, pero cuando intento editar el contenido de un artículo anterior surgen complicaciones.

Esto ocurre por la manera en la que se está asignando el contenido HTML que se recupera de la base de datos. El contenido se está asignando al textarea de la siguiente manera:

$output.=" <textarea id="text" name="text">".$row[1]."</textarea>";

El problema de hacerlo así, es que si hay etiquetas HTML en el contenido, se están interpretando como parte del código de la página, por lo que empiezan a aparecer cajas de texto y otros elementos en medio del propio artículo.

La solución es por tanto asignar el contenido de forma dinámica con javascript, y hacer esto con CKEditor es sencillo:

$output.=" <textarea id="text" name="text"></textarea>";
$data = str_replace('"','"',$row[1]);
$data = str_replace(" ", "", $data);
$output.='<script type="text/javascript">'
.'var editor = CKEDITOR.replace( "text" );'
.'editor.setData("'.$data.'")'
.'</script>';

Con esto lo que estamos haciendo es, primero crear un textarea vacío. Después, en el contenido del artículo escapamos todas las comillas dobles, y añadimos una suma en los cambios de línea para que no salte un error de javascript. Por último definimos el CKEditor y le asignamos el contenido.

Sustituir el editor de artículos de eggBlog

[programación]

Tras casi dos meses con el blog, uno de los puntos más flojos que le veo es el editor de artículos. EggBlog trae como editor por defecto openwysiwyg. Este editor tiene unos cuantos fallos gordos que empezaban a ser insufribles. Sólo por listar algunos, metía código innecesario en algunas de las etiquetas, todo el estilismo se realiza mediante spans y como factor decisivo, al intentar editar el código HTML no muestra ni un cambio de línea, te lo muestra todo en un único bloque. Vamos, imposible hacer cambios directamente en el código en esas condiciones.

Mirando un poco el código, veo que la fecha de última modificación del editor es de 2007, pero vamos, lo veo normal, seguro que si me voy a su web hay una versión nueva para descargar….. ¡Pues no! La versión más actual es de 2007. Cuatro años abandonado… ummm, hay que cambiarlo 😛

Buscando editores WYSIWYG en javascript, veo que hay dos alternativas predominantes, TinyMCE y CKEditor. Los dos generan código XHTML, son opensource y tienen buenas críticas. ¿Por cual decidirse entonces? Mirando como integrarlos, ambos son sencillos de usar y tienen buen código por si algún día me meto a modificarlos.

Pruebo la demo de los dos, y en cuanto a funcionalidad están muy a la par. Sin embargo, el CKEditor me resulta más agradable de usar… pero ese tampoco es un factor determinante. Lo mejor será preguntar a internet 😛

Buscando en Google “TinyMCE vs CKEditor” me encuentro con este artículo que los compara.

Artículo bastante interesante, que acaba diciendo lo que yo ya había supuesto, que ambos están muy a la par, con el CKEditor un poco por encima. Sigo buscando más comparativas y el CKEditor sale victorioso de la mayoría. Mis dudas se disuelven por completo cuando veo comentarios en los que se dice que el CKEditor es más estable, y el TinyMCE suele tener pequeños bugs.

¡CKEditor es el vencedor!

Ahora hay que integrarlo. ¿Será complicado? Para nada, en 5 minutos solucionado.

Estas 3 líneas definían el viejo editor:

$output .= " <script type="text/javascript" src="_lib/openwysiwyg/scripts/wysiwyg.js"> </script>";
$output.=" <script type="text/javascript" src="_lib/openwysiwyg/scripts/wysiwyg-settings.js"></script>";
$output.=" <script type="text/javascript"> WYSIWYG.attach( 'text', small ); </script>";

Las borramos y las sustituimos por lo siguiente:

$output.='<script type="text/javascript"'
.' src="_lib/scripts/ckeditor/ckeditor.js"></script>';

Ahora solo falta indicarle al editor sobre que textarea debe trabajar. Esto es tan simple como asignar una clase al textarea, por lo que esto:

$output.=" <textarea id="text" name="text">".$row[1]."</textarea>";

Pasa a ser esto:

$output.=" <textarea class="ckeditor" id="text" name="text">"
.$row[1]."</textarea>";

Hay que hacer estos cambios en los métodos eb_admin_editarticle y eb_admin_newarticle. Y con esto ya tenemos nuevo editor. ¡A disfrutarlo!, que la verdad es que es una gozada comparado con el anterior 😀

Acordeón multinivel para el listado de artículos

[programación]

Sigo cambiando cosas que no me gustaban de EggBlog.

El listado de artículos en la columna de la derecha me parecía un poco pobre. Solo mostraba los 10 últimos, por lo que los más antiguos iban quedando relegados al olvido. Se podía acceder a una página con el listado completo de artículos, pero me parecía muy feucha.

La idea era por tanto poder acceder al listado completo de artículos desde cualquier página. Quitar la limitación de 10 artículos es sencillo, pero claro, cuando tenga 100 el listado sería enorme. Hace tiempo trabaje en el curro con un acordeón en Prototype, y me gustaba su funcionalidad, por lo que pensé que sería buena idea tener un acordeón multinivel para los artículos, de forma que se pueda desplegar por años y por meses.

Aquél que usé recuerdo que era un poco “pesado” en cuanto a rendimiento, por lo que decidí usar JQuery en esta ocasión. Buscando un poco encontré este acordeón.

Tenía buena pinta, así que lo estuve probando, y me daba problema al intentar hacerlo multinivel (no realizaba correctamente las animaciones).

Buscando el enlace he encontrado este otro.

También tiene buena pinta, pero no dice nada de multinivel. Tendré que hacer la prueba un día a ver como se comporta.

El caso es que seguí buscando y al final encontré una implementación de un acordeón multinivel que no utiliza ninguna librería por debajo. La implementación es muy simple, el js es diminuto (1,35KB) y funciona a las mil maravillas.

Para implementar el acordeón, el método que hay que modificar es eb_articlelist en el fichero news.php. En principio pensé en adaptar el código existente, pero no me gustaba nada su implementación. Básicamente se hace una consulta SQL para cada mes. Esto puede tener sentido si como máximo se van a mostrar 10 artículos, pero si se quieren mostrar todos no lo veo muy eficiente. Por eso acabé modificando el código por completo:

/**
 * Compone un acordeón con todos los artículos publicados, agrupados por meses
 * y por años.
 * @param integer $n Si su valor es cero no se muestra el acordeón.
 */
function eb_articlelist($n) {
    global $lang;
    settype( $n, "integer" );
    if( $n == 0 ){
        return "";
    }
    $output = '<div class="box"><strong>' . ucwords( $lang['articles'] ) . '</strong>';
    $output .= " " . '<ul class="acc acc_sup" id="acc_sup">';
    $lastYearShown = 0;
    $lastMonthShown = 0;
    $query = mysql_query( "SELECT article_id, article_title, article_date"
    ." FROM eb_articles WHERE article_flag != 0"
    ." ORDER BY article_date DESC" );
    $countNestedAcc = 0;
    while( $row = mysql_fetch_array( $query ) ) {
        $articleDate = $row['article_date'];
        $currentArticleYear = date( "Y", $articleDate );
        $currentArticleMonth  = date( "n", $articleDate );
        if( $currentArticleYear != $lastYearShown ) {
            if( $lastYearShown != 0 ) {
                // Cerramos el año anterior
                $output .= '</ul></div></div></li>';
            }
            // Abrimos el nuevo año
            $output .= " " . '<li><h3>' . $currentArticleYear . '</h3>'
            ." " . '<div class="acc-section"><div class="acc-content">'
            ." " . '<ul class="acc nested" id="nested_'.$countNestedAcc.'">';
            $countNestedAcc++;
            $lastYearShown = $currentArticleYear;
        }
        if( $currentArticleMonth != $lastMonthShown ) {
            if( $lastMonthShown != 0 ) {
                // Cerramos el mes anterior
                $output .= " " . '</ul></div></div></li>';
            }

            // Abrimos el nuevo mes
            $output .= " " . '<li><h3>' . ucwords( $lang['month' . $currentArticleMonth] )
            . " " . $currentArticleYear . '</h3>'
            . " " . '<div class="acc-section"><div class="acc-content"><ul>';
            $lastMonthShown = $currentArticleMonth;
        }

        $output .= " " . '<li><a href="'
        .eb_links_article( $row['article_title'], $row['article_id'] ) . '">'
        .$row[1] . '</a></li>';
    }

    // Cerramos el último mes, año y acordeon
    $output .= " " . '</ul></div></div></li>'
    ." " . '</ul></div></div></li>'
    ." " . '</ul>';

    // Inicializamos los acordeones con javascript
    $output .= " ".'<script type="text/javascript" src="_lib/scripts/script.js"></script>'
    ." " . '<script type="text/javascript">';

    // Acordeón superior
    $output.=" ".'var parentAccordion = new TINY.accordion.slider( "parentAccordion" );'
    ." " . 'parentAccordion.init( "acc_sup", "h3", 0, 0);';

    // Acordeones anidados
    for( $i = 0; $i < $countNestedAcc; $i++ ) {
        if( $i == 0 ) {
            $ex = 0;
        }
        else{
            $ex = -1;
        }
        $output .= " " . 'var nestedAcc' . $i . '=new TINY.accordion.slider( "nestedAcc' . $i . '" );'
        ." " . 'nestedAcc' . $i . ' . init( "nested_' . $i . '", "h3", 1,' . $ex . ', "acc-selected" );';
    }

    // Fin del script
    $output .= " " . '</script>';

    // Fin del div box
    $output .= '</div>';

    return $output;
}

Colocamos el script del acordeón (script.js) en la carpeta _lib/scripts, y añadimos las imágenes a themes/default/images.

Por último hay que modificar los estilos para el acordeón, por lo que añadimos los siguientes estilos a style.css:

/* ESTILOS PARA EL ACORDEÓN */
.acc_sup {
    width:205px;
    list-style:none;
    color:#033;
    margin:0 auto 40px -16px;
}

.acc_sup h3 {
    width:165px;
    border:1px solid #9ac1c9;
    padding:6px 6px 8px;
    font-weight:bold;
    margin-top:5px;
    cursor:pointer;
    background:url(images/header.gif);
    font-size: 9pt;
    margin: 0;
}

.acc_sup h3:hover { background:url( images/header_over.gif ) }
.acc_sup .acc-section {
    overflow:hidden;
    background:#fff;
    width: 180px;
}

.acc_sup .acc-content {
    width:162px;
    padding:15px;
    border:1px solid #9ac1c9;
    border-top:none;
    background:#fff;
    padding-left: 0px;
}

.nested {
    width:180px;
    list-style:none;
    color:#033;
    margin-bottom:15px;
    margin-left: -7px;
}

.nested h3 {
    width:145px;
    border:1px solid #9ac1c9;
    padding:6px 6px 8px;
    font-weight:bold;
    margin-top:5px;
    cursor:pointer;
    background:url(images/header.gif);
}

.nested h3:hover { background:url( images/header_over.gif ) }

.nested .acc-section {
    overflow:hidden;
    background:#fff;
    width: 160px;
}

.nested .acc-content {
    width:127px;
    padding:15px;
    border:1px solid #9ac1c9;
    border-top:none;
    background:#fff;
}

.nested .acc-selected { background:url( images/header_over.gif ) }

Con esto me cargo la página con el listado de artículos. Total, ya no aporta ninguna funcionalidad, y para mostrar el mismo acordeón que en el resto de las páginas, ya no tenía mucho sentido 😀

Añadiendo paginación al blog

[programación]

Pese a lo que me está gustando eggBlog, tiene algunas decisiones que me parecen incomprensibles. La principal es que solo se muestren 3 artículos en la página principal y no exista ningún tipo de paginación.

Así que me puse a realizar las modificaciones necesarias para añadir paginación y que el número de artículos a mostrar en las páginas fuese configurable.

Lo primero es añadir el parámetro de configuración en config.php. En mi caso, por defecto quiero mostrar 5 artículos por página:

$config['posts_per_page'] = "5";

Para hacerlo configurable debemos modificar admin.php. El método eb_admin_config se encarga de mostrar los parámetros de configuración. En el “if” se muestran por pantalla los parámetros almacenados, mientras que el “else” se encarga de construir el formulario para modificarlos. En el if introducimos:

$output.=" <tr><th>" . ucwords( 'Artículos por página' ) . "</th><td>"
.str_replace( "&Acirc;", "", htmlentities( $config['posts_per_page'], ENT_QUOTES ) )
."</td></tr>";

Mientras que en el else introducimos:

$output.=" <tr><th><label for="">" . ucwords( 'Artículos por página' )
."</label></th><td><input class="inputtext" id="" type="text""
."name="posts_per_page" value=""
.htmlentities( $config['posts_per_page'], ENT_QUOTES )."" /></td></tr>";

De la paginación en sí, se encarga una nueva página llamada page.php. Su contenido es el siguiente:

<?php
require_once "_lib/global.php";
if( !empty( $_GET['id'] ) ) {
    settype( $_GET['id'], "integer" );
}
eb_pre();
eb_head('');
$articles = getArticlesIdsForPage( $_GET['id'], $config['posts_per_page'] );
if( count( $articles ) > 0 ) {
    echo eb_article( 0, $articles );
}

showPagination( $_GET['id'], $config['posts_per_page'] );
eb_foot();
?>

Los nuevos métodos que se encargan de la paginación se encuentran en news.php y son los siguientes:

/**
 * Obtiene un vector con los IDs de los N artículos que se deben mostrar en la
 * página indicada.
 *
 * @param integer $page El número de la página a mostrar
 * @param integer $n El número de artículos a mostrar en la página
 */
function getArticlesIdsForPage( $page, $n ) {
    settype( $page, "integer" );
    settype( $n, "integer" );
    $articleIds = array();
    $sql = "SELECT article_id FROM eb_articles WHERE article_flag = 1"
          ."ORDER BY article_date DESC";
    $query = mysql_query( $sql );
    while( $row = mysql_fetch_array( $query ) ) {
        $articleIds[] = $row['article_id'];
    }

    $startIndex = ( $page - 1 ) * $n;
    $endIndex = $startIndex + $n - 1;

    if( $startIndex > ( count( $articleIds ) - 1 ) ) {
        return array();
    }

    if($endIndex > ( count( $articleIds ) - 1 ) ){
        $endIndex = count( $articleIds ) - 1;
    }

    $output = array();

    for( $i = $startIndex; $i <= $endIndex; $i++ ){
        $output[] = $articleIds[$i];
    }

    return $output;
}

/**
 * Se encarga de mostrar los enlaces a artículos anteriores y posteriores
 * dependiendo de la página en la que se encuentra el usuario.
 *
 * @param integer $currentPage La página actual
 * @param integer $articlesPerPage El número de artículos por página
 */
function showPagination( $currentPage, $articlesPerPage ){
    settype( $currentPage, "integer" );
    if( $currentPage > 1 ){
        showPrevPageLink( $currentPage );
    }

    if( count( getArticlesIdsForPage( $currentPage + 1, $articlesPerPage ) ) > 0 ){
        showNextPageLink( $currentPage );
    }
}

/**
 * Muestra el enlace a la página anterior.
 *
 * @param integer $currentPage La página actual
 */
function showPrevPageLink( $currentPage ){
    echo '<div class="paginacionPrev"><a href="page-' . ( $currentPage - 1 )
    .'.html"><- Artículos recientes</a></div>';
}

/**
 * Muestra el enlace a la página siguiente.
 *
 * @param integer $currentPage La página actual.
 */
function showNextPageLink( $currentPage ){
    echo '<div class="paginacionNext"><a href="page-' . ( $currentPage + 1 )
    .'.html">Artículos anteriores -></a></div>';
}

Por último modificamos el index.php para utilizar el nuevo parámetro y mostrar la paginación:

<?php
require_once '_lib/global.php';

global $config;
eb_pre();
eb_head('');

$articles = eb_articles( $config['posts_per_page'] );

if( count( $articles ) > 0 ) {
    echo eb_article( 0, $articles );
}

showPagination( 1, $config['posts_per_page'] );

eb_foot();
?>

Para que la paginación también utilice URL semánticas, debemos modificar el .htaccess, añadiendo esta como la primera regla:

RewriteRule page-([0-9]+).html$ page.php?id=$1 [L]

Crear un sitemap.xml de forma dinámica con PHP

[programación]

Siguiendo con las optimizaciones para mejorar la indexación por parte de Google, vi en las herramientas que proporciona Google a webmasters que se puede proporcionar un sitemap en formato xml para que Google pueda rastrear con mayor facilidad algunas páginas de difícil rastreo.

En teoría, con la actualización de las Friendly URLs ya no tengo páginas de difícil rastreo, pero viendo que no me indexa, pues mejor dar todas las facilidades posibles.

Lo primero que hice fue crear un sitemap.xml mediante esta página.

La página se encarga de rastrear el sitio y obtener el listado de enlaces y te genera un xml para descargar. Después se deja en la raíz del blog, y ya es accesible en la ruta /sitemap.xml.

El problema es que según se generan nuevos artículos, tendría que estar volviendo a generar manualmente el sitemap. Además, aparecían enlaces que no estoy especialmente interesado en que se indexen, como las etiquetas o la página de registro.

La solución, por tanto, es que el sitemap se genere de forma dinámica. Estuve buscando generadores de sitemap en PHP y al final encontré este tutorial de como hacer el tuyo propio. Lamentablemente el tutorial ya no está disponible.

Usando ese código como base y el sitemap.xml que había generado con la primera página como plantilla, lo he adaptado para poder funcionar con la base de datos de eggBlog.

Al final, solo añado las URLs de los artículos, ya que son mi prioridad en la indexación, pero no debería ser complicado modificar el código para añadir más enlaces.

[ACTUALIZACIóN 05/03/2011]

He realizado algunas modificaciones al sitemap.php. Anteriormente estaba utilizando la fecha de publicación como la fecha de modificación el el sitemap, pero claro, yo quiero indicar a Google que un articulo ha sido actualizado, por lo que necesito tener una fecha de modificación. Para eso añadí una nueva columna a la tabla “eb_articles” con el nombre “mod_date”.

Hay que establecer su valor en dos métodos, eb_admin_editarticle y eb_admin_newarticle, ambos en admin.php. Simplemente hay que añadir .",mod_date="".time(). en el INSERT.

También es interesante añadirlo a la definición de la tabla en el método eb_install para una futura migración o reinstalación. Solo hay que añadir:

"mod_date int NOT NULL DEFAULT '0',".

Por si alguien lo quiere aprovechar, aquí os dejo el código para descargar. Me ha tocado subirlo como un txt, ya que no me deja subir ficheros zip… ¬

[ACTUALIZACIóN 11/10/2011]

Con tanto cambio de servidor, el fichero zip se perdió en algún lado, así que a continuación pongo la útima versión que hice para eggBlog. Para wordpress lo mejor es optar por un plugin como el Google (XML) Sitemap Generator.

<?php
require_once "_lib/global.php";
header( "Content-Type: text/xml;charset=iso-8859-1" );

// Connectamos con la base de datos
mysql_connect( $config['mysql_host'], $config['mysql_user'], $config['mysql_pass'] );
@mysql_select_db( $config['mysql_db'] ) or die( "Unable to select DB" );

// Realizamos la consulta
$sql = "SELECT article_id, mod_date, article_title, article_date"
." FROM eb_articles"
." WHERE article_flag = 1 OR article_flag = 2"
." ORDER BY article_date DESC";
$query = mysql_query( $sql ) or die( "Query failed" );

// Escribimos la cabezera del xml
echo '<?xml version="1.0" encoding="UTF-8"?>
    <urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">';

$maxArticleDate = 0;
settype( $maxArticleDate, "integer" );

while( $row = mysql_fetch_array( $query ) ) {

    // Obtenemos la Friendly URL del articulo
    $article_link = eb_links_article( $row['article_title'], $row['article_id'] );

    // Componemos la fecha de modificación (p.e. 2011-02-18)
    $year = date( "Y", $row[1] );
    $mon  = date( "m", $row[1] );
    $day  = date( "d", $row[1] );

    $lastModDate = $year . '-' . $mon . '-' . $day;

    echo
        '<url>
            <loc>' . $article_link . '</loc>
            <lastmod>' . $lastModDate . '</lastmod>
            <changefreq>monthly</changefreq>
        </url>';

    $articleDate = $row['article_date'];
    settype( $articleDate, "integer" );
    if( $articleDate > $maxArticleDate ) {
        $maxArticleDate = $articleDate;
    }
}

mysql_close(); //Cerramos la conexión

$year = date( "Y", $maxArticleDate );
$mon  = date( "m", $maxArticleDate );
$day  = date( "d", $maxArticleDate );

$lastCreateDate = $year . '-' . $mon . '-' . $day;

echo
    '<url>
        <loc>' . $config['domain'] . 'index.php</loc>
        <lastmod>' . $lastCreateDate . '</lastmod>
        <changefreq>daily</changefreq>
    </url>';

echo '</urlset>';
?>

¿Indexa Google las páginas PHP?

[programación]

En teoría sí, pero por alguna razón a mi no.

Encontré este artículo que trata el tema de la indexación de páginas PHP por parte de Google y esclarece muchos de los mitos.

Ahí se explica que no debería haber ningún problema con las páginas generadas dinámicamente, pero en el caso de eggBlog, no parece indexar los artículos. En este caso se accede a los artículos a través de la página news.php y una ID, por ejemplo:

http://tu-dominio.com/news.php?id=12

Parece que el consenso general es que Google tiene problemas, o se esfuerza menos, en indexar páginas que tienes más de 2 parámetros, pero en mi caso solo tengo 1, el id, y no debería dar problemas…

El caso es que en el foro de eggBlog encontré un hilo en el que comentaban como sustituir la utilización de IDs por Friendly URLs. El usuario Faris se curró una modificación para el blog para implementar las Friendly URLs

Tras probar la modificación, estaba casi a punto, pero daba un fallo al intentar ir a los enlaces. Parecía cosa del .htaccess, así que tras investigar un poco encontré la respuesta. Solo hacía falta añadir esta linea:

RewriteBase /

El código completo del .htaccess por si alguien lo necesita es el siguiente:

Options +FollowSymLinks
RewriteEngine on
RewriteBase /
RewriteRule .*-([0-9]+).htm$ news.php?id=$1 [L]
RewriteRule .*-([0-9]+)/$ news.php?id=$1
RewriteRule (.*)-([0-9]+)$ $1-$2/ [R]
RewriteRule .*/([0-9]+)/$ news.php?id=$1
RewriteRule (.*)/([0-9]+)$ $1/$2/ [R]

Y aquí la página que suelo usar para trabajar experimentar con expresiones regulares.

El resultado final es que los enlaces a la derecha que van a los articulos muestran en la URL el nombre del artículo y el rastreador de Google debería de entrar en todos. A ver que tal en la próxima indexación…

[ACTUALIZACIÓN 15/02/2011]

Es irónico que la entrada que habla sobre Friendly URLs tenga una que justamente falla. ¿El problema? Pues que se está utilizando el título de la entrada como URL y ahí tengo un bonito interrogante (?), que se usa para pasar parámetros… y peta. Al principio pensaba que también estaban afectando el otro interrogante y el acento, pero solo quitando el interrogante de cierre se ha solucionado, aunque la URL ya no quedaba “bonita” ya que los caracteres especiales se sustituían por su código, por lo que he acabado sustituyendolos todos.

El método eb\_links\_article del fichero _lib/global.php queda así:

// F4ris - 20090708 - Function to produce SEO friendly links, dependant on config flag.
function eb_links_article( $title,$id ) {
    global $config;
    if( $config['seo_flag'] == 1 ) {
        $unsuportedChars = array( "&aacute;", "&eacute;", "&iacute;", "&oacute;", "&uacute;", "&iquest;", "?" );
        $suportedChars = array("a", "e", "i", "o", "u", "", "");
        $tmpTitle = str_replace( $unsuportedChars, $suportedChars, $title );
        $link = $config['domain'] . urlencode( str_replace(" ", "-", str_replace( " - ", "-", $tmpTitle ) ) ) . "-" . $id . ".htm";
    } else {
        $link = $config['domain'] . "news.php?id=" . $id;
    }
    return $link;
}

Ordenar un Vector de manera aleatoria en j2me

[programación]

Soy un gran fan de Java. Está claro que no es el lenguaje que mejor rendimiento da, pero la portabilidad, la estructura del lenguaje en sí y las herramientas disponibles (viva Eclipse!) hacen que disfrute programando en Java.

Últimamente estoy haciendo cositas de programación para mi Nokia, que corre un S40 y tiene Java Micro Edition. Me costó un poco al principio hacerme a los elementos de interfaz gráfica, pero ahora que ya lo domino más, puedo empezar a meterle funcionalidades chulas a los programas.

El caso es que necesitaba ordenar de manera aleatoria un Vector. En Java SE es inmediato con el método Collections.shuffle(Vector), pero en j2me no lo tenemos. Buscando un poco encontré un par de enlaces donde proponían soluciones, pero como no me gustaban sus implementaciones, pues al final cogí el código fuente del método Collections.shuffle y lo he adaptado para j2me.

Por si a alguien le resulta útil, aquí lo tenéis:

public static void shuffle(Vector v){
  Random random = new Random(System.currentTimeMillis());
  Object[] array = new Object[v.size()];
  for(int i = 0; i < v.size(); i++){
    array[i] = v.elementAt(i);
  }

  int index;
  Object temp;
  for(int i = array.length - 1; i > 0; i--){
    index = random.nextInt(i + 1);
    temp = array[i];
    array[i] = array[index];
    array[index] = temp;
  }

  for(int i = 0; i < v.size(); i++){
    v.setElementAt(array[i], i);
  }
}

Control de versiones

[programación]

Hola de nuevo! Tras un largo parón, vuelvo a la carga con energías renovadas!

Y como vuelvo a programar en casa, lo primero que he querido hacer es montarme un sistema de control de versiones de mi código, ya que me he acostumbrado a utilizarlo en el trabajo y me parece increíblemente útil.

Allí usaba principalmente CVS integrado en el Eclipse, pero nunca tuve que preocuparme del servidor o de crear nuevos proyectos. Ahora que he intentado hacerlo todo desde cero, me he encontrado con múltiples problemas. La máquina que uso para programar es un MacBook, pero quiero tener el repositorio en otro lugar, por si el portátil muere o si tengo que dejarlo encendido varios días seguidos.

El caso es que mi otro ordenador es un vetusto Pentium 4 con Windosw XP, y tras unos días de búsqueda, no ha habido manera de encontrar un buen servidor CVS gratuito para Windows. ¿No existe nada? La verdad es que ya no lo necesito, pero tengo curiosidad…

La segunda opción fue crear una máquina virtual con un Linux, y tener ahí el servidor. Pero tras instalar la máquina virtual y lanzarla, quedó claro que la opción era inviable, más que nada por la lentitud. El giga de RAM no da para más…

Viendo que montar un CVS se estaba complicando, me dio por echarle un vistazo a Subversion (SVN). Lo utilicé de manera muy esporádica en un proyecto anterior, y recuerdo que cuando lo comenté con mi anterior jefe, me hablo de sus virtudes situándolo como una opción superior a CVS.

Me puse a buscar un servidor de SVN gratuito para Windows y lo encontré rápidamente. Se trata de VisualSVN. Está disponible en dos versiones, pero la versión gratuita está muy completa, ofreciendo la versión de pago unas pocas funcionalidades que no estoy interesado en utilizar.

La instalación es muy sencilla, y en apenas unos pocos minutos puedes tener un servidor SVN funcionando. Lo único que falta es configurar el Eclipse para que se conecte al servidor.

Al contrario que CVS, Eclipse no trae integrado SVN, pero hay un proyecto en incubación, llamado Subversive, que se encuentra en una avanzada fase de desarrollo y es completamente funcional.

  1. Instalarlo en Eclipse es tan sencillo como ir a Ayuda -> Instalar Nuevo Software…
  2. Del desplegable seleccionamos Helios – http://download.eclipse.org/releases/helios
  3. En ‘Colaboración’ seleccionamos las opciones relacionadas con Subversive, que suelen estar de las últimas.
  4. Continuamos con la instalación como con cualquier otro componente de Eclipse, y al finalizar pedirá reiniciar Eclipse.
  5. Al iniciarse, nos ofrecerá una lista de conectores para SVN. Los conectores a elegir dependerán de la versión de SVN que utilice nuestro servidor. En mi caso era la 1.6.12, por lo que elegí los conectores para la 1.6.x. Yo recomiendo instalar los dos que se ofrecen, el de código nativo (Native JavaHL) y el implementado en java (SVNKit).

En mi primer intento instalé únicamente el nativo y no hubo manera de hacerlo funcionar. Ahora estoy utilizando el SVNKit y sin problemas. En esta página tenéis una comparación de los pros y los contras de los conectores. En mi opinión SVNKit es a la larga una mejor opción.

Solo queda abrir la perspectiva de SVN y crear un repositorio, lo cual resulta bastante intuitivo y es muy similar a CVS.

Espero que os resulte útil, y confío en actualizar más frecuentemente el blog. Nos vemos!

[ACTUALIZACIÓN 11/02/2011]

Pues ya llevo unos meses usando Subversion y estoy encantado. No he notado que sea superior a CVS, pero la funcionalidad ha sido perfecta.

El otro día hice un tutorial de configuración de Subversive para un amigo y resulta que por unos problemas que han tenido con las versiones, la instalación ya no es tan sencilla como antes. Lo pasaré a formato web y lo colgaré para quien lo necesite 🙂

[ACTUALIZACIÓN 10/10/2011]

Me instale la última versión de Eclipse (Indigo) y la instalación de Subversive fue sin problemas, por lo que parece que ya está solucionado lo que comentaba en la última actualización.