El futuro del desarrollo para dispositivos móviles

image host

En los ultimos años hemos experimentado un desenfrenado avance en tecnologías móviles. Los teléfonos inteligentes (smartphones) y tablets son cada vez más frecuentes y, en muchos casos, más vendidos que los equipos de cómputo de escritorio y portátiles tradicionales. la comodidad que brindan al usuario ha sido la clave de su éxito.

Esa misma satisfacción del usuario final ha tenido su contraparte desde el principio: Los desarrolladores y diseñadores han tenido que adaptar su trabajo a cada dispositivo móvil. No suena muy complicado, pero lo es, pues implica conocer diversas plataformas de desarrollo. Por ejemplo, para una app nativa de Android, es necesario utilizar Java, para iOS hay que utilizar Objective-C o Swift, etc. ¿Desarrollar (prácticamente desde cero) una misma aplicación en diversas plataformas?, ¡es duplicar o triplicar esfuerzos! Aunque hay alternativas como Xamarin, que nos permite usar una sola plataforma (C#) para diversas arquitecturas, aún nos encontraremos con limitantes importantes.

¿Existirá una solución a todo este problema? ¡Por supuesto! Y ha estado con nosotros desde hace muchos, muchos años: La Web. Usar estándares como HTML, CSS y JavaScript (ECMAScript) es fácil y rápido de implementar, además de que una misma webapp puede ser accedida literalmente por cualquier arquitectura, incluyendo a Android e iOS. Por ello, muchos desarrolladores están "migrando" de crear "apps nativas" a "webapps adaptables" (la popularidad de PhoneGap es un claro ejemplo de ello), que incluso tienen el beneficio extra de que pueden ser utilizadas en la web tradicional de escritorio.

Muchos aún piensan que las webapps son exclusivas para plataformas como Firefox OS, Tizen o WebOS, pero no podrían estar más alejados de la realidad. Hoy en día, una webapp puede ser ejecutada en cualquier dispotivo móvil con Android o en todos los productos de Apple, como los iPhone o iPad, ambos basados en iOS.

Igualmente, hay muchos desarrolladores que aseguran que las webapps aún no cuentan con el nivel de integración a nivel de hardware con los dispositivos móviles como lo hacen las apps nativas, algo que quizás hace un tiempo era cierto, pero cada día que pasa disponemos de más Web APIs que han incrementado dicha integración.

Así que si deseas desarrollar para dispositivos móviles, ¿vas a aprender y programar en diversas plataformas para crear y recrear tus aplicaciones, o vas a enfocarte en crear una sola aplicación que funcionará en cualquier arquitectura? La respuesta es simple, sólo falta que la apliques.

Share

Mis Bookmarks – Accede fácil y rápido a tus bookmarks preferidos

Mis Bookmarks

Aún sigo trabajando en la nueva versión del blog, ¡no desesperen! Como compensación, aquí les dejo un proyecto personal: Mis Bookmarks.

Se trata de un pequeño proyecto escrito en HTML y JavaScript, alojado en Github. No usa PHP, sólo tiene como librería a jQuery y Bootstrap (ambos incluídos).

Lo único que tienen que hacer es editar el archivo bookmarks.json con tus propios enlaces favoritos. El primer nivel del archivo JSON son las categorías, el segundo nivel son los bookmarks (nombre / URL).

Un tip: Para usar Mis Bookmarks como la Pestaña “New Tab” en Firefox, entra a about:config y cambia el valor de browser.newtab.url por el URL donde lo tengas localmente almacenado (por ejemplo, http://localhost/mis-bookmarks/).

Enlace: gespadas.github.io/mis-bookmarks

Share

¿Cómo ejecutas código jQuery en tus desarrollos?

Cuando comencé a utilizar jQuery, supe que todo el código que iba a ejecutar una vez que se cargue el DOM, debía ponerlo dentro de:

$(document).ready(function() {
  //...
});

Con la práctica, me olvidé del código anterior y empecé a usar su equivalente, más sencillo de recordar y más corto para escribir:

$(function() {
  //...
});

Y de repente, revisando código de algún gurú, me topé con esto:

(function() {
  //...
}());

¿Mi reacción? ¡Confusión total!

Antes que nada, ¿qué diferencias hay entre ambas?

  • El “$” al inicio de la primera.
  • Los parentesís “()” al final de la segunda.

El primer detalle es comprensible, pues sabemos (o deberíamos saber) que el símbolo monetario seguido de paréntesis “$()” es equivalente a “jQuery()“, que es lo que habitualmente usamos para seleccionar elementos del DOM.

El segundo detalle no era muy claro para mí, así que luego de una divertida investigación, descubrí que el objetivo de los paréntesis “()” al final, inmediatamente después de la definición de la función, es la ejecución de la misma.

¡Ah! Pero hay un detalle, no es suficiente sólo incluir esos paréntesis al final, si no que son necesarios otros paréntesis, los que engloban a la propia función, para indicar que no se trata de una declaración, si no de una expresión.

A este tipo de funciones ejecutables al momento, se les conoce como Immediately-Invoked Function Expression (IIFE).

Por último, si vamos a usar una IIFE para ejecutar nuestro código jQuery (o JavaScript directo), no debemos olvidar colocarla al final de nuestro HTML, justo antes de <body>.

¿Beneficios? No necesitamos jQuery para ejecutar nuestro código JS, o bien, evitamos una llamada al framework.

Referencias

Si desean profundizar más sobre el tema, les dejo los siguientes enlaces:

MicroJS – Colección de Micro Librerías JavaScript

¿Sabías que las versiones minificadas de las últimas versiones de jQuery y MooTools pesan más de 90 KB? Por lo general necesitamos una librería o framework JavaScript para nuestros proyectos, pero a veces no requerimos todas las funcionalidades de grandes frameworks (como los mencionados).

Por lo anterior es bueno conocer la existencia de micro librerías o micro frameworks que podemos usar hoy en día, y MicroJS se ha encargado de crear un listado de ellas (¡ninguna rebasa los 5 KB!), organizadas en categorías descriptivas.

Enlace: MicroJS.com

¡No olviden agregar MicroJS a sus bookmarks! :-)

Share

CDNJS – Completo CDN para Librerías JavaScript

Al desarrollar algún proyecto web, es muy común usar el CDN (Content Delivery Network) de Google, e incluso el de Microsoft, con la desventaja de que sólo incluyen las librerías más populares (jQuery, MooTools, etc). ¿Y si necesito backbone.js, coffee-script, less.js, socket.io o alguna otra librería JavaScript no tan popular?

CDNJS es la solución, pues contiene un extenso catálogo de librerías JavaScript, listas para ser usadas en nuestros proyectos.

Por cierto, CDNJS usa los servidores de CloudFlare, con lo cual podemos estar seguros de un alto nivel de estabilidad y disponibilidad de las librerías.

Enlace: cdnjs.com

Share

Actualiza automáticamente el navegador web al hacer cambios en archivos CSS

CSSrefresh es un pequeño archivo JavaScript que podemos usar en la etapa de desarrollo de nuestros proyectos web. Su función es monitorear los archivos CSS, de tal forma que al editarlos (y guardarlos) se aplicarán los cambios en el navegador web, sin tener que refrescar manualmente la página web respectiva.

[CSS Refresh]

Enlace: CSS Refresh.

Como pueden ver, pueden incluir el script directamente …

<head>
   <link rel="stylesheet" type="text/css" href="css/site.css" />
   <script type="text/javascript" src="js/cssrefresh.js"></script>
</head>

… o usar el bookmarklet disponible.

Share

MooTools 1.4.1 corrige varios bugs

MooTools LogoHace unas horas fue liberada una actualización menor del poderoso framework de JavaScript, preferido entre conocedores: MooTools Core 1.4.1, a casi un mes de la salida de su versión anterior.

En esta ocasión no encontraremos novedades, ya que sólo se trata de una actualización que corrige numerosos bugs encontrados en la versión 1.4.0. A pesar de ello, se recomienda su inmediata actualización.

Enlaces de descarga:

Fuente: MooTools Blog (incluye lista de bugs corregidos).

Share

MooTools 1.4.0 con delegación de eventos en Core

MooTools LogoHace unos días fue liberada una actualización del poderoso framework de JavaScript, preferido entre conocedores: MooTools Core 1.4.0, así como de MooTools More 1.4.0.1.

Lo más importante de esta nueva versión es la inclusión de la delegación de eventos (event delegation) en Core (antes estaba en More).

¿Qué es la delegación de eventos? Es cuando le asignamos un listener a un elemento padre para monitorear a sus nodos hijos (dentro del DOM) en vez de asignar dichos eventos a cada uno de ellos, lo cual es mcuho más eficiente para contenido dinámico con muchos nuevos elementos.

Para más información (y ejemplos) los invito a consultar la documentación oficial sobre el tema.

Enlaces de descarga:

Fuente: MooTools Blog (con la lista completa de novedades).

Share

Javascript Frameworks y jQuery [Infografía]

Si desarrollas o diseñas sitios web, principalmente del lado del cliente (front-end), hoy en día es indispensable que conozcas y uses un framework de JavaScript para ayudarte en tus proyectos. ¿Sabes cuál es el más popular, o el más utilizado en aplicaciones web?

La siguiente infografía pretende responder dichas interrogantes, tomando a jQuery como punto de partida. Se incluye también a Mootools, Prototype, YUI, Dojo, ExtJS y otros más.

Javascript Frameworks y jQuery [Infografía]

Me llama la antención que la versión más utilizada de jQuery sea aún la 1.3.2.

¿Cuál de los frameworks mencionados utilizas y por qué?

Via WebAppers.

Share

Ext JS 4.0 Final Disponible

Ext JS Framework

El equipo de Sencha acaba de liberar la versión final y estable de Ext JS 4.0. Esta versión se presenta como la modernización más comprensible de este poderoso Framework de JavaScript desde su creación.

Presenta una nueva y mejorada arquitectura, así como interesantes novedades (como su nueva librería para crear gráficas sin usar Flash, ¡sólo HTML5!), que permitirán a todo desarrollador crear aplicaciones sólidas para la web. También ha sido optimizado para las últimas versiones de los navegadores web modernos.

Si tienes curiosidad por saber qué tanto puedes crear con Ext JS 4.0, te invito a maravillarte con sus más de 100 demos. Por cierto, la documentación del API está muy completa, ordenada por categorías y temas de interés.

Aquí les dejo un video donde se presenta a Ext JS 4.0 y sus principales novedades:

¡No esperes más! Descarga Ext JS 4.0 para que empieces a conocer el entorno a través de los ejemplos incluidos, y verás que pronto estarás utilizando este maravilloso framework en tus proyectos web.

Fuente: Sencha Blog.

Share