Archive for the ‘WordPress’ Category

Dando estilos al Ampersand

Sunday, August 17th, 2008

El Ampersand es un símbolo usado mucho en la informática. En la programación en C, se usa para asignar valores a una variable. En PHP para separar diferentes variables y valores en una URL. En diseño es donde su uso es todo un arte.
Para darle un poco de estilos basta con poner en un archivo CSS vinculado en un documento HTML el siguiente código:

span.amp {
  font-family: Baskerville, Palatino, "Book Antiqua", serif;
  font-style: italic;
  }
<span class="amp">&amp</span>

El tipo de fuente le da la forma al ampersand, y el estilo itálico lo inclina sutilmente.

Se pueden lograr muchas formas del ampersand combinando diferentes tipografías y diferentes estilos de las fuentes.

Mac OS X

ampersands_macosx.gif

Windows XP

ampersands_windowsxp.gif

Windows Vista

Windows Vista añadió nuevas fuentes que empiezan por la letra C, claro que estas solo se visualizarán si las tenemos disponibles en la biblioteca de nuestras fuentes.

ampersands_windowsvista-1.gif

Via: SimpleBits

Recomendaciones para crear un WordPress Theme

Wednesday, June 11th, 2008

Bueno, básicamente cualquiera puede crear a su gusto un theme de WordPress, pero aquí les dejo las recomendaciones que para mi gusto son las más importantes, basándome en el diseño, accesibilidad, manejo, optimización (servidor) y SEO. Claro que en gustos se rompen géneros y cada uno puede elegir la apariencia que mejor le parezca a su blog, desde degradados, hasta diseños super minimalístas.

Me hubiera gustado mucho hacer este post con el nuevo diseño de este blog, lamentablemente por falta de tiempo (y sobra de trabajo) ha sido imposible terminarlo, incluso no he bloggeado en más de una semana ni siquiera twitteado :-( .

Para empezar.. los colores. ¿Qué colores usar? eso es muy importante y quizá sea la médula de un buen diseño. Yo recomiendo los colores claros, tenues, simples, sin tanto adorno. De hecho nos podemos guiar por los mismos colores que la naturaleza nos brinda.

Paleta Nature

La imagen de arriba contiene abajo colores que fueron tomados al azar de la misma fotografía y como podrán ver, el resultado son colores que se pueden combinar de muchas maneras para la elaboración de nuestro Theme de WordPress. Pueden ver más ejemplos de este tipo en este post (inglés) que contiene muchas más fotografías y paletas de colores.

Como dije anteriormente, en lo personal recomiendo usar colores tenues y contrastarlos con colores oscuros muy sutilmente. ¿Por que? Para resaltar lo importante, el diseño del contenido debe(ría) ser agradable para leer, y los títulos resaltarlos (no demasiado, no molesto).

El header, no voy hablar de como hacer un header, definitivamente eso es a gusto de cada uno, pero si hablare de las imágenes a usar en él. Usar imágenes moderadamente, de hecho lo mas livianas posible y de preferencia en .gif, que es un formato de imagen de muy poco tamaño que aunque también es de muy pobre calidad, en él perfectamente puede usarse los colores de la paleta de la fotografía de arriba. ¿Por que usar imágenes livianas? Para que cargue mas rápido, de hecho la mayoría de los bloggers posteamos gran cantidad de imágenes en cada una de nuestras entradas, si en portada tenemos 12 imágenes entre fotografías, screenshots y logotipos de buena calidad, el tamaño total de nuestro blog podría llegar a pesar demasiado, y si le sumamos el peso del header de gran tamaño pues podría resultar contraproducente para nosotros, recomiendo usar las imágenes del header con moderación y ¿Por qué no? también optimizar las imágenes que ponemos en nuestras entradas.

Las barras laterales (sidebar), lugares dedicados a la navegación y creo que el theme por default de WordPress Kubrick es un claro ejemplo del uso y diseño que debería tener. Las cosas que debes de poner en esa sección tu las decides, si quieres hacerlo dinámico, widgetizalo, ¿Como? Bueno la guía completa esta en el codex de WordPress (como todas las funciones y APIS que necesitas).

La siguiente estructura es la que debes de usar para tener un sidebar dinámico

<ul id=”sidebar”>

<?php if ( !function_exists(’dynamic_sidebar’)
|| !dynamic_sidebar() ) : ?>
<li id=”saluda”>
<h2>Seccion Saluda</h2>
<p>Hola mundo</p>
</li>
<li id=”despide”>
<h2>Adios mundo</h2>
<ul>
<li><a href=”http://www.wordpress.org”>WordPress</a></li>
</ul>
</li>

<?php endif; ?>
</ul>

solo falta registrar tu sidebar al archivo functions.php de tu theme

<?php
if ( function_exists(’register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”widgettitle”>’,
‘after_title’ => ‘</h2>’,
));
?>

Como ya te habrás dado cuenta, en la función register_sidebar podemos especificar que mostrará antes y después del contenido de cada widget y de su título.

Si quieres ahorrarte un poco de memoria puedes incluir un contenido estático en esa sección, y para ahorrarte aún más, puedes usar algun plugin (es más deberías) para almacenar el contenido en cache WP-Cache, con esto aumentará un poco el tiempo de carga de tu blog :) .

La parte de la navegación es muy importante si quieres usar Breadcrumbs (Home -> Categorías -> Apple -> iPhone) que faciliten la navegación a tus visitantes web puedes instalar varios breadcrums plugins dedicados a esto.

Aplicando SEO puedes instalar un plugin para robots.txt que ayude a ignorar contenido duplicado (tags, categorías, archivos, búsquedas, etc).

La paginación puede resultar más fácil de lo que te imaginas, tus visitantes te lo agradecerán, les harás la lectura más fácil, y aunque WordPress incluye una función específica para esto en su código…

<div class=”navigation”>
<div class=”alignleft”>
<?php next_posts_link(’« Older Entries’) ?>
</div>
<div class=”alignright”>
<?php previous_posts_link(’Newer Entries »’) ?>
</div>
</div>

Puedes reducir un poco más el codigo (y aumentar su función) con un plugin muy sencillo escrito por Jaimie Sirovich.

<div class=”navigation”>
<?php
pager_fix(” “,” “,” “,”« Previous page”,”Next Page »”,”strong”);
?>
</div>

Mejor no? ;)

Los enlaces permanentes, yo recomiendo usar enlaces permanentes con esta estructura:

/%year%/%monthnum%/%day%/%postname%/

sin embargo, algunos bloggers insisten que la mejor es una más simple:

/%postname%/

en lo personal, creo que los visitantes saben solo con leer la url (incluso cuando se ven desde los resultados de google) de que fecha es el post, quizá busquen información reciente y la fecha en la url ayude a identificarla, pero dejemos que las Chicas SEO den su opinión al respecto.

Se me ocurren muchas otras cosas, pero continuaré hablando del tema cuando publique mi nuevo Theme, por cierto… estrenaré logo, un poco más patriótico.

Google Adsense y Comic Sans

Wednesday, June 11th, 2008

Ya se ha hablado mucho en la red de la tipografía de los anuncios mostrados por google, comic sans.

Pero bueno me ha tocado verlo, esperemos que esa tipografía no se vuelva la tipografía por defecto, por que realmente se ve muy, muy pero muy…. horrible.

Adsense Comic Sans

Social History: Detectando las redes sociales de tus visitantes

Wednesday, May 28th, 2008

En los blogs es muy común ver botones para agregar las entradas de los posts a digg, reddit, StumbleUpon, meneame, etc., cada vez hay más redes sociales y más botones con ellas.

Redes Sociales

Si bien es cierto con el botón Sharethis podemos ahorrar algo de espacio y poner un poco más limpio el contenido de nuestro posts, siempre habrán botones que nuestros visitantes nunca utilicen.

Sharethis

SocialHistory es un código en javascript que ayuda a detectar las redes sociales de tus visitantes, esto ayuda a mostrar solo las redes que a tu visitante le interesan.

Cherokee una opción blogger

Thursday, April 3rd, 2008
Cherokee

Entre módulos que no ocupo, procesos innecesarios en mi servidor, y configuraciones por demás sobradas, mi servidor web esta funcionando un poco más lento que de lo normal.

Buscando un poco por la red encontré Cherokee, un magnífico Servidor Web escrito enteramente en lenguaje C que cuenta con todas las características necesarias para montar un CMS como WordPress, el favorito de los bloggers.

¿Que ofrece?

Para empezar, es super rápido (mucho más que mi configuración actual de Apache), fácil de instalar y configurar. Soporta CGI, FastCGI, SCGI, PHP, CGI, y conexiones seguras (encriptadas) TLS y SSL.

No es un secreto la importancia de tener servidores rápidos, sobre todo en la comunidad bloggera. Ayuda muchísimo a los lectores de nuestro blog, uno o dos segundos realmente cuentan.

Actualmente cuento con un servidor dedicado donde alojo este blog y varios sitios de amigos. Los blogs robustos con muchos miles de visitas diarias seguramente usaran Lighttpd, sin embargo Cherokee en su versión actual 0.6 puede ser considerado una opción para los bloggers que cuentan con un servidor dedicado propio y quieren aumentar la velocidad y rendimiento, además de ser un proyecto hispano.

Me agradó mucho su interfaz de administración bastante “user-friendly” desde la cual configurar Mime Types, Servidores Virtuales, alias, y demás parametros requeridos ,según nuestras necesidades, es muy intuitivo, rápido y fácil.

Administación Cherokee

Por todas las características, considero que Cherokee debería ser una opción importante para la comunidad bloggera.