Adobe presenta el Creative Suite 5.5

abr15

Se lanzó esta última semana el Creative Suite 5.5, lo que presenta una nueva versión de su paquete de aplicaciones de diseño que está concentrada en mejoras sobre HTML5, Flash y, lo más importante, optimizar el desarrollo de aplicaciones para nuevos dispositivos como Smart Phone e iPad.

Este lanzamiento demuestra la nueva tendencia de Adobe que consiste en realizar actualizaciones de manera más veloz, hasta ahora lo venía haciendo cada 2 años.

Los usuarios de Dreamweaver se verán beneficiados con muchas mejoras en HTML5 -funcionalidades que hasta ahora solo se podían utilizar a través de una extensión pero no eran parte del corazón del producto- y la inclusión de frameworks de desarrollo para dispositivos móviles. Además, hay actualizaciones para Flash Builder y Flex, que también añaden soporte para tecnología móvil.

También hay que destacar que se verán beneficiados los diseñadores que utilicen in InDesign y quieran diseñar para tabletas como iPad, las basadas en Android y el nuevo BlackBerry PlayBook.

Un dato a destacar es que se sabe que las licencias de la suite de Adobe no son precisamente baratas, especialmente las más completas. Por eso es interesante la idea de lanzar un plan de suscripción mensual o anual que te permite disfrutar de una licencia por un tiempo acotado. No es una versión web sino el producto de escritorio 100% funcional pero con una clave de registro que vence luego de cierto tiempo.

Por ejemplo, una licencia de Dreamweaver arranca en 19 dólares y una Photoshop en 35. La suite básica son consigue por 65 y la Master Collection -con todos los productos- por 129 dólares. Una opción interesante por si te interesa un uso ocasional.

Lanzan herramienta para convertir de Flash a HTML: Wallaby

abr07

Luego de que varios diseñadores lo pidan a gritos, Adobe lanza Wallaby, una herramienta para convertir archivos Flash a HTML. Mientras la disputa entre Flash y Apple sigue la solución que presenta Adobe -en beta, por ahora- parece más un parche destinado a que no la enorme cantidad de avisos que hay en Flash no queden fuera de  iPhone / iPad.

También hay que destacar las limitaciones del funcionamiento de Wallaby, ya que no soporta programación, audio, video -a no ser que esté en formato H.264- ni efectos avanzados de renderizado 3D. Para hilar más fino, los juegos y aplicaciones que exprimen el potencial de Flash se quedan fuera.

Los que realmente se verán beneficiados con esta nueva aplicación son los diseñadores de banners y piezas publicitarias para la web que en general suelen tener mayor simplicidad técnica. Al menos, para no tener que comenzar un proyecto de cero cuando las empresas reclaman ser visibles en los dispositivos que marcan tendencia.

Claves para que un sitio web sea apto para móviles

mar28

Es una pregunta cotidiana en webmasters y aquí les daremos un poco de información para que puedan estructurarlo de la mejor manera posible.

Antecedentes

Comencemos por una pregunta simple: ¿De qué hablamos al decir “teléfono móvil” cuando hablamos de sitios web aptos para móviles?

Una buena forma de responder a esta pregunta es pensar en las posibilidades del navegador web del teléfono móvil, en particular en comparación con las de los navegadores web de escritorio modernos. Para simplificar, podemos dividir los teléfonos móviles en unos cuantos tipos:

Teléfonos móviles tradicionales: teléfonos con navegadores web que no pueden procesar páginas las web habituales que puede procesar un navegador web de escritorio. Esto incluye navegadores para cHTML (iMode), WML, WAP y similares.

Teléfonos inteligentes: teléfonos con navegadores web que procesan, por lo menos hasta cierto punto, las páginas normales que procesan los navegadores web de escritorio. Esta categoría incluye una amplia variedad de dispositivos, como Windows Phone 7, dispositivos Blackberry, iPHone y teléfonos Android, así como tabletas y lectores eBook.

Esta categoría se puede dividir a su vez según su capacidad para admitir HTML5:

•Dispositivos con navegadores no compatibles con HTML5

•Dispositivos con navegadores compatibles con HTML5

El robot de Google y el contenido para móviles

Google dispone de dos robots rastreadores relacionados con este tema: el robot de Google (Googlebot) y el robot de Google para móviles (Googlebot-Mobile). El robot de Google rastrea el tipo de páginas web destinadas a los navegadores de escritorio y el contenido integrado en ellas, y el robot de Google para móviles rastrea el contenido para móviles.

Les comentamos algunas de las más cotidianas preguntas  y sus respuestas

Teniendo en cuenta la diversidad de capacidades de los distintos navegadores web para móviles, ¿Qué tipo de contenido debería servir al robot de Google para móviles?

La respuesta está en el User-agent que indica el robot de Google para móviles durante el rastreo. El robot de Google para móviles utiliza varios literales de User-agent, todos ellos con este formato:

[Nombre del teléfono o teléfonos] (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)

Para decidir qué contenido se debe servir, es necesario valorar qué contenido del sitio web funciona mejor con el teléfono o teléfonos indicados en el literal del User-agent. Aquí puedes encontrar una lista completa de los User-agent del robot de Google para móviles.

Ten en cuenta que, actualmente, el robot de Google para móviles no rastrea con ninguna identificación de User-agent destinada a teléfonos inteligentes. Así, actualmente, un sistema servidor de contenidos configurado correctamente debería servir al robot de Google para móviles solo contenido para los teléfonos tradicionales descritos anteriormente, puesto que esto es lo que dictan los identificadores de User-agent. Esta situación puede cambiar en el futuro. En tal caso, podría haber una nueva identificación de User-agent para el robot de Google para móviles.

Por ahora, esperamos que los teléfonos inteligentes puedan manejar el contenido destinado a los navegadores de sobremesa, de modo que no existe una necesidad real de que los webmasters hagan un esfuerzo especial para tales móviles. No obstante, en numerosos sitios web todavía puede tener sentido que el contenido tenga un formato distinto para los teléfonos inteligentes. Esta decisión depende de cuál sea el mejor modo de servir a los clientes.

Estructura de las URL de contenido para móviles

Sitios web que solo tienen contenido para usar en navegadores web de escritorio

Actualmente, la mayoría de los sitios sólo disponen de una versión de su contenido, esto es, HTML diseñado para navegadores web de escritorio. Esto significa que todos los navegadores acceden al contenido desde la misma URL.

Es posible que estos servidores no sirvan a los usuarios de teléfonos móviles tradicionales. La calidad obtenida por los usuarios de teléfonos inteligentes depende del navegador web para móvil que estén usando y puede ser tan buena como la que obtienen con un navegador de escritorio.

Si sólo sirves contenido destinado a navegadores de escritorio para todos los User-agent, deberías tratar al robot de Google para móviles igual que a todos los demás User-agent, conocidos o no. En estos casos, Google puede modificar tus páginas web para obtener una mejor experiencia en móviles.

Sitios web con contenido exclusivo para móviles

Muchos sitios web disponen de contenido optimizado específicamente para los usuarios de móviles. El formato del contenido puede estar simplemente adaptado a las pantallas de móvil, normalmente más pequeñas, o bien puede ser totalmente distinto (p.ej. servido por WAP, etc.).

¿Importa si los distintos tipos de contenido se sirven desde la misma URL o desde URL distintas? Por ejemplo, algunos sitios web tienen una URL como www.example.com destinada a los navegadores de sobremesa y otras como m.example.com o wap.example.com para los distintos dispositivos móviles. Otros sitios web sirven todos los tipos de contenido desde una única estructura de URL como www.example.com.

Para los robots de Google y de Google para móviles, no importa cuál sea la estructura de las URL siempre que sirva exactamente lo mismo que el usuario ve.

Si sirves todos los tipos de contenido desde www.example.com, esto es, sirves contenido optimizado para escritorio y para móviles desde la misma URL según el User-agent, esto también dará lugar a un rastreo correcto por parte de los robots de Google y de Google para móviles. Google no considera que esto sea encubrimiento.

Lo nuevo: Internet Explorer 9 y sus beneficios para el diseño web

mar19

Rápido y con el foco puesto en el contenido. Internet Explorer 9, la nueva versión del navegador de Microsoft, ya disponible, deja atrás una larga lista de intentos fallidos y ofrece un producto que tiene un desempeño muy bueno. Un dato estadístico interesantes es que en las primeras 24 horas, ya tiene 2,3 millones de descargas.

A primera vista, la interfaz del IE9 recuerda mucho a Chrome. La barra de direcciones es el verdadero centro del navegador. Desde ella se pude escribir una dirección web, buscar o consultar en el historial. Una serie de iconos en su interior permiten recargar o detener la carga de la página y activar la vista de compatibilidad, esto es, hacer que los sitios web “optimizados” para versiones anteriores del navegador se sigan viendo correctamente.

Al igual que el navegador de Google, en Microsoft han tomado nota que los usuarios no quieren un navegador repleto de funciones. Por el contrario, buscan interfaces claras y simples que les permitan concentrarse en navegar por la web.

La integración de Internet Explorer 9 con Windows 7 permite agregar un sitio  a la barra de tareas. Esto no solo simplifica el acceso a los sitios más frecuentes, sino que realmente ayuda a que el usuario vea una aplicación web realmente como una aplicación.

Otros puntos a favor: han incluido un gestor de descargas, una utilidad prácticamente imprescindible hoy en día para gestionar todos los diferentes archivos que se bajan de la web. Además, los mensajes de advertencia y error son muchos menos molestos y no perjudican la experiencia de usuario.

Ventajas para el Diseño Web

Lo más provechoso es el soporte que ofrece para HTML5 y CSS3, dos de las tecnologías que en poco tiempo se convertirán en estándar. Internet Explorer 9 puede manejar audio y video embebido y tiene soporte para la canvas, la nueva funcionalidad de HTML5 a través de la cual se pueden generar dinámicamente imágenes, gráficos y animaciones sin necesidad de plugins.

En principio, la reacción de la comunidad está siendo bastante positiva. En ArsTechinca hablan de The most modern browser there is: Internet Explorer 9 reviewed, donde destacan su simpleza, velocidad y el apego a los estándares. En Endgadget elogian la performance de IE9 frente a Chrome y Firefox en varios test.

Función de una Landing Page

mar10

Se conoce como Landing Page a una página web a la que una persona llega después de haber pulsado en el enlace de alguna campaña de email marketing o algún banner o anuncio en un portal de internet, y donde sin distracciones se orienta al visitante para que tome una acción sobre la propuesta que le interesó.

En la mayoría de los casos esta página web es una extensión del anuncio de promoción, donde se explica más detalladamente la oferta del producto o servicio que se está promocionando. De esta forma se evita llevar a los clientes directamente al sitio web, más institucional y probablemente no tan orientado a la venta.

Algunas ventajas

-          Se pueden modificar promociones, precios, anuncios, en forma rápida sin necesidad de alterar nuestro sitio web, que puede mantener un perfil corporativo.

 -          Como están “descolgadas del sitio web” podemos crear varias y vincular distintos anuncios a cada una de ellas, focalizando así la información de acuerdo al mensaje a transmitir en el correo o anuncio que atrapó el interés del lector.

 -          Mantiene enfocada la atención de clientes potenciales interesados en servicios y productos, aumentando las posibilidades de concretar ventas y generar nuevos contactos.

Diseño web con HTML5: cómo comenzar

mar04

 

Aunque la especificación todavía no está aprobada, cada vez más diseñadores y desarrolladores web se animan a iniciar sus proyectos con el futuro estándar. Para que iniciar un proyecto en HTML5 no sea un obstáculo, a continuación desplegamos una recopilación de diferentes recursos que permiten comenzar a utilizalo

Modernizr

Es una librería JavaScript que permite incorporar HTML5 y CSS3 a tus proyectos sin que los antiguos navegadores que no soportan las nuevas tecnologías queden imposibilitados de ver tu sitio. Por ejemplo, se pueden utilizar los nuevos tags semánticos como HEADER, SECTION o FOOTER sin tener que preocuparse por no estar soportados en Internet Explorer.

HTML5 Shiv

Una librería específicamente desarrollada para que las etiquetas HTML5 y CSS3 puedan ser interpretadas por Internet Explorer. El proyecto está hosteado en Google Code y no que hay que descargar ni configurar nada. Basta incluir unas líneas en el código y es suficiente.

HTML5 Boilerplate

Es una plantilla HTML5 para desarrollar rápidamente un proyecto con las opciones y configuraciones más habituales. No es un framework, sino solo una recopilación de diferentes técnicas y trucos comunes en todo proyecto web que utilice HTML y CSS3.

Initializr

Es un proyecto que funciona como una recopilación de diferentes librerías y recursos de HTML5. En su página web elegimos una serie de opciones a partir de las cuales nos genera un ZIP con todos los archivos necesarios. Puede incluir Modernizr, HTML5 Shiv, jQuery, configuración para .htaccess y más.

HTML5 Reset

Se trata de una completa plantilla que incluye todos los elementos más habituales en un proyecto con HTML5. Incluye HTML, CSS y JavaScript. Hay tres versiones disponibles que van desde la completa con comentarios muy buenos para aprender y la básica solamente con la estructura general.

Switch To HTML5

Un sencillo generador online de HTML5 basado en una serie de opciones que puede definir el usuario. Ideal para comenzar y obtener resultados rápidos sin complicarse demasiado.

HTML5 Lint

Con HTML5 la validación del código es un asunto delicado. En lugar de la consistencia que proponía el estricto estándar XHTML, HTML5 vuelve a ser más laxo y mantener el código coherente se hace más difícil. HTML5 Lint ayuda a los desarrolladores a mantener la consistencia original en HTML5 a través de una serie de opciones que validan la escritura en minúscula, el uso de comillas para los valores de atributos, el cierre de todas las etiquetas y otras reglas de sintaxis. Ideal para puristas del código.

HTML5 Doctor

Uno de los primeros sitios dedicados a HTML5 que se ha convertido en una verdadera fuente te recursos para este lenguaje con publicación regular de artículos, novedades y algunos tutoriales. También es interesante su sitio hermano HTML5 Gallery con una muy buena selección de sitios web que implementan HTML5.

HTML5 Rocks

Otro excelente centro de recursos sobre HTML5 con el auspicio de Google, combina información con tutoriales y al mismo tiempo nos deja ver en vivo las mejoras que ofrece el nuevo lenguaje de la web. Para pasar un buen rato recorriendo y aprendiendo.

HTML5 Reference Poster

Un impresionante poster de 10 x 7 metros con un buen resumen de las especificaciones del HTML5. Un diseño equiibrado y armonioso junto al uso de íconos ayuda a identificar fácilmente los diferentes aspectos de la nueva especificación. Un buen recurso de decoración-consulta en la oficina y para clases de tecnología.

Apple renueva la línea de las MacBook Pro

feb24

Apple decidió actualizar la línea de sus MacBook Pro en sus tres diferentes tamaños con nuevos procesadores, más memoria RAM, mejores tarjetas de video, nueva cámara integrada y la inclusión de una tecnología nueva de Intel llamada Light Peak, renombrándola como Thunderbolt.

Las mejoras

La inclusión de procesadores i7 de cuatro núcleos en los modelos de 15 y 17 pulgadas de hasta 3,4GHz. El modelo de 13 pulgadas incluye un procesador i5 de hasta 2,3GHz.

Intel HD Graphics 3000 integrado en toda la gama. AMD Radeon HD 6490M o AMD Radeon HD 6750M en el modelo de 17 con 256GB o 1GB de memoria dependiendo de la configuración para los modelos de 15 y 17 pulgadas.

Nueva cámara integrada con resolución a 720p para llamadas de video en alta resolución

La principal innovación es la actualización es Light Peak, una tecnología desarrollada por Intel que permite conectar periféricos y transmitir datos 8 veces más rápido que FireWire 800 y hasta 20 veces más rápido que USB 2.0 — Apple decidió llamarlo Thunderbolt, como ha ocurrido en el pasado con este tipo de tecnologías, toma cierto tiempo su adaptación y su popularización depende fuertemente de la decisión de fabricantes de adoptarlo.

Toda la mejora en velocidad y posibilidades de las portátiles (en general, no solo de Apple) siempre es buena y bienvenida, pero se puede usar procesadores de 8.0, 9.0 o 10GHz y no tener una mejora realmente significativa en el desempeño general y del día-a-día mientras se sigan usando discos duros tradicionales, que actúan como un verdadero cuello de botella.

Facebook Insight: la posibilidad de medir si tu página en Facebook da resultados

feb09

Existen diferentes perfiles de los empresarios que comienzan a utilizar Facebook, los que ni lo consideran, los que no saben cómo usarlo y los que están encantados.

Uno de los problemas que se le presentan a los dos últimos tipos de empresarios es saber si su página de Facebook les está funcionando. La mayoría simplemente mira el nº de “Me Gusta” o lo que anteriormente eran Fans y esto no nos dice demasiado. Sin embargo, ahora, gracias a Facebook Insights, podemos saber mucho más.

A continuación nombraremos los datos a los que hay que prestarle atención:

Usuarios Activos

Mucho más importante que los fans que tiene tu página, es saber cuántos de ellos están realmente activos. Los usuarios pasivos que hicieron “Me gusta” y nunca más vuelven a tu página no sirven para mucho. El nº de usuarios activos es el dato que realmente te indica cuantos usuarios están interactuando con tu página de alguna manera.

Actividad de la página

Aquí puedes medir la actividad que realizan los usuarios en tu página, como publicar en el muro, en los foros de debate, comentarios, visualizaciones de videos, o incluso saber si se ha mencionado tu página en otro lugar de Facebook.

Interacciones con tu página

También puedes medir la interacción de los usuarios con las publicaciones que compartes en tu página.
En concreto puedes ver un resumen de los “me gusta”, visualizaciones de tus publicaciones, los comentarios que te han dejado y la cantidad de gente que se da de baja.

Pestañas visitadas

Cuando se crean varias pestañas en la página de facebook, no se sabe si dan resultados. Con esta herramienta podrás medirla.

Referencias Externas

Por último te permitirá saber de dónde llega el tráfico a tu página de Facebook y así medir la difusión que has hecho de la misma.

Lo nuevo de Google: integra Hotpot en el buscador

feb02

Si bien ya el año pasado, Google había lanzado Hotpot, un servicio de recomendaciones de comercios basadas en las opiniones de nuestros amigos, integrada a Google Places, ahora llegó a un lugar donde la información será mucho más útil: los resultados de búsqueda.

Anteriormente, cuando introducíamos el nombre de un negocio y una ubicación geográfica en el buscador, un onebox nos ofrecía datos relacionados provenientes de la base de datos de Places. La novedad es que, aparte de las calificaciones y el enlace a la página del lugar, también se resaltan los comentarios realizados por amigos.

El objetivo es destacar las recomendaciones de personas en las cuales confiamos, que definimos durante nuestra interacción con Hotpot. Incluso, es posible mostrar exclusivamente estas opiniones, a través de la opción Lugares del menú izquierdo (aclaramos que todavía no está disponible en mi cuenta).

Como es de esperarse, en una época donde se habla tanto sobre la relevancia de los resultados de Google, estos son ordenados en base a nuestros gustos. La manera de determinarlos es de acuerdo a los puntajes que asignamos a los distintos lugares, a través del servicio web, Google Maps, el widget para Android o la aplicación para el iPhone.

Aunque es un servicio atractivo para quienes usan Internet con la idea de recopilar opiniones sobre un producto o servicio, es una lástima que no exista una experiencia unificada, porque Hotpot, Maps y Places se superponen en varias funciones. Y esto sólo logra que las ventajas se diluyan entre las distintas herramientas, generando únicamente confusión

El Wireframe en el proceso del diseño web

ene26

Aprender diseño web hoy es mucho más complicado que hace algunos años, aunque no menos apasionante. Si en los comienzos alcanzaba con editar HTML en el bloc de notas, la evolución del sector y su profesionalización ha llevado a que cada vez haya que saber más cosas.

La construcción de un buen sitio web se lleva a cabo en equipo. Desde la idea inicial hasta el producto terminado, hay varias manos y cabezas que trabajan sobre diferentes partes del problema.

Los directores o jefes de proyecto definen con el cliente los trazos gruesos y el objetivo de la web, los diseñadores de interacción buscan transformar los problemas en historias relatadas con sencillez, los artistas visuales pulen la gráfica, los codificadores transforman los dibujos en HTML y CSS, y los especialistas en marketing buscan que el contenido sea lo más visible posible. Y eso que no contamos a los programadores ni a los creadores de contenido.

Travis Isaacs, un reconocido diseñador que trabajó en numerosos proyectos, propone un proceso de diseño web bastante tradicional, que tiene como centro al Wireframe.

  • Sketch: se capturan con lápiz y papel las ideas principales y se piensa en una primera organización del contenido.
  • Wireframe: se diseñan las bases de la interfaz a partir de múltiples interacciones entre el equipo con el cliente.

  • Comp: se realiza la composición del sitio en Photoshop para ajustar la interfaz visualmente y agregar los detalles.
  • Prototype: se obtiene una página web funcionando con HTML, CSS, jQuery y todos los elementos que sean necesarios.

Isaacs considera que en el wireframe está el verdadero corazón del diseño, donde se toman las decisiones clave que pueden convertir una buena idea en un gran sitio Web. Es el momento de mayor discusión, donde el equipo de desarrollo más interactúa con el cliente. Ese es el punto donde los buenos diseñadores hacen la diferencia.