Hace poco para Royal Estudios tuve que crear un efecto donde deseábamos mostrar las imágenes que subíamos por WordPress a imágenes en escala de grises sin utilizar el método antiguo de sprites como los siguientes:

• http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/
• http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/

Y encontré unos otros, sin embargo no funcionaba para lo que quería un simple plugin donde cambiara las imágenes de colores a escala de grises.

Ahora este es el plugin, jquery Monocrome, yo se que monócromo solo es de 2 colores sin embargo quería darle un nombre singular y no tan largo.

Espero que lo utilicen, basé parte de mi código en el plugin BlackandWhite. Con varias modificaciones y nuevas características.

Uso

Añadimos jquery y el archivo del plugin:

<script src=”scripts/jquery-1.6.4.min.js” type=”text/javascript”></script>
<script src=”scripts/jquery.monocrome.js” type=”text/javascript”></script>

Luego tenemos nuestros elementos:

<div class="wrap">
<img src="el path" />
</div>

o también solamente así:

<img src="el path" class="convert" />

Añadimos la sentencia de javascript y viola!

jQuery(function($){
//Si deseas convertir una imagen que este dentro de un elemento
$('.wrap').monocrome();
o si quieres convertir la imagen directamente
$('img').monocrome({ isImage : true });
});

Opciones:

isImage – Opcion que le dice al plugin si es es una imagen o si es un elemento con una n cantidad de imágenes.

hideOriginal – si deseas quitar el elemento original del DOM.

Implementaciones Futuras

1. En la siguiente versión intentare modificar también los backgrounds creados por CSS.
2. Esperar por el proximo borrador para el canvas y ver la solución para el problema de seguridad

Inconvenientes conocidos

• Actualmente estoy teniendo problema en un Array cuando solo tiene un elemento, esto solo en Chrome.
• El script puede no correr localemente, es decir no en servidor con una direccion C://midirectorio por un problema de seguridad creado por getimagedata(), espero que en el futuro se arregle eso. Pero al subirlo al servidor estará funcionando al 100%

• Quiero el código
• Ver demo

En este ejemplo solicitaremos una imagen de un post especifico como para una galeria.

Antes de empezar

• Estar familiarizado con el theming de WordPress
• Saber jQuery y de preferencia haber usado el $.ajax del mismo framework
• HTML5

Saber que quierer hacer

Una de las cosas mas importantes es saber que tengo para enviar y que deseo que me devuelva la consulta. En nuestro caso usaremos los atributos de data de HTML5, el functions.php y una de las funciones que mas me gustan de jQuery, $.ajax.

Generar el markup

<ul class="gallery-list">
<?php $gallery = new WP_Query('post_type="gallery"&showposts=-1');
  while ($gallery->have_posts()) : $gallery->the_post(); ?>
     <li><a href="<?php the_permalink() ?>" data-id="<?php the_ID(); ?>"><?php the_title(); ?></a></li>
  <?php endwhile; ?>
</ul>

<div id="view-port"><div class="drop"></div></div>

• Con este codigo hacemos un ciclo que busca todos los posts del post_type Gallery.
• El div con ID view-port nos servirá para colocar la imagen que mandaremos a llamar.

El Javascript

$('.gallery-list a').click(function(e){
	var tid = $(this).attr('data-id');
	$('#image-viewport .drop').fadeOut(200);
	$.ajax({
		url : '<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php',
		type : 'POST',
		async : false,
		data : { action : 'theid', id : tid },
		success : function(data){
			$('#image-viewport .drop').html(image).fadeIn(400);
		}
	});
	e.preventDefault();
});

• A los hipervinculos de el ul.gallery-list al darles click tomamos el atributo data-id que en HTML5 son validos
• Hacemos un fadeOut del div que contendrá la información
• Hacemos el request de Ajax, donde la url <?php bloginfo(‘wpurl’); ?>/wp-admin/admin-ajax.php , es la direccion que tiene el control de como WordPress maneja los llamados de Ajax.
• El action de la data, es algo muy importante, en este caso yo le he dado theid, podría ser cualquier nombre a fin a la función.

En el tema de WordPress

Este codigo lo colocamos en el functions.php o en /functions/custom-functions.php en TRF.

function thumb_caller(){
	if(isset($_POST['id'])){
		$id = $_POST['id'];
		$out  = get_the_post_thumbnail( $id, 'gallery');
		if(!$out){
			$out = '<img src="'. get_bloginfo('stylesheet_directory') .'/images/no-image-950x430.png" width="950" height="430" alt="No image" />';
		}
	} else {
		$out = _e('No parameter was given...');
	}
	echo $out;
        die();
}
add_action('wp_ajax_nopriv_theid', 'thumb_caller');

• thumb_caller es mi función que manda a llamar el thumbnail, de tamaño gallery si no tiene thumbnail llamo una imagen del mismo tamano.
• Sino existe un parámetro llamado id, simplemente devuelvo un texto
• Luego anado esa funcion al hook wp_ajax_nopriv_the_id donde, para que funcione es wp_ajax_nopriv_[el parametro de action], es no_priv porque es para uso del front end, si fuera para uso del backend seria, wp_ajax_[el parametro de action]

Y listo!

Muchas veces me habia topado que no salian las imagenes que yo queria en los Facebook Like. Me puse a investigar un poco y listo:

function img_fb(){
	$thumbid = get_post_thumbnail_id();
	$thumbsrc = wp_get_attachment_image_src( $thumbid );
	if($thumbsrc){
		echo '<meta property="og:image" content="' . $thumbsrc[0] . '" />';
	}
}

add_action('wp_head', 'img_fb');

• La función se coloca en el functions.php de tu tema, les explico que hace:
• La funcion toma el ID del thumbnail de la publicacion actual
• Luego toma la ruta fuente del archivo basado en el ID anterior
• Si existe este, imprime el tag de Open Graphic utilizado por Facebook
• Esta funcion la anadimos al wp_head y listo!

Ya tienes las fotos de thumbnail en tus Likes!

Cabe mencionar que esta funcion vendra incluida en mi nuevo framework para temas de WordPress, The Royal Framework.

Esos detalles de los que hablo hacen la diferencia de un buen proyecto, a un proyecto increíble. Talvez ya viste alguno de los efectos antes, al igual que yo, pero vamos a hacerlo con poco código. Los efectos se crean con menos de 5 línea de código.

Animando el menú simple

un simple ul, que animaremos

Tenemos un menú compuesto por una lista no ordenada así:

<div class="ejemplo-1"><ul class="azul">
	<li><a href="#">Texto 1</a></li>
	<li><a href="#">Texto 2</a></li>
	<li><a href="#">Texto 3</a></li>
	<li><a href="#">Texto 5</a></li>
	<li><a href="#">Texto 6</a></li>
</ul></div><!--ejemplo-1-->

Con una hoja de estilos así:

ul.azul{
    list-style:none;
    width:300px;
}
ul.azul li{
    margin:0;
    background:#005baf;
    padding:5px;
    border-left:3px solid #0c4d89;
    border-bottom:1px solid #0c4d89;
}
ul.azul li a{
    color:#FFF;
    text-decoration:none;
    position:relative;
    display:block;
}

Ya con eso podemos empezar a hacer magia, con jquery.

$('.ejemplo-1 ul li a').hover(
      function(e){
          $(this).stop(true,true).animate({ 'left' : '+=15px'}, 'fast'); },
      function(e){
          $(this).stop(true,true).animate({ 'left' : '-=15px'}, 'fast');
      }
);

Y eso es todo. Explico este  código.

Elijo un selector (en este caso los vínculos). Luego le digo a Jquery, cuando tenga el puntero en alguno de estos que mueva a la izquierda 15px rápidamente, para que cuando lo quite lo deje donde estaba.

El stop(true, true) me sirve para poder tirar la cola de acciones y el evento mismo si el tiemp trigger es muy corto para que se termine la acción. Esto para evitar que si hago varias veces el puntero sobre “a” no se quede como trabado.

Usando íconos como menú

Otra forma interesante de usar Jquery no intrusivo es dando recursos visuales y una ayuda sobre los mismos, los tooltips. Pero en nuestro caso haremos unos primitivos que solo nos servirán para el menú (con algunos cambios pequeños podemos hacer un tooltip casi para cualquier selector).

<div class="ejemplo-3">
    <ul class="bloque">
        <li><a href="#" title="Inicio"><img src="effect-menu-img/home32.png" /></a></li>
        <li><a href="#" title="Portafolio"><img src="effect-menu-img/bag32.png" /></a></li> 
        <li><a href="#" title="Blog"><img src="effect-menu-img/article32.png" /></a></li> 
        <li><a href="#" title="Contacto"><img src="effect-menu-img/mailopened32.png" /></a></li>
   </ul>
</div><!--ejemplo-3-->

Con una hoja de estilos así:

ul.bloque{
    list-style:none;
    height:30px;
}
ul.bloque li{
    margin:0 10px;
    float:left;
}
ul.bloque li a{
    color:#000;
    text-decoration:none;
    display:block;
}

Y la mágia!

$('.ejemplo-3 ul li a').each(function(i){
         var title = $(this).attr('title');
         var position = $(this).position(); 
         $(this).append('<span>' + title + '</span>'); 
         $('span', this).css({'left' : position.left , 'top' : position.top -20, 'position' : 'absolute'  }).hide();
      });
$('.ejemplo-3 ul li a').hover(function(e){
         $('span', this).stop(true, true).fadeIn(500);
      }, function(e){
         $('span', this).stop(true, true).fadeOut(200);
});

En las primeras líneas de código añadimos un span después de cada imagen con el texto correspondiente agregado en el atributo rel en los vínculos. Les colocamos una posición relativa a su padre y los escondemos.

Luego le decimos a jQuery que una vez esté el punteo en el vículo, muestre el span asociado a él.

Drop down, con y sin javascript

Muchas veces estamos ordenando nuestros menús y necesitamos los dropdowns, si quieren saber el principio de los mismos, con 10 línea de código estamos con todo.

No doy detalles los pueden encontrar en el demo o el descargable.

• Ver demo
• Obtener el código

Y todo mi sitio personal en sí (bio y portafolio actualizado y bien enfocado) a mi nuevo sitio que estoy construyendo, jepser.me.

¿Por qué hago esto?

Estoy casi seguro que muchos no les interesa mi biografía y todo eso sobre mí, y desean buscar un tema en específico.

Y jepser.me será el sitio donde se concentrará mi vida. Es una loca idea que se me mentió, al pensar que cuando sea más grande y quiera recordar, no tengo que voltear atrás y recordar en mi mente lo que queda de los momentos. Sino simplemente visitar mi sitio y ver “en tiempo real” el pasado.

Mmm, no entiendo…

Jepserbernardino.com, tutoriales, freebies, artículos de interés y cosas que publico que me agradan. Informativo.

Jepser.me, biografía cronológica y portafolio para proyectos. Negocios.

Creo que no es una buena movida, ¡dejalo así y ya!

Eso era al principio, pero quiero hacer un sitio más dedicado a mis proyectos con clientes y separarlos, hacer algo más elaborado para tener nuevos proyectos y poder mostrar el potencial de mi trabajo.

Y por otro lado quiero escribir más sin que tenga que tener otros blogs por otros lados, hablando de otras cosas, cuando puedo concentrar toda la información (que no tiene que ser sobre temas web) en mi blog.

Asi que…

¡Ya está dicho! Esperen más publicaciones por acá y más trabajos por allá.

Jepser.me será un sitio experimental que busca avanzar en el diseño web. Haciendo algo no precisamenete intuitivo pero sí funcional.

Además este sitio sufrirá unos cambios de diseño, está muy formal y (esta como otras razones) quiero que sea más intuitivo y que sea más amigable y dinámico en su vista.

Ahora tomaremos a un nuevo y real cliente para la serie de artículos. Primero, nuestro cliente:

• Es una empresa dedicada a los negocios en general, tienen 3 productos principales: Libros (enciclopedias y libros tematicos), Carnés plásticos y eletrónicos pequeños (cámaras, marcos digitales, etc.)
• Su grupo objetivo son personas 25 – 50 años para ventas, para grupo de trabajo su principal solicitante es recién salido de diversificado (18 – 24 años).
• Necesitan renovar imagen empresarial y desde luego, tener un sitio web que cumpla el objetivo de herramienta de ventas.
• El sitio deberá proveer información suficiente para la cotización en línea y también la confianza y despertar la acción a aplicar para plazas por el lado del contratante.
• No tendremos conectividad con Facebook o Twitter por el momento, ¿Por qué? Es una empresa que está saliendo del cascaron, por el momento debemos hacer presencia de marca (lo explico detalladamente luego).
• Nuestro sitio será solamente informativo, pensado en la escalabilidad a tienda en línea para un futuro próximo.

Sabiendo esto podemos pasar a la solución.

La imagen gráfica

Después de pasar la información (aclaro que este proyecto no lo diseño yo, como director de proyectos mi tarea consiste en chequear las propuesta por nuestro diseñador y ver si concuerda con el objetivo propuesto, aportando ideas y construyendo junto al diseñador y el cliente el producto esperado.

Antiguo isotipo y su concepto

El concepto encerrado en este isotipo es simple. Negocios Globales.

Pero lastimosamente no está bien definido, ahora, que podemos rescatar del isotipo pues para nuestro cliente encierra mucho, su base como empresa.

• Negocios Globales, es decir, el mundo es uno solo y por lo tanto los negocios se pueden hacer en cualquier lugar.
• Todo se basa en comunicación su estrategia para hacerlo
• Ventas, su fuera y base para mantenerse. El grupo de ventas es una parte vital para la empresa

La propuesta

La nueva propuesta consiste en la descentralización de los negocios donde el punto de partida es su base, Guatemala. Marcado de color verde, al igual que el nombre Marketing. Haciendo referencia a Marketing desde Guatemala. Y el color azul (mercados en todo el mundo) del mismo color que International.

Esta propuesta fue hecha por un nuevo interno de Royal Estudios. Mostramos las propuestas en fondo claro y oscuro. El cliente aprobó esta propuesta, la primera mostrada. El nuevo isotipo de la empresa.

Esperen el próximo artículo, diseñando el sitio web.

Puntos importantes a tomar

En este tipo de sitios web, las características que puedo evaluar para la creación de las mismas son las siguientes:

• Reflejo de identidad
• Objetivo específico (ganar más aliados, promocionar a un nuevo candidato, voluntariado, información del partido)
• Cuidado en el grupo objetivo y el alcance que se debe tener con ellos
• 2 Acciones indispensables, llamado a afiliación y mostar en primer plano el plan de trabajo
• Tener uso de redes sociales para divulgación de contenidos
• Contenidos media para poder facilitar la digestión de contenidos tan serio

Partido Unionista

Empiezan bien, ya que utilizan un CMS (WordPress). Urls intuitivas, buen uso de espacio, no hay saturación de elementos. Estoy chequeando que se pueden accesar con facebook para que los comentarios sean linkeados a los perfiles, está bien. Sin embargo me parece que es un tema modificado y más que eso no refleja una imagen profesional. Más bien una imagen genérica de una plantilla, no se tenía un objetivo claro de que se quería con el sitio. A mi no me llaman a ninguna acción, parece un tipo periódico en línea con noticias.

Partido Patriota

Ya escuchamos un par de cosas no muy agradables que descubrió Oscar Mota sobre el Partido Patriota y su campaña de social media. Fuera de eso vemos que utilizan Joomla! para su plataforma de contenidos, cosa que estoy en desacuerdo ya que no pudieron modificar las url’s a amigables para un mejor SEO. El sitio tiene un orden, sin embargo como el anterior, no tiene un objetivo propuesto. Es un sitio informativo que no llama a la acción. Las secciones son las que se necesitan, nada fuera de lo común.

Partido Gana

Primer GRAN ERROR, ¿una animación flash? Para que queremos un logotipo de un Partido Político volando por todos lados. Tienen un manejador de contenidos propio o al menos no conocido, además de un diseño con un estilo de los 90′ no pasan de tener banners flash por todos lados. Hay errores en el html pues si pongo el puntero sobre el link no me acepta, pero si le doy a sus alrededores si me manda al sitio. Tiene un código realmente sucio. Si bien tiene una organización de menús más ordenada y banners a secciones de interés, no tengo nada más que decir referente al sitio.

Partido Viva

Este es uno de los sitios que mejor me pareció ya que tiene colores que son frescos y no la típica paleta. La organización de los links está bien, tienen más o menos el objetivo del sitio. Me gusta la estructura de la página de inicio. Pero creo que perdieron esfuerzos en el link de “Fuerza Viva” porque no encuentro nada de fuerza ni vida en esa sección.

Encuentro por Guatemala

Primero, es una plantilla de CSS. Segundo, está feo. Tercero, no utiliza manejador de contenidos. Trataron de hacer unos call-to-action buttons de afíliate y plan de trabajo, puntos a favor. A este sitio le falta dinamismo y si el sitio es redondo, no entiendo por que tanta geometría cuadrada.

Frente Republicano Guatemalteco

Empezamos bien, CMS (WordPress) sin embargo no tomaron en cuenta lo fácil que es hacer que las url’s sean amigables. FRG utilizó un tema llamado White House en su versión gratuita. No pudieron ni invertir US $ 79 por su proyección en internet, MUY MAL. Creo que caemos en lo mismo que encuentro por Guatemala, solo que con un CMS. Además de tener secciones vacías.

Partido Creo

Un sitio web hecho nuevamente en WordPress, bien por el CMS. Con un diseño bastante sutil y podría decirse moderno, sin embargo estoy casi seguro que es un plantilla. No tienen un objetivo en el sitio, más que informativo y ese es uno de los errores más grandes a la hora de crear un sitio web para una organización. Pese a eso, creo que está bien la división de los menús, no tengo más que decir.

Partido de Avanzada Nacional

Bueno, bueno… Detengámonos un poco, un sitio web así me daña la vista. Está bien que sean sus colores oficiales pero hay que tener buen uso de ellos. El sitio me parece como de esos que regalan y que son plantillas para hacer tu sitio web. No me llama la atención pues parece un blog mal hecho con un estilo, sin estilo.

Doctor Manuel Valdizón

Deje a este de último por 2 motivos: su sitio web y la publicidad que tiene por todos lados. Es un sitio web del candidato que a la vez es de su partido. Donde está la estética, al entrar una canción robada (supongo que no compró los derechos para modificarla) que no se puede parar, es totalmente intrusivo y un insulto a los desarrolladores web. Además de crear un sitio web con el estilo de los años 80′, el sitio tiene imágenes desproporcionadas y unos íconos que no tienen ni un poco de diseño. Realmente este es el peor sitio de los que he visto en mi vida, lo siento por ser tan cruel pero es la verdad.

Por favor, no contratar a el sobrino o hijo pequeño para hacer trabajos tan importantes como este. Solo me queda decir que, en el tiempo donde la tecnología está adelantandose y penetrando en los usuarios con mayor impacto, no podemos dejar que pseudo-asesores pongan en riesgo la credibilidad de una organización por prostituir el mercado web.

Es como un doctor, creo que nadie se iría con uno que su consultorio tengan como bisturí un cuchillo de cocina oxidado. Solo nos queda tratar de mejorar el mercado, pensar como los usuarios, estudiar el caso y sobre todo asesorar a nuestro cliente.