Y ya van cuarenta semanas de recopilación de enlaces y noticias interesantes que os mostramos en formato reducido cada dominguito. Hoy es turno de éstas:

• Desde ON Software nos enteramos que, en Europa, Microsoft va a lanzar una actualización automática que nos permitirá elegir navegador. Una medida antimonopolio que puede igualar la balanza en la guerra de los navegadores.
• Los que tengáis una cuenta en Gmail probad este pequeño experimento: Escribíos un correo a vosotros mismos (para no molestar a nadie) que en el cuerpo del mensaje aparezca la expresión ‘he adjuntado’. ¿Cómo os quedáis?
• Para los que crean que el iPad es algo único, aquí podéis ver lo que es el iFreeTablet. ¡Y es español!
• ¿Ehh?,¿Cómo?,¿Una base de datos en Javascript?
• Últimamente está muy de moda decir en cada momento en donde estáis, información que solo le importará a quien quiera robarte … y es que cuando luchas en una batalla espacial no es una buena idea.
• Una gran noticia para los jugones maqueros, Steam, la plataforma de Valve, estará disponible para Mac a partir de abril, y lo mejor de todo es que todos sus juegos serán compatible con la plataforma de la manzana. Y para completar esta gran noticia, si ya habías comprado algún juego para PC, podrás descargarlo gratuitamente para Mac … ¿quién se apunta a una partida del Counter?
• Vaya, parece que el P2P es legal según un juez de Barcelona … ¿para cuándo declararán ilegal el Canon?
• ¿Eres fotógrafo y jugón de la DS? ¡Combina ambas aficiones! Controla tu cámara con tu nintendo DS … si es que sirve ‘pa tó’.

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.

Impresiona ver que hoy en día se puede hacer con un lenguaje tan liviano (y odiado) como es javascript unos juegos que cuando eramos pequeños eran lo máximo en el mundo del videojuego.

Al final de la entrada os dejo unos enlaces donde encontraréis el Super Mario Bros realizado en javascript, con la música y todo. Según explican sus autores en su blog, todo esta realizado con javascript, no hay imágenes externas ni nada, si no que está renderizado usando elementos canvas o capas (para IE). La música es un midi embebido como base64-encoded.

Aquí tenéis el archivo javascript para que lo descarguéis y lo pongáis donde querráis, o estudiar como está hecho: mario.js.

Versión normal: Con música o sin música.

Doble tamaño: Con música o sin música.

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:

Me envía Laura por correo una de las cosas más frikis que he leido en mucho tiempo.

¡¡¡Teclea, teclea!!!
El javascripy mola mogollón,
funciona en explorer y también en firefox.
Ponle javascripy a esa paginita,
que el javascripy la deja muy bonita.
Abre ventanas,
muestra mensajes,
valida formularios,
mi amol ya tu sabes!
Programan los seniors,
Programan los juniors,
Programa mi jefe con acentos en el function!
Y el javascripy se programa asi:
1-El tag “script”
2-el function vars
3-el alert-confirm
4-el return trú
Programa el javascripy,
Programa el javascripy,
programan los heavys también los frikis
Programan en la offis, programan en la uni,
Programan los fruittis y también los lunnis.
Programa Maradona esnifando una raya,
y Juan Carlos le dice: ¿Porque no usas ajax?
En el formulario de un triste portal,
pusieron javascripy y ya pudo validar
¡¡¡Validar!! ¡¡Validar, validarr, validarrr!!!
Y el javascripy se programa asi:
1-El tag “script”
2-el function vars
3-el alert-confirm
4-el return trú

Dedicado a la Señorita Ross, amante incondicional de ese maravilloso lenguaje de la humanidad llamado javascript.

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.