Etiqueta: programming

  • Upload A File With HTML5 / Subir un archivo con HTML5

    Upload A File With HTML5 (XMLHttpRequest)

    Upload A File With HTML5 / Subir un archivo con HTML5

    The XMLHttpRequest object

    The XMLHttpRequest object has been updated several times since was defined as the WHATWG’s HTML effort using Microsoft technology; then we had the original XMLHttpRequest Level 1 specification as part of W3C, we also had the XMLHttpRequest Level 2 updated specification, and now we have the last version of this object known as XMLHttpRequest Living Specification. We can summarize its advantages in the following points:

    • Allows upload and download files as stream bytes, large binaries (BLOBs) or data forms
    • It has event handlers for progress, errors, abortion, start, and end of operations
    • Cross-domain capabilities (CORS)
    • New type for JSON responses
    • Is a fundamental part of the HTML5 File API specification

    It’s important to emphasize that before HTML5 and the latest versions of XMLHttpRequest object it was required to resort to server-side technology in order to able to perform an uploading file operation, that is, it wasn’t possible to upload a file natively from the client side. Technologies as AJAX and Flash did their own effort but with serious limitations, so XMLHttpRequest comes to cover this old problem in a big way. There are other additional features that come with XMLHttpRequest, if you want to know more you can resort to the official specification.

    Starting

    The first thing we’ll do is to define the user interface for this small implementation starting with the HTML tags, the code is very simple and only includes some form elements, and some div tags that are only used to give a better presentation using CSS3. I won’t analyze in this post anything related to the used cascade style sheets since is not something really necessary for the operation of this example.

    <!DOCTYPE html>
    <html>
        <head>
            <title>Upload File</title>
            <meta charset="iso-8859-1" />
        </head>
        <body>
        <div id="wrap">
           <div class="field">
               <ul class="options">
                  <li><input type="file" id="myfile" name="myfile" class="rm-input" onchange="selectedFile();"/></li>
                  <li><div id="fileSize"></div></li>
                  <li><div id="fileType"></div></li>
                  <li><input type="button" value="Subir Archivo" onClick="uploadFile()" class="rm-button" /></li>
               </ul>
           </div>
           <progress id="progressBar" value="0" max="100" class="rm-progress"></progress>
           <div id="percentageCalc"></div>
        </div>
        </body>
    </html>
    The previous code explains itself, but let’s summarize what is in there:
    • A file-type input which will be used to select the file to be uploaded
    • A div which will be used to print the size of the selected file
    • A div which will be used to print the MIME type of the selected file
    • A button which will fire the uploading process for the selected file
    • A progress bar to indicate the uploading process progress of the selected file
    • Finally, a div where the progress will be shown in a percentage format

    The selectedFile() function

    Each time you select a file using the file element, you also trigger the onchange event which calls the selectedFile() function. In this function very interesting things happen, to start, a reference to a file array instantiated by the HTML5 object FileList is done, the objects that we get as members of FileList are File objects. In this case, we’ll get the size and type properties from the gotten File object.
    Using the information provided by the size property, the size of the selected file is calculated and shown in megabytes or kilobytes within the function. With the type property, the MIME type of the selected files is gotten and showed in the corresponding div.
    function selectedFile() {
    var archivoSeleccionado = document.getElementById("myfile");
    var file = archivoSeleccionado.files[0];
       if (file) {
           var fileSize = 0;
           if (file.size > 1048576)
              fileSize = (Math.round(file.size * 100 / 1048576) / 100).toString() + ' MB';
           else
              fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + ' Kb';
    
           var divfileSize = document.getElementById('fileSize');
           var divfileType = document.getElementById('fileType');
           divfileSize.innerHTML = 'Tamaño: ' + fileSize;
           divfileType.innerHTML = 'Tipo: ' + file.type;
    
        }
    }

    The uploadFile() function

    Esta es la función que hace un mayor uso de las nuevas posibilidades de XMLHttpRequest , y es la que se encargará de disparar el proceso principal del lado cliente.

    function uploadFile(){
     //var url = "/ReadMoveWebServices/WSUploadFile.asmx/UploadFile";
     var url = "/ReadMoveWebSite/UploadMinimal.aspx";
     var archivoSeleccionado = document.getElementById("myfile");
     var file = archivoSeleccionado.files[0];
     var fd = new FormData();
     fd.append("archivo", file);
     var xmlHTTP = new XMLHttpRequest();
     //xmlHTTP.upload.addEventListener("loadstart", loadStartFunction, false);
     xmlHTTP.upload.addEventListener("progress", progressFunction, false);
     xmlHTTP.addEventListener("load", transferCompleteFunction, false);
     xmlHTTP.addEventListener("error", uploadFailed, false);
     xmlHTTP.addEventListener("abort", uploadCanceled, false);
     xmlHTTP.open("POST", url, true);
     //xmlHTTP.setRequestHeader('book_id','10');
     xmlHTTP.send(fd);
    }
    At the beginning, we have the variable url that we’ll use to indicate where is the page o web service which is going to receive the request from this page to do the proper process on server side. Immediately like in the selectedFile() function, a reference to the gotten File object member is also done.
    In the fourth line, there is something new and very useful, that is the FormData object, this object allows to instantiate a web form via JavaScript, that is, is like you put an HTML form using tags, or you can refer to an already existing one assigning it to a FormData object. No doubt this is really helpful since means now you can create a web form y alter the sending values dynamically. To append values to, either instantiated or referenced web form with FormData, use the append(file, object) method, this way in the fifth line our File object is added with the file name.
    This is the code of the function that covers what was just stated:
    //var url = "/ReadMoveWebServices/WSUploadFile.asmx/UploadFile";
    var url = "/ReadMoveWebSite/UploadMinimal.aspx";
    var archivoSeleccionado = document.getElementById("myfile");
    var file = archivoSeleccionado.files[0];
    var fd = new FormData();
    fd.append("archivo", file);

    Event handlers

    Continuing with the rest of the function, we can observe that the XMLHttpRequest object is finally instantiated and is assigned to the xmlHTTP variable, and then we proceed to the next novelty, I mean the possibility of creating new events which are part of XMLHttpRequest thanks to the upload object. The added events for this particular case are:
    • loadstart. Is triggered when the uploading file process initiates.
    • progress. Is triggered each time there is an advance in the file uploading process.
    • load. Is triggered when the transfer is complete successfully.
    • error. Is triggered when the transfer fails
    • abort. Is triggered when the user/developer interrupts the process.
    These aren’t the only available events, check the official specification for more information.
    The event handlers are declared in the following code:
    var xmlHTTP= new XMLHttpRequest();
    //xmlHTTP.upload.addEventListener("loadstart", loadStartFunction, false);
    xmlHTTP.upload.addEventListener("progress", progressFunction, false);
    xmlHTTP.addEventListener("load", transferCompleteFunction, false);
    xmlHTTP.addEventListener("error", uploadFailed, false);
    xmlHTTP.addEventListener("abort", uploadCanceled, false);

    The triggered events functions are the following:

    function progressFunction(evt){
        var progressBar = document.getElementById("progressBar");
        var percentageDiv = document.getElementById("percentageCalc");
        if (evt.lengthComputable) {
            progressBar.max = evt.total;
            progressBar.value = evt.loaded;
            percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
        }
    }
     
    function loadStartFunction(evt){
        alert('Comenzando a subir el archivo');
    }
     
    function transferCompleteFunction(evt){
        alert('Transferencia completa');
        var progressBar = document.getElementById("progressBar");
        var percentageDiv = document.getElementById("percentageCalc");
        progressBar.value = 100;
        percentageDiv.innerHTML = "100%";
    }
     
    function uploadFailed(evt) {
        alert("Hubo un error al subir el archivo.");
    }
     
    function uploadCanceled(evt) {
        alert("La operación se canceló o la conexión fue interrunpida.");
    }

    ProgressFunction() updates the progress bar and percentage which indicate in a graphical and numerical way the process progress, the rest of the functions only display the proper message for each case.

    Commented code

    If you have observed the code you probably noticed some commented lines, this is because this is just the base code to create something a little bit more complex, but I decided to leave those lines because maybe can be useful for someone:

    //var url = "/ReadMoveWebServices/WSUploadFile.asmx/UploadFile";

    The previous line of code is a call to a .Net HTTP service instead of a page. Here is where you should call your own server-side implementation.

    //xmlHTTP.upload.addEventListener("loadstart", loadStartFunction, false);

    This line calls a function that shows a message when the process starts. I commented this line after I executed the code several times because was annoying.

    The completo code

    This is how the complete implementation of the code looks:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Upload File</title>
            <meta charset="iso-8859-1" />
                                        <link rel="stylesheet" type="text/css" href="estilosUploadFile.css" />
            <script type="text/javascript">
     
                  function selectedFile() {
                    var archivoSeleccionado = document.getElementById("myfile");
                    var file = archivoSeleccionado.files[0];
                    if (file) {
                        var fileSize = 0;
                        if (file.size > 1048576)
                            fileSize = (Math.round(file.size * 100 / 1048576) / 100).toString() + ' MB';
                        else
                            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + ' Kb';
     
                        var divfileSize = document.getElementById('fileSize');
                        var divfileType = document.getElementById('fileType');
                        divfileSize.innerHTML = 'Tamaño: ' + fileSize;
                        divfileType.innerHTML = 'Tipo: ' + file.type;
     
                    }
                  }     
     
                function uploadFile(){
                    //var url = "http://localhost/ReadMoveWebServices/WSUploadFile.asmx?op=UploadFile";
                    var url = "/ReadMoveWebServices/WSUploadFile.asmx/UploadFile";
                    var archivoSeleccionado = document.getElementById("myfile");
                    var file = archivoSeleccionado.files[0];
                    var fd = new FormData();
                    fd.append("archivo", file);
                    var xmlHTTP= new XMLHttpRequest();
                    //xmlHTTP.upload.addEventListener("loadstart", loadStartFunction, false);
                    xmlHTTP.upload.addEventListener("progress", progressFunction, false);
                    xmlHTTP.addEventListener("load", transferCompleteFunction, false);
                    xmlHTTP.addEventListener("error", uploadFailed, false);
                    xmlHTTP.addEventListener("abort", uploadCanceled, false);
                    xmlHTTP.open("POST", url, true);
                    //xmlHTTP.setRequestHeader('book_id','10');
                    xmlHTTP.send(fd);
                }       
     
                function progressFunction(evt){
                    var progressBar = document.getElementById("progressBar");
                    var percentageDiv = document.getElementById("percentageCalc");
                    if (evt.lengthComputable) {
                        progressBar.max = evt.total;
                        progressBar.value = evt.loaded;
                        percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
                    }
                }
     
                function loadStartFunction(evt){
                    alert('Comenzando a subir el archivo');
                }
                function transferCompleteFunction(evt){
                    alert('Transferencia completa');
                    var progressBar = document.getElementById("progressBar");
                    var percentageDiv = document.getElementById("percentageCalc");
                    progressBar.value = 100;
                    percentageDiv.innerHTML = "100%";
                }   
     
                function uploadFailed(evt) {
                    alert("Hubo un error al subir el archivo.");
                }
     
                function uploadCanceled(evt) {
                    alert("La operación se canceló o la conexión fue interrunpida.");
                }
     
            </script>
        </head>
        <body>
            <div id="wrap">
                <div class="field">
                    <ul class="options">
                        <li>
                            <input type="file" id="myfile" name="myfile" class="rm-input" onchange="selectedFile();"/>
                        </li>
                        <li>
                            <div id="fileSize"></div></li>
                        <li>
                            <div id="fileType"></div></li>
                        <li>
                            <input type="button" value="Subir Archivo" onClick="uploadFile()" class="rm-button" /></li>
                    </ul>
                </div>
                <progress id="progressBar" value="0" max="100" class="rm-progress"></progress>
                <div id="percentageCalc"></div>
            </div>
        </body>
    </html>

    I’m not describing the CSS3 code because is irrelevant in terms of functionality, but I share an image that shows how it looks the implementation in the browser and the link to the CSS3 estilosUploadFile.zip.

    I’m also sharing the original HTTP service that I used to test this example -the server-side code, backend file or any name that you prefer 😃- but this won’t be very useful for you unless you use the exact same stack that I was using at the moment- in other words, if you are the kind of person who just wants to copy and paste….hehehe well….maybe you’re not ready for this yet. Here is the file WSUploadFile.zip

    Sorry about my English I’m not a natural speaker (don’t be grumpy, help me to improve).

    This is all for now folks, I hope this can be useful for you.

    Here some books that can help you in your HTML5 journey:

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

    2 Comments
  • Cono de Incertidumbre Dilbert

    Planeación, Cono de Incertidumbre y Estimaciones en IT

    Cono de Incertidumbre Dilbert

    El propósito de Planear

    Constantemente les digo a mis amigos y compañeros de trabajo que las ideas no son lo mismo que la planeación. Recuerde la última vez que comenzó algo que, por diversas razones, nunca terminó, o aquella ocasión que dijo mis “planes” son…, pero en la realidad nunca realizó verdaderas acciones para concretar esos “planes” o bien simplemente sigue posponiéndolos. La principal diferencia entre ideas y planes radica básicamente en que las ideas son algo vago, aspiracional y deseable; mientras que la verdadera planificación lleva más allá las ideas y establece objetivos junto con pasos previstos a seguir que finalmente ayudan a elaborar estimaciones, tomar decisiones e incluso perfeccionar o cambiar el plan.

    De la misma forma que sucede en la vida, en la industria del software y de las IT en general, las estimaciones y las planificaciones son de suma importancia para lograr el éxito de cualquier proyecto. Los planes son una guía que nos indica en donde invertir nuestro tiempo, dinero y esfuerzo. Si estimamos que un proyecto nos tomará un mes en realizar y a cambio nos generará un millón de dólares, entonces quizá decidamos realizar ese proyecto. Sin embargo si el mismo proyecto nos genera ese millón de dólares en 15 años, entonces quizá sea mejor rechazarlo. Los planes nos ayudan a pensar por adelantado y a saber si estamos progresando como esperamos entre otras cosas. Sin planes estamos expuestos a cualquier cantidad de problemas.

    En mi experiencia como desarrollador y project manager los equipos tienden a dos extremos: No hacen ningún plan en lo absoluto o se esfuerzan tanto en un plan que se convences a si mismos de que ese plan es correcto siempre. Los que no planean simplemente no pueden contestar a la preguntas más elementales, como ¿y cuando terminan? o ¿estará listo antes del fin de año?. Los que planean demasiado invierten tanto tiempo en su plan que caen en supuestos que no pueden confirmar, su inseguridad crece más y comienzan a creer que incluso planeando más lograrán estimaciones más precisas aunque esto en realidad no ocurra. Si usted se siente identificado con alguno de los escenario anteriores, a su favor puedo decir que planear no es fácil.

    Pero que los planes fallan y que planear es complicado no es noticia. Al inicio de un proyecto muchas cosas pueden ser desconocidas, como por ejemplo los detalles específicos de los requerimientos, la naturaleza de la tecnología, detalles de la solución, el plan mismo del proyecto, miembros del equipo, contexto del negocio entre muchas otras cosas. Pero entonces ¿cómo lidiamos con estas adivinanzas? ¿cómo lidiamos con la incertidumbre?.

    El Cono

    Estas preguntas representan un problema que ya es bastante viejo. En 1981, Barry Boehm dibujó lo que más tarde en 1998 Steve McConnell llamó el Cono de Incertidumbre. El cono muestra que en un proyecto secuencial o en “cascada” que está en etapa de factibilidad normalmente daremos una estimación que está lejos de la realidad, en un rango de entre un 25% y un 400%. Esto es por ejemplo, que un proyecto de 40 semanas tomará entre 10 y 160 semanas. Para cuando se termine de obtener requerimientos nuestra estimación aun estará desfasada entre un -33% y un 50% . Para este punto nuestro proyecto de 40 semanas tomará entre 27 y 60 semanas. Imagine que pasa con esos proyectos que nunca tienen claros sus requerimientos.

    Cono de incertidumbre
    Cono de incertidumbre

    ¿Cómo lidiar con el Cono?

    Buffering (margen de error)

    Esto es utilizar un un porcentaje de tiempo y/o recursos para amortiguar el efecto de riesgos que se materializan. Hay que tener cuidado, una reacción común es meter el doble o el triple de tiempo a la estimación de un proyecto, esto NO es buffering, esto es hacer padding (acolchonar) lo cual NO ES una buena práctica. Dar un número demasiado grande, hará que los patrocinadores o clientes se resistan y no aprueban su proyecto. Deles un número demasiado bajo y usted correrá el riesgo de quedarse sin tiempo y dinero. Esto se vuelve doblemente arriesgado cuando usted está utilizando contratos fijos para su propuesta, donde hay aún más presión para mantener los costos bajos.

    Es importante que haga uso de datos históricos para comparar su proyecto actual con otros proyecto concluidos y obtenga números razonables y justificables para margen de error o buffering. Incluya procesos de postmortem o lecciones aprendidas al terminar cada proyecto, para así sustentar sus cifras de buffering en le futuro.

    cono de incertidumbre 2
    Thanks to agilenutshell.com

    Estimar en rangos

    Algo que me gusta de los enfoques ágiles para gestión de proyectos es ser honesto desde el principio y nunca utilizar cifras cerradas, sino ser transparentes y siempre usar rangos, sobre todo en proyectos que buscan innovar e intentar cosas nuevas donde existe mucha incertidumbre. Esto es por ejemplo:

    Mira. No sabemos cuánto tiempo se va llevar esto, sin embargo la siguiente es nuestra mejor apuesta basados en la información que tenemos hasta ahora. Pero si podemos llevar a cabo un par de iteraciones, podemos desarrollar algo, evaluar cuanto nos lleva y entonces tener una mucho mejor ideas de que tan grande es esto.

    Además presente la mejor estimación al momento como un rango. Esto puede ayudar a los patrocinadores del proyecto a decidir cual es el monto de riesgo que están dispuestos a aceptar.

    GaussCurve01

    Estimación relativa

    Han existido diversas investigaciones acerca de como hacer estimaciones de esfuerzo y se ha descubierto que las personas somos buenas estimando el tamaño de algo comparándolo con un referente (Software Development_Effort Estimation) . Por ejemplo, Alguien no puede decirle cuantos metros de alto mide el edificio en el que vive, pero sí puede decirle que es aproximadamente el doble de aquel otro. Usted puede aplicar este principio a los proyectos también

    buildings01

    Nota. Las aproximaciones ágiles utilizan interesante conceptos como Story Points e Ideal Days para hacer estimaciones relativas.

    Recursos incrementales

    Esta práctica se debería aplicar más a menudo o por lo menos más inteligentemente, esto es asignar recursos de manera periódica de tal manera que no se tenga que pedir una gran bolsa de dinero al inicio del proyecto.

    No es raro encontrar proyectos donde los patrocinadores proporcionan pagos por fases, sin embargo, aveces se cae en crear fases demasiado grandes o que no son periódicas. El objetivo es financiar regularmente en periodos cortos de tiempo que llamamos iteraciones y con ello hacer revisión del progreso.  Al final de cada iteración ese el momento donde tenemos la oportunidad para revaluar si vamos por el camino correcto y reportar números más precisos para la actualización de estimaciones con base en el conocimiento adquirido durante el tiempo transcurrido.

    iteracion01

    Esto no es una medida infalible, aún puede estimar mal. Pero sin duda es bueno obtener un financiamiento inicial que permite construir algo al equipo y ver cuánto tiempo tarda completando este avance, mientras que simultánemente aprende más acerca de lo que hay que lograr, de tal manera que se aprovecha esta experiencia para reducir la varianza de ese número inicial estimado.

    ¿Por qué sucede todo esto?

    Es indudable que siempre hay presión del sector financiero de las organizaciones para hacer estimaciones para todo un proyecto o para todo un año, aunque estas prácticas al final salgan contraproducentes 😀

    Lo mejor que puede hacer es permear este conocimiento en su organización, y recordar y comunicar constantemente que el objetivo de estimar no es adivinar el futuro, sino determinar si los objetivos del proyecto son realistas o incluso posibles.

    Algunos enlaces de interés:

    The Cone of Uncertainty

    Cone_of_Uncertainty

    El Enfoque Agile De La Planeacion

    Parte de la lista de temas para este post y la idea del gráfico con el solecito 🙂 fueron parcialmente basadas en artículos de agilenutshell.com

    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
  • gamification o gamificación

    Gamification o Gamificación

    Jugando mientras trabaja, estudia, ejercita o usa la web

    Aquellos que hemos sido o somos gamers (personas que gusta de los juegos y/o video juegos) sabemos que la idea o concepto de gamificaction (en sus aún más feas traducciones al español: gamificación, ludificación, juguetización o jueguización) ha andado rondando por siempre (unas 3 décadas). Recordemos frases viejísimas como: !aprende jugando!, ¡adelgace mientras se divierte!; si alguien es de México y de mis años recordará aquellos clásicos comerciales con la frase: ¡Con juguetes Mi Alegría…aprendemos…y jugamos! (sí, el tono de canción en su mente es inevitable si sabe de que hablo). Ahora, si bien el concepto es viejo, el término se acuñó gracias a un programador llamado Nick Pelling en 2002, pero en la realidad el concepto ha comenzado a atraer la atención tan solo en años recientes.

    Últimamente me he encontrado con mucha gente que utiliza términos deslumbrantes como mecánica de juego, dinámica de juego o pretende establecer como algo complejo y laborioso la implementación del concepto, confundiendo la idea básica de gamification o gamificación con complejas campañas tecnológicas de marketing y big data. Lo anterior puede ser verdad y se pueden crear sofisticadas implementaciones de gamification, pero basado en mi experiencia involucrado en equipos desarrollo multimedia desde 1998, puedo decir que mucho sobre aplicar gamification es solo sentido común.

    Sin ser o pretender ser un experto en gamification, a continuación le comparto algunas ideas, términos y aproximaciones que he aprendido con el tiempo:

    ¿Qué es gamification?

    Hay montones de sitios donde puede obtener buenas definiciones sobre lo que es gamification (ludificación, juguetización o jueguización), pero para ahorrar el viaje a Wikipedia le traduzco lo que dice la misma en su sitio en inglés:

    Gamification es la aplicación de elementos del diseño y principios para juegos en un contexto que no es de juego. Gamification comúnmente emplea los elementos que se utilizan en el diseño de juegos en los denominados  non-game contexts en un intento de mejorar la participación de los usuarios, productividad de organización,  aprendizaje, contratación y evaluación de empleados, facilidad de uso y la utilidad de sistemas, ejercicio físico, violaciónes de tráfico, apatía de votantes, entre otros. Una revisión de  investigación sobre gamification muestra que la mayoría de los estudios sobre gamification encuentran efectos positivos en su implementación. Sin embargo, existen diferencias individuales y contextuales.

    ¿Entendió eso? Básicamente significa, hacer una tarea más interesante adoptando la lógica de un juego. La manera más simple sería otorgando alguna especie de premio por hacer alguna tarea. El premio puede ser tan obvio como un trofeo o tan vago y subjetivo como simplemente buscar ofrecer diversión mientras se hace una tarea definida. Pero desde luego hay mucho más que se puede hacer, especialmente cuando el comportamiento humano es considerado.

    Pero para cumplir con el cliché, aquí mi definición personal:

    Gamification es aplicar la metáfora del juego a tareas comunes u obligatorias para influenciar el comportamiento, dar mayor motivación e incrementar el involucramiento, la preferencia o la lealtad.

    ¿Los videojuegos sirven de algo?

    Durante algunos años fui jugador de World of Warcraft, un video juego muy popular con millones de usuarios, el cual me parece que es un gran ejemplo de cómo estos juegos se pueden relacionar con el mundo real. Dentro de World of Warcraft uno de los objetivos es hacer dinero. Este dinero se puede obtener de varias maneras, pero la mayor parte es haciendo quests (misiones). Como resultado de resolver las misiones se obtiene dinero, el cual el jugador utiliza para obtener diferentes cosas como comprar ropa, armas, materiales, mejoras, información para nuevas misiones, etc. (¿le suena esto familiar?), esto es lo básico de cualquier negocio y parte importante de la vida. Día con día los jugadores de World of Warcraft se la pasan fabricando bienes, ofreciendo servicios y cumpliendo misiones. En el mundo real hacemos lo mismo, ganamos dinero por obtener determinado logro; gastamos ese dinero en comprar nuevas cosas o lo invertimos en algo que nos permita ganar más dinero o hacer algo de manera más eficiente o cómoda.

    Una pregunta válida sería ¿por qué estos jugadores están tan dispuestos a pasar tanto tiempo haciendo lo que bien podrían hacer en la vida real? La respuesta es fácil: porque es divertido.

    Adoptando la idea

    Es importante aclarar en este punto que no todo es acerca de video juegos, no veremos en futuro inmediato a alguien deseoso de jugar el último juego de Microsoft Project o de Word (aunque nunca se sabe 😉 ). Lo que estamos intentando hacer es tomar ideas de los juegos e insertarlos en alguna tarea de rutina, para que dicha tarea no tenga que ser aburrida hasta la muerte.

    Con todo lo anterior en mente tengo que ser honesto, a pesar de la relativamente reciente popularidad de la idea de gamification, no todo el mundo sabe lo que es, no todos están interesados, pareciera que para llegar a escuchar y a comprender el término se requiere de algo de curiosidad, ganas de saber lo que está en boga o simplemente tener un poco de geekness. Todo esto hace que vender la idea en una organización no sea tan fácil como pudiera parecer (por lo menos no acá en el tercer mundo). Recientemente participé en un proyecto donde le solicitaron al equipo del cual formaba parte, proponer ideas “innovadoras” (otro término sobrevendido) para mejorar la propuesta tecnológica de una organización, como parte de esto eventualmente propuse la idea de incorporar alguna estrategia inicial y modesta de gamification dando algunos ejemplos con detalle general pero concreto, no como algo precisamente “innovador” si no como algo que únicamente pretendía poner “al día” la propuesta tecnológica implementada al momento. Sorprendentemente aunque la organización con la que trabajaba desarrolla tecnología, el 90% de los involucrados no sabía de que diablos hablaba (shame on you Infotec); tuve que explicar la idea a analistas, subdirectores, directores, consultores y desarrolladores sin demasiado éxito (nadie es profeta en su propia tierra, aunque me gusta pensar que di luz a algún alma perdida).

    Tengo que agregar que la palabra gamification se escucha rara en inglés y las traducciones al español suenan aun peor, imagine decir en la reuniones todo el tiempo ludificación, juguetización o jueguización, estas palabras no ayudan mucho a la venta del concepto, como fruto de la experiencia llegué a la conclusión de que para adoptar la idea más fácilmente, hay que usar palabras como Productividad, Cambios de Comportamiento, Motivación y Preferencia (o engagement si prefiere el termino de marketing).

    Puntos, Medallas, Trofeos, Tablas de Posición

    Como responsable de un proyecto hace tiempo, requería hacer un aseguramiento de calidad en una serie de contenidos para cursos, con mucha información por revisar y muy poco tiempo, le dije a los miembros de mi equipo, que las 2 personas que encontraran más errores se ganaban un café grande diario durante toda la semana siguiente. Repentinamente tenía un juego en marcha.

    Afortunadamente, no siempre necesitamos recurrir a premios físicos reales en todos los casos. El manejo de información que los usuarios le proporcionan a su organización, sitio web o aplicación móvil puede ser utilizado para otorgar premios en diferente forma, las más comunes son:

    • Puntos
    • Medallas
    • Trofeos
    • Niveles
    • Tablas de Posición
    • Retos
    • Logros

    En un sitio o sistema web, por ejemplo, el concepto es utilizado ampliamente para que sus usuarios hagan más dentro del sitio o estén más tiempo expuestos a determinada información. Algún sitio donde se hacen trámites, puede hacer del llenado de sus formularios algo más ameno dando alguna especie de puntaje o jerarquía relacionada con un progreso por cada paso completado. Un sitio de ventas puede dar trofeos o medallas por las reseñas que un usuario coloca acerca de algún producto.

    Estos ejemplos son ciertamente algo muy simple ya que solo buscan motivar más a los usuarios a llevar a cabo una tarea, y desde luego que dejan mucho más para explotar el concepto, pero son un buen punto de inicio para explorar los beneficios de gamification.

    No todo es dinero

    Un argumento extraño y limitado que me topé al proponer gamification, es que bajo la suposición de alguien, gamification se trataba de dar incentivos económicos en forma de efectivo, cupones o descuentos, lo cual no necesariamente es cierto, y caer en ese supuesto usualmente crea preocupación y hasta rechazo por parte de los patrocinadores de cualquier proyecto o cadena de producción (¿qué pasa con tus directores Infotec? :D). El dinero es un buen motivador para un usuario (siempre lo es), pero hay una palabra en inglés que encontrará mucho en los blogs y libros sobre gamification y que ya mencioné, esta es engagement, esto quiere decir que el dinero siempre lo motivará a hacer alguna tarea pero no necesariamente hará que se “enganche” o que disfrute con la misma.

    ¿Qué más?

    Si usted comienza a profundizar más en los temas de gamification, eventualmente se dará cuenta que hay mucho más que solo depender de incentivos y ciertamente mucho más que depender del dinero. Usted estará utilizando el comportamiento humano y el famoso cerebro reptiliano, es decir, usará a su favor algo que está dentro de la naturaleza humana, jugar. Usando gamification usted estará apelando a sentimientos de orgullo y necesidad de reconocimiento, con lo cual podría lograr incluso más que ofreciendo dinero.

    Para concluir

    Le dejo videos de algunos proyectos educativos donde apliqué gamification (algo viejos pero vigentes para entender el concepto) y algunas bibliografías que encontré útiles e interesantes:

    Libros:

    1. Why we do what we do: understanding self-motivation
    2. For the Win: How Game Thinking Can Revolutionize Your Business
    3. A Theory of Fun for Game Design

    Videos:

     Interactivo Prevención de Riesgos

    Interactivo Desarrollo Económico de México

    Juego de cartas para ayudar a aprender inglés HTML5

    Enlaces relacionados:

    Gamification Y LinkedIn

    U.S. Army – America’s Army (Cómo el ejército de E.U.A. ahora utiliza gamification para atraer nuevos reclutas)

    Mint (Empresa con aplicaciones fintech que utiliza gamification para las finanzas personales)

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

    3 Comments
  • HTML unknow

    ¡HTML5, HTML Living, HTML Next y el drama!…¿HTML6?

    HTML_unknow
    Durante las charlas que he tenido oportunidad de dar ante una audiencia o bien por alguna red social me he topado con algunos planteamientos que hacen referencias a HTML6 (OMG!!!!) o bien a HTML Living y/o HTML Next, a que HTML5 ya caducó (OMG again!!!) y otra serie de afirmaciones o preguntas que van de lo veraz a lo absurdo, pasando por verdades a medias. Para aclarar un poco la situación he decidido hacer esta entrada y describir lo que pasa:

    Algo de contexto.

    HTML5 ha sido una exitosa tecnología apoyada por muchas organizaciones con diferentes perfiles e intereses relacionados de diferente forma con el desarrollo web, como son empresas, universidades, organizaciones civiles,etc., pero el grupo más representativo y con mayor historia aunque no siempre el más influyente, ha sido el World Wide Web Consortium (W3C) el cual ha generado muchas recomendaciones para la world wide web, estas recomendaciones van dirigidas mayormente al desarrollo del HTML y tecnologías conexas. Sin embargo la W3C no ha sido el único grupo haciendo recomendaciones y trabajando constantemente para evolucionar el HTML y tecnologías relacionadas desde su perspectiva, otro de estos grupos el cual sin duda obtuvo gran relevancia es el Web Hypertext Application Technology Working Group (WAHTWG). Ambos grupos han sido importantes gracias a sus iniciativas y a sus miembros, los cuales incluyen entre otros a organizaciones tan influyentes como Google, Microsoft, Apple, Adobe, Mozilla Fundation y Opera Software.

    En el 2007 ambos grupos deciden unir fuerza y utilizar la especificación HTML propuesta por WAHTWG como punto de partida para continuar con el desarrollo de la especificación HTML, lo cual se conoció eventualmente como HTML5. Dado esto, todas las nuevas especificaciones se comenzaron a publicar de manera oficial por me dio de W3C, sin embargo el principal y único editor oficial con la facultad de publicación fue el miembro de WAHTWG, Ian Hickson.

    El ascenso de HTML5.

    Gracias al esfuerzo conjunto de ambas organizaciones y sus miembros HTML5 comenzó a hacerse popular, adquiriendo muchísima más relevancia extra gracias el exponencial crecimiento de dispositivos móviles y las ventajas técnicas que representa HTML5 sobre las alternativas dominantes hasta el momento. El punto quizá más relevante para la popularidad de HTML5 surgió gracias a las polémicas declaraciones del entonces CEO de Apple Steve Jobs, quien puso de manifiesto las desventajas de desarrollar para los nuevos dispositivos utilizando el entonces estándar de facto en la realización de implementaciones de rico contenido gráfico, Flash.

    Desde luego un factor esencial para el éxito de HTML5 es que W3C  incluye entre sus miembros  a aquellos que también son los fabricantes de los principales navegadores, y que estos tratando de apoyar la nueva especificación dieron soporte a HTML5 haciendo que Chrome, Explorer, Safari, Mozilla y Opera lo soportaran aunque con diferentes grados de avance en su implementación. Todas estas circunstancias favorecieron a que HTML5 pudiera tener nombre, presencia, crecimiento e incluso logotipo que lo identifica ante propios y extraños.

    El drama.

    Desafortunadamente no todo es felicidad, como sucede en todas las organizaciones (creo) existe desacuerdos  y complicaciones. Desde el 2011 se escapaba uno que otro rumor que giraba en torno a diferencias entre W3C y WAHTWG, sin embargo el punto de quiebre es cuando efectivamente estas organizaciones deciden separarse a mediados del 2012 e Ian Hickson publica una carta abierta donde explica el status de la relación entre ambos grupos. Pero ¿que pasó en realidad? bueno pues todo son versiones de diferentes fuentes y no puedo corroborarlo todo, pero si me permite resumiré todo lo que he leído en 3 puntos persistentes en la mayor parte de las fuentes consultadas:

    • W3C está más preocupado por la estandarización de HTML mientras que WAHTWG está más preocupado por la implementación de HTML. Esto significa que la W3C está priorizando más el orden y la consistencia de la especificación para que los fabricantes de navegadores y relacionados cuenten con una referencia más precisa y mucho más compatible, mientras que WAHTWG considera que lo más importante es dar más y mejores características innovadoras a HTML para ampliar la gama de posibilidades en la creación de todo tipo implementaciones.
    • Descontento del editor. Ian Hickson es una persona que sin duda se ha hecho de un nombre en la industria y comunidad web ya que ha trabajado para diferentes empresas de mucho peso y ha colaborado con el desarrollo de varias especificaciones importantes, actualmente como empleado de Google y anteriormente como único editor oficial de la especificación HTML5, parte de su trabajo consistía en analizar, corregir y conciliar las diferencias de las propuestas técnicas de la W3C y WAHTWG con respecto a la especificación, lo cual lo llevó eventualmente manifestar su inconformidad con las implicaciones y diferencias entre las propuestas y en tener que unificarlas. Otro factor de desacuerdo es la visión de Hickson acerca de irrelevancia de usar versiones en la especificación HTML, ya que desde su punto de vista no debería existir HTML4, HTML5, HTML6, etc., sino simplemente HTML con su intrínsica evolución.
    • Intereses y DRM. Hasta el día de hoy existe muchas críticas hacia la W3C, ya que varios grupos argumentan que la insistencia de este grupo por estandarizar HTML obedece principalmente al interés de las empresas más grandes que son miembros de la organización ya que buscan maneras de patentar y hacer desarrollos cerrados, lo que incluye la posibilidad de integrar DRM a la especificación. Algunas de las voces que suman ha estas críticas son la Free Software Foundation, Web Content Accessibility Guidelines Working Group (WCAGWG), la propia WAHTWG y su miembro Ian Hickson.

    Las consecuencias…HTML Living y HTML Next

    La especificación HTML5 ha tenido diferentes “deadlines”…2011, 2012, 2014, 2022, todos estos años han sido mencionados para terminar la especificación, pero la verdad sea dicha, nadie sabe a ciencia cierta cual será la fecha final o la versión buena, ni siquiera todas las agrupaciones mencionadas, ya que todo obedece a muchos factores incluyendo desacuerdos y reconciliaciones (sí, cual telenovela de quinceañer@s despechad@s).

    La última afirmación extraoficial es que W3C se ha fijado el 2014 para terminar la especificación HTML5 y desde ahí comenzará la especificación de lo que llama HTML Next o HTML5 Next. Por su parte,  WAHTWG ha comenzado con lo que llama la especificación HTML Living.

    ¿HTML6?

    Permítame aclaro esto de una vez por todas, hoy NO EXISTE ALGO QUE SE LLAME HTML6, lo que a algunas personas les ha dado por llamar HTML6 es precisamente al conjunto de los conceptos HTML Living y HTML Next, los cuales ningún navegador soportará todavía, HTML6 NO es un nombre oficial ni nada por el estilo, mañana tal vez, pero hoy por hoy no lo es.

    ¿Cómo nos afecta esto a los desarrolladores?

    !No lo sabemos!, antes de que cunda el pánico y corra a buscar libros y manuales de HTML Living y HTML Next, la realidad es que la última palabra la tendrán los fabricantes de navegadores que son los que decidirán a que especificación apoyar en su momento, pero tenga presente que las cosas en el mundo de la tecnología cambian muy rápido y a veces de manera inesperada, y que las empresas y las organizaciones son finalmente dirigidas por personas que pueden cambiar de opinión en cualquier momento, ¿alguien se acuerda del choque Blu-Ray VS HD-DVD, donde supuestamente ganó el BR? (aunque el verdadero ganador fue el streaming). Por otro lado, si quiere saber el peor de los casos, este sería que los desarrolladores tuviéramos que lidiar con dos especificaciones HTML.

    ¿Debería dejar de aprender HTML5?

    NOOO!! no cometa ese error, HTML5 sigue vigente y avanzando y aun si HTML Living y HTML Next ven la verdadera luz, ambas especificaciones partirían desde lo que hoy es HTML5, de manera que es todo lo contrario, hay que continuar aprendiendo HTML5.

    Todo por ahora, cualquier comentario, pregunta, aclaración o queja con gusto en los comentarios de este post o en @ManuGekko

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

    No Comment
  • mega menu

    Cómo construir un megamenú

    Counstruir megamenú

    Megamenú

    Continuamente en la construcción  de sistemas web se requiere de la creación de menús, una necesidad común es tener que hacer menús que contengan submenús a diversos niveles, para este tipo de menús existen diversos recursos en la web que nos muestran cómo hacerlos, incluso hice una entrada donde mostré como crear una barra emergente la cual usualmente se utiliza para colocar botones de menú, ahora quizá por casualidad he visto últimamente los llamados megamenús, los cuales utilizan una estructura o layout más elaborada como los que se muestran aquí, en lugar de solo algunos “hijos” , de manera que en esta ocasión aprenderemos como hacer un bonito menú de este tipo utilizando HTML5 y CSS3 que tien la apariencia mostrada en la portada de esta entrada.

    1. Creación de la barra principal.

    La estructura básica de la barra principal del menú es muy simple, solo consta de una lista no ordenada con el tag <ul> y dentro de cada elemento de la lista se coloca una imagen (o lo que usted prefiera).

    <ul id="menu">
       <li><a href="#"><img src="opc01.png" /></a></li>
       <li><a href="#"><img src="opc02.png" /></a></li>
       <li><a href="#"><img src="opc03.png" /></a></li>
       <li><a href="#"><img src="opc04.png" /></a></li>
    </ul>

    Estilos al contenedor.

    El elemento  <ul id=”menú”> funciona como contenedor, al cual procederemos a darle estilos CSS3. En la siguiente definición se indica la eliminación del bullet que aparece comúnmente en las listas HTML, se coloca una distancia de 10 pixeles en los márgenes izquierdo y derecho, se establece el alto y ancho de la barra, la distancia interna entre el extremo de la barra y los elemento que se coloque dentro de ella, se establece un efecto de gradiente y finalmente se indica el radio para que nuestra barra tenga esquinas redondeadas:

    #menu {
       list-style:none;
       margin: 0px 10px;
       height: 57px;
       width: 900px;
       padding: 3px 5px 0px 5px;
       /*Gradientes*/
       background: -webkit-linear-gradient(top, #7f7e7e, #3f3f3f);
       background: -moz-linear-gradient(top, #7f7e7e, #3f3f3f);
       /*Esquinas redondeadas*/
       border-radius: 10px;
    }

    Estilos a los elemento de la lista.

    La definición del siguiente estilo hará que cada elemento del menú se despliegue uno  a la izquierda de otro y en bloque (como lo hace un encabezado o un párrafo) , la posición será relativa al elemento padre (ul en esta caso), las imágenes que se colocarán tendrá una distancia de 2 pixeles a todos lados excepto arriba que será de 6 pixeles, la distancia entre elementos será de 10 pixeles, se establece el ancho, tipo y color del borde de cada elemento, y por último un fondo con gradiente:

    #menu li {
       float: left;
       display: block;
       position: relative;
       padding: 6px 2px 2px 2px;
       margin-right: 10px;
       border:  1px solid #777777;
       border-radius: 5px 5px 5px 5px;
       background: -webkit-linear-gradient(top, #7f7e7e, #3f3f3f);
       background: -moz-linear-gradient(top, #7f7e7e, #3f3f3f);
    }

    Enseguida agregamos un estilo para exactamente el mismo elementos que afectamos con el estilo anterior, ¿por qué?  podría preguntarse,  la razón es que haremos que el siguiente estilo luzca diferente cuando el usuario coloca el puntero del ratón sobre el elemento del menú actual. El estilo, con la ayuda de pseudoclase hover, cambiará el color del  borde y los colores de gradientes de fondo:

    #menu li:hover  {
       border: 1px solid #bfbfbf;
       /* Color de fondo y gradientes */
       background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
       background: -webkit-linear-gradient(top, #F4F4F4, #EEEEEE);
    }

    Para terminar el primer paso agregaremos un sencillo estilo que afectará  a los enlaces que se coloquen dentro de los elementos de menú:

    #menu li a {
       font-size: 14px;
       color: #EEEEEE;
       display: block;
       outline: 0;
       text-decoration: none;
       text-shadow: 1px 1px 1px #000;
    }

    En mi caso estoy utilizando ciertas imágenes  como elementos del menú pero usted puede utilizar las propias o sustituirlas por texto,  la siguiente imagen da una idea de lo que aproximadamente obtendrá:

    2. Haciendo los elementos emergentes (Drop Down).

    La estructura básica de los elementos emergentes consiste únicamente de que un tag <div> donde se coloca todo el contenido del elemento drop down:

    <ul id="menu">
       <li>
          <a href="#"><img src="opc01.png" /></a>
          <div class="emergente_1columna">
             Contenido del elemento emergente
          <div>
       </li>
       <li>
          <a href="#" ><img src="opc02.png" /></a>
          <div class="emergente_2columnas">
             Contenido del elemento emergente
          <div>
       </li>
    </ul>

    En la estructura de un menú drop down tradicional en lugar de divs anidaríamos otra lista, pero como en este caso deseamos un elemento mucho más elaborado utilizamos <div> para colocar lo que deseemos dentro.

    Estilos para contenedor del elemento emergente.

    He de mencionar  que la forma de organizar las columnas en algún momento la vi en el código de alguna página que implementaba un mega menú, pero no recuerdo cual fue esa página, así que espero que el autor no se moleste por la falta de crédito, aunque en realidad, como veremos,  es sencillo.

    El estilo comienza indicando que el posicionamiento es respecto a la ventana del navegador position: absolute, se envía al elemento a una gran distancia a la izquierda para que no se vea en el navegador inicialmente,  se colocan las indicaciones para posicionar los elementos dentro de nuestro contenedor, después se crea un gradiente como fondo y se finalmente redondean las esquinas.

       .emergente_1columna,
       .emergente_2columnas,
       .emergente_3columnas,
       .emergente_4columnas {
       /*Para desaparecer al elemento inicialmente*/
       position: absolute;
       left: -999em;
       text-align: left;
       padding: 10px 5px 0px 5px;
       border:1px solid #777777;
       margin-top: 3px;
       /*Gradiente de fondo*/
       background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
       background: -webkit-linear-gradient(top, #EEEEEE, #BBBBBB);
       /*Esquinas redondeadas*/
       border-radius: 5px 5px 5px 5px;
    }

    Lo que resta en este paso es indicar el tamaño para cada elemento emergente (div) y reposicionar al mismo cuando el puntero del mouse está sobre el elemento del menú en la barra principal con la pseudoclase hover.

       .emergente_1columna {width: 160px;}
       .emergente_2columnas {width: 280px;}
       .emergente_3columnas {width: 480px;}
       .emergente_4columnas {width: 640px;}
    
       #menu li:hover .emergente_1columna,
       #menu li:hover .emergente_2columnas,
       #menu li:hover .emergente_3columnas,
       #menu li:hover .emergente_4columnas {
       left:-50%;
       top:auto;
    }

    Estilos para las columnas dentro del contenedor del elemento emergente.

    Como ha podido observar en los estilos anteriores, estamos utilizando clases de acuerdo al número máximo de columnas que habrá dentro del elemento emergente, en este caso usamos solo 4 pero puede usar tantas como usted desee, ahora crearemos contenido y estilos que actuarán sobre la(s) columnas que contiene cada elemento emergente:

    <li>
       <a href="#" title="Opción 1" ><img src="opc01.png" /></a>
       <div class="emergente_1columna">
          <div class="col_1">
              <ul>
                <li><a href="#">Superman</a></li>
                <li><a href="#">Batman</a></li>
                <li><a href="#">GreenLantern</a></li>
                <li><a href="#">Shazam!</a></li>
                <li><a href="#">Wonder Woman</a></li>
                <li><a href="#">Flash</a></li>
                <li><a href="#">Wolverine</a></li>
              </ul>
          </div>
       </div>
    </li>

    Los estilos:

       .col_1,
       .col_2,
       .col_3,
       .col_4 {
       display: inline;
       float: left;
       position: relative;
       margin-left: 5px;
       margin-right: 5px;
    }
    
    .col_1 {width:150px;}
    .col_2 {width:270px;}
    .col_3 {width:410px;}
    .col_4 {width:550px;}

    La manera de usar estos estilos en el código HTML es la siguiente:

    <ul id="menu">
       <li><a href="#" class="drop">5 Columns</a>
       <div class="dropdown_4columns">
       <div class="col_4">

    Esto es un contenido a 5 columnas.

    </div>
        <div class="col_1">

    Esto es un contenido a una columna.

    </div>
        <div class="col_2">

    Esto es un contenido a 2 columnas.

        </div>
       .
       .
       .
       </li>
    </ul>

    Y asi sucesivamente.

    Lo que obtendrá como resultado será algo similar a esto:

    3. Colocando el contenido

    En este tercer y último paso agregaremos contenido a los elementos emergentes y por supuesto haremos los estilos correspondientes, pero antes de continuar debemos de tener claro que aunque hablaremos del contenido creado para el ejemplo esta es la parte donde usted puede crear el propio y sus estilos con total libertad, de manera que los elementos emergentes muestran la información que usted desee  de la forma que más le convenga, el siguiente código es solo un ejemplo.

    Uno de los tags que manejo para mi contenido es <p> para crear párrafos, y les asigno el siguientes estilo con objetivos muy simples, solo se establece el alto de cada renglón del párrafo, el tamaño de la fuente, se orilla a la izquierda y se le coloca una sombra blanca.

    #menu p {
        line-height: 15px;
        font-size: 12px;
        text-align: left;
        text-shadow: 1px 1px 1px #FFFFFF;
    }

    Para el caso de este ejemplo utilizo más listas para incluir dentro del contenido, por lo que se agregan más elementos <ul> y <li>, como estas listas no tienen que ver con las listas que forman parte de la estructura del megamenú se asignan nuevos estilos para evitar usar los estilos de listas para el resto del menú por lo que se refrescan los estilos para tener otro apariencia para estos items:

    #menu li ul {
       list-style:none;
       padding:0px;
       margin:0 0 12px 0;
    }
    
    #menu li ul li {
       font-size: 12px;
       line-height: 25px;
       position: relative;
       text-shadow: 1px 1px 1px #ffffff;
       padding: 5px;
       margin:0 0 5px 0;
       float: none;
       text-align: left;
       width: auto;
    }
    
    #menu li ul li:hover {
       padding: 5px;
       margin:0 0 5px 0;
       width:auto;
       cursor: pointer;
    }

    Y finalmente incluí algunos estilos para un par de imágenes que se utilizan en el ejemeplo con cambios muy simples como orientar a la izquierda e incluir una sombra.

    .img_left {
       width: auto;
       float: left;
       margin: 5px 10px 1px 1px;
    }
    
    .imgshadow {
       background:#FFFFFF;
       padding:4px;
       border:1px solid #777777;
       margin-top:15px;
       -moz-box-shadow:0px 0px 5px #666666;
       -webkit-box-shadow:0px 0px 5px #666666;
       box-shadow:0px 0px 5px #666666;
    }

    El código final.

    El código completo luce como se muestra a continuación, tenga presente que este ejemplo solo ha sido probado en Chrome y en Firefox.

    HTML:

    <!DOCTYPE HTML>
    <html>
       <head>
          <meta charset="iso-8859-1">
          <title>Mega menú</title>
          <link rel="stylesheet" type="text/css" href="styles.css" />
       </head>
       <body>
           <ul id="menu">
               <li>
               <a href="#" title="Opción 1" ><img src="opc01.png" /></a>
                   <div class="emergente_1columna">
                      <div class="col_1">
                         <ul class="simple">
                             <li><a href="#">Superman</a></li>
                             <li><a href="#">Batman</a></li>
                             <li><a href="#">GreenLantern</a></li>
                             <li><a href="#">Shazam!</a></li>
                             <li><a href="#">Wonder Woman</a></li>
                             <li><a href="#">Flash</a></li>
                             <li><a href="#">Wolverine</a></li>
                         </ul>
                      </div>
                  </div>
               </li>
               <li>
                   <a href="#" title="Opción 2" ><img src="opc02.png" /></a>
                   <div class="emergente_2columnas"><!-- Begin 2 columnas container -->
                      <div class="col_2">
                         <h2>Algún Encabezado</h2>
                      </div>
                   <div class="col_2">

    Este es un ejemplo de layout que se puede utilizar, usted puede modificarlo como desee.

    Las posiblidades de CSS3 hace que puede personalizar el texto con resultados agradables.

           .
           .
           .
     
        </div>
    <div class="col_2">
        <h2>Otro encabezado</h2>
    </div>
    <div class="col_1">
        <img src="ChromeFirefox.jpg" class="imgshadow" alt="" /></div>
        <div class="col_2">

    Este menú ha sido probado en Chrome y Firefox.

       </div>
    </div>
    </li>
    <li>
       <a href="#" title="Opción 3" ><img src="opc03.png" /></a>
       <div class="emergente_3columnas"><!-- Begin 3 columnas container -->
       <div class="col_3">
       <h2>Listas</h2>
    </div>
    <div class="col_1">
       <ul class="greybox">
          <li><a href="#">HTML5</a></li>
          <li><a href="#">CSS3</a></li>
          <li><a href="#">JavaScript</a></li>
       </ul>
    </div>
    <div class="col_1">
       <ul class="greybox">
          <li><a href="#">SVG</a></li>
          <li><a href="#">WebGL</a></li>
          <li><a href="#">Más...</a></li>
       </ul>
    </div>
    <div class="col_1">
       <ul class="greybox">
          <li><a href="#">Chrome</a></li>
          <li><a href="#">FireFox</a></li>
          <li><a href="#">Opera</a></li>
       </ul>
    </div>
    <div class="col_3">
       <h2>Otra imagensita en este ejemplo</h2>
    </div>
    <div class="col_3">
       <img src="img1.png" class="img_left imgshadow" alt="" />Dolor hac. Turpis augue nec adipiscing turpis enim porta montes, porttitor integer nisi tincidunt nec nisi, scelerisque duis, in ultricies rhoncus cursus duis nec placerat dignissim cum adipiscing placerat penatibus, egestas massa dolor tincidunt scelerisque scelerisque quis porta phasellus. Auctor cras et. Natoque cursus ridiculus vut urna facilisis! Nunc mattis, tincidunt, platea sed ac? Etiam, turpis! Etiam parturient sed enim? Nisi, integer, aenean augue? Pellentesque, odio pulvinar massa, sit, porttitor urna lorem! Arcu sed et, et non, lectus! Tristique, ultricies cras? Tristique turpis hac. Sociis sit augue! Tristique, dapibus rhoncus aliquet, porta nunc ac, dictumst ac, vel platea tortor, non placerat sagittis, integer auctor mus lundium in enim. Turpis quis. Risus sociis, purus magna, enim, sagittis, mauris, eu in amet.<a href="#">Más...</a>
    
    </div>
       <!-- End 3 columnas container --></li>
       <li>
          <a href="#" title="Opción 4" ><img src="opc04.png" /></a>
          <div class="emergente_4columnas"><!-- Begin 4 columnas container -->
          <div class="col_4">
              <h2>Este es un header cualquiera</h2>
          </div>
          <div class="col_1">
              <h3>Lista de enlaces</h3>
              <ul>
                  <li><a href="#">Warcraft</a></li>
                  <li><a href="#">Starcraft</a></li>
                  <li><a href="#">Diablo</a></li>
                  <li><a href="#">Halo</a></li>
                  <li><a href="#">Ninja Gaiden</a></li>
              </ul>
          </div>
          <div class="col_1">
             <h3>Otra lista</h3>
             <ul>
                <li><a href="#">Android</a></li>
                <li><a href="#">iOS</a></li>
                <li><a href="#">Windows</a></li>
                <li><a href="#">WebOS</a></li>
                <li><a href="#">BlackBerry</a></li>
             </ul>
          </div>
          <div class="col_1">
              <h3>Más enlaces</h3>
              <ul>
                  <li><a href="#">C++</a></li>
                  <li><a href="#">C#</a></li>
                  <li><a href="#">Java</a></li>
                  <li><a href="#">HTML5</a></li>
                  <li><a href="#">ActionScript</a></li>
              </ul>
          </div>
          <div class="col_1">
              <h3>Otros...</h3>
              <ul>
                 <li><a href="#">Candice</a></li>
                 <li><a href="#">Adriana</a></li>
                 <li><a href="#">Joanna</a></li>
                 <li><a href="#">Marissa</a></li>
                 <li><a href="#">Otros...</a></li>
              </ul>
          </div>
       </div>
    <!-- End 4 columnas container --></li>
        </ul>
        </body>
    </html>

    CSS3:

    @charset "iso-8859-1";
    /* CSS Document */
    
    body{
        font-size:14px;
        font-family:Arial, Helvetica, sans-serif;
        text-align:left;
    }
    
    #menu {
        list-style:none;
        margin: 0px 10px;
        height: 57px;
        width:900px;
        padding: 3px 5px 0px 5px;
        /*Gradientes*/
        background: -webkit-linear-gradient(top, #7f7e7e, #3f3f3f);
        background: -moz-linear-gradient(top, #7f7e7e, #3f3f3f);
        /*Esquinas redondeadas*/
        border-radius: 10px;
    }
    
    #menu li {
       float:left;
       display:block;
       position:relative;
       padding: 6px 2px 2px 2px;
       margin-right: 10px;
       border: 1px solid #777777;
       border-radius: 5px 5px 5px 5px;
       background: -webkit-linear-gradient(top, #7f7e7e, #3f3f3f);
       background: -moz-linear-gradient(top, #7f7e7e, #3f3f3f);
    }
    
    #menu li:hover {
        border: 1px solid #bfbfbf;
        /* Color de fondo y gradientes */
        background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
        background: -webkit-linear-gradient(top, #F4F4F4, #EEEEEE);
    }
    
    #menu li a {
        font-size: 14px;
        color: #EEEEEE;
        display: block;
        outline: 0;
        text-decoration: none;
        text-shadow: 1px 1px 1px #000;
    }
    
    /* Estilos para las columnas */
        .emergente_1columna,
        .emergente_2columnas,
        .emergente_3columnas,
        .emergente_4columnas {
        /*Para desaparecer al elemento inicialmente*/
        position: absolute;
        left: -999em;
        text-align: left;
        padding: 10px 5px 0px 5px;
        border:1px solid #777777;
        margin-top: 3px;
        /*Gradiente de fondo*/
        background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
        background: -webkit-linear-gradient(top, #EEEEEE, #BBBBBB);
        /*Esquinas redondeadas*/
        border-radius: 5px 5px 5px 5px;
    }
    
    .emergente_1columna {width: 160px;}
    .emergente_2columnas {width: 280px;}
    .emergente_3columnas {width: 480px;}
    .emergente_4columnas {width: 640px;}
    
    #menu li:hover .emergente_1columna,
    #menu li:hover .emergente_2columnas,
    #menu li:hover .emergente_3columnas,
    #menu li:hover .emergente_4columnas {
       left:-50%;
       top:auto;
    }
    
    .col_1,
    .col_2,
    .col_3,
    .col_4 {
       display:inline;
       float: left;
       position: relative;
       margin-left: 5px;
       margin-right: 5px;
    }
    
    .col_1 {width:150px;}
    .col_2 {width:270px;}
    .col_3 {width:410px;}
    .col_4 {width:550px;}
    #menu li ul {
       list-style:none;
       padding:0px;
       margin:0 0 12px 0;
    }
    
    #menu li ul li {
       font-size: 12px;
       line-height: 25px;
       position: relative;
       text-shadow: 1px 1px 1px #ffffff;
       padding: 5px;
       margin:0 0 5px 0;
       float: none;
       text-align: left;
       width: auto;
    }
    
    #menu li ul li:hover {
       padding: 5px;
       margin:0 0 5px 0;
       width:auto;
       cursor: pointer;
    }
    
    #menu p {
       line-height: 15px;
       font-size: 12px;
       text-align: left;
       text-shadow: 1px 1px 1px #FFFFFF;
    }
    
    /*Para las imagenes en los submenus*/
    .img_left {
       width: auto;
       float: left;
       margin: 5px 10px 1px 1px;
    }
    
    .imgshadow {
       background:#FFFFFF;
       padding:4px;
       border:1px solid #777777;
       margin-top:15px;
       -moz-box-shadow:0px 0px 5px #666666;
       -webkit-box-shadow:0px 0px 5px #666666;
       box-shadow:0px 0px 5px #666666;
    }

    Código descargable aquí.

    Estos son algunos libros que le pueden ayudar:

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

    No Comment
  • Mitos y Realidades del HTML5 (Presentación)

    Durante mis últimas visitas a algunas instituciones de educación superior he utilizado como material de apoyo durante las charla sobre HTML5 una presentación que elaboré basado en la idea original de Marcin Wichary.

    He de aclarar que  la versión original está muy bien y el código está disponible de forma  libre, pero no utilicé nada del código de Wichary debido  a que es un poco extenso y un tanto desordenado (me parece),  por lo que hice mi propia implementación pero manteniendo el mismo concepto visual, de manera que mi versión no sirve para entender la versión de Wichary así que sugiero que los vea como ejemplos distintos si desea meterse al código.

    Una vez aclarado lo anterior, la presentación muestra una serie láminas o slides que hablan de los mitos y realidades que rodean a HTML5, cada lámina tiene un comentario que le da contexto, para ver los comentarios hay que presionar la tecla 2 y para navegar entre slides simplemente hay que usar las teclas direccionales.

    El contenido de esta presentación fué creada con la idea de servir como introducción al HTML5 utilizando al mismo HTML5 como medio, es decir,  es una presentación creada usando HTML5 para enseñar HTML5 (interesante ¿no?), de manera que puede servir como presentación de introducción al HTML5 o como ejemplo de código HTML5 implementado para una pequeña aplicación multimedia.

    Pongo a su disposición esta ejemplo para que haga con el ¡lo que quiera!, modifíquelo, bórrelo, descompóngalo, recompóngolo, increméntelo, decreméntalo…en fin, lo que usted quiera, si desea darme crédito se lo agredeceré y si no, no importa porque seguramente nunca me enteraré  :)))

    No he comentado bien el código (¡sorry!) y normalmente casi todo los nombres de variables y funciones los hago en inglés, espero que esto no le represente mayor problema,  en realidad la lógica es sencilla (si se le complica siempre puede enviarme un mensaje y trataré de ayudarle con algún tip), pero no se desanime, si tiene bases de programación y le dedica un poco de tiempo estará manejando y modificando el código antes de lo que cree.

    Debo aclarar también que este código fué creado para Google Chrome por lo que podría no verse adecuadamente en otros navegadores, sin más le dejo el enlace para descargar el código:  HTML5MitosRealidades.rar

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

    2 Comments
  • HTML o XHTML

    Diferencia entre HTML y XHTML

    HTML o XHTML

    Sr. Quino por favor no me demande !es por una buena causa!.

    Últimamente me he topado mucho con la pregunta de ¿cuál es la diferencia entre HTML y XHTML?, para los programadores con experiencia la respuesta puede parecer obvia, pero la verdad es que para la persona que comienza a sumergirse dentro del desarrollo web es de hecho una buena pregunta que se ha de contestar en esta ocasión.

    Un archivo HTML es básicamente un archivo de texto común y corriente donde se colocan una serie de etiquetas que tienen sentido para un servidor web y para los navegadores que interpretan su contenido para finalmente mostrarlo al usuario. Sin embargo las reglas que utiliza un navegador para interpretar un archivo HTML no son precisamente estrictas, por lo que a veces al creador de un documento HTML se le “perdonan” algunas imprecisiones e incluso errores. Esto puede parecer una ventaja, pero en muchos casos el programador de páginas debería de darse cuenta de algunos de estos errores que pueden quedar desapercibidos gracias a la permisibilidad otorgada por HTML, o simplemente se pueden generar malos hábitos de programación junto con algunas ideas erróneas.

    Es para corregir esta situación que se crea XHTML acrónimo en inglés de eXtensible Hypertext Markup Language, que inicialmente comenzó a tratar a HTML simplemente como un documento XML, y como tal debe cumplir reglas más estrictas en cuanto a la escritura de tags o etiquetas, es decir, se debe ser sintáctimente correcto (todo en minúsculas, elementos correctamente cerrados, etc.), como por ejemplo, una etiqueta de quiebre de línea: si escribimos <br> en el esquema permisivo de HTML no habrá  ningun problema, pero si de la misma manera se coloca dentro del formato XHTML ese código será incorrecto, por lo que se debe escribe <br />, es decir, se debe cerrar el elemento como sucede en un archivo XML.

    Esencialmente XHTML busca que los programadores creen documentos sintácticamente correctos y con esto lograr código más limpio, correcto, consistente de mejor legibilidad. Para que todo tenga sentido, adicionalmente se debe especificar el tipo MIME de documentos creados como XHTMLs, mientras que para un documento HTML el tipo MIME es text/html para un XHTML es application/xhtml+xml . Adicionalmente durante la evolución de XHTML se integró la validación contra un DTD, que no es más que otro documento XML que  colecciona los elementos (etiquetas) válidos en un XHTML, si algo no está bien escrito editores modernos podían señalar el error para que el programador se diera cuenta e hiciera las correcciones necesarias.

    Hasta aquí cualquiera podría pensar: OK entonces hagamos todo en XHTML, pero durante la existencia de XHTML este siempre tuvo el problema de que varios servidores web no generaban el código escrito con el tipo MIME application/xhtml+xml  sino simplemente como text/html , o peor aun, los programadores de páginas web a pesar de respetar las reglas sintácticas de XHTML simplemente no señalaban el tipo application/xhtml+xml, lo cual causa que los documentos sigan siendo tratados con el tipo text/html. Sumado a esto, la validación con el DTD no garantiza que la página en cuestión sea corregida ya que a pesar de señalar algún error, si el programador no lo soluciona la mayoría de los navegadores simplemente  interpretarán  ese código permisivamente, justo como pasa con el HTML común.

    Debido a lo anterior XHTML realmente nunca funcionó como un real sustituto de HTML (que era lo que se buscaba), la W3C intentó seguir evolucionando XHTML  con una versión 2 pero con la llegada de la especificación HTML5 desistió de ello, incluyendo en HTML5 muchas de los requerimiento sintácticos de XHTML.

    Algunos que ya han comenzado en el camino de HTML5 podrán decir:  ¿pero que hay de XHTML5?, efectivamente existe XHTML5, pero este NO es exactamente una evolución del XHTML antiguo (no hubo versión 2, 3 ni 4 de XHTML), pero sí hay relación en el sentido de que XHTML5 trata al código HTML5 como un XML y lo valida como tal por lo que hay que cumplir con lo que exige un XML. Pero el real objetivo apunta a otro lado, las W3C ha hecho mucho énfasis en la semántica de HTML5 lo cuál se fortalece al serializar un archivo HTML5 como un XML, esto significa que si un archivo está serializado, facilita a programas externos la interpretación modular (o por partes) de los documentos que creamos.

    Lo anterior quizá se oye más complejo de lo que es en realidad es, pero piense lo siguiente, digamos que usted require crear un programa que analice solo una parte del contenido de una página web, si analiza el código de esa página web como texto plano usted requiere hacer mucho código de manejo de cadenas para extraer la parte que le interesa. En cambio, si el documentos viene serializado como un XML usted puede hacer uso de recursos como Xpath (por ejemplo) para extraer la parte  que le interesa con mucha más facilidad. De esta forma usted puede facilitar la explotación del contenido de una página para usted o para terceros.

    Creo que por el momento esto es lo que hay en el pasado y en el horizonte de XHTML y HTML en términos generales, pero ahora que conoce la diferencia entre ambos la decisión de cual usar es totalmente suya, sin embargo recuerde que HTML5 (y XHTML5) a la fecha se sigue desarrollando y el soporte por parte de los navegadores también, de manera que debemos estar atentos a cualquier cambio.

    Enlaces que pueden interesarle:

    HTML (Mozilla group)

    HTML and XHTML

    Libros que pueden ser de su interés:

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

    No Comment