Etiqueta: flash

  • gamification o gamificación
    Desarrollo / Development / Destacadas / Featured / Diseño Web / Experiencia de Usuario / UX / Gamificación / Gamification / Ideas / Programación / Programming

    Gamification
    flashw

    Playing while working, studying, exercising or using the web

    Those of us who have been or are gamers know that the idea or concept of gamification has been hovering around forever (at least, about 3 decades). Remember old phrases like, learn by playing! lose weight while having fun! etc. Now, although the concept is old, the term was coined thanks to a computer programmer named Nick Pelling in 2002, but in reality, the concept has begun to attract attention only in recent years.

    Lately, I have met many people who use dazzling terms such as “game mechanics”, “game dynamics” or aims to establish as something complex and laborious the implementation of the concept, confusing the basic idea of gamification with complex marketing campaigns and big data. Certainly, you can create a sophisticated gamification implementation, but based on my experience involved in multimedia development teams since 1998, I can say that a lot about implementing gamification is just common sense.

    Without being or pretending to be an expert in gamification, below I share some ideas, terms, and approaches that I’ve learned over time:

    What is gamification?

    There are lots of sites where you can get nice definitions about what gamification is, but to save the trip to Wikipedia, this is its definition:

    Gamification is the application of game-design elements and game principles in non-game contexts. Gamification commonly employs game design elements to improve user engagement, organizational productivity, flow, learning, crowdsourcing, employee recruitment and evaluation, ease of use, usefulness of systems, physical exercise, traffic violations, voter apathy, and more. A collection of research on gamification shows that a majority of studies on gamification find it has positive effects on individuals. However, individual and contextual differences exist. Gamification can also improve an individual’s ability to comprehend digital content and understand a certain area of study such as music.

    Did you understand that? Basically, it means, turns a task into something more interesting by adopting the logic of a game. The simplest way would be giving some sort of reward for doing some activity. The prize can be as obvious as a trophy or as vague and subjective as simply seeking to offer fun while doing a specific task. But of course, there’s much more that can be done, especially when human behavior is considered.

    But to meet the cliché, this is my personal definition:

    Gamification is the application of the metaphor of gaming to common or compulsory tasks to influence behavior, giving more motivation and increasing involvement, preference or loyalty.

    Are video games useful?

    For some years I was a World of Warcraft player, a very popular video game with millions of users, which I think is a great example of how these games can be related to the real world. Within World of Warcraft, one of the objectives is to make money. This money can be obtained in several ways, but most of it is completing quests (missions). As a result of solving the missions you get gold, which the player uses to obtain different things like buying clothes, weapons, materials, improvements, information for new missions, etc. (Does this sound familiar?), this is the basics of any business and an important part of life. Day by day World of Warcraft players spend their time making goods, offering services and fulfilling missions. In the real world, we do the same, we earn money to obtain some achievement; We spend that money on buying new things or we invest in something that allows us to earn more money or do something more efficiently or comfortably.

    A valid question would be why these players are so willing to spend so much time doing what they could do in real life? The answer is easy: because it’s fun.

    Adopting the idea

    At this point It’s important to clarify that not everything is about video games, we will not see in the immediate future someone willing to play the latest game of Microsoft Project or Word (although, you never know 😉). What we are trying to do is take ideas from games and insert them into some routine task, so these tasks don’t have to be boring to death.

    With all the above in mind I have to be honest, despite the relatively recent popularity of the idea of gamification, not everyone knows what it is, not everyone is interested, it seems that to get hear and understand the term is required of some curiosity, wanting to know what is in vogue about developing, UX, etc., or just having a little bit of geekness. All this makes selling the idea to or in an organization is not as easy as it might seem (at least not here in the third world).

    Recently I participated in a project where customer asked my team, to propose “innovative” ideas (another oversold term) to improve the technological proposal of an organization, as part of this I eventually proposed the idea of incorporating some initial and modest strategy of gamification, giving some overall but concrete examples including just enough detail, not exactly as something “innovative” but as something that only intended to “update” the technological solution implemented at the time. Surprisingly, although the organization which I was working with,  develops technological solutions, 90% of those involved did not know what the hell I was talking about (shame on you Infotec); I had to explain the idea to business analysts, deputy directors, directors, contractors and developers without much success (nobody is a prophet in his own land, but I like to think I threw some light on lost souls).

    I have to add that the word gamification is weird English and the translations into Spanish sound even worse, so the word doesn’t help too much to sell the concept, as a result of this experience I came up to the conclusion that in order to adopt the idea more easily, we must use words such as Productivity, Behavior Changes, Motivation and Preference (or engagement if you prefer the marketing jargon).

    Points, Medals, Trophies, Position Tables

    As responsible for a project some time ago, I needed to make a quality assurance in a series of contents for courses, with a lot of information to review and very little time, I told the members of my team, that the two people who found more errors would earn a big coffee every day for the next week. Suddenly a game was on.

    Fortunately, we do not always need to resort to real physical awards in all cases. The management of information that users provide their organization, website or mobile application can be used to award prizes in different ways, the most common are:

    • Points
    • Medals
    • Trophies
    • Levels
    • Position Tables
    • Challenges
    • Achievements

    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.

    These examples are certainly very simple since only seek to motivate more users to carry out a task, and of course, they leave much more to exploit the concept, but they’re a good starting point to explore the benefits of gamification.

    Not everything is about money

    A strange and limited argument that I came across when I proposed gamification, is that accordingly with someone’s assumption, gamification was about giving economic incentives in the form of cash, coupons or discounts, which of course is not necessarily true, and falling into that assumption usually creates concern and even rejection from the sponsors of any project or production chain. Money is a good motivator for a user (it always is), but there is a word that you will find very often in blogs and books about gamification and also I already mentioned, this is engagement, this means that money will always motivate you doing some task but won’t necessarily “hook” you to it nor will make the activity enjoyable.

    What else?

    If you start to delve deeper into gamification issues, you will eventually realize that there is much more than just depending on incentives and certainly much more than relying on money. You will be using human behavior and the famous reptilian brain, that is, use in your favor something that is within human nature itself, play. Using gamification you will be appealing to feelings of pride and need for recognition, with which you could achieve even more than offering money in exchange.

    In conclusion

    I’ll share with you a couple of videos about some educational projects where I was involved and I used gamification (they’re old but still valid to understand the concept) and some bibliographies that I found useful and interesting:

    Books:

    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:

    Risk Prevention

    Mexico’s Economic Development

    English Learning Card Game

    Thanks to @Mordred77M  for the English translation, he’s not a natural English speaker and he´s still learning so don’t be grumpy and help him to improve 🙂

    Related links:

    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)

    No Comment
  • gamification o gamificación
    Desarrollo / Development / Diseño Web / Experiencia de Usuario / UX / Gamificación / Gamification / Ideas / Programación / Programming

    Gamification o Gamificación
    flashw

    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)

    3 Comments
  • Flash VS HTML5
    Desarrollo / Development / Diseño Web / HTML5 / Ideas / Programación / Programming

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

    Flash VS HTML5

    Historia

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

    Enlaces a las posts previos:

    Flash VS HTML5 Parte 4

    Flash VS HTML5 Parte 3

    Flash VS HTML5 Parte 2

    Flash VS HTML5 Parte 1

    2 Comments
  • Flash VS HTML5
    Diseño Web / HTML5 / JavaScript / Programación / Programming

    Flash VS HTML5 (Parte 4)
    flashw

    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

    No Comment
  • Flash VS HTML5
    Desarrollo / Development / Diseño Web / HTML5 / Ideas / JavaScript / Programación / Programming

    Flash VS HTML5 (Parte 3)
    flashw

    Por alguna razón mucha gente buscamos que haya buenos y malos en muchas situaciones, casi sin cuestionamiento el títlo de bueno se le ha dado a HTML5, los malos Flash y Silverligth y si desea agregar el feo quizá una vez más Silverlight.

    La realidad es que no hay bandos reales, lo que tenemos son más opciones y eso es lo que hay que aprovechar. Por supuesto habrá situaciones donde hay que elegir, y para tomar decisiones hay que conocer algunas características de nuestras alternativas:

    Animación.

    Flash.

    Primero hay que estar al tanto que Flash nació como una herramienta de animación en un sentido más tradicional, la primera herramienta que creaba contenido Flash era un programa con herramientas del tipo “diseño gráfico” como líneas, círculos, rectángulos, bote de pintura, etc., y con una línea de tiempo para colocar las figuras dibujadas frame a frame y manipularlas de acuerdo a lo que se deseaba.

    Flash ha evolucionado y ya no cuenta con una sola herramienta para crear contenido, Flash ya no solo está orientado a sólo a hacer animaciones “artísticas o experimentales” si no que inclinado a ser un verdadero framework para crear aplicaciones conocidas como RIAs (Rich Internet Aplications), en estas puede combinar diferentes grados de animación.

    Ventajas:

    • Hacer y animar fluidamente dibujos de trazo libre es amable y fácil.
    • Hay una amplia comunidad desarrollo.
    • Existe mucha documentación libre y de pago.
    • Adobe está constantemente mejorando esta tecnología.
    • Los resultados visuales que se pueden obtener son realmente de muy alta calidad.

    Desventajas:

    • Se require de un plug-in de tercero instalado para ver contenido Flash.
    • La versión del plug-in puede ser un factor problemático para usuarios y desarrolladores.
    • El contenido Flash no es indexable, esto dificulta que los buscadores y otras herramientas  ubiquen, interpreten y clasifiquen su contenido.
    • Además  de conocer HTML, JavaScript, CSS, etc., hay que aprender ActionScript y múltiples herramientas para explotar verdaderamente el potencial de Flash.
    • Los elementos más interesantes de la plataforma Flash son propietarios, por lo tanto tienen costo.

    HTML5

    La animación en HTML5 cuenta con varias alternativas para ser creada, puede usar solo JavaScript y CSS3, puede utilizar el elemento Canvas o la tecnología SVG. Todos estas alternativas han sido creadas desde un punto de vista programático, es decir, siempre se pensó en crear animaciones utilizando código de programación y no una  herramienta de diseño con una interfaz de usuario.

    HTML5 se encuentra evolucionando rápidamente y mucha gente está prestando atención, la misma compañía dueña de Flash ha estado experimentando con las posibilidades de este nuevo estándar y proponiendo cosas, como la importación de contenido desde la aplicación Adobe Flash a HTML5, la creación de Adobe Edge (que si me preguntan es un intento de hacer de HTML5 lo que Flash fue originalmente) , entre otras cosas.

    Ventajas:

    • Todo es libre y gratuito.
    • No existe necesidad de utilizar plug-ins.
    • Una rápidamente creciente comunidad de desarrollo y documentación.
    • La indexación de contenido combinado con la fuerte semántica de HTML5 van de la mano de gran manera.

    Desventajas:

    • HTML5 no es lo más conveniente para la animación detallada y fluida (del tipo dibujo animado) por ahora.
    • HTML5 no es una especificación terminada, por lo que hay cosas que aún no están concluidas o son experimentales.
    • No todos los navegadores soportan todas las características de HTML5 o no las soportan de igual manera.
    • HTML5 no tiene aún buenas alternativas que sean amables con diseñadores gráficos.

    Cuando hablamos de animación, el consumo de recursos es un punto donde se critica mucho a Flash, pero tengo que admitir que Adobe se está esforzando mucho en este sentido y HTML5 aunque promete en este tema, tiene sus bemoles en ciertas circunstancias, habrá que esperar un poco para definir este punto con claridad.

    Conclusiones:

    Si desea hacer animaciones con trazos libres, que no requieren demasiada programación pero si mucho trabajo gráfico y deben ser de gran fluidez, mi recomendación es Flash.

    Si desea hacer aplicaciones de escritorio con moderado grado de animación y muy  buena presentación, considere utilizar AIR , si desea importar estas aplicaciones a la web o viceversa Flex es una buena opción (estas tecnologías son parte de la plataforma Flash).

    Si desea hacer aplicaciones web con moderado grado de animación y desea familiarizarse con los estándares del futuro vale la pena dedicarle tiempo a HTML5.

    Si el presupuesto es un problema, los estándares libres siempre son una interesante opción, es claro que HTML5 brilla en este caso.

    En la siguiente parte de esta serie de posts abordaré ventajas y desventaja de estas tecnologías desde el punto de vista de video.

    Ir a parte 2         Ir a parte 4

    No Comment
  • Flash VS HTML5
    Desarrollo / Development / Diseño Web / HTML5 / Ideas / JavaScript / Programación / Programming

    Flash VS HTML5 (Parte 2)
    flashw

    En la entrada anterior hablé de la tecnología Flash y un poco de su historia, con el fin de comprender mejor de que va Flash desde su inicio. Ahora le toca el turno al famoso y esperado HTML5. De unos dos años para acá se ha hecho mucho escándalo alrededor del flamante HTML5, y con razón, ya que presenta muchas nuevas y prometedoras características.

    He observado que muchas persona caen en una impresición similar a cuando se habla de Flash, es decir se habla de HTML5 como un todo, como una especie de entidad única que merodea en la Web creando páginas interesantes. La verdad es que HTML5 es algo que viene acompañado de varías tecnologías con las cuales se complementa para poder funcionar.

    HTML5 es únicamente la especificación más nueva, publicada por la W3C para HTML, el lenguaje base para crear páginas Web. La especificación define como deberían escribirse las etiquetas o tags que instancian un elemento HTML en nuestras páginas, que atributos y eventos poseen. Eso es todo, y lo más curios de todo es que ni siquiera es una especificación completa ni terminada, pero entonces ¿por qué tanto escándalo? :

    HTML5 es más rigorista.

    Anteriormente si se escribía una página HTML podía caer en errores de escritura, combinar mayúsculas y minúsculas en el código, no cerrar etiquetas que requerían cierre, ignorar tipos MIME, entre otras cosas de mal gusto para programadores exigentes, y las páginas en muchos casos aún se veían como se esperaba, haciéndonos olvidar todos los errores cometidos y creando malos hábitos. Para intentar solucionar esto se creó XHTML, pero nunca fue ciento por ciento adoptado por todos los desarrolladores. HTML5 intenta recuperar el espíritu de precisión de XHTML, mantener la familiaridad de HTML y unificarlo todo en la nueva especificación HTML5 (en el futuro crearé un post para hablar de XHTML2 y XHTML5 que tienen su historia, pero me lo guardo para no salir de contexto).

    El énfasis en la semántica en el código HTML es realmente notable e incluso abrumador cuando se comienza a desarrollar.

    Nuevas etiquetas para formularios.

    Tengo la impresión de que este punto no es muy mencionado pero a mi me parece importante porque puede ahorrar tiempo y costos. HTML5 incluye una nueva serie de etiquetas para colocar nuevos controles para formularios, por ejemplo, barras de progreso, campos de texto que filtran números y patrones, campos de texto que validan direcciones de correo y URLs, campos de texto que muestra color pickers y calendarios, entre otros más. Este tipo de controles requerían de programación y tiempo extra o incluso de comprar controles de terceros, pero HTML5 lo incluye de entrada.

    Nuevas etiquetas para contenido multimedia.

    Este aspecto en realidad al que la mayoría de la gente se refiere cuando habla de HTML5. La nueva especificación propone nuevas etiquetas para colocar audio y video de manera nativa sin el uso de plug-ins de terceros y/o propietarios, como justamente son el Flash Player o el reproductor de contenido Silverlight.

    Pone sobre la mesa el elemento Canvas, que es justamente uno de los recursos principales para crear animaciones con gráficos vectoriales e imágenes, sin embargo esto se hace hoy por hoy principalmente de manera programática, nótese esto porque será un punto importante para el encuentro mano a mano entre Flash y HTML5 para la tercera parte de la entrega de posts.

    CSS3 y JavaScript.

    Tecnologías sin las cuales HTML5 no podría hacer algo mínimamente  interesante  y que se encuetran evolucionando paralelamente al mismo HTML5. Esto es algo sumamente importante, ya que antes de alguien pueda pensar en que aprender HTML5 solo es conocer algunas etiquetas nuevas, la realidad es que si aspira a desarrollar con HTML5 debe aprender la nueva especificación para hojas de estilo nivel 3 o CSS3 y los nuevos recurso JavaScript. Combinando etiquetas HTML5, CSS3 y JavaScript se puede lograr una mucho mejor manipulación del aspecto y comportamiento de elementos HTML que nunca antes, logrando una mejor estética en nuestras páginas y en nuestro código al separar programación estructural de programación visual.

    Web sockets y Web workers.

    No hablaré mucho de esto, solo diré que aquellos gurús adentrados en programación con sockets y la programación por hilos tienen en HTML5 algo muy interesante por revisar.

    En la próxima entrada ¡comenzarán los verdaderos golpes!

    Ir a parte 1            Ir a parte 3

    No Comment
  • Flash VS HTML5
    Desarrollo / Development / Diseño Web / Experiencia de Usuario / UX / HTML5 / Ideas / JavaScript / Programación / Programming / Software

    Flash VS HTML5 (Parte 1)
    flashw

    No se trata de una guerra, ni de una pelea, de hecho consideré titular esta entrada como Flash y HTML5 pero me pareció que el “versus” sería más provocador para los “fanboys“.  Personalmente creo que Flash se ha ganado el lugar que tiene en la Web, pero esto no quiere decir que siempre estará ahí, que siempre será la mejor o la única opción.

    Últimamente de manera continua algunas personas, que comienzan a desarrollar,  me han preguntado que es mejor y al mismo tiempo me he dado cuenta de algunas confusiones en el tema, de manera que decidí hacer una serie posts abordando el asunto y  esperando despejar algunas dudas a quienes desean desarrollar con estas tecnologías.

    Flash:

    Aveces se menciona a Flash como un todo, pero en realidad hay varias partes involucradas. Flash surgió como una tecnología  propuesta por la compañía Macromedia a finales de los 90s, que permitía desplegar gráficos vectoriales en páginas Web, Flash consta básicamente de un plug-in instalado en el navegador de un usuario que permite el despliegue de contenido elaborado en este formato, a esto se le conoce como Flash Player. Al mismo tiempo que Flash Player Macromedia creó la herramienta con la que originalmente se podía crear este tipo de contenido, esta herramienta fue concebida como un software de animación para crear contenido destinado principalmente a la Web, este software se le llamaba simplemente Flash.

    El Flash y el Flash Player han ido evolucionando lo largo de los años, durante este tiempo Macromedia liberó parte de su tecnología para permitir a terceros crear contenido SWF (el formato que comprende Flash Player), e esto se agregó la posibilidad de incluir video en formato FLV el cuál también se visualiza gracias a Flash Player. Otra parte importante de Flash es su script de desarrollo conocido como ActionScript el cuál también ha tenido cambios importantes.

    En 2005 la compañía Adobe (dueños de Photoshop) adquiere a Macromedia, con esto también vinieron cambios sobre Flash, la herramienta de autoría ahora se conoce como Adobe Flash Professional y surge también la nueva versión de su script el popular ActionScript3, el cuál introduce al desarrollo con Flash verdadera programación orientada a objetos.

    Una de las mayores limitantes de Flash ha sido su pobre interacción con datos y su poco practicidad para crear aplicaciones que buscaban más productividad y un tanto menos de animación como tal, manteniéndose aún sobre la Web pero considerando  también aplicaciones de escritorio. Adobe consciente de esto crea Flex y AIR, un conjunto de tecnologías que también crean contenido Flash pero con mejores capacidades en cuanto al desarrollo con el manejo de datos, y más orientada al desarrollo tradicional de aplicaciones.

    Las  grandes desventajas de las tecnologías basadas en Flash siempre han estado relacionadas con el rendimiento en general, el consumos de recursos y algunos temas de seguridad. Factores que hay que considerar antes de crear una aplicación.

    En la siguiente parte de esta entrada abordaré al novedoso HTML5…..

    Ir a parte 2

    1 Comment