Pues no, las comparaciones no son odiosas si se hacen entre objetos. De nuevo surfeando por la web, me he encontrado con un sitio bastante original: Sizeasy. ¿Qué ofrece esta web?. Ofrece la posibilidad de ver y comparar objetos entre sí (en 3D) para poder hacernos una idea de sus dimensiones cuando con la notación numérica no nos es suficiente. Su funcionamiento es fácil y en tres sencillos pasos tenemos el enigma resuelto: meter nuestras dimensiones, elegir el elemento con el que queremos compararlo y guardar y compartir la comparación (si lo deseamos). El sitio admite sin problemas centímetros, pulgadas, metros, pies como unidades de medida.

Pensaréis si esto es útil o no, porque más o menos, si nos dicen una nevera, una televisión o un mp4, podemos dibujar el prototipo que tenemos en la mente (esto me hace recordar a Platón y su mundo de la Ideas, la filosofía de COU aún perdura) y hacernos una idea de su tamaño. Pero nuestro cerebro procesa y almacena mejor las comparaciones visuales y esa necesidad está cubierta en esta web.

En la lista predefinida de objetos nos podemos encontrar elementos tales como una tarjeta de crédito, un A4, una carcasa de CD, una puerta o ¿una botella de vino?.

Como bien reza el slogan del website (“Visualize the size before you buy” ), esta funcionalidad le vendrá muy bien a aquella gente que es asidua a comprar por internet y únicamente les proporcionan las medidas del objeto en sí en las numerosas páginas de venta online.

Espero que os resulte de utilidad en algún momento de vuestra vida.

Escribo esta entrada a raíz de una conversación mantenida con nuestro actual cliente al que le estamos desarrollando una web para su empresa. Nos comentó que porqué no empleábamos la tecnología flash que tan atractiva es en ciertas zonas de la web. Fue entonces cuando nos planteamos eso de: ¿ponemos o no flash?.

Sinceramente, es una tecnología que personalmente no he abordado aún. La uso cuando navego pero se ha hecho tan habitual hoy en día en Internet que a veces me cuesta darme cuenta que las webs que suelo visitar tienen partes hechas con Flash (sobre todo banners), si no es toda la web al completo. Esto me ha hecho recordar que aunque el cliente pretenda decirte cómo has de hacer su sitio web por la idea que él tiene en su cabeza, debe aceptar las sugerencias e ideas que el programador pueda aportar, porque somos los que realmente sabemos lo que hay por detrás y lo que cuesta confeccionarlo.

Primero pongámonos en el contexto histórico-social:

Flash es una tecnología desarrollada por Macromedia, que permite la creación de animaciones vectoriales y sonidos empleados en ellas por medio de bibliotecas. Por ello, tardan poco tiempo en ser cargadas por el navegador y los gráficos no se pixelizan al hacer zoom (un buen software libre para trabajar con este tipo de gráficos es Inkscape, con el que me estoy familiarizando últimamente y recomiendo a todo el mundo).

Flash invoca un lenguaje de programación llamado Action Script, que tiene claras influencias del Javascript y permite, entre otras muchas cosas, gestionar el relleno de formularios, ejecutar distintas partes de una animación en función de eventos producidos por el usuario, insertar elementos visuales que dan vida a una web, saltar a otras páginas, etc.

Todo esto lo realiza sin que para ello el tiempo de carga de la página se prolongue hasta límites insoportables para el usuario visitante.

Todo pinta precioso, ¿verdad?, pero, como leo en Netbur: ” No creo que hagan falta razones más contundentes, pero es evidente que si Adobe no usa flash para hacer su página por algo será”. Me resulta bastante gracioso.

Vamos a ver unos cuantos inconvenientes de esta tecnología:

• En Flash el texto es manejado muy pobremente. La web en su mayor parte es texto (mejor dicho, hiper texto), nosotros navegamos por internet para leer cosas: artículos. blogs, etc. En un curso que recibí sobre accesibilidad web, me dijeron que una web bien hecha es aquella en la que se puede seguir navegando al quitar todos los estilos, como antaño se hacia con los primeros navegadores en modo texto. Esto en una página basada en flash, es complicado.
• Diseño arbitrario y variable, pues cada página hecha en flash es un mundo, no sabes donde está el menu o que se va a mover cuando pases con el raton por encima. Se rompe un poco los esquemas preconcebidos y te obligan a pensar.
• Al no ser un estándar no es compatible con el 100% de las plataformas, provocando carencias que ejemplifico más abajo.
• Es difícil de mantener, pues para realizar cambios en una página web con flash y añadir nuevas funciones se convierte en una tarea mucho más compleja.
• No es bueno para los buscadores, pues las búsquedas suelen basarse en texto y la información de las páginas hechas con flash es como si no existiera para ellos.

No es que esté promulgando el desuso de Flash, simplemente digo que hay que usarlo en su justa medida y cuando el modelo de negocio en el que se sustenta la web así lo requiera.

El peligro es que si el usuario no tiene el apropiado plug-in de Flash, no podrá usar los componentes y, como sucede en muchos casos, seguirá buscando por la red obviando tu sitio. Concretamente yo he tenido (y sigo teniendo) problemas con la instalación de Java en mi puesto de trabajo y acepto que no pueda ver vídeos de YouTube o escuchar algo en goear, pero lo que no es admisible es que no pueda sacar un maldito billete de autobús Sevilla-Madrid. Las webs deben ser accesibles en multitud de escenarios diferentes, atendiendo a plataformas, dispositivos, navegadores, etc. Desgraciadamente en la mayoría de los casos, si tu web funciona correctamente en IE 7.0, ya es suficiente.

Y tú, desarrollador web, ¿qué opinas?

Fuentes:  Killersites, Netbur.

De nuevo una pequeña joya para nostálgicos creada en javascript. ¿Quién no ha tenido cuando pequeño un Spectrum? Yo al menos sí, y casi toda la gente de mi generación. Con sus arcaicos gráficos que a nosotros nos parecía lo más, sus cargas eternas y que fallaban la mitad de las veces. Pues ahora podemos tener todo eso en poco más de 600 kb construido en javascript.

Su nombre es JJSpeccy y ha sido creado por Matt West. Aquí podéis jugar online, o descargarlo y usarlo como queráis. Así se divertían los niños de los 80.

Fuente: despuesdegoogle.

… aunque no es exactamente el juego original, si no uno basado en el mismo llamado Invaders from Mars, que tiene colores y gráficos más modernos, pero que en esencia es lo mismo que el clásico juego creado por Toshihiro Nishikado.

Vaya semanita llevamos con el javascript, y parecía que nos caía mal.

Fuente: anieto2k.

Por muy molesto y mucho que odiemos el javascript, hay que admitir que se pueden hacer muchas cosas impresionantes con él, como ya hemos visto en pasadas entradas con el Super Mario y el Pac-man creado en javascript.

Hoy os traemos otra curiosidad, más sencilla de hacer pero no por ello menos curiosas.

Seguid los siguientes pasos:

1. Buscad en Google Imágenes cualquier cosa que se os ocurra.
2. Una vez obtenido los resultados de esta búsqueda, poner en la barra de direcciones lo siguiente:

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position=’absolute’; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval(‘A()’,5); void(0);

3. Y ahora presionar ENTER.

Bonito baile de imágenes, ¿verdad?

Fuente: Abadía Digital.

Si hace un tiempo ya os mostrábamos a Super Mario hecho en javascript, hoy os traemos otro clásico, ni más ni menos que Pac-man, y por partida doble.

Aquí os dejamos dos enlaces de dos juegos diferentes, para que lo disfrutéis.

• Por Harry Guillermo.
• Por Kris Cieslak.

El creado por Harry Guillermo está mucho más conseguido respecto a la versión original, aunque claro, eso conlleva que sea algo más pesado.

Fuente: despuesdegoogle.

Esta entrada es más un apunte recordatorio personal que otra cosa. A la gran mayoría de vosotros os resultará familiar, sobre todo si sois asiduos a programar en Javascript.

Mi problema ha surgido al hacer una validación totalmente banal en un formulario donde quería limitar el número de caracteres que podía meter el usuario en un campo de tipo textarea. Al darme cuenta que, a diferencia de lo que dicen por la red, el atributo MAXLENGTH no está permitido por la especificación HTML 4.01 Transitional (uno que quiere ser perfeccionista), he copiado por ahí una pequeña función (¿para qué reinventar la rueda?) donde hacía lo que yo quería. Seguidamente la he ampliado para que me soltara una ventanita pop-up (los académicos la llaman alert(…))para que el usuario supiera que se ha excedido en el número de caracteres que ha introducido.

Mi mensaje tenía que llevar acentos, pero Javascript se pasa las entidades HTML por el forro, y es normal, porque es un ámbito diferente (un lenguaje diferente). La solución: caracteres Unicode:

Solución encontrada en el blog de Lefunes.

ACTUALIZACIÓN: Para ser correctos, esta entrada debería titularse Tildes en Javascript o equivalentemente Acentos ortográficos en Javascript, pues la palabra acento suele emplearse para referirse al acento prosódico, que es el golpe de voz que le damos a una sílaba.

No estoy anunciando un nuevo producto para el cabello con un nombre que tiene gancho. Bicheando por la red de redes he encontrado una liviana librería en Javascript que te permite realizar unos efectos bastante atractivos para las imágenes que albergas en tu web / blog. Os invito a entrar en su web y comprobarlo por vosotros mismos. Para incrustarla en vuestro sitio sólo hay que seguir la siguiente receta:

• Descargar el paquete comprimido con todo lo necesario.
• Descomprimirlo y colocar reflection.js en el lugar adecuado dentro de tu web. Si eres un ser humano medianamente ordenado, tendrás una carpeta por ahí llamada “js” donde almacenas todos archivos Javascript.
• Importar la librería como otra cualquiera con la siguiente etiqueta HTML: <script type="text/javascript" src="reflection.js"></script>
• Colocar en la etiqueta <img> de la imagen que quieras reflejar este atributo : class="reflect"

Y voilá! imagen reflejada. En el .zip descargado encontraréis un archivo readme.html que os explicará cómo podéis configurar el efecto a vuestro gusto: opacidad, longitud de la imagen reflejada,…Es compatible también con las últimas versiones de los cuatro navegadores más empleados (¿sabéis ya cuáles son?) y presume de ser Javascript no obstructivo, por lo que tu página apenas se enterará de que esa librería está por ahí. Os dejo con uno de los ejemplos que hay en su web:

Para todos aquellos que trabajen como yo en el mundo del desarrollo (y mantenimiento) de aplicaciones web, sabrá que no hay navegador que ayude tanto como el Firefox y sus plugins. Hace ya tiempo (años…) que he dejado atrás el Internet Explorer. Ya no me parece necesario, ni útil.

Voy a comentar algunos de los plugins que uso habitualmente por si alguno de vosotros aún no los conoce y le interesa experimentar con un puñado de herramientas que para mí se han hecho fundamentales en el desempeño de mi tarea diaria.

Web developer: para mí es, junto con el Firebug, la herramienta más completa. Te permite obtener información de cualquier elemento renderizado en tu navegador, manejar las cookies, los estilos, ver el código fuente con sus errores, etc. Te informa si la web cumple con los estándares declarados por el W3C. Te da información de los formularios, las imágenes y mucho más. Yo lo empleo para verificar el tema de los estilos en la página, ver que lo que yo programo se representa tal y como yo quiero. Esta es la web donde se desarrolla y se atienden dudas por parte de sus creadores.

Firebug: es la más completa de todas las herramientas que he empleado hasta ahora, porque, a diferencia del anterior plugin, te permite editar contenido y ver su resultado en tiempo real. Aún hoy en día no lo he explorado completamente, pero se puede inspeccionar la página y te va diciendo en qué parte del código te encuentras. Otra de sus opciones que empleo mucho últimamente es la que permite su pestaña NET, que te dice cuánto tiempo tardan en descargarse las imágenes y demás componentes del servidor. También es posible visualizar el intercambio de peticiones HTTP que se hace entre cliente (el navegador) y el servidor donde está alojada la web que estás consultando.

Validador HTML: basado en un algoritmo de comprobación de sintaxis llamado Tidy HTML que te avisa de errores típicos que se producen al programar: etiquetas mal cerradas, atributos ya obsoletos, eventos no soportados, etc.

Live HTTP Headers: es un capturador de peticiones HTTP. Es útil para ver en cada momento qué es lo que se pide (.html, .css, .php, .png,…), dirección del servidor a donde se pide, estado de la petición (los famosos 200,404, 500, …). Bastante útil para saber que ocurre realmente ‘por detrás’ del navegador.

YSlow: es el que he conocido más recientemente. Es plugin de un plugin. Es una funcionalidad que se añade al Firebug, integrándose con el resto de componentes. Lo han desarrollado la gente de Google, pensado para indicarte las posibles optimizaciones que pueden hacerse en tu web: minimizar el número de archivos .css o .js a los que las páginas llaman, emplear CDN’s como Flickr, Youtube, etc.

Si alguno se decide a pasarse al ‘lado claro’, tenemos en la barra lateral derecha un enlace para descargarse el Firefox. ¡No lo dudéis!

Investigando como se podría realizar la navegación por imágenes de una manera atractiva y cómoda encontramos el llamado efecto lightbox. Este efecto 2.0 desarrollado por Lokesh Dhakar permite mostrar pop-ups con imágenes y grupos de imágenes de una manera bastante atractiva. Seguimos analizando este efecto, cuando encontramos una mejora llamada ’Ajax lightbox’, creado por Ignacio G. en su blog hellogoogle.com la cual conseguía, además de manejar imágenes, cargar en el pop-up ficheros externos. Este efecto nos permitiría enseñar en estos pop-ups pequeños formularios, en tiempo de ejecución, lo cual haría mucho más ágil la navegación.
Según su propio autor, “Ajax Lightbox es un script no intrusivo que permite mostrar una
ventana por encima del contenido actual de una página. El término no intrusivo se utiliza para denominar al código javascript que no se ejecuta inmerso en el HTML si no que se aplica de manera indirecta una vez cargado el documento, permitiendo conseguir independizar completamente. ’Contenido, Presentación y Comportamiento’”.

Se puede visualizar tres tipos diferentes de ventanas:

• Contenido dinámico extraído vía Ajax de un fichero.
• Imágenes individuales.
• Grupos de imágenes.

La implementación que se ha realizado empleando esta librería ha sido testeada en las últimas versiones de los navegadores más extendidos: IE/FireFox/Opera.

Aquí podeis ver un ejemplo de como queda una imagen con este efecto, que al pulsar sobre ella será, en sí misma, un ejemplo:

Y como extra comentar que existe un plugin para wordpress que usa estás librerías para conseguir este efecto en tu blog. Lo podeis descargar de aquí.

La instalación ya sabeis, descargar el plugin, descomprimirlo y subirlo al directorio wp-content/plugins, y activarlo.

Tutorial en inglés de lightbox 2.0.

Tutorial traducido de lightbox 2.0.

Tutorial Ajax Lightbox.