Currently browsing: April 2009

WordPress 2.8 incluirá jCrop

Beware: This post was published 7 years ago and its content may be outdated.

Vía Anieto2k descubro una novedad más de WordPress 2.8: jCrop.

jCrop permitirá a la nueva versión de WordPress que recortemos las imágenes que hayamos subido al servidor directamente desde el Panel de Administración, evitando tener que recortarlas usando un programa adicional (como Fireworks o Photoshop).

Aunque es una función que no creo que la use demasiado, pienso que puede serme útil algunas veces que tengo prisa por publicar un artículo y editando el archivo desde el Panel de Administración evitaría tener que volver a guardar la imagen y subirla nuevamente.

VirtualBox 2.2 disponible

Beware: This post was published 7 years ago and its content may be outdated.

Hace un par de semanas expliqué cómo usar VirtualBox y cómo crear máquinas virtuales con este software.

Pues ayer se anunció la salida de la versión 2.2 del programa, que entre otras novedades, se encuentra el soporte para el formato OFV, un aumento del límite de memoria de las máquinas virtualies a 16GB en anfitriones de 64 bits, la aceleración 3D Open GL para Linux y Solaris y el soporte para Mac OS X 10.6 (Snow Leopard).

Se puede descargar desde la página oficial, tanto para Windows como para Linux y Mac OS X.

Muestra los artículos en dos columnas

Beware: This post was published 7 years ago and its content may be outdated.

Problamente habréis visto alguna web hecha en Joomla! o algún theme para WordPress que tenga algunos artículos en una única columna y otros dispuestos en dos columnas.

Esto no es muy complicado de hacer, y puede ser útil para hacer diseños para revistas con WordPress, así que voy a explicar cómo adaptar el theme default para mostrar artículos en dos columnas.

A lo largo del tutorial modificaremos el archivo index.php y style.css. Comenzaremos por este último:

style.css

Abrimos el archivo style.css y nos situamos al final del mismo. En este archivo añadiremos dos clases nuevas: col-left y col-right, que servirán para definir el aspecto de ambas columnas.

Las dos clases tendrá una anchura (width) de 49% y la columna derecha flotará hacia la derecha. En código quedaría así:

.col-left {
width:49%;
}
.col-right {
float:right;
width:49%;
}

Bien, con esto hemos acabado de modificar el archivo.

index.php

Ahora pasamos a modificar el archivo index.php. En este archivo haremos más modificaciones que en el anterior, pero antes, repasemos un poco lo que vamos a hacer:

Actualmente, este archivo hace lo siguiente:

  • Muestra la cabecera
  • Comprueba si hay artículos
    • Si hay artículos
      • Crea un bucle y los muestra
    • Si no hay artículos
      • Muestra un mensaje de error y el formulario de búsqueda
  • Muestra la sidebar
  • Muestra el pie de página

Nosotros vamos a modificar esta secuencia, y la vamos a dejar de la siguiente forma:

  • Muestra la cabecera
  • Comprueba si hay artículos
    • Si hay artículos
      • Crea la variable $articulos_mostrados, con valor 0.
      • Crea la variable $alternar, con valor true.
      • Crea un bucle que a cada repetición muestra un artículos
        • Comprueba si se han mostrado X artículos (por ejemplo, 2)
          • Si se han mostrado:
            • Comprueba si la variable $alternar es true
              • Si es true:
                • Cambia el valor de $alternar a false
                • Muestra el artículo en la columna derecha
              • Si no es true (es false):
                • Cambia el valor de $alternar a true
                • Muestra el artículo en la columna izquierda
                • Inserta una capa (div) que reajuste las columnas para evitar que el contenido se salga del sitio donde debería estar
          • Si no se han mostrado:
            • Los muestra e incrementa el valor de $articulos_mostrados en 1 por cada artículo que muestra
      • Finaliza el bucle
    • Si no hay artículos
      • Muestra un mensaje de error y el formulario de búsqueda
  • Muestra la sidebar
  • Muestra el pie de página

Dejemos la teoría de lado y pasemos a modificar el archivo.

Nos situamos en la línea 12, y creamos las variables que aparecían antes:

<?php $alternar = true; ?>
<?php $articulos_mostrados = 0;  ?>

Ahora vamos a añadir la condición que comprobará si se han mostrado los 2 artículos que queremos que ocupen toda la página. Añadimos en la línea 16 (después de while (have_posts(…) :

<?php if($articulos_mostrados < 2): ?>

Ahora tenemos que finalizar la condición. Añadiremos el código siguiente en la línea anterior al endwhile (sobre la línea 30):

<?php $articulos_mostrados++; ?>
<?php else : ?>
<?php endif; ?>

Bien, ahora ya mostrará sólo 2 artículos (puedes cambiar el dos que hemos añadido antes por el número que quieras, pero ten en cuenta que tiene que ser un número par para que las columnas estén equilibradas), pero tenemos que hacer que muestre los otros 8 artículos en dos columnas, a 4 artículos por columna.

Nos situamos entre el <?php else : ?> y el <?php endif; ?>, y añadimos el siguiente código:

<?php if ($alternar): ?><div class="col-right"><?php else : ?><div class="col-left"><?php endif; ?>
<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>
</div>
<?php if (!$alternar): ?><div class="clear"></div><?php endif; ?>
<?php $alternar = !$alternar; ?>

Este código dependiendo del valor de la variable $alternar mostrará el código de la columna derecha o de la izquierda, mostrará el contenido, cerrará la columna, mostrará el código de reajuste de las columnas cuando es necesario y por último cambiará el valor de $alternar.

Conclusión

Con esto ya hemos adaptado el theme para dos columnas. La verdad es que en el theme default no queda demasido bien, ya que las columnas acaban siendo algo pequeñas, pero sin duda es algo útil cuando se usa un theme con un ancho más grande.

Por último, os dejo el theme default modificado por si habéis tenido problemas durante el tutorial.

Artisteer, el software para crear themes de WordPress

Beware: This post was published 7 years ago and its content may be outdated.

ArtisteerCrear un theme para WordPress no es algo difícil, tan sólo requiere unos pocos conocimientos de HTML, CSS y PHP, tiempo e inspiración. No obstante, hay muchos que carecen de estos conocimientos básicos y de tiempo y ganas de aprenderlos, y entonces es cuando recurren a themes diseñados por otros usuarios.

Pero, ¿qué pasa si quieres un theme diferente al de los demás? ¿Es necesario comenzar a aprender HTML, CSS y PHP? No, no lo es (aunque sería recomendable), ya que Artisteer nos lo pone fácil.

Artisteer es un programa (de momento sólo para Windows) que nos permite hacer modificaciones en un theme básico que nos propone el programa. Este theme no es nada del otro mundo, pero el punto fuerte del programa es que podemos cambiarlo prácticamente todo: desde el fondo del theme hasta el color de cada bloque, pasando por las tipografías de cada apartado, el estilo de los botones, los bordes y sombreados, etc.

Y a todas estas opciones se le ha de sumar la facilidad de uso, ya que una de las cosas que más destacan de este programa es lo realmente sencillo que resulta usarlo.

Por último, el programa nos permite crear themes tanto para WordPress como para Joomla! y Drupal.

Los únicos inconvenientes que le veo al programa son las pocas plantillas que tiene (sólo 1) y el precio (de 50$ a 130$), aunque podemos descargarnos una versión de prueba aquí (que añade unas marcas de agua a todas las imágenes que use el theme).

Vídeo: Cambia la carcasa del iPhone 3G

Beware: This post was published 7 years ago and its content may be outdated.

Vía Applesfera descubro un vídeo del blog de Unamito donde se explica cómo cambiar la carcasa al iPhone 3G.

Sinceramente, me parece bastante complejo el proceso de cambio de la carcasa del iPhone, esperaba un proceso mucho más sencillo, pero en fin, con este vídeo se hace más fácil el proceso (aunque dudo que si tuviese un iPhone cambiase la carcasa en vista del proceso que hay que seguir). ¿Qué os parece el proceso? ¿Cambiaríais la carcasa de vuestro iPhone?

Crear Widgets en WordPress 2.8 será más fácil

Beware: This post was published 7 years ago and its content may be outdated.

Vía Anieto2k descubro una novedad más de WordPress 2.8 (que será liberada este mismo mes), una API nueva para Widgets.

Crear nuevos Widgets será tan sencillo como aplicar este código:

class My_RSS_Widget extends WP_Widget {
	function My_RSS_Widget() {
		//Constructor
	}

	function widget($args, $instance) {
		// Pintamos el Widget
	}

	function update($new_instance, $old_instance) {
		// Guardamos en Widget
	}

	function form($instance) {
		// Backend del Widget
	}
}
register_widget('My_RSS_Widget');

Sinceramente, me parece una interesante novedad, aunque muchos de los usuarios no la vayan a utilizar.

Análisis de los mejores servicios de acortamiento de URL

Beware: This post was published 7 years ago and its content may be outdated.

Hoy en Anieto2k han publicado una tabla comparativa en la que se pueden ver las características que tiene cada servicio (o las que no tiene), de forma que nos será más fácil elegir entre estos servicios.

Para los que no sepáis de que va el tema, los servicios de acortamiento de URL son herramientas que nos permiten transformar una URL larga (http://miweb.com/nombre-largo-de-un-interesante-articulo-que-nadie-puede-aprender-de-memoria) en una mucho más corta (http://tinyurl.com/csqkwr).

Por último, aquí tenéis la tabla comparativa de la que hablaba al principio del artículo:

Servicios de acortamiento de URL

Logos para insipirarte

Beware: This post was published 7 years ago and its content may be outdated.

En Smashing Magazine han publicado una lista de logos muy creativos que pueden servir de inspiración a la hora de diseñar el logo de un nuevo proyecto.

Sinceramente, excepto alguno, prácticamente todos me gustan bastante, creo los logos del listado son muy bonitos y creativos.

¿Qué os parecen?