Ulzurrun de Asanza i Sàez

Month: March 2009

proSilver para SMF Beta 2

Desde comienzos de mes no ha habido grandes novedades en proSilver para SMF (nombre provisional), y después de tres semanas de poca actividad, he acabado la primera fase del desarrollo del theme: todas las páginas están adaptadas.

Ahora viene la segunda fase, en la que se corregirán todos los errores y fallos que hay en las versiones anteriores. En esta fase es necesaria la ayuda de todos para poder corregir todos los errores, ya sea reportándolos (tanto en los comentarios de este artículo como en este post) o explicando cómo arreglarlos.

Por último, podéis descargar el theme aquí o en este post.


Windows 7 Starter no dejará cambiar el fondo de pantalla

Sí, via Genbeta descubro esta extraña realidad, aunque no es la única cosa especial que tendrá Windows 7 Starter, ya que tampoco dejará ejecutar más de 3 aplicaciones a la vez, vamos, si usas el navegador, el correo electrónico y estás reproduciendo música, olvídate de crear un documento de texto.

En fin, afortunadamente habrá otras versiones de Windows 7 con menos restricciones, desde la Home Basic hasta la Ultimate.

Crea redirecciones en WordPress

Hay muchas webs que tienen foros y otras secciones que WordPress no puede gestionar, y para tratar de integrarlas un poco más en WordPress y de paso hacerlas más accesibles, se suele añadir un link al foro y a las demás secciones en el menú de WordPress.

Esto lo podemos hacer de dos formas:

  1. Editamos el theme y añadimos manualmente los links a las demás secciones
  2. Añadimos una redirección al menú de WordPress

El primer método tiene una gran desventaja: tenemos que editar el theme para añadir más elementos o para modificar los existentes, y si no tenemos permisos para modificar los archivos (como por ejemplo, si tenemos un blog en wordpress.com), no podemos recurrir a este método.

El segundo método es el que me parece más interesante, y del que voy a tratar aquí.

Antes de nada, tenemos que tener configurado WordPress de forma que las URL tengan la siguiente estructura: http://miweb.com/articulo . Para poder activar esta opción es necesario el mod_rewrite, que seguramente estará activado en el servidor que uséis. Si no es así, basta con ponerse en contacto con los proveedores de hosting y pedirles que lo habiliten.

Nota: Para hacer la redirección no es necesario en mod_rewrite, pero al modificar los Permalinks, todos los artículos cambiarán la URL por una que sí que necesita mod_rewrite para funcionar. Si no tienes mod_rewrite activado, las redirecciones funcionarán, pero los artículos y las demás páginas no se verán.

Redirecciones en WordPressVamos al Panel de Administración de WordPress, y allí vamos a Opciones » Permalinks.

Elegimos la opción Estructura personalizada, y en el cuadro de texto que hay a la derecha, escribimos: /%postname%/

Con esto deberíamos tener la página como en la siguiente imagen:

Redirecciones en WordPress

Una vez hayamos completado estas modificaciones, le damos a Guardar cambios y vamos a Páginas » Crear.

A continuación vamos a crear una redirección de prueba.

Escribimos de título de la página “Administración“, y ponemos de texto “Vas a acceder al Panel de Administración“. Publicamos la página.

Ahora nos aparecerá debajo del cuadro para escribir el título, el permalink de la página. Le damos a Editar y en lugar de “administracion” escribimos “wp-admin“.

Redirecciones en WordPress

Guarda los cambios de la página y haz trata de acceder a la página desde el inicio del blog. Verás como en lugar de ver la página, te lleva al Panel de Administración.

Con este método puedes añadir redirecciones de forma fácil y rápida, y puedes editarlas cuando quieras.


Ubuntu 9.04 Jaunty Jackalope Beta

Desde hace unos días ya está disponible la Beta de Ubuntu 9.04 Jaunty Jackalope, y si se cumplen las fechas previstas, el día 16 de abril tendremos a nuestra disposición una versión candidata y el 23 del mismo mes, la versión final.

Esta nueva versión inlcuye novedades como Gnome 2.26, Kernel 2.6.28 y X.org 1.6, el nuevo sistema de notificaciones de escritorio, tiempos de arranque reducidos, soporte para la instalación y uso del sistema de ficheros Ext4, mejoras en el soporte de varios monitores y nuevos temas, entre otras.

Se puede descargar la Beta desde aquí.

También tenemos a nuestra disposición imágenes con la cuenta atrás de los días que quedan para la versión final. Podéis verlos aquí.


Añade una descripción a los links del menú

Menú con descripción

En algunas páginas webs los links del menú principal tienen una descripción añadida, algo como “Inicio – Vuelve al inicio de la web”, y además de ser un detalle más, puede ayudar al visitante a conocer por encima el contenido de cada página de tu web.

Hay muchas plantillas para diversos CMS (sobretodo para Joomla) que permiten añadir una descripción a los elementos de cada menú, pero aún no he visto ninguna que lo permita en WordPress, y he decidido redactar un tutorial para explicar cómo añadir estas descripciones a nuestro theme.

En primer lugar, explicaré el proceso que usaremos para añadir estas descripciones a los links del menú:

WordPress genera el menú de forma automática: crea una lista de las páginas del blog. Cada página puede tener campos personalizados, y utilizaremos uno de estos para almacenar las descripciones. Así que editaremos cada página del blog y le añadiremos el campo personalizado subtitle, y le daremos un valor que describa el contenido de la página.

Añadiendo el campo personalizado

Lo siguiente que haremos será crear una función que edite el listado de páginas del blog y a cada página le asigne la descripción que le corresponde, para luego pasar a mostrar el listado de páginas con descripciones.

Esta función estará definida en functions.php, así que abrimos el archivo, nos situamos al final y añadimos el siguiente código:

function create_main_menu() {
$pages = wp_list_pages('echo=0');
$pages = explode('<ul>', $pages);
$pages = explode('</ul>', $pages[1]);
$pages_array = explode('</li>', $pages[0]);
foreach ($pages_array as $value) {
$value_2 = explode('page-item-', $value);
$value_2 = explode('"><a href="', $value_2[1]);
$value_2 = str_replace('current_page_item', '', $value_2[0]);
$meta = get_post_meta($value_2[0], 'subtitle', true);
$value = str_replace('</a>', ' <span class="subtitle">'. $meta .'</span></a>', $value);
echo $value;
}
}

¿Qué hace el código? Bien, lo explico línea a lína:

  1. Comienza la definición de la función create_main_menu
  2. Se crea la variable pages, que contiene el código HTML que devuelve la función wp_list_pages (la que crea el menú en WordPress)
  3. Se le da una nuevo valor a pages, esta vez en forma de matriz que contiene los diversos trozos resultantes de dividir la variable pages original cada vez que aparece un elemento <ul>
  4. Se le da de nuevo un nuevo valor a pages, en forma de matriz que contiene los diversos trozos resultantes de dividir el trozo 1 de la varible pages anterior cada vez que aparece un elemento </ul>
    Estas dos líneas nos permiten centrarnos en el contenido que hay entre el <ul> y </ul>, es decir, en la lista de links del menú en sí
  5. Se crea la variable pages_array, en forma de matriz, que contiene en cada índice un link del menú. Se usa las etiquetas </li> para distinguir cuando acaba un link del menú
  6. Comienza un bucle foreach, en el que la variable pages_array pasa a ser la variable value
  7. Se crea la variable value_2, fruto de descomponer en trozos cada link del menú usando de separador page-item-, el texto que hay antes de la ID de la página del link en cuestión
  8. Se le da un nuevo valor a la varaible value_2, de nuevo es fruto de dividir en trozos la parte 1 de la separación anterior, esta vez usamos de separador “><a href=”, el texto que hay inmediatamente después de la ID de la página del link
  9. Le damos un nuevo valor a value_2, esta vez eliminamos el texto current_page_item, que aparece después de la ID de la página del link que se está visitando en cada momento
    Las tres líneas anteriores nos dejan aislado la ID de cada página, de modo que ahora tenemos el link y la ID de la página del link
  10. Se crea la variable meta, que almacena la descripción del link. Si os dijáis, se usa la función get_post_meta, que tiene 3 parámetros: el primero es la ID de la cual busca los campos personalizados, el segundo es el nombre del campo y el tercero es para elegir entre que la función devuelva un único elemento o una matriz con varios elementos
  11. Se modifica el contenido de la variable value, añadiendo antes del final del link la descripción de la página
  12. En esta línea se muestra cada link
  13. Ahora se cierra el bucle foreach
  14. Y por último se da por definida la función

Ahora en nuestro theme debemos sustituir la función wp_list_pages por create_main_menu y ya tendremos un menú con descripciones.

Nota: Faltaría el código CSS para hacer que el menú quede como en la imagen del comienzo del artículo, pero el problema es que los themes que vienen por defecto en WordPress no tienen un menú apto para añadir esta descripción del modo que aparece en la imagen.


Imágenes de cómo pudo haber sido Windows 7

Hoy han publicado en Genbeta nueve imágenes de ideas que surgieron durante el desarrollo de Windows 7 para aplicar a la interfaz del Sistema Operativo.

En mi opinión, creo que Windows 7 ha quedado bastante bien, y no me parecen demasiado interesantes las ideas que se reflejan en las imágenes, pero bueno, para gustos, colores.

Os dejo las imágenes a continuación:

Boceto de Windows 7Boceto de Windows 7Boceto de Windows 7Boceto de Windows 7Boceto de Windows 7Boceto de Windows 7Boceto de Windows 7Boceto de Windows 7Boceto de Windows 7


Navega de forma anónima con Anonymouse

Anonymouse

Al navegar por la red dejamos un rastro detrás nuestro, como la dirección IP del equipo, el navegador que usamos o el Sistema Operativo bajo el que trabajamos.

La mayoría de los usuarios no nos preocupamos por ocultar esta información, pero siempre hay quien querría tener un poco más de confidencialidad, y aquí es donde entra Anonymouse.org.

Anonymouse.org es una página web que nos permite, entre otras cosas, navegar por Internet de forma más privada mediante un script que se encarga de cargar las páginas web sin enviar información de nuestro equipo.

Aunque lamentablemente no todas las webs funcionan correctamente al cargarse mediante Anonymouse.


Cargando una página web

Vía Anieto2k descubro un interesante esquema donde se ven el conjunto de condiciones que se comprueban cada vez que intentamos acceder a una página web.

Os dejo el esquema:

Esquema

Añade una línea separadora entre cada artículo

Vía el formulario de contacto, Omar me ha preguntado cómo añadir una línea para separar cada artículo del siguiente en WordPress. He pensado que es un tutorial interesante, así que a continuación explico cómo hacerlo.

Vamos a modificar el theme Default, y los archivos que modificaremos serán el index.php y el style.css.

Abrimos el primero y nos situamos entre las lineas 13 y 26. En estas líneas se encuentra el bucle encargado de mostrar los artículos de la página de inicio. El código que encontramos es el siguiente:

<?php while (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> |
 <?php edit_post_link('Edit', '', ' | '); ?>
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>

</div>

<?php endwhile; ?>

El código es sencillo:

Ahora tenemos que decidir dónde poner la línea separadora. Yo he decicido añadirla después de la línea 23, pasados los links referentes a las tags, las categorías y los comentarios.

Así que vamos a la línea 24 y añadismos una nueva línea, en la que escribimos:

<hr class="separator" />

Con esto tendremos un código similar al siguiente:

<?php while (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>

<hr class="separator" />
</div>

<?php endwhile; ?>

Si entramos ahora al blog, podremos ver una línea que separa cada artículo, pero esta línea no es demasiado bonita, y debemos darle algo de estilo y aquí es donde entra en acción el archivo style.css.

Abrimos el archivo style.css y nos situamos al final del mismo, donde añadimos el siguiente código:

hr.separator {
border:none;
border-top:1px dashed #9E9E9E;
}

Este código CSS afectará sólo a los elementos hr con clase separator, así que sólo modificará el estilo de la línea separadora.

Y así tenemos una bonita línea separadora, para añadirla a cualquier theme basta con seguir los mismos pasos, siempre teniendo en cuenta en lugar donde añadir la línea.

Por último, podéis descargar el theme Default modificado directamente desde aquí, por si tenéis problemas con el tutorial.


Data Centers más que curiosos

Hoy en Maestros del Web han publicado una lista de Data Centers curiosos, y la verdad es que son realmente curiosos.

El que más me ha impresionado es el Data Center del bunker nuclear de la Guerra Fría que, entre otras cosas, destaca por: