AUGE - Adobe User Group Ecuador

Somos el Adobe User Group de Ecuador.

Sitio oficial del AUGE - http://auge.ec

AUGE - Adobe User Group Ecuador beta 0.1 Adobe MAX 2013 - 05/06/13

Adobe CC

Después de una larga espera de casi un año y medio finalmente vuelve a haber un Adobe MAX, nuestros amigos de RIACtive estan en Los Ángeles, y han escrito un muy buen artículo detallando las novedades de la próxima suite de Adobe, que estará disponible desde el 17 de Junio y se llamará Adobe CC. Pueden leer aquí más acerca de las novedades presentadas en el día 1 de Adobe MAX:

http://riactive.mx/2013/05/06/adobe-max-2013-keynote-dia-1/

O también pueden ver la repetición del Keynote en demanda aquí:

http://max.adobe.com/watch.html

 

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 Adobe MAX 2011 Resumen - 10/27/11

Y arrancó Adobe MAX 2011, el escenario del Nokia Theater esta vez no estaba decorado con artículos de utilería como el año pasado, simplemente estaba el escenario vacío cuando de repente empezaron un par de bailarines acompañados por la música de un violinista a danzar por el escenario y de repente desaparecieron para mezclarse con las imágenes que proyectaban sobre la espalda del escenario de Adobe MAX, donde una serio de proyectores mostraban en todo el escenario más de 300.000 pixeles de imágenes por segundo lo cual dejo a todos boquiabiertos por la calidad y la fidelidad del video. 

Después de una espectacular coreografía y espectáculo de tecnología, como ya es costumbre arrancó con una keynote que fue dado no por otro que por el Harry Potter de Adobe el CTO Kevin Lynch, el cual empezó hablándonos de una nueva serie de productos en la nube denominada Creative Cloud. La cual consiste de 3 pilares:

El primer gran anuncio durante la keynote fue la adquisición de parte de Adobe de TypeKit una plataforma de manejo de fuentes para la web.  Durante unos minutos el creador de TypeKit Jeffrey Veen estuvo en el escenario hablando del funcionamiento de la plataforma y demostrando la próxima UI que tendrá este servicio de manejo de fuentes. 

Además se anuncio que las funciones de TypeKit para tener una bella tipografía en nuestros sitios web será pronto integrada a los servicios que ofrece Creative Cloud. 

Luego Kevin Lynch continuó hablando del éxito de la Adobe Digital Publishing, y se mostró un video del éxito y la facilidad con que en Vanity Fair usan la DPS. Para después anunciar que habrá una DPS Single Edition disponible por tan solo $395 dólares para una publicación hecha para iPad.

Esto realmente hace accesible la plataforma DPS para que pequeñas empresas o desarrolladores publiquen sus aplicaciones para iPad sin tener que pagar las altas regalías que el modelo de DPS ofrecía solamente antes. 

También se anuncio el debut de un nuevo sitio http://creative.adobe.com, donde puedes compartir tu trabajo creativo con otros, y crear un perfil para que el mundo conozca tu creatividad y que será parte también de la Adobe Creative Cloud.

Luego se hablo de las aplicaciones que Adobe tiene disponible para las tablets y smartphones, las aplicaciones que Adobe denomina Touch.

La primera fue Adobe Ideas, donde Kevin Lynch demostró lo fácil que era hacer un bosquejo de su mascota usando una foto como imagen base, además se anunció la disponibilidad de esta aplicación para Android OS.

Adobe Carousel es la nueva aplicación de Adobe que permitirá a sus usuarios compartir archivos y sincronizarlos entre sus iPhones, iPads, MACs y usar la poderosa tecnología de proceso de imágenes que esta disponible en Photoshop Lightroom.

Adobe Kuler al popular aplicación web para crear paletas de colores será una aplicación para smartphones para crear y compartir paletas de colores desde smartphones.

Adobe Collage, es la nueva aplicación para combinar imágenes, buscar inspiración y compartir contenido con otros a través de Creative Cloud. Además te permite generar archivos para Photoshop y esto fue demostrado por los creadores de Elmo como usaban Collage durante su divertido proceso creativo.

Adobe Debut es otra gran aplicación que te permitirá obtener retroalimentación de tus clientes con tus creaciones ya que te permite compartir archivos de PS, Ai, PDF y luego recibir feedback usando la plataforma de Adobe Creative Cloud.

Finalmente Adobe Proto, que es una aplicación para hacer wireframes de sitios web desde tu Tablet.  Y que te permitirá importarlas a Dreamweaver. Esta aplicación estará disponible primero para Android.

Se menciono que todas las aplicaciones Adobe Touch estarán disponibles tanto para iOS como para Android, con la diferencia que el tiempo de salida de estas aplicaciones en una plataforma u otra puede variar. Además cabe recalcar que la mayoría de estas aplicaciones están hechas con Adobe AIR. 

Y la última aplicación Touch que se mostro fue Adobe Photoshop Touch, que agrega muchas de las características de Photoshop para el retoque de imagen, desde una Tablet. El aspecto que impresiono a todos, es que esta aplicación permitirá visualizar las diferentes capas de una imagen en 3D, es decir rotas una imagen y luego visualizas las capas que están sobrepuestas una sobre otra.

Y también Kevin Lynch demostró como esta aplicación puede interactuar con la cámara de la Tablet y agregar una foto directamente como una capa a una imagen que se esta retocando en Photoshop Touch.

Y esos fueron los anuncios del keynote del día 1, además se menciono que Adobe Creative Cloud tendrá 20GB de almacenamiento en su versión básica y estará disponible a principios del próximo año. Además en este día se anunció que LG y TiVo se integraron al Open Screen Project.

Luego todos partimos a almorzar para luego asistir a las sesiones, labs, BYOD, o unconferences que habían en la agenda del día. 

Llego el día martes 4 de Octubre, donde la segunda keynote sería enteramente dedicada al sector de desarrollo de aplicaciones, ya que el primer día fue dedicado solo para los creativos.

Y así fue como luego otra vez arranco la segunda keynote con la espectacular introducción del día anterior. Y así arranco la keynote del segundo día donde el mensaje fue claro Adobe dará su apoyo total a la creación de herramientas para HTML5 y que este convivirá con Flash, son tecnologías complementarias no rivales.

Del lado de HTML5 se anunció la adquisición de Nitobi de parte Adobe, Nitobi es la empresa creadora de PhoneGap, y además se anuncio que PhoneGap sería contribuido a la fundación Apache lo que garantizará que PhoneGap seguirá siendo un proyecto Open Source a pesar de que Adobe haya adquirido Nitobi. 

Se mostraron varios ejemplos de todo el tipo de aplicaciones que se pueden crear con PhoneGap desde una aplicación hecha para Travelocity, un juego hecho en Canvas hasta Untappd una aplicación hecha para compartir tus gustos con la cerveza.

Luego se hablo del éxito de Machinarium, el juego que escalo hasta los primeros puesto y aplicación de la semana en el Apple App Store. Esta aplicación fue diseñada usando la Creative Suite y desarrollado usando Adobe AIR. Después por unos minutos el VP de USA Network estuvo demostrando otra aplicación hecha con la plataforma Flash para el programa de televisión Psych. Todo esto era una introducción para hablar de AIR 3.0.

Con la introducción de AIR 3.0 y sus  dos principales características:

  • Captive Runtime: que te permitirá empaquetar tu aplicación con el Adobe AIR Runtime incluido, así si un usuario no tiene Adobe AIR instalado, este se instalará al ejecutar el instalador de tu aplicación.
  • Native Extensions: Con esta característica las aplicaciones hechas con Adobe AIR podrán interactuar con características nativas que no están disponibles a través de Adobe AIR a través de extensiones creadas en código nativo para la plataforma seleccionada. Por ejemplo ahora las aplicaciones hechas en AIR podrán utilizar in App purchases de iOS, o el sofisticado sistema de notificaciones de Android solo para citar un par de ejemplos.

Edge fue el siguiente producto en pantalla, ese día se había liberado la Beta 3 del programa, y uno de los ingenieros a cargo del producto se encargo de demostrarnos lo sencillo que es agregar interactividad a un sitio que use HTML5, JS y CSS3.

Como ya saben todos Adobe es un contribuidor importante para jQuery, y este año como contribución al proyecto Adobe demostró una pequeña aplicación web llamada Theme Roller que estará disponible pronto y que permitirá crear temas para jQuery de una manera más sencilla. 

Después esa aplicación que viene de Macromedia y que nos gusta a todos los desarrolladores Fireworks tuvo su mención en el mega escenario del Nokia Theater, ya hay un paquete disponible en Adobe Labs para exportar a CSS3 el contenido creado en Fireworks. 

El siguiente invitado especial fue Ian Ellison Taylor – Google Director of Web Stuff, al cual se le demostró CSS3 Regions que es una forma de darle a los diseñadores más control sobre el texto, y sobre el flujo que tiene este dentro de una página web. Para poder ver CSS3 Regions puedes usar la ultima versión de Chromium o Internet Explorer 10

Además se mostro la última contribución de Adobe a consideración de la W3C que es CSS3 Shaders, lo que permitirá animar contenido de HTML5 de forma más sencilla y con gran impacto visual.

Y finalmente fue el turno de Flash, la primera mención la tuvo la siguiente versión del Flash Authoring tool nombre código "Reuben". Donde con un ejemplo sencillo se demostraron las poderosas características de creación de objetos de la nueva versión de Flash Player al usar GPU para los cálculos gráficos. 

Por unos segundos el escenario se vistió de amarillo y era para anunciar que Angry Birds estará pronto disponible para la web usando Flash Player 11 y Starling el nuevo framework para la creación de juegos en 2D de Adobe.

Luego Ammy Huang mostro un par de ejemplos de los juegos que se han creado usando Flash Player 11 y Stage3D. Entre ellos el Nissan Juke.

Y el anuncio final estuvo a cargo de Tim Sweeney fundador de Epic Games, para contarnos que con la colaboración de Adobe y gracias a la inclusión de Stage3D en FP11 han podido portar el UDK de Epic, y lo demostró jugando por unos segundos Unreal Tournamente en una navegador usando Flash Player 11. ¡Wow!

Aunque en general en mi opinión muy personal hubo la ausencia de productos y tecnologías para desarrolladores de entornos empresariales. La keynote termino siendo interesante y dejando muy en claro que Adobe dará su aporte total a ambas tecnologías Flash y a HTML5+JS+CSS3. 

Luego ese mismo día 4 de Octubre, por la noche en una ceremonia dirigida por el comediante Rainn Wilson, actor de la serie The Office se dio la entrega de los MAX Awards 2011.

Donde los ganadores fueron:

  • Advertising and Branding: LEGO Star Wars III por RED Interactive Agency
  • Digital Enterprise: Empowering Employees: Enabling a Mobile Workforce--Aspen por Avoka Technologies
  • Digital Enterprise: Engaging Customers: Breeze por Standard Chartered Bank
  • Digital Publishing: DONE--Explorations in Art, Crafts and Science por Johannes Henseler
  • Disruptive Design: Kaiser Chiefs' Bespoke Album Creation Experience por Wieden + Kennedy London;  Entertainment: NASCAR.com RaceView por Sportvision y Turner Sports

Y después de esta entrega muy divertida, donde los ganadores bailaron, saltaron y hasta hubo un beso en el escenario. Vino lo que ya va siendo por varios años mi parte favorita de Adobe MAX que es los Sneak peeks que son demostraciones de tecnologías que pueden o convertirse en productos o agregarse a las próximas versiones de las herramientas de Adobe, así como también puede ser que nunca vean la luz después de los Sneak peeks estas tecnologías. 

El primer Sneak fue de Local Layering Order, que lo que demostró es una forma más fluida de interactuar con el apilamiento de capas, que permitía sobreponer partes de una capa sobre otra en determinadas zonas y hacer que la sobre posición sea más como se haría en la vida real si las capas fueran pedazos de una imagen.

RubbaDub parecía un plug-in para Premiere, que lo que hacía era una cosa y la hacía extraordinariamente bien, se encargaba de sincronizar los canales de audio con el video, es decir si la voz no estaba en compas con el movimiento de la boca de las personas en el video, este se encargaba de realizar la sincronización respectiva. 

InDesing Liquid Layout, los diseñadores que usan InDesign están acostumbrados a layouts estáticos,  pero con este nuevo flujo de esquemas los diseños fluirán y se adaptaran según el contenido y el formato en que se lo presente.

Auto Sync of Crowd Sourced Video que como el nombre lo indica, lo que hace es de una colección de videos provenientes de cualquier fuentes, en el caso de la demo fueron todos de YouTube y luego se sincronizaban automáticamente en la línea de reproducción. 

Flash Builder también tuvo su demo en la sesión de sneaks, con reverse debugging que permitía retroceder los pasos cuando depuras tu aplicación y otra utilidad llamada Why? Que lo que hacía era detallar en que punto y como una variable cambiaba de valor durante la ejecución de tu aplicación.

Near Field Communications para AIR fue la siguiente demo.

Pixel Nuggets para Photoshop es una interesante extensión que reconocía patrones en las imágenes, y luego buscaba imágenes parecidas en tu librería de imágenes y no solo eso, te permitía buscar imágenes que se parezca en zonas a otras imágenes no solo por la imagen completa.

Deepa Subramaniam nos mostró Monocle que es una propuesta para un nuevo profiler para las aplicaciones de Flash Builder que permite recoger datos de telemetría en tiempo real, y lo que más me gusto en lo personal era la capacidad que tendría una aplicación de generar un log y después con Monocle revisar toda esta data y analizarla.

Video Meshes uno de mis favoritos, y causo gran emoción entre los asistentes a Adobe MAX.

Con esta tecnología,  Sylvain Paris tenía un video, luego lo pausaba y aunque el video fue grabado en 2D, esta tecnología lo trataba como si fuera 3D y con unos ajustes entendía que el video tenía profundidad de campo, se podía mover al actor de un lugar a otro. Es complicado de explicar, lo mejor para entenderlo es ver este video.

 

Se demostró los beneficios que tendría el Paralelismo en Flash, y como en varias sesiones se trato durante MAX este acercamiento se esta integrando en el Player de varias formas

Y el Sneak final fue creo que el mejor de todos, fue Image Deblurring para Photoshop. Ver esta demo simplemente me reconfirmo el hecho de que dentro de Photoshop esta la magia de la que habla J.K. Rowling en Harry Potter. Esta tecnología lo que hacía era reconstruir una imagen borrosa, debido a que durante la fase de captura la cámara fue movida. Y no solo eso, esta tecnología es capaz de detectar en que forma fue el movimiento que causo que la imagen se viera borrosa y lo mejor de todo como magia era capaz de una imagen totalmente inservible y borrosa se volviera una imagen clara en segundos. ¡Simplemente wow!

 

No olivden ver los videos de las sesiones y los sneaks peaks en Adobe TV.

En resumen esto fue lo más destacable de Adobe MAX, sin nombrar la cerveza gratis que hubo en varios eventos o la excelente y abundante comida que hubo en el MAX Bash. Adobe MAX es un excelente evento no solo para aprender del diverso catalogo de sesiones que hay cada año, sino también para conocer en persona a una gran cantidad de ingenieros y la gente que esta detrás de las aplicaciones que usas día a día de Adobe. Sino también para conocer a mucha gente que hace lo que tu haces, compartir experiencias y crecer profesionalmente en el camino. Así que les puedo recomendar altamente ir al próximo MAX, para todo aquel que va es una experiencia genial y siempre te deja queriendo volver. 

¡Nos vemos en Adobe MAX 2012!

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 AUGE y la Campus Party Quito 2011 - 10/18/11

Este es un pequeño post para recordarles a todos nuestros amigos que estarán presentes en la Campus Party Quito 2011, que nosotros también estaremos allí presentes dando una charla en el área de Artes Visuales

Esta charla será dada por Luis Palacios, y tratara de cómo la reciente lanzada versión de Dreamweaver te permite crear webs usando HTML5, así que les recomiendo asistir a su charla y además pueden ganar algún regalo de parte de Adobe.

Si quieren saber un poquito más de la charla pueden revisar este link: http://auge.groups.adobe.com/index.cfm?event=post.display&postid=39001

 

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 Adobe MAX 2011 Día 0 - 10/01/11

Como desde hace dos años  Adobe MAX 2011 se celebra una vez más en la fantástica y diversa ciudad de Los Ángeles en la costa pacifica del estado de California. Este año esta lleno de expectativas por los cambios que han pasado en los pasados meses en todo el sector tecnológico de desarrollo web y dispositivos móviles. 

Desde el gran avance que esta teniendo HTML5, hasta las constantes afirmaciones sin sentido muchas que dicen que Flash esta muerto. Desde el nacimiento de nuevas tablets que prometen ser el siguiente iPad killer como la Amazon Fire hasta la vida efímera que tuvo la HP Touchpad. Este año ha estado lleno de cambios, y Adobe como líder en el sector de desarrollo y de aplicaciones ha cambiado lanzando nuevos productos como Adobe Muse y Adobe Edge apuntados a llenar los vacíos que hay en el mundo del diseño y desarrollo de aplicaciones que usan HTML5, CSS3 y jQuery. Y no solo eso Adobe ha cambiado la forma en que ofrece sus productos ahora pueden subscribirse y usar mediante subscripciones sus aplicaciones, ya no abra que esperar 18 meses para una nueva suite sino que habrá lanzamientos de mejoras en la mitad de este tiempo. Solo para nombrar algunas de las cosas que han sucedido desde el pasado Adobe MAX

Y todo esto ha pasado en tan solo un año, Adobe MAX 2011 empieza hoy y veremos que sorpresas, que lanzamientos de nuevos productos, que tiene bajo la manga esta gran empresa de software.

Para aquellos que no están acá y quiere vivir en vivo lo que Adobe debelará en las keynotes de este lunes y martes pueden ir a https://max.adobe.com/online/register/?q4133752=1

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 Iniciando con jQuery Mobile - 09/23/11

Iniciando con jQuery Mobile

Por Matthew David
Versión Original
Código fuente

Para ver los ejemplos puedes navegar desde tu smartphone hasta http://auge.ec/jquerytest/

Tu probablemente tienes uno en tu bolsillo, o puedes estar hablando con el, o puedes estar jugando algún juego con el – este es un celular inteligente. La categoría de Smartphone parece ser muy amplia – es un celular Android, un dispositivo de Apple iOS, un celular BlackBerry o algún otro dispositivo? Para darte una muestra, aquí hay una lista de algunos dispositivos móviles que están en la categoría de celulares inteligentes:

  • Apple iPhone/iPhone Touch
  • Google Android
  • RIM BlackBerry/Playbook OS
  • Nokia Symbian (retirado, pero aun con más de un billón de usuarios a nivel mundial)
  • HP/Palm WebOS
  • Microsoft Windows Phone 7

El reto que tienes con tal vasto numero de diferentes sistemas es el soporte fragmentado para estándares. Por ejemplo, el ultimo iPhone de Apple tiene soporte para estándares HTML, mientras que Symbian y Microsoft Phone Series actualmente tienen un soporte pequeño a nulo. Para permitirte crear sitios web para móviles efectivamente, la comunidad de jQuery ha estado trabajando en un framework que puedes utilizar llamado jQuery Mobile. Este articulo te introducirá a este nuevo framework, el cual esta todavía en beta, y te ayuda a desarrollar tus habilidades de desarrollo de jQuery Mobile.

Desarrollando sitios web con jQuery Mobile.

Desarrollar sitios web móviles ya no es más una lista de deseos para el equipo de diseño web – es una realidad. La adopción de dispositivos móviles está creciendo en un ritmo acelerado. De acuerdo  a un estudio de Gartner reciente, dentro de los próximos años tu bien podrías ver que las personas acceden a tu sitio desde un celular o una Tablet en vez de usar una computadora tradicional, con un potencial de 1.82 billones de dispositivos móviles que se usarán para el 2013.

El objetivo de jQuery Mobile es permitir al framework que se ejecute en cuantos dispositivos sea posible. En los Estados Unidos tenemos un foco primario en Smartphone iOS y Android. Sin embargo, fuera de los Estados Unidos, otros fabricantes, como Nokia, son dominantes. Para este fin, jQuery Mobile trabajará en un amplio set de dispositivos. En el lanzamiento de jQuery Mobile, en Septiembre del 2010, John Resig, el autor de jQuery, revelo un gráfico que listaba los sistemas operativos más populares (vea la Imagen 1). Para cada sistema el asigno una A, B o C, las letras determinan la importancia en soportar el SO era Alta (A), Mediana (B) o Baja (C)


Imagen 1: Soporte de navegadores basado en notas. 

Como una indicación de cuan rápidamente el mundo móvil esta cambiando, esta matriz probablemente será rediseñada debido a un cambio radical: Nokia esta matando la plataforma Symbian y reemplazándola con Windows Mobile Phone 7. En un movimiento, Windows Mobile Phone 7 paso de ser irrelevante a un estado alto (A).

Para soportar tus necesidades de desarrollo móviles, jQuery Mobile emplea una filosofía llamada Progressive Enhancement. En sus raíces, progressive enhancement significa esto: Empieza con HTML estático y semántico, el cual debería trabajar en cada navegador. Entonces agregas tus comportamientos y mejoras (con todos los adornos) encima de eso. Esto asegura que el contenido de tu pagina y la funcionalidad básica HTML es aun accesible a navegadores menos capaces. 

El reto con los navegadores móviles es un problema real. De un lado tu tienes navegadores con grandes característica (tales como los navegadores de Android, BlackBerry 6 e iOS Mobile Safari)  que son todas variaciones de  WebKit – una maquina de renderizado que da funcionalidad a muchos navegadores web tales como Google Chrome y la versión de escritorio de Safari de Apple.  (Webkit no sabe nada acerca de cargar datos de una red. Este no sabe nada de eventos nativos de SO. Este no sabe nada acerca de  desplazamiento. Cada SO, navegador, o vendedor de dispositivo, este necesita construir un navegador encima de su maquina de renderizado para proveer estas cosas.) Entonces tu tienes millones de teléfonos ejecutando Symbian de Nokia o Windows Mobile 6 y versiones anteriores que han fragmentado el soporte de estándares web. Para agregar el reto es que hay diferentes versiones de Webkit usadas en las diferentes versiones de los SOs.  Al final progressive enhancement es un modelo que permite que tu contenido sea mostrado en cualquiera de los dispositivos soportados.

Empezando.

El primer paso para empezar a usar jQuery Mobile es hacer los ajustes a una página web. Dentro del elemento HEAD tu quieres hacer referencia los archivos CSS y de jQuery Mobile:

[code:js]<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js">
</script>[/code]

Como pueden ver de los scripts del código fuente, jQuery Mobile esta extendiendo la librería base de jQuery. Para aquellos observadores de recursos, el tamaño de la versión reducida para jQuery Mobile es de 12Kbs.

Los vínculos de arriba apuntan a las versiones CDN alojadas en los servidores de jQuery. El vínculo CSS también contiene referencias a los archivos gráficos que necesitas. Si tu quieres puedes descargar y alojar los archivos localmente necesitarías ir a la siguiente dirección Web>

http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.zip

Descarga y expande el archivo ZIP. Dentro del archivo encontraras versiones comprimidas y no comprimidas de los archivos de CSS y JavaScript, junto a una subcarpeta que contiene 10 imágenes usados por el documento CSS.


Imagen 2: La plantilla básica de jQuery Mobile. 

Tu necesitaras usar las tres áreas básicas del contenido en tu sitio web cuando construyas tu primer sitio jQuery Mobile. La siguiente es un código base sugerido que puedes usar para futuros proyectos>

[code:js]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta name="viewport" content="width=device-width, content="text/html; charset=UTF-8", minimum-scale=1, maximum-scale=1"> <title>jQuery Boilerplate</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" /> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script> </head>   <body>  <div data-role="page">    <div data-role="header">       <h1>Título</h1>    </div><!-- /header -->    <div data-role="content">       <p>El contenido de la página va aquí</p>    </div><!-- /content -->    <div data-role="footer">       <h4>Encabezado</h4>    </div>    <!-- /header -->    </div><!-- /page --> </body> </html>[/code] 

Un par de cosas son validas apuntar en esta plantilla. Lo primero es el uso del elemento DIV. Con el uso de HTML5 siendo tan predominante en los dispositivos móviles porque no usar los elementos más nuevos como HEADER, ARTICLE, SECTION, o FOOTER? Los navegadores de Smartphone más antiguos no entienden los nuevos elementos en HTML5.  En algunos casos, tales como con viejas versiones de Internet Explorer en Windows Phones, hay un bug que requiere que primero crees programáticamente un elemento no HTML en la etiqueta antes de que puede ser estilizada con CSS. La etiqueta DIV esta, sin embargo, soportada universalmente. 

Tu puedes guardar la página web y probarla en tu navegador web. Este código es HTML y trabajará en tu desktop. Yo recomiendo usar Chrome para hacer tus pruebas locales cuando quieres validar que el HTML/JavaScript trabaja correctamente. Para una prueba real de calidad tu necesitaras visualizar tus paginas web en diferentes dispositivos móviles.

Crear páginas en tu sitio móvil usando vínculos. 

Una diferencia entre las páginas web estándares y las páginas web móviles es la cantidad de contenido de contenido que puedes poner en la pantalla. Si, tu puedes cargar el sitio del New York Times en tu iPhone, pero tu necesitas pellizcar y hacer zoom para leer el contenido. Una mejor solución es reducir el desorden del contenido en la página que quieres presentar.

Un sitio web tradicional te haría crear muchas páginas webs diferentes con una pequeña cantidad de contenido en cada una. Pero cuando estas usando jQuery, tu puedes atacar el problema de micro contenido de forma más eficientemente. 

Antes viste como puedes crear un modelo estándar para jQuery Mobile. Llevemos esto un poco más adelante y creemos "páginas" de contenido. Una página puede ser estructurada como un bloque DIV en jQuery Mobile. Remueve el contenido dentro de los elementos BODY usando la plantilla básica de arriba. Tu vas a agregar un menú que vincula a cuatro páginas diferentes. Tu primera página es una página de menú con vínculos.  Ver figura 3 – Index3

[code:js]<!-- Inicio de primera página --> <div data-role="page" id="menu">    <div data-role="header">       <h1>Menu</h1>    </div><!-- /encabezado -->    <div data-role="content">          <p>Que vehiculos te gustan</p>             <p><a href="#Carros">Carros</a></p>       <p><a href="#Trenes">Trenes</a></p>       <p><a href="#Aeroplanos">Aeroplanos</a></p>          </div><!-- /contenido -->    <div data-role="footer">       <h4>Page Footer</h4>    </div><!-- /pie de página --> </div><!-- /página -->[/code]


Imagen 3: Una página de menú con vínculos.

La parte importante de este bloque de HTML es el primer DIV. Dentro del elemento están  las propiedades ID y data-role:

[code:js]div data-role="page" id="menu"[/code]

El atributo data-role define el contenido dentro de los elementos DIV como una "page". Este termino es un poco engañoso ya que una "page"  es en realidad un panel o pantalla en el código de HTML y no una página separada, data-role="page" instruye a jQuery Mobile para construir el contenido visible en la pantalla alrededor de elementos DIV. El ID te permite vincular secciones usando vínculos HREF.

La página de menú es la primera página y entonces este estará presente primero en el navegador. Hay 3 "pages" adicionales que pueden agregar. Ellas cada una tiene un ID diferente> Carros, Aeroplanos, Trenes. 

[code:js]<!-- Inicio de segunda página --> <div data-role="page" id="Carros">  <div data-role="header">     <h1>Carros</h1>  </div><!-- /encabezado -->  <div data-role="content">        <p>Podemos agregar una lista de carros</p>  </div><!-- /contenido -->  <div data-role="footer">     <h4>Pie</h4>  </div><!-- /pie de página --> </div><!-- /pagina --> <!-- Inicio de tercera página --> <div data-role="page" id="Trenes">  <div data-role="header">     <h1>Trenes</h1>  </div><!-- /encabezado -->  <div data-role="content">        <p>Podemos agregar una lista de trenes</p>  </div><!-- /contenido -->  <div data-role="footer">     <h4>Pie</h4>  </div><!-- /pie de página --> </div><!-- /pagina --> <!--Inicio de cuarta página --> <div data-role="page" id="Aeroplanos">  <div data-role="header">     <h1>Aeroplanos</h1> </div><!-- /encabezado -->  <div data-role="content">        <p>Podemos agregar una lista de aeroplanos</p>  </div><!-- /contenido -->  <div data-role="footer">  <h4>Pie</h4> </div><!-- /pie de página --> </div><!-- /pagina -->[/code]

Prueba esta página en tu dispositivo Android, iOS o BlackBerry. Cuando cargas la página web tu veras dos cosas:

  • El menú carga como una página propia (puedes intentar desplazarte hacia arriba o hacia abajo y no veras nada más.)
  • Cuando seleccionas un vinculo, la página cambiará con una animación secuencial mientras se mueve a la nueva sección.  

Cada uno de estos elementos DIVs cargará dentro del navegador y se verá como páginas web separadas. El movimiento entre pantallas es fluido. 

La recomendación de crear múltiples pantallas de contenido es una página reduce los tiempos de carga de un página que causan que muchos sitios móviles parezcan lentos. Tu puedes vincular páginas externas, sin embargo con la siguiente advertencia: los vínculos en jQuery Mobile se tratan como llamadas Ajax. Los vínculos dentro de una página de jQuery Mobile toman ventaja de las transiciones CSS para cambiar las pantallas. Cuando tu quieres vincular una página fuera de la aplicación tu estas en necesidad de forzar una acción que crea un nuevo documento y reemplaza los archivos de jQuery Mobile actuales. Esto queda demostrado con el siguiente ejemplo:

[code:js]<a href="http://www.madinc.co" rel="external">madinc.co</a>[/code]

Tu necesitas incluir la propiedad y valor el rel="external". Esto te permite vincular a una página web fuera de la página local que has estado usando hasta este punto. Sin embargo, jQuery Mobile va un paso extra. En vez de solo tratar vínculos externos como un vinculo fuera de tu sitio, jQuery Mobile aplicara la animación de la página de transición. Lo que te da es una ventaja única sobre otros frameworks móviles populares. En vez de tener todo tu contenido en una página, puedes dividir el contenido sobre varias páginas permitiéndote construir soluciones más grandes. 

Trabajando con componentes.

Por supuesto, vínculos y paginas son solo partes del diseño web móvil. Un segundo que muchos desarrolladores de web móviles encuentran es la explosión de aplicaciones. A diferencia de las paginas web, las aplicaciones para Android, iOS, y otros sistemas se construyen con complejas tecnologías tales como Objective-C, Java, y C#. Estas tecnologías permiten a los desarrolladores fácilmente agregar barras de menú, listas y otros controles, y componentes que no se encuentran nativamente en HTML.

jQuery Mobile actualmente cuenta con una selección de componentes. Los siguientes componentes están incluidos en la versión beta actual: 

  • Pages
  • Dialog boxes
  • Toolbars
  • Buttons
  • Content formatting
  • Form elements
  • List views

Agregar y cambiar un componente no es tan complicado. Si tu sabes un poco de HTML, entonces estas listo para usarlos. Veamos al componente page como un ejemplo.

Agregando cabeceras y pies de páginas. 

La plantilla modelo anterior demostró como puedes fácilmente agregar barras de herramientas tales como las cabeceras y pies de página. Las barras de herramientas a menudo son las más difíciles de controlar cuando creas contenido para diferentes tamaños de pantallas.  El reto consiste en colocar contenido que dinámicamente se escale para diferentes tamaños de pantallas. Por ejemplo, una barra de herramientas puede contener ambos una cabecera y un botón (tales como un botón atrás). Usando jQuery Mobile, la barra de menú cabecera puede permitirte agregar un titulo que se quede en el centro con un botón que siempre permanezca al lado izquierdo o derecho de la pagina sin importar cuan grande sea la pantalla. 

El siguiente fragmento de código crea una barra de herramientas cabecera con dos botones.

[code:js]<div data-role="header" data-position="inline">    <a href="cancel.html" data-icon="delete">Cancelar</a>    <h1>Editar Contacto</h1>    <a href="save.html" data-icon="check">Guardar</a> </div>[/code]


Imagen 4: Una barra de herramienta en la cabecera con dos botones. 

La posición de los botones es definida por el orden del contenido. El resultado es una página web móvil con un titulo centralizado y botones a la derecha y a la izquierda que se ven y trabajan consistentemente a través de diferentes dispositivos.

Las cabeceras y pies de páginas pueden también ser personalizados en herramientas de navegación. Botones interactivos pueden agregarse a los pies de pagina que te llevaran a secciones de la pantalla. Esto se logra con un rol de datos "nabar". Debajo esta el código para un navbar:

[code:js]<div data-role="navbar">       <ul>          <li><a href="#nav1" class="ui-btn-active">Una</a></li>          <li><a href="#nav2">Dos</a></li>       </ul>    </div><!-- /navbar -->[/code]

De nuevo, como pueden ver con la mayoría del código de jQuery Mobile, el elemento navbar se construye de una simple lista HTML envuelta dentro de una etiqueta DIV. Propiedades, tales como ui-btn-active puede ser ajustada para identificar al botón que debe estar seleccionado. 

Cuando selecciones un botón y vayas a la siguiente pantalla dentro de la misma página, jQuery Mobile es lo suficientemente inteligente para agregar un botón atrás a la cabecera. Por ejemplo, el siguiente código HTML agrega tres  pantallas en una página HTML. Tu tienes la pantalla principal y dos pantallas de ejemplo que puedes vincular desde el elemento navbar. Agrega el código y mira como la navegación agrega automáticamente los botones atrás:

[code:js]<div data-role="page">    <div data-role="header">       <h1>Navegación</h1>    </div><!-- /cabecera --> <div data-role="content"> Pagína de navegación </div><!-- /contenido-->    <div data-role="footer">    <div data-role="navbar">       <ul>          <li><a href="#nav1" class="ui-btn-active">Una</a></li>          <li><a href="#nav2">Dos</a></li>       </ul>    </div><!-- /navbar --> </div><!-- /pie --> </div><!-- /página--> <div data-role="page" id="nav1">    <div data-role="header">       <h1>Página de Nav 1</h1>    </div><!-- /cabecera -->    <div data-role="content"> Pantalla para Nav 1 </div><!-- /contenido-->    <div data-role="footer"> <h4>Pie de página adicional</h4>    </div><!-- /pie --> </div><!-- /página --> <div data-role="page" id="nav2">    <div data-role="header">       <h1>Página de Nav 2</h1>    </div><!-- /cabecera -->    <div data-role="content">Pantalla para Nav 2</div><!-- /contenido--> <div data-role="footer"> <h4>Pie de página adicional</h4> </div><!-- /pie --> </div><!-- /página -->[/code]

Recuerda agregar el SCRIPT y las referencias de CSS para jQuery Mobile. 

Haciendo cabeceras y pies de páginas persistentes.

Una técnica común de interface de usuario es mantener la cabecera encima de la pantalla y el pie de página al final. Tu puedes usar jQuery Mobile para completar esta tarea para agregar data-position="fixed" para la cabecera o pie de página. Esto forzara a la cabecera  siempre a estar colocada encima y al pie siempre al final en una posición fija, como en el siguiente ejemplo (ver Imagén 5):

[code:js]<div data-role="page">    <div data-role="header" data-position="fixed">       <h1>Navigation</h1>    </div><!-- /cabecera -->    <div data-role="content" >       <ul data-role="listview" data-dividertheme="d" style="margin-top: 0;">          <li data-role="list-divider">Royal Family</li>          <li><a href="#nav1">Henry VIII</a></li>          <li><a href="#nav1">George V</a></li>          <li><a href="#nav1">Prince of Wales</a></li>          <li><a href="#nav1">Elizabeth I</a></li>          <li><a href="#nav1">Elizabeth II</a></li>          <li data-role="list-divider">Prime Miniseters</li>          <li><a href="#nav2">Winston Churchill</a></li>          <li><a href="#nav2">Tony Blare</a></li>          <li><a href="#nav2">David Cameron</a></li>       </ul>    </div><!-- /contenido --> <div data-role="footer" data-position="fixed">    <div data-role="navbar">       <ul>          <li><a href="#nav1" class="ui-btn-active">Royals</a></li>          <li><a href="#nav2">Leaders</a></li>       </ul>    </div><!-- /navbar --> </div><!-- /pie --> </div><!-- /página --> <div data-role="page" id="nav1" data-position="fixed">    <div data-role="header">       <h1>Royal Family</h1>    </div><!-- /cabecera --> <div data-role="content"> <p>Members and relatives of the British Royal Family historically represented the monarch in various places throughout the British Empire, sometimes for extended periods as viceroys, or for specific ceremonies or events. Today, they often perform ceremonial and social duties throughout the United Kingdom and abroad on behalf of the UK, but, aside from the monarch, have no constitutional role in the affairs of government. This is the same for the other realms of the Commonwealth though the family there acts on behalf of, is funded by, and represents the sovereign of that particular state, and not the United Kingdom.</P> </div><!-- /contenido -->    <div data-role="footer" data-position="fixed">       <h4>Royal Family</h4>    </div><!-- /cabecera --> </div><!-- /página --> <div data-role="page" id="nav2" data-position="fixed">    <div data-role="header">       <h1>Prime Ministers</h1>    </div><!-- /cabecera --> <div data-role="content"> The Prime Minister of the United Kingdom of Great Britain and Northern Ireland is the Head of Her Majesty's Government in the United Kingdom. The Prime Minister and Cabinet (consisting of all the most senior ministers, who are government department heads) are collectively accountable for their policies and actions to the Sovereign, to Parliament, to their political party and ultimately to the electorate. The current Prime Minister, David Cameron, was appointed on 11 May 2010.</div><!-- /contenido --> <div data-role="footer" data-position="fixed">    <h4>Prime Minister</h4>       </div><!-- /cabecera -->    </div><!-- /página -->[/code]


Imagén 5: La cabecera al comienzo y el pie de página al final. 

Ahora, sin usar Objective-C personalizado puedes agregar cabeceras fijas y pies de páginas a tus paginas. 

Trabajando con cuadros de diálogos.

El componente página también te permite agregar cuadros de diálogos emergentes personalizados con CSS usando la propiedad data-rel. Por ejemplo, lo siguiente cargara una página web en un cuadro de dialogo emergente:

[code:js]<a href="dialog.html" data-rel="dialog">Abrir dialogo</a> [/code]

Usando este método te permite cargar cualquier mensaje personalizado en tu cuadro de dialogo. Tu necesitas dos secciones para un cuadro de dialogo cuando publiques una caja de dialogo en la misma pagina. Interesantemente, un cuadro de dialogo no es diferente a una pantalla en jQuery Mobile. Sabiendo esto, puedes agregar cualquier tipo de HTML en un cuadro de dialogo.  La primera sección muestra un vinculo a un cuadro de dialogo, como se muestra aquí:

[code:js]<div data-role="page">    <div data-role="header">       <h1>Cuadro de diálogo</h1>    </div><!-- /cabecera --> <div data-role="content">       <a href="#dialogPopUp" data-rel="dialog" data-role="button">Abrir dialogo</a>  </div><!-- /contenido --> <div data-role="footer">    <h4>Pie</h4> </div><!-- /pie --> </div><!-- /página -->[/code]

Puedes ver en el HREF el botón "Abrir dialogo" que es un vinculo a una sección local. El siguiente es el código que aparecerá en el cuadro de dialogo:

[code:js]<div data-role="page" id="dialogPopUp">    <div data-role="header">       <h1>Título del diálogo</h1>    </div><!-- /cabecera -->    <div data-role="content">          Este es un cuadro de diálogo         </div><!-- /contenido --> <div data-role="footer"> <h4>Información adicional en el Pie</h4> </div><!-- /pie --> </div><!-- /página -->[/code]

La inclusión del pie de página es opcional, pero debes incluir una cabecera. Sin la cabecera, la inclusión automática de un botón cerrar no aparecerá. 

Trabajando con listas.

Hay muchos datos en la web. Montones de datos. Las listas son herramientas efectivas que puedes usar para manejar grandes cantidades de datos. Ya has usado listas en un par de ejemplos antes pero ahora es tiempo de adentrarse con ellas.

Aquí un ejemplo sencillo usando HTML estándar. 

[code:js]<ul>    <li><a href="#nav1">Henry VIII</a></li>    <li><a href="#nav1">George V</a></li>    <li><a href="#nav1">Prince of Wales</a></li>    <li><a href="#nav1">Elizabeth I</a></li>    <li><a href="#nav1">Elizabeth II</a></li> </ul>[/code]

En jQuery Mobile tu puedes convertir una lista simple en una lista hermosa , con apariencia de aplicación agregando el role listview a la apertura de la etiqueta UL. El atributo data-role le dirá a jQuery Mobile que debe redibujar la lista para tener la apariencia y actuar como si fuera una aplicación nativa. 

[code:js] <ul data-role="listview">            <li><a href="#nav1">Henry VIII</a></li>            <li><a href="#nav1">George V</a></li>         <li><a href="#nav1">Prince of Wales</a></li>            <li><a href="#nav1">Elizabeth I</a></li>            <li><a href="#nav1">Elizabeth II</a></li>         </ul>[/code] 


Imagen 6: Una lista básica.

Eso es todo, solo 20 caracteres y tu tienes una lista formateada. 

Fuera de esto, jQuery te da la opción de extender la lista básica. Por ejemplo, lo siguiente agregara divisores a la lista.

[code:js]<ul data-role="listview" data-dividertheme="d">            <li data-role="list-divider">Familia Real</li>            <li><a href="#home">Henry VIII</a></li>            <li><a href="#home">George V</a></li>            <li><a href="#home">Prince of Wales</a></li>            <li><a href="#home">Elizabeth I</a></li>            <li><a href="#home">Elizabeth II</a></li>            <li data-role="list-divider">Primer Ministros</li>         <li><a href="#home">Winston Churchill</a></li>            <li><a href="#home">Tony Blare</a></li>            <li><a href="#home">David Cameron</a></li>        </ul>[/code]


Imagen 7: Una lista con divisores. 

Puedes agregar divisores agregando el atributo data-divider al elemento de apertura LI e incluyendo un ítem especial de lista donde quieres que el divisor aparezca. (<li data-role="list-divider">Royal Family </li> ).

Burbujas de datos también se pueden agregar a cada ítem en la lista. En el siguiente ejemplo el reino de cada miembro de la Familia Real Británica se agrega a una burbuja.

[code:js]<ul data-role="listview" style="margin-top: 0;">            <li><a href="#nav1">Henry VIII <span class="ui-li-count">Reinó 37 Años</span></a></li>            <li><a href="#nav1">George V <span class="ui-li-count">Reinó 25 años</span></a></li>            <li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li>         <li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reinó 44 años</span></a></li>            <li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reina desde 1952</span></a></li>        </ul>[/code]


Imagen 8: Una lista con burbujas de datos.

Un tipo de lista adicional es una lista compleja donde puedes agregar vínculos, imágenes, y texto dentro de un elemento de lista LI

Este tipo de lista es útil cuando necesitas mostrar muchos datos enriquecidos, tu quisieras tener una lista de estudiantes en una clase con su nombre, foto, y GPA. El resultado final es que tienes una lista desplazable que parece complicada creada solo con HTML.

Publicando tu sitio web Mobile con jQuery.

Cuando hayas completado el desarrollo de tu sitio con jQuery Mobile te queda pendiente solo una tarea: desplegar los archivos para que el mundo los vea.

Al final del día, jQuery Mobile es una colección de archivos de HTML, CSS, y JavaScript. Desplegar estos archivos no es diferente que desplegar tu sitio estándar HTML/CSS. Usando FTP o tu solución de manejo web (como Dreamweaver) tu subes los archivos a tu servidor web. Asegúrate de publicar todos los archivos que dan soporte de JavaScript, CSS y los archivos de imágenes.

Cuando los archivos están en tu servidor tu puedes visitar el sitio usando un dispositivo como un BlackBerry, iPhone, Android, o Windows Phone.

Usando el enfoque de jQuery Mobile es hacer la afirmación de que el sitio estará dirigido a teléfonos inteligentes. Tu podría considerar crear un sitio web móvil completamente separado para identificar un sitio que utiliza jQuery Mobile si este es un sitio secundario a tu sitio principal. Por ejemplo, tu sitio principal podría ser www.companyname.con mientras tu sitio con jQuery Mobile podría ser m.companyname.com.

No hay una manera completamente correcta o equivocada en como diferenciar un sitio web que apunta hacia PCs versus un sitio móvil. La única decisión correcta es asegurarse de que tienes una versión móvil de tu sitio que de un buen soporte visual a la experiencia de tus visitantes.

Donde ir de aquí.

Mucho trabajo ha tomado claramente la versión beta actual de jQuery Mobile. Si tu has estado pensando en saltar al diseño móvil  web entonces tu espera ha terminado. jQuery Mobile te da un framework que de  otra manera haría el diseño web móvil muy difícil.

Para más información acerca de usar jQuery Mobile, refiérete a lo siguiente:

+

Este trabajo esta creado bajo la licencia Creative Commons-Reconocimiento-NoComercial-CompartirIgual 3.0 Unported (CC BY-NC-SA 3.0). Permisos más alla del alcance de esta licencia, perteneciente a los ejemplos de código incluido dentro de este trabajo esta disponibles en Adobe.

 

 

 

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 Técnicas de la vida real de la herramienta de Deformación de Posición Libre usando Photoshop CS5 - 08/26/11

Vean a Russel Brown mientras demuestra la nueva caracterista de Deformación de posición libre usando dos ejemplos de la vida real, con este video de Adobe TV 100% subtitulado en español.

 

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 Oferta laboral - Desarrollador de Flex 3 en Quito - 08/25/11

La Corporación de Estudios y Publicaciones está buscando un desarrollador de Flex 3 en la ciudad de Quito, para la continuación del desarrollo de una aplicación creada con el Flex framework. 

Para mayor información se pueden contactar con Jorge Guanoluisa a este correo.

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 Una pequeña entrevista con Ryan Stewart en el Flash Camp San Francisco 2011 - 08/18/11

Hace algunos meses tuve la oportunidad de asistir al Flash Camp San Francisco 2011. Este evento se realizó el 30 de Abril del 2011, y pude charlar por un par de minutos con Ryan Stewart, evangelista de Rich Internet Applications en Adobe

Espero les guste esta pequeña entrevista, la cual esta subtitulada y es por agregarle los subtítulos la demora en subir el video :)

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 Ganadores de entradas a la Campus Party Quito 2011 - 08/17/11

De parte del Adobe User Group Ecuador felicitamos a los dos ganadores de entradas con carpa incluida para la Campus Party Quito 2011.

  • Marco Sarmiento 
  • Ricardo Solorzano
  • Juan Hernandez 
  • Cesar Parrales

Y para aquellos que no ganaron será para la próxima, aun pueden adquirir sus entradas y asistir a este gran evento de ciencia y tecnología que se llevará a cabo en menos de dos meses. Así que esperamos verlos a todos por allí, compartiendo experiencias, divirtiéndose y aprendiendo. 

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 Adobe Muse - La última apuesta de diseño y publicación de sitios webs de Adobe. - 08/16/11

El domingo cerca de la media noche Adobe anuncio el lanzamiento en fase beta de una nueva herramienta dirigida hacia los diseñadores con nombre código Muse. Esta herramienta está pensada para permitir que los diseñadores ya no solo hagan los mockups de los sitios web sino que también lo implementen y publiquen sin la necesidad de tener que escribir código fuente, ni código CSS.

Nuestro amigo Marlon Ceballos  del grupo de usuarios AdobeXpert se emociono tanto con la herramienta que grabo este video tutorial de 30 minutos acerca de la misma. Les recomiendo subscribirse al canal de YouTube de esta comunidad que tiene tutoriales muy buenos.

 

Aquí pueden ver lo que opinan los ingenieros y la gente detrás de la creación de Muse.

 

Esta aplicación fue hecha por veteranos de Illustrator, es hecha por diseñadores y para diseñadores. Los invito a probarla, pueden descargar aquí la versión beta que es grátis por unos meses hasta que se lance la versión final

 

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 Campus Party Quito 2011 - Descuento especial hasta el 20 de Agosto - 08/14/11

Un regalo por nuestra independecia, nuestro primer grito campusero
20% descuento en la compra de tu entrada a CPQUITO

Crea tu usuario de campusero aquí y luego ingresa con tu email y password a tu ficha de usuario donde podrás utiilizar este código de descuento: cpINDKymjow

Aprovecha esta oportunidad y asegura ya tu entrada al mayor evento de tecnología y cultura digital del mundo. 

El descuento es válido hasta el 20 de agosto, para pagos electrónicos con tarjeta de crédito y pagos en sucursales del Banco Guayaquil. 

Si tienes preguntas sobre cómo aprovechar esta promoción contactar a nuestro equipo de marketing en @alexanderrm21@andresnun.

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 Review de la Blackberry Playbook - 06/12/11

Imagen 1. Pantalla principal de la Playbook

Hace un par de semanas tuve el gusto de recibir una BlackBerry Playbook gracias a RIM y Adobe. El dispositivo venía en una caja minimalista, y muy linda que en un empaque que es un lujo total contenía a la Playbook, dentro de esta vienen un par de manuales, una bolsa de neopreno para poder llevar la Playbook sin que se llene de ralladuras a todas partes, el cargador, un cable micro-USB y un muy útil paño de limpieza.

Imagen 2. Caja donde viene la Playbook

Al encender la Playbook por primera vez, solo necesitas tener una conexión Wi-Fi para que la Playbook pueda verificar si tiene la última versión del OS QNX instalado, sino tiene la última versión tienes que lamentablemente esperar a que esta versión nueva se descargue en el dispositivo, se instale y luego siguiendo unos sencillos pasos puedas seguir con la configuración inicial.

Y el paso final si tienes un celular BlackBerry, RIM ha creado una fantástica aplicación que se llama BlackBerry Bridge que lo que te permite es que la Playbook tenga internet desde tu celular, y no solo eso sino que tengas acceso a tus correos, mensajes de BBM, contactos, notas, tareas y archivos todo esto a través de un enlace Bluetooth que crea la aplicación BlackBerry Bridge entre la Playbook y tu celular BlackBerry.

Durante este par de semanas que he tenido para jugar y probar el aparato ha habido varias cosas que me han gustado, y otras que no tantas. En general las características que me parecen más atractivas del dispositivo son:

  • No necesitas contratar un plan de datos extra si tienes un celular BlackBerry con acceso a internet. El tamaño me parece genial, cabe en la palma de una mano, en el bolsillo de mis jeans o en el de mis camisas.
  • El tamaño hace que puedas sujetar el dispositivo y escribir con las dos manos sin problemas. Tiene salida mini-HDMI.
  • Tanto la cámara posterior como la frontal toman fotos y graban videos de excelente calidad. Las bocinas de la Playbook dejan en ridículo a las de una iPad.
  • La batería a pesar de las criticas tiene buen rendimiento, solo como un consejo si la van a dejar de usar por mucho rato cierren las aplicaciones abiertas para evitar que el consumo de la batería sea mayor.

Aunque no todo es bueno han habido ciertas cosas que no me han gustado tanto entre ellas puedo detallar las siguientes:

  • La ubicación del botón de encendido/reposo esta en una muy mala posición y el acceso es medio complicado a veces, aunque con la última actualización del OS es más fácil poner a reposar, apagar o reiniciar a la Tablet desde la ventana principal.
Imagen 3. Vista lateral de la Playbook, donde se muestra el 
diminuto boton de encendido.
  • Una de las cosas que más me disgusta de la Playbook es que solo puede ser cargada su batería con el cargador que RIM envía con el dispositivo, esto si me parece muy molesto ya que yo acostumbro a cargar mis dispositivos con un solo cargador, solo cambio el cable según el dispositivo y ya. Pero la Playbook es totalmente un caso especial.

Verdadera Tablet multitarea

Una de las cosas más destacables de la Playbook es su capacidad de ser una Tablet multitarea real, ya que no lo simula ser como la iPad que pone a las otras apps abiertas a dormir y solo hace que la principal funcione a toda capacidad.

Es increíble poder estar viendo un video, hacer un swipe e ir al navegador para revisar tu Facebook y luego volver al video y ver que sigue reproduciéndose mientras abres Sheet To Go para ver una hoja de Excel. Es simplemente sorprendente lo que es capaz de hacer el procesador multicore Snapdragon que tiene la Playbook.

Imagen 4. Es super fácil y rápido usar una aplicación y pasar a la otra, te da 
la impresión que estas usando una PC no una tablet.

Resumiendo

En general puedo resumir que el dispositivo me encanta, me ha hecho olvidar totalmente a la pesada y abultada iPad que ahora reposa guardada, además no tengo que gastar más en plan de datos, el tamaño de 7"es el óptimo en mi opinión para una Tablet.

Es un dispositivo que recomendaría altamente a cualquier usuario de BlackBerry y que ama navegar por internet, revisar su Facebook, usar el chat de BBM, o ver sus hojas de Excel mientras va de un lado a otro. Aunque la plataforma no tiene muchas aplicaciones como las tiene la iPad o Android, sin duda que con el tiempo esa situación va a cambiar.

Y bueno cuando tienes un navegador que tiene Flash Player instalado, además que renderiza sitios web creados usando HTML5 con un muy buen rendimiento, que te permite ver la verdadera web sin omisiones te olvidas que necesitas más aplicaciones. Espero les haya gustado este pequeño review de la Playbook, no me queda más que despedirme y en otra publicación hablaré de cómo publicar tus aplicaciones desde Flash Builder directamente hasta la Playbook.

Imagen 6. La Playbook comparada con un Amazon Kindle.

Imagen 7. La Playbook comparada con una iPad.

Enlaces de interes. 

Sitio oficial de la Playbook
Centro de desarrollo de aplicaciones para Playbook

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 Lo nuevo en Photoshop CS 5.1 - 04/11/11

Cerca de la medianoche de ayer Adobe anunció oficialmente la próxima disponibilidad de la Creative Suite CS5.5 que es un lanzamiento intermedio entre la versión actual de la Creative Suite y la versión 6 de la misma.

Lamentablemente no todos los productos tendrán actualizaciones pero una herramienta que si tiene actualizaciones en Adobe Photoshop que tendrá una actualización con las siguientes características:

  • El equipo de Photoshop ha actualizado la máquina de renderizaje interna de Photoshop para permitir que se creen aplicaciones para dispositivos como la iPad, Android y de escritorio que se comuniquen e integren con la versión de escritorio de Photoshop CS5.5
  • Un nuevo SDK de Photoshop permitirá a los desarrolladores tomar ventaja de esto también.
  • Adobe ofrecerá 3 nuevas aplicaciones de compañía para Photoshop como punto de inicio:
    • Color Lava: Para crear y mezclar color que se podrán usar instantáneamente en Photoshop.
    • Console: Permitirá personalizar las barras de herramientas de PS, permitirá usar una Tablet como dispositivo de manejo de Photoshop.
    • Adobe Ideas es una aplicación de Adobe que permite la creatividad en dispositivos móviles como contraparte del flujo de trabajo creativo y que ya está en el mercado.
  • También introducirá Adobe Story para el iPhone.

 

¿Qué les parecen estas nuevas características?


 

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 Un pequeño consejo para lidiar con los repudiadores de ColdFusion - 03/22/11

Este es un muy buen post escrito por Ray Camden dirigido a aquellos que odian ColdFusion, me pareció merecido traducirlo ya que está lleno de hechos pero también del fantástico sentido del humor de Ray.

Aquí pueden leer el post original. Aunque este post habla de ColdFusion sus ideas bien se pueden aplicar a cualquier otra tecnología y sus detrasctores. Cabe recalcar que también me declaro un ColdFusion fanboy :) . Y esta es la traducción:

Primero -- déjenme admitir. Soy un fanboy de ColdFusion. 100%. Muy apasionado por ColdFusion. Eso significa que mis respuestas a los repudiadores pueden ser un poquito... impetuosas. Como un misil nuclear puede ser visto como excesivo cuando se lidia con un vecino escandaloso. (A menos que sea un vecino muy escandaloso y entonces yo digo gira la llave, baby.)

La mejor persona que se me viene a la mente en este sentido es Terry Ryan, uno de los Evangelistas de Adobe. He hecho lo mejor que he podido por aprender de él porque pienso que él tiene una forma práctica, medida y madura de responder a este tipo de gente. Esto es lo que he recogido de él y otros.

Si dicen que ColdFusion es viejo

... entonces les recuero que no es más viejo que PHP o Ruby. ColdFusion se lanzó en 1995. PHP en 1994. Ruby fue discutido en 1993 y lanzado en 1996. OO, como una idea se remonta a los 50s (según Wikipedia). Ellos puede que no sepan que aun se actualiza. Si es así, indícales del lanzamiento de ColdFusion 9.0.1 y los planes para ColdFusion 10.

Si dicen que tiene muchas fallas

...Pregunto por problemas específicos. Todo tiene fallas. Aun mí condenada caja de cable. Me encantaría vivir en un mundo donde el software fuera perfecto pero tendría mejor suerte esperando por una hamburguesa de Unicornio genéticamente creada. Si puedes hacer que una persona hable acerca de un error específico, tú podrías ayudarlo a encontrar una solución. En el peor de los casos pídele que lo reporte. En mi opinión, decir que algo tiene fallas sin decirle al vendedor es cercano a lo inútil. Oh, y decir hay un bug en Twitter no es lo mismo que reportarlo.

Si dicen que es lento

...Pregunto si se tomaron la molestia de hacer pruebas o afinar al servidor. Es impactante como pocas personas no lo hacen. Entonces los dirijo a Mike Brunt quien - en el último conteo - Creo tenía un sitio en ColdFusion que ejecutaba algo como 500 trillones de peticiones en un milisegundo. (Bueno, quizás no tantas.) Al final del día -- cada plataforma que existe se puede considerar lenta si no se codifica o configura adecuadamente. ColdFusion es fácil. No hay nada de malo con eso. Pero debido a su facilidad, este ha permitido que gente sin experiencia en desarrollo de aplicaciones construya sitios web. Déjenme repetirlo: No hay nada endemoniadamente malo con eso. Desafortunadamente si un usuario casual no se toma el tiempo para considerar actualizar sus habilidades un poquito, o contratar a alguien que los ayude, entonces pueden terminar con una aplicación lenta. En ese caso, culpen al desarrollador, no al código.

Si dicen que es costoso

... Les pregunto si se han molestado en pensar acerca del tiempo de desarrollo. Desafortunadamente, algunas personas a la primera se rehúsan a hacer esto. Ellos miran solo el costo -- la etiqueta de precio -- y nunca imaginan que un costo inicial les pueda generar un ahorro en el tiempo de desarrollo. Por esta métrica, nadie compraría vehículos y simplemente caminaría a todas partes. También, desafortunadamente, hay algunas personas que toman esto religiosamente y se rehúsan a pagar por software. Olvídenlos. No viven en un mundo real. También tiene sentido recordar amigos que ColdFusion es gratis para tu maquina de desarrollo, gratis para tu servidor de prueba, y también creo gratis para un hot swap backup. Estas pagando por producción, y punto.

Eso es todo lo que tengo por ahora, como siempre, me  gustaría escuchar las opiniones de otros. Tengo pendiente leer el excelente libro de Terry, Driving Technical Change, el cual he escuchado es excelente en este aspecto, del cual he escuchado solamente cosas buenas acerca de este entonces les puedo recomendar leerlo para esta causa. También les recuero que nada es mejor que hacer las cosas. ColdFusion siempre ha brillado en eso exactamente. Hay una gran cita de uno de los creadores donde él dijo – básicamente – ColdFusion no fue creado para ser hermoso- fue creado para permitirte cumplir tus tareas. ¿Para eso estamos aquí, cierto?

Bookmark and Share

AUGE - Adobe User Group Ecuador beta 0.1 Wallaby - Convertidor de Archivos Flash Fla a HTML. - 03/08/11

En Octubre del 2010 en Adobe MAX durante los Sneaks Peeks, Adobe mostro una pequeña utilidad que permitía convertir el contenido creado en Flash a HTML5, unos cuantos meses después vemos que Adobe siguió trabajando en esa herramienta y le ha puesto como nombre código Wallaby.

Wallaby es una aplicación que está disponible ya en Adobe Labs, en fase beta que lo que hace es cumplir con lo que se demostró en MAX, con Wallaby se convierte un archivo un archivo .FLA a HTML5+CSS3+JS en un solo clic.

Ahora cabe recalcar que Wallaby es un producto beta, por lo cual tiene no solo bugs sino también varias limitaciones. No todo el contenido de Flash se puede convertir a HTML5, entre esas limitaciones la más notable es que no soporta ActionScript 3, aquí pueden ver una lista de las limitaciones que tiene Wallaby hasta el momento.

Otra cosa que es importante denotar es que el contenido que genera es para navegadores que usen WebKit como su rendering engine, entre ellos esta Apple Safari o Google Chrome. Es decir que el contenido que genera Wallaby se verá bien no solo en PCs o laptops, pero tambien en dispositivos iOS(iPhone, iPad también.

Probando la utilidad, cree en Flash una simple interpolación de movimiento, que pueden ver aquí.

El contenido de esta página requiere una versión más reciente de Adobe Flash Player.

Obtener Adobe Flash Player

 

Y luego Wallaby genera varios archivos (.HTML, .CSS, .JS, .SVG), en una carpeta que replican exactamente la misma sencilla animación de Flash. Lamentablemente nuestro hosting no tiene configurado propiamente IIS para mostrar archivos .SVG. Pero se pueden descargar aquí los archivos para ver el resultado de Wallaby. Recuerden que solo funciona con navegadores que usan WebKit.

Les recomiendo descargar Wallaby, y probar su funcionalidad, es muy básica aún pero es una pequeña muestra del potencial que puede tener,  además que puede ser útil para aprender cómo crear animaciones en HTML.

¿Aun siguen pensando que Adobe está en contra del progreso de HTML5? Si al ver esta herramienta no se convencen del empuje que Adobe le está dando al desarrollo y estandarización de HTML5, les recomiendo que lean este excelente post de John Nack que resume todo lo que Adobe ha hecho por HTML5 en cuestiones de herramientas, tecnologías y contribuciones a HTML5.

¿Que les parece?

Bookmark and Share

Active Discussions

type title author activity
Thread Proyectos de la comunidad 0 9138 Vic Andres 06/01/11
Thread Que creen 0 13021 jea2585 11/06/10
Thread Curso Flex 3 14679 fgarzonhz 09/09/10
Thread RIA Ecuador, Bienvenido! 2 15318 Michael Borbor 01/28/09
Thread ¡Ya somos un grupo oficial! 3 15473 Michael Borbor 03/20/09
Thread Flash Builder 4 y Flash Catalyst beta publicos. 0 21901 Michael Borbor 05/31/09

Recently Posted References

Adobe Student Rep
File posted on Oct 07, 2009 by Michael Borbor

Thumbnail:

Instalación de CF8 Dev Edition
File posted on Jun 25, 2009 by Michael Borbor

Thumbnail:

Assorted Media Gallery Posts

RIA Ecuador Logo Temporal
Photo posted on Feb 04, 2009 by Michael Borbor


Search Group Posts

Integrantes del User Group

1-30 of 71 | Next | Last >>









Patrocinadores

friends of ED
Sponsor posted on Mar 21, 2009 by Michael Borbor

friends of ED


Wrox
Sponsor posted on Oct 16, 2009 by Michael Borbor

Wrox


The Art of Community
Sponsor posted on Dec 03, 2009 by Michael Borbor Sánchez

Art Of Community


Apress
Sponsor posted on Mar 21, 2009 by Michael Borbor

Apress


Focal Press
Sponsor posted on Apr 08, 2009 by Michael Borbor

Focal Press


O'Reilly School of Technology
Sponsor posted on Dec 03, 2009 by Michael Borbor Sánchez

School of Technology


O'Reilly
Sponsor posted on Mar 21, 2009 by Michael Borbor

O'Reilly


Video2Brain
Sponsor posted on Oct 19, 2009 by Michael Borbor

Video2Brain


Lynda.com
Sponsor posted on Mar 24, 2009 by Michael Borbor

Lynda.com