Currently browsing: January 2010

40 logos con formas circulares

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

A mediados de semana publicaron en SmashingApps una recopilación de 40 logotipos de diferentes empresas que parten de círculos, logotipos como el de Firefox, WordPress, Vodafone o AT&T.

Lo cierto es que viendo la lista, hay muchos que son muy similares entre sí, aunque pueden servir como inspiración para próximos proyectos.

Segunda y tercera actualización de WP Carousel 0.4

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

Hoy ha sido reportado en el foro un bug importante que afecta a WP Carousel 0.4.0.x y WordPress 2.8.x. El bug consiste en que la función add_theme_support no existe en versiones anteriores a WordPress 2.9 y al tratar de llamarla directamente, el script falla y no se puede activar el plugin.

Este fallo está arreglado en la versión 0.4.0.2 de WP Carousel, que en las próximas horas estará disponible en el servidor de WordPress (lo que tarde en actualizar los datos sobre la última versión, ya que ésta ya está en el repositorio), sin embargo este bug no es el único que se arregla en esta versión, sino que hay otros 4 más que no han sido reportados pero sí arreglados.

Para comenzar, se ha actualizado la traducción de WP Carousel, que ahora también traduce el texto que precede al código que se debe poner para mostrar el carrusel (antes siempre estaba en inglés, ahora la traducción española está disponible), por otro lado se ha arreglado un error en el código HTML del theme default-sidebar que consistía en que una capa (div) estaba abierta pero no se cerraba. Ahora WP Carousel y WP Main Menu son compatibles. Anteriormente no lo eran porque olvidé renombrar la variable $path, que indicaba rutas a ciertas carpetas y archivos. Realmente sólo he visto que afecta al gestor de themes, pero realmente podría afectar a muchas más cosas así que he renombrado esta variable a $wp_carousel_path, eliminado posibles repeticiones (en la próxima versión de WP Main Menu renombraré también la variable). Por último se ha arreglado un fallo en el gestor de themes que hacía que en los datos de la versión theme activado siempre se mostrase el valor 1.1, en lugar del valor correspondiente.

Disculpad la cantidad de bugs de estas versiones. Las prisas por liberarlo han acabado haciendo que no revisase bien los fallos. Al menos son fallos fáciles de arreglar y a las pocas horas ya hay una nueva versión disponible, pero disculpadme de nuevo.

Edito: He encontrado un bug más, que hacía que no se mostrase la lista desplegable para seleccionar el contenido que se debe añadir al carrusel. Este error es el único que arregla la versión 0.4.0.3.

Ubuntu 10.04 incluirá un manual oficial

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

Vía Genbeta descubro que la próxima versión de Ubuntu, Lucid Lynx, vendrá con una manual oficial en PDF, de modo que todos aquellos usuarios que quieran usar Ubuntu pero se pierdan configurando el Sistema Operativo y realizando algunas tareas, tendrán a su disposición un documento que poder revisar para resolver sus dudas.

De momento parace que el manual oficial estará disponible sólo en inglés, aunque supongo que se traducirá a otros idiomas (al fin y al cabo, no todo el mundo sabe el inglés suficiente como para entender un manual de ese tipo) y se actualizará cada seis meses (supongo que coincidiendo con la liberación de nuevas versiones).

WP Carousel 0.4.0.1

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

¡Ya comenzamos con los arreglos de fallos de WP Carousel 0.4! Y es que aunque parezca mentira, unas pocas horas después de liberar la versión 0.4, tengo que liberar la versión 0.4.0.1, que arregla un par de bugs que he encontrado en la versión anterior, añade una nueva función y evita problemas con los archivos.

Pero vayamos punto por punto. El bug que arregla esta versión aún no ha sido reportado, así que creo que nadie lo ha tenido aún. Consiste en que si creamos X carruseles y no los mostramos todos, es posible que varios fallen. El motivo del bug es algo relativamente simple. El código que inicia los carruseles se carga siempre, de modo que es posible que se muestre el carrusel con ID 5, con ID 1 y con ID 0, pero no el que tiene ID 4, ni el 3 ni el 2, de modo el script, al tratar de ejecutarse, conseguirá hacer funcionar los carruseles con ID 0 y 1, pero al llegar al que tiene por ID 2, no podrá continuar, ya que no se muestra, por tanto llegará a un error y dejará de ejecutarse correctamente, haciendo fallar al carrusel con ID 5, que sí se muestra en este ejemplo.

Este bug lo he detectado al eliminar el Widget de la sidebar de mi blog de pruebas, que tenía por ID, 0, y ha sido entonces cuando he visto el error.

El segundo error que he visto es muy estúpido, había traducido mal una frase al español, en lugar de poner volver, he puesto volever. Es posible que lo hayáis visto y no os hayáis dado cuenta del error, pero ya está solucionado.

La función nueva que se añade es que ahora la función wp_carousel es capaz de devolver el código HTML generado, y no sólo mostrarlo. El principal motivo para añadir esto es que en próximas versiones se podría añadir una etiqueta del estilo de [WP_CAROUSEL:ID] que se reemplace automáticamente por el carrusel en cuestión, de modo que no sería necesario ni editar el theme: se podría mostrar el carrusel en artículos y páginas.

Pero el verdadero motivo por el que publico tan pronto la versión 0.4.0.1 es muy diferente. Resulta que al subir los archivos al servidor de WordPress, estaba usando la vista como árbol de svnX. Yo añadí las carpetas principales (img, css, js, themes…) pensando que el sistema era recursivo, es decir, que él sólo añadiría automáticamente los archivos que contenían esas carpetas, pero no, no es así, de modo que durante aproximadamente una hora ha estado en el servidor de WordPress una versión de WP Carousel 0.4 inoperativa, ya que no incluía, por ejemplo, el código JS que inicia el carrusel ni los themes ni las imágenes… ni nada. Para evitar tener que avisar a todos aquellos que han descargado esta versión (que de hecho no sé ni quiénes son), subo ya la versión 0.4.0.1 y cuando actualicen a esta versión, ya tendrán todos los archivos necesarios para el buen funcionamiento del plugin.

Ya está disponible WP Carousel 0.4

Beware: This post was published 6 years ago and its content may be outdated.
Theme por defecto de WP Carousel 0.4

Theme por defecto de WP Carousel 0.4

Estos últimos días he estado publicando bastante sobre WP Carousel 0.4, y aunque no he querido en ningún momento dar una fecha exacta de la liberación de esta versión, lo cierto es que estaba totalmente convencido de que si no hoy, en un par de días estaría acabada.

Las novedades de esta versión ya las he comentado antes, así que no haré más hincapié en ellas. Podéis verlas en este artículo o en la página del plugin (que voy a actualizar estos días, añadiendo los datos de la nueva versión y la nueva documentación).

Antes de actualizar, debéis tener en cuenta que no son compatibles los métodos de almacenamiento de WP Carousel 0.3 (y anteriores) con los de WP Carousel 0.4. El motivo de esto es que la nueva versión permite añadir mucho más contenido al carrusel, y para gestionarlo de forma más cómoda, fácil y flexible, he modificado las matrices que almacenaban el contenido, pasando de ser una única matriz con la configuración de cada carrusel a dos matrices: una para la configuración de cada carrusel y otra para el contenido de cada carrusel. Ciertamente, podría haber creado alguna función para convertir los datos antiguos al nuevo esquema de almacenamiento, pero tendiendo en cuenta que las versiones anteriores permitían menos configuración que la actual, he decido hacer borrón y cuenta nueva. Las próximas versiones de WP Carousel sí que serán retrocompatibles con el sistema de almacenamiento.

Podéis actualizar automáticamente WP Carousel o descargar la última versión desde aquí.

WordPress 2.9.1 ya disponible

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

La versión 2.9 de WordPress vino cargada de novedades y de errores, y para subsanar estos últimos se ha liberado la versión 2.9.1, que corrige un total de 24 bugs de la versión anterior, entre los que se encuentra el que mostraba un error en la función curl_setopt() en varios lugares diferentes del Panel de Administración.

Como de costumbre, podéis actualizar desde el Panel de Administración o descargando y subiendo los archivos de esta nueva versión, que ya está disponible tanto en inglés como en español.

Diseña un theme para WP Carousel

Beware: This post was published 6 years ago and its content may be outdated.
Theme por defecto de WP Carousel 0.4

Theme por defecto de WP Carousel 0.4

Con este título ya os podéis imaginar de qué trata el artículo y cómo va el desarrollo de WP Carousel 0.4. Sobre lo primero, hoy explicaré cómo diseñar un theme para WP Carousel (similar a los de WP Main Menu pero con sus cosas particulares) y acerca de lo segundo, he de decir que va inesperadamente muy bien: ya sólo queda el Widget para la Sidebar, los múltiples carruseles en una (o varias) páginas, las traducciones, el valor por defecto de ciertas variables que se pueden configurar (como anchura de los paneles, mostrar flechas o no, etc), exportar e importar y la búsqueda y arreglo de errores. ¿Previsiones? No, gracias. Seguiré sin dar un fecha exacta, aunque voy bastante bien, prefiero seguir sin presión, aunque si tuviera que dar un porcentaje de lo completado de esta versión, diría que ya he superado el 60%.

Pero volviendo al tema, es hora de explicar cómo crear theme para WP Carousel. Por defecto vendrán un par de themes (tengo hechos 2, aunque puede que añada alguno más especialmente pensado para la sidebar), así que viendo el código de cada uno y comparándolo se podrán ver las principales diferencias, pero explicaré paso a paso cómo se crea un theme.

En cuanto a la composición de archivos, es la misma que los themes de WP Main Menu, totalmente idéntica, aunque eso sí, los themes de uno y de otro no son compatibles para nada. Como mucho, la página de opciones os puede detectar los themes de ambos, pero no son compatibles.

Partiremos de un archivo index.php que almacenará la información del theme, cosas como nombre del autor, versión, descripción y archivos CSS que usará (no se permiten añadir archivos Javascript), en una matriz llamada $theme. A continuación podéis ver el código del archivo index.php del theme Default:

<?php
	// THEME INFORMATION
	$theme['author'] = "Sumolari";
	$theme['author_url']= "http://sumolari.com";
	$theme['name'] = "WP Carousel 0.3 Look";
	$theme['url'] = "http://sumolari.com/wp-carousel";
	$theme['desc'] = __('Use WP Carousel 0.3's theme', 'wp_carousel');
	$theme['version'] = '1.0';
	$theme['css'] = array();
	$theme['css'][] = 'style.css';
?>

Otro archivo fundamental en los themes es el archivo theme.php, que mostrará el contenido del carrusel. Lo cierto es que en este punto los themes no son muy flexibles: tienen que tener una estructura bastante fija en el diseño. A continuación podéis ver el código mínimo de un theme de WP Carousel comentado y explicado.

<?php
		echo '<div class="nombre_de_mi_theme">'; // Es recomendable poner al principio una capa que tenga por clase el nombre del theme, así se evitan conflictos relacionados con el CSS de otros themes que estén activados en otros carruseles
		if ($config['ARROWS']): // Comprobamos si están habilitadas las flechas y en cada desplazamiento manual se debe desplazar como mínimo un panel
			echo '<a href="javascript:stepcarousel.stepBy('carousel_'.$c_id.'', '.$config['SLIDE_POSTS'].')">'; // Enlace para adelantar un panel
			printf(__('Forward %s panel', 'wp_carousel'), $config['SLIDE_POSTS']); // Texto del enlace
			echo '</a>'; // Fin del enlace
		endif; // Fin de la comprobación
		if ($config['ARROWS']): // Comprobamos si están habilitadas las flechas y en cada desplazamiento manual se debe desplazar como mínimo un panel
			echo '<a href="javascript:stepcarousel.stepBy('carousel_'.$c_id.'', -'.$config['SLIDE_POSTS'].')">'; // Enlace para retroceder un panel
			printf(__('Back %s panel', 'wp_carousel'), $config['SLIDE_POSTS']); // Texto del enlace
			echo '</a>'; // Fin del enlace
		endif; // Fin de la comprobación
?>
		<div id="carousel_<?php echo $c_id; ?>" class="stepcarousel"> <?php // Esta capa (div) debe tener esa ID y no otra, ya que StepCarousel (el script en el que está basado WP Carousel) crea los carruseles mediante las IDs de los elementos que los contienen ?>
			<div class="belt"> <?php // Otra capa necesaria para el correcto funcionamiento de StepCarousel. No se debe modificar la clase, puede hacer que falle el script ?>
				<?php foreach ($items as $i_id => $item): // Iniciamos el bucle que mostrará los elementos del carrusel, donde $i_id es la ID INTERNA de los elementos del carrusel (la ID que utiliza WP Carousel) y el índice ID de la matriz $item es la ID que tiene el elemento dentro de WordPress. En este ejemplo están todos los índices importantes de $item, hay más, pero no merecen ser explicados ya que no son usados mas que internamente por WP Carousel ?>
				<div class="panel" <?php if ($config['HAS_PANEL_WIDTH']) echo 'style="width:'.$config['PANEL_WIDTH'].';"'; ?>><?php // Esta es otra capa que debe tener de clase panel. El índice HAS_PANEL_WIDTH comprueba que el valor de la anchura personalizada del panel no esté en blanco y si es un valor aceptable, lo usa como anchura ?>
					<a href="<?php echo $item['LINK_URL']; ?>" title="<?php echo $item['TITLE']; ?>"><?php // Enlace hacia la URL del elemento el carrusel. Ojo, es la URL a la que debe dirigir el elemento, no la URL del elemento dentro de WordPress, así que un artículo que tenga por permalink /post, no tiene por qué llevar a /post, sino que puede llevar a http://sumolari.com (por ejemplo). El índice LINK_URL almacena la URL del enlace mientras que el índice TITLE almacena el título del contenido. Como podréis suponer, la matriz $items no contiene ninguna categoría, sino que anteriormente WP Carousel ha reemplazado las categorías por los artículos que hay en ellas ?>
						<img src="<?php echo $item['IMAGE_URL']; ?>" alt="<?php echo $item['TITLE']; ?>" title="<?php echo $item['TITLE']; ?>" width="<?php if ($config['HAS_IMG_WIDTH']) { echo $config['IMG_WIDTH']; } else { echo '100px'; } ?>" height="<?php if ($config['HAS_IMG_HEIGHT']) { echo $config['IMG_HEIGHT']; } else { echo '100px'; } ?>" /><?php // Ahora mostramos la imagen que hemos establecido para este elemento. El índice IMAGE_URL se corresponde a la URL de la imagen, el índice TITLE lo hemos comentado antes, el índice HAS_IMG_WIDTH es true si la anchura personalizada de las imágenes del carrusel es un valor aceptable, mientras que el índice IMG_WIDTH es el valor anteriormente comprobado. El índice HAS_IMG_HEIGHT e IMG_HEIGHT devuelven lo mismo que los anteriores pero sobre la altura. Podéis ver que la altura y la anchura por defecto es de 100px.  ?>
					</a><?php // Cerramos el link ?>
					<div class="panel-text"><?php // Esto es opcional, y es la capa en la que se mostrará la descripción de cada elemento. Se pueden hacer themes que no muestren la descripción y themes que no muestren el título, al igual que themes que no muestren ninguno o que muestren ambos ?>
					<?php echo $item['DESC']; // El índice DESC se corresponde con el extracto del artículo o el campo personalizado wp_carousel_carousel_text ?>
					</div><?php // Cerramos la capa de la descripción ?>
				</div><?php // Cerramos la capa del panel ?>
				<?php endforeach; // Finaliza el bucle ?>
			</div> <?php // Cerramos la capa con clase belt ?>
		</div><?php // Cerramos la capa del carrusel ?>
		<?php if ($config['ENABLE_PAGINATION']): // El índice ENABLE_PAGINATION devuelve true si se deben mostrar los iconos indicadores del panel en el que nos situamos ?>
		<div id="carousel_<?php echo $c_id; ?>-paginate" class="wp_carousel_default_pagination"><?php // La ID de esta capa no se puede modificar, pero la clase sí ?>
			<img src="<?php echo $path[6]; ?>/img/opencircle.png" data-over="<?php echo $path[6]; ?>/img/graycircle.png" data-select="<?php echo $path[6]; ?>/img/closedcircle.png" data-moveby="1" /><?php // Mostramos la imagen de carga e indicamos la URL a los iconos de la paginación. El índice 6 de $path devuelve la URL hasta la carpeta del plugin. Para cargar la carpeta del theme, deberíamos usar el siguiente código: $path[6].'/themes/'.$config['THEME'].'/imagen.png ?>
		</div><?php // Cerramos la capa de la paginación
		endif;
	echo '</div>'; // Cerramos la capa con la clase especial para evitar conflictos CSS
?>

Con esto ya tenemos dos tercios del trabajo hecho, pero nos queda el CSS, que también es algo restrictivo, ya que tenemos que partir de un código CSS básico que es:

.nombre_de_mi_theme .stepcarousel {
position: relative;
overflow: scroll;
}
.nombre_de_mi_theme .stepcarousel .belt {
position: absolute;
left: 0;
top: 0;
}
.nombre_de_mi_theme .stepcarousel .panel {
float: left;
overflow: hidden;
}

Os recomiendo que diseñéis teniendo en cuenta que hay otros themes y que puede que haya dos themes en uso a la vez, así que hay que procurar una máxima compatibilidad entre los themes.

Y esto es todo, así se crea un theme para WP Carousel. ¿Fácil? ¿Difícil? ¿Flexible? ¿Estricto? Puede que no sea el mejor sistema de creación de themes, pero es el que habrá en la próxima versión de WP Carousel, y seguramente en las posteriores.

Navegación de estilo moderno

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

Hoy en Smashing Magazine han publicado una serie de menús de navegación que le dan un aspecto muy moderno a los diseños. Algunos tratan de tener un aspecto 3D, mientras que otros juegan con combinaciones de colores y degradados estupendos  y otros utilizan formas poco comunes para dar un aspecto fresco y actual.