Iván Mendoza

Desde el 7 de mayo (antes había algo pero no tan concreto) Facebook publicó un artículo acerca de los cambios en el perfil de los usuarios, en su momento me entere por Techcrunch y me dedique a recopilar información sobre el tema, además de hacer un resumen para saber que esperar y no olvidarlo luego.

Hoy leyendo Denken Über recordé el tema y decidí publicar el resumen que tengo guardado por allí, básicamente un documento copy+paste de la información disponible en el wiki.

Por el hecho de ser desarrollador de apps. pienso que me enfoque mucho en los aspectos técnicos, así que te recomiendo leerlo solo si eres desarrollador o conoces Facebook como la palma de tu mano:

Publisher

(desconozco como lo traducirán al español)

• La idea es reemplazar El muro (wall) y ser una herramienta para publicar contenido creado por el usuario (igual que un blog), compartir enlaces, subir fotos y vídeos. Pienso que más que parecer un blog en realidad es un tumblelog (como los de Tumblr).
• A diferencia de un tumblelog, Facebook ofrece la ventaja de las aplicaciones que permiten al usuario publicar contenido “prefabricado”, como resultados de un test (equivalente a un meme) o la letra de una canción.
• La interfaz del Publisher esta disponible para el usuario tanto en su propio perfil como en el de sus amigos, las diferencias se dan en las opciones de publicación, por ejemplo: en mi perfil público lo que quiero mientras que en la de mis amigos tengo limites. Imagino que función a de forma similar a un blog, en el sentido de que en mi blog puedo publicar lo que quiera mientras que en el blog de mis amigos solo puedo comentar, de igual forma existirán dos “interfaces” distintas para cada caso.
• Especificaciones para el diseño y programación del Publisher
  • 500 pixeles de ancho y 40 de padding
  • No deberá sobrepasar 700 pixeles de alto.
  • Permitirá la utilización de FBML, Flash (con autoplay) y FBJS
  • Puede incluir sección de comentarios debajo de la publicación
  • FBJS permitirá activar y desactivar el botón de publicación hasta que la persona termine de publicar.
• Más información en el wiki: New Design Publisher

Feed Wall

• Un cambio que me atrae mucho es la integración del mini-feed junto a El Muro en una nueva sección llamada Feed wall (vaya creatividad :P), que desde mi punto de vista no es más que un “lector de feeds” en donde estamos suscritos a la actividad y comentarios de nuestros amigos, lo mismo que el newsfeed pero con nuestra actividad y comentarios incluidos.
• Anteriormente existía un formato par publicar en el feed que permitía el uso de texto e imágenes (además del icono), en el nuevo perfil existirán tres formatos. El pequeño one line (una línea), el short(corto o mediano) y el full size (el completo). El one line como su nombre lo dice permite publicar con texto de la forma más simple, el short permite la utilización de imágenes e incluso swf (flash) mientras que el full size nos da la libertad de publicar “lo que sea” siempre y cuando no sobrepase los 700 px de alto. Este último permite algunas etiquetas de FBML.
• Facebook requiere que registremos un “paquete de plantillas” y nos proporcionará un ID que deberemos utilizar cada vez que vez que publiquemos una historia en el feed. Las plantillas se deben de registrar con el tamaño (los tres anteriores que mencione) para poder publicar un tema de ese tipo.
• Respecto a los permisos para publicar, Facebook permite que las aplicaciones publiquen automáticamente temas de una linea (one line) sin permiso del usuario, temas cortos (short) con permiso del usuario y temas completos (full size) cuando son generados por el usuario a través del Publisher.
• Especificaciones para el diseño y programación para publicar en el Feed Wall
  • Historias one line se publican con un ancho de 500 px y siempre necesitan plantilla. Sino estoy mal, casi la misma que se utiliza actualmente. Se permite el uso de un poco de HTML y FBML, por ejemplo etiquetas como a, fb:name, fb:pronoun fb:if-multiple-actors.
  • Historias cortas (short) se publican utilizando las plantillas proporcionadas por Facebook ( alrededor de 5-10 segun indican). Permiten el uso de HTML y FBML con etiquetas como fb:userlink, fb:name, fb:pronoun, fb:if-multiple-actors, a, b y i.
  • Historias completas (full size) al igual que las anteriores utiliza plantillas, aunque si estoy en lo correcto no serán administradas por Facebook, estas permitirán el uso de FBML de igual forma que lo permite El muro actualmente. Se mostrarán en un área de 500 px de ancho y no deberán superar los 700 px de alto.

  Más infomación en el wiki: New design feed wall

Narrow Boxes

• Narrow boxes son el equivalente (por no decir que son lo mismo) a las cajas de perfil actuales, estas tienen un ancho de 200px (las actuales usan 380px aprox.) y estan limitadas a 250px de alto.
• Las narrow boxes se crean, de forma similar a las actuales, usando profile.setFBML en la API.
• Se publican en el perfil del usuario cuando este utiliza el botón “Add to profile” que se muestra utilizando la etiqueta fb:add-section-button de FBML. Si no se crea una nueva “caja” para el perfil principal entonces esta aparece en la pestaña de boxes que es el área para colocar las cajas de las aplicaciones que usemos.
• Más información en el wiki: New design Narrow boxes

Puntos a tener en cuenta al actualizar las aplicaciones

1. Nuevo contenido integrado: El feed con El Muro, el perfil con pestañas, cajas de perfil junto al feed y nueva sección de información de las aplicaciones.
2. Modificaciones en la plataforma: Incluyen cambios en la API (nuevas formas de llamar), nuevas etiquetas FBML, y algunas etiquetas y métodos serán eliminados.
3. Session Key: Modificaciones en el manejo de sesión de los usuarios, que de alguna forma puede afectar las llamadas y actualizaciones “masivas” que hagamos desde nuestra aplicación. Como mencionan en el mismo wiki, algunas funciones que requerían iniciar sesiones infinitas ahora necesitan sesiones normales, mientras que otras, como la actualización de la caja de perfil no requieren inicio de sesión.

Para finalizar el tema y entender mejor los cambios, incluyo un resumen acerca del por qué de los cambios.

¿Por qué rediseñaron?

Objetivos

• Crear perfiles simples y más relevantes para los usuarios y sus amigos.
• Ayudar a los usuarios a controlar sus perfiles.
• Apoyar la comunicación entre amigos a través de los canales ya establecidos.

Mejoras

• Nuevas formas de comunicación de usuario a usuario
• Mejor integración del perfil.
• Mejoras en flujo de instalación e inicio de sesión.

Más información:

Si no han quedado satisfechos con el tema y quiere saciar su curiosidad les recomiendo visitar los siguientes enlaces:

• Anuncio oficial: Preparing for the New Facebook Profile Design
• Screenshot: Weekly Update 5.6.08: Check out the new “Boxes” tab
  
• “Resumen de todo” en insidefacebook
• y la noticia en Techcrunch

Saludos,
Iván

—-
Escrito mientras escuchaba No Quarter de Led Zeppelin

Durante casi año y medio me dedique a utilizar XHTML y CSS para desarrollar, pero hace unos días decidí que quería aprender algo nuevo, algo como Adobe Air.

Adobe Air, originalmente llamado Apollo, es un programa que nos permite ejecutar “pequeños” programas en nuestra PC ofreciendonos, a los desarrolladores, la opción de desarrollar programas de una forma relativamente fácil y utilizando código conocido como lo es Actionscript o HTML.

Había escuchado noticias y comentarios acerca de Adobe Air, la mayoría muy favorables a la aplicación pero ninguno de ellos acerca de como iniciar el desarrollo de aplicaciones. Obviamente que lo primero a hacer era buscar información, cómo iniciar y qué herramientas debía utilizar. Al iniciar mi idea acerca del desarrollo para Adobe Air era necesitaba algun tipo de extensión para Flash o Flex, sin embargo, Adobe intento cubrir todos los aspectos posibles incluyendo la posibilidad de desarrollar usando Flex, Flash CS3 e incluso la combinación HTML+CSS+JS.

Mi especialidad no es Flex así que descarte esa opción, también descarte Flash CS3 porque en mi PC aún no lo instalo, solo quedaba HTML como base para el desarrollo. Al desarrollar Adobe Air usando XHTML tenemos tres opciones más, una es utilizar la extensión de Dreamweaver CS3, usar Aptana y por último, la más generica de todas, utilizar el SDK(disponible para windows y mac) que nos permite utilizar cualquier aplicación de texto. Elegí el SDK de Adobe Air simplemente porque prefiero usar PSPad que Dreamweaver.

¡Hola Mundo con Adobe Air!
Para empezar lo primero que hice fue realizar el ejemplo, y qué mejor que ¡Hola mundo! para aprender, así que aquí los dejo con “mi versión” de ¡Hola mundo! basada en la documentación de Adobe Air (originalmente llamado Hello world!)

Debes iniciar descargando el SDK de Adobe Air que incluye los archivos básicos para trabajar, además una imagen para usar de fondo, y por último la referencia de Adobe Air para resolver dudas.
Las aplicaciones en Adobe Air funcionan con un archivo xml que es el que establece los valores básicos de la aplicación, un HTML que será nuestro contenido y el archivo AIRAliases.js (incluido en la carpeta AdobeAIRSDK/frameworks), además incluiré una imagen para utilizar de fondo y un archivo BAT (proceso por lotes para Windows) para simplicar las pruebas.

Nuestro “instalador” será HolaMundo-app.xml y se ve así:

<?xml version="1.0" encoding="UTF-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>ejemplo.html.HolaMundo</id>
  <version>0.1</version>
  <filename>HolaMundo</filename>
  <initialWindow>
    <content>HolaMundo.html</content>
    <visible>true</visible>
    <width>240</width>
    <height>320</height>
  </initialWindow>
</application>

La primera línea es para definir el XML y en la segunda esta la etiqueta applications con el namespace para las aplicaciones de air (Ctrl C + Ctrl V ). Luego continuamos con la información de la aplicación de esta forma:

• id: Es el nombre que identificara a nuestra app. del resto, la forma de crearlo es de derecha a izquierda, por ejemplo holamundo.ejemplos.ivanmendoza en donde ivanmendoza es “mi empresa” ejemplos la division y holamundo el nombre de la app.
• version: Indica la version de nuestra app.
• filename: Es el nombre visible de nuestra app.
• initialWindow: Define las propiedades de la ventana inicial de la aplicación.
  • content: indica el archivo que contiene la interfaz de la ventana, en el ejemplo el HTML HolaMundo.
  • visible: Para definir si la ventana estará visible(Boolean).
  • width: ancho de la ventana
  • height: alto de la ventana.

Existen más etiquetas para definir otras opciones, como el icono por ejemplo, pero de momento con esto es suficiente.

El HTML (HolaMundo.html) de la ventana principal es el siguiente:

<html>
<head>
  <title>Hola Mundo</title>
  <script type="text/javascript" src="AIRAliases.js"></script>
  <style type="text/css">
    body{overflow:hidden;margin:0;padding:0;}
    #visor{
      margin:0;
      padding:0;
      width: 240px;
      height: 320px;
      overflow:hidden;
      text-align:center;
      font-size:16pt;
      font-weight:bold;
      color:#fff;
      padding:130px 0 0;
      background:#ccf url(app:/imagenes/fondo.jpg) no-repeat;
    }
  </style>
  <script>
  function saluda(){
    var visor = document.getElementById("visor");
    visor.innerHTML = "Hola Mundo";
  }
  </script>
</head>
<body onload="saluda();">
    <div id="visor" />
</body>
</html>

Como ven es un HTML simple con unas cuantas caracteristicas especiales:

• Debemos incluir el javascript de Air (AIRAliases.js)
• La dirección app:/ es propia de Air y hace referencia al directorio en donde se instalo la aplicación. Funciona en todo el documento, incluso en los estilos CSS (como el ejemplo).
• El javascript funciona igual, solo tiene el plus de las funciones para Air que pueden consultar en la referencia del lenguaje.
• La función del saludo se carga en el evento onload de el body y solo agrega texto al div visor creado dentro.

Y listo, con esos dos archivos (cuatro si contamos la imagen y AIRAliases.js) tenemos listo nuestro ejemplo Hola Mundo, por supuesto aún falta probarlo y para ello usamos el ADL (AIR Debug Launcher) que es un programa incluido en el SDK que permite probar las apps. sin necesidad de compilar el archivo de Air. Su sintaxis por línea de comandos es:

adl.exe  HolaMundo-app.xml

en otras palabras la direccion del programa seguido de la dirección del xml “instalador”. Como es algo realmente tedioso escribir eso cada ves que se prueba, preferí utilizar un archivo de proceso por lotes (BAT, solo windows) que “automatice” el proceso, el código es:

start ..\AdobeAIRSDK\bin\adl.exe HolaMundo-app.xml

y esta ubicado en la misma carpeta que la aplicación de air, el SDK esta en un carpeta del mismo nivel. Les muestro la imagen para que se entienda mejor

Cuando tengamos hecho esto solo ejecutamos el bat y deberíamos de tener nuestra primera aplicación de Adobe Air funcionando y con un resultado como este:

Archivos de ejemplo para descargar: holamundo.zip (20.8kb)

En resumen, desarrollar aplicaciones para Adobe Air es bastante sencillo, básicamente porque se utiliza lenguajes que ya conocemos (o deberíamos) y lo “complicado” es saber como iniciar, sobretodo quitarnos la idea de que es aprender un nuevo lenguaje o el miedo a que sea muy complejo. Es una herramienta muy poderosa y sobretodo extensa, de allí que el nombre de este tema sea introducción a Adobe Air, porque esto es solo el inicio.

Más información sobre Adobe Air en:

• Developing Adobe AIR Applications with HTML y AJAX
• Adobe® AIR™ Language Reference for HTML Developers
• Adobe AIR SDK
• Adobe Air ahoradisponible para Linux

—————-
Escrito mientras escuchaba Astral Projection - Visions Of Nasca