El siguiente tutorial es bastante específico, más adelante voy a escribir sobre las enormes posibilidades que ofrecen las etiquetas condicionales en WordPress.

Si tienes instalado un plugin para crear slideshows seguramente sabes que la mayoría de estos filtran los posts basándose en categorías, es decir, el usuario indica al plugin de qué categorías tomar los posts para crear el slideshow. Y algunas veces quieres tener una categoría totalmente aparte de los posts normales, para que los posts que aparecen en el slideshow no se muestren en el loop.

En ese caso, necesitas excluir dicha categoría del loop en el index.php  y del widget de categorías (si lo usas).

La solución es usar query_posts en el loop y en la lista de categorías. Busca el loop del index.php, que debería verse así:

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

Y agrega la siguiente línea entre las 2 anteriores:

<?php query_posts ("cat=-nro_de_categoria"); ?>

Donde nro_de_categoria es el id de la categoría que quieres excluir, y signo – (menos) significa excluir.

Ahora pasemos a la lista de categorías. Busca lo siguiente en el sidebar.php:

<ul>
	<?php if ( !function_exists('dynamic_sidebar')
		|| !dynamic_sidebar('Men&uacute; lateral') ) : ?>
	<?php endif; ?>
</ul>

Y agrega las siguientes modificaciones:

<ul>
        <?php if ( !function_exists('dynamic_sidebar')
		|| !dynamic_sidebar('nombre_de_tu_sidebar') ) : ?>
	<?php endif; ?>
	<li>
		<h2>Categorías</h2>
		<ul>
			<?php wp_list_categories('exclude=nro_de_categoria'); ?>
		</ul>
	</li>
</ul>

Donde nro_de_categoria es el id de la categoría a excluir

Estoy corto de tiempo para escribir artículos “originales” o por lo menos un poco más extensos, así que hoy les dejo un tutorial bastante básico de VectorTuts, con el que los principiantes en diseño vectorial (me incluyo) podremos ejercitar el manejo de degradados y las formas de recorte. El tutorial está hecho en Illustrator CS4, aunque tengo entendido que igual puede ser desarrollado en CS3.

Ver el tutorial

Unos proyectos en desarrollo me llevaron a buscar tutoriales para hacer tooltips, y como verán hay de todo, simples, animados, minimalistas, feos, etc. Aquí va una lista de los que me parecieron más interesantes

Animated hover effect – Webdesignerwall

En el tutorial no dicen que es un tooltip, pero puede ser usado como tal. Son los ítems 5a y 6a de la lista.

Tutorial – Demo

Coda Popup Bubbles – Jqueryfordesigners

Tutorial – Demo

Simple tooltip with CSS and Jquery – Kriesi.at

Tutorial – Demo

Better tooltip with Jquery awesomeness – Net tuts

Tutorial – Demo

Simple tooltip powered by Jquery – 3nhaced.com

Tutorial – Demo

Algo que queda muy bien y sirve para guiar a los usuarios: iconos distintos para links a tipos de archivo específicos: Un ícono para los PDF, otro para los ZIP, y hasta para links salientes a otros sitios. Obviamente lo ideal es que los íconos aparezcan automáticamente para cada link, y no estar cargándolos manualmente.

Si no sabías cómo hacer esto usando solamente CSS, te comento que resulta estúpidamente sencillo:

Lo principal es entender el simple funcionamiento de los condicionales “^” y “$“. El condicional “^” significa empieza con, y “$” significa termina con.

Sabiendo eso puedes añadir iconos a los links salientes, que son los que empiezan con http://

a[href^="http://"] {

estilos para los links salientes

}

Y también puedes añadir cualquier cosa a los links con extensiones específicas, en este caso daremos un estilo diferente a todos los links que terminan en .rar:

a[href$=".rar"] {

estilos para los links a archivos .rar

}

El resto es solo cuestión de experimentar un poco, los condicionales funcionan con cualquier navegador medianamente nuevo.

En DeviantArt encontré un COMPLEJO tutorial de dibujo vectorial, bastante complicado para principiantes. El tutorial está en flash, los pasos están numerados en un menú en la parte inferior de la película flash. Basándose en una fotografía de alta calidad, el autor del tutorial crea un dibujo bastante profesional. Enlace al Tutorial

En la primera edición de este tutorial dejábamos en claro la utilidad de usar nuestra pc como servidor de prueba, además de descargar Xampp para hacer todo esto en 2 o 3 clicks. Ahora voy a explicar brevemente la instalación del server:

Luego de descargar Xammp, descomprímelo al disco c (o el disco donde tengas instalado windows), luego ejecuta setup_xampp para instalar. La instalación es totalmente automática, luego inicia el servidor con xampp_start.

Ahora puedes ver el contenido de tu servidor escribiendo http://localhost/ en la barra de direcciones del navegador, el resultado será el panel de administración de Xampp. En el menú ubicado en la derecha haz click en PHPMyAdmin para crear la base de datos para la instalación de WordPress (recuerda que el objetivo de todo esto es usar la pc como campo de pruebas para nuevos plugins y themes).

En el cuadro llamado MySQL localhost está la opción de crear una nueva base de datos, escribimos el nombre (en este caso uso wp_db como ejemplo) y click en Crear. Si todo sale bien aparecerá un mensaje diciendo que la base de datos se creó. El siguiente paso es hacer click en la pestaña Privilegios para configurar el usuario.

Si aparecen 2 usuarios en la lista, el que debes editar es el que tiene localhost como servidor (figura como segundo ítem en la tabla). Click en el ícono de editar que se encuentra en la columna Acción, al abrirse la página de edición debes introducir la contraseña en el segundo cuadro, precisamente llamado Cambiar contraseña, y luego click en continuar. Si quieres cambiar el nombre de usuario puedes hacerlo en la caja Cambiar la información de la cuenta / Copiar el usuario.

Creamos una carpeta llamada wordpress dentro de Disco local:\xampp\htdocs y copiamos ahí todos los archivos de WordPress. A partir de aquí lo que queda es el sencillo proceso de instalación de WP, escribimos en la barra de direcciones http://localhost/wordpress/wp-admin/install.php y luego ingresamos el nombre del blog y nuestro e-mail, así de sencillo.

Ok, ya podemos usar la pc como servidor de prueba para nuestros experimentos con WordPress.

ACTUALIZACIÓN: Ya puedes ver la parte II de este tutorial

A la hora de crear y probar themes o plugins para wordpress no puedes usar tu propio blog porque obviamente habrá algún error en el proyecto, causando una malísima impresión para los visitantes. Todos éstos trabajos deben hacerse en un servidor de prueba, lo bueno es que puedes convertir tu PC en un servidor para que las pruebas sean mucho más rápidas, ya que los archivos se guardarán en el disco duro local.

Por el momento les dejo el link para que descarguen el que (según mi criterio) es la mejor herramienta para crear un servidor:  se trata de Xampp, que instala de una sola vez el apache, mysql, etc. En los próximos posts voy a explicar la instalación y configuración paso a paso de un servidor local.

Descargar Xampp para Windows

Es muy común ver en webs con diseño grunge esos menús con tipografía manuscrita que se subrayan al pasar el cursor encima.

Una técnica para lograr esto consiste en usar 2 imágenes: una para el menú no activado y otra para cuando pasamos el mouse encima, en este caso con los ítems subrayados. Usar la imagen del menú no activado como fondo de un div, colocar dentro del div una lista con parámetros de tamaño, cuyos ítems (en el estado hover) tengan como imagen de fondo el menú activado, o subrayado. A la imagen de fondo durante el hover debemos darle coordenadas de posición para que coincidan las partes.  A continuación voy a explicar cómo hacer un sencillo pero agradable menú grunge:

HTML

<div id=”contenedor_menu”>
<ul id=”menu”>
<li id=”blog”><a href=”index.html”>Blog</a></li>
<li id=”contact”><a href=”contact.html”>Contact</a></li>
<li id=”about”><a href=”about.html”>About</a></li>
</ul>
</div>

CSS

#contenedor_menu { /*–Creamos un div que contenga al menú, con las dimensiones de la imagen a utilizar */
height: 376px;
width: 292px;
overflow: hidden; /*Con overflow hidden hacemos que cualquier cosa que salga de los bordes del div sea invisible */
background:url(menu.png) no-repeat; /*Nuestra imagen de fondo, el menú */
}
#menu { /*-Ésto vamos a usarlo como id de la lista o ul, le damos la ubicación apropiada para la imagen que estamos usando*/
margin:76px 0px 0px 10px;
padding:0px;
}
#menu li { /*Quitamos los estilos de lista y la separación entre ítems*/
list-style:none;
margin:0px;
padding:0px;
}

#menu li, #menu a { /*Damos a los ítems de lista el tamaño apropiado para abarcar el texto presente en la imagen del menú, y display block para que los links funcionen como cuadro*/
display:block;
height:70px;
width:160px;
}

#blog, #contact, #about { /*Éstos son los id para cada ítem de lista, con el text-indent escondemos el texto del link*/
text-indent:-300em;
overflow:hidden;
}

/*La parte más importante: en el estado hover de cada ítem de lista cambiamos el background por el del menú activado, y le damos las coordenadas necesarias para que los ítems aparezcan justo donde deben estar*/

#blog a:hover {background:url(menu_on.png) -10px -76px no-repeat; }
#contact a:hover {background:url(menu_on.png) -10px -146px no-repeat; }
#about a:hover {background:url(menu_on.png) -10px -216px no-repeat; }

La mejor forma de entender todo esto es descargando el ejemplo y leyendo el código completo

Tutorial para diseñar un blog de estilo grunge en Photoshop, creado por Tom Ross. El autor promete una secuela con la codificación correspondiente, estamos esperando.