Píldoras jQuery VII – Lista de recursos sobre selectores

Desde mi punto de vista no hay nada más importante en jQuery que saber usar los selectores. Son fundamentales, si sabemos seleccionar correcta y eficientemente los elementos que vamos a modificar en nuestra página perderemos mucho tiempo.

Es cierto que si dominamos los selectores CSS todo es mucho más fácil, pero también es cierto que el dominio de los mismos no es algo que se pueda conseguir de manera rápida ni explicarlo en un único post. Por ello, el objetivo de este post es recopilar una serie de recursos indispensables para aprender a trabajar con ellos:

Enlaces a referencias sobre selectores

Herramientas para practicar con los selectores jQuery

VídeoTutoriales sobre selectores jQuery

Y esto es todo. El el próximo tutorial vamos a jugar con jQuery y nuevos elementos HTML5 como los sliders.

 

Píldoras jQuery VI – Un menú contextual

En el capítulo anterior vimos, de manera general y con un par de ejemplos, cómo tratar eventos de teclado y de ratón. En este post vamos  a seguir con esta temática.

Uno de las características más comunes en las aplicaciones web es la aparición de un menú contextual cuando pulsamos el botón derecho del ratón. No es algo complicado pero debemos de tener en cuenta que, por defecto, se nos mostrará el menú contextual del propio navegador. Tomemos como ejemplo el siguiente ejemplo de código:

See the Pen jQuery (Capturing mouse right click but showing browser’s context menu) by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Podría pensarse que al capturar el evento con código 3 es nuestro menú el que se va a mostrar, pero no, prevalece el menú contextual del navegador. Para evitar eso podemos optar por lo siguiente (hay muchas más posibilidades de hacerlo):

 

See the Pen jQuery (How to show a context menu in the right way) by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Las claves de que funcione se encuentran en los siguiente apartados:

  • Capturo el evento contextmenu en vez de click
  • Hago un return false para que ese evento no se tratado por el navegador (sería lo mismo si hiciera primero event.prevendefault() y event.stopPropagation() )

Y esto es todo…muy sencillo pero en un principio el funcionamiento del navegador puede desconcertar. En el próximo post repasaremos los selectores jQuery, uno de los elementos más importantes si queremos dominar esta tecnología.

 

Píldoras jQuery V – El objeto evento

El objetivo principal de usar librerías jQuery u otras similares es el de dotar de vida y dinamismo a nuestra páginas HTML que, por defecto, son estáticas. Para ello lo que tenemos que hacer es capturar evento y tratarlos.

La lista de eventos que podemos capturar es amplia y puedes encontrarla aquí y para capturarlas, tratarlos y reaccionar a ellos podemos hacerlo de dos maneras:

Nota: nombre_del_evento deberá ser sustituido por el nombre real de un evento concreto.

Pero además, en determinadas ocasiones, además de conocer el tipo de evento que se ha realizado, vamos a necesitar más información. Esta información queda recogida en el objeto  event de la función de callback que se ejecuta junto al manejador del evento. En este objeto event tenemos información importante (la referencia completa se puede encontrar aquí) como:

  • event.target : Que identifica el objecto jQuery sobre el que se ha producido el evento
  • event.type: Que identifica el tipo del evento
  • event.timeStamp: Que nos da información sobre el momento en el que se ha producido el evento
  • event.which: Que, en eventos de teclado y de ratón, nos dice que tecla se ha utilizado.
  • event.pageX: La posición X, dentro del navegador, en la que se ha producido el evento.
  • event.PageY: La posición Y, dentro del navegador, en la que se ha producido el evento. Destacar que en estas dos últimas propiedades el origen de las coordenadas, el punto (0,0) se encuentra en la esquina superior izquierda del navegador.

Para poder ver cómo se utiliza esta información sobre los eventos vamos a utilizar dos ejemplos, el primero nos dará la situación el puntero del ratón en la pantalla y en la segunda mediante el uso del teclado moveremos un div dentro de un div contenedor.

Vamos allá con la primera, esta vez usaremos codepen para mostrar el ejemplo y los ejemplos completos pueden además descargarse aquí:

See the Pen Mouse Movement by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Y el segundo ejemplo podemos verlos aquí. Mediante el uso de las teclas podremos mover un cuadrado por la pantalla.

See the Pen Capturing Key events with jQuery and moving a div by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Y esto es todo, en el próximo artículo de la serie veremos cómo crear un menú contextual (el que aparece cuando haces click en el botón derecho del ratón)  en elemento de nuestra página HTML.

 

Píldoras jQuery IV – Menú anidado de 3 niveles

Cuarta entrega de la serie. Esta vez un ejemplo muy usado: un menú anidado de tres niveles. El primero de lo niveles será horizontal, el segundo vertical y el tercero será también horizontal tal y como podemos ver en la siguiente imagen:

nested_menus

El ejemplo completo puede descargarse aquí:

El árbol HTML es muy sencillo:

La hoja de estilos CSS es muy sencilla:

Y la parte más importante, el script que define el comportamiento de los menús

Y esto es todo. El próximo tutorial de la serie será mostrar cómo trabajar con algunas de las propiedades de los eventos.

Píldoras jQuery III – Acordeón Vertical

Vamos con la tercera entrega de píldoras jQuery. Esta vez vamos a ver como hacer un acordeón vertical. El objetivo es conseguir algo similar a la imagen que podemos ver más abajo, de tal manera que cuando hacemos click en el título de una sección esa sección se despliega y el resto de las secciones se contrae:

vertical_accordion

El código completo se puede descargar aquí.

El HTML es muy sencillo:

El árbol DOM correspondiente, que nos ayuda a entender luego cómo usamos jQuery es:

dom_accordion

Los estilos iniciales de la página son los siguientes:

Y ahora la parte importante el script que nos permite definir el comportamiento del acordeón:

Y esto es todo, nos vemos en la siguiente píldora, un menú anidado de tres niveles con jQuery.

 

Píldoras jQuery II – Barra lateral deslizante

Seguimos con la segunda entrega de las pequeñas píldoras jQuery. En esta entrega vamos a crear una barra lateral deslizante. El código completo del ejemplo puede ser descargado aquí.

El HTML, ya que el resto de la página está vacía es muy sencillo.

El posicionamiento de esa barra, los bordes y los colores lo haremos con CSS. Es también una hoja de estilos muy sencilla.

Una vez ya tenemos todo colacado y con la apariencia que queremos podemos empezar a utilizar jQuery para modificar y hacer la página web y el DOM interactivo. El script que vamos a necesitar lo colocaremos justo antes de cerrar la etiqueta body y será el siguiente:

Y esto es todo. En el próximo capítulo veremos como hacer el típico efecto “acordeón” con varios contenidos en una misma página.

Píldoras jQuery I – Descripción de una imagen

Me encanta jQuery, es potente, es fácil y sobre todo tiene muchos selectores en común con CSS lo que te permite avanzar muy rápidamente si controlas un poquito de HTML y CSS.

Por eso mismo lo incluyo en mi curso de Lenguaje de Marcas. Con poca explicación y usando la referencia jQuery vamos directos al grano buscando siempre hacer ejemplos lo más prácticos posible.

Con este post inauguro la publicación de dichos ejemplos prácticos en la web. Siempre parto de una plantilla con jQuery bien referenciado e instalado que podéis encontrar aquí.

Partiendo de esa plantilla vamos realizar un ejemplo que cuando pasemos el ratón sobre una imagen nos muestre un texto largo descriptivo de la misma superpuesto en parte inferior de la imagen.

El ejemplo completo lo podéis descargar aquí y consta de los siguiente ficheros:

  • index.html :  El archivo principal, la página web en la que vamos a usar jQuery
  • styles. css: La hoja de estilos de la página web que usaremos para posicionar los distintos elementos (la imagen y la descripción que va a ser un párrafo dentro de un div)
  • js/jquery-3.1.1.min.js: Que es la libería jQuery que hemos puesto dentro de la carpeta js
  • img/image.pn: La imagen sobre la cual tendré que pasar el ratón para obtener la descripción

El html es muy básico ya que es un ejemplo para demostrar como se usa jQuery. Por un lado en la cabecera tendremos que decir que vamos a usar jQuery en nuestra página.

Dentro del cuerpo (<body>) tendremos el contenido HTML

La hoja de estilos que usaremos es muy simple:

Y por último justo antes de cerrar la etiqueta body añadiremos el script que usará jQuery:

Y ya está…efecto común y muy sencillo de hacer. Seguiremos con otro. El próximo una barra lateral que podamos ocultar o mostrar en la pantalla.

 

 

Solucionando los problemas de WiFi al actualizar a Ubuntu 16.04

Seré breve…tras actualizar a Ubuntu 16.04 desde Ubuntu 14.04 empecé a sufrir problemas de conectividad de manera aleatoria y sin justificación alguna.

Revisé mil foros y probé muchas cosas pero al final la solución fue sustituir el gestor de conexiones que viene por defecto para pasar a usar WIC. A partir de ahí cero problemas.

Los pasos para esa sustitución los podéis encontrar aquí:

https://help.ubuntu.com/community/WICD

Resumiento….

Espero que os sirva.

Diferentes Tipos de Join en el Modelo Relacional (MySQL)

La operación JOIN (combinación) es una operación fundamental en el modelo de base de datos relacional. Si no entiendes cómo funcional realmente y cuáles van a ser los resultados es difícil que trabajes bien con ese tipo de base de datos. Una definición sencilla sería que es “la combinación de dos tablas para extraer la información relacionada de las mismas”.

El problema es que hay diferentes tipos de joins y todos tienen diferente significado. Para clarificar el asunto vamos a ver un ejemplo de los más usado centrándonos en MySQL. En otros gestores de bases de datos (DBMS) el funcionamiento será similar aunque habrá que asegurarse leyendo la documentación.

Los vamos a explicar tomando como referencia el siguiente modelo:

Model Relacional - Relación 1:N

Model Relacional – Relación 1:N

La anterior imagen representa una relación 1:N entre clientes y vehículos. Cada uno de los clientes puede tener uno o varios vehículos y los vehículos o bien pertenecen a un cliente o bien no pertenecen a nadie (supón que son vehículos que se han traído desde la chatarra al taller).

El contenido inicial de las tablas es el siguiente:

Contenido inicial de la tabla clientes.

Contenido inicial de la tabla clientes.

Como podemos ver tenemos 9 clientes con códigos que van desde el “00001” al “00010” (el “00007” no está)

Contenido inicial de la tabla vehículos.

Contenido inicial de la tabla vehículos.

Como vemos hay 16 vehículos pero hay 2  que no tienen cliente asociado y además si nos fijamos bien sólo 8 clientes tienen vehículos, el cliente “00007” es cliente pero no ha traído vehículos.

Con estos datos vamos trabajar con los siguientes JOINS

  • INNER JOIN o “join normal”
  • LEFT JOIN
  • LEFT JOIN con los valores nulos
  • RIGHT JOIN
  • RIGHT JOIN con los valores nulos
  • NATURAL JOIN
  • FULL OUTER JOIN
  • FULL OUTER JOIN con los valores nulos.

INNER JOIN o “join normal”

El resultado es:

Resultado del Inner Join o join normal

Resultado del Inner Join o join normal

En este caso da igual el orden de las tablas alrededor del join y la claúsula INNER es opcional. ¿Qué estamos obteniendo? 14 filas, una por cada coche que tiene cliente asociado. Aquellos coches que no tienen cliente asociado  no salen en la consulta y aquellos clientes sin coche tampco. Y de los campos de las dos tablas sólo mostraré el código del cliente  y la matrícula por razones de comodidad para presentarlo en este post.

LEFT JOIN

Para demostrar cómo funciona realizaremos dos consultas:

El resultado para la primera de ellas es el siguiente:

Left Join de Clientes

Left Join de Clientes

Nos muestra todos los clientes aunque no tengan coche asociado y para aquellos que sí una fila por cada uno de los coches que tienen. Se ve como sale el cliente “00008”  que no tiene coche alguno.

Para la segunda consulta el resultado sería:

Left Join con Vehículos

Left Join con Vehículos

Podemos ver que nos saca todos los vehículos junto con los datos de su dueño y, además, también aquellos vehículos que no tiene dueño. En nuestro caso hay dos, aquellos con las matrículas “0011 ABC” “5566 ABC”.

LEFT JOIN CON LOS VALORES NULOS

Para demostrar cómo funciona realizaremos dos consultas:

El resultado para la primera de ellas es el siguiente:

Left Join con Clientes y valores nulos

Left Join con Clientes y valores nulos

En este caso únicamente obtenemos los clientes que no poseen ningún vehículo. Esto también se podría hacer con una subconsulta.

El resultado para la segunda consulta sería:

Left Join con Vehículos y valores nulos

Left Join con Vehículos y valores nulos

En este caso sólo obtendríamos los coches que carecen de cliente asociado. Se podría hacer también con una subconsulta.

RIGHT JOIN

El funcionamiento es análogo al left join pero en este caso es se tendrán en cuenta todas las filas de la tabla que está a la derecha del join.

Para demostrar el funcionamiento vamos a probar con dos consultas:

El resultado de la primera será:

Right Join con Vehículos

Right Join con Vehículos

Como vemos obtenemos todos los vehículos aunque no tengan dueño. Y para aquellos que sí lo tienen salen los datos de su dueño.

Si ejecutamos la segunda consulta:

Right Join con Clientes

Right Join con Clientes

Me salen todos los clientes (una vez por cada vehículos que posean) e incluso me salen aquellos que no poseen vehículos (el “00008”)

RIGHT JOIN con valores nulos

Para demostrar su funcionamiento ejecutaremos las siguiente consultas:

Al ejecutar la primera obtenemos:

Right Join con vehículos y valores nulos

Right Join con vehículos y valores nulos

Es decir sólo aquellos coches sin dueño y con null en todas las celdas correspondientes al dueño.

El resultado de la segunda consulta sera:

Right Join con clientes y valores nulos

Right Join con clientes y valores nulos

Es decir únicamente aquellos clientes que no tienen coches con null en todas las celdas correspondientes a los coches.

ES MUY IMPORTANTE COMPARAR LOS RESULTADOS DE LEFT JOIN y RIGHT JOIN Y VER LAS ANALOGÍAS EXISTENTES.

NATURAL JOIN

Para demostrar el funcionamiento del natural join vamos a realizar la siguiente consulta:

El resultado será:

Natural Join

Natural Join

Como se puede ver es el mismo resultado que en un INNER JOIN pero debemos tener cuidado ya que con NATURAL JOIN UTILIZA LAS COLUMNAS QUE SE LLAMAN IGUAL EN LAS DOS TABLAS PARA HACER EL JOIN. Si no es así obtendremos resultados imprevistos. También se puede añadir LEFT o RIGHT detrás del NATURAL y delante del JOIN.

OUTER JOIN

MySQL no soporta FULL OUTER JOIN aunque nos da una manera alternativa para hacerlo:

Al hacerlo el resultado sería:

Outer Join

Outer Join

Es decir todos los clientes aunque no tengan vehículos, todos los vehículos aunque no tengan clientes y una fila para cada asociación cliente-vehículo.

Es importante destacar que esta operación no en todos los casos nos va a dar una respuesta correcta. Para más información al respecto es bueno revisar este post.

FULL OUTER JOIN CON VALORES NULOS

Sucede los mismo que en el caso anterior:

El resultado será:

Full Outer Join con valores nulos

Full Outer Join con valores nulos

Es decir tanto los vehículos sin dueño como los clientes sin coche.

Podemos resumir esto en el siguiente gráfico.

Obtenida de WikiMedia Commons

Para más información y detalle deberíamos visitar la documentación de MySQL.

En otros gestores el funcionamiento y la sintaxis puede ser ligeramente diferente.

Comprendiendo las claves ajenas (Foreign keys) en MySQL

Obtenido de WikiMedia Commons

Las claves ajenas son un concepto fundamental dentro del modelo relacional de base de datos. Definidas de manera muy básica una clave ajena es uno o varios campos  de una tabla que hacen referencia a campos de otras tablas y que nos permiten relacionarlas.

Si buscamos una definición formal podemos usar la de Wikipedia pero vamos a intentar explicar el concepto de una manera más práctica con un ejemplo.

Model Relacional - Relación 1:N

Model Relacional – Relación 1:N

En este caso tenemos un relación 1:N entre “clients” y “vehicles”. Un cliente puede tener uno o varios vehículos y un vehículo puede ser de 0 o 1 clientes (supón que estamos en un taller y el coche no es de ningún cliente si no que procede de la chatarra).

La clave ajena será “clientCod” en la tabla “vehicles” y hace referencia al campo “clientCod” de la tabla “clients” que, por otro lado, es clave primaria en esa tabla. Estos dos campos, la clave ajena y la clave primaria, nos sirven para establecer la relación entre las dos tablas y debemos de tener en cuenta que en la tabla “vehicles” no va a haber ningún valor de “clientCod” que no esté en la tabla de clientes. Es lo que se llama integridad referencial.

Pero, ¿qué pasa si borramos o actualizamos los datos de un cliente de la tabla “clients”? ¿cómo afecta esto a la tabla “vehicles”?. Tenemos varias opciones y MySQL nos da 5 posibilidades:

  • RESTRICT : Es la opción por defecto y no permitirá la actualización del “clientCod” de un cliente o el borrado de ese cliente si existe un vehículo que pertenezca a ese cliente.
  • NO ACTION: Es equivalente a RESTRICT y se mantiene por respeto al estándar SQL.
  • CASCADE : Si borro un cliente se borrarán los vehículos de ese cliente y si actualizo el “clientCod” de un cliente se propagará esta actualización al “clientCod” de los vehículos de ese cliente.
  • SET NULL: Si borro un cliente  se actualizará el “clientCod” de los vehículos de ese cliente y este tomará un valor de NULL (debe ser posible que ese campo tome valores nulos) y si lo actualizo sucederá lo mismo, se pondrá un valor NULL.
  • SET DEFAULT: Pondría un valor por defecto en los campos “clientCod” de la tabla “vehicles” al actualizar o borrar clientes. No es soportado por los tipos de tablas InnoDB y NDB.

Para verlo mejor vamos ver RESTRICT, NO ACTION , CASCADE y SET NULL con un ejemplo concreto.

EL SQL para crear las tablas sería el siguiente:

Vemos que en la líneas donde está ON DELETE / ON UPDATE podemos elegir una de las opciones con las que vamos a trabajar.

Las consultas con las que trabajar para la demostración serán las siguientes:

El contenido inicial para las tablas va a ser el siguiente en todos los casos:

Contenido de la tabla clientes

Contenido de la tabla clientes

Contenido de la tabla vehículos

Contenido de la tabla vehículos

Si intento las operaciones y he usado en la creación de la tabla ON DELETE RESTRICT y ON UPDATE RESTRICT (son las opciones por defecto) o ON DELETE NO ACTION y ON UPDATE NO ACTION  obtendré en ambos casos (delete y update) el siguiente mensaje de error:

Si intento las operaciones y he usado en la creación de la tabla ON DELETE CASCADE y ON UPDATE CASCADE se borrarán todos los vehículos del cliente “00007” y en aquellos dónde el código del cliente sea “00008” se cambiará por “11111”. Podemos ver como quedan las tablas:

Tabla clientes con operaciones en cascada

Tabla clientes con operaciones CASCADE

Tabla vehículos con operaciones en cascada

Tabla vehículos con operaciones CASCADE

Si intento las operaciones y he usado en la creación de la tabla ON DELETE SET NULL y ON UPDATE SET NULL la tabla clientes quedará igual que en el caso anterior pero en la tabla vehículos el campo “codClient” será NULL para aquellos coche que eran del cliente “00007” o “00008”. Podemos ver como quedaría en la siguiente imagen:

Tabla vehículos con la opción SET NULL

Tabla vehículos con la opción SET NULL

Elegir una u otra opción es una decisión de diseño que debe de ponderarse antes de la creación de la base de datos.

En el próximo tutorial hablaremos de otro concepto básico pero que a veces resulta difícil para los estudiantes: “los diferentes tipos de Joins”