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

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.

Hoy es el día que después de mucho tiempo muestro lo que puede ser mi nuevo tema (a escala de grises aún).

Universidad de San Carlos de Guatemala

Validación de markup | css | accesibilidad

A mi parecer, el ancho del sitio está bien, sin embargo está hecho con tablas. Solo le quita muchos puntos, sabemos que tablas = tabular datos. Es interesante que el menú principal está hecho con flash, no entiendo ¿por qué? Normalmente al menos hay una animación por algún lado, lo que veo es hover que se puede hacer fácilmente con css.

Tiene breadcrums, eso es bueno; lastimosamente el buscador es un custom search de Google que me saca a otra ventana.  Eso sí, tienen ordenado el sitio pues encontré un mapa de sitio que me muestra la estructura del mismo.

Universidad Galileo

Validación de markup | css | accesibilidad

Aquí empiezo por darme cuenta que no tiene DOCTYPE, y también define una codificación UTF-8 en el header y luego en el meta la define como ISO-8859-1, esto puede causar un poco de problemillas con los exploradores.

Fuera de eso el sitio también está hecho en tablas. Lo bueno es que el menú no es flash y aún que las imágenes no tienen alt, ya es poco probable encontrar exploradores que no lean imágenes. A pesar que el búscador tiene problemas, la información del contenido la presentan de forma ordenada, eso es bueno y también tienen un sidebar con información relevante. El diseño está muy cuadrado, se pueden jugar con las figuras geométricas sin perder la seriedad de la institución. Además utliza url’s amigables con los búscadores.

Lo bueno es que utilizan RSS para mantener actualizados a sus suscriptores en diferentes áreas.

Universidad Rafael Landívar

Validación de markup | css | accesibilidad

Veo en la URL, un diseño de los 90′ cuando todo lo cuadrado estaba de moda, si embargo ya utilizan javascript para un acordeón para el menú. Además utilizan divs (aunque no tableless). Me gusta mucho que utilicen thumbnails para mostrar las noticias y también la imagen principal. ¡También utilizan twitter!

También  tienen breadcrumbs, un punto a favor por ser sitios con mucha información. La verdad no está tan mal trabajo, pues también en las páginas internas utilizan una imagen principal que le da una mejor cara.

Universidad Rural

Validación de markup | css | accesibilidad

No tengo mucho que decir con este sitio, pues están con el concepto de la web, donde un logotipo volando y un contador eran la moda. Pienso que deberían re-organizar su menú y también chequear su compatibilidad en firefox y luego en internet explorer. Además de maquetar el sitio con div’s y no tablas.

Universidad San Pablo de Guatemala

Validación de markup | css | accesibilidad

Es increíble que aunque nunca haya escuchado de esta universidad (que no existe físicamente) aprobó las 2 validaciones; de markup y css. Además de un bonito diseño, ya está utilizando tecnologías open-source, pues utiliza Joomla!. A mi parece tiene un diseño coherente y despliega la información de una forma ordenada.

Universidad del Valle de Guatemala

Validación de markup | css (no aplica) | accesibilidad

Primero aclararé que la UVG no aplica a el validado de css puesto que no tiene alguna hoja de estilos; en pocas palabras, malo. Al ver este sitio se me viene una ironía pues, siendo ellos los representantes ante la ICANN, tienen un sitio feo y además es prácticamente solo imágenes. Pienso el webmaster debería empeñarse un poco más en mostrar una buena cara para esta institución. El RSS no sirve, un rediseño total sería bueno.

Universidad Mariano Gálvez de Guatemala

Validación de markup | css | accesibilidad

A decir verdad, el sitio de la UMG es uno de los mejores en los que he visto, sin embargo no veo un diseño inteligente. No se si su prioridad sea informar a los estudiantes o captar. Supongo que están enfocados a los estudiantes matriculados, no pienso que sea una buena idea tener el menú principal como menú de pie. El banner hace bien mostrando la información relevante. En general es sitio cumple con lo necesario.

Universidad Francisco Marroquin

Validación de markup | css | accesibilidad

Debo decir que es el mejor sitio entre las universidades. Me agrada el espacio entre los objetos y las tres columnas para la página principal.  Tiene breadcrumbs, además de un menú facil y a pesar que casi todas las secciones están en sub-dominios me agrada el minimalista.

Universidad del Istmo

Validación de markup | css | accesibilidad

La Unis es otra universidad que no tiene un mal diseño, está bien utilizado el buscador personalizado de Google (con iframe). Un gran error, es el menú; pues son imágenes con un texto con Lucida Sans, una fuente que casi todas las máquinas tienen. El contenido está distribuido de forma ordenada y a pesar que hay un problema con los márgenes y paddings, el sitio esta bien.

Realmente vemos con este rediseño, lo mal que están tanto las personas que asesoran el proyecto (desarrolladores) como el cliente (el periódico). Es un buen ejemplo para saber que NO hacer, pues, cuando las tendencias van a diseño tipo revista para sitios que tienen mucho contenido, ellos decidieron ir por Flex de Abobe.

Accesibiliad y usabilidad

Primero hagamos una prueba con el famoso wave, medidor de accesibilidad en un sitio.

Pero lastimosamente tiene un error de accesibilidad… ¡No tiene nada! Revisando el código (que no es mucho). Me encontré con lo siguiente:

• No tiene etiqueta <title></title>
• No tiene declarado el tipo de documento DTD
• No tiene embebido el flash de una manera correcta
• No entiendo porque tienen dos scripts de Google analytics dentro del sitio, y supongo que el swf le pasa las variables de url y visitas para poder tener estadísticas reales y conscisas

Luego que espero un buen rato para que cargue, en la página principal veo información relevante; que, en un tiempo estuviera en xhtml/css podría ser bueno.

No entiendo por que tengo 3 barritas de desplazamiento vertical, es decir, el del navegador y unos botoncitos para poder navergar en la noticia. Creo que hacer que el usuario haga tantos clicks para poder navegar ¡es atróz! No tiene opción de dejar el click y que empiece a bajar, sino que por clicks.

Le doy click a Nacional y tengo lo mismo que en portada, ¿será contenido duplicado?  jeje

Al leer un artículo, me encuentro que los encabezados son del mismo tamaño que el contenido. No creo que eso sea bueno para distiguir en una buena lectura, subtemas. Además no pude terminar de leer pues el scroll de los botoncitos no se quedó a medias.

En la sección de Contáctanos, solo pulsé Enviar y el formulario se envió… No tenía validadores.

Intenté buscar algo, ¡pero sorpresa! No tiene botón para buscar y presionar la tecla enter, no funcionó.

Si la interactividad es uno de los objetivos del sitio, ¿Porqué no se puede opinar?

En suscripciones no sirven los scrolls, mal porque quería saber que había abajo. Otro bug que encontré sin querer fue el cambiar de suscripciones a otra sección, siendo este el resultado (una sobreposición):

En fín puede que hayan más cositas allí por arreglar.

Mi opinión

A mi parecer (como Oscar Mota también dijo), es un paso hacia atrás (más bien 100). Un medio masivo de información no se puede dar el lujo de cometer tan grandes errores, y el problema fue o del asesor tecnológico que encontró un nuevo juguetito flex y lo vendió a el encargado de tecnología que no sabe nada sobre usabilidad y accesibilidad. Pues el sitio no tiene RSS, una forma muy efectiva de publicar contenidos y notificar a los suscritos. Así también el social media.

Más que hacerlo en Flex, veo deficiencia en el trabajo final. Pues con los errores que encontré (y solo navegué por unos 5 minutos) ya no me dan ganas de regresar, imaginen a las personas que son regulares lectores en la red de este periódico.

Se puede regresar y componer el error, ¿como? Para eso sirven los CMS. El diseño no está mal, y es por eso que pueden rescatar tremendo desastre. Talvez soy un poco cruel, pero creanme, y disculpas si el que hizo el sitio lee esto. Pero donde cabe hacer una “aplicación” con Flex, donde no se requiere. En fin, www.sigloxxi.com hizo una super mala inversión.

Actualización

Este screenshot fue generado en Firefox 3.5.3 para Mac, gracias a (Ignacio Sagone)

Si tienen algo más que agregar, solo escríbanme y lo colocamos por acá. La idea no es hecharles sal como se dice en mi país, sino que mostrar por que se hizo mal y pues como componerlo.

Todo empezo con querer contribuir de alguna manera a las personas (gracias) que visitan mi blog y las que comentantan también. Este tema está totalmente en español y esta basado en colores muy vivos, con un toque ambiental.

Entre las características del tema están:

• xhtml/css3 validados
• grid 960 para maquetado
• soporta los plugins que vienen default en wordpress
• un sidebar izquierdo
• optimizado para los buenos exploradores (safari/mozilla/opera) e IE 7 y 8

No es nada del otro mundo, sin embargo tiene ese no se que lo hace especial. Espero que les guste y disfruten wordpress :)

Esta es la versión .8 en la próxima  versión tengo pensado:

• añadir soporte de twitter en el administrador con el plugin “twitter for wordpress”
• añadir un sidebar en la parte inferior
• unos efectos jquery (que son sorpresa)

Éxitos en todo y si tiene algún bug, diganmelo.