Consultoria y Formacion Adobe

Adobe hoy anunció Adobe Creative Suite 6 y Adobe Creative Cloud. Adobe CS6 trae mejoras a toda la gama de productos (hasta Fireworks! <3) y Creative Cloud es varias cosas: Una nueva estrategia de precios, un sistema tipo “dropbox” para compartir contenido y una serie de apps que corren en tablets y guardan en la “nube”.

Los mensajes principales son: Crear apps nativas para móviles y tablets sin programar. Exportar HTML5 fácil. Hacer todas las apps gráficas más veloces. Cambiar el modelo de pago por software a un modelo de suscripción como servicio.

Puedes ver todos los detalles en tiempo real del cubrimiento si sigues la cuenta de Twitter @cristalab.

Adobe Photoshop CS6

Dos cosas resaltan del nuevo Photoshop: Un aumento gigantesco en rendimiento y velocidad (al fin!) que le permitirá correr incluso en maquinas antiguas y una mejora sobre todos sus algoritmos de recreación de bitmaps.

En Photoshop CS5 vimos los filtros “content aware” y su capacidad de rellenar una fotografía con patrones similares ultrarealistas al querer hacer retoques o borrar detalles. Ahora “content aware” es extendido a cosas como fotos panorámicas o con filtros “ojo de pescado” y otros casos donde las fotografías pierden detalle angular.

Ah y ahora la interfaz se parece a Premiere, gris oscuro. No está mal. Photoshop sigue siendo la joya de la corona, titulo que en un pasado compartió con Flash.

Adobe Photoshop Touch

Un Photoshop para iPad y tablets Android, optimizado para usarlo con dedos o “stylus gordos”. Tiene todas las capacidades básicas: Capas, efectos, selección inteligente, filtros, brochas y hasta los algoritmos “edge aware” y “content aware” para no necesitar la precisión de pixel de un desktop. Genera archivos .psd que puede guardar en la “nube” de Creative Cloud o permite compartir los resultados a la cámara del dispositivo, Facebook o por email.

Y cuesta 10 dólares.

Adobe Premiere Pro CS6

Puedo resumirlo en una frase: Premiere CS6 es un editor de video con el poder de Photoshop. La mayoría de los filtros “content aware” ahora son aplicables a videos en movimiento y gracias a “Mercury”, el nuevo motor gráfico de Adobe, los cambios se ven casi al instante. Premiere también incluye la detección de profundidad 3D de Photoshop y un “live preview” de efectos y clips que es muy similar al de iMovie o Final Cut Pro.

Adobe Flash CS6

Flash CS6 se siente más como un CS5.5.1, pero es entendible dado el serio recorte de presupuesto que sufrió el equipo de Flash Platform el 2011. Flash CS6 ahora puede exportar animaciones básicas a HTML5 de manera transparente, así como compilar de manera nativa a iPhone, iPad y Android, incluyendo el uso de Stage3D.

La exportación de Flash a HTML5 estará optimizada para CreateJS, un framework de creación de “experiencias interactivas” en HTML5, competencia de ImpactJS o, en cierto modo, jQuery. Especializado en animaciones, audio y video. Creado por Grant Skinner.

Flash quiere ser LA herramienta para crear juegos y experiencias multimedia (como libros interactivos para niños) en móviles y tablets. Sea en el navegador o como app nativa. ¿Lo logrará? Por primera vez hay alternativas, pero Flash seguirá peleando fuerte.

Un -1 para Adobe por hacer el demo de Flash a HTML5 creando un intro, eso sí.

Adobe Dreamweaver CS6

Conozco pocas personas que sigan usando Dreamweaver, pero para los que les gusta, DWCS6 trae un asistente para crear Responsive Design, llamado “Fluid grid layout”. También incluye soporte nativo a jQuery Mobile, transiciones CSS3 y la exportación directa de Phonegap.

Dreamweaver aspira a convertirse en el IDE de Phonegap para creación de apps móviles al igual que Flash Builder 4.6 es el IDE de Flash para juegos móviles.

En las cosas pro: Live View de Dreamweaver ahora usa un Webkit actualizado. Ya era hora.

Adobe InDesign CS6

Todo el mundo está migrando del papel a la pantalla y este es un equipo de Adobe que sí supo reaccionar al cambio. InDesign CS6 ahora puede crear revistas y libros interactivos para tablets sin necesidad de escribir una sola linea de código.

Capacidades como Layout Liquido, inserción de contenido externo (videos, Flash, HTML, etc) y forms de PDF se combinan con la habilidad mágica de exportar tu diseño, en un click, como una app nativa para iPhone, iPad o Android gracias a Adobe Digital Publishing.

Aplausos a un equipo dentro de Adobe que ha sabido responder al futuro con buen PR, buenas herramientas y buen contacto con la comunidad.

Adobe Fireworks CS6

Fireworks es el equivalente al hermano gemelo de Bart Simpson. Vive en el ático encerrado, le dan cabezas de pescado y nadie quiere hablar de él, más que para mantenerlo con vida. Nada se dijo de esta herramienta, mi favorita de todas. Fireworks no compite con Photoshop, lo complementa siendo el mejor entorno para combinar bitmaps, vectores y areas sensibles, que luego pueden ser exportadas como prototipos para webs o apps.

Fireworks CS6 ahora puede: Exportar CSS “limpio” analizando el diseño, crear themes para jQuery Mobile, correr más rápido con Mercury. Y ya. Eso es todo. Gracias por las cabezas de pescado.

En sintesis: Not bad

Desde afuera, parecía un lanzamiento aburrido, pero Adobe tuvo anuncios muy interesantes. El más importante de todos, en mi opinión, es la migración a un modelo “Software as a Service” con la suscripción de Creative Cloud.

Extrañé mucho menciones a Fireworks o Illustrator, pero entiendo que querían limitarse a mostrar las apps móviles y los pesos pesados que generan dinero real dentro de Adobe.

La pregunta es para ustedes ¿Vale la pena CS6? ¿Lo comprarán y usarán? ¿Migraron a otra plataforma? ¿O seguirán usando alguna versión vieja de Adobe Creative Suite?

Terminamos este especial sobre HTML5 con la parte más desagradable (o agradable) del estándar: lo que se elimina. Es curioso que un montón de elementos comunes pasan a estar prohibidos en HTML5, por razones diversas que ahora veremos. Por esas mismas razones bastantes atributos han sido eliminados bien de un elemento concreto o de todos los elementos.

Sin embargo hay que aclarar estas prohibiciones, ya que hay dos caras en esta moneda. Por un lado los desarrolladores no pueden usarlos, si quieren que sus documentos sean HTML5 válidos. Por el otro lado, los navegadores tienen la obligación de implementarlos y soportarlos, para ser compatible hacia atrás con HTML4 y anteriores. Esta dualidad es muy interesante y nos ahorra bastantes problemas de una manera limpia definida en el estándar.

Elementos eliminados

Como decía, estos son los elementos eliminados y las razones de por qué son prohibidos:

• Los siguientes elementos (muy usados hace pocos años) se quitan de HTML5 porque son puramente presentacionales (no tienen semántica) y todo el tema estético se debe tratar con CSS:
  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u
• Los elementos para trabajar con frames (frame, frameset y noframes) se quitan del estándar por razones obvias: afectan negativamente a la usabilidad y accesibilidad de la web. Además, prácticamente rompen la web, y si se necesita algo similar se puede acudir a los iframe, más potentes y mejor pensados.
• El elemento acronym se elimina simplemente porque crea confusión sobre su uso, y los desarrolladores no entienden demasiado bien para qué usarlo. Las abreviaciones y acrónimos se pueden marcar con abbr, que sí se mantiene en el estándar.
• El elemento applet se ha declarado obsoleto y hoy en día no se utiliza. El elemento object reemplaza sus funciones y es lo común hoy en día.
• El elemento isindex se quita definitivamente. En la era de las cavernas se utilizaba para mandar información al servidor, pero con la llegada de los formularios su uso es arcaico y poco útil.
• El elemento dir también se declara obsoleto (ya lo era en HTML4), y simplemente se recomienda usar listas normales con ul.
• El elemento noscript se mantiene en HTML pero no en XML/XHTML, ya que su contenido está en HTML. No estoy muy de acuerdo con este movimiento, pero así será.

Atributos eliminados

Para empezar, todos los atributos referentes a la presentación han sido eliminados, por la misma razón de antes: CSS sirve mejor ese propósito. Recuerdo que el atributo style (que contiene CSS) es ahora universal y puede ser aplicado a todos los elementos, así que si queremos indicar su presentación sin añadir una hoja de estilos aparte, tendremos que usar este atributo. Atención a la lista porque esto sí que es importante, ya que algunos de estos elementos son muy usados, aunque otros están muy obsoletos:

• Atributo align en todos los elementos.
• Atributos alink, link, text y vlink en el elemento body.
• Atributo background en el elemento body.
• Atributo bgcolor en los elementos table, tr, td, th y body.
• Atributo border en todos los elementos.
• Atributos cellpadding y cellspacing en el elemento table.
• Atributos char y charoff en los elementos col, colgroup, tbody, td, tfoot, th, thead y tr.
• Atributo clear en el elemento br.
• Atributo compact en los elementos dl, menu, ol y ul.
• Atributo frame en el elemento table.
• Atributo frameborder en el elemento iframe.
• Atributo height en los elementos td y th.
• Atributos hspace y vspace en los elementos img y object.
• Atributos marginheight y marginwidth en el elemento iframe.
• Atributo noshade en el elemento hr.
• Atributo nowrap en los elementos td y th.
• Atributo rules en el elemento table.
• Atributo scrolling en el elemento iframe.
• Atributo size en el elemento hr.
• Atributo type en los elementos li, ol y ul.
• Atributo valign en los elementos col, colgroup, tbody, td, tfoot, th, thead y tr.
• Atributo width en los elementos hr, table, td, th, col, colgroup y pre.

Como veis, algunos de estos atributos sí que se mantienen para ciertos elementos, como la anchura y altura en las imágenes. Sin embargo estos no son los únicos atributos que se eliminan, también hay otros que se quitan por redundancia, por evitar confusiones, por su bajo uso o porque simplemente se han quedado obsoletos.

• Atributo accesskey en los elementos a, area, button, input, label, legend y textarea.
• Atributos rev y charset en los elementos link y a.
• Atributos shape y coords en el elemento a.
• Atributo longdesc en los elementos img y iframe.
• Atributo target en el elemento link.
• Atributo nohref en el elemento area.
• Atributo profile en el elemento head.
• Atributo version en el elemento html.
• Atributo name en los elementos img y a. Para obtener un comportamiento similar se recomienda usar id.
• Atributo scheme en el elemento meta.
• Atributos archive, classid, codebase, codetype, declare y standby en el elemento object.
• Atributos valuetype y type en el elemento param.
• Atributo language en el elemento script.
• Atributo summary en el elemento table.
• Atributos axis y abbr en los elementos td y th.
• Atributo scope en el elemento td.

Otros cambios

Hay diversos elementos que no se eliminan por su extendida fama, pero que siendo un tanto ortodoxos deberían eliminarse. Para evitar esto los que están escribiendo el estándar han tenido que redefinir su definición, de tal forma que se tratan de manera similar pero semánticamente son diferentes.

Un ejemplo muy claro es u e i, muy usados pero que progresivamente pierden importancia frente a strong y em. Estos dos elementos, que indicaban negrita y cursiva respectivamente, pasan a definirse de una manera muy vaga para indicar un texto diferente en alguna manera al texto normal. Otros elementos se redefinen, particularmente me resulta curioso que se mantenga small mientras big se elimina. De cualquier manera, no es demasiado relevante para los desarrolladores web, en el sentido de que podrán seguir usándolos como ahora.

Conclusiones

Tal y cómo habéis ido viendo, las novedades de HTML5 se centran en facilitar la implementación de aplicaciones web, avanzar hacia la web semántica y limpiar un poco toda la basura heredada de las anteriores versiones de HTML. Aunque todo eso parezca lejano, lo cierto es que muchos navegadores ya implementan algunas partes sueltas de HTML5, y ya existen varias páginas experimentales que juegan con estos elementos. Por ejemplo, cerramos este minucioso especial precisamente en el día en que Firefox 3.5 es lanzado, pero Safari, Opera, Chrome e incluso IE8 ya soportan algunas cosas.

Ahora queda preguntarnos, ¿cuándo se acabará este estándar? Precisamente no hay ninguna fecha, y la condición para que HTML5 se considere estándar es, según la W3C, que al menos un navegador implemente todo HTML5 correctamente. De esta manera se asegura que todo el estándar es factible, que puede ser implementado. Para esto puede quedar dos o tres años, si todo va bien, pero nada es seguro.

Después de las dos primeras entregas de este repaso a HTML5 (parte I y parte II), llegamos a la parte dinámica del estándar, lo que se añade al DOM y a Javascript para conseguir aplicaciones web avanzadas. Por un lado tenemos diversas APIs, es decir, conjuntos de funciones y herramientas que implementan un propósito concreto. Por el otro lado tenemos varias funciones y atributos que sirven a propósitos más generales y que no se pueden enmarcar en una API concreta.

Nuevas APIs

No está claro que todas las APIs siguientes se vayan a incluir en el estándar HTML5 propiamente, de hecho seguro que alguna de ellas se separará creando un estándar propio dedicado. De cualquier forma, estas son las nuevas APIs que nacen o se desarrollan en HTML5:

• Una API para dibujar en 2D, que se podrá usar junto al nuevo elemento canvas. Básicamente, se pueden pintar elementos sobre un lienzo, de manera similar a lenguajes como Java.
• Una API para controlar los nuevos elementos multimedia, video y audio. Así podremos controlar la reproducción con código Javascript, algo interesante pero que puede dar más de sí.
• Una API para guardar datos localmente, utilísimo para que las aplicaciones web puedan trabajar sin necesitar conexión a Internet. Ese DOM storage está ya implementado en las últimas versiones de los grandes navegadores, así que dentro de poco podremos disfrutar de esta clase de aplicaciones sin necesidad de extensiones como Google Gears.
• Una API para que las aplicaciones web puedan enlazarse a protocolos o tipos de archivos MIME, otro añadido extremadamente útil. Esto permitiría abrir las fotos de tu disco duro directamente en una aplicación de retoque online, o un archivo mp3 en una biblioteca online, etc…
• Una API para editar los campos que sean editables, valga la rebuznancia. Esto permite controlar los elementos HTML que son editables por el usuario, tipo Word. Por ejemplo, Google Docs o editar HTML en emails será muy sencillo, y con esta API es trivial cambiar ese contenido con Javascript.
• Una API para controlar las acciones Drag & Drop sobre los elementos que se puedan arrastrar. Esto se puede conseguir actualmente con algunas librerías, pero con esta API el navegador lo permite de manera nativa y más poderosa.
• Una API para controlar el historial desde una aplicación web. Esto permitirá a las aplicaciones web que se muevan con Javascript añadir páginas al historial para que los botones Atrás-Adelante funcionen siempre.
• Una API para habilitar la comunicación entre varias “páginas web”. Es decir, si tenemos varios iframes externos en una web, podemos comunicarnos con ellos y compartir información de manera segura, por ejemplo con gadgets de Facebook o similares.

Novedades en el DOM

Se han añadido a los elementos del DOM nuevas funciones y atributos que facilitan su uso y permiten realizar acciones muy usadas. Aquí comentaré los más interesantes, que trabajan sobre el documento (HTMLDocument) o sobre cualquier elemento (HTMLElement).

• La función getElementsByClassName() se añade a todos los elementos y al documento. Su funcionamiento es similar a getElementsById(), pero en este caso selecciona todos los elementos del documento o de cierto subárbol del documento que contengan esa clase. Su definición es tan amplia que incluso elementos que contenga SVG o MathML pueden ser encontrados.
• El atributo classList está disponible para cualquier elemento, y contiene una lista con todas las clases que tiene ese elemento. Además contiene varios métodos que facilitan trabajar con esa lista: buscar, modificar, borrar, etc. Muy útil para trabajar con elementos que puedan tener más de una clase, es muy sencillo y muy conveniente de usar. Los enlaces también tienen un elemento similar adicional llamado relList que permite lo mismo pero con el atributo rel (como el famoso rel=”nofollow”).
• El atributo innerHTML se añade, por fin, al estándar. Prácticamente usado por todas las aplicaciones web y soportado por todos los navegadores, creo que todos los desarrolladores web lo conocen de sobra. Para aquellos que no lo conozcan, este atributo permite trabajar con el contenido de un elemento en texto plano, incluso cambiando elementos HTML que pueda haber. Igualmente, se añade a todos los elementos y al propio documento, pudiendo cambiar TODO el contenido de una web.
• Los atributos activeElement y hasFocus están disponibles sobre un documento, y permiten conocer qué elemento está activo y si el documento tiene el foco, respectivamente.
• La función getSelection() se aplica también al documento y devuelve un objeto con el texto y elementos que están seleccionados.
• El atributo designMode es otra novedad sobre el documento e indica/modifica que el documento pueda o no ser editado.
• La función execCommand() se aplica sobre el documento y permite ejecutar acciones o “comandos” típicos de edición de documentos. Por ejemplo, con este método se llamaría a los útiles copiar/pegar, pero también a otros típicos como crear un enlace o cambiar el color de un elemento. Como el anterior, la mayoría de estos comandos trabajan sobre elementos editables.

Con esto ya hemos acabado con todas las novedades de HTML5, al menos las más importantes e interesantes para los desarrolladores web. Pero aún nos queda una parte muy importante: los elementos y atributos que se eliminan del estándar y que formaban parte de HTML4 y anteriores. Son muchos y variados, y algunos pueden causar más de un dolor de cabeza, así que los dejamos para la cuarta y última entrega de este especial.

Si en la primera parte de este repaso a HTML5 os comentamos todos los nuevos elementos, ahora vamos a centrarnos en los nuevos atributos más interesantes. Al igual que como comentaba en la primera parte, hay que tener en cuenta que no es un estándar acabado, así que estas especificaciones pueden cambiar y cambiarán. También hay que tener en cuenta que estos no son todos los cambios, solo he seleccionado los relevantes para el día a día de un desarrollador web. Por último, habría que distinguir entre los atributos que solo afectan a un subconjunto de los elementos y los globales, que afectan a cualquier elemento.

Nuevos atributos

Los elementos ya existentes añaden nuevos atributos que permiten hacer cosas muy interesantes. Los más importantes o novedosos son:

• Atributo ping para el elemento a. Este atributo contiene una lista de URLs, las cuáles serán llamadas cuando un usuario haga click en ese enlace. Por ejemplo, un uso práctico sería para estadísticas.
• Atributo autofocus para los elementos de un formulario. Indica qué elemento de un formulario debe ganar el foco al cargar una página. Por ejemplo, en la página principal de Google la cajita de texto gana el foco automáticamente para ayudarnos a escribir sin usar el ratón.
• Atributo form para los elementos de un formulario. Indica a qué formulario pertenece este elemento, y permite poner un elemento de un formulario en cualquier parte de una página. Tal y como está ahora, todos los elementos deben ir dentro de <form>.
• Atributo required para los elementos de un formulario. Indica que es obligatorio rellenar un valor para enviar ese formulario, algo que hoy en día se comprueba con Javascript o en el servidor.
• Atributos autocomplete, min, max, multiple, pattern y step para los elementos input. Estos atributos indican que el valor del input debe cumplir ciertos requisitos, por ejemplo seguir cierto patrón.
• Atributo novalidate para el elemento form. Esto deshabilitará la validación de sus elementos, algo útil si se usa dinámicamente (es decir, con Javascript, activando y desactivándolo).
• Atributos formaction, formenctype, formmethod, formnovalidate, y formtarget para los elementos de un formulario. Estos atributos modifican los atributos del formulario si el elemento es usado (por ejemplo un botón es pulsado o un input es rellenado). Esto permite que dependiendo qué botón usemos podemos tratar el formulario en diferentes páginas usando solo un formulario, algo complicado en HTML4.
• Atributo scoped en el elemento style. Esto permite aplicar estilos solo a cierto subárbol del documento. Por ejemplo, imagina que tenemos un elemento con id igual a “cabecera”; si añadimos el atributo scoped a un style, los estilos contenidos en él solamente se aplicarán a ese elemento y a sus hijos.
• Atributo async en el elemento script. Con este atributo especificamos que el código interno se puede ejecutar en cualquier momento de la página, mejorando la velocidad de carga.
• Atributo manifest en el elemento html. Esto permite indicar nuevos elementos, sobre todo será útil en aplicaciones web.
• Atributo reversed en el elemento ol. De esta forma la lista será numerada en orden descendiente (3, 2, 1…).

Nuevos atributos globales

Además de los anteriores tenemos otros atributos que pueden ser aplicados a todos los elementos de un documento. Esto lo hacen especialmente conveniente si vamos a usar Javascript para modificarlos dinámicamente, ya que no tenemos que comprobar el tipo de elemento para usar los atributos comunes.

• Atributos id, class, style, title, lang y tabindex, ya existentes pero ahora permitidos en todos los elementos. Pues eso, los atributos más usados se vuelven universales.
• Atributo contenteditable, para indicar que el elemento es editable por el usuario. Muy interesante, ya que ahora podremos editar cualquier cosa de manera trivial para el desarrollador, no solamente los elementos de un formulario.
• Atributo contextmenu, para indicar un menú contextual sobre un elemento. Como veis, está todo muy pensado para las aplicaciones web.
• Atributos data-*, donde el asterisco puede ser cualquier nombre. Esto permite atributos personalizados, que luego podremos obtener con Javascript.
• Atributo draggable, para indicar que un elemento se puede arrastrar.
• Atributo hidden, para ocultar un elemento que ya no interesa.
• Atributo spellcheck, para indicar si el contenido de un elemento debe ser pasado por el corrector ortográfico.

Por supuesto estos no son todos los cambios, en próximas entregas explicaremos otros aspectos de este nuevo estándar.

HTML5 está llamada a ser el reemplazo del actual (X)HTML, una de las patas de la web desde su nacimiento. Precisamente en un momento en el que la web está lo suficientemente madura, este estándar aprende de los errores cometidos e intenta solucionar la mayoría de problemas con los que un desarrollador web se encuentra. Como muchas de sus novedades son interesantes y afectan directamente a la futura web, desde AnexoM te vamos a comentar en varios artículos los cambios más importantes, empezando por este artículo donde comentaremos los nuevos elementos.

Antes de seguir habría que aclarar que HTML5 sigue en borrador y lo seguirá estando durante algunos años más. El enfoque general ha cambiado bastante respecto a versiones anteriores de HTML, añadiendo semántica y accesibilidad implícitas, especificando cada detalle y borrando cualquier ambigüedad. También se tiene en cuenta que muchas páginas web actuales son dinámicas, pareciéndose más a aplicaciones que a documentos. Algo básico es que HTML5 está definido en base al DOM (la representación interna de una web con la que trabaja un navegador), dejando de lado la representación “real”, definiendo a la vez un estándar HTML y XHTML.

Mejor estructura

Hoy en día se abusa bastante del elemento div, que nos permite estructurar una web en bloques. En HTML5 hay varios elementos que sirven para estructurar mejor una página web, estableciendo qué es cada sección, y reemplazando en muchas ocasiones a div. Con este extra de semántica, será mucho más coherente y fácil de entender por otras personas. Y lo que es más importante, será trivial de entender para una máquina, dándole más importancia a unas secciones y pudiendo jugar con esos datos automáticamente. Concretamente, la tarea de un buscador será mucho más fácil, pero cualquier aplicación que “lea” páginas web se beneficiará. Estos son los elementos:

• section representa una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.
• article representa un contenido independiente en un documento, el caso más claro son las entradas de un blog o las noticias de un periódico online. Así, dentro de la portada podremos tener varios artículos demarcados semánticamente, por lo que una herramienta puede extraerlos fácilmente.
• aside representa un contenido que está muy poco relacionado con el resto de la página, como una barra lateral. Esencial para delimitar el contenido “importante” del contenido “de apoyo”, haciendo más caso al primero que al segundo.
• header representa la cabecera de una sección, y es de suponer que se le dé más importancia que al resto, sobre todo si la sección es un artículo.
• footer representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
• nav representa una sección dedicada a la navegación entre el sitio, como la típica barra superior de los periódicos.

En la anterior imagen vemos un ejemplo de cómo cambiaría un documento escrito en HTML normal a HTML5 con estos elementos.

Mejores formularios

El elemento input ha sido ampliado y ahora permite todos estos tipos de datos:

• datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora.
• number para que el usuario indique un número.
• range para indicar un rango entre dos números.
• email para indicar un correo electrónico.
• url para indicar una dirección web.
• search para indicar una búsqueda.
• color para indicar un color.

Lo más interesante de esto es que los navegadores podrán implementar interfaces específicas para cada tipo de dato, por ejemplo una fecha o un color se podrán indicar de manera directa e intuitiva. Otro ejemplo sería el teclado del iPhone, que muestra unos símbolos u otros dependiendo de si es un texto normal, un email (añade @ y el punto) o una url (añade la barra y el punto com), y que por tanto gana mucho con este estándar.

Otros elementos importantes

• audio y video sirven para incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Sin duda uno de los añadidos más interesantes, ya que permite reproducir/controlar vídeos y audios sin necesidad de plugins como el de Flash. Se tratan de manera totalmente nativa como cualquier otro elemento, por ejemplo se pueden incluir enlaces o imágenes dentro de un vídeo. Aunque las implementaciones actuales son un tanto ineficientes, se espera que en un futuro próximo se optimicen. Portales de vídeo como Youtube o Dailymotion ya están empezando a mostrar que un futuro sin Flash es posible (¡y necesario!).
• embed sirve para contenido incrustado pero no nativo, sino ejecutado por plugins como el de Flash. Aunque embed está soportado por casi todos los navegadores desde hace tiempo, es ahora cuando entra parte del estándar y evita el infierno/pelea entre object y embed.
• canvas es un elemento complejo que permite generar gráficos, dibujando elementos dentro de él. Aunque nunca hayas oído hablar de él, seguro que lo has usado alguna vez, por ejemplo de Google Maps. Es un elemento muy potente que dará bastante que hablar en el futuro, y que será el culpable de aplicaciones web espectaculares.

Más elementos

• dialog se plantea para escribir conversaciones, por ejemplo para transcripciones de chat.
• figure se plantea para asociar un contenido multimedia (una foto, un vídeo, etc) a un título o leyenda.
• mark representa un texto resaltado, por ejemplo para resaltar una búsqueda.
• meter representa una medida, como el número de KB. Tiene más sentido si lo unimos con…
• progress representa el estado de una tarea, y se puede usar por ejemplo al subir un documento o al realizar varias tareas pesadas. Esto permitirá barras de tareas personalizadas y potentes.
• time representa una fecha o una hora.
• command representa un comando que el usuario puede ejecutar en su navegador.
• output representa una salida de un programa, probablemente ejecutado directamente en el navegador, como una calculadora.
• datagrid representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información. Será útil sobre todo si se quiere trabajar con aplicaciones que necesiten de bastantes datos a la vez en el lado del cliente.

En las próximas entradas veremos más novedades interesantes de HTML5, centrándonos en aspectos más dinámicos.

Adobe presenta en AdobeLabs una extensi�n para el uso de HTML5 con Dreamweaver CS5. Esta extensi�n proporciona la posibilidad de desarrollar para HTML5 y CSS3, e incluye actualizaciones y mejoras WebKit para la vista de dise�o y renderizado en Live View.

Esta extensi�n incorpora estas caracter�sticas:

• Introduce el panel de vista previa de multipantallas, lo que permite mostrar en Live View 3 diferentes tama�os de pantalla.
• Agrega y actualiza el code hinting para las nuevas etiquetas, atributos y propiedades HTML5.
• Agrega el code hinting de las siguientes especificaciones CSS3: Transformaciones 2D/3D; animaciones; fondo y el borde; b�sicas de interfaz de usuario; trazado de la l�nea; Marquee; Media consultas; multicolumna, Ruby, contenidos y transiciones.
• Actualizaciones Live View para apoyar <video> y <audio>.
• Mejora de la prestaci�n de CSS3 en Live View.
• Agrega dise�os de HTML5 de arranque para el cuadro de di�logo Nuevo documento.
• Ofrece una mejor prestaci�n de nuevas etiquetas en la vista Dise�o.

Podemos descargar la extensi�n desde la siguiente URL:
http://labs.adobe.com/downloads/html5pack.html

Tambi�n disponemos de un foro espec�fico por si tenemos alguna duda o consulta:
http://forums.adobe.com/community/labs/html5pack/

Android 2.2 FroYo (Frozen Yogurt) fue anunciado hoy en el Google I/O 2010. La velocidad fue aumentada incre�blemente. Tiene Flash Player 10.1 completo, juegos 3D de alto rendimiento, Wifi Sync, tienda de mp3 y otras sorpresas.

Es el Android listo para ser servido en Android Tablets.

�Velocidad! 450% m�s veloz

Cambios profundos al c�digo y al kernel han hecho todo el sistema operativo incre�blemente veloz. Experiencias como Flash, Javascript pesado, juegos 3D y c�lculos complejos que se esperan en un desktop funcionan con un rendimiento muy similar en Android ahora.

Juegos de Electronic Arts

El VP de Google, Vic Gundotra, demostr� Need for Speed para Android. En el sandbox del Google I/O tambi�n vimos varios juegos corriendo sin problemas. S�, eso incluye FarmVille y Plants vs. Zombies en Android.

Flash Player 10.1 y Android Apps en AIR

Ya creamos un art�culo entero hablando de Flash Player 10.1 corriendo en Android y apps nativas de Android hechas en Flash. Pero en resumen, es la experiencia del escritorio en el tel�fono. Apple dijo que no se pod�a, pero Google y Adobe mostraron la realidad.

Wifi Sync y Tienda de mp3 con streaming

Internet. Existe. Google anuncia una tienda de Android basada en web sincronizada con tu tel�fono. Si desde tu laptop vas a la web de Android Market y compras una app, est� se descarga inmediata y autom�ticamente en tu tel�fono. Es tan f�cil como suena.

Pero tambi�n venden mp3, compitiendo de frente con iTunes y dando una patada a Apple. El mp3 se descarga autom�ticamente al tel�fono o puedes elegir mantenerlo en la web y acceder a tu librer�a de m�sica por streaming. Todo autom�tico, sin sincronizaci�n ni nada.

Automatic software update y caracter�sticas empresariales

Ahora es posible actualizar las apps en masa o autom�tico. Es algo que todos los que usamos Android odi�bamos, as� que est� bien. Debi� estar ah� desde el principio.

Agregaron soporte fuerte a Exchange, API de backup, Tethering (usar el plan de datos del celular en un laptop por puerto USB), control remoto. Cosas que le interesan a las empresas.

Android Ads

Para la gente que desarrolla apps para Android o sitios m�viles, Google anuncia un nuevo tipo de anuncios llamados Mobile Ads. Incluyen anuncios interactivos desplegables con im�genes, videos o HTML5. Anuncios clicktocall que llaman al n�mero del anunciante. Anuncios localizados por GPS y la promesa de estar abiertos a cualquier red de publicidad.

La apertura es un punto de competencia contra Apple. La publicidad m�vil de Apple exige un pago premium para ser parte del programa, exige exclusividad de plataforma y proh�be el uso de otras redes de publicidad en el iPhone fuera de la de Apple.

Android 2.2 FroYo estar� disponible para todos los tel�fonos que han corrido Android 2.x antes. Nexus One, HTC Incredible, Desire, EVO, Motorola Droid, Milestone, etc. Para los viejos G1, Magic y Hero, puede que no salga.

Todos lo sab�an, pero sigue siendo una gran noticia. Android tendr� instalado por defecto Flash Player 10.1 y podr� reproducir, tal como funciona en un desktop, todos los sitios y aplicaciones hechas en Flash o Flex. Nada del bullshit de Steve Jobs. Flash corre perfecto en dispositivos m�viles touch, no es un "drenador" de bater�a y no requiere recodear toda la web. Simplemente funciona.

Apps nativas hechas en Flash en el market de Android

En el sandbox muestran tambi�n varias apps nativas de Androids que se instalan desde el market, pero que fueron construidas con Flash y compiladas con AIR. Tal como funcionaba el compilador para iPhone, un developer puede crear una app en Flash y ponerla en el market de Android, la Ovi Store de Nokia o el Market de Blackberry.

Para el usuario, ambas experiencias son nativas y transparentes. Para los desarrolladores, la vida es m�s f�cil.

Google TV fue anunciado hoy en el Google I/O 2010. Es una "caja" que se integra con el TV, el cable y todo tu sistema de entretenimiento y a�ade una caja de busqueda, la web entera y el sistema operativo Android de manera transparente a la televisi�n. El c�digo de Google TV es open source.

Lo realmente revolucionario es que funciona.

Televisi�n + Busqueda

El primer cambio es simb�lico para Google. Una caja de b�squeda en el TV cambia la forma y la usabilidad de la televisi�n. Puedes poner el nombre de un canal y te lo cambia. El de un show y te lo pone en el canal que est�. Si no est� en vivo, te lleva a la web para verlo en demanda donde lo encuentre.

La web completa: Android + Chrome + Flash

Google TV trae un navegador completo (Chrome con Flash 10.1) con lo que es posible usar Youtube, Hulu, Youporn, Amazon OnDemand, Netflix o lo que sea. Completamente integrado con la televisi�n.

Antes pod�as hacerlo con Boxee y un par de hacks, pero no tan f�cil como Google TV. Y definitivamente superior a como Apple TV lo hace.

Un teclado o un Android o?

La idea es reemplazar el control remoto de tu TV con uno de los muchos controles "universales" creados para Google TV. Controlan todo tu TV, pero tambi�n dan un teclado y acceso total a la web completa. Eso puede ser un punto en contra, pero si el uso se masifica, ser� natural comprar un Televisor que diga "GoogleTV Ready".

O puedes usar Android. Google empuj� en el I/O 2010 mucho el uso de Android. Si tienes un tel�fono con Android, puedes simplemente decirle "cnn" por voz y el canal cambiar�. Control completo por voz o touch con el tel�fono.

En teor�a, el protocolo de control de Google TV es abierto, as� que quiz�s pueda haber una app para iPhone que controle Google TV. Eso es si Apple lo aprueba.

Youtube Leanback y rentals

Corto y r�pido. Google cree que sabe lo que te gustar�a, as� que creo Youtube Leanback. Un algoritmo detecta tus costumbres y videos m�s vistos y reproduce autom�ticamente videos que el algoritmo asume que te gustar�n. Igualmente, Youtube lanz� la posibilidad de rentar pel�culas y series, que podr�s ver en la app de Youtube de Google TV.

Tienda de aplicaciones para tu TV

Al igual que Android, Google TV tiene un market de aplicaciones instalables en el TV. Apps especializadas de Netflix, FOX y dem�s para dar una interfaz mucho m�s optimizada que un sitio web y as� acceder a contenido por demanda.

Las apps moviles de Android funcionan en Google TV tambi�n. Igual que las apps de iPhone funcionan en iPad. Ligeramente "escaladas", pero funcionan. Tienes Android entero en tu TV.

�Te interesa?

Funciona, es lindo. Pero claramente est� enfocado al mercado gringo inicialmente. Yo uso un laptop conectado a Boxee para hacer algo muy similar a Google TV, pero gratis y ya mismo. Google TV tiene Android, Youtube y lo m�s importante, la caja de b�squeda. Falta ver precios y detalles, pero �Te interesa? �Lo comprar�as?