Mi rincón en Internet: jquery

Mostrando entradas con la etiqueta jquery. Mostrar todas las entradas

martes, 17 de enero de 2012

Jugando con HTML5

El otro día escribía una anotación sobre HTML5 y criticaba un poco el "buzz" que se le está dando. Sin embargo, HTML5 tiene algunas características totalmente nuevas y geniales.

Como músico aficionado que soy, una de las que más me ha llamado la atención es la posibilidad de incorporar audio de forma nativa (tag ) y poder controlar el audio mediante Javascript.

En la siguiente página he puesto un sencillo metrónomo como prueba de concepto:

http://html5experiment.sourceforge.net/metronome/

Veamos las partes más relevantes de este experimento:

Lo primero es cargar el fichero de audio. No todos los navegadores soportan todos los formatos, así que hay que dar alternativas (me faltaría un OggVorbis).

Desde Javascript podemos acceder al elemento audio y controlarlo (invocando play, stop, etc) En este ejemplo he utilizado jQuery. Por ejemplo, para lanzar la reproducción:

$('#down').trigger('play');

Así de sencillo. El resto del código Javascript se limita a establecer un temporizador para ir lanzando periódicamente la reproducción del audio.

Es sólo un experimento, para hacer esto realmente útil tendríamos que controlar bien que la ejecución de un Javascript no fluctúe.

miércoles, 6 de julio de 2011

Recuperemos el denostado tag "blink"

Con lo bonito que era el parpadeo de las webs que había en Geocities...

<html>
<head>
<title>¡¡¡Blink!!!</title>
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

function blinkear() {
var blink = $('blink');
    if (blink) blink.toggle();
}
$(document).ready(function () {
    setInterval(blinkear, 700);
});

<style>
blink {color: lime; font-size: 22px;
       font-family: "Comic Sans MS";
       font-weight: bold;}
</style>
</head>
<body>
<blink>El parpadeo es divertido...</blink>
</body>
</html>

martes, 21 de julio de 2009

Selectores CSS: la intersección entre diseño y programación

El uso de selectores CSS en los "frameworks" para JavaScript más conocidos ha permitido lo que hace unos años era impensable: los diseñadores entienden el código de los programadores y los programadores pueden comprender el CSS de los diseñadores.

jQuery es especialmente adecuado: no distingue entre selectores "por id" ni selectores por "clase" (Prototype tiene dos funciones diferentes, $() y $$(), para estas tareas).

$('.lateral a.externo').click(function(ev) {
    // Código  a ejecutar
})

Este sencillo código es fácil de entender y un diseñador al verlo rápidamente intuye que en todos los tags A dentro de la "capa" lateral que tengan la clase externo se hará algo al hacer click.

.lateral a.externo {color: red; padding: 5px; margin: 0;}

Este fragmento de CSS afecta a los mismos elementos que el javascript anterior. Un desarrollador enseguida ve también a qué elementos afecta.

Lo bueno es que si el diseñador y el programador hablan en el mismo lenguaje (selectores CSS), el desarrollo es muy fácil y se puede trabajar en paralelo fácilmente.

lunes, 16 de febrero de 2009

jQuery vs Prototype

La aparición de estas librerías o "frameworks" para programar JavaScript han supuesto un ahorro de tiempo importante para los desarrolladores. Ya no hay que estar tan pendiente de las incompatibilidades entre navegadores, simplifican mucho el trabajo con el árbol DOM, etc.

Empecé a trabajar con Prototype un poco por "imposición técnica" y ya me pareció una maravilla el poder abstraerme de los XmlHttpRequest y demás. Desde hace un tiempo estoy empezando a profundizar más en jQuery, y, en mi opinión, me parece más cómodo y sencillo.

En jQuery los selectores utilizan la sintaxis de CSS y son uniformes, es más claro -- p. ej.: $('#titulo') ó $('div.resaltado') en Prototype serían $('titulo') y $$('div.resaltado').

En jQuery las operaciones típicas como ocultar/mostrar un elemento o conjunto de elementos son más sencillas: da igual que nuestro selector nos devuelva un sólo elemento o un conjunto de ellos, el método es el mismo -- p. ej.: $('#titulo').hide() ó $('div.resaltado').hide()

Generalizando mucho, podemos decir que jQuery es más conciso y Prototype más explícito.