El HTML del que les hablaba es muy simple, solamente podemos escribir <div>Content</div> o <p>Content</p> y la magia de CSS se hará cargo de ahí en mas.

La mención honorifica se la llevan los pseudo-elements :before y/o :after que crearan nuestras formas (Speech bubbles) y las propiedades border-radius y transform son los condimentos.

Si nos ponemos a trabajar con los pseudo-elements y las propiedades arriba mencionadas podemos lograr resultado muy interesantes.

Un ejemplo de esto, puede ser este CSS donde se creara un Speech Bubble con un triangulo isoceles en la parte inferior

/* Bubble con triangulo isósceles
------------------------------------------ */
 
.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;
 
   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}
 
/* crear triangulo */
.triangle-isosceles:after {
   content:"\00a0";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   z-index:-1;
   bottom:-30px;
   left:50px;
   width:0;
   height:0;
   border-width:15px 15px;
   border-style:solid;
   border-color:#f3961c transparent transparent;
}

Dentro del demo podras observar el comportamiento y acceder a todo el CSS necesario para que puedas ver en detalle como funciona cada shape y así poder implementarlas o crear shapes propias.

HiFi (Head Injection, Foot Injection)

Nos permite insertar (injection) porciones de código en el Footer y en Header de nuestro Theme, pero solamente cuando es necesario. Si estas escribiendo un tutorial y necesitas mostrar dentro de la entrada o pagina que trabaja como un demo online, muchas veces es necesario insertar hojas de estilo o algunas lineas de javascript.

Este plugin crea un nuevo panel en nuestra entrada o pagina donde insertaremos esas porciones de código solo para el post pagina en cuestión.

Hikari Titled Comments

Como el titulo lo indica, nos ofrece la opción de permitirle a la persona que comenta en la entrada la chance de insertar un titulo a su comentario. Es una función que la podemos encontrar en Drupal, pero la extrañamos en Wordpress.

Facebook Photo Fetcher

Una forma simple de insertar y crear galerías de imágenes en Wordpress usando un álbum de Facebook. Una vez activado solo necesitamos darle los permisos adecuados al plugin para conectarse a Facebook y seleccionaremos el Album que queremos mostrar en Wordpress. Este plugin trabaja con shortcodes a la hora de crear las galerías, por lo que su uso es de lo más simple.

RSS Just Better

Ya he hablado aquí en Eliseos de como insertar cualquier RSS Feed en Wordpress, pero este plugin lo hace todavía mucho mas simple. Nos permite controlar cuantos items se mostraran, incluir la fecha de publicacion y la introducción. Funciona a modo de widget para incluir en el Sidebar o como shortcode, para incluirlo en las entradas o paginas.

Facebook Share Statistics

Nos muestra en nuestro CP estadísticas y gráficos relativas a como se socializa nuestro Sitio en Facebook. Podemos ver, por ejemplo, la cantidad de usuarios que compartieron la entrada, la cantidad de “likes” que recibió un post, y muchos mas.

Su funcionamiento es de lo mas simple, solo debemos crear un container con algunas imágenes dentro:

<div id='slideshowHolder'>
<img src='img1.jpg' alt='img1' />
<img src='img2.jpg' alt='img2' />
<img src='img3.jpg' alt='img3' />
</div>

Y luego iniciar el plugin:

$('#slideshowHolder').jqFancyTransitions({ width: 400, height: 300 });

Esta es la configuración por defecto, donde solo indicamos el ancho y el alto del Slider, si lo necesitáramos (seguramente) podemos indicar que efecto necesitamos, delay en las transiciones, etc.

jqFancyTransitions cuenta con un demo online, donde podrás observar todos los efecto que comente anteriormente junto con la documentación necesaria.Y por ultimo, este plugin prueba ser compatible con Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

Un ejemplo claro de uso se puede ver en WPvote, donde cada articulo esta acompañado de su respectiva screenshot.

A modo de ejemplo del funcionamiento del API, esta es una imagen generada para que aprecien el resultado final.

http://s.wordpress.com/mshots/v1/http%3A%2F%2Feliseos.net%2F?w=550

Uso

Su utilización es muy sencilla. y depende de los planes que tengas en mente, básicamente podes mostrar las capturas por medio de shortcodeso por medio de una función, directamente en nuestro Theme.

Shortcode

Esta puede ser la opción fácil mas simple de implementar ya que no es necesario editar nuestro Theme. Solo sigue este formato:

[browsershot url="http://eliseos.net" width="550"]

El valor de la URL representa el sitio en el que vamos a realizar la captura y width el ancho deseado. Casi no tenemos restricciones en nuestro ancho de la captura, por lo que podrás integrar la imagen a tu diseño sin problemas.

PHP Function

Dentro de nuestro Theme, llamaremos a la función bm_mshot:

<?php
$url = 'http://eliseos.net/';
$width = 550;
echo bm_mshot ($url, $width);
?>

Los valores son los mismos que para el shortcode, por lo que no encontraras mayores dificultades.

Por ultimo el autor nos señala que es las imágenes no se generan instantáneamente, sino que tardan unos segundos. En algunos sitios ese tiempo es mayor y en otros menor.

Si el visitante utiliza un navegador no soportado para el tag <video>, el plugin reemplazara el tag por el reproductor Flowplayer, logrando así una consistencia en todos los navegadores.

Este plugin soporta los formatos MP4, utilizando el codec h.264 y el OGV a través del codec Theora. Como si fuera poco, en html5media disponemos una serie de controles para tomar control sobre el video; como ser:

• Control: Posibilidad de mostrar los botones (controles) del reproductor
• Autobuffer: Comenzar a cargar el video automáticamente
• Autoplay: Reproducir el video automáticamente
• Loop: Reproducir el video constantemente
• Splash image: añadir una imagen a modo de introducción el nuestro reproductor.

Para utilizar este maravilloso plugin, solo debemos realizar el llamado dentro de nuestro header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://html5media.googlecode.com/svn/trunk/src/jquery.html5media.min.js"></script>

Y seguir la siguiente sintaxis:

<video src="video.mp4" width="320" height="240" controls autobuffer></video>

Y si necesitáramos servir dos versiones del mismo video (Theora y h.254)

<video class="video" poster="cat.jpg" width="352" height="264" controls autobuffer>
    <source src="cat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="cat.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

Por ultimo no te olvides que puedes visualizar un demo del funcionamiento de este plugin.

Hoy leyendo en Milienzo encontré un hack que me pareció correcto de reproducir ya que podemos lograr una personalización del tag the_excerpt() casi perfecta.

Problemas con the_excerpt()

Solo se muestran las primeras 55 palabras, no dándonos la posibilidad de acomodar ese numero. En cuanto el al formato, el tag limpia todos los tags HTML, por lo que no se muestran imágenes ni formato en los párrafos. Y por ultimo, en cuanto hablamos de javascript tenemos un gran problema ya que the_excerpt() no lo filtra, lo que trae como aparejado posibles problemas en el formato y vulnerabilidades.

Lo que en milienzo nos plantean, es crear una nueva función para solucionar los problemas mencionados mas arriba.

Comencemos

En tu archivo functions.php introduciremos esta nueva función

function improved_trim_excerpt($text) {
	global $post;
	if ( '' == $text ) {
		$text = get_the_content('');
		$text = apply_filters('the_content', $text);
		$text = str_replace(']]>', ']]>', $text);
		$text = preg_replace('@<script[^>]*?>.*?</script>@si', '', $text);
		$text = strip_tags($text, '<p>');
		$excerpt_length = 80;
		$words = explode(' ', $text, $excerpt_length + 1);
		if (count($words)> $excerpt_length) {
			array_pop($words);
			ray_push($words, '[...]');
			$text = implode(' ', $words);
		}
	}
		return $text;
}

Al no estar “tocando” no los archivos del core de Wordpress podremos reproducir esta función en todos los Themes que necesitemos.

Controlar el tamaño en the_excerpt()

En lugar de mostrar solo las primeras 55 palabras, digamos que solo mostraremos las primeras 80.

$excerpt_length = 80;

Para aumentar o disminuir las palabras, solo resta reemplazar el 80 por el numero deseado.

Incluir tags HTML

Como lo mencione antes, al no poder contar con la posibilidad de mostrar dichos tags podemos encontrar problemas a la hora de dar formato

$text = strip_tags($text, '<p>');

En este caso estamos incluyendo siempre el tag <p> Si lo necesitáramos podríamos también incluir el tag <img> o los que deseemos. Solo tenemos que mencionar los tags uno al lado de otro.

Remover todo el código javascript que no necesitamos

$text = preg_replace('@<script[^>]*?>.*?</script>@si', '', $text);

Esta simple linea, nos ahorrara futuros dolores de cabeza.

Ahora solo resta indicar nuestro nuevo filtro, otra vez dentro de functions.php insertamos:

remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'improved_trim_excerpt');

Implementación

Solo nos queda integrar este nuevo the_excerpt() mejorado dentro de nuestro Theme reemplazando el the_excerpt() original por nuestro el nuevo y flamante tag:

function improved_trim_excerpt($text) {

Como lo notaras el hack es bastante flexible y podemos lograr buenos resultado con pocas lineas de código.

A la hora de editar dicha pagina, no tenemos muchas mas opciones que “meter mano” al código directamente, pero que tal si pudiéramos editar cada segmento de la pagina como editamos las entradas, es decir con el editor WYSIWYG TinyMCE?

Aquí es donde entra a jugar el Plugin MultiEdit, el cual creara regiones editables dentro de nuestra pagina, para poder trabajar con TinyMCE como si estuviéramos trabajando con una entrada normal.

MultiEdit creara 4 pestañas donde podremos crear y editar el contenido que necesitemos en 4 regiones de la pagina: El contenido normal, al pie, a la izquierda y a la derecha.

Cada región almacena el contenido creado como si se tratara de un custom field, por ende si borramos o desactivamos el plugin nuestro contenido no se perdería.

Instrucciones

Necesitas una copia de Plugin MultiEdit, instala el plugin y activalo.

Debemos crear una nueva Plantilla personalizada (page template) con el siguiente formato:

<?php
/*
Template Name: MiNombre
MultiEdit: Right, Bottom, Left
*/
?>

Right, bottom, y left son las zonas o bloques que se añadirían a la pagina.

Dentro de la nueva plantilla solo necesitamos definir las zonas, para este ejemplo el contenido al pie.

<div id="pie_de_la_pagina">
	<?php multieditDisplay('Bottom'); ?>
</div

Por ultimo a la hora de crear o editar una pagina utilizaremos la plantilla que se creo anteriormente y podremos ver nuestro nuevo panel de administración para la pagina.

Consideraciones finales

Pareciera ser un proceso un tanto engorroso, pero, como lo mencione al principio de esta forma podremos ahorrarnos un tiempo considerable a la hora de trabajar con una pagina que editamos constantemente.

Este plugin solo trabaja correctamente dentro del editor visual, y no hace magia; por lo que el estilo via CSS es requerido para lograr una buena presentación

A diferencia de otros clones este lightbox cuanta con algunas opciones que lo hacen una alternativa mas que interesante:

• Las imágenes son se “auto-acomodan” a la resolución de pantalla
• Se puede hacer un pre-cache de las imágenes, para mejorar la experiencia del usuario
• Múltiples instancias de la misma imagen
• Multilenguaje, el plugin cuenta con los packs de lenguajes para su traducción
• Slideshow automático
• Control de las transiciones a través del teclado
• SEO amigable, los spiders almacenaran tanto los links de las thumbnails como los links de la imagen original

Muchos diseñadores cuentan con un Theme de estas características para agilizar el trabajo, ya que muchos características se repiten de manera mecánica cuando de diseñar un Theme se trata.

Características:

• Bien comentado y semánticamente presentado
• XHTML 1.0 STRICT
• Widget-Ready
• Títulos optimizados en SEO
• Un archivo functions.php con algunas funciones básicas
• Una hoja de estilo con las clases y preceptos genéricos

Por ultimo, este Theme es libre de ser usado en proyectos, tanto personales como comerciales.

Imagina por un momento que te encuentras buscando un efecto en un Layer pero no recuerdas en que archivo estaba; puede ser en Untitled1.PSD, Untitled2.PSD y Untitled3.PSD. Para encontrar dicho efecto, tendríamos que abrir archivo por archivo y revisar cada layer hasta dar con el estilo buscado.

Aquí es cuando ComparePSD entra en juego, esta pequeña utilidad se encargara de revisar layer por layer y efecto por efecto y presentara la estructura de los archivo PSD en dos columnas para poder comparar los resultados.

De momento esta aplicación solo esta disponible para Windows, por lo que los usuarios de MAC tendremos que esperar un poco mas.