Cursos Recomendados – Android

Desde la Universidad de Maryland nos ofrecen dos grandes cursos para iniciarnos en el desarrollo de Android

https://es.coursera.org/learn/android-programming

https://es.coursera.org/learn/android-programming-2

Y los repositorios de los mismos pueden ser accedidos desde:

https://github.com/aporter

(Hace ya mucho tiempo) Construyendo redes y abriendo la Educación

Hace ya algunos años hablando de cómo construimos redes para abrir la educación de adultos. Me mandaron a mí pero yo sólo era un pieza más de un gran equipo.

Y lo plasmamos en un artículo de OpenEducation para la UE:
http://blogs.ec.europa.eu/openeducation2030/files/2013/04/Castillo-OE2030-LLL.pdf

De jQuery a javaScript: Tabla de traducción

Ahora mismo soy profesor en el IES Triana donde enseño “Lenguaje de Marcas” y “Gestión de Bases de Datos”. En la primera de las asignaturas básicamente hacemos un introducción al desarrollo web en cliente. Apenas son 128 horas en un año año y debemos cubrir muchas cosas así que centro mis zopciones en HTML,CSS, jQuery y JavaScript

El caso es que aunque jQuery está construido con javaScript yo explico y enseño a usar jQuery antes que javaScript. ¿Por qué?, básicamente por las siguientes razones:

  • Se pueden hacer muchas cosas utilizando jQuery y sin saber programar.
  • Los selectores jQuery y los selectores CSS son casi iguales y explico jQuery justo tras explicar CSS.
  • La síntaxis es más sencilla y corta lo cuál facilita mucho la cosa ya que los alumnos no tienen conocimientos previos de programación. Nadie entiende cómo un título de grado  superior en Informática, aunque sea de administración de sistemas, no tiene una asignatura específica de programación.

Ofrezco a los alumnos una plantilla con el jQuery ya instalado (de manera local) y ellos sólo tienen que, partiendo un un HTML y CSS dado añadir el código jQuery necesario para la funcionalidad solicitada aquí:

Tras acabar con jQuery realizando muchos ejercicios y efectos que puedes ver aquí, empiezo a profundizar en javaScript mostrando las equivalencias (aproximadas, tampoco puedo entrar en mucho detalles)  entre el jQuery que hemos visto y cómo sería el equivalente en javaScript. Si bien es cierto que antes dejo muy claro que los objetos jQuery lo que hacen es encapsular típicos objectos javaScript pero dotándolos de muchas más propiedades y funcionalidades. De momento ahí va una propuesta de tabla de traducción:

jQuery – JavaScript
$(“#someid”)
document.getElementById(“someid)
$(“.someclass”)
document.getElementByClassName(“someClass”)
$(” any selector”)
document.querySelectorAll(“any selector”)
$(“any selector”).eq(0)
document.querySelector(“any selector”)
$(“#someid”).val()
document.getElementById(“someid”).value
$(“#someid”).val(somevalue)
document.getElementById(“someid”).value= somevalue;
$(“#someid”).html()
document.getElementById(“someid”).innerHTML
$(“#someid”).html(“some text”)
document.getElementById(“someid”).innerHTML = “some text”
$(“#someid”).css()
document.getElementById(“someid”).style
$(“#someid”).css(“color”,”red”)
document.getElementById(“someid”).style.color=red
$(“#someid”).addClass(“className”)
document.getElementById(“someid”).classList.add(“className”)
$(“#someid”).removeClass(“className”)
document.getElementById(“someid”).classList.remove(“className”)
$(“#someid”).next()
document.getElementById(“someid”).nextElementSibling
$(“#someid”).append(“Some text”)
document.getElementById(“someid”).innerHTML= document.getElementById(“someid”).innerHTML+”Some Text”
$(“#someid”).prepend(“Some text”)
document.getElementById(“someid”).innerHTML= “Some Text” +document.getElementById(“someid”).innerHTML
$(“#someid”).click(function (event) {
//Things to do});function myFunction(event) {//Things to do}<xxx id=”someid” onclick=”myFunction(event)” >$(“#someid”).on(“eventName”, function(event) {

//Things to do

});

<xxx id=”someid” onXXXX=”myFunction(event)” >

No están todas las equivalencias pero es más que suficiente para empezar.

Para el tema de los eventos podemos ver aquí una lista de los eventos jQuery y aquí una lista de los posible eventos en javaScript

Fijaros que si los selectores nos devuelven varios elementos  (no sólo uno como estamos haciendo con $(“#someid”) tendremos que recorrer dicho vector. Si tomamos como ejemplo el caso de CSS sería algo así:

Para poder entender todo esto también es muy importante repasar los selectores. Eso lo podéis hacer aquí.

Un saludo y hasta el próximo post.

Flujo de eventos focus – input – change

En este post anterior vimos como modificar la apariencia de una imagen usando la propiedad transform de CSS y unos input de tipo range.

Tras el post me han preguntado cómo se podía hacer para que la imagen se modificara mientras movemos el slider y no al final, cuando soltábamos el botón.

Existen varias formas pero con jQuery podemos hacerlo de manera muy sencilla, lo importante es que debemos distinguir entre tres eventos:

  • El evento focus que es el que sucede cuando seleccionamos el control del formulario. Al hacer el primer click en él.
  • El evento input que es el que sucede cuando estamos moviendo el campo de tipo range o cuando estamos insertando valor en cualquier otro input
  • El evento change que es cuando soltamos el slider en un campo range o cuando validamos el valor del campo.

De hecho el flujo normal de eventos cuando seleccionamos un input y lo deslizamos es el siguiente.

Focus - Input - Change

Podemos ver ambos eventos funcionando en el siguiente CodePen:

See the Pen Focus – Input – Change by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Puedes descargar el ejemplo completo aquí.

Hasta el próximo post. Os recuerdo que estoy abierto a propuestas para abrir nuevas series de tutoriales y/o ejemplos.

Píldoras jQuery VIII & CSS3 Transform : Modificando una imagen con campos “range”

En este post vamos a mezclar el uso de jQuery con el uso de una de las propiedades CSS3 más esperadas que nos permite modificar cualquier elemento casi de cualquier manera: la propiedad transform.

El uso experto de esta propiedad transform requiere de la lectura pausada de la documentación, ya sea en MDN o en W3C School y de conocimientos de geometría, así que para empezar únicamente nos vamos a centrar en 4 tipos de transformaciones simples:

  • La rotación 2D que nos permite girar cualquier elemento HTML de manera plana. Tiene una síntaxis muy sencilla: transform: rotate(Xdeg) donde X es el número de grados que queremos girar. Este número podrá ser positivo ( en el sentido de las agujas del reloj) o negativo ( en sentido contrario)
  • El escalado para modificar el tamaño de los objetos HTML. Su síntaxis es similar: transform(x,y) donde x es el factor de escalado en el eje X e Y es el factor de escalado en el eje Y. Si no pongo Y se supone que escalaré de igual manera en ambos ejes.
  • El sesgo en el eje X (skewX) que modifica la perspectiva (en el ejeX) del objeto a transformar en los ángulos especificados. La forma de expresarlo es la siguiente: transform: skewX(Xdeg) donde X es el número de grados del ángulo del sesgo.
  • El sesgo en el eje Y (skewX) que modifica la perspectiva (en el ejeY)  del objeto a transformar en los ángulos especificados. La forma de expresarlo es la siguiente: transform: skewY(Xdeg) donde X es el número de grados del ángulo del sesgo

Para ilustrar el uso de estas cuatro, ya os digo que hay muchas más posibilidades, vamos a ver un ejemplo hecho con jQuery donde mediante el uso de input de tipo range (sliders) vamos a poder realizar estas cuatro transformaciones.

See the Pen Transforming an Image using CSS3 and jQuery by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Puedes descargar el código completo aquí.

Y de momento esto es todo. Nos vemos en el siguiente post.

 

CSS3 – La propiedad “animation”

CSS3 es una especificación enorme que contiene multitud de nuevas propiedades y características. Sin embargo, una de las más celebradas son aquellas que nos permiten hacer animaciones y efectos usando únicamente CSS3. Aquí tenemos la lista de la propiedades que se pueden animar.

Para poner un ejemplo nos vamos a centrar en la propiedad “animation” y el código de la animación que va a ir detrás de la regla @keyframe.

La propiedad animation es una manera corta de fijar todas las subpropiedades que puede tener una animación. Éstas subpropiedades son:

  • animation-name: Especifica la lista de animaciones que se van a aplicar al elemento. Las animaciones son reglas @keyframes que debemos definir
  • animation-duration: Para especificar la duración en segundo de un ciclo de la animación.
  • animation-timing-function: Para especificar de qué forma van a evolucionar los valores que se van a animar.De manera lineal, más rápido al principio o al final etc..
  • animation-delay: Retardo para el comienso de la animación especificado en segundos.
  • animation-iteration-count: El número de veces que queremos que se repita la animación. Puede ser un número y muchas veces infinite si queremos que la animación se repita siempre.
  • animation-direction: Para especificar si la animación se debe reproducir de manera inversa, normal o en ciclos alternos (va y viene desde el principio hasta el final)
  • animation-fill-mode: Para definir como se deben aplicar los estilos al elementos seleccionado antes y después de la ejecución.
  • animation-play-state: Para definir si la animación está en pausa o funcionando. Por defecto, como es normal pensar, estará funcionando.

No siempre tenemos que usar todas las subpropiedades, así por ejemplo podemos especificar lo siguiente:

En cuanto a la regla @keyframe nos va a servir para controlar los pasos medios de una animación. Puede tener dos formas.

  • La primera donde tendremos un from y un to estableciendo los valores css iniciales y finales para las animaciones
  • La segundo donde podremos establecer mediante porcentajes tanto puntos intermedios como queramos

Aquí podemos ver un ejemplo de cada caso

 

Ilustraremos todo esto con un ejemplo simple, un pulso.

See the Pen CSS3 Animation Pulse Example by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Para más información podéis visitar la referencia en MDN y la página de W3C School.

El ejemplo completo se puede descargar desde mi repositorio.

 

 

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. En 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.

 

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.