Archive | septiembre 2013

Pocket-Kitten2: mejorando una app de Firefox OS

(¡Ésta es una pequeña historia, lo prometo!)

Esta historia comienza con PocketKUMI, una app de Firefox OS disponible en Firefox Marketplace. Luego de probarla, quería hacer una aplicación similar. Felizmente, la descripción decía:

Make your day full of KUMI’s cuteness. Tap the screen to view images/photos of KUMI. KUMI is the maskot’s name of Mozilla Indonesia Community. This app is inspired & based on Pocket Kitten by Ruth John.

Tras una búsqueda rápida encontré una buena presentación, Building Pocket Kitten, y, más importante, el código de Pocket-Kitten.

Entonces generé una derivación (fork) con estas ideas en mente:

  • ¡Sin gatitos!: No me malinterprete: lo que quería hacer es obtener imágenes usando algún recurso externo, como los Flickr’s Public Feeds. Entonces puedes obtener las imágenes que quieras con sólo una etiqueta script.
  • Estilo de Firefox OS: Eso fue fácil: hay una Firefox OS Styleguide con los colores sugeridos y las fuentes.
  • Horizontal, no vertical: Todas las fotos que quería mostrar están en modo horizontal, entonces el cambio era realmente necesario.

Luego de un día, completé los cambios, actualicé el archivo Manifest y los iconos, y lo envié al Marketplace con un nuevo nombre y propósito: PaperToys.

Fotos de Firefox PaperToys tomadas en Lima, Perú y obtenidas de Flickr. Basado en Pocket-Kitten e inspirado en PocketKUMI.

Afortunadamente, la aplicación fue aprobada rápidamente tras un pequeño ajuste :D

Y ahora, ¿qué sigue? Pienso es una aplicación instructiva: puede ser explicada fácilmente, puede ser ‘hackeada’ (en el buen sentido de la palabra), puede ser el comienzo de otras aplicaciones similares (por ejemplo, mostrar imágenes de un país, una actriz, un artista o de cualquier otro tema). Si tienes nuevas ideas puedes enviar un issue or derivar el trabajo (otra vez).

Pocket Kitten2

Anuncios

Pocket-Kitten2: revamping a Firefox OS app

(This is a small story, I promise!)

This story begins with PocketKUMI, a Firefox OS app available in the Firefox Marketplace. After I test it, I wanted to do a similar app. Hopefully, the description says:

Make your day full of KUMI’s cuteness. Tap the screen to view images/photos of KUMI. KUMI is the maskot’s name of Mozilla Indonesia Community. This app is inspired & based on Pocket Kitten by Ruth John.

After a quick search I found a nice presentation, Building Pocket Kitten, and, most important, the code of Pocket-Kitten.

So I forked it with these ideas in mind:

  • No kittens!: Don’t misunderstand me: what I wanted to do is to retrieve images using some external resource, like the Flickr’s Public Feeds. Thereby, you can get whatever images you want with just a script tag.
  • Firefox OS Style: That was easy: there is a Firefox OS Styleguide with the suggested colors and fonts.
  • Landscape, not portrait mode: All the pictures I wanted to show are in landscape mode, so the change was really necessary.

After a day, I completed the changes, updated the Manifest and the icons, and sent it to the Marketplace with a new name and purpose: PaperToys.

Pictures of Firefox PaperToys taken in Lima, Peru and retrieved from Flickr. Based on Pocket-Kitten and inspired by PocketKUMI.

Thankfully, the app was approved quickly after a small fix 😀

And now, what’s next? I think this is an instructive app: it can be explained easily, it can be hacked, it can be the beginning for other similar apps (for example, show pictures from a country, an actress, an artist, or any other topic.) If you have new ideas you can just fill a issue or fork it (again).

Pocket Kitten2

Videoserie: Mi semana con Firefox OS

Desde que recibí un Geeksphone Keon para pruebas, he realizado una serie de videos acerca de Firefox OS y aplicaciones para el nuevo sistema operativo de Mozilla.

Captura de pantalla de 2013-07-07 21:48:27

Lista de reproducción: Mi semana con Firefox OS – Temporada 1

1. Mi primera semana con Firefox OS / ¡Mira mamá, sin apps!

En este video se muestran las aplicaciones por defecto que vienen en un dispositivo Geeksphone Keon, un terminal con Firefox OS 1.0.1.

2. Firefox OS: Tengo vida social … en Facebook xD

En este video se presentan las aplicaciones sociales en Firefox OS, disponibles en el Firefox Marketplace (SoundCloud, Facebook, Twitter) y en la Búsqueda adaptativa de Firefox OS.

3. Firefox OS: Productividad Everywhere

Una selección de las mejores aplicaciones de la sección Productividad en el Firefox Marketplace. Incluye Wikipedia, Checklist, Taskino, AccuWeather, WorldClock, SpeakerClock, IPAddress, Dictionary, Explorer y Calculator.

4. Firefox OS: Lo nuevo de Firefox OS 1.1

En este video se presentan las novedades más resaltantes de la nueva versión de Firefox OS, así como se comentan las últimas noticias del Geeksphone Peak+.

5. Firefox OS: ¡Juegos offline!

El video muestra cuatro juegos en Firefox OS que funcionan sin necesidad de estar conectado a Internet. Se presentan Line Runner, Honeycomb, Poppit y Sketchbook. Otro juego offline es Penguin Jump.

6. Firefox OS: Una aventura de Tiempo y Espacio

En este video se presentan aplicaciones que utilizan la geolocalización y que proporcionan información metereológica. Aquí aparecen Now I am at, gpsDashboard, mapp, HERE Maps, Weather, WeatherFox, The Weather Channel.

7. Firefox OS: Cómo empezar a construir aplicaciones en Firefox OS

En este video se describen algunos consejos para comenzar a desarrollar aplicaciones en Firefox OS.

8. Firefox OS: Juegos Offline Vol. 2

En esta segunda parte de Juegos Offline presento Capitán Rogers, Age of Barbarians, Penguin Jump, SnakeFox, Tic Tac Toe, Heroine Dusk, SLTR. Bonus: Bazinga.

9. Firefox OS: Maratón de Juegos Online

En este video se muestran RPSLS, R.P.S.L.S. (Ambos son Piedra, Papel, Tijera, Lagarto y Spock, un juego mencionado en la serie The Big Bang Theory), Ninja Moral, Chess, Little Alchemy, Pasjans/Solitaire, Browserquest. Word Wars. Al final aparece Interactive Firefox Logo (que es sólo una animación).

10. +30 apps infaltables en tu Firefox OS

Coincidiendo con el lanzamiento de Firefox OS en Perú, en este video mostramos las mejores aplicaciones que no pueden faltar en tu Firefox OS, las esenciales, clasificados por redes sociales, juegos, utilidades y más.

¿Qué temas te gustarían ver en un próximo video? Deja un comentario 😀

MozLocations: construyendo una app de transporte para Firefox OS

Firefox OS, el sistema operativo móvil de Mozilla, es una apuesta concreta por traer de vuelta a las aplicaciones web de siempre al mundo móvil. En este post explico un proyecto para hacer una aplicación en Firefox OS para resolver un problema local.

El contexto

En Lima, Perú, existen dos sistemas masivos de transporte público: el Metropolitano (un sistema de buses que recorre la ciudad) y la Línea 1 del Tren Eléctrico. Ambos cuentan con estaciones predefinidas y horarios de funcionamiento, y son empleados por miles de personas diariamente.

Estación Naranjal, Metropolitano de Lima

El año pasado en Mozilla Perú comenzamos a prepararnos al lanzamiento de Firefox OS demostrando aplicaciones web móviles, y la primera de ellas fue Metropolitano Mobile, una aplicación hecha en jQuery Mobile que brindaba información sobre estaciones y rutas.

En 2013, con los primeros lanzamientos de Firefox OS a nivel global (Geeksphone, ZTE) y local (España, Polonia, Colombia y Venezuela), comenzamos a trabajar en una aplicación para el Tren Eléctrico de Lima, que ya se encuentra disponible en el Firefox Marketplace.

La idea de MozLocations

La obstinación con aplicaciones de transporte se debía a que nos parecía importante construir aplicaciones útiles para personas de una región o un país, aplicaciones que nos resuelvan problemas concretos y que podamos aprovechar nosotros y nuestros amigos.

Tras los experimentos anteriores de Metropolitano Mobile y Sube al Metro de Lima, decidí planear una nueva aplicación pero con los siguientes principios:

  1. Una aplicación específica para Firefox OS, que aprovechase sus recursos pero que a la vez sea accesible vía web.
  2. Una aplicación offline, o que al menos para la mayor parte de sus opciones pueda funcionar sin conexión a Internet.
  3. Una aplicación online, que se integre con otros servicios en Internet sólo en situaciones específicas.
  4. Una aplicación que pueda portarse a otros escenarios con pocos ajustes.

Siendo así, los lineamientos generales fueron:

  • Listar estaciones y rutas de un servicio de transporte (en este caso el Metropolitano de Lima).
  • Mostrar detalles de una estación, como su ubicación y la lista de rutas que la atraviesan.
  • Guardar una Estación Favorita, a manera de acceso directo a los detalles de una estación que visitamos siempre o a la que tenemos que ir pronto.
  • Calcular la Estación más cercana, que a partir de nuestra ubicación actual nos sugiera cuál es la estación de transporte a la que podamos ir.
  • Obtener información de alertas del servicio. En este caso las alertas las proporciona vía Twitter la cuenta oficial del servicio.
  • Mostrar información general del servicio: Como los horarios de funcionamiento, las tarifas y los canales virtuales de atención.

Metropolitano de Lima, la aplicación

La aplicación ya se encuentra disponible en el Firefox Marketplace como Metropolitano de Lima y funciona en dispositivos con Firefox OS. La versión web también está disponible en Metropolitano de Lima, GitHub.

Es así como se ve la aplicación:

Metropolitano de Lima 1 Metropolitano de Lima 2 Metropolitano de Lima 3 Metropolitano de Lima 4 Metropolitano de Lima 5 Metropolitano de Lima 6 Metropolitano de Lima 7

Pero yo no vivo en Lima (y soy desarrollador)

Es momento de recordarles el cuatro principio de la aplicación:

4. Una aplicación que pueda portarse a otros escenarios con pocos ajustes.

Es por ello que la aplicación almacena la información del servicio en arreglos de datos en JavaScript:

js/applicationData.js
var applicationData = {
stations: [
{ /* 0 */ name: “Naranjal”, address: “Av. Túpac Amaru cdra 45 con Av. Chinchaysuyo cdra 1 – Independencia”, coordinatelat: “-11.982013”, coordinatelng: “-77.058663”, },
// more stations here
],
routes: [
{ name: “Regular A”,
directions: [
{ name: “Central » Naranjal”, days: [1,2,3,4,5,6], hours: [“05:40″,”22:55”], typeOfSchedule: “Intervals”, stations: [0,1,2,3,4,5,6,7,8,9,10,11,15,16,17,18], },
// more directions here
] // more routes here
}

Si entendiste que significa el bloque anterior, ¡Felicidades!, ya puedes hacer tu propia versión para un sistema de transporte en tu ciudad, o para una empresa de transporte que recorre varias ciudades en tu región o país.

Más aún, imagina que en lugar de una aplicación de transporte quieres hacer una aplicación de una cadena de comida rápida, o de estaciones de policía, o de simplemente negocios con varios locales. Puedes obviar la sección routes y reutilizar la aplicación para ese negocio.

El código está publicado en GitHub / juaneladio / metropolitano, pero si se te complica mucho puedes bajar el zip desde aquí.

¿Qué sigue?

Por el momento, esperar que termine el flujo de aprobación en el Firefox Marketplace (una vez aprobada, no sólo estará disponible en Firefox OS y en Firefox OS Simulator, sino también en smartphones con Firefox para Android).

En cuanto a la aplicación, ya cumple con los requisitos mínimos, pero si tienes ideas de mejoras puedes proponerlas en la sección Issues de GitHub.