Después de una intensa semana por el Mobile World Congress, y tras asistir a varios eventos organizados por Intel (entre ellos un hackathon), me ha quedado la sensación de que existe bastante desconocimiento sobre la Intel AppUp y lo realmente sencillo que es publicar allí.

La Intel AppUp es una store que de momento está especializada en aplicaciones para netbook y PC. En esta entrada voy a contar el proceso de publicación una aplicación web, aunque también se pueden enviar aplicaciones de Adobe AIR, hacer migraciones desde otras plataformas, utilizar su SDK, etc.

El primer paso es registrarse. Una vez registrado, hay que unirse al programa para desarrolladores para poder enviar aplicaciones y venderlas.

Para poder enviar una aplicación web tenemos que crear un zip en cuyo nivel principal se encuentre el index.html que lance la aplicación, y un icon.png de 128×128 píxeles. Obviamente ese zip tendrá también todas las carpetas y archivos que necesite la aplicación. Para los que sean o hayan sido flasheros, comentaros que si tenéis un swf embebido en un html, ya se puede empaquetar como una aplicación web, sin necesidad de hacer ninguna transformación del swf ;)

Una vez que hemos creado ese zip, podemos utilizar el encapsulador para transformar la aplicación web en un ejecutable para windows o meego. Podemos acceder al encapsulador seleccionando Desarrollo -> Enviar aplicaciones web.

En el apartado Make Your App del encapsulador rellenamos todos los datos que se nos solicitan, y adjuntamos nuestro zip.

Cuando ya hayamos rellenado todos los datos, seleccionarmos Make it. Si todo está correcto, en unos 30 segundos se generarán los archivos instaladores para MeeGo y para Windows, y podremos descargarlos en nuestro ordenador. Podemos bajar solo los archivos que nos interesen. En mi caso solo he publicado para Windows, así que no necesité el instalador de MeeGo.

Una vez que tengamos el archivo MSI (instalador de windows), deberemos firmarlo para que nos puedan validar la aplicación. Si no disponemos de un certificado, Intel nos ofrece, a través de Comodo, la posibilidad de conseguir un certificado gratuito. Podemos acceder solicitar este certificado desde el apartado Recursos dentro de Mi tablero.

Una vez que se solicita y se adjuntan los documentos que se requieren (en mi caso envié dni, alta de iae, factura de teléfono, y no recuerdo si me pidieron algo más), se recibe una llamada telefónica en la que básicamente confirman que tu teléfono y los datos que has enviado son correctos.

Desde Intel se facilita información detallada sobre el proceso de solicitar y utilizar el certificado, así como sobre cómo firmar el msi.

Para el proceso de alta de una nueva aplicación puede ser conveniente que tengamos preparados los datos y achivos que se nos van a solicitar. Desde Intel también se facilita información sobre el proceso de cómo subir una aplicación, que paso a explicar a continuación.

En primer lugar seleccionamos Iniciar una nueva aplicación desde nuestro tablero.

En el apartado sobre Informacion de la aplicación tendremos que especificar en primer lugar los idiomas disponibles para la aplicación. Yo cometí en un principio el error de estar en el entorno en español, y al seleccionar los idiomas de la aplicación me aparecía el español como idioma preseleccionado, y no lo podía eliminar. Por lo tanto si nuestra aplicación está sólo en inglés deberemos hacer el alta de la aplicación teniendo el entorno de la página en inglés.

Después, además del nombre de la aplicación y del publicador (que puede ser nuestro nombre si no pertenece a una empresa), tendremos que incluir un icono del al menos 100×100 píxeles. Aquí podríamos utilizar el mismo icono que pusimos en el zip para el encapsulador. También deberemos añadir al menos una captura de pantalla de la aplicación, pudiendo añadir incluso 5 diferentes. Estas capturas deben ser gif, jpg o png de 820 x 480 píxeles (independientemente del tamaño de nuestra aplicación).

También se nos pedirá un eslogan, una descripción corta, y una descripción larga de nuestra aplicación.

En el apartado de Precios, podremos listar las categorías donde queremos que esté incluida nuestra aplicación, las palabras clave, las fechas de disponibilidad de la aplicación, el precio de venta, y los países en los que queremos que esté disponible.

En el apartado de Información de carga especificaremos el runtime compatible (nativo de Windows en este caso), plataformas y dispositivos compatibles, si hay requisitos de hardware, la versión de la aplicación, etc. Aquí deberemos subir el instalador MSI que hayamos firmado previamente.

En los siguientes apartados tenemos también la opción de incluir beta testers para nuestra aplicación (no es necesario), y de incluir las directrices necesarias para el equipo de validación.

Por último nos aparecerá un resumen de todos los datos que hemos añadido, y un botón para enviar finalmente la aplicación si todo está correcto.

Y después de esto solo nos queda esperar aproximadamente una semana para saber si nuestra aplicación ha sido aceptada. El proceso actual se mostrará en el apartado Aplicaciones de nuestro tablero.

Por último me gustaría comentar brevemente otro servicio que da Intel en el se proporcionan recursos para ayudar a desarrollar y comercializar aplicaciones independientemente de la Intel AppUp. Se trata del Intel Software Partner. Aquí se facilitan por ejemplo diferentes herramientas de evaluacion del software para poder mejorar su rendimiento. Hay muchos recursos disponibles, y contaremos con un administrador y contacto que nos ayudará en todo lo que necesitemos. La atención y facilidades que dan al desarrollador es realmente buena.

En el pie que se encuentra a continuación podéis ver todos los enlaces con la información de todo el proceso que he explicado en esta entrada.

A la hora de realizar un tutorial, una de las pocas desventajas que encontraba en hacerlo en versión web respecto a realizarlo en pdf, era que en el pdf se podía pasar página con las flechas del teclado, lo cual que resulta muy útil cuando se está leyendo algo con formato libro o tutorial paso a paso, y no conocía la forma de tener la misma funcionalidad para navegar en la web.

En la versión web, la forma de pasar página que había creado consistía en el símbolo < para ir a la página anterior, y en el símbolo > para ir a la página siguiente. Ambas flechas se encontraban dentro de una lista de dos elementos.

Por ejemplo, en la página 2, para pasar a la página anterior y siguiente (páginas 1 y 3), el código HTML de la lista tendría este aspecto:

<ul>
    <li id="anterior"><a title="Anterior" href="paso-1.html">&lt;</a></li>
    <li id="siguiente"><a title="Siguiente" href="paso-3.html">&gt;</a></li>
</ul>

De esta forma se podía navegar atrás y adelante en el tutorial haciendo clic sobre los símbolos < (&lt;) y > (&gt;).

Para que también se pudiera avanzar y retroceder en el tutorial utilizando las flechas izquierda o derecha del teclado o las teclas de avance y retroceso de página, creé el script keyCode.js con una función, llamada getValueKey, que sería llamada desde el HTML cuando la página se hubiera cargado:

<html>
....
   <head>
        ....
        <script type="text/javascript" src="js/keyCode.js"></script>
    </head>
    <body onload="getValueKey()">
    ....
    </body>
</html>

Para no tener que escribir un script personalizado para cada página (el tutorial tenía más de 200 páginas), lo primero que hice en el script fue extraer dinámicamente la dirección a la que apuntaban las flechas de anterior y siguiente. Como los elementos de la lista tenían el identificador anterior y siguiente, y el href se encontraba dentro de cada elemento de la lista, la forma de extraer las direcciones a las que había que navegar las almacené en variables de esta forma:

var anterior=document.getElementById("anterior").firstChild.getAttribute("href");
var siguiente=document.getElementById("siguiente").lastChild.getAttribute("href");

Para extraer el código de la tecla pulsada y almacenarlo en una variable llamada code, utilicé el siguiente código:

document.onkeyup = KeyCheck;
if (element.captureEvents) element.captureEvents(Event.CLICK);       

function KeyCheck(e)
{
    if (!e) var e = window.event
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
}

Por último, según la tecla pulsada (recogida en la variable code), la página saltaría a la que habíamos guardado en las variables anterior y siguiente. Para ello añadí el siguiente código dentro de la función KeyCheck:

switch(code)
{
    case 33:
    case 37:
        window.location.href = anterior;
        return false;
        break;
    case 34:
    case 39:
        window.location.href = siguiente;
        return false;
        break;
}

De esta forma voy a la página guardada en la variable anterior tanto si pulso en Re Pág (33) o la flecha izquierda (37), y voy a la página siguiente si pulso en Av Pág (34) o la flecha derecha (39).

Incluí una línea con return false para anular el código que el navegador pudiera tener por defecto para esa tecla, lo que puede resultar muy importante según las teclas que queramos detectar.

Para el caso de encontrarnos en la primera o última página del tutorial, podríamos crear como excepción dos scripts diferentes eliminando la referencia a la variable anterior o siguiente, y eliminando del switch los casos que correspondan.

He publicado la primera aplicación de escritorio que he creado con Adobe AIR. Se trata de StraightLines, una regla con la que, además de medir, podremos calcular proporciones y ángulos.

Alguna de las diferencias que he encontrado con otras reglas es que, además de medir de medir vertical y horizontalmente, permite medir líneas oblicuas. Además he añadido la posibilidad de calcular proporciones, informando también de si el valor se encuentra cerca de alguna de las proporciones más relevantes en diseño gráfico, como la proporción aúrea o √2 entre otras. Para las líneas oblícuas, también es posible saber el ángulo que forman.

Espero que estas funcionalidades añadidas puedan resultar de utilidad para los diseñadores gráficos. Los comentarios y sugerencias serán muy bienvenidos.

Cuando empecé a crear esta nueva web decidí que las imágenes de la galería ocuparan una parte amplia del espacio disponible del navegador. También tenía la idea de que siempre aparecieran centradas y con la misma distancia entre ellas, y que si decidía cambiar el tamaño de las imágenes no tuviera que rehacer el css.

Por otro lado quería que la cabecera, el menú de navegación y el pie se alinearan correctamente con las imágenes que quedaran en los extremos. Más o menos algo como lo que puede verse en esta imagen:

Supongo que hay formas sencillas de hacerlo, pero yo no lo conseguía. Así que para ello me creé un pequeño script que necesita de jQuery para funcionar (llamarlo plugin para jQuery quizá sea un poco excesivo).

Para que funcione simplemente tenemos que crear un div llamado gallery, que a su vez contenga para cada miniatura un div con la clase thumb, que puede contener la imagen, un pie de foto, o lo que nosotros queramos. El css asociado a cada thumb no forma parte del código, pero aspectos como el margin o el padding que se asignen en el css serán tenidos en cuenta automáticamente a la hora de calcular la anchura.

Una vez que tenemos la galería, asociamos la clase dynamicWidth a todo el contenido que queremos que tenga ese ancho variable, como lo puede ser la propia galería, la cabecera, el pie, o cualquier otro elemento.

Por último añadiremos a body, que también puede tener la clase dynamicWidth, la instrucción onLoad="setLayout();"

Por ejemplo, si tenemos los archivos Javascript necesarios en una carpeta llamada js, la parte HTML podría quedar así:

<html>
<head>
...
   <!--JS-->
   <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
   <script type="text/javascript" src="js/dynamicLayoutGallery.js"></script>
...
</head>

<body class="dynamicWidth" onLoad="setLayout();">
    ...
    <div id="gallery">
        <div class="thumb">
            ...
        </div>
        ...
        <div class="thumb">
            ...
        </div>
    </div>
    ...
</body>
</html>

En el archivo Javascript podemos modificar fácilmente la separación que queremos que haya entre cada thumb, así como el número mínimo de imágenes que queremos que se vean en cada fila, incluso aunque el navegador sea de menor resolución. Esto puede ser útil por ejemplo en el caso de navegadores móviles, ya que mostrarán el número mínimo de imágenes que hayamos asignado, y así tenemos un mayor control sobre lo que se mostrará finalmente.

//horizontal separation between thumbnails (change it if you want)
var separation = "30px";

//minimum number of thumbnails in each row (change it if you want)
var minimNumThumbs = 3;

Este script está publicado bajo la licencia Creative Commons CC BY, así que podéis utilizarlo tanto para proyectos personales como comerciales. A continuación podéis encontrar todos los archivos necesarios para su uso.

Estreno este blog comentando que ya se puede acceder desde esta web la Guía de aprendizaje de Flash CS5. Esta guía, con más de 200 páginas, tiene numerosos vídeos e ilustraciones que facilitarán su aprendizaje incluso a los que nunca hayan trabajado con Flash.

Comenzaremos conociendo las herramientas de edición gráfica, para después adentrarnos en las diferentes herramientas de animación que ofrece Flash CS5, como por ejemplo el editor de movimiento, la animación de huesos y las herramientas 3D. También añadiremos sonido a nuestras animaciones.

Para añadir interactividad, nos introduciremos en la programación con ActionScript. Aprenderemos a controlar desde la reproducción de una animación, hasta el caso más complejo de la creación de un juego. También aprenderemos a utilizar componentes y conoceremos algunas de las posibilidades del trabajo con texto y vídeo.

Por último, conoceremos distintas formas de publicar el contenido que hayamos creado.

Espero que os resulte útil.