Blog sobre programación, Japón y chorradas varias
Bueno, igual todo no, pero me he estado empapando de documentación y vídeos de conferencias, y me he dado cuenta que estoy desactualizado.
Estas son algunas de las nuevas tecnologías y metodologías que ya estoy utilizando en el desarrollo de aplicaciones web:
Y aquí algo de la documentación que me ha motivado a modernizarme:
Últimamente, al final del día me duelen los ojos y la cabeza. Me paso el día frente a la pantalla del ordenador y la mayoría de aplicaciones que utilizo y webs que visito tienen un fondo blanco o muy claro, produciendo mucha luminosidad. He pensado que tal vez, si cambio esos fondos tan brillantes por otros más oscuros, me acabará doliendo menos la cabeza. Algunas webs ofrecen distintos temas que permiten cambiar los colores, pero la mayoría tienen un estilo único.
Aquí es donde entra Stylish en acción. Básicamente, es un complemento para Firefox que permite añadir código CSS a cualquier página web, y que este código se vuelva a cargar cada vez que visites la web (como si hicieses cambios con el Firebug, y los cambios siguen ahí cuando refrescas la página). En userstyles.org hay un montón de temas que ha subido la gente para una buena variedad de páginas web. Estas son las que estoy usando actualmente:
NeoGAF Pro Dark: No solo lo vuelve oscuro, sino que además añade algunos estilos que lo hacen más bonito. NeoGAF ha lanzado su nuevo aspecto para 2013 y esta nueva versión trae la posiblidad de cambiar a un tema oscuro, así que ya no es necesario usar Stylish. Ha salido también la nueva versión de este estilo, y oscurece un poco más la web, así que vuelve a valer la pena usarlo.
[Actualización: 7/2/2014] Con los últimos cambio en la interfaz online de Twitter, la combinación de estilos que usaba hasta ahora ya no es efectiva. Por suerte he encontrado Dark Twitter by Batmop que casi me gusta más que la conbinación anterior.
Twitter Dark CALM Blue Glow: Versión oscura con algunos toques de azul. Tiene algunos fallos, pero son facilmente corregibles.
Twitter Wide 1020px: Hace Twitter más ancho para aprovechar más la pantalla.
Gmail Dark Theme Fix: ¡Este lo he hecho yo! Básicamente, le da un fondo oscuro a los mensajes, que actualmente es blanco.
Black Youtube by Panos: Su nombre lo dice todo, Youtube con un fondo negro.
Youtube centered, no recomendations, no comments: Este también es creación mía. Elimino la barra derecha de recomendaciones y elimino los comentarios. Después hago más grande el vídeo y lo pongo todo centrado. Junto con el estilo de Panos para hacer Youtube oscuro se consigue una muy buena combinación.
Black Google By Panos: Como su nombre indica, es Google pero en negro. La pena es que solo funciona para la búsqueda de texto. Para imágenes falla bastante y en el resto de aplicaciones de Google no parece hacer nada.
Wikipedia – Dark, blue, simple: Como su nombre bien indica, fondo oscuro con letras blancas y enlaces en azul.
Wikipedia – Layout, enhanced: Este funciona en conjunción con el anterior, logrando un resultado muy agradable. Esconde todos lo menús en una barra superior, dejando en pantalla solo el texto para una mejor lectura.
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 😀