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.

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

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.

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

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.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

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.

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

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.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

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.

 

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

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.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

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”

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

GitHub en clase

githublogoMis alumnos van a tener que tener, DE MANERA OBLIGATORIA, su cuenta en GitHub.

No es algo nuevo, en muchos sitios ya se utiliza GitHub como herramienta docente.

No es por capricho, GitHub ya se ha convertido en un estándar y en muchos trabajos para programadores se pide su perfil en dicha plataforma.

No es porque sí, durante los últimos años muchos de nuestros alumnos han encontrado trabajo y, pese a ser un Ciclo de Administración de Sistemas, lo trabajos se relacionaban más con la programación y la web. El hecho de que tengan un portfolio público de código hecho por ellos creo puede aumentar su motivación para hacer las cosas bien y aumentar su posibilidades de encontrar un futuro trabajo.

La usaremos al menos para las asignaturas de Lenguajes de Marcas e Implantación de Aplicaciones Web.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Usando CodeAcademy

Usando CodeAcademy

http://www.codeacademy.com

Cada día que pasa soy más firme defensor del cambio de roles del profesor en la clase del siglo XXI. Es difícil, cuesta cambiar mentalidades, incluyendo las del propio alumnado, pero poco a poco todos debemos darnos cuenta de que el aula tiene límites físicos y de conocimiento y que más allá de esas 4 paredes hay vida y aprendizaje. Debemos dar al alumnado el empujón para que transite esos caminos por si mismo.

En el campo en el que yo trabajo, la Informática, la programación y las bases de datos,  la cantidad de sitios con materiales y recursos de calidad es enorme.Sólo tenía que indicarles un sitio para empezar a aprender por ellos mismos. Opté por uno de los que más me gusta,  CodeAcademy.com, un sitio para aprender cosas básicas sobre programación.

Quería que los alumnos lo usaran y que aprendieran por ellos mismos cosas que en clase iba a ver con rapidez. Los problemas y errores que pudieran aparecer debían de solucionarlos por ellos mismos. Yo no iba a explicar nada al respecto.

El único requisito es que debían de acabar el curso encargado antes de una fecha.

Y, ¿cómo ha ido la experiencia?. Pues como toda ha tenido aspectos positivios y aspectos negativos.

En el lado positivo diría:

  • Los alumnos han aprendido por ellos mismos. No he intervenido para nada.
  • Casi siempre han acabado con mucho tiempo de antelación. Como los ejercicios se corregían sólo y recibían medallas por cada lección parece que se han ido enganchando.
  • Han colaborado entre ellos para salir adelante con los errores que existen tanto en la traducción de los ejercicios como en la traducción las soluciones.
  • Los alumnos han entendido mejor alguna conceptos que posteriormente he ido explicando en clase.

En el lado negativo:

  • Son cursos básicos, me gustaría que entrara con más profundidad en algunos conceptos. 
  • Los contenidos no siempre están relacionados con el currículo, aunque eso, básicamente, me da bastante igual.
  • La traducción española, tanto de los enunciado como de las retroalimentaciones y correcciones, es bastante mala. De hecho aunque me decidí a usar la página cuando vi que había traducción española, la mayoría de los alumnos han optado por la opción inglesa (ya me he ofrecido a mejorarla pero no he tenido respuesta)

Seguiremos probando el trimestre que viene.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS