Acentos en Javascript

internet, javascript, truco 2 Comments »

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.

Super Mario Bros en javascript

tecnología 4 Comments »

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.

Reflejos con Javascript

javascript, web 2.0 7 Comments »

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:

El javascripy

humor 5 Comments »

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.

[Tutorial] Ajax Lightbox

CSS, javascript, web 2.0 5 Comments »

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:

Imagen con Ajax Lightbox

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.

Design by j david macor.com.Original WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in