Genbetadev

Lavado de cara del Centro de desarrollo de Microsoft

Juan Quijano — Sun, 19 May 2013 10:00:31 GMT

El centro de desarrollo de Microsoft es uno de los núcleos más importante de información para los desarrolladores en el ecosistema .NET.

Siguiendo la filosofía de Ballmer – “developers, developers, developers” – el volumen de información, documentación, recursos y material que podemos obtener en este Site es, en muchos casos, inabarcable.

Y más teniendo en cuenta que el ecosistema de Microsoft está presente en los sitios en donde nunca te esperarías un Windows.

Dividiendo el site en cuatro bloques principales: Aplicaciones de la Tienda Windows, Internet Explorer, Escritorio y Hardware; se nos va desplegando de forma arbórea más y más documentación para todos los niveles en el que se encuentre el desarrollador.

Pero, como toda página Web, el tiempo no pasa en balde y era necesario una renovación del diseño gráfico y la experiencia de usuario.

Por ello, MS, ha presentado hace unos pocos días esta nueva interfaz basada, obviamente, en Modern UI de Windows 8. Un concepto más limpio y visual del acceso a la información; y con un parco uso de los “efectos especiales” como pueden ser los rollover, las transiciones de imágenes, etc.

Si acaso, el único pero – que tampoco lo es – es que la mayoría de su contenido no ha sido traducido al idioma de Cervantes. Pero eso no debería ser problema para un desarrollador en los tiempos que corren.

Más información | Centro de desarrollo de Microsoft

Las tripas (tecnológicas) de un gigante del porno

Fernando Siles — Sun, 19 May 2013 07:34:22 GMT

The Internet is for porn. Esto ha pasado de número musical de off-broadway a todo un axioma innegociable. Las webs porno más importantes reciben millones de visitas al día y tienen que servir gigas y gigas de vídeo al segundo… y no se caen nunca. Es por eso que saber como lo hacen resulta algo muy interesante y que puede ayudar mucho a todos los que temen morir de éxito. Erik Pickup, CEO de YouPorn, uno de los sitios porno más importantes del mundo (o eso dicen, que yo no me suelo mover por esos parajes…), dio una conferencia la semana pasada y descubrió algunas de sus cartas escondidas.

Quizás lo más importante que comentó el amigo Pickup fue que en 2011 la web fue reescrita al completo en PHP con el framework Symfony y la base de datos NoSQL Redis, sustituyendo la anterior arquitectura Perl + MySQL en la que fue construido el sitio en el ya lejano 2006 y obteniendo unas mejoras de rendimiento del 10%.

Además YouPorn utiliza Nginx como servidor web de alto rendimiento, Varnish para temas de caché (con CDNs externos para las imágenes y ficheros CSS y JS), HAProxy para el balanceo de carga, Syslog-ng para la gestión de los logs (8GB de datos de logs se almacenan a la hora, telita), el cada vez más popular ActiveMQ de Apache y MySQL para algunas tareas de apoyo a Redis.

Como curiosidad sobre como desarrollan en YouPorn, Pickup comenta que utilizan Git y Subversion y que la convivencia no es nada sencilla. Debe ser como Mourinho y Casillas compartiendo pisito de estudiante, me imagino.

Pd1: ah, sí, claro, la charla:

Pd2: la chica de la foto de cabecera del post se llama Riley Steele y es, como no, una célebre pornstar, por si alguien quiere conseguir más información sobre ella y tal.

Vía | High Scalability
Vídeo | confooca en Youtube

PrimeFaces: aplicando temas a nuestro proyecto

calendamaia — Sun, 19 May 2013 04:34:04 GMT

Ya vimos como “instalar” PrimeFaces sobre NetBeans, así que vamos a dar un segundo paso, y empezar a crear alguna página con este cómodo y ligero framework.

En esta ocasión vamos a ver una de las características visuales de PrimeFaces: los temas de apariencia. Usaremos los que ya están disponibles en el framework, aunque tenemos que tener en cuenta que siempre podremos crear temas propios, y así ampliar el conjunto proporcionado.

Creando el proyecto y ejecutándolo

Lo primero que debemos hacer es crear un proyecto, y añadir la biblioteca de PrimeFaces a el, de manera que podamos usarlo en nuestras páginas. Estos pasos ya se vieron en el artículo “PrimeFaces: framework sobre JSF 2.0. Primeros pasos“, con lo cual no los vamos a repetir.

Una vez creado el proyecto escribiremos el código de la página index.xhtml:

Desplegamos el proyecto y vemos el resultado. El aspecto que presenta la página es el siguiente:

He añadido la aplicación de un efecto al texto presentado “Pulsa sobre mí para ver como exploto” para que además podamos ver como se aplican los efectos de JQuery en este framework, para, en este caso, una etiqueta de texto. Así que pulsad sobre el texto para ver el efecto, y cambiad el efecto entre los disponibles en los comentarios que he colocado en la página, para experimentar un poco.

Acto seguido vemos la página de temas disponibles para PrimeFaces y elegimos el que nos guste. Accedemos al repositorio y descargamos el tema elegido. Para nuestro ejemplo nos descargaremos el fichero .jar que contiene todos los temas disponibles:

Añadimos la librería del tema correspondiente al proyecto, o en nuestro caso la librería de todos los temas. Para ello crearemos dentro del directorio WEB-INF una carpeta lib, y dentro de ella copiaremos el fichero .jar que previamente hemos descargado:

Una vez hecho esto, sólo debemos especificar cual de los temas disponibles queremos configurar para nuestro proyecto. Para ello modificamos el fichero web.xml, añadiendo las siguientes líneas:

Si volvemos a desplegar el proyecto y vemos el resultado, veremos cómo se ha aplicado el tema que hemos configurado, cambiando el aspecto de toda la página:

Esta funcionalidad es útil cuando nuestro tema no va a cambiar, y queremos dar un aspecto a la página distinto al que viene por defecto. PrimeFaces nos permite además un cambio de este aspecto “en caliente”, que será el tema que tratemos en el siguiente artículo sobre este framework.

Más información | Temas disponibles para PrimeFaces | Repositorio de temas de PrimeFaces
En GENBETA | PrimeFaces: framework sobre JSF 2.0. Primeros pasos

Referencia rápida de comandos de GIT

Juan Quijano — Sat, 18 May 2013 08:42:39 GMT

Que GIT es el repositorio de código con más éxito entre la comunidad de desarrollo es una realidad que se ha instaurado en los últimos tiempo. Incluso Microsoft ha integrado este repositorio con su herramienta de ALM, TFS Service.

Pero el número de comandos que debemos tener la memoria puede llegar a ser apabullante, y para ayudarnos a tenerlos a mano hoy traigo una imagen en donde tenemos ordenados la mayoría de las acciones que podemos realizar.

Este enorme mapa está organizado en las siguientes categorías:

Secuencia de comandos.
Crear.
Conceptos.
Comando más utilizados.
Resolver conflictos en los Merge.

Pulsa en la imagen para verlo más grande

Espero que te sea de utilidad.

Vía | Git Cheat Sheet en varios tamaños

Glimpse: prueba aplicaciones para iPhone en Chrome

calendamaia — Sat, 18 May 2013 03:31:17 GMT

Arc90 nos trae esta interesante extensión de Chrome que hace que podamos ver, de forma muy rápida, cómo quedaría nuestra aplicación en un teléfono iPhone. Glimpse es un producto pensado para ver los resultados de forma inmediata y ágil.

No se le puede pedir tampoco demasiado, ya que páginas muy complejas (pongamos por ejemplo facebook) fallan, debemos tener muy en cuenta por tanto esta carencia.

¿Cómo se usa?

El funcionamiento de Glimpse es muy sencillo. Una vez instalado (a través de la tienda de Chrome), aparecerá una “G” en la barra de herramientas de Chrome, que nos permitirá acceder con un solo click a un navegador Web, que por defecto cargará la versión del site para móviles:

Sólo tendremos que escribir la URL correspondiente en la caja de texto proporcionada a tal efecto, y rápidamente obtendremos la visualización que tendríamos en un iPhone, y lo haríamos en un navegador no móvil. Sin más complicaciones ni pretensiones.

Arc90 ha publicado este plugin bajo la licencia Apache 2.0, con código abierto, pudiendo acceder al repositorio a través de Github.

Más información | Glimpse en la Chrome Web Store | Arc90

¿Crees que deberían de eliminarse las patentes de software?: la pregunta de la semana

Pedro Gutiérrez — Wed, 15 May 2013 12:01:29 GMT

Tras surgir la noticia de que Nueva Zelanda excluiría de forma explícita el software de su ley de patentes surgió un pequeño debate sobre si era necesario que existiese las patentes de software para poder proteger funciones específicas que realiza un software y poder sacar beneficios de las patentes o por el contrario las patentes son usadas por las grandes compañías de software para frenar la innovación y restringir la competencia, y aquí la pregunta de la semana:

¿Crees que deberían de eliminarse las patentes de software?

Recuerda que para responder, debéis hacerlo desde nuestra sección de Genbeta Dev Respuestas. Los comentarios de este post están cerrados. Gracias.

La semana pasada os preguntábamos ¿Qué lenguaje de programación o tecnología te gustaría aprender en los próximos meses?, y la respuesta es un claro sarcasmo por parte de MiguelPedregosa que dice lo siguiente:

Cobol, claramente es el futuro de la profesión.

Os animamos a todos a participar y recordaros que Genbeta Dev Respuestas está a vuestra disposición para resolver todas las dudas que tengáis.

En Genbeta Dev Respuestas | ¿Crees que deberían de eliminarse las patentes de software?

Google Charts, gráficas vistosas en tu Web

calendamaia — Wed, 15 May 2013 10:01:31 GMT

Cuando en una aplicación Web necesitamos crear algún tipo de gráfico estadístico, o de otro tipo, disponemos de varios frameworks que nos pueden hacer la vida más fácil. Google, como no podía ser de otra manera, nos ofrece su propio framework para este menester: Google Charts.

Aparte de las funcionalidad básica de presentar tablas personalizadas, tenemos otros tipos de gráficos interesantes:

Gráficos de barras

Gráficos de cajas

Candlestick

Gráficos compuestos

Iconos dinámicos

Gráficos de Línea

Mapas

Diagramas circulares

Etc…

Vamos a ver un ejemplo sencillo de presentación de una gráfica en Google Charts, usando los gráficos de barras. Escribiremos un sencillo código con el cual podremos ver el resultado que nos porporciona este producto.

El código completo del ejemplo es el siguiente:

Tras abrir el ejemplo con el navegador nos encontraremos con el gráfico que hemos utilizado, un sencillo gráfico de barras:

Más información | Google Chart
En Genbeta Dev | Introducción al elemento canvas de HTML5 | Polychart.JS, otra opción para tus gráficas Javascript

Manual para sádicos: 16 maneras de torturar a un desarrollador

Fernando Siles — Wed, 15 May 2013 06:01:31 GMT

El mejor activo o recurso de una empresa de tecnología son sus desarrolladores, aquellos que hacen que la magia ocurra. Por lo tanto hay que tratarlos bien, que estén a gusto para que el código fluya y detrás de él, el dinero… sin embargo muchas empresas no se han enterado todavía del tema y no cejan en su empeño de poner trabas a sus desarrolladores. Muchas veces estas trabas son casi torturas chinas y la gente de InfoWorld ha hecho una lista con 16 maneras de torturar a un desarrollador que os reproducimos a continuación en el idioma de Constatino Romero (DEP) y con anotaciones varias:

Seguridad excesiva. Sí, el no poder instalar los programas que necesitamos o tener capado Internet (o Spotify) no es la mejor manera de hacer la experiencia de desarrollo más dulce.
Obligación de usar herramientas horribles. Como tener que programar en Dreamweaver como IDE, por ejemplo.
El equipo de mantenimiento. Desde luego que los nuevos desarrollos animan a darlo todo mucho más que tener que encargarse de mantenimientos de proyectos anteriores.
Forzar el uso de Windows. O de Linux. O de Mac. Que cada uno utilice con lo que esté más cómodo y sea más productivo, ¿no?
Utilizar librerías cerradas. De verdad, hay sitios donde en 2013 sigue estando mal visto utilizar librerías de terceros.
WebSphere. Sólo de leer este nombre ya me entran escalofríos.
Todo es urgente, todo es para ayer. Y realmente nada es tan urgente, ni el fin del mundo.
¡Ah, los buenos viejos tiempos!. Nunca quedarse en el pasado, siempre hay que estar al filo de la tecnología
Tareas repetitivas solamente. Un poquito de retos nuevos de vez en cuando es la salsa del desarrollo, no nos engañemos
Las eternas máquinas virtuales. Sí, ahorras mucho en hardware pero todo se vuelve mucho más lento y engorroso.
La reunión de SCRUM interminable. Esas reuniones mañaneras que deberían durar 5 minutos y que te ocupan media mañana. De ágiles tienen poco, la verdad. Concreción jóvenes, concreción.
La excesiva formalidad. Pero ojo, tampoco nos pasemos y vayamos en bañador y chancletas. La virtud está en el término medio, ya lo decía Aristóteles.
Gestionar proyectos como crisis con rehenes. Un poquito de tranquilidad señores, que esto no es a vida y muerte
Nosotros somos los que hacemos las preguntas aquí. El método de policíaco de Hollywood mejor no, que haya comunicación bidireccional, por favor.
El demonio está en los detalles. “Oye, genial pero falta un detallito..”. Si ya, detallito. Seguro.
No importa como funcione… pero que funcione. Primar la calidad sobre la cantidad y las prisas, esa quimera.

Seguro que a vosotros se os ocurren otras muchas torturas (más allá de poner en bucle Bustamante en el hilo musical) y para ello están los comentarios.

Vía | InfoWorld

ICEfaces 3.3 ya disponible

calendamaia — Wed, 15 May 2013 04:11:29 GMT

Hace unos días anunciábamos la salida de ICEpdf, y hoy nos acercamos al producto estrella de ICEsoft: ICEfaces. Es una plataforma que nos facilita mucho el trabajo bajo las plataformas para las que ha sido diseñado: JSF2 + Java EE. La licencia es Open Source.

ICEfaces extiende y completa este estándar JavaServer Faces 2, y proporcionando un amplio soporte para Ajax, aparte de un gran abanico de componentes:

Los nuevos componentes ACE (ICEfaces Advanced Components).
Componentes ICE ideales para navegadores antiguos.
Componentes empresariales (EE)
Etc…

Como novedades podemos enumerar las siguientes:

Nuevos componentes ACE (ICEfaces Advanced Components): ace:comboBox, ace:gMapEvent, ace:message/ace:messages, ace:selectMenu, h:selectOneMenu,
ace:simpleSelectOneMenu y ace:themeSelect.

Revisión de los componentes y nuevas características.

Actualizaciones de las librerías: Mojarra JSF en este caso a la versión 2.1.19, y la librería MyFaces JSF a la versión 2.1.10.

Compatibilidad con los siguientes navegadores: Chrome 26, Firefox 10.02 – 20, IE 6, 7, 8, 9, 10 y Safari 6.

También para navegadores móviles: Apple iOS Safari, Google Android Chrome, RIM BlackBerry OS6 WebKit Browser.

Compatible con los siguientes servidores de aplicaciones: Apache Tomcat 6 y 7, Oracle Glassfish v3.0 y 3.1, RedHat JBoss AS 5, 6 y 7.

Compatible con los siguientes portales como contenedores: Apache Pluto 2.0.3, Liferay Portal 5 y 6.

Más información | ICESOFT
En Genbetadev | ICEpdf 5.0

PrimeFaces: framework sobre JSF 2.0. Primeros pasos.

calendamaia — Tue, 14 May 2013 13:25:21 GMT

Cuando utilizas la tecnología JSF para la vista de una aplicación Web, no puedes menos que sentir que te faltan componentes más potentes, y con más versatilidad. Para suplir estas carencias existen varias empresas que compiten con distintos frameworks, y que nos hacen la vida más fácil. Hoy presentamos a uno de ellos que nos viene de tierras turcas: PrimeFaces.

El punto fuerte de PrimeFaces es la sencillez de instalación y lo poco pesado que es. El mantenerlo liviano, sin complicaciones a la hora de instalarlo, es decir, sin dependencias ni configuraciones, hace que podamos estar usándolo en unos pocos segundos. Veremos en este artículo cómo hacerlo, y nos introduciremos en uno de los frameworks más populares en el mundo JSF.

Algunas características de PrimeFaces

Enumero algunas de las cosas que nos ofrece PrimeFaces son:

Un interesante conjunto de componentes (editor HTML, autocompletado, gráficas,…)

Soporte para Ajax, basándose en el estándar JSF 2.0 Ajax API

Sin dependencias, ni configuraciones, además de ser muy ligero (1802Kb en su versión 3.5)

Soporte para interfaces de usuario sobre dispositivos móviles, nos provee de un kit para este menester.

Múltiples temas de apaciencia, listos para usar.

La documentación, para mi forma de entender, está muy currada y organizadita

Amplia difusión del framework, con lo cual existe una comunidad que respalda al proyecto.

Podría seguir enumerando cosas, pero para mi estas son las más importantes.

Creando un proyecto Web con JSF

Os voy a mostrar como se hace con Netbeans, pero estas instrucciones son extensibles al software que utilicéis para escribir y desarrollar vuestras aplicaciones con Java.

Lo primero que haremos es crear un nuevo proyecto Web:

Pulsamos “Next” y elegimos el servidor en el que queramos que se despliegue la aplicación, en mi caso tengo Glassfish 3.1.2 instalado:

De nuevo “Next” y le decimos que queremos usar JavaServer Faces como framework para la aplicación Web que vamos a crear:

Pulsando “Finish” tendremos el proyecto creado con la siguiente estructura:

Configurando el proyecto para usar PrimeFaces

Como indiqué en las características de PrimeFaces, la instalación es nula, y lo vamos a ver ahora, veremos que con añadir la librería al proyecto, y añadiendo una línea en el código de la página ya lo tendremos operativo.

Para añadir la librería al proyecto, cada uno puede operar como desee, yo voy a crear una librería global, ya que así luego ya la tengo creada para sucesivos proyectos. Pero insisto, cada uno debe hacerlo como sea su costumbre, o la necesidad de cada caso.

Para crear la librería global nos vamos a la pestaña de proyecto (“Projects” en la zona derecha de la pantalla), y pulsamos con el botón derecho sobre el nombre del proyecto, eligiendo las propiedades de este (“Properties”), accederemos a la siguiente pantalla, en la que tendremos que elegir la categoría “Libraries”:

Pulsamos en añadir librería (“Add library”), le damos el nombre deseado a la librería que vamos a crear. Yo le he dado el nombre “Genbetadev” pero sería más lógico crearla con el nombre “PrimeFaces3.5” por ejemplo:

Una vez definida, le añadimos el fichero .jar correspondiente:

Pulsamos en OK, y ya tenemos “instalado” PrimeFaces para poder usarlo en nuestro proyecto. Lo escribo entre comillas, porque como veis, no hemos tenido que configurar nada de nada, simplemente añadir la librería, lo cual es el colmo de la sencillez.

Probando que funciona en una página

Ahora editaremos la página index.xhtml que se ha creado por defecto en el proyecto y añadiremos la siguiente línea en la cabecera de esta:

Acto seguido añadimos alguno de los componentes de PrimeFaces, desplegamos el proyecto y vemos el resultado:

Con esto vemos que PrimeFaces está funcionando, y estamos listos para usar cualquiera de los componentes que nos ofrece. Iremos profundizando en sucesivos artículos en este framework.

El Gobierno de Nueva Zelanda planta cara a las patentes de software

Pedro Gutiérrez — Tue, 14 May 2013 05:01:29 GMT

Las patentes son un conjunto de derechos que defienden la exclusividad de algo a su “inventor” y limita que sea explotado por otras personas industrialmente y en la mayoría del mundo teóricamente el software no sería patentable, pero no es así y este hecho limita la innovación y la competencia.

Para eliminar las restricciones que existen al haber patentes de software el gobierno neozelandés ha propuesto un proyecto de ley que excluya explícitamente el software como algo que puede patentarse.

Actualmente las patentes proejen a las invenciones o a los procesos de fabricación, y aunque aquí prácticamente no entraría el software el proyecto de ley establecerá la siguiente premisa:

“Un programa informático no es una invención ni tampoco una forma de fabricación para los propósitos de esta Ley”

Esta medida ha sido recibida con los brazos abiertos por todo el sector IT neozelandés, donde destacan las palabras de varias empresas e instituciones, que podrían usarse como argumento para excluir totalmente al software de las leyes de patentes de cualquier país.

Internet New Zealand, la institución gestora del dominio .nz:

“Terminará con años de discusión entre los desarrolladores de software, usuarios de las TIC y pesos pesados multinacionales que siempre denuncian supuestas violaciones de sus patentes de software.”

Orion Health, la mayor empresa del país exportadora de software:

“Es posible que exista una mejora en el software que no puede ponerse en marcha porque alguien tiene la patente. En general, las patentes de software son contraproducentes porque se utilizan para frenar la innovación.”

Vía | Barra Punto
Más información | Forbes

El gobierno de Estados Unidos: el principal comprador de malware a nivel mundial

Pedro Gutiérrez — Sun, 12 May 2013 06:29:28 GMT

La ciberseguridad es un tema que preocupa a los gobiernos, en Europa recientemente se ha aprobado la creación de un equipo que se encargará de mejorar la ciberseguridad a nivel europeo con el fin de prevenir el ciberterrorismo, pero la noticia estrella salta desde Reuters, que han creado un informe a partir de datos proporcionados por ex-asesores en ciberseguridad de la Casa Blanca, que revelan que el gobierno de Estados Unidos es el principal comprador de malware a nivel mundial.

Entre todo el informe lo que más me ha llamado la atención es el trabajo de Richard Clarke (uno de los asesores) que según sus palabras consiste en lo siguiente:

Mi trabajo se basaba en tener 25 zero-days en un pen drive preparados para ser usados.

Con todas las noticias que hay hoy en día sobre como los gobiernos actúan ante la ciberdelincuencia no es de extrañar que como medida de defensa tengan a equipos de hackers y se hagan con exploits para alertar a las compañías de software y que puedan solventarlo, pero el hecho revelado por Howard Schmidt y Richard Clarke es que Estados Unidos está dando un mal uso a sus recursos, pasando a la ofensiva y dejando a los ciudadanos y a las empresas desprotegidas al explotar vulnerabilidades críticas que aún no han sido reveladas por los proveedores de software.

Estados Unidos, según la información de Reuters, pagaba por los exploits entre 50.000 y 100.000 dólares y lo preparaba para poderse usar por cualquier país, como es el caso tan mediático de Stuxnet donde colaboró el estado soberano con Israel cuando decidieron pasar a la “ofensiva” contra una central nuclear iraní.

Y por supuesto, esto tiene un gran punto negativo y es que Estados Unidos con esta acción está haciendo florecer aún más si cabe el lucrativo negocio del malware y avivando las posibilidades de una ciberguerra, aunque ellos estarán preparados.

Vía | The Verge
Más información | Reuters

Vivir y trabajar en Alibaba

Fernando Siles — Sat, 11 May 2013 09:24:35 GMT

Recuperamos una de las secciones clásicas de este nuestro/vuestro blog, la de ‘Vivir y trabajar en…’, donde visitamos las oficinas de las más importantes empresas tecnológicas para, no nos engañemos, nos muramos de envidia todos juntos. Normalmente hemos cogido el petate para ir a los Estados Unidos (y la mayoría de las veces a la soleada California) pero hoy el puente aéreo lo hacemos hasta la lejana China, donde se encuentran los headquarters de Alibaba.

Y no, no hablamos de la cueva de Ali Baba y sus cuarenta ladrones (básicamente porque esa debe andar por Irak o Iran) sino de las suntuosas instalaciones del gigante amarillo del comercio electrónico, el único que hace que la frente de la todopoderosa Amazon se perle de sudor, en la imperial ciudad de Hangzhou, a las orillas del río Yangtse.

Buena parte de los más de 24000 empleados de la empresa (un buen pico de ellos desarrolladores e ingenieros, of course) trabajan en un futurista campus diseñado por la firma australiana Hassell y que, además de todas las comodidades que se le presuponen a unas instalaciones de este tipo, cuenta con supermercados, gimnasios, tiendas de regalos o incluso un Starbucks (que eso de las Nespresso en la cocina es de pobres).

La media de edad del campus es de 28-29 años y hay paridad de hombres y mujeres. No se, si el chino mandarín no es requisito imprescindible (yo es que sólo controlo cantonés), lo mismo no sería mala idea empezar a mandar currículums a Alibaba, ¿no?

Vía y vídeo | WSJ
En Genbeta Dev | Vivir y trabajar en…

Publicar aplicaciones en el Marketplace para Firefox OS y demás plataformas: gratis y fácil

Pedro Gutiérrez — Fri, 10 May 2013 05:01:26 GMT

La Fundación Mozilla ha dejado claro desde el principio con Firefox OS que harían lo posible para hacer un gran ecosistema y no querían lucrarse con ello, como bien demuestran permitiendo enviar de forma gratuita a cualquier persona una aplicación al Marketplace (a diferencia de las tiendas de otros sistemas operativos móviles).

Tras ver como desarrollar una app para este nuevo sistema móvil basado en HTML5 y como hacer las aplicaciones instalables sin pasar por el Marketplace toca ver como es de fácil subir nuestra propia app.

Validar la aplicación

Lo primero que debemos de hacer cuando hemos terminado la aplicación es validar el archivo manifest.webapp, ya sea mediante la herramienta de validación del Marketplace o con la reciente versión 3.0 del simulador de Firefox OS que verifica las aplicaciones que instalamos en el.

Mandar la aplicación

Para mandar nuestra aplicación tenemos que ir a la zona de desarrolladores del Marketplace y acceder a la sección de enviar una aplicación (teniendo una cuenta de Mozilla Persona, del que ya comentamos un poco su funcionamiento).

La primera opción es la del tipo de dispositivo donde distribuiremos nuestra app, pudiendo elegir entre Firefox OS, Firefox para Android (diferenciados por Smartphone y Tablet) y por último en Firefox de escritorio y poder distribuir nuestra aplicación en Windows, Linux y Mac. Tras esta elección podemos especificar la URL del archivo manifest.webapp o directamente subir un archivo empaquetado para que sea validado y nos den el visto bueno al manifiesto de la aplicación.

Tras este trámite tendremos que dar más detalles sobre la aplicación, como hacer un resumen de su funcionamiento, enmarcarlo en alguna categoría, exponer nuestra política de privacidad y algunos datos más.

Parte interna del Marketplace

Tras haber enviado nuestra primera aplicación nos encontraremos con la lista de aplicaciones enviadas (estén aceptadas o no), donde podremos realizar cambios en sus datos, que hemos introducido anteriormente y además podremos gestionar varias cosas más.

Administrar miembros del equipo: podemos añadir a cualquier persona y puede tener el rol de desarrollador (pudiendo modificar cualquier dato de la app menos poder añadir o quitar usuarios del equipo), visualizador (que puede ver la información de la aplicación) o ~~asistencia~~ (que puede ver la configuración de la aplicación y gestionar los reembolso), sin olvidar al propietario que puede gestionar todos los aspectos de la app.
Administrar la compatibilidad: podemos cambiar las plataformas donde poder descargar la aplicación y cambiar los países donde se distribuirá (actualmente solo permite a unos cuantos países hispanohablantes, probablemente gracias a la influencia de Telefónica y Estados Unidos y Polonia).
Estadísticas: también tenemos un apartado donde ver las estadísticas de las aplicaciones.

La imagen anterior es del sistema interno del Marketplace, que los chicos de la comunidad de Mozilla Hispano me han enviado amablemente, ya que la aplicación que hemos analizado su desarrollo en estos artículos (la del test de vibración) está pendiente de ser aprobada.

Tiempo de tramitación

Desde Mozilla nos comentan que los tiempos de aprobación de las aplicaciones que no requieren permisos (es decir, no son más que una página web) tienen poco tiempo de demora, pero con las aplicaciones que solicitan permisos especiales se analizan exhaustivamente para evitar malos usos por parte de los desarrolladores.

En Genbeta Dev | Desarrollo en Firefox OS
Más información | Developer Hub – Firefox Marketplace

Nueva plataforma de desarrollo mobile: Nokia Asha

Juan Quijano — Thu, 09 May 2013 16:00:17 GMT

Nokia acaba de realizar un movimiento estratégico muy interesante al presentar un nuevo móvil de gama muy económica: el Asha 501.

Un pequeño smartphone que es capaz de aguantar la batería más de 40 días, y en el que lo más interesante, desde el punto de vista de desarrollo, es la incorporación de la nueva plataforma de software Nokia Asha, la cual se ha construido sobre la tecnología de las Series 40.

Así se incluye en la plataforma una nueva VM de Orange – el desarrollo se sigue realizando en J2ME; un nuevo Asha UI; el API de Mobile Internationalization (JSR-238); y APIs específicos de Nokia para notificaciones, selección de archivos, escalado de imágenes, estado de la red, contactos y acceso a la configuración del teléfono.

Con respecto a la parte de Web Apps, se usa Gecko como plataforma de rendering, nuevos APIs de UI, captura de fotos y videos.

Puesto en contacto con un representante de Nokia España, ha comentado que la plataforma ha sido creada para poder ofrecer a los usuarios una experiencia de calidad en Smartphone por debajo de los 100$, y facilitar a los desarrolladores una plataforma para crear aplicaciones con un rendimiento óptimo sobre estos teléfonos.

La experiencia de usuario que ofrece el teléfono ha sido rediseñada para pantallas de 3” y el UI usa la navegación basada en el concepto de swipe – arrastrar las pantallas con el dedo para pasar de unas a otras.

El teléfono estará disponible a partir de Junio en 90 países, de momento no se han especificado cuales son. Así que habrá que esperar para averiguar si España está en esta lista de países. Oscar Gutierrez Isiegas, DX Breadth Manager -Spain

Preguntado de la posible competencia con modelos de la gama de entrada de Lumia, ha comentado que el Asha 501 y la plataforma de desarrollo están muy enfocados a smartphones de bajo precio con lo que no es competencia directa con el Nokia 520, que está un punto por encima.

En resumen, una nueva tecnología de desarrollo para divertirnos aprendiendo.

Más información | Nokia developer Asha
En Xataka | Nokia Asha 501
En Xatakamovil | Nokia Asha 501, toda la información

La tercera actualización de Visual Studio 2012 entra en Release Candidate

Juan Quijano — Wed, 08 May 2013 14:01:33 GMT

A la chita callando Visual Studio 2012, el IDE por excelencia del mundo .NET está a punto de ser nuevamente actualizado al entrar en el modo Release Candidate su tercer update, valga la redundancia multilenguaje.

Esto significa que esta versión de la actualización es una pre-release que no sufrirá más que pequeños cambios de última hora. Y que podemos instalar, los más valientes, en nuestro IDE.

Ciertamente en este update vamos a encontrar, en una inmensa mayoría, corrección de errores y mejoras de lo ya existente. Ósea que no va a haber nada espectacularmente nuevo como fue en su momento el soporte de TFS al uso de Git, o cosas similares.

Y específicamente las correcciones son más abundantes, mucho más, justamente con el servidor ALM de Microsoft: el Team Foundation. Tanto en sus labores de planificación, seguimiento y gestión de proyectos, como en su vertiente de repositorio de código.

También se solucionan problemas en el depurador, en el IDE, en los formularios Winform, en C++ y F#, en el framework de pruebas, en la biblioteca portátil y en las herramientas Web.
Y como toda mejora reseñable está que la nueva definición de compilación de la interfaz de usuario para la generación de integración continua (CI) en proyectos de equipo basado en Git (copia literal).

En mi máquina ya está instalada; en el TFS de producción prefiero esperar a la versión final.

Más información | Descarga del Visual Sutdio 2012 Update 3 RC, Descripción de la actualización

Versión para tablets de Genbeta Dev

Txema Rodríguez — Wed, 08 May 2013 11:47:59 GMT

Presentamos la nueva versión para tablets de Genbeta Dev en la que llevamos trabajando desde hace tiempo para las publicaciones de Weblogs SL. Podéis acceder desde t.genbetadev.com para disfrutar de una nueva experiencia de lectura adaptada a este tipo de dispositivos que se suman a la habitual versión web de escritorio y a la versión para móviles.

Al entrar en la versión de tablets encontraréis un mosaico con los artículos más recientes. Podéis desplazaros horizontalmente hacia la izquierda para consultar de forma cronológica cada uno de los posts publicados. Además, en la parte lateral tenéis de forma accesible los posts destacados.

En la página del articulo hemos querido simplificar eliminando distracciones en los laterales y centrarnos en el contenido. Se pueden usar las funcionalidades habituales de compartir en redes sociales o leer los comentarios. De momento, la posibilidad de comentar no está disponible.

Por ahora, esta nueva versión para tablets está optimizada para navegadores webkit, como Safari en iOS y Chrome en Android. Si veis cualquier fallo o tenéis alguna sugerencia, no dudéis en contactar con nosotros a través del formulario de contacto.

Recordar que para acceder debéis hacerlo desde la dirección t.genbetadev.com, de momento no se redirige automáticamente al entrar a Genbeta Dev desde un dispositivo tablet.

Enlace | Versión de tablets Genbeta Dev

Hacer aplicaciones web instalables en Firefox OS y Android

Pedro Gutiérrez — Wed, 08 May 2013 05:05:33 GMT

Tras entrar de lleno en las bases del desarrollo de Firefox OS toca convertir las aplicaciones web en aplicaciones instalables para Firefox OS, Firefox para Android o Firefox de escritorio.

Y es que estas aplicaciones también se pueden instalar en nuestro móvil con Android o nuestro Escritorio igual que lo hacemos en Firefox OS, simplemente tenemos que poner en uso el manifest.webapp y la API para la instalación de aplicaciones web de Mozilla.

API para la instalación

Mozilla ha creado una API para la instalación de aplicaciones web que aún no es estándar pero podemos usar perfectamente con Firefox, que es lo importante en este caso.
En la API disponemos de cuatro funciones que nos sirven leer los datos de la aplicación instalada que está en uso, la información de las aplicaciones instaladas desde el Marketplace y un par de funciones para instalar una aplicación que está alojada en un servidor web o una que está empaquetada (en formato .zip).

Instalar la aplicación

Tenemos dos funciones para la instalación, pero ambas actúan igual, tras ser llamadas se valida la aplicación (examinando el manifest.webapp, asegurando que estén los datos correctos y los archivos relacionados presentes y comprueba que se tiene acceso para instalar la aplicación), posteriormente se le pide permiso al usuario para instalar la aplicación y por último se instala y genera los iconos para acceder a la app (esto pasa en todas las plataformas).

Podemos acceder a la API con window.navigator.mozApps, donde encontramos la función install(), que nos permite establecer la URL del manifest.webapp y establecer uno o más recibos de compra (en el caso de ser una aplicación de pago).

var instalar = window.navigator.mozApps.install(url, [recibos de aplicaciones de pago]);

Tras hacer la instalación podemos comprobar si se ha realizado correctamente o no con el evento onsuccess u onerror que genera la petición de instalación.

function install(){ var instalar = window.navigator.mozApps.install("http://vibracion.firefoxos.xitrus.es/manifest.webapp") instalar.onsuccess = function () { alert('Instalado correctamente.') } instalar.onerror = function () { alert('Error en la instalación ('+this.error.name+')') } }

Otra opción que tenemos es usar la función installPackage() que funciona igual que la anterior función pero en la URL debemos de establecer un paquete .zip con el manifest.webapp y todos los archivos de la aplicación web.

var instalar = window.navigator.mozApps.installPackage(url);

Saber la información de la aplicación

También puede que nos haga falta saber datos del manifiesto en el uso de la aplicación, por eso disponemos de la función getSelf() que nos devuelve, si no se produce algún error, todo el objeto JSON del manifest.webapp.

En este ejemplo usaremos el supuesto manifest.webapp del primer artículo sobre como desarrollar para Firefox OS.

var appInfo = window.navigator.mozApps.getSelf(); //Accedemos al manifest.webapp alert(appInfo.manifest.name) // “Vibración” alert(appInfo.manifest.developer.name) // “Pedro Gutiérrez”

Resumen

Hacer las aplicaciones instalables no es complicado, pero tenemos que tener en cuenta que al instalarla no aseguramos que se pueda ver sin conexión a Internet, simplemente se crea el acceso directo y se otorga permisos si es necesario a la aplicación, por lo que deberíamos de usar la caché de HTML5 para que estas páginas se guardasen localmente.

En Genbeta Dev | Desarrollo en Firefox OS
Más información | Mozilla

Lanzado SFML 2.0

adrigm — Tue, 07 May 2013 05:00:20 GMT

Después de más de un año de Release Candidate por fin se ha lanzado la versión estable de SFML 2.0. Una biblioteca escrita en C++ para el desarrollo de aplicaciones multimedia enfocada al desarrollo de videojuegos.

Las novedades de esta nueva versión ya las hemos visto en Genbeta Dev hace poco cuando dedicamos una serie de artículos a hablar de ella basándonos en su versión en desarrollo. Todo visto en los artículos previos en Genbeta Dev son válidos en la versión definitiva.

Como novedades podemos ver que se ha lanzado una nueva web y se le ha dado un cambio de imagen con un nuevo logo para la biblioteca que puedes ver como imagen de este artículo. Además se ha completado la sección de tutoriales para usar fácilmente la biblioteca desde el principio. Ya no hay excusas para producir videojuegos con SFML 2.0.

Más información | sitio oficial

¿Qué lenguaje de programación o tecnología te gustaría aprender en los próximos meses?: la pregunta de la semana

Txema Rodríguez — Sun, 05 May 2013 11:42:58 GMT

Como programadores no paramos de aprender nuevas tecnologías que surgen, además de ir saltando de lenguajes de programación según las circunstancia. En ese afán constante de aprendizaje de nuevos lenguajes y tecnologías nos ponemos retos para ir aumentando nuestras habilidades como desarrolladores.

Por eso, nuestra pregunta de la semana en Genbeta Dev va relacionada con este afán de aprendizaje.

¿Qué lenguaje de programación o tecnología te gustaría aprender en los próximos meses?

Recuerda que para responder, debéis hacerlo desde nuestra sección de Genbeta Dev Respuestas. Los comentarios de este post están cerrados. Gracias

La semana pasada os preguntábamos ¿En qué te gustaría trabajar como desarrollador si pudieras elegir?. Entre las respuestas más votadas se encuentra la de nuestro lector delasweb. A continuación reproducimos su respuesta:

Pues la verdad es que mi ilusión es poder trabajar 100% para mi, ahora mismo soy autónomo pero evidentemente me dedico a hacer proyectos para mis clientes. Lo que me gustaría es poder hacer mis propios proyectos que por cierto tengo un buen montón y en unos meses seguramente podré cumplir esa “ilusión” y empezar a hacer una buena criba entre todas mis ideas para poder empezar a desarrollar alguna de ellas.

Os animamos a todos a participar y recordaros que Genbeta Dev Respuestas está a vuestra disposición para resolver todas la dudas que tengáis.

En Genbeta Dev | ¿Qué lenguaje de programación o tecnología te gustaría aprender en los próximos meses?

Turbulenz, el impresionante SDK de videojuegos HTML5 libera su código

Pedro Gutiérrez — Sun, 05 May 2013 08:04:18 GMT

Turbulenz es una plataforma de creación de videojuegos basada en HTML5 que funciona principalmente con Canvas, WebGL y JavaScript, su motor es potentísimo o eso es lo que demuestra al usar algún juego o alguna de las pruebas que podemos hacer con el, viendo como genera entornos 3D completos, controlando todo lo necesario en un videojuego a la perfección (como son las cámaras, luces, sombras, generación de partículas…) y con un rendimiento impecable.

Pero lo bueno, como indican en Xataka Móvil es que han liberado el código del motor bajo licencia MIT para darlo a conocer y recibir un mayor apoyo de los desarrolladores, además en el momento justo cuando más revuelo está formando HTML5, ahora que está dejando de ser el futuro y es el hoy, cuando ya vemos HTML5 como la base de un sistema como es Firefox OS, y es que como dice el director de Turbulenz:

HTM5 ya no solo sirve para demos técnicas. Con el motor Turbulenz se están desarrollando una nueva generación de contenidos de alta calidad disponibles de forma instantánea online

Turbulenze ha liberado el código del motor (solo) en GitHub y disponemos en su web oficial de el SDK para Windows, Mac y Linux y el motor para Windows y Mac, además disponemos de una amplia documentación, aunque solo en inglés. El motor es bastante completo y podemos probar sus características generales con unas demostraciones básicas (sin entrar a los juegos, que están completamente en funcionamiento y hay por ejemplo uno llamado Polycraft que es un juego 3D con el que podemos jugar con otros usuarios simultáneamente y además tiene unos buenos efectos de sonido, demostrando parte de ese potencial que tiene).

Turbulenze además no solo se basa en el SDK, sino que te proporciona una plataforma completa que incluye el motor de juego, una zona en la web para probar las aplicaciones y una plataforma de publicación y monetización de las aplicaciones y todo de forma gratuita (menos si Turbulenz distribuye la aplicación y proporciona el entorno de juego social de su propia web, donde se llevará un 30% de las ventas).

Vía | Xataka Móvil
Más información | Turbulenz

Volvamos a las trincheras, volvamos a escribir código en papel... o no

Fernando Siles — Sun, 05 May 2013 06:00:18 GMT

La evolución, a veces, conduce a la involución. De los editores de código simples se pasaron a cada vez más mastodónticos IDEs con cientos de miles de opciones (o quizás no tantas, pero soy andaluz, ¿qué queréis?) y ahora, los hard-programmers buscan de nuevo editores simples, lejos de complejidades. Quizás, por lo tanto, volvamos en un momento dado a programar con lápiz y papel. ¿A qué viene esto? Pues a una de las historias (e imágenes) de la semana: el código manuscrito que escribió un programador en 1985 y la fascinante historia que lleva detrás.

El programador en cuestión se llama John Graham-Cumming y la historia ha sido puesta en el ojo público por la gente de Gizmodo. El bueno de Graham-Cumming trabajaba como becario en una compañía de maquinaria en aquella época y tenía que programar el funcionamiento de una maquina etiquetadora a cuyo interfaz sólo tenía acceso a través de un teclado hexadecimal y un minúsculo display. Muchas libretas y mucha tinta para conseguir su objetivo, seguro. Una locura a ojos de un desarrollador web circa 2013.

Sin duda una de las imágenes de la semana y una lectura interesante, que a servidor le rememora aquellas clases de Microcomputadores y similares en la facultad, para este domingo, por fin, primaveral.

Vía | Gizmodo (a través de un tuit de Whiskito)
Imagen | John Graham-Cumming

Java 8 se retrasa a 2014

Txema Rodríguez — Fri, 03 May 2013 15:54:09 GMT

Los incesantes problemas de seguridad que ha sufrido Java en estos últimos meses ha provocado el retraso de Java 8 hasta 2014. Llevábamos tiempo escuchando como fecha posible de lanzamiento Septiembre de este año, pero el retraso sufrido en la anterior milestone ha provocado que Mark Reinhold, jefe de arquitectura del Java Plataform Group, haya tenido que anunciar públicamente el retraso de Java 8.

Los motivos están bastante claros. Prácticamente todo el equipo de desarrollo ha sufrido una modificación de sus tareas enfocándose en solventar los bugs de seguridad de Java 7. El objetivo actual de Oracle es lavar la mala imagen que Java ha obtenido en estos últimos meses, por lo que además de solucionar fallos han puesto el foco en pulir todo en lo que están trabajando en Java 8 para que su lanzamiento no tenga ningún percance.

Mientras que el proyecto Lambda continua como principal características para Java 8, se ha demostrado que se requiere aún mucho más esfuerzo del calculado en un principio. Aspira a dar soporte en un entorno multinúcleo agregando las características de Clousures y funciones anónimas, ampliamente usadas en programación funcional.

De acuerdo con el nuevo calendario, la preview del JDK para desarrolladores llegaría en Septiembre y en Enero la versión Beta. Por lo que Java 8 final debería estar en primavera sobre la fecha del 18 de Marzo de 2014. Mientras tanto mirando al futuro Java 9 no llegará hasta el 2016 con dos años de desarrollo entre versiones.

Más información | JDK 8 Project
Vía | JavaHispano
En Genbeta Dev | Con la próxima actualización de Java tocará firmar los Applets

Netbeans: formatear variables para el debugger

calendamaia — Fri, 03 May 2013 09:00:15 GMT

Una de las cosas que más usamos en la programación diaria, es el debugger, que nos permite encontrar dónde están los errores en el código. Cuando tenemos estructuras de datos complejas, y queremos navegar por ejemplo por una lista de ellas, la información del debug se nos muestra en forma de árbol, en el cual hay que ir desplegando las distintas ramas. Esto cuando vamos con prisa, al final resulta muy tedioso.

Hoy vamos a ver una funcionalidad de Netbeans, que nos puede ahorrar mucho tiempo, aunque en principio pueda parecer una cosa trivial, en el día a día, resulta muy útil. Os presento el formateo de variables para el debugger de Netbeans.

Vamos a exponer un ejemplo muy sencillo, que nos muestre la funcionalidad, sin que nos perdamos en complejidades de código, por lo cual lo mejor es elegir una sencilla aplicación java en formato línea de comandos.

El código del ejemplo

Vamos a tener dos clases: por un lado la clase AplicacionJavaFormateoVariables.java y donde almacenaremos los datos DatosBean.java, que no será más que una clase con dos propiedades y sus correspondientes métodos Getters y Setters:

Definiendo el punto de ruptura

Para el ejemplo, pondremos un punto de ruptura en el fichero AplicaciónJavaFormateoVariables.java en su línea 13, que corresponde a una línea con un System.out.println, que no sirve para nada más que eso, como sitio donde poner el punto ruptura, ya que a esa altura ya estará rellena la lista, que es la que vamos a usar para ver esta funcionalidad.

Arrancando la aplicación

Si nos situamos en la ventana de proyectos, y sobre el nombre de la aplicación pulsamos el botón derecho, podremos arrancarla en modo debug. Hagámoslo y veamos que ocurre:

Al arrancar la aplicación, en modo debug, se parará en el punto de ruptura que previamente le habíamos definido, y si vamos a la pestaña de variables veremos lo siguiente:

Observando lo que nos pone, vemos que para obtener el valor que nos interesa, tenemos que abrir uno a uno los elementos de la lista, ya que el campo value “#83”, no es que nos aclare mucho. En nuestro ejemplo, el Bean sólo tiene dos propiedades, pero imagina un Bean más real lleno de propiedades a las que queremos acceder.

Personalizando la salida de las variables en el debug

Lo que vamos a hacer es personalizar esta salida en la ventana de variables, para que nos muestre lo que queremos de una forma más rápida, y sólo lo que nos interese en un momento dado.

Para ello nos vamos a ir a Tools > Options > Java (pestaña) > Java Debugger (pestaña), lo cual nos mostrará la siguiente pantalla:

Una vez en esta pantalla, pulsaremos en “Variable formatters” (tal y como se muestra en la anterior imagen), y después sobre el botón “Add…”, para añadir una nuevo variable formatter, escribimos el nombre que queremos darle al formateador, el nombre del Bean, incluida la ruta completa de su paquete. Y lo más importante, dónde pone “Value formatted as a result of code snippet” escribimos el método del Bean que nos devolverá el valor que queramos representar, en mi caso he utilizado el método toString(), que previamente había escrito dentro del Bean:

Sólo resta pulsar el botón “OK” y ver que resultados hemos obtenido con todo esto.

Obteniendo los resultados

Para ello volvemos a ejecutar la aplicación en modo debug, y volvemos a ver que valores tiene la lista en la pestaña de variables:

Como se puede observar, en el campo “value” ahora nos aparece el valor devuelto por el método toString(), que habíamos indicado en el formateador, y que nos da la información que deseábamos sin tener que deplegar cada elemento de la lista. Esto cobra más potencia cuanto más jerarquizado este cada uno de los elementos de la lista. Imagina que te falla una propiedad de un Bean que es a su vez propiedad de otro Bean, que es cada uno de los elementos de la lista (y cuanto quieras complicarlo). En este ejemplo, para ver la propiedad deseada habría que ir abriendo el árbol, lo cual resulta muy tedioso.

Mi consejo es que probéis esta funcionalidad, y ya veréis como luego, en el trabajo diario, como ya especificaba al principio del artículo, os será de mucha utilidad.

Página de Netbeans | Netbeans
Más información | Getting More out of the Debugger

Empezando a diseñar en Firefox OS, pautas básicas y uso de la UI

Pedro Gutiérrez — Fri, 03 May 2013 05:00:16 GMT

Diseñar en Firefox OS es muy simple, teniendo en cuenta que las aplicaciones están hechas con HTML5 y CSS3, la única diferencia es que disponemos de una UI que nos recomiendan usar y que podemos establecer el logo de la aplicación, en este aspecto se asemeja a las apps de Chrome.

Mozilla ha puesto a nuestro disposición todos los bloques de la UI de Firefox OS, que incluyen botones, interruptores, cabeceras, menús y algunas cosas más, que pueden ser usadas en cualquier proyecto (no depende de Firefox OS) y vamos a poner en práctica.

Recomendaciones de diseño

Antes de nada vamos a repasar unos fundamentos básicos del desarrollo de aplicaciones móviles:

Debemos de ser directos y concisos, expresando lo que se quiere decir con pocas palabras para evitar que el usuario ignore el mensaje y decida abandonar la tarea o continuar sin más.
Marcar bien los pasos que debe seguir el usuario, con iconos preferentemente, que describan las acciones a tomar.
Si hay alguna acción que tardará en realizarse como descargar información o hacer cálculos largos es recomendable avisar al usuario con un símbolo de descarga o de cargando para evitar que el usuario interprete que la aplicación ha dejado de funcionar.
Hay que minimizar la escritura en la aplicación, ya que escribir en un móvil es mucho más pesado que en un ordenador, y para ello es recomendable usar checkbox, botones, selectores y otros recursos simples.

Icono de la aplicación

En el artículo anterior vimos como establecer el icono de la aplicación (pudiendo establecer varios tamaños), pero ahora vamos a entrar en el diseño del mismo, que viene también con instrucciones por parte de Mozilla.

Hay tres cosas ha tener en cuenta en el icono: la primera es que se mostrará con unas dimensiones de 60×60 píxeles, que es preferible usar un icono circular o con las esquinas redondeadas y que además el propio sistema añadirá una sombra a la forma del icono.

A lo largo de este artículo iremos creando una aplicación que solo tiene la intención de probar la UI proporcionada por Mozilla y tendrá como icono el logotipo de Genbeta (la caja con un mundo y la letra beta, que tiene más sustancia que el logotipo de Genbeta Dev).

Para el icono de la aplicación nos proporcionan diversos archivos .psd y .png para crear un icono circular, como será nuestro caso, o usar un icono que no es circular y ponerlo sobre una base que nos proporcionan.

Este sería el modelo de icono que pretenden que sea el estándar, aunque también proponen el círculo con elementos que sobresalgan, como el propio símbolo de Firefox (es un círculo pero la cola y las orejas del zorro sobresalen). Pero si aún así no queremos adaptarnos a un círculo podemos tomar las otras dos referencias que nos proponen, ambas son formas cuadradas, la primera de 54x54 y 8px de radio o la segunda opción de 52x52 con 1px de radio, pero sobre todo lo que no quieren son iconos que ocupen todo el cuadro y tengan las esquinas rectas (por poner algún ejemplo podéis visitar el Marketplace de Firefox OS y ver como casi ningún icono cumple las pautas estéticas).

Poniendo en funcionamiento la UI

Mozilla ha liberado todo Gaia (que como ya comentamos es la última capa del sistema, la que sirve la interfaz) y tiene disponible en sus entrañas toda la UI que pondremos en funcionamiento. Se puede conseguir desde GitHub (está distribuido en dos carpetas: style para los estilos que están terminados y style_unestable con todo el CSS que puede sufrir cambios, está incompleto o mal documentado) y debemos de descargar los bloques de la UI que queramos usar, o mejor descargar todos los estilos y añadir los que nos hagan falta.

Al igual que en el anterior artículo podemos probar el ejemplo funcionando y podemos instalarlo en Firefox OS o si tenemos Firefox en Android (que tras instalar una app nos crea un acceso directo en el escritorio del móvil o tablet).

Prueba de la UI de Firefox OS

Componentes

Tenemos que tener en cuenta que los componentes solo incorporan el diseño básico, debemos de controlar nosotros cuando aparecen y desaparecen y las transiciones entre elementos.

Estos componentes se pueden llamar desde la propia página o importándolo desde las hojas de estilos (esta es la opción que expone Mozilla). La siguiente lista está compuesta por todos los componentes que podemos añadir en nuestro archivo CSS si todos los componentes que hemos descargado desde GitHub están en la carpeta “resources”.

@import url(resources/action_menu.css); /* menús de acciones */ @import url(resources/buttons.css); /* botones */ @import url(resources/confirm.css); /* panel de confirmación */ @import url(resources/headers.css); /* cabeceras */ @import url(resources/status.css); /* panel de alerta de estado */ @import url(resources/switches.css); /* interruptores, radio y checkbox */

Menú de acciones

El menú de acciones muestra una lista simple, que se debe de mostrar tras un evento desde la interfaz principal y desde este escogeríamos alguna opción de la lista de la que disponemos.

Podemos añadir las opciones que queramos añadiendo nuevos <button> y automáticamente el último aparecerá como un botón más destacado, que está pensado para cancelar la acción. También tiene un bloque para el título.

En la prueba de la UI podemos encontrar este elemento pulsando el icono de opciones de la cabecera (esquina superior izquierda).

<form role="dialog" data-type="action" id="sample-menu"> <header id="sample-title"> Título </header> <!-- Título opcional --> <menu> <button > Acción </button> <button disabled> Acción </button> <button > Acción </button> <button > Cancelar </button> </menu> </form>

Botones

Esta UI nos proporciona tres tipos de botones: el estándar, el de la acción recomendada y el de alerta o peligroso (gris, azul y rojo respectivamente). Que pueden ser añadidos en cualquier lugar y reaccionan al pasar por encima y varían también al estar deshabilitados.

También se pueden crear listas de botones compactas, que redondea las esquinas del primer y último elemento automáticamente.

En la prueba de la UI los botones son los protagonistas, con un interruptor podemos mostrarlos u ocultarlos y con un checkbox podemos deshabilitarlos.

<!-- Todos permiten el "disabled" --> <button> Normal </button> <button class="recommend">Recomendado</button> <button class="danger">Peligroso</button> <!-- Así se genera la lista de botones compactos --> <ul class="compact"> <li><button> Acción 1 </button></li> <li><button> Acción 2 </button></li> <li><button> Acción 3 </button></li> <li><button> Acción 4 </button></li> </ul>

Confirmación

Es un panel similar al de el menú de acciones, pero incorpora dos botones en la parte inferior de la pantalla donde nos permite elegir entre continuar la acción o cancelarla, y nos permite añadir un cuadro de texto.

Podemos añadir distintos títulos, imágenes y bloques a nuestro antojo, como en la imagen lateral.

Este bloque de la UI no lo he puesto en funcionamiento porque no actuaba del todo correctamente al añadir textos o imágenes.

<form role="dialog" data-type="confirm"> <section> <h1>Confirmación</h1> <p>¿Quieres borrar el contacto?</p> </section> <menu> <button>Cancelar</button> <!-- botón estándar --> <button class="danger">Borrar</button> <!-- botón de alerta --> </menu> </form>

Cabeceras

Las cabeceras son totalmente personalizables, son el punto fuerte de la UI, tienen tres temas que podemos cambiar y la parte importante está en el botón de la esquina superior izquierda, que es con el que en todo el sistema operativo se retrocede o se accede a los menús.

Podemos añadir varios botones o textos, sin contar el título tenemos tres botones que pueden llevar a otras acciones (uno en la izquierda y otros dos en la derecha) y además podemos añadir una subcabecera.

Disponemos del tema naranja por defecto, el tema oscuro (class="skin-dark") y el tema organic que es grisáceo (class="skin-organic").

En la app de demostración de la UI si pulsamos el botón de menú (el botón superior izquierdo) nos sale un menú de acciones para cambiar el color de la cabecera.

<section role="region"> <header> <a href="#"><span class="icon icon-back">Atrás</span></a> <!-- botón izquierdo --> <menu type="toolbar"> <button><span class="icon icon-edit">Editar</span></button> <!-- botón derecho --> </menu> <h1>Aplicación</h1> <!-- Título --> </header> <header> <h2>Muy bonita</h2> <!-- Subcabecera --> </header> </section>

Interruptores

En este bloque tenemos varios elementos, los input de tipo radio y checkbox y en dos colores: azul y rojo, este último para advertir de una acción peligrosa.

Los radio son simplemente circulares y se rellenan al estar activos, mientras que los checkbox nos permiten usarlos circulares con un tick en el centro al estar activos o como si fuesen un interruptor.

<!-- Checkbox normal --> <label> <input type="checkbox"> <span></span> </label> <!-- Checkbox rojo --> <label class="danger"> <input type="checkbox"> <span></span> </label> <!-- Radio normal --> <label> <input type="radio"> <span></span> </label> <!-- Radio rojo --> <label class="danger"> <input type="radio"> <span></span> </label> <!-- Interruptor --> <label> <input type="checkbox" data-type="switch"> <span></span> </label>

Más elementos de la UI

La UI tiene unos cuantos elementos más a nuestra disposición pero no todos funcionan como deberían o directamente algunos no están documentados, aunque en el sistema operativo están implementados y funcionan perfectamente.

Alternativas a la UI

La existencia de este pack para la interfaz de usuario no nos obliga a tenerlo que usar, podemos hacer cualquier diseño, aunque es recomendable hacerlo adaptable, pero no tenemos ninguna limitación, admite toda la tecnología de HTML5 y CSS3 y tiene un rendimiento bastante bueno, mejor en el renderizado que en la ejecución de grandes scripts.
Por poner un ejemplo del rendimiento, en renderizado se come, literalmente, el Geeksphone Keon (el móvil con Firefox OS de gama baja, de 90 euros) a mi Galaxy S+, con un experimento donde hay rotaciones 3D de CSS3 en movimiento.
En cuanto a una prueba rápida con Octane si sale perdiendo el Geeksphone con una puntuación de 240 contra 430, aún así el funcionamiento está fenomenal y la estabilidad bastante buena, aunque aún hay que pulirlo (es normal en una prerelease).

En Genbeta Dev | Desarrollo en Firefox OS
Más información | Guía de estilo y Documentación de la UI