iPad con drag and drop (HTML5)

Con la llegada del Apple iPAD los portales en Internet, principalmente diarios y revistas, deberán tomar la decisión de crear sus aplicaciones específicamente para iPAD, con un mercado muy reducido, o fortalecer su presencia en la Web haciendo uso de tecnologías que han sido fuertemente promovidas a partir de la creación de este dispositivo.

Qué tipos de aplicaciones puedo crear para iPAD?

El dispositivo iPad soporta dos tipos de aplicaciones: iOS Apps y Web Apps.

Las aplicaciones iOS son las preferidas por los usuarios de iPAD. Están desarrolladas en tecnología Objetive C y se instalan en los dispositivos a través de la tienda de aplicaciones de Apple. Para poder publicarlas en la tienda de aplicaciones, es necesario pasar por un proceso de aprobación establecido por Apple. El mismo, puede ser muy sencillo o muy complejo dependiendo del tipo de aplicación, el contenido a exhibir o la funcionalidad a resolver.

Las aplicaciones Web no requieren ningún tipo de control por parte de Apple y son liberadas al mercado de forma directa. Están desarrolladas en tecnologías Web conocidas y pueden funcionar en cualquier plataforma PC, MAC o móvil con soporte HTML5 / CSS3.

En última instancia, la decisión sobre construir una aplicación iOS o Web deberá evaluarse en función del requerimiento funcional del aplicativo.

La Web en iPAD: HTML5

Como ya hemos comentado en otros artículos, HTML5 / CSS3 están ganando terreno día a día en el campo del desarrollo de aplicaciones dinámicas en Internet (RIA) y sitios web interactivos. Ofrecen una seria de funcionalidades hasta ahora sólo conseguidas con productos como Flash, Flex o Silverlight que requieren la instalación de complementos en el navegador del usuario.

Apple ha excluido el soporte de complementos y ha impulsado fuertemente el estándar HTML5 como la única opción viable para desarrollar aplicaciones en la Web. Esta posición, más allá de las críticas, se encuentra alineada con acciones de empresas como Google.

Qué es HTML5 / CSS3?

HTML5 es la evolución de la especificación de la Web desarrollada en 1997. Son nuevas funcionalidades que se agregan el estándar de codificación HTML y por las cuales será posible lo que hasta ahora se lograba con la incorporación de otras tecnologías a nuestros desarrollos.

HTML5 / CSS3 permite:

Además de estas nuevas opciones de funcionalidad HTML5 ofrece características técnicas que facilitan implementaciones de sitios de alto tráfico:

- Al estar construido a partir de archivos Javascript y CSS, pueden trasmitirse en modo GZIP / DEFLATE al cliente, reduciendo significativamente el tamaño de una página

- Permite persistir funcionalidad interactiva del lado del cliente

- No requiere complementos en el cliente (Flash Player)

Aplicaciones sólo para iPAD?

Cuando desarrollamos Web Apps para iPAD basadas en HTML5 lo hacemos pensando en que funcionarán en Safari, pero sabemos que también funcionarán en otros navegadores de diferentes dispositivos y computadoras de escritorio (Google Chrome, Internet Explorer 9, FireFox 3.6).

Por otro lado ¿podemos pensar que los desarrollos creados para otros dispositivos funcionarán en iPAD correctamente? En la amplia mayoría de los casos, los sitios podrán visualizarse sin problemas. No obstante, el manejo de eventos de la interfaz Web deberá contemplar eventos táctiles para poder ser utilizados.

Durante mucho tiempo, las organizaciones desarrollaban versiones especiales de sus sitios Web optimizadas para dispositivos móviles. Actualmente, deberán abandonar esa concepción para desarrollar aplicaciones con soporte para dispositivos táctiles y funcionalidad enriquecida soportada por navegadores de última generación.

De esta forma, las empresas pueden tener presencia en el segmento de usuarios iPAD y re-aprovechar esa inversión para mejorar su presencia global en la Web.

HTML5 es la nueva especificación de HTML y XHTML, núcleo de la Web como la conocemos. Uno de los principales objetivos de HTML5 es llevar a los usuarios una experiencia de navegación superior al mismo tiempo que reduce la necesidad de utilizar componentes de terceras partes como Adobe Flash y Microsoft Silverlight.

HTML5 vs FLASH es probablemente una de las discusiones más intensas de la Web en la actualidad. A continuación exploramos que es HTML5 y porque comienza a tener un rol importante en la Web más allá de la discusión técnica.

HTML5 incorpora dentro de sus capacidades: cache de aplicaciones, almacenamiento de datos  desconectado (offline), drag and drop, edición de documentos, audio y video, geolocalización, etc. El cache de aplicaciones, introducido por Adobe Flash, permite que aplicaciones Web se comporten como aplicaciones de escritorio. Por otro lado,  el almacenamiento de datos offline permite que utilicemos aplicaciones Web y naveguemos por contenido mientras estamos desconectados de Internet.

HTML5 propone realizar esto mismo pero utilizando código JAVASCRIPT. Muchos de los avance producidos por frameworks de Javascript como JQUERY, Ajax y otros forman parte de la propuesta de especificación de HTML5. Algunos ejemplos de lo que podemos hacer con HTML5 en: http://html5demos.com/

Mas allá de la discusión técnica sobre la superioridad de ADOBE Flash sobre HTML5 (o viceversa) tenemos que considerar los siguientes hechos que dan cuenta de  una tendencia en la Web:

1. GOOGLE: fue la primera compañía que comenzó a incorporar HTML5 como tecnología de núcleo en sus sistemas. Es lo que  posibilita utilizar la mayoría de sus aplicaciones de forma desconectada incluyendo GMAIL, Google Docs, Google Reader, etc. A su vez, durante la última conferencia Google I/,  HTML5 estuvo presente en muchas de las sesiones donde se presentaron los adelantos esa tecnología: Chrome Web Store, cloud solutions, etc.

2. APPLE ‘pensamientos sobre Flash’: mediante una carta abierta al mundo, Steve Jobs (CEO de Apple),  explica porque sus productos no soportan o soportarán Adobe Flash. Apple considera que Flash es el pasado y HTML5 es el futuro. Por esa razón, no es posible visualizar sitios Flash en iPhone o Ipad. De acuerdo a Apple, Flash es un sistema propietario, no apto para dispositivos táctiles, con serios problemas de seguridad, estabilidad y rendimiento.

3. YOUTUBE HTML5 BETA [http://www.youtube.com/html5]: Youtube comenzó a desarrollar una alternativa abierta al uso de Flash Player.

4. Microsoft Internet Explorer 9: claramente el foco de esta nueva versión es HTML5, el soporte para GPU-Accelerated HTML5 y el nuevo motor de Javascript.

5. ADOBE DREAMWEAVER: a pesar de haber declarado públicamente que HTML5 como plataforma de video enviaría la Web a la edad de piedra, Adobe dice estar comprometida con el desarrollo de HTML5.

Por un lado, considera que las capacidades de reproducción de video (múltiples codecs) soportados por Flash no serán igualadas por HTML5. Por otro lado, ha liberado un paquete de productos vinculados a HTML5, principalmente HTML5 PACK FOR DREAMWEAVER, que posibilita que los diseñadores Web generen código HTML5 / CSS3.

Finalmente, es importante destacar que HTML5 es una especificación en desarrollo. No obstante, posee aplicación práctica en sistemas productivos empresariales como Google Apps.

Adobe Flex se presenta como la solución de Adobe para atacar la problemática del desarrollo de la capa de presentación de aplicaciones corporativas basadas en internet.

Adobe Flex puede entenderse como una arquitectura compuesta por una serie de productos orientados al desarrollo de RIAs (Rich Internet Applications) que permiten lograr por medio del desarrollo orientado a objetos y/o declarativo los mismos resultados con el impacto visual característico de las aplicaciones desarrolladas a través de la programación en línea de tiempo propia de Flash.

Dado que el Flash es un producto orientado a diseñadores, Adobe presenta Flex como la solución recomendada para programadores que posibilita la construcción de la capa de presentación en aplicaciones de Internet basadas en arquitecturas MVC (Model View Controller).

Qué usos tiene Flex?

Las aplicaciones tradicionales basadas en HTML son consideradas ‘stateless‘ por basarse en una arquitectura en la cual el servidor espera requerimiento del browser y luego envía un resultado al mismo en formato HTML terminando en esa instancia la comunicación entre ambos puntos hasta que un nuevo envío de datos sea disparado. Esta situación limita en gran medida la usabilidad y atractibilidad de las interfaces que pueden ser desarrolladas en html puro.

Ante este escenario, Flex se presenta como una alternativa para la construcción de aplicaciones con interfaces ricas de características similares a las presentadas por aplicaciones ‘pesadas’ desarrolladas para sistemas Windows.

El entorno de trabajo de Flex permite construir a través de una serie de controles de presentación de datos, un componente binario conteniendo la totalidad de la capa de presentación de la aplicación. Este componente esta orientado a ser ejecutado en un navegador (Internet Explorer, Firefox, etc.). Sin embargo, a través de Adobe Air, es posible ejecutar estos binarios como aplicaciones independientes y desconectadas directamente sobre el sistema operativo.

Adobe Flex o Flash?

El Flash fue un producto concebido originalmente para brindar la posibilidad de agregar contenido multimedia interactivo a sitios Web. A través del tiempo, el producto fue creciendo en complejidad y funcionalidades llegando hasta las últimas versiones en las cuales se presenta al desarrollador la posibilidad de programar el comportamiento de su producto mediante un completo lenguaje de scripting (ActionScript) el cual permite la integración con diversas fuentes de datos externas a través de los estándares mas importantes de internet (XML, Webservices, etc.)

A pesar de brindar esta serie de facilidades, Flash ha sido durante muchos años un entorno hostil para los desarrolladores de software familiarizados al desarrollo en lenguajes orientados a objetos mediante técnicas de RAD (Rapid Aplication Development).

Adobe Flex se presenta como una novedad incorporando a la tecnología Flash la posibilidad de programar en forma declarativa u orientada a objetos permitiendo a través de una liberaría de controles de datos (grillas, listas, campos de texto, paneles, solapas, etc.) la construcción de aplicaciones de características similares a las desarrolladas en entornos de RAD (como Visual Basic).

Es importante tener en cuenta que un producto final compilado desarrollado en Flex es, al igual que cualquier otro desarrollo Flash, un SWF que debe ser ejecutado utilizando el Flash Player 9 o superior. Sin embargo es necesario considerar que, debido a los servicios que requiere, las aplicaciones desarrolladas en Flex pueden presentar una importante disminución en su rendimiento respecto a aplicaciones de similares características desarrolladas en Flash. 

Qué alternativas existen a Adobe Flex? Ajax, HTML5, DHTML y Silverlight.

Frente a la necesidad de brindar una experiencia de usuario rica en aplicaciones Web, Flex se presenta en varios escenarios enfrentando principalmente con Ajax. Ante esta comparación es importante tener en cuenta que Flex fue concebido para su uso en RIAs y no para RWAs (Rich Web Applications). Aunque no sea completamente claro el límite entre ambas definiciones, se considera RIA a las aplicaciones ‘desktop like’ (simil aplicaciones de escritorio Win32) que hacen uso de Internet para conectividad y despliegue. En este caso, se trata de una herramienta que permite la generación de un binario que se descarga al cliente y luego interactúa con el servidor a través de Internet sin requerir conexiones HTTP abiertas por el navegador.

En el caso de Ajax se trata de una tecnología tendiente a ampliar el espectro de posibilidades dentro de la propia arquitectura Web basada en páginas HTML.

En el caso del Microsoft Ajax Control Toolkit, el mismo está compuesto por un conjunto de controles muy completos para integrar en sitios Web, haciéndo transparente para el usuario la comunicación de la interfaz  (UI) con el servidor. Este campo de acción se amplía al brindar la posibilidad del desarrollo de componentes personalizados o bien integrando cualquier otra pieza de código desarrollado por terceros.

La gran diferencia entre las soluciones basadas en Ajax y Flex es la carga parcial del contenido web. En Ajax, el contenido no está embebido en un control Active X y no requiere cargar el mismo de forma completa previo su utilización.

A diferencia de otras tecnologías como Java y Coldfusion para las cuales Flex puede presentar una novedad importante en muchos aspectos, existen actualmente diversas librerías de controles gratuitos desarrollados específicamente para las enriquecer la experiencia del usuario en aplicaciones web basadas en tecnologías ASP.NET las cuales tienen un costo de incorporación y mantenimiento menor al incurrido en el caso de optar por tecnologías Flex.

Por su parte Microsoft Silverlight se presenta como la solución preferida en el caso de requerir incorporar un alto despliegue de recursos multimedia mediante controles que agregan valor específicamente en áreas referidas al trabajo con animaciones, videos, transiciones, etc.

Conclusiones

A pesar de que Flex se presenta como un producto que pretende cubrir un vacío en lo que respecta a mejorar el atractivo y la usabilidad de aplicaciones basadas en web, actualmente existen diversas alternativas a los tradicionales documentos y formularios basados en HTML puro y estático.

Por consiguiente se define que aplicaciones/sitios web donde la componente principal esta dada por la interacción con el usuario y el impacto visual, así también como juegos y presentaciones de productos deben continuar desarrollándose en Flash.

Por el contrario, sería recomendable optar por Flex en el caso de requerir el desarrollo de una aplicación corporativa basada en Internet mediante una solución de tipo RIA donde:

1.  se ejecuta un binario por medio de un navegador sobre un entorno controlado
2. surge a partir de los requerimientos funcionales la necesidad de presentar y manipular un gran volumen de datos mediante controles estándar de formularios

A partir de estas observaciones, y teniendo en cuenta que actualmente Adobe presenta en su sitio corporativo a Flash como un producto orientado a la Creatividad y Flex como una herramienta orientada a las Soluciones Corporativas , queda claramente delimitado el escenario que para el cual la empresa pretende impulsar cada una de sus tecnologías.

Referencias

http://www.flex.org
http://flex.sys-con.com/
http://ajax.sys-con.com/
http://www.cflex.net
http://www.adobe.com/devnet/flex/
http://www.adobe.com/devnet/flash/
http://silverlight.net
http://www.asp.net/ajax/ajaxcontroltoolkit/