feed twitter facebook LinkedIn facebook

MongoDB » Hola Mundo con MongoDB

marzo 23, 2013 por Víctor Cuervo 1 Comentario Imprimir Imprimir

Para empezar a utilizar una base de datos NOSQL como es MongoDB no hay mejor manera de ver como hacer un Hola Mundo con MongoDB. En el caso de las bases de datos el Hola Mundo es algo más complejo que los programas. Es por ello que nuestro Hola Mundo con MongoDB lo que hace es insertar un saludo "Hola Mundo" en un idioma y recuperarlo por consola.

Lo primero que tendremos que hacer para empezar con nuestro Hola Mundo con MongoDB es arrancar la consola de comandos de MongoDB.

./mongo

Una vez conectados a la consola vamos a indicar qué base de datos queremos utilizar. No hace falta que la base de datos exista, así que la podemos poner un nombre. Por ejemplo "mensajes". Así pasamos a utilizar nuestra base de datos MongoDB "mensajes" de la siguiente forma:

use mensajes

Dentro de las bases de datos MongoDB existe otro concepto que son las colecciones. Algo parecido a las tablas en un modelo de datos entidad-relación. Así que insertaremos un mensaje dentro de la colección que queramos crear (tampoco tiene por qué existir la colección).

Para insertar un elemento utilizamos la sentencia insert de MongoDB:

db.holamundo.insert({idioma:"es_ES",mensaje:"Hola Mundo"});

Es importante saber que MongoDB utiliza JSON como elementos de mensaje almacenados. No hay tablas, no hay campos, no hay registros,.. solo mensajes JSON.

Así que nuestro objeto JSON insertado ha sido el siguiente:

{idioma:"es_ES",mensaje:"Hola Mundo"}

Ahora solo nos queda mostrar el contenido de la colección. La cual contiene nuestro Hola Mundo con MongoDB. Las consultas se ejecutan mediante la sentencia .find(). De esta manera el código es el siguiente:

db.holamundo.find()

La respuesta de MongoDB será la siguiente:

{ "_id" : ObjectId("514db54174ad901293bd844a"), "idioma" : "es_ES", "mensaje" : "Hola Mundo" }

De esta forma tenemos nuestros primeros pasos y el Hola Mundo con MongoDB. ¿Cómo mostrarias el mensaje Hola Mundo en inglés? :-D

XML » Cómo definir un elemento en XML con DTD ELEMENT

marzo 20, 2013 por xhrist14n 1 Comentario Imprimir Imprimir

Los DTD son los documentos que nos sirven para definir documentos XML. Los DTD son básicos para la formulación de documentos XML por tanto usar los DTD es necesario para tener documentos XML bien formados. Por lo tanto nos ayudarán a la definición de los elementos de un documento XML mediante DTD ELEMENT.

Dentro del DTD estableceremos qué elementos puede contener nuestro documento XML. Imaginen una estructura XML que pueda albergar mensajes de texto, es decir, una estructura como la siguiente:

  1. <texto>
  2. <mensaje></mensaje>
  3. </texto>

Tanto texto como mensaje son dos elementos XML que deberemos de definir dentro del DTD del documento XML con DTD ELEMENT.

Lo primero que tenemos que hacer al iniciar el DTD es la definición del XML y su versión además de su codificación.

  1.  
  2. <?xml version="1.0" encoding="UTF-8"?>
  3.  

Acto seguido pasaremos a definir los elementos texto y mensaje con DTD ELEMENT. Para definir elementos utilizamos el tag DTD ELEMENT mediante la siguiente estructura:

  1. <!ELEMENT nombreelemento tipo>
  2. <!ELEMENT nombreelemento (contenido)>

El primer de DTD ELEMENT caso lo utilizaremos para codificar elementos sencillos, es decir, aquellos que no aniden a otros elementos. En este caso indicaremos el tipo de contenido que puede albergar mediante un tipo.

Esto nos servirá para definir nuestro elemento mensaje, al cual le daremos un tipo PCDATA.

  1. <!ELEMENT mensaje (#PCDATA)>

En el segundo caso del DTD ELEMENT nos sirve para definir elementos que contengan a otros elementos. En ese caso el contenido será el nombre de los elementos que contengan, separados por coma y con modificadores que indiquen la cantidad de veces que pueden aparecer.

Esta segunda estructura DTD ELEMENT nos servirá para definir el texto, el cual contiene el mensaje.

  1. <!ELEMENT texto (mensaje+)>

En el caso de texto pusimos (mensaje+) para indicar que mensaje es un subelemento del elemento texto. El más (+) significa que el elemento mensaje debe aparecer al menos una vez dentro del elemento texto, pero que puede aparecer N veces.

Otros modificadores de DTD ELEMENT que indican el número de ocurrencias son:

  • No poner nada, el elemento aparecerá una sola vez.
  • ?, el elemento puede aparecer o no.
  • +, el elemento aparece 1 o N veces.
  • *, el elemento puede aparecer 0 o N veces

Finalmente nuestro DTD final sería este:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!ELEMENT texto (mensaje+)>
  3. <!ELEMENT mensaje (#PCDATA)>

Para hacer uso del DTD desde nuestros documentos XML lo haríamos de la siguiente forma:

  1. <?xml version="1.0"?>
  2. <!DOCTYPE texto SYSTEM "texto.dtd">
  3. <texto>
  4. <mensaje>Hola mundo</mensaje>
  5. </texto>

Patrones de Diseño » Patrón Abstract Factory

marzo 19, 2013 por Feffo Sin Comentarios Imprimir Imprimir

Hoy les voy a presentar el Patrón Abstract Factory junto con un ejemplo simple hecho en Java. Esto se enmarca dentro de la serie de Patrones de Diseño sobre la que vamos air hablando.

Abstract Factory

El patrón Abstract Factory nos permite crear, mediante una interfaz, conjuntos o familias de objetos (denominados productos) que dependen mutuamuente y todo esto sin especificar cual es el objeto concreto.

¿Que usos tiene el patrón Abstract Factory?

Este patrón se puede aplicar cuando:

  • Un sistema debe ser independiente de como sus objetos son creados.
  • Un sistema debe ser 'configurado' con una cierta familia de productos.
  • Se necesita reforzar la noción de dependencia mutua entre ciertos objetos.

Estructura del Patrón Abstract Factory

Patrón Abstract Factory

El asterisco (*) representa que la clase/operación es abstracta.

Elementos del Patrón Abstract Factory

    FabricaAbstracta*: Define un conjunto de métodos (interfaz) para la creación de productos abstractos.
  • FabricaConcreta1/2: Implementa la interfaz de la FabricaAbstracta para la creación de los distintos productos concretos.
  • ProductoAbstractoA*/B*: Define la interfaz de los objetos de tipo ProductoA/B.
  • ProductoConcretoA1/A2/B1/B2: Implementan su respectiva interfaz representando un producto concreto.

Pros/Contras del Patrón Abstract Factory

  • + Brinda flexibilidad al aislar a las clases concretas.
  • + Facilita cambiar las familias de productos.
  • - Para agregar nuevos productos se deben modificar tanto las fabricas abstractas como las concretas.

Ejemplo del Patrón Abstract Factory

Teniendo en cuenta la siguiente jerarquía de clases, la cual trata de representar muy por arriba dos familias de productos (DVD y BluRay) cada uno con un par de variantes (simple y doble capa) para que permiten mostrar diferentes aspectos a tener en cuenta a la hora de usar este patrón.

Ejemplo del Patrón Abstract Factory

Vemos como sería el producto abstracto:

  1. public abstract class Disco implements Prototipo {
  2. @Override
  3. public abstract Prototipo clone();
  4.  
  5. public abstract String getCapacidad();
  6.  
  7. public abstract String getNombre();
  8.  
  9. public abstract String getPrecio();
  10.  
  11. @Override
  12. public String toString() {
  13. return getNombre() + " (" + getCapacidad() + ")";
  14. }
  15. }

El producto DVD extendemos del Disco

  1. public abstract class DVD extends Disco {
  2. ...
  3. }

Y el producto concreto del DVD extenderá de la anterior clase:

  1. public class DVD_CapaSimple extends DVD {
  2.  
  3. @Override
  4. public Prototipo clone() {
  5. return new DVD_CapaSimple();
  6. }
  7.  
  8. @Override
  9. public String getCapacidad() {
  10. return "4.7GB";
  11. }
  12.  
  13. @Override
  14. public String getNombre() {
  15. return "DVD Capa Simple";
  16. }
  17.  
  18. @Override
  19. public String getPrecio() {
  20. return "5.00$";
  21. }
  22.  
  23. }

Vamos a construir un AbstractFactory que nos permita crear discos de DVD o BluRay de simple y doble capa usando el siguiente diseño:

Ejemplo de Patrón Abstract Factory

La factoría abstracta la definiríamos mediante un interface:

  1. public interface FabricaDiscos {
  2.  
  3. public BluRay crearBluRay();
  4. public DVD crearDVD();
  5. }

Y sobre ese interface implementamos una de las fábricas concretas, en este caso la de FabricaDiscos_CapaSimple:

  1. public class FabricaDiscos_CapaSimple implements FabricaDiscos {
  2.  
  3. @Override
  4. public BluRay crearBluRay() {
  5. return new BluRay_CapaSimple();
  6. }
  7.  
  8. @Override
  9. public DVD crearDVD() {
  10. return new DVD_CapaSimple();
  11. }
  12.  
  13. }

Veamos como quedaría el código fuente en Java para utilizar el patrón Abstract Factory:

  1. FabricaDiscos fabrica;
  2. DVD dvd;
  3. BluRay bluray;
  4.  
  5. fabrica = new FabricaDiscos_CapaSimple();
  6. dvd = fabrica.crearDVD();
  7. bluray = fabrica.crearBluRay();
  8.  
  9. System.out.println(dvd);
  10. System.out.println(bluray);
  11.  
  12. fabrica = new FabricaDiscos_CapaDoble();
  13. dvd = fabrica.crearDVD();
  14. bluray = fabrica.crearBluRay();
  15.  
  16. System.out.println(dvd);
  17. System.out.println(bluray);

En el código vemos que sobre la fábrica podemos crear objetos de diferentes tipos y que podríamos ir creciendo en productos atendiendo a nuestras necesidades.

  1. fabrica = new FabricaDiscos_CapaSimple();
  2. dvd = fabrica.crearDVD();
  3. bluray = fabrica.crearBluRay();

Espero que hayáis podido apreciar la flexibilidad que nos brinda el patrón Abstract Factory.

Patrones de Diseño » Patrones Creacionales

marzo 18, 2013 por Feffo Sin Comentarios Imprimir Imprimir

A lo largo de los próximos días vamos a revisar en Línea de Código diferentes Patrones de Diseño. Algo muy importante y que todo desarrollador debería conocer. En el primer ciclo vamos a revisar los Patrones Creacionales.

¿Qué es un Patrón de Diseño?

Un patrón de diseño es un conjunto de objetos y clases organizados de cierta forma que ayudan a resolver un problema recurrente en el diseño de un software de una forma limpia y reusable.

Según el libro Design Patterns: Elements of Reusable Object-Oriented Software, a los patrones se los puede clasificar en tres categorías:

  • Patrones Creacionales: Procuran independizar al sistema de como sus objetos son creados y/o representados.
  • Patrones Estructurales: Se refieren a como las clases y los objetos son organizados para conformar estructuras más complejas.
  • Patrones de Comportamiento: Se centran en los algoritmos y en la asignación de responsabilidades entre los objetos.

Patrones Creacionales

En este caso, nos vamos a concentrar en los patrones creacionales, estos patrones buscan en cierta forma "despreocupar" al sistema de como sus objetos son creados o compuestos.

Los patrones que iremos viendo y desarrollando las próximas semanas son:

  • Abstract Factory, permite trabajar con objetos de diferentes familias de manera que no se mezclen entre sí. De esa manera se consigue la el tipo de familia que se esté utilizando sea transparente.
  • Builder, abstrae el proceso de creación de los objetos complejos, centralizandolo en pun punto.
  • Factory Method, centraliza en una clase constructora la creación de objetos de un tipo determinado. Ocultando al invocante la necesidad de indicar un tipo u otro.
  • Prototype, crea un objeto a partir de la clonación de un objeto ya existente.
  • Singleton, garantiza que solo exista una instancia de un objeto y que la forma de acceder a dicha instancia sea general.

Java » Calcular el volumen de una pirámide en Java

marzo 14, 2013 por ARIEL 3 Comentarios Imprimir Imprimir

Para calcular el volumen de una pirámide en Java vamos a crear tres archivos:

  1. Una interface,que contenga el método para obtener el volumen de una pirámide en Java.
  2. Una clase que implemente la interface
  3. Una clase principal para visualizar el resultado

Dentro de la interface vamos a definir un método para el cálculo del volumen en Java.

  1.  
  2. interface Servicios{
  3. public static final int M=3; // se pude definir una constante
  4. public abstract double volumen(); //método para obtener el volumen de la pirámide
  5. }
  6.  

La fórmula del volumen de una pirámide es la siguiente:

volumen= (ab*h)/3;

La clase que implementa la interface requiere dos atributos: la base y la altura.

  1. class Piramide implements Servicios{
  2. private double base;
  3. private double altura;
  4. ...
  5. ...
  6. }

Ahora definimos dos constructores, uno vacío y otro con parámetros.

  1.  
  2. public Piramide(){}
  3.  
  4. public Piramide(double b,double h){
  5. this.base=b;
  6. this.altura=h;
  7. }
  8.  

Agregamos el método "volumen()".

  1.  
  2. @Override
  3. public double volumen(){
  4. return (base*altura)/M;
  5. }
  6.  

Finalmente la clase principal donde se visualiza el resultado de calcular el volumen de una pirámide en Java.

  1.  
  2. public class VolumenPiramide{
  3. //definimos un atributo de tipo "Servicios"
  4. Servicios servicio;
  5.  
  6. public Ejemplos(){}
  7.  
  8. public Ejemplos(Servicios serv){
  9. this.servicio=serv;
  10. }
  11. // con este método visualizamos el resultado
  12. public void activa(){
  13. System.out.println("volumen obtenido: "+servicio.volumen());
  14. }
  15.  
  16. public static void main(String[] args) {
  17. Servicios piramide=new Piramide(10,15);// base:10, altura:15
  18. new Ejemplos(piramide).activa();
  19. }
  20. }
  21.  

XML » Documento XML bien formado y documento XML mal formado

marzo 13, 2013 por xhrist14n Sin Comentarios Imprimir Imprimir

Antes de ver qué es un documento XML bien formado y un documento XML mal formado primeramente debemos saber cómo es un documento XML.

Para poder tener en claro cómo funciona esto, el documento XML es lenguaje descriptivo en algunos casos de información o bien de elementos con algún uso específico.

Documento XML bien formado

Lo básico que debemos hacer para que tengamos un documento XML bien formado es lo siguiente: Al hacer la escritura del documento tenemos que incluir un DTD en su declaración inicial caso contrario debemos hacer uso de una declaración de documento StandAlone (esto significa que no haremos uso de un DTD).

  1.  
  2. <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
  3.  

O, en el caso que queramos que el documento XML bien formado tenga DTD:

  1.  
  2. <?xml version="1.0" encoding="UTF-8"?>
  3. <!DOCTYPE note SYSTEM "Nodes.dtd">
  4.  

Los valores de los atributos de un documento XML bien formado deben estar contenidos entre comillas dobles de inicio y fin de valor de atributo.

  1.  
  2. <habitacion id=”comedor”>
  3. </habitacion>
  4.  

Los elementos vacíos de un documento XML bien formado deben terminar con /> o en todo caso con el elemento de cierre </elemento>.

  1.  
  2. <habitacion id=”comedor”>
  3. <puerta a=”balcón” />
  4. </habitacion>
  5.  

Los elementos dentro de sí deben anidar propiedades u elementos.

  1.  
  2. <habitacion id=”comedor”>
  3. <mueble>aparador</mueble>
  4. <mueble>sofá</mueble>
  5. <puerta a=”balcón” />
  6. </habitacion>
  7.  

En todo fichero bien formado sin DTD está permitido hacerse el uso de atributos para sus
elementos.

Todo documento XML bien formado solo tiene una única raíz de documento. Finalmente un ejemplo completo seria:

  1.  
  2. <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
  3. <micasa>
  4. <habitacion id=”comedor”>
  5. <mueble>aparador</mueble>
  6. <mueble>sofá</mueble>
  7. <puerta a=”balcón” />
  8. </habitacion>
  9. </micasa>
  10.  

Documento XML mal formado

Para conseguir un documento XML mal formado bastara con no tener en cuenta ninguna de las anteriores reglas y obtendremos algo como esto:

  1.  
  2. <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
  3. <micasa>
  4. <habitacion id=comedor>
  5. <mueble>aparador
  6. <mueble>sofá</mueble>
  7. <puerta a=”balcón” >
  8. </habitacion>
  9.  

Java » Calcular el volumen de un cilindro en Java

marzo 9, 2013 por ARIEL Sin Comentarios Imprimir Imprimir

Para calcular el volumen de un cilindro en Java emplearemos la función Math.PI de la clase java.lang.Math en la siguiente fórmula:

volumen= Math.PI*(r*r)*h

Donde r es el radio del cilindro y h su altura. Vamos a crear un método que obtenga el volumen de un cilindro en Java y le llamaremos "volumen()", y otro que muestre el resultado que llamaremos "ver()" dentro de una interface.

  1. interface Servicios{
  2. public abstract double volumen();
  3. public abstract void ver();
  4. }

En las interfaces todos los métodos son abstractas y se puede omitir las palabras public y abstract.

Necesitamos ahora una clase que implemente esa interface.

  1. class Cilindro{
  2. public Cilindro(){}
  3. }

Es necesario agregarle dos miembros (radio y altura) y definir un constructor con parámetros.

  1. class Cilindro implements Servicios{
  2. private double radio;
  3. private double altura;
  4.  
  5. public Cilindro(){}
  6.  
  7. public Cilindro(double _radio,double _altura){
  8. this.radio=_radio;
  9. this.altura=_altura;
  10. }
  11.  
  12. }

Una vez hecho esto le agregamos los métodos de la interface:

  1.  
  2. @Override
  3. public void ver(){
  4. System.out.println(toString());
  5. }
  6.  
  7. public String toString(){
  8. return String.format("volumen obtenido : %f",volumen());
  9. }
  10.  
  11. @Override
  12. public double volumen(){
  13. return Math.PI*(radio*radio)*altura;
  14. }

Es de notarse que el método "toString()" es propio de la clase Cilindro.

Para mostrar el resultado tenemos la clase principal "VolumenCilindro".

  1. public class VolumenCilindro{
  2. //Interface nombreInstancia= new ClaseImpl();
  3. Servicios cilindro=new Cilindro(2,6);
  4. cilindro.ver();
  5. }

Ya tenemos nuestro programa que calcula el volumen de un cilindro en Java.

XML » Hola Mundo XML

marzo 8, 2013 por xhrist14n Sin Comentarios Imprimir Imprimir

XML es un lenguaje descriptivo que se puede utilizar para describir cualquier cosa. Con el ejemplo Hola Mundo XML vamos a ver como podemos construir nuestro primer documento en XML paso a paso.

De esta maner construiremos un documento Hola Mundo XML en el que podamos escribir un texto XML y ponerle como atributo u/o propiedad el texto “Hola mundo” fácilmente.

Para construir el ejemplo Hola Mundo XMLL lo que necesitamos es primeramente definir el documento XML como standalone pues no usaremos un DTD.

  1. <?xml version="1.0" encoding="UTF-8" standalone="yes"?>

Seguidamente tenemos que generar una etiqueta de texto como a continuación se puede ver:

  1. <texto></texto>

En este elemento de texto tenemos la posibilidad de poder poner un atributo mensaje en el cual podemos poner nuestro texto. En este caso el contenido del elemento quedaría vacío.

  1. <texto mensaje=”hola mundo”></texto>

Si bien, la forma más normal de realizar un Hola Mundo XML sería la de añadir contenido dentro del elemento texto o la de crear un elemento dentro del elemento texto. En este caso el código fuente quedaria de la siguiente forma:

  1.  
  2. <texto>
  3. <mensaje>
  4. Hola Mundo
  5. </mensaje>
  6. </texto>
  7.  

Nuestro ejemplo Hola Mundo XML finalmente quedaría asi:

  1.  
  2. <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
  3. <texto>
  4. <mensaje>
  5. Hola Mundo
  6. </mensaje>
  7. </texto>
  8.  

XML » Especificar el idioma de un documento con XML lang

marzo 6, 2013 por xhrist14n Sin Comentarios Imprimir Imprimir

XML lang

El uso de un idioma en específico en el XML nos permite saber cómo debe ser analizado el elemento en cuestión o bien poder tomar la definición del mismo bajo solo la aceptación de un idioma específico. Las formas en que podemos lograr esto en un documento XML es en base el atributo XML lang dentro de los elementos de nuestro documento XML.

Es muy buen práctica el definir el idioma mediante XML lang ya que permitirá a las herramientas que trabajen con el documento XML qué acciones deben de tomar respecto al documento relativas a visualización, accesibilidad,...

El valor del idioma del atributo XML lang es un código ISO 639.

Para aplicar el elemento XML lang sobre un objeto en concreto:

  1.  
  2. <persona xml:lang="es">
  3. </persona>
  4.  

A partir de ese momento todos los elementos que estén por debajo del elemento persona recibirán la propiedad XML lang definida en el padre. Si bien podrán modificar su contenido en sus propios elementos.

Del XML lang al langcode

Uno de los inconvenientes que tiene el XML lang es que no podemos definir diferentes idiomas para un mismo elemento. Imaginemos que estamos definiendo mensajes de usuario mediante un documento XML. En este caso el mensaje puede variar dependiendo del idioma.

En estos casos podemos considerar utilizar el elemento langcode. Dicho atributo irá dentro de cada estructura de elementos a las que se quiera aplicar.

  1.  
  2. <myRes>
  3. <messages>
  4. <msg id="1">
  5. <langcode>en</langcode>
  6. <text>Cannot find file.</text>
  7. </msg>
  8. <msg id="2">
  9. <langcode>fr</langcode>
  10. <text>Fichier non trouvé.</text>
  11. </msg>
  12. </messages>
  13. </myRes>
  14.  

Conclusiones del XML lang

Utilizar XML lang nos es útil para cada uno de los elementos o tags de nuestro documento de XML, en cambio el uso de la etiqueta langcode nos permite tener en nuestro documento XML varios lenguajes soportados por nuestro documento.

Puedes encontrar más información sobre el tratamiento de lenguajes en XML dentro de la W3C.

jQuery » Lista circular con jQuery appendTo

Hoy vamos a hacer otro ejemplo sencillísimo con listas en jQuery. Esta vez practicaremos la función de utilidad jQuery appendTo. Si seleccionamos el primer elemento de una lista con first y lo añadimos a los elementos de dicha lista con JQuery appendTo haremos que funcione de forma circular.

Nuestro HTML contiene únicamente una lista y un botón.

  1. Lista origen: <br>
  2. <ol id="listaOrigen">
  3. <li> Elemento ordenado 1</li>
  4. <li> Elemento ordenado 2</li>
  5. <li> Elemento ordenado 3</li>
  6. <li> Elemento ordenado 4</li>
  7. </ol>
  8. <button id="miBoton">Ejecutar </button>
  9. </body>

Primero vincularemos un evento al botón para que cada vez que se haga click en él se ejecute la función deseada. Podemos usar la función jQuery on que recibe como argumento el nombre del evento ante el cual reaccionará, en este caso 'click,' o usar la función reducida jQuery click. Hay que decir que la función 'on' vincula eventos y reemplaza a la antigua función jQuery 'bind' que se utilizaba antes de la versión 1.7 de jQuery.

  1. $(document).on('ready', function(){
  2. $('#miBoton').on('click', function() {
  3. // Código sobre el click
  4. });
  5. });

O bien en formato reducido:

  1. $(document).on('ready', function(){
  2. $('#miBoton').click(function() {
  3. // Código sobre el click
  4. });
  5. });

Cuando se produzca ese evento ejecutaremos nuestro sencillo código. Veremos que es tan simple que se programa con una sola línea gracias a JQuery appendTo que permite mover elementos en el DOM.  El método JQuery appendTo se aplica sobre un elemento a otro elemento como parámetro. Es decir, añade el elemento seleccionado al elemento argumento de la función.

En nuestro caso:

  1. $(document).on('ready', function(){
  2. $('#miBoton').on('click', function() { 
  3. $('ol li:first').appendTo('ol')
  4. });
  5. });

Lo que hacemos es obtener la referencia al primer elemento de la lista "ol li:first" y moverlo con el JQuery appendTo al final de la lista.

Otra forma de codificar este movimiento, ajustando al nombre de la lista, sería:

  1. $('#listaOrigen li:first').appendTo('#listaOrigen');

Y con este sencillo ejemplo hemos practicado selecciones básicas de jQuery, vinculación de eventos y práctica de la función de utilidad JQuery appendTo.