En esta ocasión es un sitio web que hicimos el año pasado para ID-ARQ y que particularmente me gustó mucho por lo sutil del concepto en general a nivel visual y la posibilidad de emplar Univers como complemento tipográfico que le venía como anillo al dedo.

Algún detalle extra e imágenes, en el enlace al proyecto en el portfolio.

Otro dato curioso es que es un problema relacionado exclusivamente con iOS, ya que se da tanto en un iPad con iOS 4.3 como en un iPhone con iOS 5.1, y por el contrario, el mismo código funciona correctamente en terminales android, tanto tablets como dispositivos.

Al tomar el foco y comenzar a escribir, aparecerá el mecanismo de enmascarado mediante “*”, y con la mecánica clásica en iOS de mostrar solamente la última letra introducida. Hasta aquí vamos bien…

El problema surge cuando salimos del campo de texto dando el foco a cualquier otro elemento. El texto enmascarado con “*” desaparece… pero solo “visualmente”, porque si volvemos a dar el foco a dicho campo, podréis ver que retoma su contenido y funciona nuevamente con normalidad… pero en cuanto pierde el foco desaparece el texto.

Otra prueba que tenemos pendiente de realizar, y que pensamos que solventará el problema también es usar StageText (disponible desde AIR 3) para acceder a funcionalidades de texto nativas y concretamente el wrapper creado por Christian Cantrell: Native Text.

Puedes conocer el proyecto más a fondo en la entrada de nuestro portfolio, y como siempre dejarnos aquí tus comentarios

Es por esto que buscamos una persona con al menos 2 años de experiencia demostrable en proyectos web, y con buena capacidad de trabajo en la parte de servidor.
Para el puesto es imprescindible:

• Dominio de PHP y experiencia desarrollando con OOP.
• Amplia experiencia en maquetación con estándares XHTML y CSS a partir de diseño.
• Amplia experiencia en trabajo con Bases de Datos MySQL y optimización.
• Amplia experiencia en JavaScript, AJAX, y más específicamente con la librería jQuery.
• Amplia experiencia de trabajo con formatos de intercambio de información como XML y JSON.
• Conocimientos de Zend Framework.

Naturalmente se valorarán positivamente condicionantes como:

• Experiencia en trabajo en equipo.
• Experiencia de desarrollo y adaptación de WordPress.
• Experiencia con alguna de las plataformas: Drupal, Joomla, Magento, Prestashop…
• Experiencia en integración de aplicaciones web con Facebook.
• Experiencia en trabajo con IDEs como Eclipse o Aptana Studio.
• Conocimientos en seguridad en PHP.
• Conocimientos en HTML5, CSS3.
• Conocimientos desarrollo de web apps para dispositivos (móviles, tablets,…)
• Nivel medio o superior de inglés.

Si te interesa, no dudes en hacernos llegar tu CV junto con unas palabras a hola[at]q-interactiva[dot]com indicando en el asunto “Programador Web”. Ya te anticipamos que el puesto inicialmente tendría una duración de 6 meses en jornada completa, con una clara posibilidad de continuidad. El ambiente de trabajo estamos seguros que te va a gustar, y solamente queda esperar a que te animes para ¡afrontar algunos proyectos muy interesantes que tenemos entre manos!

Si bien os hablábamos entonces de jQuery-tmpl como un motor válido para realizar estas tareas, dejábamos caer que este sistema ya no era el oficialmente “recomendado” por el equipo que hay detrás (en este caso y si no recuerdo mal jQuery UI), y que todo ese desarrollo se estaba migrando ahora a JsRender y JsView.

JsRender es un motor de templates basado completamente en Strings, sin dependencias del DOM o incluso de jQuery, pudiendo incluso correr en el servidor mediante node.js. JsRender es muy rápido, tanto que según su creador es aproximadamente 20 veces más veloz renderizando que su predecesor jQuery.tmpl…

Montado sobre JsRender, está JsViews, que básicamente amplía la funcionalidad de JsRender para pasar a un modelo de “vistas” que no son otra cosa que templates renderizados, permitiendo un anidamiento entre ellas, y por tanto una jeraraquía. Además JsViews, amplía la funcionalidad mediante data binding permitiendo que cambios en el modelo sean automáticamente adoptadas por las vistas dependientes… pero vamos a dejarnos de teoría y pasamos a un ejemplo sencillo…

Ficheros JavaScript Requeridos: jQuery, jsrender, jquery.views y jquery.observable

Para este ejemplo, necesitamos jQuery, necesitamos jsrender y jquery.views.js y para convertir un array en una especie de “datasource” de nuestra vista, necesitamos jquery.observable.js.

El Template de nuestra Demo

Es muy importante tener claro que este template ha de ir dentro del body de nuestro documento, nunca en el head, ya que no sería accesible, y que el uso de la etiqueta script hace que podamos validar correctamente el documento que lo contiene, además de dejar el contenido del template fuera del DOM, lo cual es muy importante para aislar el template como tal de las operaciones que podamos hacer posteriormente sobre el resultado del template (ya que sino sería un elemento más que podrían devolver nuestros selectores, por ejemplo).

El etiquetado HTML

¿Sencillo?… ¡Mucho!
Este elemento HTML será el contenedor para nuestro template, es decir, el template se reproducirá en función de los datos del array de elementos tantas veces como sea necesario. De ahi que el template sean elementos “li”, ya que están pensados así porque su contenedor será un elemento “ul”, como tenemos aquí etiquetado. Evidentemente el etiquetado a reproducir en el contenedor y el template es el que deseemos obtener como resultado, totalmente libre.

La magia

function onDataLoaded(json)
{
	contacts = json;
	$contactList.link(contacts, contactTemplate);
}

var contactTemplate = $('#contactTemplate').template();
var $contactList = $('#contactList');
var contacts;

$.ajax({
	url: "php/server.php",
	cache: false,
	dataType: 'json',
	success: onDataLoaded
});

Como podéis ver, lanzamos la petición AJAX que nos dispara la función onDataLoaded, donde simplemente se accede al elemento CONTENEDOR mediante jQuery que queremos enlazar con la “fuente de datos”, y se le indica el template que empleará para mostrar esa fuente de datos en el método link. ¡Una línea!…Y listos… salvo que nos hayamos emocionado, como es el caso, y deseemos ver como efectivamente podemos cambiar el modelo y ver ese cambio reflejado de forma totalmente automática en la vista!

Cambios en el modelo, reflejo automático en la vista

function addContact()
{
	var newContact = {
	name: $('#name').val(),
	phoneNumber: $('#phoneNumber').val(),
	image: 'img/new_profile.jpg',
	imageDescription: 'Un gran tipo dinámico'
	};

	$.observable(contacts).insert(contacts.length, newContact);
}

function removeContact(e)
{
	var $target = $(e.target);
	var index = $target.parent().prevUntil('#contactList').length;

	$.observable(contacts).remove(index, 1);
}

Además debemos añadir a la función onDataLoaded estas dos líneas al final:

$('#addContact').on('click', addContact);
$contactList.on('click', 'li>button', removeContact);

Aqui lo que tenemos son 2 funciones que se emplean para añadir o quitar elementos de la lista. Para añadir, obviamente entendemos que existe un “button” con id “addContact” y un par de inputs con ids “name” y “phoneNumber” que hacen que el nuevo elemento que se añada tome esos valores. Mediante la implementación de observable que incluye el proyecto JsViews, hacemos un insert en el array de contactos que transmitirá el cambio a la vista.

En el caso del borrado, para encontrar el índice del elemento a borrar del modelo, empleamos el método de jQuery prevUntil que nos sirve para tomar todos los “hermanos” anteriores a un elemento, hasta un selector dado. Lo que hacemos es acceder al li que contiene al botón pulsado, y contar la cantidad de hermanos que existen antes de él, lo que nos dá el índice de ese elemento en el array de datos. Ese valor ya lo podemos pasar al método remove con observable para que elimine el adecuado.

Cuidado con los caracteres no estándar!

Si el array de datos que actúa como modelo lo has incrustado en el código del fichero html, y usas caracteres latinos como acentos, eñes, etc. podrás comprobar que no se visualizan correctamente (no así los que se le añaden mediante observable… aunque tu fichero esté guardado correctamente en utf-8. Para solucionar este problema, has de meter este meta obligatoriamente en tu fichero:

Os dejamos un enlace a la demo, y los ficheros para su descarga, donde tenéis comentado como se trabajaría con JsRender de manera similar, aunque sin el data-binding mediante el sistema “observable”.

View Demo Source Code
En definitiva, JsRender nos permite trabajar con plantillas de una manera más basica, aunque con un gran rendimiento, siendo el sustituto natural de jquery-tmpl, además de disponer de mecanismos de renderizado para codificación HTML o no como {{= }}, {{= !}}, condicionales para poder adaptar la plantilla en función de los contenidos de cada objeto a renderizar {{if}}, {{else}} e incluso de recorrido iterativo con {{each}}… y JsViews extiende aun más allá la funcionalidad permitiéndonos estructuras combinadas complejas, y vinculación de vistas a modelos que se actualizan de forma automatizada.

Podéis encontrar unas buenas slides del creador en slideshare, y por supuesto más información en GitHub en ambos proyectos: JsRender + JsViews. También es altamente recomendable el analizar a fondo los buenos conjuntos de demos que hay disponibles para ambos proyectos (JsRender Demos y JsViews Demos).

A consecuencia de dicho acto se ha recogido un recorte de prensa donde se resumen muy brevemente el objetivo de la aplicación así como la base que hay detrás de ella. El texto relativo a nuestra visión de la aplicación que se recoge en el artículo no es demasiado afortunado, así que aprovechamos este espacio para dar nuestra visión del proyecto de manera amplia y detallada.

¡Mejor Así! es una aplicación multimedia, interactiva y enriquecida en contenidos, con un diseño e ilustración muy cuidados, y que permite mediante las interacciones con el usuario, reconocer determinadas áreas en las que la persona afectada por el síndrome de Asperger, pueda tener mayores problemáticas. La aplicación cuenta con un modelo de contenidos flexible y fácilmente ampliable, que ha sido plasmado a través de un motor XML para las actividades que la componen, que son y pueden ser de diferentes tipos.

La aplicación como tal fue concebida desde el inicio con este objetivo y a nivel técnico reviste la complejidad lógica de un desarrollo de este tipo. Actualmente soporta contenidos en formato texto, audio, video, juegos, y algunos tipos de actividades autoevaluables, que generan al final del proceso un informe detallado sobre los aciertos y fallos del usuario, y que sirven a la persona que guía el proceso para tener una idea precisa de las emociones y situaciones en las que el niño/a tiene más complicaciones. Además la aplicación está realizada con Adobe AIR, lo que favorece la posibilidad futura de portar el desarrollo a tablets (tanto Android como iPad), principalmente porque se ha creado de forma compatible con interacción por ratón o por pantalla táctil.

Pero para [Q], el proyecto ¡Mejor Así! ha sido mucho más que eso. Nos hemos implicado desde el inicio con el objetivo de poner todo de nuestro lado para que el resultado fuera funcional. En este proyecto el objetivo principal “no era que todo fuera bonito y divertido”, sino que con ese disfraz, se pudiera captar la atención de un niño/a para que a través de actividades que les resultaran atractivas, graciosas y divertidas, se pudiera ahondar en sus necesidades para trabajar con el posteriormente en las que presentaban mayor problemática.. Ese reto pensamos que lo hemos logrado ampliamente gracias a la paciencia y buen hacer de Pilar, que en todo momento nos ha sabido guiar en el complejo mundo del Asperger. Un cuidado al extremo en el las ilustraciones (gracias Jose Ángel, por tan magnífico trabajo), en el diseño e incluso en los audios (feedbacks auditivos y música de fondo) han permitido que “a pesar” de tener un producto de una calidad gráfica notable, no se haya perdido ni un ápice del objetivo principal, que era el trabajo y evaluación de niñ@s afectados por este síndrome.

Para nosotros, ha sido un placer poner esta primera piedra en un proyecto tan bonito (no todos los días puedes realizar proyectos en los que detrás no solo hay una motivación económica, sino una aplicación social práctica e inmediata que ayudará a otros a mejorar su calidad de vida), y estamos ansiosos de que se puedan dar los siguientes pasos para ampliar nuevas actividades y contenidos, y mejorar la promoción y distribución de la aplicación.

Nuestro agradecimiento a Pilar y a la Asociación Asperger de Asturias por haber hecho un proyecto tan fácil de llevar.

El artículo original del que parte este resumen personalizado es este, y está orientado al segmento de los smartphones, que si bien no son aun la base más amplia del mercado móvil, cada día ganan mayor cuota, y sin duda son los que más consumo generan en cuanto a tráfico y aplicaciones.

Este año ha sido, como era de esperar, de gran crecimiento para los smartphones (concretamente un 63,2%), lo que hace que los porcentajes que veremos en los siguientes apartados, permitan a algunas marcas o sistemas operativos crecer en unidades, a pesar de haber perdido cuota de mercado, como es el caso de RIM, o que a pesar de ganar muy poca cuota de mercado casi dupliquen el volumen de ventas del año anterior (como es el caso de HTC). Este dato es importante tenerla siempre en cuenta al analizar estas cifras.

Por marca Apple ha logrado ponerse en cabeza como terminal con mayor cuota de mercado, con un 19,1% (15,9% en el 2010) frente a Samsung que tiene que percibir que algo ha hecho bien, al haber visto subir su cuota de mercado de un 8% a nada más y nada menos que un 18,7%. Subidón, subidón. Tras ellos va de capa caída Nokia, que ha confiado en Windows Phone para tratar de frenar la sangría que comenzara años atrás, pasando del 2010 al 2011 de un 33,7% a un 15,9%. RIM se lleva otro bajón con su caída desde el 16,1% al 10,8% y seguramente no ayuden los problemas que han tenido este año con sus servicios. HTC sigue pasito a pasito aunque lentamente, pasando de un 8,3% a un 9,2%, aunque la tendencia es al alza que ya es bastante. Detrás de estos actores principales aparecen en este orden Sony (5,5%), LG (4,8%), Huawei (4,1%), Motorola (3,8%) y ZTE (2,1%).

Como era de esperar, y ya indicaban las cifras de ventas desde hace prácticamente 1 año, Android se ha ido comiendo el panorama hablando de sistemas operativos, y actualmente se sitúa en cabeza con un 43% de cuota de mercado!! Teniendo en cuenta que en 2010 estaba en un 18%, la cosa abruma bastante… pero es lógica teniendo en cuenta que las marcas que más venden emplean este OS como sistema principal para casi todos sus terminales.

iOS, como casi siempre ocurre con dispositivos Apple, gana muy rápidamente su cota, pero le cuesta crecer y es obvio que hablando de OS, tiene difícil aumentar mucho el trozo de pastel, ya que va directamente ligado con las ventas de iPhone. Se coloca en un segundo puesto con un 19%, frente al 16% del año anterior.

Symbian, de la mano de Nokia, y con los anuncios que todos ya conocemos ve como va desapareciendo del panorama a pasos agigantados, pasando de un 39% en 2010, a un 17% en 2011. Con el acuerdo entre Nokia y Windows es muy previsible que el año que viene Symbian se vaya despidiendo de este mercado de los smartphones, y que Windows Phone comience a ser un actor con algo que decir… aunque a día de hoy aparece con un 1% de cuota, en una posición muy retrasada, por detrás de BlackBerry (con un 11% desde el 16% en 2010) y de Bada (que tiene un 2% frente al 1% en 2010).

Personalmente pienso que la combinación Nokia + Windows Phone puede dar mucho juego, solo espero que la sepan llevar a buen puerto, y realmente tengamos una nueva opción al nivel de Android e iOS. Hasta el momento lo que he visto en primera persona, tanto en HTC como en Nokia, me deja muy buen sabor de boca tanto en usabilidad como en hardware, respuesta de la pantalla y velocidad del sistema.

Para los desarrolladores, la base instalada es el presente y las proyecciones de ventas del último trimestre son las indicaciones del futuro. Con estos dos datos, se pueden tomar decisiones para el ahora, sin dejar de lado el mañana, y si queremos ser honestos con nuestros clientes cuando afrontamos un desarrollo móvil, estos datos son vitales para no venderles algo que tenga los días contados, cuando lo que se quiere es abarcar un desarrollo de carácter genérico.

La base instalada nos vuelve a poner con los pies en el suelo, y nos recuerda que la hegemonía que Nokia ha tenido durante largos años en este mundo, sigue teniendo su peso, y mucho. Symbian sigue siendo el OS con mayor base instalada de dispositivos, con un 35% de cuota de mercado (a pesar de caer desde un brutal 49% en el 2010), frente al imparable Android que se coloca en segundo lugar con una base del 27%, que es una cifra importantísima teniendo en cuenta que venía de un 9% en el 2010. Detrás está iOS con un 16% (frente a un 11% en el año anterior) y BlackBerry que cae a un 12% desde el 14% que tenía hace un año. Windows Mobile sufre un golpe con la aparición de Windows phone cayendo de un 7% a un 2%, y bada y Windows Phone empiezan a tener su pequeño nicho de dispositivos con un 1% cada uno.

Mirando las ventas del Q4 del 2011, vemos que los smartphones ganan cuota frente a terminales convencionales, ya que las principales marcas todas aumentan sus ventas frente al Q3. Los mejor parados de estos datos son Apple, Samsung y RIM, y sufre caída con respecto al anterior trimestre HTC (curiosamente la única de las marcas que han perdido ventas en el último trimestre). Estos datos hay que mirarlos con cuidado, porque muchas veces vienen muy influenciados por la salida al mercado de determinados modelos de terminal que llevan detrás un gran marketing o expectativas… y gracias a los cuales (y su promoción por los operadores) se logran picos de ventas puntuales, pero lo que está claro con las tendencias de ventas del Q4 por sistema operativo, es que Android ahora mismo es la referencia.

Lo más significativo de todo esto, es sin duda ver que los smartphones se van consolidando a buena velocidad como un segmento generalista, que ya no son un nicho minoritario, y que los desarrolladores podemos empezar a creer en un mercado mucho mayor para aplicaciones enriquecidas con consumo de datos (gracias a la ayuda de las operadoras al incluir tarifas planas con este tipo de terminales, con lo bueno y lo malo que eso significa), mejores navegadores con buen soporte para tecnologías como HTML5, y mejores prestaciones para enfrentarse a contenidos más complejos.

El panorama sigue siendo prometedor para la creación de contenidos para dispositivos móviles, y el 2011 ha confirmado que salvo para proyectos con un target muy definido (ya sea iPhone, Android, o combinaciones de éstos) o para proyectos con necesidades técnicas muy específicas y fuera del ambito de las “web apps”, si se quiere crear una aplicación a con un coste controlado, y con un equipo de desarrollo “convencional”, las tecnologías web son la mejor opción para ir a por el espectro más amplio, sin tener que lidiar de forma directa con la mayoría de las plataformas nativas, tanto si queremos que la aplicación corra en el navegador, como si queremos que se integre como una aplicación más.

HTML5 destaca por su compatibilidad (más allá de los problemas habituales por inconsistencias entre navegadores y plataformas), y suple carencias con sistemas como PhoneGap o Appcelerator. Adobe AIR sigue siendo una opción genial cuando las plataformas target son compatibles y se está pensando en una aplicación tipo “nativa”, y ahora con sus Native Extensions, ofrece un plus para llegar un paso más allá en la integración con los terminales. En resumen… los desarrolladores con un perfil web, estamos de enhorabuena porque cada día podemos hacer más cosas en dispositivos, con conocimientos cercanos a los que ya disponemos.

Allí estaremos parte de [Q] para, además de darnos una vuelta por los stands y conocer las novedades que nos depara el mundo de los dispositivos, mostrar la aplicación y tener una representación de la parte técnica del proyecto, que recae principalmente sobre nosotros. También como os hemos comentado hace bien poco, participaremos en el Devicedays, tanto en la organización como con un taller.

Si tienes pensado pasarte por el MWC, nos podrás encontrar en el App Planet (HALL 7), stand 7D87. Si tienes pensado pasarte por Devicedays, pues ya sabes por quién preguntar

Synctur en el MWC2012 Ver en el Mapa