Archivo para Marzo
En cristalab han puesto un tutorial muy bueno para hacer plugins en Wordpress , si eres de los que te gusta trastear con el código de tu CMS, échale un ojo…
Cuando queremos programar en javascript más alla de escribir unas cuantas lineas, es conveniente usar un framework de desarrollo por varios motivos:
- Cantidad de funciones escritas que nos ahorrarán mucho trabajo.
- Podremos escribir menos código y más compacto.
- Código más legible y mantenible.
- El código generado es crossbrowser, funcionará igual en todos los navegadores.
- Compatible con CSS 3
- Seguro que hay muchas más…
Existen muchos frameworks a la hora de trabajar con javascript. Uno de los más famosos es prototype, quizás por que es el más antiguo.
Javascript se ha convertido en un lenguaje muy importante en Internet, ha dejado verse como un lenguaje con el cual hacer alguna animación y poco más , para convertirse en uno de los pilares de la web 2.0.
Por todo esto me estoy poniendo al día en una librería que a mi me ha gustado mucho: jQuery.
Me gusta por la sencillez con la que puedes empezar a programar y la cantidad de código que ahorras al usarla, además de ser muy lijera.
También me gusta mucho Dojo , un framework muy interesante también y que incluye soporte para persistencia de datos en el lado del cliente, usando para ello Google Gears u otras tecnologías, pero de las que te abstrae y unicamente tendremos que aprender a usar los objetos de Dojo. Parece muy interesante y con seguridad le daré una revisión en un futuro.
Pero vamos a ver que nos ofrece JQuery. Lo primero que vamos a ver es el evento ready, el cual podremos empezar a ejecutar código javascript una vez cargado el DOM.
Si no usaramos esta función y usaramos el clasico evento “onload”, y tubieramos 100 imágenes en la página, tendriamos que esperar a que se bajaran estas 100 imágenes para que el código se empezara a ejecutar. En cambio el evento ready permite que el código javascript se empiece a ejecutar cuando el objeto DOM de la página este cargado, antes de que se bajen las imágenes.
Vamos a ver un ejemplo:
-
$(document).ready(function() {
-
$(‘.rojoNegrita’).addClass(‘grandeAzul’);
-
});
-
$( ) se utiliza para seleccionar partes del documento HTML. Normalmente recibe como parámetro un string que puede contenet cualquier selector de CSS.
Con la funcion .addClass() se puede añadir la case pasada como parámetro del objeto DOM.
Asociamos una función al evento $(document).ready mediante el cual no tendremos que esperar a que se carguen las imágenes , videos, etc.. en la página, y se ejecutará cuando el DOM del documento HTML este listo.
SELECTORES EN JQUERY
- ETIQUETA: $(’p') devuelve todos los párrafos de la página.
- ID: $(’#cabecera’) devuelve el elemento de la página que con id cabecera.
- CLASE: $(’.negrita-rojo’) devuelve todos los elementos de la página que contengan la clase negrita-rojo.
jQuery soporta un conjunto básico de los selectors XPath. Por ejemplo :
Para seleccionar todos los párrafos de la página que implementen alguna clase escribiríamos :
-
$(‘p[@class]’)
-
Para obtener todos los divs que contengan algun párrafo dentro, escribiríamos:
-
$(‘div[p]’)
-
Se pude utilizar lo operadores ^= , $= y *=.
- ^= : para obtener los elementos de una página HTML que contengan un atibuto que empieze por un valor determinado.
- $= : que acabe por un valor determinado.
- *= : que contenga un valor determinado.
Por ejemplo :
-
$(document).ready(function() {
-
$(‘a[@href^="mailto:"]’).addClass(‘mailto’);
-
$(‘a[@href$=".pdf"]’).addClass(‘enlacePdf’);
-
$(‘a[@href*= “sitio.com"]’).addClass(‘sitio’);
-
});
-
Estas clases css deben estar previamente definidas en la página, por ejemplo:
-
.mailto { color: red; }
-
.enlacePdf { color:green; }
-
.sitio { color: yellow; }
-
De esta forma, los enlaces de tipo malito apareceran en rojo, los enlaces a ficheros pdf verdes y los enlaces a “sitio.com” apareceran en amarillo.
SELECTORES PERSONALIZADOS
Además, jQuery nos provee de selectores personalizados. La sintaxis de estos selectores de jQuery es la misma que la de las pseudoclases de CSS.
Mediante :eq(2) podemos obtener el tercer elemento de la lista devuelta. Se obtiene el tercero ya que las listas devueltas por jQuery son “zero-based”, es decir, empiezan contar desde 0, por lo tanto el 2 es el tercer elemento de la lista.
-
enlace = $(‘a.enlacePdf:eq(2)’)
-
En este caso la variable enlace almacena una referencia al tercer enlace que implementa la clase “enlacePdf”.
DAR ESTILO A LAS ELEMENTOS ALTERNOS
Hay ocasiones en que queremos dar estilo a una tabla para que cada fila salga con un color de fondo diferente, segun sea par o impar, para así conseguir una mayor legibilidad.
Para conseguir este efecto jQuery nos provee de dos selectores propios ( o personalizados ) ; “:odd” y “:even”.
-
.impar {
-
background-color: #D6D3CE;
-
}
-
.par {
-
background-color: #FFFFFF;
-
}
-
Después, mediante los selectors :odd y :even , aplicamos los estilos a cada elemento tr de la página.
-
$(document).ready(function() {
-
$(‘tr:odd’).addClass(‘impar’);
-
$(‘tr:even’).addClass(‘par’);
-
});
-
Por último, el selector personalizado “:contains” seleccionara los elementos que contengan el string pasado como parámetro al selector.
-
var parrafos = $(‘p:contains("Hola")’) ;
-
La variable párrafos contendrá una lista de elementos que contengan el string “Hola”. Después podriamos aplicarles un estilo a estos parrafos :
-
parrafos.addClass(’subrayado’);
-
De esta forma aplicamos la clase subrayado a todos los párrafos que contengan la palabra “Hola”.
El equipo de Dojo ha liberado la version 1.1 de su framework de desarrollo, el cual viene con unas 800 mejoras, entre las que se incluye soporte para Adobe AIR y Jaxer y mejoras en el performance entre otras… Este framework me parece muy intersante , próximamente hablare de él y de otros como JQuery…
Silk icons es un set con unos 700 iconos de 16×16 pixels, de gran calidad y que contiene una gran variedad de iconos en el cual podrás encontrar alguno adecuado para tus necesidades. Se usa en muchos diseños…
Ver Previsualización
Descargar
Otra de las nuevas características incluidas en MySQL, además de los procedimientos almacenados, son los triggers, que traducido sería algo así como disparadores, son oyentes, que se mantienen a la escucha de los eventos que puedan producirse en una tabla (insert , update y delete) y ejecutan un código antes (before) o después (after) de que se produzca este evento.
Con los triggers podemos hacer cosas tan interesantes como mantener un log de que usuarios hace modificaciones en una tabla, que usuarios borran registros, o insertan, o lo que se te ocurra.
Para referenciar las columnas de antes y después de que el vento se haya disparado, se usan las palabras clave OLD y NEW. Con la sentencia insert solo se permite NEW, con update se permiten ambas y con delete solo OLD.
Sintaxis necesaria para crear un trigger
-
CREATE TRIGGER <nombre>
-
{BEFORE|AFTER}
-
{INSERT|UPDATE|DELETE}
-
ON
-
<tablename>
-
FOR EACH ROW
-
BEGIN
-
<sentenciasSQL>
-
END;
-
Para poner nombre a los triggers es conveniente seguir una convención que hará más fácil identificar sobre que evento y tabla actúa el trigger. Esta sería una buena forma de nombrar nuestros triggers:
NombreTabla + “_” + abreviatura_tipo_tigger
Por lo tanto para nombrar un triger que se ejecuta sobre la tabla T1 después de un update lo haríamos de la siguiente forma si seguimos esta convención:
“T1_BU”
Esto puede ser útil, pero no es necesario, puedes poner el nombre que quieras a tu trigger.
Para crear triggers en una tabla es necesario hacerlo desde un usuario con permisos para ello. Para dar permiso a un usuario en una tabla para crear un trigger lo haríamos de la siguiente forma:
-
GRANT CREATE TRIGGER ON nombreTabla TO Usuario
-
Vamos a ver un ejemplo sencillo:
Creamos la tabla miTabla
-
CREATE TABLE miTabla( id int , nombre varchar(50) );
-
Y después creamos un trigger que va a crear una variable global con el nombre antiguo antes de ejecutar el update y otra con el nombre nuevo que habrá después de ejecutar el update.
-
delimiter //
-
CREATE TRIGGER miTabla_bu before UPDATE
-
ON miTabla
-
FOR each row
-
begin
-
SET @nombreViejo = OLD.nombre;
-
SET @nombreNuevo = NEW.nombre;
-
end//
-
Vamos a ver otro tigger :
-
CREATE TRIGGER miTabla_bi
-
before INSERT ON miTabla
-
FOR each row
-
begin
-
SET @x = ‘Trigger activado’;
-
SET NEW.nombre = ‘Valor introducido desde el TRIGGER’;
-
end//
-
En esta ocasión, cada vez que se haga un insert sobre la tabla miTabla, se creará una variable global con el valor ‘Trigger activado’ y modificará el valor que se insertará en la columna nombre, por lo que siempre se insertará el valor ‘Valor introducido desde el trigger’.
Si lo que queremos es mantener el control de una tabla para ver quien la modifica y a que hora, podemos crear una tabla donde iremos anotando quien hace cada modificación y anotar los cambios.
Creamos la tabla auxiliar
-
CREATE TABLE controlMiTabla
-
(
-
id int NOT NULL AUTO_INCREMENT,
-
id_registro int,
-
anterior_nombre varchar(50),
-
nuevo_nombre varchar(50),
-
usuario varchar(40),
-
modificado datetime,
-
PRIMARY KEY(id)
-
) ENGINE = InnoDB;
-
Y ahora vamos a crear un trigger que se encargue de llevar un log de quien actualiza la tabla, que valores modifica y a que hora:
-
delimiter //
-
CREATE TRIGGER MiTabla_BU after UPDATE ON miTabla
-
FOR each row
-
begin
-
INSERT INTO controlMiTabla (id_registro, anterior_nombre , nuevo_nombre, usuario , modificado ) VALUES(OLD.id , OLD.nombre , NEW.nombre, CURRENT_USER(), NOW() );
-
end//
-
Y ya tenemos nuestro trigger creado, con el cual llevaremos el control de la tabla.
Esto es recomendable hacerlo solo en las tablas de importancia critica, ya que si no nuestra base de datos crecerá de forma innecesaria.
