Categoría: Ideas

  • Upload A File With HTML5 / Subir un archivo con HTML5
    CSS3 / Desarrollo / Development / Diseño Web / HTML5 / Ideas / JavaScript / Programación / Programming / Software

    Subir un archivo con HTML5
    flashw

    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:

    39 Comments
  • Educación / Education / HTML5 / Ideas

    Visita al Instituto Tecnológico Superior de Tlaxco
    flashw

    El 8 de Noviembre del  2011 tuve la oportunidad de estar en el Instituto Tecnológico Superior de Tlaxco, en un ambiente muy agradable en donde tuve la gusto de platicar con estudiantes del mismo instituto en un ameno par de horas acerca de tecnología y lo que gira alrededor de HTML5.

    Tengo que admitir que tuve que darle un giro inesperado a la charla ya que normalmente platico con profesionales o estudiantes de las tecnologías de información, y sin embago, la audiencia fue formada predominantemente por estudiantes de Ingeniería en Gestión Empresarial. Sin embargo esto me dio la oportunidad de discutir con todos los que estuvieron presentes cómo las áreas de tecnología están presentes en todas las demás disciplinas, y la forma en que se complementan.

    Hablamos de cómo HTML5 entre otras tecnologías, y cómo en conjunto, afectan y empujan la presencia, logística, promoción, eficiencia y eficacia en general de cualquier empresa y cómo estas mismas y las personas que las dirigen deben estar al tanto de las nuevas posibilidades tecnológicas para obtener ventaja sobre la competencia o simplemente permanecer competitivas.

    Hablamos de la importancia de conocer de temas de vanguardia en tecnología ,como lo es hoy HTML5, tanto en la academia como estrategia para una mejor preparación, como  incluso un motivo (entre otros) para pensar en crear empresas que utilicen tecnologías de información como productos o servicios.

    Disfruté mucho el platicar y convivir con los estudiante que y profesores que pude conocer. Gracias Alfaomega Grupo Editor pude obsequiar algunos ejemplares de la versión impresa de mi libro Arrancar con HTML5 (puede descarga la versión PDF y gratuita de este libro y sus ejercicios aquí).

    Agradezco al Instituto Tecnológico Superior de Tlaxco y Alfaomega Grupo Editor la oportunidad que me brindaron para poder platicar en Tlaxco un poco acerca de HTML5 y de tecnología en general, ¡gracias!.

    2 Comments
  • HTML5 / Ideas

    Una charla acerca de HTML5 en la Universidad de Colima
    flashw

    CNCIIC-ANIEI 2011

    En el marco del XXIV Congreso Nacional y X Congreso Internacional de Informática y Computación (CNCIIC-ANIEI 2011) que se llevó a cabo en la Facultad de Telemática de  la Universidad de Colima tuve la fortuna de compartir un tiempo con estudiantes, profesionistas, profesores, etc., que asistieron a las diferentes actividades que tuvieron lugar en el evento. Como parte de estas actividades disfruté de una breve charla  con algunos estudiantes provenientes de diversos lugares del país, en esta charla tuve el privilegio de hablar con ellos acerca de los Mitos y Realidades del HTML5 y de presentarles mi reciente libro Arrancar con HTML5.

    A lo largo de los próximos días comentaré algunos puntos interesantes acerca de algunos temas que escuché en este congreso, escribiré respuestas a las preguntas más comunes que me hicieron llegar los estudiantes con los que platiqué a lo largo del evento y por supuesto compartiré ejemplos y código (con explicación)  que también me solicitaron a lo largo del evento.

    Sin más deseo agradecer al comité organizador de CNCIIC-ANIEI 2011 a la ANIEI, a la Universidad de Colima, a la Facultad de Telemática, al equipo AlfaOmega y sobre todo a los asistentes a la charla Mitos y Realidades de HTML5 (que anque nos quitaron tiempo espero algo hayan sacado provecho de la charla).

    4 Comments
  • Arrancar con HTML5
    CSS3 / Desarrollo / Development / Diseño Web / HTML5 / Ideas / Programación / Programming / Software

    Mi Libro: Arrancar con HTML5
    flashw

    Puede ser un poco difícil hablar “bien” de tu propio trabajo, especialmente cuando se busca promocionarlo, pero además de ser necesario para vivir, creo que está bien cuando crees que ese trabajo puede servirle a alguien más y de esa forma se crea un círculo virtuoso donde todos ganan (al menos esa es mi intención).

    Continuamente estoy experimentando con nuevas tecnologías de desarrollo para aplicaciones (multimedia y web principalmente), lo que constantemente me lleva buscar información de utilidad en todas las fuentes que tengo a mi alcance. La información que se puede encontrar está escrita predominantemente en inglés, lo cual no me representa problema hoy en día, pero en algún momento fue una difícil barrera.

    Además del lenguaje, otro problema que sufrí en mi vida como simple estudiante mexicano con cierta curiosidad por las tecnologías de información, era la falta de interés del ambiente que me rodeaba (para ser honesto) y por lo tanto la falta de disponibilidad de información reciente, de punta y veraz acerca de algunos temas de tecnología. Aunque Internet ha llegado para ayudar a mitigar este inconveniente de gran manera, la selección, interpretación, exactitud y orden de la información no siempre es sencilla y es en estos casos en los que un simple libro es aun algo muy útil.

    Entre otros, estos inconvenientes siguen existiendo el día de hoy en la vida de muchas personas, sobre todo cuando somos “principiantes”. Es por todo esto que decidí crear un libro que abordara el tema de HTML5 y así apoyar  a todas las personas de habla hispana que estén interesadas en iniciarse en el fascinante mundo del desarrollo web, pero que también desean hacerlo con tecnologías de vanguardia y así ser competitivas casi desde el inicio.

    Aunque este libro (Arrancar con HTML5) enfatiza en desarrolladores que comienzan, definitivamente también es una buena alternativa para el programador con experiencia pero que también comienza con HTML5. Aunque lo anterior indica el nicho principal al que apunta Arrancar con HTML5, el programador ya iniciado en HTML5 puede usar el libro como una referencia rápida para algunos puntos precisos.

    Sin más, las personas que conforman AlfaOmega Grupo Editor, a las cuales agradezco, y su servidor ponen a su disposición Arrancar con HTML5 – Curso de programación en toda latinoamerica. En España este libro está diponible gracias a la editorial Marcombo.

    No Comment
  • Dennis Ritchie y Wilson Greatbatch
    Ideas / Programación / Programming

    Grandes que también murieron: Dennis Ritchie padre de C y Unix y Wilson Greatbatch inventor del marcapasos
    flashw

    Dennis Ritchie y Wilson Greatbatch

    La semana pasada murió también (unos días depués de Steve Jobs) Dennis Ritchie uno de los hombres más influyentes en el mundo de la tecnología y en el desarrollo de las ciencias de la computación. Sin duda toda una pérdida, ya que Ritchie fué uno de los creadores del  sistema operativo Unix junto con Ken Thompson y también fué el creador del lengua C original.

    También ha finales del mes pasado, murió Wilson Greatbatch a la edad de 92 años quien fué el inventor del marcapasos y que fué por primera vez implantado en humanos en la década de los 60s.

    Dennis Ritchie por un lado creó un sistema operativo sobre el cual se basan aún muchos sistemas hoy en día, ya sea de manera literal o de manera filosófica, lo mismo pasa con el lenguaje de programación C, el cual se sigue utilizando para desarrollar sistemas y aplicaciones modernas, sin dejar de lado que ha sido la referencia para crear nuevos lenguajes o scripts. De hecho podemos decir, de alguna manera, que Steve Jobs, y otros, fueron los chicos listos parados sobre el hombro del gigante Dennis Ritchie en términos de trascendencia tecnológica.

    Por el otro lado Wilson Greatbatch, no se si hay algo más que se pueda decir acerca de este hombre y su legado en términos influenciar la vida de las personas, el invento de esta persona vaya que no puede ir más de acuerdo con esa frase. Se ha mencionado mucho que Jobs fué dueño de alrededor tres decenas de patentes, Greatbatch creó literalmente cientos, pero la más famosa claro será el marcapasos cardíaco.

    Me ha parecido importante escribir de estos hombres, ya que al no estar en el lado mercadológico o más público de la tecnología, son muertes no tan nombradas y sin embargo hicieron contribuciones al mundo muy importantes, en mi humilde opinión, más importantes que cualquier gadget, tableta, o servicio de música.

    No es mi intención demeritar el trabajo de Jobs o de alguien más, pero también es importante recordar y admirar a aquellos que no tuvieron tanto reflector  pero que hicieron cosas realmente extraordinarias.

    Algunos enlaces que pueden ser de su interés:

    List of pioneers in computer science

    Dennis Ritchie’s home page at Bell Labs

    Dennis Ritchie’s video interview June 2011

    A video interview with Wilson Greatbatch

    Implantable pacemaker inventor Wilson Greatbatch dies

    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
  • Steve Jobs dies
    Ideas / Software

    Steve Jobs ha fallecido
    flashw
    Muere Steve Jobs
    Steve Jobs

    Esta tarde en el sitio oficial de Apple www.apple.com se publicó un comunicado anunciando la muerte de Steve Jobs a sus 56 años de edad. El sitio coloca una solidaria foto (que también se muestra al inicio de esta entrada), que únicamente dice: Steve Jobs 1955-2011.

    No soy fanático de Apple (algunos productos me gustan y otros no),  y aunque no comparto una admiración ciega por la marca, sí comparto en buena medida la admiración por el hombre que hizo de Apple la compañía que es hoy. Sin duda la muerte de Steve Jobs es una baja sensible para la industria de la tecnología, y de alguna manera, una perdida para aquellos que crecimos sintiendo cierta admiración y respeto por la tenacidad, visión y logros de Jobs.

    Seguramente muchos personas, blogs, podcasts, noticieros y otros medios dedicarán mucho más tiempo para hablar de la carrera de Steve Jobs, lamentar su muerte y expresar sus condolencias, lo cual está muy bien, sin embargo creo que más que lamentar su muerte habrá que celebrar los aportes que hizo a nuestra vida diaria, aprender de sus aciertos y errores, y de esa manera inspirarnos para llevar a cabo nuestras propias ideas y nunca dejarlas en el tintero, justo como hizo Steve.

    Tu tiempo es limitado, de modo que no lo malgastes viviendo la vida de alguien distinto. No quedes atrapado en el dogma, que es vivir como otros piensan que deberías vivir.

    Steve Jobs.

    Extracto de Discurso de Steve Jobs en la Universidad de Stanford 2005

    4 Comments
  • 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