Categoría: Diseño Web

  • Agile Planning / Planeación Agile

    El Enfoque De La Planificación Agile

    Agile Planning / Planificación Agile

    Revelación

    Hacer la estimación y la planeación del desarrollo de un producto puede ser una tarea desalantadora que se hace más complicada por nuestra ignorancia o mala interpretación acerca de los proyectos, como concepto y en proyectos específicos. Hace tiempo leí (enlaces al final) que un proyecto no debía ser visto sólo como una secuencia de pasos, sino que también debía ser visto como un flujo rápido que genera nuevas capacidades y nuevo conocimiento. Las nuevas capacidades se entregan como parte del nuevo producto y el nuevo conocimiento se utiliza para hacer un mejor producto (Cohn 2006). Esto es la base para el enfoque Agile sobre la planeación.

    Al comenzar a leer sobre admintración de proyectos trabajaba como desarrollador, y esa frase (del párrafo anterior) fue una de mis primeras revelaciones serias acerca de porque trabajaba tan duro codificando para funcionalidades que al final no se utilizaban o bien en proyectos que no lograban sus objetivos plenamente. Parte de las fallas de esos proyectos fueron desde luego, aveces no planear en lo absoluto, pero también tratar de planear todo desde el principio. En un proyecto Agile utilizamos las nuevas capacidades y el nuevo conocimiento obtenido como guía para el trabajo mismo que se está realizando. El conocimiento obtenido puede ser acerca del producto o del mismo proyecto en general, lo importante es que este nuevo conocimiento nos da mejor idea de cómo debería ser el producto en el cual trabajamos o bien se convierte en mejor entendimiento sobre una tecnología, sobre el equipo, sobre los riesgos, etc.

    Cuando pretendemos planear todo desde el principio (ni hablar cuando no planeamos) estamos fallando en integrar nuevo conocimiento al plan, y por lo tanto eso nos lleva a caer en suposiciones erróneas, como creer que estamos incluyendo TODO los necesario en nuestro plan (lo que en el mundo del software rara vez sucede).

    Mis amigos desarrolladores son mayormente gordos y feos (pero aun así los quiero 😃) y no les gusta correr, pero a mí sí, por lo que utilizaré la siguiente analogía: Una aproximación tradicional a un proyecto puede ser como una carrera de 10km donde usted sabe exactamente dónde está la meta y trata de alcanzarla tan rápido como sea posible. Un proyecto Agile es como cuando usted se toma el tiempo y ve que tan lejos puede llegar en 60 minutos. Un equipo Agile sabe cuándo termina, pero no exactamente que entregará al final. Por lo tanto, planear se convierte en proceso en donde crean y revisan objetivos periódicamente que eventualmente llevan a una meta de más largo término.

    Niveles de planificación Agile

    Cuando estamos preparando los objetivos de un plan es importante reconocer que no podemos ver más allá de cierto horizonte y que la exactitud de nuestro horizonte será cada vez menor entre más lejos queramos ver. En mis cursos menciono los primeros capítulos de una seria llamada Vikings en donde plantean someramente el uso regular de un compás solar, un piedra solar y cuervos para poder corregir el rumbo periódicamente y mantener un curso correcto; de esta misma manera nosotros debemos revisar el estado de nuestro proyecto y ajustar nuestro plan de acuerdo a ello. Desde este punto ya estamos hablando de la elaboración de una planeación estratégica con el enfoque Agile.

    Como ya expresé el riesgo de un plan se incrementa de acuerdo a que tan lejos en el futuro queramos planear, por ello cada cierto tiempo debemos levantar nuestra vista para ver el nuevo horizonte y ajustar el plan. Los equipos Agile hacen esto planeando en por lo menos 3 distintos horizontes (podrían ser más dependiendo de la aproximación de su organización, pero en esta entrada solo explicare estos). Los 3 horizontes son el Release (Liberación), Iteración y Diaria (actual). Puede tomar como referencia el siguiente diagrama (este no es un estándar, puede encontrar diferentes diagramas similares, pero los 3 horizontes princiaples no cambian):

    Niveles de Planeación
    Horizontes de Planificación

    Planificación del Release (Liberación).

    Aquí determinamos respuestas a preguntas que se relacionen con el alcance, el calendario y los recursos del proyecto. Este plan deber ser actualizado a lo largo del proyecto, usualmente al inicio de cada iteración para reflejar las expectativas actuales que serán incluidas en el Release.

    Planificación de la Iteración.

    Esta se lleva a cabo al inicio de cada iteración y basada en el trabajo que se hizo en la iteración anterior (si no es la primera desde luego). El cliente o sus representantes (el Product Owner) debe identificar los elementos de mayor prioridad en los cuales el equipo concentrará sus esfuerzos en la nueva iteración. Esto porque estamos en un horizonte más cercano que el del Release. En este horizonte se establecen las tareas requeridas para obtener una parte funcional y probada de nuestro producto.

    Planificación Diaria.

    Puede sonar muy excesivo (y quizá lo es) llamar planificación a este horizonte, esto no son más que reuniones diarias e informales (que usualmente se hacen de pie ya que solo deben durar unos minutos) en donde se sincronizan los esfuerzos diarios individualmente. Esto es que cada miembro del equipo comparte que ha hecho el día anterior, que piensa hacer hoy y comunica los obstáculos que afronta.

    Con estos tres horizontes (Release, Iteración y Diaria) los equipos ágiles se concentran sólo en lo que es visible e importante en el plan que han creado. De esta manera han adoptado el enfoque de la planificación Agile.

    Condiciones de Satisfacción.

    En una futura entrada dedicaré más detalle a esto (lo merece) pero no quiero dejar de mencionar esto en esta entrada, por lo menos de manera breve. Todo proyecto debe comenzar con una meta, quizá de esta se deriven varios objetivos relacionados con fechas, presupuesto, recursos humanos, etc., pero típicamente solo habrá una meta. No dé por hecho que usted deber crear el mejor auto del mundo, la mejor puerta del mundo, el mejor ERP del mundo; los objetivos sólo deben alinearse con las condiciones de satisfacción del Producto Owner (la voz del cliente); esto es, los criterios que serán utilizados para evaluar y determinar el éxito del proyecto.

    Enlaces relacionados:

    El Origen Y Los Valores De Agile

    El Enfoque del Equipo 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
  • Gamification & LinkedIn

    Gamification y LinkedIn

    Caso de éxito con Gamification o Gamificación

    Anteriormente, hablé sobre las generalidades de la gamification (ludificación, juguetización, jueguización o el término feo que prefiera), en ello expresé la definición y los objetivos que persigue, si usted NO esta familiarizado con el tema le recomiendo que lea la entrada anterior antes de continuar leyendo.

    Como parte de un proyecto en que el participé recientemente, estuve analizando el uso que daban algunas organizaciones y sus sitios web al concepto de gamification, y uno de los sitios que me pareció más interesante y sobresaliente en el uso del concepto, fue LinkedIn. Como muchos ya saben, LinkedIn es una red social orientada a las relaciones profesionales, y como parte de su funcionamiento, esta red social utiliza una serie de elementos que integran la idea de gamification en su diseño. Ahora echaremos un vistazo a algunos de ellos y a describir cómo funcionan y cuál es su propósito de la estrategia de Gamification y LinkedIn.

    Perfil

    Para hacer valiosa esta red de profesionales, tanto para sus usuarios como para LinkedIn, la información de cada miembro es requerida. Entre más información sea proporcionada por el usuario mayor beneficio obtiene la red en general. Cuando un nuevo usuario se registra, tiende a proporcionar solo la información mínima, normalmente dudando acerca de cuanta información proporcionar, esto aparentemente es debido sobre todo a la desconfianza de compartir datos personales, la falta de tiempo o la pereza por parte de los usuarios de la red.

    LinkedIn, echando mano de elementos de gamification y UX (User Experience), implementó una barra de progreso que apelaba al “sentido de terminar algo incompleto” para gentilmente sugerir y motivar a lograr un mejor porcentaje y así obtener más información del usuario, utilizando una estrategia en donde el aumento de porcentaje era fácil de obtener al principio, pero gradualmente se requería de mayor esfuerzo para llegar al 100% lo cual añadía un toque de diversión y reto que invitaba a proporcionar más datos.

    Eventualmente y de manera muy inteligente, LinkedIn se dió cuenta de que una de las desventajas de usar una simple barra de progreso, es que otros datos que surgen como consecuencia de los cambios en la vida laboral de los usuarios, como son nuevos puestos, nuevos cargos, nuevos certificados o avances en el nivel académico, no cobraban relevancia.

    Con lo anterior en mente se cambió el esquema de barra de porcentaje por una esfera que se llena cual copa con agua, la cual se conoce como eficiencia del perfil (profile strength). Dependiendo de que tanto se llena el círculo se asignan nombres a los “niveles de eficiencia”, logrando con ello ponderar TODOS los datos que se proporcionan y así mismo hacer que los miembros de LinkedIn se sientan más dispuestos a proporcionar y actualizar la información que se les solicita con un método poco invasivo y además sin dar pie a percatarse de que los usuarios están siendo “gameficados“.

    Pero incluso con los dos anteriores elementos de gamification, con los cuales el diseño estimula a los usuarios para que proporcionen información y así aumentar la fortaleza de sus perfiles, lo que se obtiene es una autodescripción de las cualidades del usuario, lo cual debería de poder ser verificable por otros medios. Para solucionar esto, se idearon las aptitudes y validaciones (skills and expertise), las cuales, aprovechando las ventajas inherentes de una red social, permiten a otros usuarios validar las habilidades y la experiencia, lo cual crea una visión más precisa del miembro en cuestión.

    Vistas

    Ningún perfil tiene mucho sentido si no está siendo visto. La red proporciona estadísticas a sus miembros acerca de cuantas veces ha sido visto su perfil en los últimos días.

    También muestra quienes han sido las últimas personas en ver el perfil. Esto no solo estimula el motivador de ser el “centro de atención”, si no que además alienta a hacer clic en el perfil de esas personas para potencialmente conectar con ellas.

    Actualizaciones

    Los usuarios de LinkedIn no solo comparten información personal y profesional, la mecánica de la red los alienta a compartir artículos, eventos, oportunidades de trabajo y otros tipos de información relacionada con la vida laboral de sus miembros; ofreciendo con ello, el número de vistas, sus respectivos likes y la posibilidad de seguir a los usuarios o grupos de interés, lo cual son técnicas de gamification por demás experimentadas por los usuarios habituales de redes sociales.

    Grupos

    Pertenecer a un grupo, aportar publicaciones y respuestas puede incrementar la potencial influencia del usuario como experto dentro de una comunidad. El número de miembros es un indicador para el “dueño” del grupo acerca de que tan exitosas son las acciones derivadas de organizar a un grupo de personas alrededor de cierto tema.

    Otros

    Durante mi investigación de LinkedIn y sus estrategias de gamification, encontré menciones de algunas que no he podido corroborar de primera mano, pero he visto mencionadas en diferentes lugares. Aparentemente han habido envíos de correos y mensajes con felicitaciones a algunos miembros por una variedad de “logros”, como son el ser uno de los perfiles más vistos según determinados criterios de tiempo y vistas o por ser miembro destacado con cierto número de artículos compartidos y vistas obtenidas a los mismos, así como algunos otros motivadores por el estilo que pretenden ser divertidos.

    ¿Conoce algunas otras técnicas de gamification utilizadas en otros sitios?, ¿utiliza gamification o piensa hacerlo?, ¿cree que vale la pena el uso de gamification? compártalo con nosotros.

    Otros enlaces que pueden ser de su interés:

    Subir un archivo con HTML5

    Arrastrar y Soltar HTML5

    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
  • 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
  • User Experience

    Diseño de la Experiencia de Usuario (Parte 3)

    ux01

    En las entradas anteriores sobre la experiencias de usario (Parte 1 y Parte 2) hablé de lo interesante y ventajoso que puede ser el diseño de experiencia de usuario, pero aun siendo así, la verdad es que esta disciplina tampoco puede hacerlo todo ni es la medicina para todas los casos.

    El diseño UX  no viene en unitalla para todos.

    El diseño de experiencia de usuario no funcionará en todos los casos para toda la gente debido a nuestra condición humana en la que todos somos diferentes. Lo que funciona para una persona probablemente funciona de manera totalmente opuesta para otra, de modo que lo que el diseño UX puede hacer es únicamente procurar alguna experiencia específica para promover cierto comportamiento, pero NO puede fabricar, imponer o predecir con total exactitud una experiencia en si misma.

    El diseño de experiencia de usuario NO puede replicar de manera literal la experiencia de un sitio web o aplicación en otro sitio web o aplicación, las experiencias de un usuario siempre serán diferentes entre servicios y productos, es por eso que cuando se diseña algo, ese diseño es adaptado para buscar ciertos objetivos, valores o procesos de producción pero siempre en función de una iniciativa en particular.

    No existen métricas para evaluar al UX

    Desafortunadamente no hay ningún indicador que pueda señalar directamente el rendimiento o la calidad del diseño de la experiencia de usuario, esto solo lo podremos saber con la suma de múltiples factores como las clásicas estadísticas de vistas a páginas, porcentajes comparativos, tasas de conversiones de usuario, reportes ventas, colocación y otras evidencias enecdóticas, pero no existe ningún código o algoritmo que evalúe la experiencia de usuario, por lo que es importante que los diseñadores UX y los responsables de proyectos y cadenas de producción trabajen juntos con todos los indicadores al alcance bien documentados para comparar el antes y el después y así justificar la inversión en UX.

    UX no es usabilidad ni diseño gráfico.

     Todavía encuentro blogs, videos, comentarios, etc., donde se habla de usabilidad como sinónimo de experiencia de usuario, y si bien es cierto que la usabilidad juega un papel importante, NO son lo mismo. La usabilidad se refiere a la eficiencia  con la que una interface se relaciona con las acciones de un usuario, mientras que UX se refiere a lo que siente y piensa una usuario con respecto al uso de un sistema completo y como se comporta en consecuencia.
    UX = Labor multi-disciplinaria
    UX = Labor multidisciplinaria

    Algo parecido sucede a veces con el diseño gráfico, el cual desde luego tiene un rol preponderante, pero NO es UX. Es verdad que es importante que un sitio web o aplicación resulten estéticos, con uso inteligentes de contrastes, colores y comunicación visual, pero solo por nombrar un caso ¿qué pasa si para comenzar nuestro usuario es alguien que no puede ver?, ésta es solo una razón por la que otros factores también tienen un rol importante, como lo son por ejemplo la accesibilidad, la ciencia humana, la arquitectura de información, el análisis de contexto, el análisis y ejecución de pruebas, la mercadotecnia, la psicología, la correcta gestión del proyecto entre otros.

    Críticas al UX como profesión.

     No todo el mundo ve el valor de un diseñador de UX, la mayoría de los argumentos que he escuchado o leído giran en torno ha los costos adicionales involucrados, la redundancia con actividades de otras áreas y/o el miedo/pereza al cambio.

    Otra observación que algunos pueden tomar como crítica, y admito es un argumento interesante, es que los diseñadores UX no se pueden “crear de cero” como una carrera o disciplina aislada, si no que es más bien el resultado de una “especialización” de personas que han sido diseñadores web o desarrolladores quienes eventualmente deciden profundizar en los temas relacionados al UX, haciendo así indispensable un “background” en programación, desarrollo multimedia, etc. y sumarlo a conocimientos posteriores para efectuar un buen diseño UX. Usted ¿qué piensa de esta postura?

    No se puede negar lo innegable.

    Ya había hecho un guiño a esta situación, pero la reitero, una organización o proyecto con presupuesto realmente pequeño y personal limitado no puede invertir en un especialista UX por lo tanto el desarrollador solitario, o la compañía compuesta por dos amigos tendrían que integrar algunos (los que puedan) de los conceptos de UX como parte de sus actvidades habituales, lo cual es visto como desventaja por unos y ventaja por otros.

    ¿Más?

     Por el momento es todo lo que mi experiencia y memoria dan para mencionar, pero si a usted se le ocurre algo más no dude en comentarlo 😉

    Algunos enlaces de interés:

    Diseño de la Experiencia de Usuario (Parte 1)

    Diseño de la Experiencia de Usuario (Parte 2)

    El Enfoque Agile: Planeación

    Gamification y LinkedIn

    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.

    2 Comments
  • User Experience

    Diseño de la Experiencia de Usuario (Parte 2)

    ux01

    A lo largo de mi experiencia profesional trabajando en el mundo del desarrollo para Internet, me he topado con una enorme cantidad de discusiones y desacuerdos entre desarrolladores, diseñadores gráficos, project managers, clientes, jefes y un laaaargo etcetera de personas involucradas en el desarrollo de algún proyecto, de manera que muchos de ellos han sido renuentes a incluir procesos o personas explícitamente dedicadas el diseño de experiencia de usuario dentro de su organigrama de desarrollo o de personal, en otros casos, simplemente ignoran la existencia de tal disciplina (…así de triste).

    El problema principal con las personas renuentes o ignorantes acerca de la experiencia de usuario, es que una vez que se les plantea la inclusión del proceso de UX, por lo general lo ven como un proceso que alarga los ya apretados tiempos de entrega (lo cual es una afirmación coja), o bien, hay gente que argumenta que el UX se “encima” con pasos de metodologías ya existententes (suspiro…esos amados procesos coporativos escritos en piedra). Con todo esto ¿porqué implementar UX en nuestros proyectos de desarrollo?.

    ¿Qué o quienes se benefician del diseño UX?

    Si decimos en voz alta que cualquier sistema se beneficiaría de una sólida implementación de pruebas dirigidas a la experiencia de usuario, desde luego en pro de la satisfacción de este, seguramente encontraremos muy pocos o ningún argumento en contra y todos parecerán estar a favor de tan certera afirmación, pero en la práctica es ooootro cantar.

    Beneficios UX
    Beneficios UX

    En la realidad siempre hay recursos y tiempo limitados y muchas organizaciones tienden a concentrar sus esfuerzos en el proceso de elaboración o ejecución per se, dejando descuidadas las estrategias de planeación, adaptación y mejora. Pero incluso en esta situación el diseño orientado a al experiencia de usuario puede ser beneficioso y vale la pena hacer el máximo esfuerzo por incluirlo en las tareas habituales de planeación, ejecución, monitoreo, pruebas y calidad. En mi experiencia (y no sin batallar un poco) he podido identificar algunos casos que se pueden ver particularmente beneficiados del diseño UX:

    Sistemas complejos.

    Entré más complejo un sistema más relevantes se vuelven la planeación adaptativa, el aprendizaje, la organización, la arquitectura progresiva y validación de condiciones de satisfacción para la correcta creación y uso de nuestro sistema. Mientras que invertir en un equipo interdiciplinario de personas que se dedicarán al UX podría ser excesivo para la elaboración de una pequeña página de presencia que solo contendrá algunos datos de contacto, en otros casos tenemos que el desarrollo de sitios, soluciones empresariales, aplicaciones web o móviles innovadoras o mucho más elaboradas, en donde se requieren de múltiples opciones, vistas y herramientas, y que además pretenden llegar a cada vez más usuarios, son las situaciones  donde sin duda se verán ámpliamente los beneficios del UX.

    Aquellos sitios y aplicaciones que simplemente muestran información extensa con pobre organización, que no ofrecen métodos de búsqueda efectivos, que priorizan torpemente la información, que antepone agendas propias antes de las necesidades reales del negocio y/o el usuario,  que someten a sus usuarios a interminables formularios esperando que estos proporcionen información sin chistar y en una sola “sentada”, para finalmente brindar un servicio mediocre o malo, estarán proporcionando negligencia en cuanto a la experiencia de usuario y al final verán sumamente afectados el éxito, ganancias y/o longevidad de su producto o servicio. Son todos estos casos donde la UX cobra gran importancia para ayudar a prevenir o minimizar estas situaciones y lograr con ello que estos proyectos finalmente se perciban como eficientes, valiosos, exitosos y agradables tanto de ver como de utilizar.

    Proyectos con presupuestos moderados y start-ups.

    Sin duda las empresas pequeñas o las que apenas comienzan por lo general no cuentan con los recursos para contratar empleados dedicados 100% al la experiencia de usuario.

    Otro hecho que podemos ver constantemente es que las empresas pequeñas y medianas en el afán de mantener costos bajos y priorizar entregables para obtener recursos, se concentran más en el proceso de producción o ejecución que en el de planificación, investigación y análisis para mejorar y adaptarse a nuevas condiciones, es decir, estas empresas giran alrededor del lanzamiento de un producto final.

    Sin embargo, incluso estas organizaciones que pueden ser iniciativas pequeñas, pero que ya han logrado la venta de algún producto o servicio, comúnmente cuentan con una o más individualidades talentosas que son capaces de tomar diferentes roles en la organización según se necesite. Piense en ese programador, diseñador o persona entusiasta que ya está dentro de su organización y que por alguna razón parece tener cierta afinidad para crear cosas agradables y funcionales que son del gusto de clientes o usuarios. Ese tipo de talento es el que puede comenzar a entrenarse en los principios y procesos de la UX, y eventualmente comenzar a integrarlo al proceso común de desarrollo en la organización de manera incluso paulatina.

    Cabe mencionar que las filosfías Lean y Agile puden potencializar mucho el correcto uso de UX gracias a sus enfoques adaptativos, iterativos, enfáticos en el aprendizaje y enfocados a la entrega de valor real más que un estricto apego a planes y procesos.

    Empresas que desean reducir tiempos de entrega y costos.

    Así como lo lee, a pesar de la suspicacia que despierta en algunos la implementación del diseño UX (como mencioanaba al principio de esta entrada), la integración de este puede acortar eventualmente los tiempos de desarrollo e incluso los costos del mismo.

    Es verdad que con UX se deben agregar etapas adicionales a proceso de desarrollo que requieren de tiempo asignado, sin embargo en la teoría un diseñador UX realiza muchas de sus tareas paralelamente al trabajo que hacen los desarrolladores y diseñadores web, e incluso observará que mucho del trabajo que hacían estos ahora quedará en manos del mismo diseñador UX, también puede ocurrir que el trabajo que hacen un project manager, un scrum master, un product owner, un ingeniero de requerimientos, un arquitecto de información un analista de sistemas entre otros, puede verse realmente beneficiado y facilitado por el responsable del diseño UX, así potencialmente los costos causados por el bucle de revisiones y validaciones se verán reducidos y los otros miembros del equipo podrán pasar más tiempo productivo en su respectiva especialidad. Llendo incluso más lejos, la correcta y habitual implementación del diseño UX, al generar clientes más satisfechos eventualmente logrará traducirse en mayores beneficios para usted y su organización.

    Enlaces de interés:

    Diseño de la Experiencia de Usuario (Parte 1).

    Diseño de la Experiencia de Usuario (Parte 3)

    El Enfoque Agile: Planeación

    Gamification y LinkedIn

    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.

    3 Comments
  • User Experience

    Diseño de la Experiencia de Usuario (Parte 1)

    ux01

    La primera vez que programé fue por ahí en la década de los 90s, y entonces desarrollé muchas cosas, de las cuales algunas funcionaban y otras (la mayoría) no o por lo menos no como esperaba, así la mayor parte de lo que desarrollaba en esos años eran solo experimentos para mi deleite personal o para cumplir con alguna tarea escolar. Eventualmente algunos de estos experimentos personales se volvieron más o menos populares entre algunos de mis compañeros de clase, o para decirlo en palabras más capitalistas y emprendedoras, comencé a vender tareas (de las clases de programación y relacionadas) por encargo a algunos de mis compañeros, sin embargo, en las primeras ocasiones en que vendí tareas observé que mis “clientes” no entendían del todo (o en lo absoluto) como utilizar los pequeños programas que les entregaba y me resultaba bastante molesto tener que explicar cómo diablos se usaban, y considerando que tenía que parecer que ellos lo habían hecho, me resultaba un problema. Durante un buen tiempo me la pasé pensando en como podía lograr hacer que mis compañeros entendieran más rápido mis programas.

    En esos años su servidor era un ávido lector de comics, y entonces comencé a meditar en lo hábiles que eran los dibujantes y escritores de estas historietas para dar a entender cosas complejas con tan solo algunos trazos, algunas viñetas bien colocadas o algunos “globitos” con texto, !y entonces vino la epifanía!, rápidamente comencé a observar con más atención los libros ilustrados e historietas dirigidos a niños, adolescentes y adultos, después de un rato de planificación llegué a que debía cumplir con lo siguiente:

    1. Distinguir mis usuarios “tontos” de los “menos tontos” para determinar el grado de esmero para los siguientes pasos (no fuí para nada políticamente correcto).
    2. Asegurarme que mis compañeros explicaran BIEN que era lo que querían para comprenderlo sin ninguna duda (cosa nada fácil).
    3. Ser los más explícito pero breve que pudiera en todos los textos que presentaba (opciones, menús avisos, etc.).
    4. Así como hacían los comics, los juegos y esas raras computadoras de manzana de color, tratar de auxiliarme de colores para contrastar unos elementos de otros y si era posible usar imágenes que respaldaran a los textos (este punto era mi favorito).

    Palabras más palabras menos, esos fueron los pasos que diseñé para tratar que mis “encargos” salieran a la primera, mis compañeros-clientes molestaran menos y obtener un poco de dinero o alimento (tortas, churros, frutsis, .etc) en el proceso. Quisiera decir que todo fue felicidad y viento en popa, pero escribir mis pasos fue más fácil que seguirlos cabalmente, pero sí puedo decir que aunque la lata de mis clientes no desapareció, sí se redujo drásticamente. Muchos años después caí en cuenta de lo que había hecho de manera ingenua, empírica, simplona y corta de hecho tenía un nombre: Diseño de Experiencia de Usuario.

    ¿Pero qué es la Experiencia de Usuario?

    Si usted busca en la web encontrará muchas definiciones, pero para aportar algo con la propia, la “Experiencia de Usuario“, conocida en inglés como “Users Experience” y abreviada como “UX” es la manera en que una persona (un usuario) se siente acerca de su interacción con un sistema, tal sistema puede ser un programa de computadora tradicional, un sitio web, una aplicación web o una aplicación móvil entre otros, todo desde luego en un contexto de desarrollo actual.

    La anécdota personal con la que inicié este post fue una feliz coincidencia basada en algo de sentido común, pero en realidad hay gente verdaderamente dedicada al estudio en profundidad del diseño de sistemas pensado en el usuario como el elemento fundamental de cualquier sistema tecnológico, la persona que probablemente ha aportado más en este campo es el Dr. Donald Arthur Norman, un investigador de ciencia cognitiva, diseño y usabilidad.

    Donald A. Norman
    Dr. Donald A. Norman

    El Dr. Norman fue el primero en hablar de manera realmente científica y formal de la importancia del diseño de sistemas centrado en el usuario (user-centered design), lo cual es, en términos generales, la idea de que cualquier diseño de sistema debe estar basado en las necesidades reales del usuario (simple pero profundo cual frase de filósofo chino).

    ¿Porqué es importante la Experiencia de Usuario?

    Usted podría pensar: ¡Pues obvio, si me la paso matándome horas programando para tener contento al #$@&% usuario! pero como diría el Dr. Andrés Roemerno te creas todo lo que piensas“, para nadie en México (donde vivo) y en América Latina es novedad que por lo general estamos un tanto atrasados con respecto a muchas prácticas del primer mundo, donde todo este tema del desarrollo de sistemas centrado en la experiencia de usuario ya lleva un rato tomándose bastante en serio, pero en nuestra región es algo que apenas comienza a cobrar fuerza, es decir, apenas nos estamos dando cuenta de la importancia real de elaborar estrategias, alcances, estructuración, codificación y diseño enfocados realmente en el usuario.

    Antes de que alguien me tire tomatazos déjeme decirle algo, para ver si le resulta familiar, aquellos que llevamos tiempo trabajando en la industria del desarrollo hemos tomado decisiones basados en dos cosas principalmente:

    1. Los elementos e interacciones que construimos en los sistemas son basados en lo que nosotros creemos que funciona. Basamos la estética y la funcionalidad con muy poca idea de como el usuario final usará el sistema, es decir, diseñamos para nosotros mismos (¿dónde está ese documento donde se entrevistaron, evaluaron, cuantificaron, segmentaron a los usuarios finales y sus dispositivos?).
    2.  Todo se elabora en base a lo que el “jefe de alguien quiere ver”. Sucede que todo el trabajo que realizamos está en función del gusto de un individuo con un jerarquía mayor, ya sea de nuestra propia organización o dentro de la del cliente, sí, hablo de ese sujeto que por alguna razón cree ser experto en todo, poseer un sentido común superior y desde luego tener mejor gusto que todos (¿dónde está el documento que dice que ese stakeholder será el único usuario del sistema o si será usuario en lo absoluto?).
    Diagrama de la Muerte
    Diagrama de la Muerte

    Sin embargo, en los últimos años la Internet y por lo tanto la web ha evolucionado y crecido más en su alcance, los sitios en web se han hecho más complejos y con características cada vez más ricas, y por si fuera poco, hoy en día la gente tiene más medios para consumir información en Internet: teléfonos inteligentes y tabletas con diferentes tamaños y capacidades, más navegadores web junto con diferentes tipos de conexiones, y todo ello nos obliga a tener que utilizar estrategias más inteligentes para lidiar con nuestros clientes y usuarios.

    Opciones para el Usuario
    Opciones para el Usuario

    Otro punto importante es el tema de la accesibilidad, lo cual se refiere a el acceso universal de los servicios y productos basados en Internet para personas con necesidades diferentes (como débiles visuales por ejemplo) o bien para personas que no cuentan con buenos anchos de banda o que aún utilizan dispositivos viejos.

    Tomando en cuenta todos estos cambios, hemos podido observar que todos los productos y servicios que giran alrededor de la Internet y han sobrevivido a lo largo del tiempo son solo aquellos que han logrado adaptarse para seguir siendo útiles y agradables de usar. Así, la moraleja para los que desarrollamos es: todo lo que construimos hoy se convierte en la experiencia que deseamos para con los usuarios que usan lo que hacemos.

    Algunos enlaces de interés:

    Diseño de la Experiencia de Usuario (Parte 2)

    Diseño de la Experiencia de Usuario (Parte 3)

    El Enfoque Agile: Planeación

    Gamification y LinkedIn

    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.

    2 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
  • Transiciones y Transformaciones

    Transiciones y Transformaciones en Botones (CSS3 y HTML5)

    El caso

    Hace un tiempo elaboré un juego interactivo donde utilicé algunos botones que hacen un simple pero atractivo efecto over, es decir, cuando el usuario coloca el puntero del mouse sobre ellos, y un par de personas me preguntaron si esos botones y su efecto habían sido “dibujados” directamente en el elemento canvas, a lo que contesté que no, que en realidad cada botón era un enlace común y corriente utilizando el elemento para hace un enlace “<a></a>” de HTML. Una de estas personas comentó que por lo general solo veía ese tipo de efectos tan “smooth” en cosas realizadas con Flash, a lo cual solo añadí: pues no solo no es Flash sino que tampoco es un elemento del canvas de HTML5, el secreto es el uso de transiciones y transformaciones de CSS3 (aquí las especificaciones oficiales).

    Hay muchos tutoriales y capítulos en los libros de HTML5 y CSS3 para quienes deseen aprender paso a paso de que van las transiciones en las hojas de estilo (incluyendo el mio), así que en esta ocasión me concentraré en el flanco práctico y aplicado para lograr hacer botones con un efecto como los que utilicé en el juego que mencioné inicialmente, puede ver el bótón aquí.
    Esta es la lógica del código:

    Paso No. 1

    En su página coloque un enlace HTML, así es, un llano <a href=”” ></a> en el lugar donde usted desee. Para efectos de este ejemplo utilizaré el siguiente código:

    <a id="miBoton" href="http://internet80.com"></a>

    Paso No. 2

    Ahora hay que colocar un par de elementos <span>, el primero servirá para colocar la imagen del botón en estado off (normal o apagado) y el segundo para la imagen que corresponde al estado over:

    <a id="miBoton" href="http://internet80.com"></pre>
    <span class="off"></span>
    <span class="over"></span>
    <pre></a>

    Los siguientes pasos consisten en crear estilos CSS3 que manipulen el comportamiento del enlace y los span dentro de él.

    Paso No. 3

    El siguiente estilo hace referencia al enlace, se indica que este se debe desplegar en bloque y no in-line y especifica ancho y alto:

    #miBoton {
       display: block;
       width: 141px;
       height: 195px;
    }

    Paso No. 4

    Ahora se indicará que imagen debe utilizar el fondo de cada span, note que sólo utilizo una imagen para ambos span. Recuerde que puede usar la imagen de su preferencia pero manipule las dimensiones de tamaño apropiadamente según el caso:

    #miBoton span {
       background-image: url(http://internet80.files.wordpress.com/2013/04/btn_ok.png);
    }

    Si se verifica el resultado del código como está hasta ahora no visualizará nada, por lo que al igual que se especificó un estilo de bloque y tamaño al enlace, ahora se debe hacer lo mismo con cada span

    #miBoton .off {
       display: block;
       width: 141px;
       height: 195px;
    }
    [/sourcecode]
    [sourcecode language="css"]
       #miBoton .over {
       display: block;
       width: 141px;
       height: 195px;
       background-position: 0 -195px;
    }
    Observe como al segundo span se le indica mover el área desplegada del imagen de fondo a -195, a las imágenes que contienen varios cuadros o estados  dentro de ellas mismas y se les manipula mediante su posición y visibilidad se les suele llamar sprites  (tenga esto en mente si desea desarrollar juegos)Hasta este punto lo visualizará será algo como esto:

    Paso No. 5

    Por ahora ambos span muestran su respectivo contenido uno después de otro, pero lo que en realidad se desea es que ambos ocupen el mismo espacio, por lo que especificará la posición de ellos en la esquina superior izquierda con left y top:

    #miBoton span {
       background-image: url(http://internet80..com/downloads/btn_ok.png);
       position: absolute;
       left: 0; top: 0;
    }

    Si visualiza y observa el progreso hasta ahora verá que solo aparece el estado over en su página, esto es debido a que el segundo span se sobrepone al primero, por lo que hay que indicar que el primero deber ser el inicial y el que debe estar arriba, para ello usamos la propiedad z-index en el estilo para #miBoton .off, entre más alto el valor z-index colocará al elemento referido más al frente:

    #miBoton .off {
       display: block;
       width: 141px;
       height: 195px;
       z-index: 2;
    }

    Paso No. 6

    Ahora utilizará el estado hover de CSS, lo cual asigna el estilo indicado cuando se coloca el puntero del mouse sobre el elemento referido, que en este caso es el span .off

    #miBoton:hover .off {
       opacity: 0;
       filter: alpha(opacity = 0);
    }

    Con esto se logra un comportamiento comparable al que se hubiera podido lograr dando solo un par de estilos a un elemento <button>, sin embargo es a partir del siguiente paso donde se demuestra la “magia”.

    Paso No. 7

    Si observamos el comportamiento del botón hasta ahorita se ve un cambio instantáneo entre el estado off over, para hacer un cambio suave se utilizará un transición, lo que evitará el cambio rápido en los estados hover CSS3 de ambos span, de manera que nuevamente afectaremos el estilo para #miBoton span agregando la transición transition: opacity .25 ease-in-out:

    #miBoton span {
       background-image: url(http://internet80.com/downloads/btn_ok.png);
       position: absolute;
       left: 0; top: 0;
       -webkit-transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
       -ms-transition: opacity .25s ease-in-out;
       -o-transition: opacity .25s ease-in-out;
       transition: opacity .25s ease-in-out;
    }

    Tenga en cuenta que es solo una transición la que está agregando, las líneas con los prefijos -webkit-, -moz-, etc., son solo para aumentar la compatibilidad de la transición a los navegadores más populares.

    Paso No. 8

    Visualice su botón y ahora verá una mucho más suave y elegante transición entre los estados off y over. Pero hagamos las cosas más interesantes, combine un transición con una transformación, en este caso hará que el estado over aumente de tamaño del botón añadiendo el siguiente estilo:

    #miBoton:hover .over {
       -webkit-transform: scale(1.03,1.03);
       -moz-transform: scale(1.1,1.1);
       -ms-transform: scale(1.1,1.1);
       -o-transform: scale(1.1,1.1);
       transform: scale(1.1,1.1);
    }

    Paso No. 9

    El botón está casi listo, ahora el cambio de tamaño sucede pero instantáneamente sin embargo ya conoce la técnica para evitarlo (Paso 7), así es, usará una transición para hacer el cambio de tamaño lentamente utilizando  transition:  transform .25s ease-in-out; , pero ahora no quiere afectar ambos span sino solo el over por lo que el destino adecuado para la transición es #miBoton .over :
    #miBoton .over {
       display: block;
       width: 141px;
       height: 195px;
       background-position: 0 -195px;
       -webkit-transition: -webkit-transform .25s ease-in-out;
       -moz-transition: -moz-transform .25s ease-in-out;
       -ms-transition: -ms-transform .25s ease-in-out;
       -o-transition: -o-transform .25s ease-in-out;
       transition: transform .25s ease-in-out;
    }

    Nota

    Para colocar el botón en su página puede utilizar elementos contenedores como por ejemplo un <div>, también puede propagar los estilos a más botones utilizando selectores CSS3 y/o clases en lugar de un ID como se hizo en este ejemplo para fines prácticos.

    Conclusión.

    El botón fue creado fácilmente sin la necesidad de ningún plug-in (como el Flash Player) y no se utilizó una pizca de programación JavaScript, lo que hace treméndamente eficiente, rápida y ligera esta implementación CSS3, mientras que al mismo tiempo logró convertir un enlace simple en un elegante botón. Si desea la reseña técnica dónde del juego donde implementé ese botón está aquí:

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

    No Comment
  • 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
  • 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
  • Upload A File With HTML5 / Subir un archivo con HTML5

    Subir un archivo con HTML5

    Upload A File With HTML5 / Subir un archivo con HTML5

    El objeto XMLHttpRequest

    El objeto XMLHttpRequest ha sido actualizado varias veces desde que fue definido como parte del esfuerzo WHATWG’s HTML utilizando la tecnología de Microsoft; entonces tuvimos la especificación original XMLHttpRequest Level 1 como parte de la W3C, también tuvimos la especificación actualizada XMLHttpRequest Level 2, y ahora tenemos la últma version de este documento conocido como XMLHttpRequest Living Specification. Podemo resumir sus ventajas en los siguientes puntos:

    • Permite subir y bajar archivos como flujo de bytes (stream bytes), archivos binarios de gran tamaño (BLOBs) o formularios de datos.
    • Tiene manejadores de eventos de progreso, errores, aborto, comienzo, y fin de operaciones.
    • Peticiones inter dominio (cross-domain or CORS)
    • Nuevos tipos de respuestas para JSON
    • Es parte fundamental de la HTML5 File API specification

    Es importante recalcar que antes de HTML5 y la nueva versión del objeto XMLHttpRequest se requería recurrir a tecnología de lado servidor para poder realizar una operación que permitiera subir un archivo, es decir no era posible subir un archivo nativamente del lado cliente. Tecnologías como AJAX  y Flash hacían lo propio para tratar de hacer esto posible pero con serias limitaciones, por lo que XMLHttpRequest viene a cubrir este antiguo problema de gran manera. Existen otras características adicionales que acomapañan XMLHttpRequest  Level 2 , si desea conocer más puede recurrir a  la especificación oficial.

    La mayoría de las veces utilizo código y comentarios en inglés, espero que esto no le resulte demasiado inconveniente, si tiene alguna duda la contestaré a la brevedad.

    Comenzando

    Lo primero que haremos es definir la interfaz de usuario para esta pequeña implementación comenzando por las etiquetas HTML, el código es muy sencillo y solo contempla algunos elementos de formulario, y algunos div que solo sirven para dar una mejor presentación auxiliandose de CSS3. No analizaré en este post lo que respecta a las hojas de estilo utilizadas ya que no es algo necesario para el funcionamiento del ejemplo.

    <!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>

    El código anterior se explica casi por si solo, pero resumamos lo que tiene:

    • Un input de tipo file que servirá para seleccionar el archivo que se desa subir.
    • Un div que servirá para imprimir el tamaño del archivo seleccionado.
    • Un div que servirá para imprimir el tipo MIME del archivo seleccionado.
    • Un botón que disparará el proceso para subir el archivo elegido.
    • Una barra que indicará el progreso en el proceso de subida del archivo (nuevo elemento HTML5).
    • Finalmente un div donde se mostrará el progreso en formato de porcentaje.

    La función selectedFile()

    Cada vez que selecciona un archivo con el elemento file,  también dispara al evento onchange el cual llama a la función selectedFile(). En esta función suceden cosas interesantes, para empezar se hace referencia a una colección de archivos instanciada por un objeto nuevo en HTML5 llamado FileList, los objetos que obtenemos como miembros de las lista de FilesList son objetos File. En este caso obtendremos las propiedades size y type desde el objeto File recuperado.

    Aprovenchando la información que proporciona la propiedad size, dentro de la función se calcula y se muestra en megabytes o kilobytes el tamaño del archivo que se ha seleccionado. Con la propiedad type se obtiene el tipo MIME del archivo seleccionado, el cual se muestra en el div correspondiente.

    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;
    
        }
    }

    La función uploadFile()

    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);
    }

    Inicialmente tenemos una variable url que usaremos para indicar donde está la página o servicio web que recibirá la petición de esta página para hacer el proceso indicado en el servidor; enseguida tal y como se hizo en la funcion selectedFile() se hace referencia al objeto File miembro FileList obtenido.

    En la cuarta línea hay algo novedoso y muy útil, me refiero al objeto FormData,  este objeto permite instanciar vía JavaScript un formulario web, es decir, es como si usted colocara con etiquetas HTML un formulario, o bien puede hacer referencia a uno ya existente asignándolo a un objeto FormData. Sin duada esto es de gran ayuda ya que significa que ahora usted puede crear un formulario y alterar los valores que envía de manera dinámica. Para adjuntar valores a un formualrio instanciado o referenciado con FormData se utiliza el método append(archivo, objeto), de esta manera en la quinta línea se agrega nuestro objeto File con el nombre de archivo.

    Este es el fragmento de la función que abarca lo planteado:

    //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);

    Manejadores de eventos

    Continuando con el resto de la función, podemos observar que finalmente instancía el objeto XMLHttpRequest  y se asigna a la variable xmlHTTP, enseguida procedemos a la siguiente novedad, me refiero a la posibilidad de crear los nuevos eventos que forman parte de XMLHttpRequest  Level 2 gracias al objeto upload. Los eventes que se agregan en este caso son:

    • loadstart. Evento que se dispara cuando inicia el proceso para subir el archivo.
    • progress. Evento que se dispara cada vez que hay un avance en el proceso que sube el archivo.
    • load. Evento que se dispara cuando la transferecia se completa.
    • error. Se dispara si el proceso falla con error explícito.
    • abort. Se dispara si el usuario interrumpe o la conexión de interrumpe.

    No son los único eventos disponibles, consulte la especificación oficial para mayor información.

    Los manejadores de eventos se declaran en el siguiente código:

    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);

    Las funciones que se llaman en cada evento son las siguientes:

    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.");
    }

    La función progressFunction es la que actualiza tanto la barra de estado como el porcentaje que indican de manera gráfica y numérica el avance del proceso, el resto de las funciones únicamente despliegan un mensaje apropiado para el caso.

    Código comentado

    Si ha observado el código presentado habrá notado algunas líneas comentadas, eso es debido a que este es el código base para hacer algo un poco más complejo, pero decidí dejar esas líneas porque pueden ser una referencia útil para alguien:

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

    La línea anterior es una llamada a un servicio HTTP .Net en lugar de a una página.

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

    Esta línea llama a una función que muestra un mensaje cuando inicia el proceso, la cual comenté porque después de ejecuar varias veces el código me pareció molesto.

    El código completo

    Así luce la implementación completa del código, no describo el código CSS3 ya que es irrelevante en lo que respecta a la funcionalidad, pero comparto una imágen que muestra como se ve ejecutándose:

    <!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>

    No descibo el CSS3 porque es irrelevante en términos de funcionalidad, pero comparto una imagen que muestra como luce la implementación en el navegador y un enlace al CSS3 estilosUploadFile.zip.

    También comparto el HTTP service que utilicé para este ejemplo (el código de lado servidor, archivo de backend o cualquier otro nombre que ud. prefiera 😃) pero esto no será de mucha ayuda amenos que utilice exactemente el mismo stack que yo utilicé en su momento. En otras palabras, si usted es el tipo de personas que solo quiera copiar y pegar….jejeje bueno…quizá no está listo para hace esto todavía. Aquí está el tan solicitado archivo WSUploadFile.zip

    Es todo por ahora amigos, espero que esto les sea de utilidad.

    Algunos buenos libros que pueden ayudarle en su viaje por HTML5:

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

    37 Comments
  • getElementsByClassName

    JScode

    JavaScript ha ido mejorando con el tiempo, y especialmente en la marco HTML5, una de esas mejoras es el método getElementsByClassName(NombreClase). Desde hace años los desarrolladores contamos con getElementById para recuperar elementos, pero siempre con la limitante de obtener únicamente un solo elemento, mientras que con getElementsByClassName podemos recuperar una colección que contiene todos elementos que utilizan la clase o clases seleccionadas.

    Esto supone una gran ventaja en términos de cantidad de código, ya que el método puede seleccionar varios elemento de una sola vez pero también discriminar implicitamente algunos. El comportamiento de getElementsByClassName  es básicamente buscar en todo el documento a todos los elementos que cumplan con el criterio de búsqueda  que se proporcionó como parámetro.

    Por ejemplo, digamos que queremos seleccionar todos los elementos que usan la clase prueba:

    document.getElementsByClassName('prueba');

    También se pueden seleccionar múltiples clases, si deseara obtener los elementos que usan una clase jovenes y una clase adultos lo lograría utilizando solo la siguiente línea de código

    document.getElementsByClassName('jovenes adultos');

    Hagamos la cosas más interesantes,  le propongo una página con diferentes párrafos (<p>) pero solo aquellos que utilizan la clase contenido deben ser seleccionados para cambiar el tamaño de la fuente que usan. Para lograr tal objetivo podría hacer uso del siguiente código JavaScript:

    //se asignan todos los botones que permiten cambiar el tamaño de la fuente a variables
    var BotonFontSize1 = document.getElementById("btnFontSize1");
    var BotonFontSize2 = document.getElementById("btnFontSize2");
    var BotonFontSize3 = document.getElementById("btnFontSize3");
    var BotonFontSize4 = document.getElementById("btnFontSize4");
    
    //se vincula el evento click a cada botón
    BotonFontSize1.addEventListener('click', function(){
       CambiaTamano(10);
    }, false);
    BotonFontSize2.addEventListener('click', function(){
       CambiaTamano(12);
    }, false);
    BotonFontSize3.addEventListener('click', function(){
       CambiaTamano(14);
    }, false);
    BotonFontSize4.addEventListener('click', function(){
       CambiaTamano(17);
    }, false);
    
    //funcion que utiliza getElementsByClassName para buscar todos los elementos que usan la clase contenido y asignar el tamaño de fuente especificado según el botón presionado
    function CambiaTamano(size) {
       contenidos = document.getElementsByClassName("contenido");
       //alert(contenidos.length);
       contenidos[0].style.fontSize = size + "px";
       contenidos[1].style.fontSize = size + "px";
    }

    Para ver en funcionamiento este código puede visitar el siguiente enlace: ejemplo getElementsByClassName (botón “+” para ver el código completo incluyendo HTML y CSS).

    Sin duda esta mejora en JavaScript nos ahorra mucho código, si usted tiene algo de experiencia con JavaScript se dará cuenta de que existen varias maneras creativas de utilizar getElementsByClassName, experimente y sin duda encontrará muchas de ellas. Si desea ver la especificación oficial al respecto visite:  HTML5 – getElementsByClassName.

    Algunos enlaces de relacionados:

    Document.getElementsByClassName()    (Mozilla.org)

    HTML 5.1 2nd Edition

    HTML DOM getElementsByClassName() Method  (W3Schools)

    Algunos libros de interés:

    Algunos buenos 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
  • 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
  • Flash-VS-HTML-5

    Flash VS HTML5 (Parte 4)

    Que se pongan de pie todas las personas que alguna vez han querido ver algún video, y repentinamente hayan comentado algo como “oye, se escucha, pero no se ve”, y después de un rato de experimentar, preguntar e indagar llegan a la conclusión de que “falta el bendito codec”.

    Situaciones como estas existen prácticamente desde que la computadoras permiten ver video, pero en estos días este tema aflora con nueva fuerza,  debido al contexto del video en la Web dentro de la nueva especificación HTML5, que incluye el nuevo elemento <video>, el cual permite añadir este tipo de contenido fácilmente sin requerir plug-ins de terceros, como lo es el Flash Player entre otros.

    Diferencia entre FORMATO DE ARCHIVO DE VIDEO y CODEC.

    Primero aclararé un punto de confusión tremendamente común, siempre que puedo lo hago porque, de verdad, existe una graaaaan confusión al respecto entre los consumidores de video.

    Los formatos de archivo de video como .mov, .avi, .rm, .flv, etc., solo son el formato contenedor de la información de un video, pero este formato ¡NO es el codec ni de imagen, ni de audio para ver el video!. Para aclarar esto me auxilio constantemente del archivo de compresión .zip, si usted desea guardar cualquier tipo de archivo en en un formato de compresión como ZIP,  simplemente incluye este contenido dentro de un archivo con extensión .zip y no se preocupa si tal contenido son imágenes, archivos .doc, archivos .pdf o cualquier otra cosa. Cuando otra persona descomprime ese archivo .zip  puede obtener los archivos guardados dentro, y dependerá de si esta otra persona cuenta con Word para ver los archivos .doc, o Adobe Reader para ver archivos .pdf, de no contar con las herramientas necesarias para ver los archivos enviados dentro del archivo .zip no será posible verlos aunque cuente con los archivos completos y correctos.

    Hablando de video, el equivalente al archivo .zip son los archivos en formato avi, mov, flv, etc., estos son solo el formato del archivo contenedor, dentro se almacena información codifica para los cuadros que forman un video, y la información codificada que corresponde al audio, para decodificar esta información requerimos del codec apropiado. Si no contamos con los codecs indicados para el video y el audio, no será posible ver el video en cuestión correctamente aunque el video persé no tenga ningún problema, así como sucedería si no contamos con Word para ver el archivo .doc en el ejemplo del archivo .zip.

    La parte más inconveniente en lo que respecta al video en HTML5 es que estamos en medio de una nueva “guerra de navegadores” y los fabricantes no se han puesto de acuerdo acerca de cual deber ser el formato estándar para desplegar video y por lo tanto tampoco de cuales codecs deberían ser usados. Por lo que debemos estar pendientes de que navegador es compatible con que codecs de video (la wikipedia cuenta con una sección que se ha actualizado recurrentemente)

    ¿Cómo funciona?

    No describiré demasiado como insertar un video flash en una página, ya que dada la longeva presencia de flash existe una gran cantidad de recursos donde se enseña como hacer esto con gran detalle. La novedad por el momento recae más en la etiqueta <video> que busca trabajar casi con la misma facilidad con que lo hace la etiqueta <img>, el elemento video cuentan con varios atributos como src, control, autoplay, width, height, poster y otros más:

    <video src="video.mp4" width="360" height="240" controls="controls">
    </video>

    ¿Qué formato utilizar?

    No se cuenta aun con un formato universal e infalible para todos los navegadores, pero podemos utilizar múltiples formatos en la misma etiqueta video, en caso de que el navegador no reconozca un formato se irá al siguiente:

    <video controls width="350" height="250">
     <source src="video.ogv" type="video/ogg" />
     <source src="video.mp4" type="video/mp4" />
    </video>

    ¿Qué hacer si el navegador no soporta ningún formato?

    Si el navegador no soporta ninguno de los formatos que se han colocado siempre se puede colocar el video en formarto Flash y verlos de esa manera:

    <video controls width="350" height="250" >
        <source src="video.ogv" type="video/ogg" />
        <source src="video.mp4" type="video/mp4" />    
        

    http://player.swf?file=video.mp4

    
    </video>

    Al momento algunos navegadores responden mejor que otros al elemento video, y muchas personas utilizan navegadores viejos, para estos casos Flash es todavía una buena alternativa, aunque la tendencia parece indicar que el elemento video se consolidará cada vez más poco a poco.

    La comparación

    Cuando se trata de video, HTML5 en general tiene mejor rendimiento en términos de consumo de recursos y más fácil de implementar cuando hablamos de código, pero por el momento la distribución de Flash es mayor y funciona igual en todos los navegadores una vez que estos tienen el plug-in instalado. Flash tiene manejo de pantalla a tamaño completo, HTML5 no por el momento, aunque se sabe que se trabaja sobre ello. Flash soporta video en streaming, HTML5 lo hará en el futuro pero por ahora no lo puede hacer.

    Todas las desventajas del video en HTML5 sobre Flash parecen ser temporales y a esto se suma que Adobe anunció recientemente (Nov 2011), que ya no habrá desarrollo de Flash para móviles, veremos que pasa!

    Ir a parte 3       Ir a parte 5

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

    No Comment