Había abandonado este blog por un periodo de casi un año.
Estaba concentrado en la creación de mi empresa (Golem S.A.S.) y alguno que otro asunto personal. Les pido disculpas a todos los que estaban pendientes del blog.

Con el lanzamiento de la página web de Golem, también se vuelve a activar el blog. La idea es mantenerlo como una parte independiente y seguir tratando los mismos temas que antes.

Nos vemos en la próxima entrada.

Sin más preambulos, acá está el listado:

Meteor Slides

Meteor Slides es un plugin sin demasiadas características, bastante secillo, pero que funciona muy bien y nos permite crear nuestros rotadores muy fácilmente.

Aprovecha las funcionalidades en las últimas versiones de WordPress para lograr una interfaz administrativa muy fácil de usar. Para crear nuestros rotadores, cada transición es un post con su imagen destacada; de ahí su facilidad de uso para cualquier tipo de usuario.

A pesar de su sencillez, es altamente personalizable, y cuenta con una gran cantidad de efectos de transición.

Smooth Slider

Si lo que queremos es mostrar los artículos del blog en nuestro rotador, Smooth Slider es una muy buena opción. Podemos mostrar los últimos artículos o seleccionar cuales deben mostrarse.

Tiene una gran cantidad de opciones para configurarlo a nuestro gusto. Su apariencia de entrada no es muy agradable, pero con un poco de CSS lo pondremos hacer ver muy bien.

Content Slider by SlideDeck

Content Slider es uno de los plugins mas poderosos que encontramos. Cuenta con una gran cantidad de herramientas para crear nuestros rotadores.

Podemos crear rotadores desde cero o a partir de los artículos en el blog. Se pueden incluir imágenes, video y otros tipos de archivos. Cuenta con varios temas y esquemas de navegación (vertical, acordeón, etc) que nos son usuales en otros plugins.

No hay mas?

Solo les he mostrado 3 plugins. Seguro se me quedan muchos por fuera, pero la intención era mostrarles los que encontrado mas útiles en mi experiencia. Espero sus comentarios para conocer otros rotadores destacados!

Un tipo de experimentos bastante común, es el de emular imágenes usando únicamente CSS. Van desde la creación de iconos sencillos, pasando por logos un poco más elaborados, hasta imágenes mucho mas complejas como la botella de Coca Cola o la Ana kournikova en CSS3.

Creo que estos experimentos funcionan muy bien como aprendizaje y solo en algunos casos tienen utilidad práctica. No quiero entrar en la discusión sobre si vale la pena usar estas técnicas. Yo personalmente creo que podemos aprovechar algunas técnicas para reducir la carga de nuestros sitios y brindar una mejor experiencia a nuestros visitantes.

A continuación les mostrare algunas técnicas para crear imágenes usando propiedades CSS.

Las Herramientas

La mayoría de las propiedades CSS que se usan para dibujar imágenes no están completamente soportadas por todos los navegadores actuales. Les recomiendo revisar When can I use… para saber en que estado se encuentra el soporte para cada una de las propiedades. Casi siempre, el que tiene mas problemas es nuestro amigo Internet Explorer.

Bueno, ahora si, lo que nos interesa:

border

Border es una de las propiedades más usadas para crear imágenes, pues es soportada por casi cualquier navegador (es verdad, IE6 tiene problemas). Con border podemos lograr figuras triangulares que son muy útiles.

Lo único que debemos hacer es jugar con el ancho y el color de cada uno de los lados del borde. Normalmente colocamos el ancho y el alto del elemento en 0.

.div {
	border-color: #38e #e34 #3a4 #eb3;
	border-style: solid;
	border-width: 48px;
	height: 0;
	width: 0;
}

El código anterior genera la siguiente imagen:

Modificando los colores, así como el ancho en cada lado del borde, podemos obtener diversas figuras.

Contenido generado

Esta es una de las mejores herramientas para no llenar nuestro código HTML de etiquetas adicionales. Debemos usar las psuedo-clases :before y :after. Pueden leer esta guía donde explican muy bien como usar contenido generado.

Acá les dejo un ejemplo, combinando esta técnica con la propiedad border para generar una burbuja de texto:

p{
	background:#cdf;
	position:relative;
	padding:10px;
}
 
p:after{
	content:'';
	border-color:#cdf #fff #fff;
	border-style:solid;
	border-width:12px 12px 0;
	height:0;
	width:0;
	position:absolute;
	display:block;
	left:20px;
	bottom:-12px;
}

border-radius

Border-radius es una propiedad CSS3, pero ya su especificación está bien avanzada y el soporte de los navegadores es amplio, incluso sin prefijos propietarios.

Con esta propiedad podemos dibujar figuras circulares. Para mayor información sobre como usarla pueden revisar esta página.

Volviendo al ejemplo de la burbuja de texto, vamos a hacer que parezca el pensamiento de un personaje.

p{
	background:#cdf;
	position:relative;
	padding:10px;
	border-radius:10px;
}
 
p:before{
	content:'';
	background:#cdf;
	height:20px;
	width:20px;
	border-radius:10px;
	position:absolute;
	display:block;
	left:0;
	bottom:-55px;
}
 
p:after{
	content:'';
	background:#cdf;
	height:30px;
	width:30px;
	border-radius:15px;
	position:absolute;
	display:block;
	left:20px;
	bottom:-35px;
}

Box-shadow

Usando sombras podemos darle un mayor detalle a nuestras imágenes. La explicación sobre como funciona la encuentran en este artículo.

Si aplicamos la siguiente propiedad a p, p:before y p:after

box-shadow:inset -3px -3px 12px;

Obtenemos este resultado:

Gradientes

Aunque esta propiedad no está tan desarrollada como border-radius, ya es soportada por varios navegadores e incluso se supero la diferencia de sintaxis entre mozilla y webkit.

Esta propiedad es bastante potente, pues nos permite generar patrones muy diversos. Lo que hace esta propiedad es generar una, o mas imágenes que podemos usar en cualquier lugar donde se pueda usar url().

Revisen esta guía donde se explica lo básico.

El uso más común, es usar gradientes como background-image:

p{
	background-image:-moz-linear-gradient(top center, #8bf, #58f 50%, #47e 50%);
	border-color:#358 #46b #46b;
	border-width:1px;
	border-style:solid;
	padding:10px;
	border-radius:10px;
}

Otras propiedades

CSS3 tiene una gran cantidad de propiedades con las cuales podemos experimentar para obtener muy buenos efectos.

Además de las que he mencionado, también destacaría a text-shadow y a transform.

Espero que puedan sacarle provecho a estas técnicas

Para todos los que les gustan las interfaces del iPhone, usando esa técnica, podemos convertir un checkbox normal en un switch estilo muy parecido al que usa iOS.

En el artículo de cssninja explican las bases para el código que se muestra a continuación.

HTML

El código html se mantiene igual al de un checkbox normal:

<p>
 <input type="checkbox" value="active" id="toggle" name="toggle" />
 <label for="toggle">toggle</label>
</p>

CSS

Al checkbox le damos las dimensiones apropiadas, pero lo ocultamos usando opacity:

p:not(#foo) > input[type=checkbox] {
 opacity: 0;
 margin: 0;
 padding: 0;
 position: absolute;
 height: 24px;
 width: 84px;
 cursor: pointer;
}

La imagen de fondo la ponemos en el label, donde además ocultamos el texto. No hay problema en usar CSS3 para redondear los bordes.

p:not(#foo) > input[type=checkbox] + label {
 background: url(iphone_switch.png) -48px 0 no-repeat;
 padding: 0 0 0 84px;
 display: block;
 height: 24px;
 line-height: 24px;
 width: 0;
 text-indent: -9999px;
 border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
}
 
p:not(#foo) > input[type=checkbox]:checked + label {
 background-position: 0 0;
}

CSS Transitions

Usando CSS Transitions podemos animar nuestro checkbox para obtener el efecto completo. Desafortunadamente solo funciona en Chrome, Safari y Firefox 4beta. Aunque Opera soporta Transitions en sus últimas versiones, en este caso no funciona la animación.

p:not(#foo) > input[type=checkbox] + label {
 -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;
}

Demo

Bueno y para la muestra un botón! o dos, un checkbox funcionando y el otro disabled.

toggle

not allowed

Event Calendar / Scheduler

Este es un calendario bastante completo y con muchas posibilidades de configuración. Nos permite agregar eventos o nuestras entradas del blog en el calendario. Los eventos se pueden agregar directamente desde la página del calendario, haciendo que esta tarea sea muy sencilla. Lo puedes descargar desde el repositorio de WordPress: Event Calendar / Scheduler

The Events Calendar

The Events Calendar nos permite agregar eventos con un gran cantidad de detalles. El ingreso de los eventos es muy intuitivo y sencillo. Podemos mostrarlos como un calendario normal o como un listado. Además, provee integración con Google Maps y Eventbrite, lo cual hace de este plugin uno de los mas completos.

Google Calendar Events

Con este plugin podemos mostrar nuestro calendario de Google Calendar o cualquier calendario de Google Calendar que sea público. Esto es realmente útil, pues en muchos casos ni siquiera tendremos que ingresar los eventos al calendario. Podemos mostrar el calendario en cualquier página o como un widget. Google Calendar Events

Kino Events Calendar

Este plugin es realmente útil a la hora de mostrar el calendario como un widget. Los eventos los creamos al igual que una página del blog, lo cual es bastante conveniente. La única desventaja de Kino Events Calendar es que está completamente en Ingles y no está preparado para ser traducido, pero igual puede ser útil en muchos casos. Kino Events Calendar

La gran ventaja del plugin es que carga algunos elementos más de los que son mostrados y a medida que se va avanzando en el carrusel, también se van cargando mas entradas con AJAX. De esta forma, para los visitantes es casi imperceptible el proceso, se podrán cargar cientos de elementos de manera eficiente, sin perjudicar el desempeño de la página.

Con el plugin podemos añadir widgets en distintas áreas de nuestro sitio para mostar el carrusel con las entradas que hemos escrito. Para el funcionamiento del plugin es necesario WordPress 2.9 o superior, debido a que se utilizan las miniaturas de cada entrada.

Podemos configurar una gran cantidad de parametros y restringir las entradas mostradas a una sola categoría.

Lo más importante es definir el número de elementos a mostrar en el carrusel y el número de elementos que se deben cargar. El segundo número debe ser mayor que el primero.

El widget es completamente personalizable con CSS, aunque probablemente más adelante se incluya una hoja de estilos por defecto.

En la parte de abajo del blog pueden verlo funcionando.

Eso es todo, me cuentan que tal les parece!

Sin embargo, no debemos descartarla. A continuación vamos a ver como se utiliza la notación compacta para font y en que casos puede ser conveniente utilizarla.

Notación compacta de la propiedad font

Lo primero que notamos extraño de esta propiedad es que además de contener a font-size, font-weight, etc., también puede dar estilo a line-height. Veamos la sintaxis:

[font-style || font-variant || font-weight]? font-size[/line-height]? font-family

Las tres primeras propiedades (font-style, font-variant, font-weight) son opcionales y se pueden escribir en cualquier orden, aunque se recomienda usarlas en el orden que se muestra arriba. Si estas propiedades son omitidas, no heredarán los estilos del elemento padre, sino que les será asignado el valor normal. Esto puede ser negativo en algunos casos, y es la razón por la que algunas personas recomiendan evitar la notación compacta de font.

Continuando con la sintaxis: luego se debe definir el valor de font-size que es obligatorio. A continuación line-height (precedido de /), de nuevo opcional, y por último font-family que también es obligatorio.

Cuando utilizar font

Normalmente utilizamos las propiedades CSS en su notación compacta para ahorrarnos algo de tiempo a la hora de escribir el código, para obtener archivos de menor tamaño y para poder realizar cambios más facilmente.

Pareciera que estas condiciones son difíciles de cumplir en el caso de la propiedad font, pues su sintaxis no nos invita a utilizarla con frecuencia:

• Siempre debemos definir font-family, cuando lo normal es definir esta propiedad tan solo una o dos veces por sitio.
• Las propiedades opcionales no se heredan.
• Las personas que no están familiarizadas con la propiedad se pueden confundir al encontrar que font afecta a line-height.

Creo que lo mas determinante es el tema de font-family. Normalmente su valor es bastante largo, pues se compone de unas tres tipografías diferentes. Si no vamos a definir la tipografía para un selector, entonces no vale la pena usar font en su forma compacta.

Mi recomendación es utilizar font únicamente para definir estilos generales del sitio. En estos casos no tendremos problemas de herencia y nos ahorraremos algo de tiempo y espacio. Para estilos mas específicos, es conveniente definir cada propiedad por separado.

Muchas veces no contamos con el espacio suficiente para colocar el label al lado del campo de texto, o simplemente queremos hacer nuestro formulario mas amigable y atractivo. Esta solución viene como anillo al dedo.

Sin embargo hay que saber como implementar la solución. Tenemos que tener mucho cuidado de no confundir a nuestros usuarios. Vamos a ver como podemos hacerlo muy fácilmente.

Antes que nada, debemos decidir que uso le vamos a dar a este método en nuestro sitio. Para mi, existen dos formas de utilizarlo:

• Como un label. En este caso simplemente ponemos que es lo que debe ir en el campo de texto. Un ejemplo es el de la imagen de arriba que dice “Buscar”.
• Mostrar información adicional. En este caso usaríamos un label normal y dentro del campo de texto daríamos una información que ayude al usuario a ingresar el texto correctamente. Por ejemplo:
  Buscar: Autor, título o año

Lo importante es mantener la coherencia dentro de nuestro sitio, pues no queremos que el usuario se confunda. Esto es clave,siempre debemos pensar en la experiencia del usuario final.

Como decía al comienzo, hay que tener cuidado a la hora de implementar los labels dentro de los campos de texto. La función del campo de texto es el ingreso de información por parte del usuario (una búsqueda, un nombre, un teléfono, etc.), pero en este caso le estamos dando otra utilidad, lo cual puede ir en contra de lo que el usuario espera. Tenemos que diferenciar apropiadamente el label que hemos colocado del texto que ingresa el usuario (por ejemplo con el color del texto). Afortunadamente ya estamos acostumbrados a ver esta solución en muchísimos sitios, empezando por facebook, por lo cual no creo que haya mucho riesgo al utilizarla en nuestro sitio.

Bueno, y como les decía, hay una forma muy fácil de implementar esta solución, gracias a este script de jQuery: http://attardi.org/labels2/#javascript. Este fue el que utilicé para el campo de ejemplo. Solo falta que lo prueben en sus sitios!

Una de estas situaciones se da cuando queremos conocer información sobre la página que se está mostrando, pero por fuera del ‘loop’. Por ejemplo, si queremos mostrar el nombre del artículo o la página pero en el ‘sidebar’. Para lograr esto, tenemos que extraer la información de la consulta con la cual se generó la página mostrada.

WordPress nos da una función bastante útil para extraer las variables o los parámetros con los que se generó la consulta. Está función es get_query_var().

get_query_var

Acá podemos encontrar la documentación de la función:  http://codex.wordpress.org/Function_Reference/get_query_var.

Volviendo al ejemplo, para saber en que página o post nos encontramos, llamaríamos get_query_var(‘p’) para obtener el ID o get_query_var(‘name’) para obtener el slug.

Sin embargo, todo depende de como se haya generado la consulta: Si llamamos a la página de está forma http://miwebsite.com/?page_id=5, entonces podemos obtener el ID y no el slug. Pero si usamos http://miwebsite.com/page-slug, ya no podemos obtener el ID usando get_query_var; solo podemos obtener el slug, pues esta sería la variable utilizada en la consulta.

$wp_query

Una mejor forma de obtener está información por fuera del ‘loop’, se logra a través de la variable global $wp_query. Esta variable está disponible en todo momento, es un objeto de la clase WP_Query, y contiene toda la información de la consulta (no solo las variables que se usaron para generarla.)

Así que para obtener el ID del post o la página que se muestra, solo tendríamos que hacer esto:

global $wp_query;
$thePostID = $wp_query->post->ID;

o para obtener el slug:

global $wp_query;
$postSlug = $wp_query->post->post_name;

Mucho más fácil y confiable que get_query_var() !!!

Así funciona el script PHP: Genera una imágen PNG y la utiliza como imagen de fondo en los exploradores que no soportan RGBA. Es una solución realmente elegante, fácil de implementar y efectiva. El único problema que surge al usarla es la falta de soporte en IE6 para imágenes PNG con transparencias.

Ahora bien, para lidiar con el problema de las imágenes PNG en IE6 existen varias soluciones, la mayoría a manera de librerías javascript. Una de las más populares y reconocidas es DD_belatedPNG, la cual funciona muy bien en diversos escenarios. Sin embargo, al intentar utilizar esta librería con el script PHP, nos damos cuenta de que no funciona muy bien: Prueba No. 1

Modificando DD_belatedPNG

Revisando las limitaciones de DD_belatedPNG, nos damos cuenta que es necesario que las imágenes PNG tengan un nombre que termine en .png para que la librería pueda detectarlas. Lo mismo sucede con otras librería similares. Afortunadamente es muy fácil darle soporte a nuestro script PHP.

Sabemos que las imágenes generadas por el script PHP se logran usando el siguiente código CSS:

background: url(rgba.php?...)

Así que debemos buscar el lugar donde DD_belatedPNG hace la detección de las imágenes de fondo y agregar el soporte para esta estructura de URL. Solo es necesario reemplazar esta línea:

else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1) {

por esta:

else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1 && el.currentStyle.backgroundImage.toLowerCase().search('rgba.php?') == -1) {

Y ya tenemos nuesta página funcionando: Prueba No. 2

Acá les dejo el archivo modificado y minimizado para su comodidad! DD_belatedPNG_0.0.8a-mantish.js