Etiqueta: desarrollo

  • Cascada VS Agile

    Cascada VS Agile (Video Curso)

    Este es un video que no pensé incluir cuando estaba diseñando el curso gratuito en video de Introducción a la Administración de Proyectos, pero recordé que hay muchas personas que aun siguen discutiendo y enfrentado los modelos ágiles y los modelos tradicionales de gestión de proyectos, cual si fueran personajes de Street Fighter. Me imagino las pantallas arcade de mi infancia mostrando Cascada Vs Agile, RUP VS Scrum, PSP VS XP, cuando en realidad se trata comprender el contexto de su proyecto para aplicar el enfoque más adecuado.

    Finalmente he creado para usted el quinto video de este curso en donde se explica en que situaciones en las cuales debería de aplicar estas aproximaciones de administración de proyectos y cual es su relación con los cinco grupos de procesos del Project Manament Institute o PMI independientemente de pasiones mal ubicadas por marcos de trabajo o técnicas específcas. En este video encontrará:

    • Modelo de Cascada, Tradicional o Waterfall
    • Modelo Ágil o Agile
    • Su relación con los grupos de procesos

    Todos los videos previos están disponibles en YouTube o si prefiere, en los siguientes enlaces:

    1. Definición de Proyecto
    2. Definición de Gestión de Proyectos
    3. Lo Necesario Para Ser Un Administrador de Proyectos
    4. Los Cinco Procesos De La Administración de Proyectos

    Estos videos forman parte del primer capítulo del curso Explorando La Administracion De Proyectos. La estructura del curso puede verla aquí, la cual estaré actualizando con los enlaces apropiados según suba los respectivos videos.

    Recuerde que YouTube vive de vistas, likes y suscriptores (un fastidio pero así es ¯\_(ツ)_/¯ ) por lo tanto agradeceré sus manitas arriba, shares, suscripciones y todo eso que los youtubers siempre piden. También puede ver todos los videos en Patreon ahí las almas voluntariosas puede ayudar a la causa 🙂 y además pueden obtener:

    • Video descargable en alta definición.
    • Transcripción del contenido.
    • Documentos y preguntas de práctica (sólo los videos que lo ameriten).

    Sin más el quinto video Cascada VS Agile del curso de Introducción a la Administración de Proyectos, del Capítulo 1 Explorando la Administración de Proyectos:

    Algunas publicaciones recomendables para saber más:

    IT professional with several years of experience in management and systems development with different goals within public and private sectors.

    No Comment
  • The Agile Team / El Equipo Agile

    El Enfoque del Equipo Agile

    Antes de continuar

    Si usted no conoce las cuatro Declaraciones de Valor Agile, lo invito a que antes de continuar le eche un vistazo a la entrada El Origen Y Los Valores De Agile, si ya lo hizo o bien ya conoce estos valores, ahora puede enfocar su atención en la manera en que un equipo agile luce en la práctica. Las cuatro Declaraciones de Valor Agile juntas suman un proceso altamente iterativo e incremental y entregan código probado al final de cada iteración. Los siguientes puntos cubren de manera general la manera en que un equipo Agile lleva un proyecto:

    • Trabaja en unidad
    • Trabaja en iteraciones cortas
    • Libera algo en cada iteración
    • Se enfoca en las prioridades de negocio
    • Inspecciona y se adapta

    El equipo Agile trabaja en unidad

    Desafortunadamente es común ver que analistas de negocios y de sistemas arrojan procesos o requerimientos a diseñadores y programadores cual pelota sobre la barda y sin más continúan con su vida, también hay diseñadores y arquitectos que elaboran sus atractivos diseños sin la más mínima consulta a sus compañeros programadores, o bien programadores talentosos que terminan la parte del sistema que les toca y acto seguido se sacuden las manos y desaparecen; y así podemos seguir con historias tristes. Un equipo Agile exitoso debe tener una mentalidad de “todos estamos en esto juntos”.

    Me gusta mucho usar analogías de juegos online, porque son una gran manera de ilustrar lo que sucede en la vida real. Muchos juegos en línea se juegan en equipo, donde cada miembro de dicho equipo tiene un rol. En esos equipos de jugadores existen roles como el healer que cura a sus compañeros, el tank que recibe golpes haciendo de escudo para que el resto ataque más eficientemente, los DPS que se encargan de hacer daño al enemigo y la clase especial que hace algun tipo de daño. Cuando algún jugador no cumple con su rol pone al resto del equipo en desventaja considerable, a veces esto quiebra al resto del equipo por completo. ¡Todos deben trabajar como uno!

    Así como sucede en estos juegos los equipo ágiles también tienen roles, y vale la pena identificarlos de manera general:

    Product Owner

    Las responsabilidades principales del product owner incluyen el asegurarse de que todo el equipo comparte la misma visión para el proyecto, estableciendo prioridades de manera que las funcionalidades que aportan mayor valor al negocio sean siempre en las que se trabaja. Tomar decisiones que lleven al mejor retorno de inversión del proyecto es la máxima prioridad.

    El cliente

    El cliente es la persona que tomó la decisión de financiar el proyecto, usualmente representa a un grupo o división. En estos casos es común que este rol se combine con el de product owner. En otros proyectos puede ser que el cliente sea un usuario.

    Desarrollador

    En el contexto de equipos agile un desarrollador se usa en un contexto amplio, esto es que un desarrollador puede ser un programador, un diseñador gráfico, un ingeniero de base de datos, expertos en experiencia de usuario, arquitectos, etc.

    Project manager

    Hay que tomar esto con un poco de cuidado, porque un agile project manager se enfoca más en el liderazgo que en el management o (gestión tradicional del proyecto). En algunos proyectos y marcos de trabajo ágiles la persona encargada de este rol comparte las responsabilidades de un project manager tradicional con otros roles como el de product owner. También puede hacerse cargo de asesorar en la adopción y comprensión del enfoque agile. En proyectos muy pequeños puede incluso tener un rol como desarrollador, pero esta práctica no recomendable.

    Un equipo Agile trabaja en iteraciones cortas

    Ya lo mencionaba anteriormente, en proyectos ágiles no hay una delineación de fases demasiado marcada. No hay un establecimiento exhaustivo de requerimientos al comienzo del proyecto seguido de un análisis, no hay fase de diseño de arquitectura para todo el proyecto. Una vez que el proyecto inicia de verdad, todo el trabajo (análisis, diseño codificación, testing, etc.) ocurre junto dentro de una iteración.

    Las iteraciones se hacen dentro de espacio de tiempo delimitado previamente (timeboxed). Esto significa que cada iteración se termina en el tiempo acordado sin excusas, incluso aunque las funcionalidades previstas no se terminen. Las iteraciones son a menudo muy cortas. La mayoría de los equipos ágiles utilizan iteraciones de entre una semana y cuatro semanas

    Un equipo Agile libera algo en cada iteración

    Algo crucial en cada iteración es que dentro de su espacio de tiempo uno o más requerimientos se transformen en software codificado, probado y potencialmente empaquetable. En la realidad esto no significa que algo se les entregue a los usuarios finales, pero se debe estar en posibilidades de hacerlo. Las iteraciones una a una van sumando la construcción de solo algunas funcionalidades, de esta manera se va obteniendo un desarrollo incremental al ir de una iteración a la siguiente.

    Debido a que una sola iteración usualmente no provee tiempo suficiente para desarrollar todas las funcionalidades que el cliente desea, se creó el concepto de release. Un release comprende una o más (casi siempre más) iteraciones. Los releases pueden ocurrir en una gran variedad de intervalos, pero es común que los releases duren entre 2 y 6 meses. Al terminar un release a este le puede seguir otro release y a su vez a este le puede seguir otro, así hasta terminar el proyecto.

    Un equipo Agile se enfoca en las prioridades del negocio

    Los equipos ágiles demuestran un compromiso con las prioridades comerciales de dos maneras. Primero, entregan funcionalidades en el orden especificado por el product owner, de quien se espera priorice y combine características en un release que optimiza el retorno de inversión de la organización en el proyecto. Para lograr esto, se crea un plan para el release basado en las capacidades del equipo y en una lista priorizada de las nuevas funcionalidades deseadas. Para que el product owner tenga mayor flexibilidad en la priorización, las características deben ser escritas minimizando las dependencias técnicas entre ellas.

    En segundo lugar, los equipos ágiles se centran en completar y entregar funcionalidades valoradas por el usuario en lugar de completar tareas aisladas.

    Un equipo Agile inspecciona y adapta

    Siempre es bueno crear un plan, pero el plan creado al inicio no garantiza lo que ocurrirá en el futuro. De hecho un plan es solo una suposición en un punto del tiempo. Si usted vive perseguido por la Ley de Murphy como yo 😀, habrá muchas cosas que conspirarán contra el plan. El personal del proyecto puede ir o venir, las tecnologías funcionarán mejor o peor de lo esperado, los usuarios cambiarán de opinión, los competidores pueden obligarnos a responder de manera diferente o más rápida, y así sucesivamente. Los equipos ágiles ven que cada cambio representa tanto una oportunidad como la necesidad de actualizar el plan para mejorar y reflejar la realidad de la situación actual.

    Al comienzo de cada nueva iteración, un equipo agile incorpora todo el nuevo conocimiento obtenido en la iteración anterior y se adapta en consecuencia. Si un equipo aprendió algo que probablemente afecte la precisión o el valor del plan, hay que actualizar el plan. Esto es, que quizá el quipo descubrió que han sobreestimado o subestimado su capacidad de progreso (capacity) y que un cierto tipo de trabajo consume más tiempo del que se pensó anteriormente.

    De la misma forma el plan se puede ver afectado por el conocimiento que el product owner ha ganado de los usuarios. Quizá por la retroalimentación obtenida de una iteración previa el product owner ha aprendido que los usuarios quieren ver más de algún tipo de funcionalidad y ya no valoran tanto otra que havían considerado. Este tipo de situaciones pueden alterar el plan, de manera que hay que adaptar el mismo para mejorar su valor.

    Enlaces relacionados:

    Roles on Agile Teams: From Small to Large Teams
    El Origen Y Los Valores De Agile
    What Is Agile?
    Planeación, Cono de Incertidumbre y Estimaciones en IT

    Estos son alguno libros recomendables para saber más:

    IT professional with several years of experience in management and systems development with different goals within public and private sectors.

    No Comment
  • Flash-VS-HTML-5

    Flash VS HTML5 (Parte 5, ahora sí la última parte….creo)

    Flash-VS-HTML-5

    Hace ya 3 años inicié una serie de entradas en este blog, en donde comparaba las tecnologías Flash y la entonces emergente HTML5, en aquel entonces atestigüé acalorados debates en diferentes foros y medios sobre las bondades y retos que estas dos tecnologías tenían enfrente, sin embargo hoy en día parece que tenemos claro para donde van las cosas, y aunque Flash se niega a morir y aun se puede encontrar a uno que otro nostálgico pero aguerrido defensor de esta tecnología (yo mismo fui entusiasta de Flash durante sus años de gloria), en este primer cuarto del 2015 se han colocado algunos de los clavos más firmes en el ataúd de Flash. Las malas noticias para Flash provenientes en esta ocasión de YouTube, Mozilla y de las mismas fallas de rendimiento y seguridad del plug-in Flash Player.

    Si es que alguien no lo sabe, Flash se propago ámpliamente hace más de década y media permitiendo a los desarrolladores web y multimedia crear gráficos, animación, video  y otras interacciones con el usuario que eran difíciles o imposibles para el navegador. Para que las creaciones en Flash pudieran ser visualizadas en los navegadores, tanto entones como ahora, se requiere de un plug-in llamado Flash Player, y es aquí donde comienzan los problemas para Flash (¿barbas a remojar para el plug-in de Java?).

    Con el poder de los navegadores incrementándose, la evolución de las capacidades de HTML5, la búsqueda del ahorro de recursos  y las nuevas propuestas que se suman en el camino, tenemos que los plug-in van de salida. El primer gran golpe para Flash fue el que dio el todavía vivo Steve Jobs desterrando a Flash del ecosistema del iPhone por ahí del 2010. Pero ahora tenemos tres nuevos golpes, aunque uno de ellos es engañoso y paradójicamente quizá le ofrezca un último asidero a Flash, veamos:

    Problemas de seguridad del Flash Player.

    Comenzando el año el Flash Player tuvo muchos problemas de seguridad, y la verdad sea dicha es el plug-in favorito de los black hat hackers lo que ha llevado incluso a sugerir a algunos expertos el que no se instale el plug-in a menos que sea totalmente necesario, el problema es que en poco mas de dos semanas Adobe tuvo que hacer tres parches de emergencia para peligrosos bugs, lo cual ha sido en realidad un problema constante durante la vida de Flash. Esto llevó a Adobe a tener que trabajar rápidamente con sus socios distribuidores iniciando el año, dígase Google y Microsoft, para corregir el problema tanto en Chrome como en Internet Explorer de primera mano, pero al final los usuarios tenia que hacer varias actualizaciones del plug-in dependiendo de los navegadores que utilizasen; el problema fue tan grave que incluso Mozilla Firefox desactivo definitivamente el plug-in hasta que hubiera una solución final.

    YouTube abandona el uso de Flash por default en sus videos.

    YouTube, el mayor proveedor de videos en Flash de la historia, anunció que dejaría de servir videos utilizando el plug-in para todos los usuarios que consumen su contenido en un navegador moderno, haciendo por default el uso de HTML5 y su tag . Richard Leider en el blog de la gerencia de ingeniería de YouTube hace una interesante referencia a las razones por las cuales no habían podido hacer de HTML5 su plataforma favorita de entrega de video hasta el momento y de como las cosas han ido evolucionando para HTML5 hasta el punto de poder cerrar brechas técnicas. Esto sin duda marcará la tendencia para otros sitios de video.

    Mozilla y su proyecto Shumway

    En febrero Mozilla y sus programadores activaron Shumway para la reproducción de videos Flash en la plataforma Amazon SIN el uso del Flash Player. El proyecto Shumway ha estado en desarrollo desde hace algunos años y lo que intenta, en pocas palabras, es poder reproducir contenido SWF y FLV sin utilizar el Flash Player, si esto se lograra de forma completamente eficaz y eficiente significaría (desde mi punto de vista) la muerte absoluta e inmediata del Flash Player, sin embargo, el proyecto Shumway no está terminado y aun requiere mucho trabajo, pero lo que ha logrado es bastante prometedor.

    Aquí es donde entra la paradoja y la esperanza para Flash, si bien algo como Shumway al final representaría la muerte inmediata del Flash Player, también significaría darle nueva vida al Flash Professional, la herramienta de creación de Adobe y probablemente a algunas otras que también crean contenido SWF y FLV. La herramienta de diseño y animación Flash Professional per se, sigue siendo bastante buena, trata de ir adaptándose a los nuevos estándares web mientras se mantiene relativamente más accesible que otras herramientas de animación y hoy por hoy aun no existe una herramienta tan buena como el Flash Professional dirigida a el HTML5 puro, el mismo Adobe lo intenta con su Adobe Edge Animate desde hace tiempo pero creo que aun no lo logran.

    IT professional with several years of experience in management and systems development with different goals within public and private sectors.

    2 Comments
  • Arrastrar y Soltar

    Arrastrar y Soltar HTML5

    Arrastrar y Soltar

    Arrastrar y Soltar en HTML5

    Sin duda la posibilidad que introdujo HTML5 para Arrastrar y Soltar de manera nativa representó un avance, esto sin duda fue una novedad ya que en la era pre-HTML5, la única manera de lograr esto era con la utilización de complejas operaciones con JavaScript, por lo que la mayoría de los desarrolladores terminábamos utilizando alguna librería como JQuery, MooTools u otras para contar con la funcionalidad de Arrastrar y Soltar (Drag and Drop), o si la situación requería de mucha interactividad y gráficos la utilización de Flash era casi imperiosa. La clase nativa para Arrastrar y Soltar de HTML5 lleva un tiempo existiendo pero tenía varios problemas que se han ido solucionando poco a poco. El principal problema quizá era que los ejemplos que se podía encontrar por ahí, continuamente solo funcionaban en un navegador y no en los demás, pero los fabricantes han ido homologando cada vez más la clase aunque no todos todavía. La clase aún no es totalmente perfecta y tiene aún varios detractores y críticos muy enfáticos, sin embargo, posee varias ventajas sobre otras opciones. En esta entrada abordaré lo que necesita saber para comenzar a utilizar la clases Arrastrar y Soltar de HTML5 explicando sus puntos más básicos e importantes. Puede ver el ejemplo que a continuación explicaré en este enlace, comencemos…

    Ventajas sobre otras implementaciones Arrastrar y Soltar

    Como mencioné, he podido encontrar que en varios blogs aseguran que el Arrastrar y Soltar de HTML5 no debería ser utilizado, a lo cual me gustaría contra argumentar, sobre todo porque la clase me ha sido de gran ayuda últimamente:

    • Interacción con otras aplicaciones o aplicacion de derivadas. La implementación del Arrastrar y Soltar de HTML5 permite la interacción entre iframes e incluso entre ventanas de navegadores. Si me permiten ser un poco entusiasta en este punto, invito a quien sea a que intente implementar un Arrastrar y Soltar entre iframes y/o ventanas utilizando librerías JavaScript…¡el horror!….
    • El framework nativo es independiente de terceros. Tener una clase nativa siempre tiene la ventaja de independencia en cuanto a las situaciones que pueden rodear y afectar al desarrollo de un tercero, lo que evidentemente no sucede con las alternativas que presentan JQuery, MooTools, Dojo, etc., ahí la dependencia es total.
    • Interacción con aplicaciones que no son web. Un ejemplo de esto es que ahora es posible arrastrar un archivo del escritorio a una aplicación en el navegador.

    Las bases, paso a paso

    Para facilitar un poco las cosas he organizado esta entrada en pasos, cada paso describe un concepto o varios que iré ejemplificando.

    1. Especificando los elementos arrastrables (draggable object)

    Lo primero que necesita hacer es definir que nodo o nodos del documento HTML5 serán susceptibles de ser arrastrados, en HTML5 casi cualquier elemento visible puede ser arrastrado, como son imágenes, divs, links, etc., para lograr esto se utiliza el atributo draggable=”true”. Por ahora no aplica el manejo de valores falso o verdadero a  la manera clásica de XHTML en los navegadores que he probado, es decir, al atributo no funciona si lo escribimos como draggable=”draggable” incluso dentro de un archivo xhtml. También hay elementos que son arrastrables por default para algunos navegadores, como lo son imágenes y selecciones de texto. En el sigiente ejemplo se muestran algunos cuadros que serán los elementos arrastrables para este ejemplo:

    <div id="squares">
        <div class="square" draggable="true">
            <h1>1</h1>
        </div>
        <div class="square" draggable="true">
            <h1>2</h1>
        </div>
        <div class="square" draggable="true">
            <h1>3</h1>
        </div>
    </div>

    Acompañando este código colocamos los siguientes estilos CSS:

    .square {
    height: 100px;
    width: 100px;
    border: 1px solid #000;
    float: left;
    background-color: #eee;
    margin: 5px;
    -webkit-box-shadow: inset -1px -1px 3px #000;
    -ms-box-shadow: inset -1px -1px 3px #000;
    box-shadow: inset -1px -1px 3px #000;
    text-align: center;
    cursor: move;
    }
    
    h1 {
    font-size: 75px;
    }
    
    .target {
    height: auto;
    min-height: 150px;
    width: 320px;
    float: left;
    border: 1px solid #000;
    margin: 5px;
    background-color: #ccc;
    -webkit-box-shadow: inset -1px -1px 3px #000;
    -ms-box-shadow: inset -1px -1px 3px #000;
    box-shadow: inset -1px -1px 3px #000;
    text-align: center;
    cursor: move;
    }

    En navegadores webkit (Chrome, Safari) y Firefox el código anterior nos presenta una serie de cuadrados que originarán una especie de “fantasma” si intenta arrastrarlos, ahora hay que agregar los eventos apropiados. Resultado:

    2. Asignando eventos a los elementos arrastrables (Drag Objects)

    Ahora que tenemos los objetos que deseamos se puedan arrastrar, debemos asignarles algunos eventos utilizando JavaScript, estos objetos pueden disparar lo siguientes tres eventos:

    • dragstart. Se dispara cuando el usuario comienza a arrastrar el objeto.
    • drag. Se dispara cada vez que el puntero del mouse se mueve mientras que un objeto está siendo arrastrado.
    • dragend. Se dispara cuando el usuario suelta el botón mientras un objetos está siendo arrastrado. Estos eventos se asignan como lo hace normalmente JavaScript o la librería de su preferencia. Vamos a agregar unos cuantos elementos al código HTML:
    <div id="squares">
        <div class="square" draggable="true">
            <h1>1</h1>
        </div>
        <div class="square" draggable="true">
            <h1>2</h1>
        </div>
        <div class="square" draggable="true">
           <h1>3</h1>
        </div>
    </div>
    <p id="event"></p>
    <p id="status_drag"></p>
    <p id="status_over"></p>
    <p id="status_drop"></p>

    Agreguemos el siguiente código JavaScript para asignar los eventos descritos a nuestros cuadros:

    /*
    * En el evento dragstart se coloca un mensaje que se verá muy brevemente
    * o quizá no se note, cuando el usuario inicia el arrastre
    */
    function dragStartEvent(e) {
        eventStatus.innerHTML = "evento  dragStart"
    }
    
    /*
    * El evento drag reporta al usario cuando inicia y que un arrastre
    * está actualmente en progreso
    */
    function dragEvent(e) {
        eventStatus.innerHTML = "evento drag."
        dragStatus.innerHTML = "Arrastrando en este momento.";
    }
    
    /*
    * El evento dragover despliega un mensaje cuando es llamado y otro que
    * que indica que el arrastre ha terminado
    */
    function dragEndEvent(e) {
       eventStatus.innerHTML = "evento dragend."
       dragStatus.innerHTML = "Arrastre terminado."
    }
    
    //variables para elementos informativos
    var eventStatus = document.getElementById('event');
    var dragStatus = document.getElementById('status_drag');
    //variable para alamacenar todos los divs que usan la clase square
    var squareItems = document.querySelectorAll('.square');
    
    //ciclo para asignar los eventos a cada cuadro (div square)
    [].forEach.call(squareItems , function(squareItem) {
        squareItem.addEventListener('dragstart',dragStartEvent, false);
        squareItem.addEventListener('drag',dragEvent, false);
        squareItem.addEventListener('dragend',dragEndEvent, false);
    });

    Este código deber ser llamado cuando el documento HTML está cargado, note como simplemente se asignaron los eventos y estos despliegan mensajes cuando son disparados.

    3. Asignando eventos al elemento objetivo (Drop Object)

    Hasta ahora hemos logrado arrastrar elementos por la ventana, pero tenemos que asignar algún objeto en donde los elementos arrastrables puedan ser soltados, a este elemento lo llamaremos objetivo o drop target. Al elemento objetivo o drop target le podemos asignar los siguientes eventos:

    • dragenter. Se dispara cuando un objeto arrastrable es el primero en arrastrase dentro de un objeto.
    • dragover. Se dispara cuando un objeto arrastrable es arrastrado dentro de un objeto. Hay que tener presente que si se desea que el objeto que está siendo arrastrado pueda ser soltado dentro de otro, debe cancelar el comportamiento por default de este.
    • dragleave. Se dispara cuando un objeto arrastrable es arrastrado fuera de un nodo objetivo.
    • drop. Se dispara cuando un objeto arrastrable es soltado dentro de un nodo objetivo. Si desea convertir un objeto en un elemento o nodo objetivo que permita soltar elementos arrastrables, debe de asignar los eventos dragover y drop de manera obligatoria, es fácil entender porque el evento drop debe ser usado, pero quizá no sea tan claro porque dragover también, la razón es porque el elemento que se está arrastrando puede tener otro funcionamiento que no se desea cuando se suelta, por ejemplo, si está arrastrando un enlace y no previene el comportamiento por default, cuando suelte este elemento el navegador se direccionará a la URL del enlace como si usted hubiera hecho un clic normal, lo que no es deseable mientras se arrastra y se suelta el elemento. Al código que tiene actualmente, agregue al final el elemento objetivos para soltar el elemento:
    <div id="target1" class="target">Suelte elementos aquí</div>

    Agregaremos dos variables solo para alertar cuando se disparan los nuevos eventos y tener mejor idea de que el elemento objetivo está siendo efectivamente afectado.

    var overStatus = document.getElementById('status_over');
    var dropStatus = document.getElementById('status_drop');

    Y claro el código para asignar los nuevos elementos:

    dropItem.addEventListener('dragover', dragOverEvent, false);
    dropItem.addEventListener('drop', dropEvent, false);

    Los otros ventos que no incluí no son indispensables (dragenter y dragleave) pero son útiles, por ejemplo, para ofrecer más indicadores visuales al usuario y hacer una experiecia más intuitiva, pero por ahora lo omito para mayor claridad, si desea más ejemplos incluyendo estos eventos, recuerde que en el pedir está el dar 😉 Resultado:

    4. Transferecia de datos del elemento arrastrable al elemento objetivo (Datratrasfer object).

    En este punto está casi todo listo, pero donde culmina todo lo que hemos hecho es en la transferencia de datos del elemento que estamos arrastrando. Por ahora, aunque nuestro elemento parace estar haciendo todo bien, aún no lo logra ser “soltado” dentro del elemento objetivo como esperaríamos, es aquí donde la transferencia de datos hace su magia. Lo que se necesita es la propiedad dataTransfer y sus métodos setData() y getData(). Lo primero es utilizar el método setData() dentro de uno de los eventos asignados al elemento que se arrastra, usualmente se utiliza el evento dragstart, por parte de los eventos del elemento objetivo, estos pueden recibir los datos transferidos en algunos de sus eventos asignados, es ahí de donde se utiliza getData(), entonces: setData(format, data). Establece la información que se intercambia entre el nodo que se arrastra y y el nodo objetivo. El parámetro format establece el tipo de dato que se va a intercambiar, hasta ahorita los únicos tipos de dato que existan son “text” y “url” (se usa el formato de mimetype). El parámetro data es el información persé que sera intercambiada, lo cual es una cadena de texto, comunmente se utiliza innerHTML. getData(format). Recupera la información que fue previamente asignada por setData(), el setData puede estar incluso en otra página, incluso en otro navegador. El parámetro format es el tipo de dato asociado con lo que se espera, los tipos de dato pueden ser “text” y “url” (se usa el formato de mimetype). Ahora utilicemos lo que hemos aprendido en nuestro código. Dentro del evento dragstart coloquemos la siguiente línea:

    e.dataTransfer.setData('text/html', this.innerHTML);

    Con la línea anterior ha preparado la información que se va a transferir en el arrastre, ahora toca el turno de indicarle al nodo objetivo cual es información que va a recibir cuando el usuario suelte el elemento que está arrastrando, sin más agreguemos las siguientes líneas de código al evento drop:

    var dropedelement = document.createElement('span');
    dropedelement.innerHTML = e.dataTransfer.getData('text/html');
    this.appendChild(dropedelement);

    Para terminar.

    El código JavaScript completo debería lucir aproximadamente de la siguiente manera:

    /*
    * En el evento dragstart se coloca un mensaje que se verá muy brevemente
    * o quizá no se note, cuando el usuario inicia el arrastre
    */
    function dragStartEvent(e) {
        eventStatus.innerHTML = "evento  dragStart.";
        overStatus.innerHTML = "";
        dropStatus.innerHTML = "";
        e.dataTransfer.setData('text/html', this.innerHTML);
    }
    
    /*
    * El evento drag reporta al usario cuando inicia y que un arrastre
    * está actualmente en progreso
    */
    function dragEvent(e) {
        eventStatus.innerHTML = "evento drag.";
        dragStatus.innerHTML = "Arrastrando en este momento.";
    }
    
    /*
    * El evento dragover despliega un mensaje cuando es llamado y otro que
    * que indica que el arrastre ha terminado
    */
    function dragEndEvent(e) {
        eventStatus.innerHTML = "evento dragend.";
        dragStatus.innerHTML = "Arrastre terminado.";
    }
    
    /*
    * El evento dragend despliega un mensaje cuando es llamado y otro que
    * que indica sobre que elemento objetivo se arratra actualemte, si es
    * el caso
    */
    function dragOverEvent(e) {
        if (e.preventDefault) {
            e.preventDefault(); // Necesario para permitir soltar.
        }
        eventStatus.innerHTML = "evento over.";
        overStatus.innerHTML = "Elemento arrastrable sobre " + this.id;
    }
    
    /*
    * El evento drop despliega un mensaje cuando es llamado y otro que
    * que indica en que elemento objetivo se ha soltado el elemento
    */
    function dropEvent(e) {
        eventStatus.innerHTML = "evento drop";
        dropStatus.innerHTML = "Se ha soltado un elemento dentro de " + this.id;
        var dropedelement = document.createElement('span');
        dropedelement.innerHTML = e.dataTransfer.getData('text/html');
        this.appendChild(dropedelement);
    }
    
    //variables para elementos informativos
    var eventStatus = document.getElementById('event');
    var dragStatus = document.getElementById('status_drag');
    //variables para elementos informativos
    var overStatus = document.getElementById('status_over');
    var dropStatus = document.getElementById('status_drop')
    //variable para alamacenar todos los divs que usan la clase square
    var squareItems = document.querySelectorAll('.square');
    var dropItem = document.getElementById('target1');
    
    //ciclo para asignar los eventos a cada cuador (div square)
    [].forEach.call(squareItems , function(squareItem) {
        squareItem.addEventListener('dragstart',dragStartEvent, false);
        squareItem.addEventListener('drag',dragEvent, false);
        squareItem.addEventListener('dragend',dragEndEvent, false);
    });
    
    dropItem.addEventListener('dragover', dragOverEvent, false);
    dropItem.addEventListener('drop', dropEvent, false);

    Lo que obtenemos tiene este aspecto después de arrastrar todos los elementos:

    Note que este ejemplo copia los elementos en lugar de moverlos (no elimina el elemento original) pero usted puede hacerlo si lo desea. Por supuesto se pueden hacer implementaciones un tanto más sofisticadas, pero por ahora usted ha cubierto las bases para posteriormente hacer un uso más interesante e intenso de la la clase Arrastrar y Soltar de HTML5.  Si usted tiene alguna opinión, crítica, aportación o cualquier otra cosa, deje un comentario en esta entrada, o bien envíelo a @ManuGekko o @RealInernet80 en Twitter.

    Otros enlaces de interés:

    Arrancar con HTML5 Curso de Programación

    Subir un archivo con HTML5

    Transiciones y Transformaciones en Botones (CSS3 y HTML5)

    IT professional with several years of experience in management and systems development with different goals within public and private sectors.

    No Comment