Tan poderoso como nuestros pequeños dispositivos móviles, tienen una debilidad. No, no es la criptonita roja. Es la fuerza de la señal. Yo vivo en una ciudad de tamaño medio y todavía encuentro áreas donde mi teléfono misteriosamente deja de cargar datos. Es frustrante, pero lo que hace más frustrante situaciones como ésta, son aplicaciones que no manejan correctamente el estado offline.

Ciertamente algunas aplicaciones no pueden hacer mucho realmente si no están online. Siendo capaz de reconocer tu conexión de red y manejar los cambios es la marca de una aplicación superior. Vamos a empezar haciendo algunas modificaciones básicas en nuestra aplicación para manejar la comprobación de la conexión inicial, así como un cambio en la conexión.

function onDeviceReady(e) {
    $(document).on("online", onlineFunc);
    $(document).on("offline", offlineFunc);
    if(!(navigator.connection.type === Connection.UNKNOWN && navigator.connection.type === Connection.NONE)) {
        $(document).trigger("online");
    } else {
        $(document).trigger("offline");
    }
}

El anterior fragmento de código es una porción del evento onDeviceReady. Si no has usado PhoneGap antes, esto puede ser nuevo para ti. Básicamente, cualquier código que hace uso de las características del dispositivo necesita esperar por un evento "device-ready" para ser disparado por el framework fundamental de PhoneGap. En la aplicación del ejemplo anterior, confiamos en el evento ready del documento jQuery. En este ejemplo, remplazaremos el código JavaScript, en main.js, con el código anterior.

Comienza agregando dos manejadores de eventos para el objeto del documento: uno para online y otro para offline. Como tú probablemente adivinaras, estos manejadores responden al cambio de estado de tu conexión.

Primero, necesitamos revisar el estatus actual. El objeto Connection de PhoneGap proporciona una manera sencilla para comprobar la conectividad del dispositivo. El valor de navigator.connection.type es uno de

• Connection.UNKNOWN
• Connection.ETHERNET
• Connection.WIFI
• Connection.CELL_2G
• Connection.CELL_3G
• Connection.CELL_4G
• Connection.NONE

Con estos valores, puedes ver si el usuario tiene alguna conectividad así como fuerza relativa de la conexión. Esto es útil para decidir si tiene sentido descargar grandes archivos multimedia por ejemplo. Que es una buena idea en una conexión 4G o no necesariamente en una conexión 2G. Para nuestras necesidades simplemente nos preocuparemos si no hay conexión en absoluto. También tomamos la visión pesimista si no podemos determinar la conexión en todos (Connection.UNKNOWN) entonces asumimos que el dispositivo no está conectado. Ahora vamos a revisar los manejadores.

var parse_init = false;
var online;
function offlineFunc(e) {
    console.log('offline');
    online=false;
    navigator.notification.alert("You are offline. Posting notes have been disabled.", null, "Offline!");
    addNoteButton.attr("disabled","disabled");
    if(geoWatch) navigator.geolocation.clearWatch(geoWatch);
}
function onlineFunc(e) {
    console.log('online');
    online=true;
    if(!parse_init) {
        initParse();
        getNotes();
    }
    geoWatch = navigator.geolocation.watchPosition(onGeo, onGeoError, { timeout: 30000 });
    addNoteButton.removeAttr("disabled");
}

Tenemos unas cuantas cosas pasando en ambos manejadores, así que tomémoslo paso a paso. El manejador de la primera línea establece una variable global (online) en false. Esta será usada en otra parte. (Si, podemos revisar y re-utilizar la conexión que teníamos antes, pero esto parecía una solución más simple). Después, notificamos al usuario que, debido a que el dispositivo está offline, la funcionalidad se ha desactivado. PhoneGap tiene una API de Notificación que es perfecta para esto.(Como un bono adicional, puedes usar la misma API para hacer vibrar el teléfono para asegurarse de que el usuario realmente reciba el mensaje). Después de la notificación, se deshabilitara el botón que se usa para agregar notas. Y por último, se limpiaran todas las actividades de geolocalización que el dispositivo puede estar haciendo.

Ahora dirige tu atención a la línea del manejador. Como antes, se actualiza una variable global que refleja el estado de conexión. El siguiente bloque se encarga de la inicializacin Parse. Como esto sólo se puede ejecutar una vez, se comprueba el valor de parse_init para ver si ya se ha establecido. Como hemos mencionado anteriormente sería parte de nuestra actualización, la llamada de watchPosition aquí le pedirá al dispositivo reportar la posición actual del usuario y sus cambios. Finalmente, removemos el atributo disabled´(si se encuentra) desde el botón utilizado para agregar notas.

La función de initParse() simplemente contiene la lógica de la configuración de análisis que se detalla en el artículo anterior:

function initParse() {
    Parse.initialize(PARSE_APP, PARSE_JS);
    NoteObject = Parse.Object.extend("NoteObject");
    parse_init=true;
}

Agregar Geolocalización

Ya has visto que el apoyo de geocalización se añadió, tanto a los manejadores online y offline, pero echemos un vistazo a cómo estos datos se utilizan realmente en la aplicación. El manejador online hace uso de la característica "watch" en la Geolocalización. Este usara el GPS del dispositivo para averiguar la ubicación del usuario así como el manejo de cualquier cambio en la ubicación. Cuando configuro el watch, especifico onGeo para el manejo exitoso y onGeoError para cualquier error. Porque nosotros queremos agregar la ubicación a los objetos de nota como enhancement, el manejador onGeoError actualmente no hace nada en absoluto (en lugar de causar un error, simplemente dejamos datos de geolocalización).

 
function onGeoError() {
    //So yeah, do nothing and I'm ok with that.
}

Obviamente podría hacer algo más aquí si quisieras, pero por ahora lo dejaremos así. El manejador de éxito copiara los valores dentro de una variable global.

var geoPoint;
function onGeo(g) {
    geoPoint = {latitude:g.coords.latitude, longitude:g.coords.longitude};
}

Ahora que hemos obtenido la ubicación del usuario, ¿cómo la usamos?. Podríamos simplemente pasarla dentro de datos almacenados con Parse. Recuerda, Parse te permite almacenar cualquier cosa. Pero en su lugar, tomaremos ventaja del soporte especial de Parse para manejar objetos de ubicación. Veamos el manejador disparado cuando el usuario da clic al botón Add Note.

$("#addNoteBtn").on("touchend", function(e) {
    e.preventDefault();
    //Grab the note details, no real validation for now
    var title = $("#noteTitle").val();
    var body = $("#noteBody").val();
    var note = new NoteObject();
    note.set("title", title);
    note.set("body", body);
    //if we have _some_ data
    if(geoPoint.longitude) {
        note.set("position", new Parse.GeoPoint({latitude:geoPoint.latitude, longitude:geoPoint.longitude}));
    }
    note.save(null, {
        success:function(object) {
            console.log("Saved the object!");
            $("#noteTitle").val("");
            $("#noteBody").val("");
            getNotes();
        }, 
        error:function(object,error) {
            console.dir(error);
            alert("Sorry, I couldn't save it.");
        }
    });
});

Hemos hecho dos cambios importantes al manejador. Primero, ya no se pasan los datos en una estructura para el primer argumento de save() -nota que es nulo ahora. En su lugar, usamos el API set() en el objeto nota para establecer nuestros valores. Podemos entonces usar un condicional sencillo para ver si tenemos la ubicación del usuario. Si es así, la pasamos a una nueva instancia de Parse.GeoPoint. Usando un GeoPoint, permite que la aplicación haga un número de geolozaclizaciones basadas en consultas. Mientras que no se usara esta aplicación de prueba, podríamos usar el API de Parse para consultar las notas publicadas dentro de cierta distancia de una ubicación. Esto es muy interesante y Parse lo hace increíblemente fácil.

Mostrar la ubicación de la nota

Ahora que tenemos datos de ubicación disponibles con nuestra nota de texto básica, ¿cómo hacemos uso de estos? Una forma seria mostrarlos en un mapa. Google proporciona soporte de mapeo comprehensivo, pero para nuestros propósitos podemos hacer uso del API de Mapas Estáticos. Esta API proporciona un mapeo básico que no requiere interactividad. Al crear una URL que incluye la ubicación y otros parámetros, se puede crear un mapa sencillo que muestra una imagen básica. Pero, ¿dónde lo hacemos?.

Uno de las adiciones más recientes a PhoneGap (en la versión 2.3.0) es el API InAppBrowser. Esencialmente, permite la creación de una ventana encima de tu aplicación. Esto es útil para tareas como visualizar paginas en un contexto fuera de la aplicación. Incluso proporciona múltiples ‘ganchos’ que notifican cuando se carga una página y cuando el usuario cierra la ventana. Por suerte para nosotros, nuestras necesidades son mucho más sencillas. Revisemos la versión modificada de la función getNotes.

function getNotes() {
    var query = new Parse.Query(NoteObject);
    query.find({
        success:function(results) {
            console.dir(results);
            var s = "";
            for(var i=0, len=results.length; i<len; i++) {
                var note = results[i];
                s += "
";
                s += ""+note.get("title")+"
";
                s += "Written "+note.createdAt + "
";
                //Do we have a geo point?
                if(note.has("position")) {
                    var pos = note.get("position");
                    s += "View on Map
";
                }
                s += note.get("body");
                s += "
";
            }
            $("#notes").html(s);
        },
        error:function(error) {
            alert("Error when getting notes!");
        }
    });
}

El cambio comienza en el resultado del ciclo. He agregado nuevo código para manejar la existencia de un valor de posición. Recuerda, no todos nuestros datos deben tenerla. Si existe, se agrega más HTML al resultado. Esto incluye un simple enlace HTML con una clase de navLink. Además, nota el uso de atributos de datos para almacenar los valores de posición. Para hacer que estos enlaces funcionen he agregado un manejador de eventos solo para los eventos táctiles sobre estos.

$(document).on("touchend", ".navLink", function(e) {
    e.preventDefault();
    //If we are offline, say we're sorry and move on..
    if(!online) {
        navigator.notification.alert("Maps can only be viewed online.", null, "Offline!");
        return;
    }
    //Get the position from the data attribute
    var long = $(this).data("longitude");
    var lat = $(this).data("latitude");
    //Generate Google Static Map API link
    var link = "http://maps.googleapis.com/maps/api/staticmap?center="+lat+","+long+"&zoom=13&size=400x400&maptype=roadmap&markers=color:red%7Ccolor:red%7C"+lat+","+long+"&sensor=false";
    window.open(link, "blank");
});

Después de bloquear los eventos normales para enlaces, el código se asegura de que el usuario este online. Si no lo está, se le notifica al usuario. A continuación, tomamos los datos de ubicación desde el HTML y creamos un link usando el API de Mapas Estáticos. Incluso si es tu primera vez viendo esta API, deberías tener una buena idea de lo que hace este enlace. Finalmente, el enlace se abre usando el API tradicional window.open. Así es como se ve el contenido en el simulador de iOS:

Así se ve el contenido cuando el usuario presiona en enlace “View on Map”:

Nota como el API InAppBrowser crea el navegador típico de manera automática. También hay un botón "Done" para cerrar la ventana. Lo que no es obvio en las imágenes de arriba, es la transición cuando se abre y cierra la ventana.

A dónde ir desde aquí

Para carga de datos offline con Parse, hay una forma simple de mantener un respaldo de los datos del usuario para que sean accesibles incluso si pierde su dispositivo. Al usar PhoneGap, se tiene acceso al estado de la conexión del dispositivo así como su ubicación por GPS. Puedes tomar este código de ejemplo para subirlo a PhoneGap Build y usarlo en tu propia aplicación!

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Margarita García.

Este articulo cubre como configurar Edge Inspect en tu computadora y tus dispositivos y entonces menciona algunas de sus habilidades. Edge Inspect esta disponible con una suscripción gratuita a Creative Cloud. Si compras la suscripción completa a Creative Cloud o la suscripción a Edge Inspect, obtendrás la versión completa. La versión gratuita te permite un solo dispositivo conectado, mientras que la versión completa no tiene limite de dispositivos conectados al mismo tiempo.

Configuración

Una de las partes más impresionantes de Adobe Edge Inspect, para mi, es lo rápido y fácil que se configura. Solo hay tres pasos para la instalación:

1. Instala Edge Inspect en tu computadora.
2. Instala la extensión de Chrome.
3. Instala la aplicación de Edge Inspect en tu dispositivos iOS y/o Android.

Una vez se ha instalado todo, sigue estos pasos para comenzar:

1. Asegurate de que la aplicación de Edge Inspect esta abierta en tu computadora.
2. Abre Edge Inspect en cualquier dispositivo que estés intentando probar (ten en mente que estarás limitado a un dispositivo si es que cuentas con la versión gratuita).
3. Asumiendo que todos los dispositivos se encuentran en la misma red que tu computadora, deberías ver tu computadora listada debajo de las conexiones de cada dispositivo.
4. Cuando des clic en tu conexión, se te proporcionara un código de acceso.
5. Dentro de Chrome en tu computadora, notaras el nuevo icono de Edge Inspect (generalmente, esta extensión esta a la derecha de la barra de dirección). Da clic al icono, y escribe el código de acceso a un lado de la lista de dispositivos (Figura 1), para completar el proceso de autorización.

Nota: Aunque puede ser obvio, si estas conectado a una VPN, puede que encuentres dificultades al detectar con tus dispositivos a la computadora.

Después del emparejamiento, puedes abrir y cerrar Edge Inspect en tu computadora o dispositivos sin tener que re-ingresar el código de acceso.

Navegando con Edge Inspect

Probar tus aplicaciones con Edge Inspect es incluso más fácil que la configuración. Simplemente navega usando tu navegador Chrome, y todos los dispositivos que hayan sido conectados seguirán esa navegación. Esto permite probar la apariencia y comportamiento de cualquier pagina en una variedad de dispositivos al mismo tiempo. Además, Edge Inspect evitara que tus dispositivos se suspendan, así que no necesitaras desbloquear los dispositivos cuando quieras probar la pagina. No estas limitado a solo navegar dentro de una sola pestaña; Edge Inspect mostrara el contenido dentro de las pestañas actuales al cambiar de pestaña.

Edge Inspect también te permite ver paginas en modo full screen, removiendo la aplicación predeterminada de Edge Inspect en Chrome. Para activar esta característica, dentro de la extensión de Chrome, da clic al icono para "show full screen on devices". Deberías de ver que la barra superior desaparece en todos los dispositivos al navegar a través de Edge Inspect, y da clic al icono de nuevo dentro de la extensión para hacerla aparecer de nuevo.

Por supuesto, navegar paginas en tiempo real es útil, pero muchas de las veces estarás desarrollando localmente. (Para más detalles sobre como usar Edge Inspect con hosts virtuales, el Blog del Equipo de Edge inspect tiene muchos posts sobre hosts virtuales). Afortunadamente, Edge Inspect soporta completamente la navegación desde tu localhost, permitiéndote probar aplicaciones conforme las vas desarrollando.

No es de extrañar que, Edge Inspect no puede cargar archivos a través de file:/// ya que ese archivo no existe en tus dispositivos. Como puedes esperar, si se esta navegando a través de paginas protegidas por contraseña, tendrás que identificarte en cada dispositivo. Si quieres refrescar la pagina o abrir la pagina dentro del navegador en el dispositivo, simplemente da clic al botón en la parte superior derecha de la ventana de Edge Inspect en el dispositivo. Como un tip, sin embargo, si tu sitio usa autenticación básica de HTTP puedes navegar por la URL usando el formato http://login:password@my.site.com/ para evitar la re-identificación en cada dispositivo.

Si quieres refrescar la pagina o abrirla dentro del navegador del dispositivo, simplemente da clic al botón en la parte superior derecha de la ventana de Edge Inspect en el dispositivo. Como una alternativa, también puedes dar clic en el icono de la extensión de Chrome para refrescar todos los dispositivos conectados simultáneamente. Refrescar limpiara el cache del dispositivo y solicita los nuevos recursos al servidor.

Depurando con Edge Inspect

Una de las mejores características de Edge Inspect es la depuración. Cuando das clic al icono de Edge Inspect en Chrome, veras un icono "<>" junto a cada dispositivo conectado. Dando clic a este icono comenzara la sesión de inspección remota y abrirá el panel de depuración. Edge Inspect usa weinre (web inspector remote) para la inspección remota, aunque parecerá familiar para algunos que han usado las herramientas de desarrollo de Chrome o Safari.

Una vez en el panel de depuración, puedes ver y editar el DOM y ver estos cambios reflejados en el dispositivo especifico en el que se este depurando la aplicación. Puedes ver los registros de la consola, e incluso muchos elementos que fueron registrados durante el evento onLoad de la pagina. Como probablemente sabes, estas capacidades son muy poderosas cuando se depuran problemas en HTML, CSS y JavaScript.

Actualmente hay unas cuantas limitantes cuando se depura con weinre. La linea de tiempo no devuelve ningún dato, incluso cuando se refresca la pagina, y la pestaña de red solo funciona para XHR. Como puedes esperar, tendrás que disparar los eventos en el dispositivo (esto es, tendrás que dar clic en el botón del dispositivo y no en la computadora) para ver la información enviada a consola. Mientras que puedes editar HTML, CSS y JavaScript, actualmente esto no significa que agregues una nueva linea -no hay opciones Edit As Text o Edit As HTML como en las herramientas de desarrollo de Chrome.

Para aquellos que están familiarizados con los lanzamientos anteriores de Edge Inspect bajo el nombre de Adobe Shadow, pueden estar familiarizados con el hecho de que, por defecto, se basa en los servidores weinre de Adobe. Sin embargo, las versiones recientes te permitirán especificar tu propio servidor weinre al dar clic derecho en la extensión de Chrome y eligiendo "options". Si estas interesado en como configurar un servidor weinre local para este propósito, el post "Usa tu propio servidor Weinre con Adobe Shadow" en el blog RIA Lab de Joseph proporciona una buena guía.

Otra característica muy buena de Edge Inspect es su integración con JS Bin. JS Bin es un sitio muy popular que te permite escribir, modificar y probar tus snippets de HTML, CSS y JavaScript en tiempo real a través del navegador. Edge Inspect permite ver solo la salida de tus script en las pantallas de los dispositivos conectados, permitiéndote editar en tiempo real lo que vez en los dispositivos. Si quieres ver esta característica en acción, revisa el vídeo de demostración de Remy Sharp.

Capturas de pantalla con Edge Inspect

Edge Inspect te permite guardar capturas de pantalla en cualquier dispositivo o todos al mismo tiempo. Para guardar una captura de pantalla a través de los dispositivos, simplemente abre la extensión de Edge Inspect en Chrome y da clic en el botón de la cámara. Esto transferirá las capturas de pantalla desde tus dispositivos a tu computadora. Al dar clic al botón del folder al lado de la cámara, abrirá la carpeta que contiene las capturas de pantalla. Para capturar una sola pantalla de dispositivo, simplemente abre el menú de acción en el dispositivo y da clic a Screenshot. Por ejemplo, la siguiente figura muestra una captura de mi blog ejecutándose en un Samsung Nexus S con Android 4.0 (Ice Cream Sandwich).

Como puedes ver, claramente necesito trabajar en esto (aunque mis habilidades de diseño son escasas). Otra cosa interesante a notar: la captura de pantalla es el viewport actual, de modo que si desplazaste o hiciste zoom antes de que se tomara la captura, la imagen contendrá el contenido actual del viewport. Ademas de la imagen, Edge Inspect guarda un archivo de texto con detalles muy útiles como la URL de la pagina, así como el tamaño de la pagina, el sistema operativo, el modelo del dispositivo, las dimensiones de la pantalla, y la densidad de pixeles. Puedes especificar la ubicación donde Edge Inspect coloque las capturas al dar clic derecho en la extencion de Edge Inspect en Chrome y seleccionar "Options". Yo veo esto muy útil para equipos de prueba que necesitan enviar notas a los desarrolladores explicando la naturaleza de un problema que vieron durante la prueba.

A donde ir desde aquí

Si estas construyendo una aplicación web que necesita ser probada en múltiples dispositivos, entonces no hay razón para que no agregues Edge Inspect a tu conjunto de herramientas. Es fácil de configurar, es fácil de usar y trabaja con cualquier IDE o editor, ademas de que ofrece muchas características que probablemente aun no sabes que tiene. Más importante aun, ahorraras tiempo y frustración potencial.

Por favor revisa este foro para más detalles acerca de problemas conocidos y preguntas hechas frecuentemente acerca de Edge Inspect. Además puedes conseguir información y consejos respecto al uso de Edge Inspect al revisar el Blog de Edge Inspect.

En Activ enseñamos el uso de de esta valiosa herramienta y como diseñar y desarrollar sitios como los mencionados en este post en nuestro curso de HTML5 para Móviles

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Macedo.

Almacenamiento de datos en aplicaciones móviles

Cuando construyes aplicaciones que permiten al usuario final el almacenar contenido, debes encontrar una solución para almacenar los datos en una forma persistente. Tienes algunas cuantas opciones:

1. Puedes almacenar todos los datos localmente en el dispositivo. PhoneGap proporciona acceso a una base de datos del lado del cliente a través de su API de Base de Datos. Funciona bien, especialmente con desarrolladores que hay trabajado con bases de datos de SQL. Pero los datos están confinados en el dispositivo. Si el usuario instala la aplicación en otro dispositivo (como en una tableta), entonces el usuario no podrá acceder a los mismos datos.
2. Puedes almacenar los datos en un servidor remoto. Es fácil configurar AJAX para conectarse a un servidor remoto para enviar o recibir datos. Pero esto requiere la configuración de un servidor, instalar algún tipo de intermediario (ColdFusion, PHP, Node, u otros) y configurar un API en el servidor para manejar la identificación de los usuarios, la creación de datos, consultas, y más. Si eliges esta opción, serás responsable del mantenimiento del servidor. Puedes salir a caminar, adoptar a un perro o regar tus plantas mientras estás en ello.
3. Puedes descargar el mantenimiento del servidor, la creación del API, los requerimientos de almacenamiento, y delegar esencialmente todas esas tareas al almacenar datos con una solución de terceros. Todo esto está disponible si usas la plataforma de aplicaciones móviles Parse.

Parse permite que los usuarios almacenen datos en sus servidores. Los datos pueden ser de cualquier tipo. ¿Quieres construir una plataforma para un blog? Puedes almacenar las entradas del blog. ¿Quieres construir un foro? Puedes almacenar los posts de los foros. ¿Quieres diseñar una red de compras especializada en las necesidades de los Zombis? Parse lo hace fácil.

La compra de Parse está estructurada en tres planes. El plan más básico, es 100% gratuito y proporciona capacidades importantes como parte de este servicio gratuito. Como desarrollador te puedes registrar gratis. Si evalúas Parse y decides que no es para ti, Parse incluye la posibilidad de exportar tus datos. No estas forzado a usar Parse, puedes usar una estrategia diferente. Parse es un asunto casual que rápidamente crece en el amor de muchos desarrolladores.

Parse ofrece muchas formas de usar su servicio. Puedes usar un conjunto de APIs que están escritas como librerías nativas. Mientras que los desarrolladores de PhoneGap comúnmente evitan trabajar con el lenguaje nativo de cada plataforma, aquellos que desean crear sus aplicaciones usando tecnologías nativas pueden tomar ventaja de los SDKs completamente especializados para su plataforma de desarrollo. (Por el momento hay SDKs disponibles para Android, iOS y Windows).

Además puedes usar un API sencilla basada en REST. Mientras que puedes usar esta plataforma desde PhoneGap, comúnmente se usa para el desarrollo del lado del servidor. Uno de los beneficios de Parse es la posibilidad de omitir por completo el trabajo con un servidor, aunque aún puedes usar un servidor web tradicional. Con el API de REST, tu servidor puede comunicarse con Parse para buscar y trabajar con datos.

Y finalmente, puedes usar el API de JavaScript. Esto permite a los desarrolladores de JavaScript el hacer uso completo del API de Parse desde PhoneGap o aplicaciones web. En la siguiente sección, aprenderás como usar el API de JavaScript y veras como agregar Parse a tu aplicación.

Trabajando con Parse

Para comenzar, regístrate en el sitio web de Parse.

1. Visita parse.com y crea una cuenta gratuita.

Después de haberte registrado, Parse mostrara el formulario de inicio para construir una nueva aplicación:

Ingresa el nombre de tu elección. Para los propósitos de este artículo, el nombre de la aplicación será ADCApp.

Después de haber completado el proceso de registro, aparecerá una página de bienvenida.

2. Da clic al enlace Dashboard (en el menú superior de la página de bienvenida).

Este dashboard proporciona muchas características. Por ahora, nos enfocaremos en las características relacionadas a la búsqueda de datos y configuración.

3. Revisa las opciones en la pestaña Information del lado izquierdo:

Esta pestaña contiene varias claves para la integración con el API de JavaScript. Para este ejemplo, solo necesitaras el ID de la Aplicación y la clave de JavaScript. Después, cuando se edite el código, se copiaran estos valores.

4. Da clic al enlace de Descargas en la parte superior de la página.

La sección de JavaScript incluye muchos enlaces, incluyendo una versión minified del SDK.

5. Descarga el SDK y colócalo en una nueva carpeta.
6. Descarga los archivos de ejemplo proporcionados aquí para obtener el código de esta aplicación y colocar los archivos en esta nueva carpeta.

Antes de ir más allá, deberíamos decidir lo que queremos construir. Parse nos permite almacenar datos de cualquier tipo. Para mantener las cosas sencillas en nuestra aplicación de ejemplo, diseñaremos una aplicación de notas. La aplicación te permite escribir nuevas notas así como ver las notas previamente creadas.

Creando una aplicación de notas

Para hacer las cosas lo más sencillas como sea posible, la aplicación no usara ningún framework de interfaz de usuario en particular. Esta no es la forma más elegante de desarrollar la aplicación, pero su objetivo principal es ilustrar como trabajar con el API de Parse.

1. Ejecuta el editor de HTML de tu elección, y crea un archivo HTML en la tura principal del sitio del proyecto.
2. Copia el código de abajo, pégalo en el archivo HTML y guárdalo.

<!doctype html>

<html lang="en">

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="jquery.min.js"></script>

<script src="parse.min.js"></script>

<script src="main.js"></script>

</head>

<body>

	<h2>Note Application</h2>

	<div id="notes"></div>

	<form id="addNote">

		<p><input type="text" id="noteTitle" placeHolder="Note Title"></p>

		<p><textarea id="noteBody" placeHolder="Enter note text here."></textarea></p>

		<p><input type="submit" id="addNoteBtn" value="Add Note"></p>

	</form>

</body>

</html>

Nota: El código de arriba hace referencia a parse.min.js. La copia del archivo que debes de haber descargado desde Parse.com incluye su versión, por ejemplo: parse-1.1.12.min.js. Puedes renombrar el archivo o solo editar el código de ejemplo para que sea el mismo nombre que el de tu archivo.

Esta aplicación carga jQuery, el SDK de Parse, y un archivo llamado main.js. El HTML consiste en una etiqueta DIV vacía y un formulario. La etiqueta DIV vacía contiene el contenido para cargar desde Parse, el cual vendrá al usuario después de publicar algo texto de contenido. El formulario en la aplicación permitirá que los usuarios ingresen nuevo contenido. En este caso, el formulario contiene dos campos para ingresar el título de la nota y el cuerpo de texto de la nota. Recuerda, Parse permite guardar cualquier cosa. Si tu concepto de notas incluye un campo relacionado al nivel de felicidad de la nota -solo agrégalo.

3. Toma un momento para revisar main.js, el cual contiene mucha de la lógica de la aplicación.

//Parse related keys
var PARSE_APP = "[Parse.com Application ID]";
var PARSE_JS = "[Parse.com JavaScript Key]";

$(document).ready(function() {
	Parse.initialize(PARSE_APP, PARSE_JS);

	NoteObject = Parse.Object.extend("NoteObject");

	$("#addNoteBtn").on("touchend", function(e) {
		e.preventDefault();
		
		//Grab the note details, no real validation for now
		var title = $("#noteTitle").val();
		var body = $("#noteBody").val();

		var note = new NoteObject();
		note.save({title:title, body:body}, {
			success:function(object) {
				console.log("Saved the object!");
			}, 
			error:function(object,error) {
				console.dir(error);
				alert("Sorry, I couldn't save it.");
			}
		});
	});
});

4. Edita el código, reemplazando las variables PARSE_APP y PARSE_JS con el ID de la aplicación y la clave de JavaScript desde el dashboard de Parse.

Puedes usar la función de jQuery document.ready() para ejecutar código cuando se haya terminado de cargar la página. Antes de que podamos usar Parse, primero debemos inicializarla. Es un simple llamado que hace uso de las variables creadas con anterioridad.

La siguiente línea es importante:

NoteObject = Parse.Object.extend("NoteObject");

Cuando decides el tipo de dato que quieres crear, debes nombrarlo. En el código proporcionado, se llama NoteObject. Una vez se llama al objeto Parse, puedes pedirle al SDK de Parse que cree un tipo de objeto para extender la clase Object. El resultado es NoteObject que actúa como una clase nueva.

Así como leas el código, veras la lógica sencilla vinculada al formulario. Cuando se presione el botón, el código capturara el texto contenido en los campos del formulario.

Nota: Para probar los eventos táctiles en un navegador de escritorio, se puede cambiar temporalmente el código a clic, o usar las Herramientas de Desarrollo de Chrome para habilitar la simulación táctil. Para usar estas herramientas, actualiza las opciones al dar clic al icono de configuración en la esquina inferior derecha de la caja de dialogo de las herramientas de desarrollo, y entonces selecciona la pestaña Overrides. Desplaza hacia abajo la página y habilita la opción Emulate Touch Events.

A continuación, se hará una nueva instancia de NoteObject y se ejecutara el método save en esta. El primer argumento del método save son los datos. En este ejemplo, hay una clave llamada title y una clave llamada body. Estas dos claves representan los campos de entrada del NoteObject. Sin embargo, puedes usar los nombres que prefieras, debido a que Parse es flexible. Cuando sea necesario, incluso puedes cambiar los nombres de las claves en otro momento (aunque las mejores prácticas sugieren mantener consistentes los nombres).

El siguiente argumento es un objeto genérico de JavaScript que contiene las claves success y error. Ambas son funciones que representan la lógica que es llamada basada en el resultado de la operación save. En caso de error, se mostrara una alerta. Cuando el contenido de la nota se ha guardado correctamente, el código mostrara un mensaje de éxito directamente en la consola de JavaScript. Después podrás mejorar estos comportamientos.

Probando la aplicación

Después de haber editado la aplicación de ejemplo, es hora de probarla.

• Abre el archivo HTML en tu navegador. Ingresa algún texto a los campos y da clic a Save.

Si la consola de JavaScript está abierta en tu navegador, podrás ver el resultado.

• Para confirmar que el contenido se guardó correctamente en el framework Parse, visita el dashboard de Parse, da clic a la pestaña Data Browser, y veras el texto guardado.

Nota que la lista incluye propiedades adicionales que fueron almacenados con los datos. Parse captura información útil relacionada con los campos, como createdAt y updatedAt. Además nota que ha sido asignado un objectId a los datos almacenados.

Tu aplicación HTML solo crea contenido y lo almacena, gratis y sin un servidor (bueno, sin requerir la configuración de un servidor).

Visualizando los datos almacenados en Parse

A continuación, veras como listar objetos. Revisa la siguiente versión actualizada de main.js que lista el contenido almacenado cuando se carga la aplicación.

//Parse related keys
var PARSE_APP = "[Parse.com Application ID]";
var PARSE_JS = "[Parse.com JavaScript Key]";

$(document).ready(function() {
	Parse.initialize(PARSE_APP, PARSE_JS);

	NoteObject = Parse.Object.extend("NoteObject");

	function getNotes() {
		var query = new Parse.Query(NoteObject);

		query.find({
			success:function(results) {
				console.dir(results);
				var s = "";
				for(var i=0, len=results.length; i<len; i++) {
					var note = results[i];
					s += "
";
					s += ""+note.get("title")+"
";
					s += "Written "+note.createdAt + "
";
					s += note.get("body");
					s += "
";
				}
				$("#notes").html(s);
			},
			error:function(error) {
				alert("Error when getting notes!");
			}
		});
	}

	$("#addNoteBtn").on("touchend", function(e) {
		e.preventDefault();

		//Grab the note details, no real validation for now
		var title = $("#noteTitle").val();
		var body = $("#noteBody").val();

		var note = new NoteObject();
		note.save({title:title, body:body}, {
			success:function(object) {
				console.log("Saved the object!");
				$("#noteTitle").val("");
				$("#noteBody").val("");
				getNotes();
			}, 
			error:function(object,error) {
				console.dir(error);
				alert("Sorry, I couldn't save it.");
			}
		});
	});

	//call getNotes immediately
	getNotes();

});

En esta sección, nos enfocaremos en actualizar el archivo de la aplicación.

• Revisa la función getNotes que inicia creando una instancia del objeto Parse.Query.

function getNotes() {
	var query = new Parse.Query(NoteObject);

	query.find({
		success:function(results) {
			console.dir(results);
			var s = "";
			for(var i=0, len=results.length; i<len; i++) {
				var note = results[i];
				s += "
";
				s += ""+note.get("title")+"
";
				s += "Written "+note.createdAt + "
";
				s += note.get("body");
				s += "
";
			}
			$("#notes").html(s);
		},
		error:function(error) {
			alert("Error when getting notes!");
		}
	});
}

El código anterior ilustra cómo puedes consultar datos desde Parse. La clase NoteObject es enviada, así que la consulta funciona solo con esa clase en particular. Cuando se ejecuta el método find, los resultados están en un arreglo. (En el ejemplo de arriba, esta es la propiedad createdAt). Aquí hay un ejemplo de cómo se muestran los datos en Chrome:

El manejador para agregar notas también esta actualizado para limpiar al formulario y llamar de nuevo a la función getNotes. Ese no es el enfoque más elegante, pero funciona. Parse tiene un API de consulta increíblemente poderoso que permite muchas formas de filtrar las opciones. Si quieres hacer que esta aplicación funcione mejor, puedes modificar el código para obtener resultados de objetos creados después del timestamp, basado en el momento en que fue enviado el formulario.

Recomendaciones para extender la aplicación

Este articulo solo rosa la superficie de lo que se puede hacer utilizando Parse. Para obtener más información lee la Guía de JavaScript. Algunas características interesantes son:

• Manejo de usuarios: Esto incluye la lógica de almacenamiento de usuarios que de otra forma es difícil de configurar. Por ejemplo, puedes asegurarte de que las direcciones de correo no se dupliquen, manejar el reinicio de contraseñas, y cachar las credenciales de identificación para la funcionalidad de login automático.
• Seguridad completa: En este proyecto de ejemplo, todos los objetos son retornados al dispositivo móvil. Pero en el mundo real de las aplicaciones, las notas estarían asociadas con sus creadores. Parse tiene un modelo de usuarios robusto, con soporte para asociar los objetos a los usuarios. Además puedes crear grupos y conjuntos de permisos para los objetos.
• Integración con Twitter y Facebook: Nunca he escuchado de otro sitio, pero si en tu caso lo has hecho, Parse te ayuda a la integración con estos.
• Geolocalización: Mientras que Parse no agrega soporte directo para geolocalización, incluye una forma especial de manejar objetos que tienen datos de GPS. Así que si tu aplicación accede a la ubicación del usuario, puedes simplemente almacenar esos datos con un objeto. Puedes usar el API de consulta para ver los datos cercanos a la ubicación.

A dónde ir desde aquí

En este artículo, aprendiste como usar Parse para almacenar datos de aplicaciones móviles. Puedes estar pensando en cómo encaja PhoneGap en este flujo de trabajo. PhoneGap ofrece la oportunidad de aprovechar librerías de JavaScript y APIs para llevarlas a los dispositivos móviles. Toda la información proporcionada acerca de Parse trabaja bien con PhoneGap. Puedes usar el código de este artículo, cargarlo a PhoneGap Build, y crear una aplicación móvil en un tiempo de casi un minuto.

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Macedo.

Un aspecto importante de JavaScript es que raramente hay una sola forma correcta de realizar cualquier tarea. JavaScript es un lenguaje libremente escrito, dinámico y expresivo, lo cual significa que usualmente hay muchas formas de ejecutar la misma tarea. No estoy diciendo que los métodos descritos aquí para crear objetos son la forma correcta de hacerlo o incluso la mejor manera, pero yo siento que están muy cerca de la verdadera naturaleza del lenguaje y te ayudaran a comprender que está pasando bajo las capas si eliges utilizar otros métodos.

Para ayudarte a comprender mejor estos conceptos, este artículo describe la creación del sistema de partículas básica con procesamiento de múltiples objetivos. Esta es una tarea bastante compleja para representar en una prueba del mundo real de los conceptos que demostraré, en lugar de un sencillo Hello World.

Conceptos básicos de la creación de un objeto

El objetivo de este artículo es la creación de objetos JavaScript. Muchos tutoriales te dirán que crees una función constructora, agregues métodos a la propiedad prototype de la función, y entonces uses el operador new de esta forma:

 function Foo() {
  this.name = "foo";
  }
  Foo.prototype.sayHello = function() {
  alert("hello from " + this.name);
  };
  var myFoo = new Foo();
  myFoo.sayHello();

El objeto recientemente creado ahora tiene todas las propiedades que fueron definidas en la función constructora del prototipo. Esto crea algo que luce mucho más a una clase basada en lenguaje. Para hacer nuevas “subclases” que heredan esa “clase”, deberías establecer la propiedad prototype de las “subclases” a una nueva instancia de la “clase” original. (estoy usando comillas debido a que las entidades no son clases o subclases reales).

function Bar() {
  }
  Bar.prototype = new Foo();
 
  Bar.prototype.sayGoodbye = function() {
  alert("goodbye from " + this.name);
  }
  var myBar = new Bar();
  myBar.sayHello();
  myBar.sayGoodbye();

El problema es que debido a que esta estructura luce similar a las clases reales en otros lenguajes, la gente espera que se comporten exactamente como las clases reales se comportan en otros lenguajes. Pero mientras más trabajes con estos tipos de “clases” verás más que no se comportan de esa forma. Así que la gente se molesta con JavaScript, y comienza a pensar que es un mal lenguaje que no puede ser utilizado para algo serio. Otros intentarán arreglar estas estructuras parecidas a las clases, al construir frameworks muy complejos para obtener funciones constructoras y prototipos que luzcan y se comporten más como las clases.

Personalmente, veo esto como un esfuerzo equivocado. No es necesariamente incorrecto, pero la energía que será gastada probablemente produciría mejores resultados si fuera en otra dirección.

Alcanzando la herencia de prototipos

JavaScript no es un lenguaje basado en clases, pero es uno basado en prototipos. El reusó de código no es hecho al crear plantillas de clases que son utilizadas para instanciar objetos, es hecho al crear nuevos objetos directamente, y entonces crear otros objetos basados en estos ya existentes. El objeto existente es asignado como el prototipo del nuevo objeto y entonces se le puede agregar nuevo comportamiento al nuevo objeto. Es un sistema muy elegante y está muy bien implementado en lenguaje io, el cual te invito a revisar.

Antes de ir más lejos, quiero aclarar el término prototipo. Primero, está la propiedad prototype de una función constructora como se mostró en la última sección de ejemplo. Hay otra propiedad oculta que es el prototipo real de un objeto. Esto puede ser muy confuso. La propuesta de ECMAScript se refiere a esta propiedad oculta como [[Prototype]]. Esto es expuesto en algunos entornos de JavaScript como la propiedad __proto__, pero esta no es una parte estándar del lenguaje y no debería ser contada como tal. Cuando creas un nuevo objeto utilizando new con una función constructora, se establece el [[Prototype]] de ese nuevo objeto con una referencia al prototipo de la función constructora.

Además de esta confusión de nombramiento, en el lenguaje se tuvieron que tomar dos decisiones de diseño que agregan confusión desde entonces. Primero, debido a la preocupación de que algunos desarrolladores no están conformes con la herencia de prototipos, se introdujeron las funciones constructoras y el operador new. Segundo, no había forma nativa directa para crear un nuevo objeto con otro objeto como su [[Prototype]], excepto a través del nuevo operador new con una función constructora.

Afortunadamente, muchos navegadores soportan el método Object.create. Este método toma un objeto existente como parámetro. Retorna un nuevo objeto que tiene asignado al objeto existente como su [[Prototype]]. Aún más, este método es muy fácil de crear para aquellos entornos que no lo soportan.

if(typeof Object.create !== "function") {
  Object.create = function (o) {
  function F() {}
  F.prototype = o;
  return new F();
  };
  }

Entonces, ¿cómo rescribirías el ejemplo anterior usando Object.create? Primero crea un objeto foo que tiene una propiedad name y una función sayHello.

var foo = {
  name: "foo",
  sayHello: function() {
  alert("hello from " + this.name);
  }
  };
  foo.sayHello();

Entonces, se usa Object.create para hacer un objeto bar que tiene a foo como su prototipo, y se le agrega una función sayGoodBye:

var bar = Object.create(foo);
  bar.sayGoodbye = function() {
  alert("goodbye from " + this.name);
  }
  bar.sayHello();
  bar.sayGoodbye();

También es muy común el crear y extender una función que simplifica el agregar métodos y propiedades al objeto nuevo. El siguiente método simplemente copia cualquier propiedad desde props a obj:

function extend(obj, props) {
  for(prop in props) {
  if(props.hasOwnProperty(prop)) {
  obj[prop] = props[prop];
  }
  }
  }

Esto te permite crear bar de esta forma:

var bar = Object.create(foo);
  extend(bar, {
  sayGoodbye: function() {
  alert("goodbye from " + this.name);
  }
  });

No hay gran cosa aquí, pero simplifica las cosas grandemente cuando se están agregando muchas más propiedades o métodos.

Muy bien, ahora que ya revisamos los fundamentos, podemos comenzar a ponerlos juntos en un escenario del mundo real.

Creando partículas usando Object.create

Las partículas utilizadas en el proyecto de ejemplo serán muy básicos: puntos negros que se mueven alrededor en un espacio bidimensional y rebotan en las paredes. Estos además soportan gravedad y fricción según sea necesario. Se definirá un objeto particular que tiene todas las propiedades y métodos necesarios, y se colocara en un objeto adc para evitar contaminar el namespace global. Para más información de namespaces, revisa el artículo de Wikipedia sobre JavaScript discreto.

var adc = adc || {};
 
  adc.particle = {
  x: 0,
  y: 0,
  vx: 0,
  vy: 0,
  gravity: 0.0,
  bounce: -0.9,
  friction: 1.0,
  bounds: null,
  color: "#000000",
  context: null,
 
  update: function() {
  this.vy += this.gravity;
  this.x += this.vx;
  this.y += this.vy;
  this.vx *= this.friction;
  this.vy *= this.friction;
 
  if(this.x < this.bounds.x1) {
  this.x = this.bounds.x1;
  this.vx *= this.bounce;
  }
  else if(this.x > this.bounds.x2) {
  this.x = this.bounds.x2;
  this.vx *= this.bounce;
  }
  if(this.y < this.bounds.y1) {
  this.y = this.bounds.y1;
  this.vy *= this.bounce;
  }
  else if(this.y > this.bounds.y2) {
  this.y = this.bounds.y2;
  this.vy *= this.bounce;
  }
  },
 
  render: function() {
  if(this.context === null) {
  throw new Error("context needs to be set on particle");
  }
  this.context.fillStyle = this.color;
  this.context.fillRect(this.x - 1.5, this.y - 1.5, 3, 3);
  }
  };

Después, se necesitará un sistema de partículas para realizar el seguimiento de todas las partículas y controlar su actualización y procesamiento.

var adc = adc || {};
 
  adc.particleSystem = {
  particles: [],
 
  addParticle: function(particle) {
  this.particles.push(particle);
  },
 
  update: function() {
  var i,
  numParticles = this.particles.length;
 
  for(i = 0; i < numParticles; i += 1) {
  this.particles[i].update();
  }
  },
 
  render: function() {
  var i,
  numParticles = this.particles.length;
  for(i = 0; i < numParticles; i += 1) {
  this.particles[i].render();
  }
  }
  };

Y finalmente, se necesitará un archivo principal que cree el sistema, cree y agregue todas las partículas, y configure el bucle de animación.

(function() {
  if (typeof Object.create !== "function") {
  Object.create = function (o) {
  function F() {}
  F.prototype = o;
  return new F();
  };
  }
 
  var system,
  numParticles,
  canvas,
  context,
  bounds;
 
  function initSystem() {
  system = Object.create(adc.particleSystem);
  numParticles = 200;
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  bounds = {
  x1: 0,
  y1: 0,
  x2: canvas.width,
  y2: canvas.height
  };
  }
 
  function initParticles() {
  var i, particle;
  for(i = 0; i < numParticles; i += 1) {
  particle = Object.create(adc.particle);
  particle.bounds = bounds;
  particle.context = context;
  particle.x = Math.random() * bounds.x2;
  particle.y = Math.random() * bounds.y2;
  particle.vx = Math.random() * 10 - 5;
  particle.vy = Math.random() * 10 - 5;
  system.addParticle(particle);
  }
  }
 
  function animate() {
  context.clearRect(bounds.x1, bounds.y1, bounds.x2, bounds.y2);
  system.update();
  system.render();
  }
 
  initSystem();
  initParticles();
  setInterval(animate, 1000 / 60);
  }());

El código en este archivo es contenido en una expresión de función que se invoca inmediatamente, de nuevo para evitar la contaminación del namespace. (Para más información de expresiones de función invocadas inmediatamente, revisa el blog de Ben Alman donde habla del tema. Incluye el suplemento de Object.create para los navegadores que pudieran necesitarlo. Todo esto está reunido en el siguiente archivo HTML:

<!DOCTYPE html>
  <html>
  <head>
  <title>Particles v1</title>
  <style type="text/css">
  .html, body {
  margin: 0;
  padding: 0;
  }
  </style>
 
  </head>
  <body>
  <div>
  <canvas id="canvas"/>
  </div>
 
  <script type="text/javascript" src="v1/particle.js"></script>
  <script type="text/javascript" src="v1/particleSystem.js"></script>
  <script type="text/javascript" src="v1/main.js"></script>
  </body>
  </html>

Las líneas importantes, para el propósito de este artículo, son aquellas que crean el sistema de partículas:

system = Object.create(adc.particleSystem);

Y las que crean a las mismas partículas:

particle = Object.create(adc.particle);
  particle.bounds = bounds;
  particle.context = context;
  particle.x = Math.random() * bounds.x2;
  particle.y = Math.random() * bounds.y2;
  particle.vx = Math.random() * 10 - 5;
  particle.vy = Math.random() * 10 - 5;

Todavía no se ha implementado ningún tipo de función extendida, pero aquí se puede ver donde sería útil -llamando a extender una sola vez, en lugar de hacerlo después de cada línea en que se asignan propiedades. En la siguiente interacción, se agregara eso y algo más.

Agregando extend e init

Para la segunda versión del sistema de partículas, en vez de tener el archivo principal, crear y extender cada partícula por sí misma, sería mejor tener partículas que sepan cómo crear, extender e inicializarse a sí mismas. Para soportar eso, se pueden usar dos funciones nuevas, extend e init, las cuales son agregadas a adc.particle:

var adc = adc || {};
 
  adc.particle = {
  x: 0,
  y: 0,
  vx: 0,
  vy: 0,
  gravity: 0.0,
  bounce: -0.9,
  friction: 1.0,
  bounds: null,
  color: "#000000",
  context: null,
 
  extend: function(props) {
  var prop, obj;
  obj = Object.create(this);
  for(prop in props) {
  if(props.hasOwnProperty(prop)) {
  obj[prop] = props[prop];
  }
  }
  return obj;
  },
 
  init: function() {
  this.x = Math.random() * this.bounds.x2;
  this.y = Math.random() * this.bounds.y2;
  this.vx = Math.random() * 10 - 5;
  this.vy = Math.random() * 10 - 5;
  },
  // …
  // rest of methods are the same as version 1
  };

El método extend se encarga de crear nuevos objetos, pasarle this como parámetro a Object.create. Así, hace una copia de sí mismo. Entonces toma las propiedades que hayan sido enviadas dentro de extend, las copia dentro del nuevo objeto que recién creó, y finalmente retorna el nuevo objeto.

Ahora, en lugar de llamar Object.create(adc.particle) y establecer y ajustar propiedad por propiedad, se puede llamar adc.particle.extend, pasándole un objeto con las propiedades que se le quieran establecer, y entonces llamar init en la partícula creada recientemente.

Cuando se agrega el método extend al sistema de partículas, el archivo principal llega a ser más simple. En initSystem, se llama a adc.particleSystem.extend() para crear el nuevo sistema. No se necesita agregar cualquier propiedad al sistema, así se llama a extend sin parámetros. No hay muchos cambios aquí:

function initSystem() {
  system = adc.particleSystem.extend();
  numParticles = 200;
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  bounds = {
  x1: 0,
  y1: 0,
  x2: canvas.width,
  y2: canvas.height
  };
  }

En el método initParticles, hay una mejora:

function initParticles() {
  var i, particle;
  for(i = 0; i < numParticles; i += 1) {
  particle = adc.particle.extend({
  bounds: bounds,
  context: context
  });
  particle.init();
  system.addParticle(particle);
  }
  }

Ahora se puede llamar a adc.particle.extend para crear cada partícula, pasándole un objeto que contiene los límites y el contexto, los cuales son copiados para cada partícula. Finalmente, se puede llamar a init en la nueva partícula, lo cual se encarga de establecer su posición y velocidad aleatoriamente. Esta versión trabaja exactamente igual que la última vez, pero la creación individual de partículas ha sido simplificado.

Agregando herencia

La tercera versión del sistema de partículas soporta herencia. Esto es clave para reusar código. Se tiene un tipo de objeto y se quiere hacer otro tipo de objeto que sea ligeramente diferente. No se quiere recrear completamente el primer objeto con un par de cambios.

La reutilización de código tiene dos beneficios importantes. Primero, hay menos código que escribir. Ciertamente no se querrá escribir el mismo código dos veces. Tampoco se quiere copiar y pegar código, ya que esto puede hacer que las cosas se salgan de sincronía, con una función implementada de una forma aquí y la misma función implementada un poco diferente por allá. El segundo beneficio es mejor rendimiento. Cuando se tiene el mismo código duplicado en la aplicación, toma más tiempo descargarla, consume más memoria, y puede causar que la ejecución del código sea lenta, particularmente en la inicialización de objetos (debido a que inicializa el mismo código una y otra vez).

Actualmente el sistema de partículas procesa en un canvas de HTML5. Ahora, se puede querer un tipo diferente de partículas que se procesen a sí mismas como un objeto DOM. Idealmente, casi todo el código de las partículas sería reutilizado, solo con un método de procesamiento diferente. Entonces, con gran confianza, se puede tomar particle.js y removerle el método render.

Después, hacer dos archivos nuevos, canvasParticle.js y comParticle.js. La versión de canvas será similar a lo que acabamos de hacer:

var adc = adc || {};
 
  adc.canvasParticle = adc.particle.extend({
  render: function() {
  if(this.context === null) {
  throw new Error("context needs to be set on particle");
  }
  this.context.fillStyle = this.color;
  this.context.fillRect(this.x - 1.5, this.y - 1.5, 3, 3);
  }
  });

Este código es muy sencillo. Solo se llama a adc.particle.extend, pasándole un objeto que contenga el método render antiguo. Eso creará un nuevo objeto que tiene particle como su [[Prorotype]], y render como un nuevo método directamente en el objeto.

Después se tendrá que cambiar un poco a main.js para que permita los nuevos tipos de objetos. Crea un archivo mainCanvas.js para configurar las partículas basadas en canvas. Esto solo difería en una línea, donde utiliza el tipo adc.canvasParticle para inicializar las partículas, en lugar de solo adc.particle:

function initParticles() {
  var i, particle;
  for(i = 0; i < numParticles; i += 1) {
  particle = adc.canvasParticle.extend({
  bounds: bounds,
  context: context
  });
  particle.init();
  system.addParticle(particle);
  }
  }

El archivo particleSystem.js puede permanecer sin cambios, pero por supuesto el archivo HTML tendrá que reflejar los nuevos recursos que se han creado. Este ejemplo debería funcionar idénticamente a las primeras dos versiones.

Ahora estás listo para crear la versión DOM.

El archivo domParticle.js será casi tan sencillo como canvasParticle.js. Este asume que hay un elemento que puede posicionar, y lo hace utilizando propiedades de estilo:

adc.domParticle = adc.particle.extend({
  render: function() {
  if(this.element === null) {
  throw new Error("element needs to be set on particle");
  }
  this.element.style.left = this.x;
  this.element.style.top = this.y;
  }
  });

Pero en este ejemplo, el archivo HTML y main.js necesitarán cambios importantes. Además de referenciar diferentes archivos fuente, el HTML puede eliminar el elemento canvas y agregar un contenedor div en el cual poner todas las partículas:

<html>
  <head>
  <title>Particles v3</title>
  <style type="text/css">
  .html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  }
  </style>
 
  </head>
  <body>
  <div id="container">
  </div>
 
  <script type="text/javascript" src="v3/particle.js"></script>
  <script type="text/javascript" src="v3/domParticle.js"></script>
  <script type="text/javascript" src="v3/particleSystem.js"></script>
  <script type="text/javascript" src="v3/mainDom.js"></script>
  </body>
  </html>

El archivo main.js se convertirá en mainDom.js y obviamente necesitará cambiar un poco para crear domParticles y darles elementos individuales en vez de referencias al contexto del canvas:

(function() {
 
  var system,
  numParticles,
  container,
  bounds;
 
 
  function createElement() {
  var el = document.createElement("div");
  el.style.position = "absolute";
  el.style.width = 3;
  el.style.height = 3;
  el.style.backgroundColor = "#000000";
  container.appendChild(el);
  return el;
  }
 
  function initSystem() {
  system = adc.particleSystem.extend();
  numParticles = 200;
  container = document.getElementById("container");
  bounds = {
  x1: 0,
  y1: 0,
  x2: window.innerWidth,
  y2: window.innerHeight
  };
  }
 
  function initParticles() {
  var i, particle;
  for(i = 0; i < numParticles; i += 1) {
 
  particle = adc.domParticle.extend({
  bounds: bounds,
  element: createElement()
  });
  particle.init();
  system.addParticle(particle);
  }
  }
 
  function animate() {
  system.update();
  system.render();
  }
 
 
  initSystem();
  initParticles();
  setInterval(animate, 1000 / 60);
 
  }());

Esto hace uso de una nueva función, createElement, que solamente crea un div, lo estiliza, y lo agrega al contenedor div. Esto es lo que posicionara las partículas cuando se llame al método render.

Este último ejemplo debería ser casi idéntico al de todas las otras versiones. Por supuesto, hay muchas formas de optimización y mejoras que se pueden hacer para mejorar todos estos ejemplos. A propósito lo hice sencillo para ilustrar mejor el aspecto de la herencia.

A dónde ir desde aquí

Puede que aún prefieras funciones constructoras y el operador new. Personalmente encuentro este método de creación de objetos muy limpio y de acuerdo a la naturaleza básica de prototipos de JavaScript.

Te invito a explorar el código fuente proporcionado en los archivos de ejemplo de este tutorial y probar el sistema de partículas en un navegador que soporte HTML5.

A medida que tu necesidad de aplicaciones más complejas crezca, puedes agregar características dentro de esta configuración básica. Para más información, revisa los siguientes recursos:

Herencia de Prototipos en JavaScript, de Douglas Crockford
Herencia Clásica en JavaScript, de Douglas Crockford
Objetos JavaScript 005 JSJ, de WOODY2SHOES

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Macedo.

En un momento cuando las discusiones acerca de las mejores prácticas para el desarrollo de aplicaciones web, nunca habían estado tan animadas con Brackets, que es de código abierto, es una gran oportunidad para los desarrolladores para presenciar cómo se puede construir un proyecto complejo de la vida real basado en estándares web. Mientras que el editor de código se encuentra todavía en su infancia (Sprint 11 se acaba de lanzar en el momento de escribir estas líneas), ya hay muchas cosas que puedes aprender al estudiar su código fuente actual.

Organización General

Brackets está alojado en GitHub, dentro de dos repositorios diferentes: uno del código fuente principal, responsable del núcleo de la aplicación web; el otro contiene el recurso nativo de la aplicación shell, lo que hace posible que el editor se ejecute como una aplicación independiente para Windows y Mac OS (antes de preguntar. si, Linux está en la ruta). Por esta aplicación nativa shell, Brackets utiliza el framework de Chromium Embedded, que incorpora una versión de WebKit.

La razón de esta preocupación en cuanto a la separación, podría ser obvia:

Brackets tiene el potencial para ser ejecutado en muchos lugares fuera de las aplicaciones de escritorio nativas. Esta universalidad es la principal fortaleza de los estándares web, y es lo que hace que el proyecto sea tan emocionante, si quieres pregúntame.

En términos de organización de archivos, el repositorio central de Brackets tiene una estructura de carpetas bastante auto-explicativa, además está muy bien documentado, así que creo que no es necesario detallar todos y cada uno de ellos secuencialmente aquí. En cambio, prefiero destacar los distintos aspectos que me llamaron la atención como desarrollador.

Convenciones de código principal

Un vistazo rápido a cualquier archivo JavaScript en el repositorio responderá a una pregunta común acerca de las aplicaciones web modernas: Sí, el código JavaScript de Brackets está escrito usando módulos. Esto no debería sorprenderte. Los módulos son una gran forma para proporcionar un ámbito claro, limitado y una adecuada encapsulación de código JavaScript. Es también una estupenda forma para proporcionar un nivel básico de privacidad, ya que sólo los miembros expuestos a través del objeto devuelto están públicamente disponibles.

Como puedes saber, hay varias propuestas de formato para los módulos, pero sólo dos son realmente usadas hoy en día: CommonJS Modules JS y AMD (Definición de Módulo Asíncrono). El equipo de Brackets ha elegido un enfoque híbrido: utiliza el formato de CommonJS dentro de contenedores compatibles de AMD:

define(function (require, exports, module) {
  var otherModule = require("path/to/required/Module");
  var _privateStuff="I'm private";
  var publicStuff="I need to be accessed from outside";
  function doStuff(){
  console.log(publicStuff);
  }
  // Exposing public members through the exports object
  exports.doStuff=doStuff;
  exports.publicStuff= publicStuff;
  });

Observa que no se utiliza el parámetro del módulo: es sólo para el cumplimiento de CommonJS. También, los módulos son cargados mediante el popular modulo/script RequireJS. Para más información sobre módulos y cargadores de modulo, recomiendo leer el escrito de Addy Osmani Acerca de JavaScript Modular. Por cierto, algo importante que debes tener en mente es que un módulo y su correspondiente archivo, puede definir cero, una, o muchas clases. Así que si estás buscando una definición de clase, no es necesario buscar el nombre del archivo correspondiente.

Otra cosa un poco interesante que puedes encontrar mientras pases por el repositorio es el uso de un mecanismo diferido/promesa. Brevemente, es un mecanismo de respaldo de llamada en el cual un objeto diferido puede registrarse y enlazar múltiples funciones de respaldo de llamadas, y llamarlas de acuerdo a su estado (Por lo general, pendiente, satisfactorio o fracaso). Este patrón se utiliza para controlar las APIs asíncronas, las cuales son necesarias únicamente sí en una versión hospedad del navegador del editor, todas la operaciones I/O serían asíncronas. Para aprender más acerca de este patrón, te recomiendo leer the Deferred Object in the jQuery docs o CommonJS Promises/A proposal.

En caso de que te estés preguntando, Brackets no utiliza cualquier framework de micro arquitectura de terceros. Encontrarás algunos conceptos comunes como: modelos, vistas y controles, pero no formalizados alrededor de un mecanismo en particular.

Por último, hay una página en el wiki que describe las convenciones de código utilizadas para Brackets. Aunque nada de lo que vi debería sorprender a cualquier desarrollador JavaScript, creo es importante para un proyecto abierto, acordar y comunicar sobre esas prácticas, aunque son bastante comunes.

Administración de documentos y edición de código

Mucho de lo que hace a Brackets una gran herramienta para editar el código proviene de la utilización de un gran proyecto de terceros: CodeMirror. Todo sobre el diseño de un documento de texto, que representa al código y el modificarlo en forma adecuada, proviene de CodeMirror, incluyendo la gestión de sintaxis y enfoque.

La administración de proyectos y los documentos, sin embargo, se manejan por separado. Esta es la lógica responsable de cosas como la definición de un proyecto o un conjunto de trabajo, seleccionar un archivo y realizar el seguimiento de los archivos abiertos dentro de ese proyecto. Si bien esto puede parecer trivial cuando se ponen así, esto es realmente parte fundamental de cualquier software diseñado para editar documentos.

Varias clases están involucradas en este proceso, como son Document, Editor y sus respectivos administradores, y así entender que su relación es esencial para comprender la arquitectura de Brackets.

Mientras que un documento representa un archivo y expone métodos para editarlo mediante programación, un Editor encapsula la interfaz de usuario para editar el documento. Documentos y editores tienen una relación uno a muchos (un documento puede ser editado por varios Editores). Puedes ver el Documento como un modelo y el Editor como un intermediario entre una vista y, el Documento representado como un objeto.

El DocumentManager y el EditorManager pueden crear, eliminar clases, y así proporcionar un acceso central para todos los documentos y editores, respectivamente. Por ejemplo, para acceder documento actual, puedes pedir el DocumentManager:

var currentDoc = DocumentManager.getCurrentDocument();

Pero ya que el editor sigue revisando el documento que se está editando, y el EditorManager administra todos los editores; también podría ir de esta manera:

var currentDoc = EditorManager.getFocusedEditor().document;

Observa que el Editor actual y su correspondiente documento no necesariamente corresponden a la pestaña abierta actualmente en la interfaz de usuario, ya que Brackets tienen una noción de editores en línea que pueden venir en la parte superior del editor principal en tamaño completo, que representa el documento abierto actualmente.

Los editores resumen la aplicación de CodeMirror, proporcionando métodos para obtener y establecer la selección, posición del cursor, posición de desplazamiento y otras propiedades. La API de CodeMirror puede aún ser accedida directamente a través de CodeMirror, pero debes utilizar los métodos de Documentos o Editor.

El API Document expone las operaciones de edición de texto como setText() y replaceRange(), que automáticamente se refleja en todos los Editores asociados con ese Documento. Por lo tanto, para modificar el texto, simplemente usa la API Document, independientemente de los Editores:

currentDoc.replaceRange("Hello world", startPosition, endPosition);

La administración de selección, sin embargo, está relacionada con una vista correspondiente, por lo que solo está disponible a través del objeto Editor, utilizando métodos como getSelectedText() y setSelection(start, end). Aquí cómo podrías definir la selección del documento que actualmente tiene el foco:

EditorManager.getFocusedEditor().setSelection({line:0, ch:0}, {line:0, ch:5});

Finalmente, una advertencia: como solución para evitar la falta de referencias en JavaScript, sí, cuando es necesario hacer una referencia de un objeto Document, tienes que llamar a Document.addRef() y, por el contrario Document.releaseRef() cuando hayas terminado. Esto incluye todos los detectores de eventos anexados al documento.

Para más información sobre Documents en Brackets, recomiendo leer la sección dedicada en su github wiki.

Desarrollo directo y editores en línea

Una de las cosas que hace que Brackets sea único hoy en día es su característica de desarrollo directo: Brackets está “conectado” a el navegador de tal manera que mientras se va escribiendo se van mostrando los cambios en el navegador. No hace falta decir, que esto es una característica potencialmente asesina en términos de productividad.

El corazón de la implementación del desarrollo directo es el archivo Inspector.js, la cual está a cargo de la comunicación con el API remota de depuración de Chrome utilizando JSON sobre WebSockets. Otros elementos envueltos en este proceso incluyen Agentes – los cuales mantienen un seguimiento de los cambios y los propagan- y Documents los cuales, de nuevo, representan archivos CSS, JS y HTML en el sistema (no los confundas con la clase genérica descrita arriba)

La característica de editor en línea, que hace posible sobreponer contenido sobre código, es implementada a través de la clase InlineWidget (la base de los editores en línea, que es solo un panel que flota sobre el código). La clase InlineTextEditor es ligeramente más sofisticada: hereda de InlineWidget y agrega un editor de texto sencillo.

La clase que se utilizará para crear un editor en línea, como el editor en línea de CSS de Brackets, es MultiRangeInlineEditor, la cual misma hereda de InlineTextEditor.

Para utilizar un editor en línea, se tiene que registrar una función proveedora con el EditorManager, de esta forma:

EditorManager.registerInlineEditProvider(providerFunction);

Esta función toma dos parámetros: el editor que hospeda y un objeto de posición. Los objetos de posición son utilizados por CodeMirror y contiene dos propiedades: el número de línea y la posición del carácter. Dentro de esta función, simplemente se instancia a MultiRangeInlineEditor y se le pasa la instancia de Editor correspondiente, retornando un objeto Promise (ver arriba) que es resuelto una vez que está completo:

Vistas y administración de la entrada del usuario

 function providerFunction(hostEditor, pos){
   //Create an instance of InlineTextEditor or one of its subclasses 
   var myInlineEditor = new MyMultiRangeInlineEditor(data);
   myInlineEditor.load(hostEditor);

   //Only handle cases where this inlineEditor makes sense
   // and leave the place to other editors for all other cases
   if(notRelevantContext) return null

   //Assume this will be asynchronous
   var result = new $.Deferred();
   result.resolve(myInlineEditor);        
   return result.promise();
}

No profundizaré mucho en estilos, widgets, layouts, u otros detalles de UI, pero me gustaría señalar que, además de jQuery, Brackets hace uso del popular framework Twitter Bootstrap para su UI elegante que significa que también utiliza LESS CSS preprocessor.

Brackets no utiliza ningún sistema de plantillas. Muchas de las UI están hardcodeadas en el archivo HTML principal. A mi parecer esto podría cambiar en el futuro.

Lo más importante de comprender es la forma en que Brackets maneja la entrada del usuario. Para hacerlo, hace uso del patrón Command. Este patrón encapsula acciones que serán realizadas por el software (por ejemplo “abrir archivo”) como objetos (el comando). Esto es muy conveniente para trazar los gestos del usuario y la entrada de estos objetos, por muchas razones:

1. Permite el desacoplamiento de las interacciones del usuario de su consecuencia en el editor, lo cual ofrece un código más fácil de mantener.

2. Ya que las acciones son tratadas como objetos, pueden mantener un estado, y se pueden realizar todas las operaciones en estas. Por ejemplo, si se deshabilita un comando, o cambia su etiqueta, sus elementos de UI correspondientes serán automáticamente actualizados. Este también es un patrón popular para implementar cosas básicas como una administración de historial y herramientas de scripting, así que también puedes esperar estas características en el futuro.

3. Hace el código más fácil de probar.

En términos de implementación, registrar un comando es tan fácil como esto:

CommandManager.register(label, commandID, callback);

Entonces se puede adjuntarlo a un elemento de menú para que sea ejecutado cuando este elemento sea seleccionado por el usuario:

var menu = Menus.getMenu(Menus.AppMenuBar.FILE_MENU);
menu.addMenuItem(commandID);

Aunque también se puede ejecutar manualmente:

CommandManager.execute(commandID);

Calidad

El código de calidad es absolutamente esencial para cualquier proyecto serio, y por supuesto Brackets no es la excepción. Utiliza JSLint para evaluar la calidad del código. JSLint es una de las herramientas más populares de análisis para JavaScript estático. Fue hecho por Douglas Crockford como una forma de escanear código fácilmente y reportar cualquier problema, como describe en su mecanismo de configuración basado en comentarios.

Encontrarás las directivas de configuración de JSLint al inicio de cada módulo:

/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
/*global define, $, FileError, brackets, window */

Nota que JSLint también es utilizado en Brackets para proporcionar a los desarrolladores retroalimentación inmediata acerca de la calidad de su código.

Brackets también utiliza un framework de pruebas, Jasmine, para garantizar la calidad del código. Jasmine es un framework popular de desarrollo de comportamiento dirigido, utilizado para el desarrollo de JavaScript.

Se ha incluido un realizador de pruebas (en Debug > Run Tests), así que puede ser fácilmente probado, desde sí mismo.

Modelo de extensibilidad temprana

Se incluyó un mecanismo de extensibilidad temprana, permitiendo a los usuarios a extender la funcionalidad de Brackets fácilmente sin tener que poner parches en el núcleo del código. El flujo de trabajo típico para hacerlo sería el ejecutar una segunda instancia de brackets para probar el código actual, utilizando Debug > New Window.

La extensión misma esta descrita como un módulo, pero en alguna forma separa el alcance del resto del código fuente. Para cargar dependencias desde Brackets, se tiene que utilizar brackets.getModule().

Aquí hay una extensión completa de Hello World escrito originalmente por Mike Chambers:

/*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
/*global define, $, brackets, window */
/** Simple extension that adds a "File > Hello World" menu item */
define(function (require, exports, module) {
   'use strict';
   var CommandManager = brackets.getModule("command/CommandManager"),
       Menus          = brackets.getModule("command/Menus");
   // Function to run when the menu item is clicked
   function handleHelloWorld() {
       window.alert("Hello, world!");
   }
   // First, register a command - a UI-less object associating an id to a handler
   var MY_COMMAND_ID = "helloworld.sayhello";
   CommandManager.register("Hello World", MY_COMMAND_ID, handleHelloWorld);
   // Then create a menu item bound to the command
   // The label of the menu item is the name we gave the command (see above)
   var menu = Menus.getMenu(Menus.AppMenuBar.FILE_MENU);
   menu.addMenuItem(MY_COMMAND_ID);
   // We could also add a key binding at the same time:
   //menu.addMenuItem(MY_COMMAND_ID, "Ctrl-Alt-H");
   // (Note: "Ctrl" is automatically mapped to "Cmd" on Mac)
   // Or you can add a key binding without having to create a menu item:
   //KeyBindingManager.addBinding(MY_COMMAND_ID, "Ctrl-Alt-H");
   // For dynamic menu item labels, you can change the command name at any time:
   //CommandManager.get(MY_COMMAND_ID).setName("Goodbye!");
});

Lo genial es que tu extensión puede tomar ventaja de muchas de las características de Brackets, como el mecanismo del editor en línea.

A dónde ir desde aquí

Espero que esta visión a alto nivel te haga querer saber más acerca de este proyecto, e incluso contribuyas en Brackets.

Para un comprendimiento más profundo acerca de cómo funciona Brackets, te recomiendo dar un vistazo a la wiki de Brackets. Hay varios videos en YouTube desde el primer hackathon de Brackets, pero algunas cosas que se mencionan ahí están desactualizadas, así que no las tomes tan enserio.

Este artículo está publicado bajo licencia Creative Commons así como su versión original en Adobe Devnet, fue traducida y adaptada en nuestro blog por Margarita García.

• Almacenamiento Web: Para almacenamiento local básico con pares clave/valor.
• Almacenamiento Offline: Usa un manifiesto para almacenar archivos completos para su uso oflline.
• Base de Datos Web: Para almacenamiento en bases de datos relacionales.

API de almacenamiento web

La implementación más básica para almacenar datos localmente en la máquina del usuario es con la API de almacenamiento web. Esta API utiliza pares clave/valor para permitir a los desarrolladores almacenar información básica y variables que pueden ser utilizadas por la aplicación web. Un caso de uso ideal para esto es el almacenamiento simple de datos que necesitan permanecer persistentes después de que el usuario ha navegado fuera de nuestra aplicación o ha cerrado el navegador. Guardando el estado de un juego, guardando una ubicación de navegación, o almacenando información específica que se quiere utilizar a través de la aplicación web (como el nombre de usuario) pero para lo cual no se quiere utilizar cookies. Se puede utilizar un API  similar para almacenar datos en una sesión individual. Los datos se borran automáticamente después de que el usuario ha navegado fuera de la aplicación o ha cerrado el navegador.

Se necesita considerar lo siguiente cuando se utilice el API  de almacenamiento web:

• El almacenamiento es para todo el dominio, así que cuando la aplicación guarda algo utilizando el almacenamiento web, los datos solamente son accesibles por otros sitios de ese dominio.
• Las restricciones de almacenamiento de datos es de 5 megabytes. Este límite fue sugerido por la W3C pero la especificación proporciona cierto margen para los detalles de implementación, así que el verdadero límite depende en los proveedores de navegadores.

Revisando el soporte de los navegadores

Para utilizar el API de almacenamiento web debemos asegurarnos de que el navegador del usuario lo soporta:

function checkLocalStorageSupport() {<br />
 try {<br />
   return 'localStorage' in window && window['localStorage'] !== null;<br />
 } catch (e) {<br />
   return false;<br />
 }<br />
}

El almacenamiento web utiliza un objeto llamado localStorage, el cual es un objeto de windowclass. El código de arriba revisa si localStorage es un objeto de window y entonces devolverá true, así la aplicación puede aprovechar el API  de almacenamiento local.

Agregando y retornando datos

Agregar y retornar datos desde el objeto localStorage es tan fácil como llamar un método getter y setter que son implementados por la especificación de almacenamiento local. Se puede almacenar cualquier tipo de dato utilizando localStorage, pero todo se almacena como string dentro del área de almacenamiento. Esto significa que puede ser necesario convertir los datos antes de enviarlos a localStorage o después de utilizarlo. Por ejemplo, para almacenar un objeto de JavaScript, utilizando JSON y llamando stringify() antes de parse() sería necesario después de haber recuperado los datos. Es lo mismo para convertir variables numéricas una vez que han sido devueltas desde el objeto localStorage.

En este ejemplo, se establece un input sencillo para que cuando el usuario envíe los datos sean almacenados en el área de almacenamiento local. Si los datos ya fueron almacenados, cuando se cargue la página mostrará la información almacenada con un saludo. Esta es la función que se llama cuando el usuario envía los datos:

function onClick()<br />
  {<br />
  if(checkLocalStorageSupport)<br />
  {<br />
  window.localStorage.setItem("name",document.getElementById("name").value);<br />
  }<br />
  }

Esta función utiliza el método setItem en el objeto localStorage y usa el valor del form para llenar el almacenamiento local. Cuando se carga la página, la aplicación tiene una función onLoad que revisa si hay datos almacenados y les agrega un saludo.

function onLoad()<br />
  {<br />
  if(checkLocalStorageSupport)<br />
  {<br />
  var name = window.localStorage.getItem("name");<br />
  if(name != null)<br />
  {<br />
  window.document.getElementById("divName").innerHTML = "Bienvenido " + name;    <br />
  }<br />
  <br />
  }<br />
  }

Borrando datos

Mientras que los usuarios pueden borrar los datos en localStorage utilizando su navegador. puede tener más sentido darles la opción de borrar los datos desde la aplicación. localStorage tiene un método clear() que justamente hace eso. El código de abajo se ejecuta cuando el usuario da clic al boton reset en la aplicación. Si se quiere remover un elemento específico, se puede usar el método removeItem() para eliminar una sola llave del almacenamiento local.

function onReset()<br />
  {<br />
  if(checkLocalStorageSupport())<br />
  {<br />
  window.localStorage.clear();    <br />
  }<br />
  }

Manejando cambios

La API  de almacenamiento local también incluye una forma de escuchar y responder a cambios en el almacenamiento local. Al agregar un event listener y escuchar un evento de storage, la aplicación puede responder a los cambios de localStorage. El dato en el evento incluye el nombre de la llave que cambio, el nuevo valor, el valor anterior (si es aplicable), y la URL de la página que llamó al API. La especificación para el API de localStorage esta implementada de tal manera que la sesión que inicializo el evento no verá la ejecución del evento. Eso es debido a que la especificación dice que el evento debería ser ejecutado únicamente por otras pestañas o sesiones y no en la que cambió el almacenamiento.

Para escuchar los eventos de almacenamiento, al primer paso es agregar el event listener:

window.addEventListener("storage",onStorageChange);

Entonces se establece el evento de onStorageChange para manejar el evento de almacenamiento.

function onStorageChange(e) {<br />
  if(e.key == "name")<br />
  {<br />
  alert(e.newValue + ' acaba de agregar su nombre al almacenamiento local');    <br />
  }<br />
  }

Hay un API similar para crear datos que solamente persisten para la sesión individual. Al utilizar el objeto sessionStorage en vez de localStorage, cualquier dato almacenado será automáticamente eliminado cuando el usuario deje la pagina. De hecho, el API  tiene exactamente los mismos metodos, asi que se pueden utilizar al solo reemplazar localStorage con sessionStorage y los datos locales serán almacenados hasta que el usuario cierre el navegador o la pestaña en que se encuentre la aplicación.

Almacenamiento Offline

A veces simplificar unos cuantos datos en la máquina del usuario no será suficiente. En muchos casos, la aplicación completa puede tener que trabajar offline, no solo almacenar datos. Para ese caso de uso, HTML5 incluye la posibilidad de almacenar archivos y recursos en la máquina del usuario a los que el navegador podrá acceder sin una conexión a internet. Eso incluye imágenes, archivos JavaScript, archivos HTML, archivos CSS, casi cualquier cosa que conforme a la aplicación web puede ser almacenada localmente y utilizado incluso sin una conexión a internet. La clave de esto es configurar el manifiesto de almacenamiento.

Utilizando un archivo manifiesto

El archivo manifiesto es parte de un nuevo atributo manifest en la etiqueta raíz de HTML. Es un archivo en el servidor web que lista todos los archivos que el navegador debería descargar y guardar para que puedan ser utilizados después. Tiene la extensión .manifest y el único cambio que hay es que el servidor web debe tener soporte para el mime type .manifest, asegurate de que el servidor web que hospeda tu aplicación puede manejar archivos .manifest correctamente.

El archivo manifiesto tiene una estructura básica. Cada archivo manifiesto empieza con CACHE MANIFEST y ahí están listados todos los archivos que necesita el navegador para el acceso offline. Aquí hay un ejemplo sencillo que almacenará JavaScript, un archivo CSS, un par de imágenes, y la página HTML:

  CACHE MANIFEST<br />
  style.css<br />
  offlinescript.js<br />
  images/dreamweaver_logo.png<br />
  images/edge_logo.png

Las rutas son relativas a la página HTML a la cual accede el usuario. Hay otras opciones de las cuales se debe tener cuidado cuando se esta creando el manifiesto. El manifiesto del API ofrece una sección FALLBACK que apunta a una página que será cargada en el caso de uso anterior. Entonces cuando el usuario intente acceder a algo que no fue almacenado, verá un mensaje indicándole que se encuentra offline. Aqui hay un manifiesto de almacenamiento teórico que podría parecer así:

CACHE MANIFEST

  NETWORK:<br />
  my_dynamic_script.cgi<br />
  <br />
  FALLBACK:<br />
  my_offline_message.html<br />
  <br />
  CACHE:<br />
  style.css<br />
  offlinescript.js<br />
  images/dreamweaver_logo.png<br />
  images/edge_logo.png

En este ejemplo, se tiene una página HTML con páginas externas de JavaScript y CSS. La página HTML muestra texto describiendo el logo de Adobe y cuando se le da click a la imagen, el JavaScript cambia la imagen y el texto por otro logo. Aqui esta el codigo HTML seguido de la función en JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
  <html xmlns="http://www.w3.org/1999/xhtml" manifest="cache.manifest"><br />
  <head><br />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br />
  <title>Adobe Logos</title><br />
  <script src="offlinescript.js"></script><br />
  <link href="style.css" rel="stylesheet" /><br />
  </head><br />
  <br />
  <body><br />
  <div id="textContent">Este es el logo de Edge:</div><br /><br />
  <img id="logo" name="logo" src="images/edge_logo.png" onclick="onLogoClick();" /><br />
  <p class="small">Click en el logo para cambiarlo.</p><br />
  </body><br />
  </html><br />
  <br />
  // JavaScript<br />
  function onLogoClick(e)<br />
  {<br />
  var currentContent = window.document.getElementById("textContent").innerHTML;<br />
  <br />
  if(currentContent == "Este es el logo de Edge:")<br />
  {<br />
  window.document.getElementById("textContent").innerHTML = "Este es el logo de Dreamweaver:";<br />
  window.document.logo.src = "images/dreamweaver_logo.png"; <br />
  } else {<br />
  window.document.getElementById("textContent").innerHTML = "Este es el logo de Edge:";<br />
  window.document.logo.src = "images/edge_logo.png"; <br />
  }<br />
  }

La pieza clave para todo es la etiqueta de HTML con el atributo manifest. Esta apuntando al archivo cache.manifest. El archivo manifiesto instruye al navegador a descargar todos los archivos en esa lista. No importa si el usuario carga estos archivos mientras está navegando, el navegador descargará automáticamente todo en el archivo manifiesto. Eso significa que las imágenes serán almacenadas para su uso offline incluso cuando no se ha descargado la página (ya que aun no se ha interactuado con esta) en que están siendo utilizadas. Así que al cargar la página una vez, se puede interactuar completamente offline.

Comprendiendo eventos

La última parte importante del acceso offline son los eventos que ocurren durante el proceso de almacenamiento. Cuando el navegador encuentra el atributo manifest ejecuta una serie de eventos en el objeto window.applicationCache. Lo primero que ocurre es que se dispara el evento checking. Este evento busca lo que se debe hacer con este archivo de almacenamiento en particular. Las herramientas de desarrollo de Google Chrome proporcionan una gran vista de los eventos que ocurren cuando se lleva a cabo el almacenamiento.

Si es la primera vez que el usuario visita el sitio, el evento de descarga será ejecutado y el navegador descargará todos los recursos listados en el archivo manifiesto. Lee el archivo manifiesto, revisa cuantos archivos se tiene que descargar, y entonces devuelve una actualización del progreso de cada archivo. El evento de progreso incluye una variable descargada y una variable total, con la cual podemos determinar cuánto se ha almacenado.

function onProgress(e)<br />
  {<br />
  var content = window.document.getElementById("loadedInfo").innerHTML;<br />
  window.document.getElementById("loadedInfo").innerHTML = content + '<br /> Loaded file ' + e.loaded + ' of ' + e.total;<br />
  }

Una vez que todo ha sido almacenado, el navegador dispara un evento de almacenamiento para notificar al desarrollador que todos los archivos han sido descargados satisfactoriamente.

Las siguientes ocasiones que el usuario visite la página, el navegador revisa si algo ha cambiado en el archivo manifiesto. Si nada ha cambiado, ejecuta el evento noupdate y continua. Si algo ha cambiado, realiza el mismo proceso descrito anteriormente; ejecutará el evento downloading con una serie de eventos de progreso hasta que los archivos hayan sido actualizados. Cuando eso ocurre, en vez de ejecutar el evento cached, el navegador disparará un evento updateready para avisar que los archivos han sido actualizados.

El último evento del cual preocuparse es el evento error que se ejecutará cada vez que algo falle. Puede ser que un archivo no se haya descargado correctamente, que el navegador no pueda acceder al archivo manifiesto, o que uno o más archivos listados no están disponibles. Para identificarlo, simplemente se agrega un event listener para este evento.

window.applicationCache.addEventListener("error",onError);<br />
  <br />
  function onError(e)<br />
  {<br />
  window.document.getElementById("loadedInfo").innerHTML = "Algo salió mal mientras se guardaban los archivos.";<br />
  }

Base de datos web

Originalmente había una especificación de SQL Web que ya no recibe mantenimiento. Ahora esa energía es enfocada al trabajo de un API de Base de Datos indexada y parece que esta será la forma de almacenar información en bases de datos relacionales. Firefox y Chrome soportan indexedDB pero debido a la especificación y al soporte aún están en curso, eso está más allá del enfoque de este artículo.

A dónde ir desde aquí

En este artículo exploramos dos de las principales formas para almacenar datos localmente. La primera proporciona un almacenamiento básico. Con esta API se pueden guardar nombres de valores pares más allá de las sesiones o una simple sesión. La segunda, la aplicación del archivo manifiesto, que permite a los desarrolladores almacenar archivos completos en la máquina del usuario para su uso offline.

Para más información de las APIs de HTML5 de almacenamiento, revisa los siguientes recursos:

El pasado, el presente y el futuro del almacenamiento local para aplicaciones web

HTML5 Rocks: Almacenamiento Local

Dr. Dobbs: Almacenamiento Web para HTML5

La documentación: Borrador de la W3C: Almacenamiento Web

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Macedo.

Te mostraré cuatro formas en que se pueden categorizar los valores: a través de la propiedad oculta [[Class]], a través del operador typeof, a través del operador instanceof, y a través de la función Array.isArray(). También te explicare los objetos prototipo de constructores incorporados, los cuales producen resultados inesperados de categorización.

Revisando lo básico

Antes de comenzar con el tema, necesitamos revisar algunos conocimientos necesarios.

Primitivos contra objetos

Todos los valores en JavaScript o son primitivos o son objetos.

Primitivos: los siguientes valores son primitivos.

• undefined
• null
• Boolean
• Number
• String

Los primitivos son inmutables; no se les puede agregar propiedades:

var str = "abc";
str.foo = 123;  // intenta agregar la propiedad "foo"<br>
123
str.foo  // sin cambio
undefined

Además, los primitivos son comparados por valor, lo cual significa que son considerados igual si tienen el mismo contenido:

> "abc" === "abc"
true

Objetos: todos los valores no-primitivos son objetos. Los objetos son mutables.

var obj = {};
obj.foo = 123;  // intenta agregar la propiedad "foo"
123
obj.foo  // la propiedad "foo" ha sido agregada
123

Los objetos son comparados por referencia. Cada objeto tiene su propia identidad y, debido a esto dos objetos son considerados iguales únicamente si son, de hecho, el mismo objeto:

{} === {}
false
var obj = {};
obj === obj
true

Envolviendo tipos de objetos

Los tipos primitivos boolean, number y string tienen el contenedor de tipo de objeto correspondiente: Boolean, Number y String. Las instancias de estos tipos son objetos y son diferentes de los primitivos a los que contienen.

typeof new String("abc")
> 'object'
> typeof "abc"<br>
'string'
> new String("abc") === "abc"
false

Los contenedores de tipos de objetos son raramente utilizados de manera directa, pero sus objetos prototipo definen los métodos de los primitivos. Por ejemplo, String.prototype es el objeto prototipo del contenedor para el tipo String. Todos sus métodos también están disponibles para string. Tomemos el método contenedor String.prototype.indexOf. Los string primitivos tienen el mismo método, no un método diferente con el mismo nombre, literalmente es el mismo método:

> String.prototype.indexOf === "".indexOf
true

Propiedades internas

Las propiedades internas son aquellas a las cuales no se puede acceder directamente desde JavaScript, pero si afectan como trabaja. Los nombres de las propiedades inician con una letra mayúscula y están escritas en dobles corchetes. Por ejemplo, [[Extensible]] es una propiedad interna que mantiene un aviso booleano que determina si una propiedad puede o no ser agregada a un objeto. Su valor solamente puede ser manipulado de manera indirecta. Object.isExtensible() revisa su valor, mientras que Object.preventExtentions() establece su valor a false. Una vez que su valor es false, no hay forma de cambiarlo a true.

Terminología: prototipos contra objetos prototipo

En JavaScript, el término prototipo esta por desgracia un poco sobrecargado.

1. Por otra parte, está el prototipo de relación entre objetos. Cada objeto tiene una propiedad oculta [[Prototype]] que bien, o apunta a su prototipo o es null. El prototipo es una continuación del objeto. Varios objetos pueden tener el mismo prototipo.

2. Además, si, por ejemplo, se implementa un tipo para un constructor Foo, ese constructor tendrá entonces una propiedad Foo.prototype que mantendrá al tipo objeto prototipo.

Para hacer la diferencia clara, los desarrolladores los llaman (1) “prototipos” y (2) “objetos prototipo”. Hay tres métodos que ayudan al tratar con prototipos:

• Object.getPrototypeOf(obj) retorna el prototipo del objeto:

> Object.getPrototypeOf({}) === Object.prototype
true

• Object.create(proto) crea un objeto vacío cuyo prototipo es proto:

> Object.create(Object.prototype)
{}

Object.create() puede hacer más, pero está más allá del objetivo de este artículo.

• proto.isPrototypeOf(obj) retorna true si proto es un prototipo de obj (o un prototipo de un prototipo, y así):

> Object.prototype.isPrototypeOf({})
true

La propiedad “constructor”

Dado un constructor de la función Foo, el objeto prototipo Foo.prototype tiene una propiedad Foo.prototype.constructor que se remite a Foo. Esa propiedad se establece automáticamente para cada función.

> function Foo() { }
  > Foo.prototype.constructor === Foo
  true
  > RegExp.prototype.constructor === RegExp
  true

Todas las instancias de un constructor heredan esa propiedad del objeto prototipo. Por lo tanto, la puedes usar para determinar qué constructor creó una instancia:

> new Foo().constructor
  [Function: Foo]
  > /abc/.constructor
  [Function: RegExp]

Categorizando valores

Hay cuatro formas de categorizar valores:

• [[Class]] es una propiedad interna con una cadena que clasifica un objeto.
• typeof es un operador que categoriza primitivos y ayuda a distinguirlos de los objetos.
• instanceof es un operador que categoriza objetos.
• Array.isArray() es una función que determina si un valor es un arreglo.

[[Class]]

Es una propiedad interna cuyo valor es uno de las siguientes cadenas:

“Arguments”, “Array”, “Boolean”, “Date”, “Error”, “Function”, “JSON”, “Math”, “Number”, “Object”, “RegExp”, “String”

La única forma de acceder a esta desde JavaScript es a través del método predeterminado toString(), el cual puede ser invocado generalmente de esta forma:

Object.prototype.toString.call(value)

Tal invocación devuelve:

• “[object Undefined]” si el valor es indefinido.
• “[object Null]” si el valor es nulo.
• “[object “ + value.[[Class]] + “]” si el valor es un objeto.
• “[object “ + value.[[Class]] + “]” si el valor es un primitivo (es convertido a un objeto y manejado como en la regla anterior).

Ejemplos:

> Object.prototype.toString.call(undefined)
  '[object Undefined]'
  > Object.prototype.toString.call(Math)
  '[object Math]'
  > Object.prototype.toString.call({})
  '[object Object]'

Por lo tanto, la siguiente función puede ser utilizada para recuperar el [[Class]] de un valor x:

<p>function getClass(x) {
  var str = Object.prototype.toString.call(x);
  return /^\[object (.*)\]$/.exec(str)[1];
  }

Esta función en acción:

getClass(null)
  'Null'
  > getClass({})
  'Object'
  > getClass([])
  'Array'
  > getClass(JSON)
  'JSON'
  > (function () { return getClass(arguments) }())
  'Arguments'
  > function Foo() {}
  > getClass(new Foo())
  'Object'

typeof

Categoriza primitivos y permite distinguir entre primitivos y objetos usando la siguiente sintaxis:

typeof valor

Devuelve una de las siguientes cadenas, dependiendo del operando:

El operador typeof retorna “object” para null, esto debido a un bug en JavaScript. Desafortunadamente, este error no tiene solución, debido a que “rompería” el código existente. Observa que mientras que una función también es un objeto, typeof hace una distinción. Los arreglos, por otra parte, son considerados objetos. Estas peculiaridades hacen complicado el revisar si un valor es un objeto:

function isObject(x) {
  return x !== null &&
  (typeof x === 'object' || typeof x === 'function');
  }

instanceof

Revisa si un valor es una instancia de algún tipo, con esta sintaxis:

valor instanceof Tipo

El operador revisa Type.prototype para ver si se encuentra en la cadena prototipo de valor. Eso es, si estuvieras implementando instanceof, debería lucir algo como esto (menos algunos errores, como el tipo null):

function myInstanceof(value, Type) {

  return Type.prototype.isPrototypeOf(value);

  }

instanceof siempre devuelve false para los valores primitivos:

> "" instanceof String
  false
  > "" instanceof Object
  false

Array.isArray()

Existe debido a un problema en particular en los navegadores: cada frame tiene su propio ambiente global. Por ejemplo: dado un frame A y un frame B (donde cualquiera de ellos puede ser el documento), el código en A puede pasar un valor al código de B. El código en B no puede usar instanceof Array para revisar si el valor es un arreglo, debido a que el Array en B es diferente del que hay en A. Por ejemplo:

<html>
<head>
<script>
// test() es llamado desde el iframe
function test(arr) {
  var iframeWin = frames[0];
  console.log(arr instanceof Array); // false
  console.log(arr instanceof iframeWin.Array); // true
  console.log(Array.isArray(arr)); // true
  }
  </script>
  </head>
  <body>
  <iframe></iframe>
  <script>
  // Llena el iframe
  var iframeWin = frames[0];
  iframeWin.document.write(
  '<script>window.parent.test([])</'+'script>');
  </script>
  </body>
  </html>

Por lo tanto, ECMAScript 5 introdujo Array.isArray(), el cual usa [[Class]] para determinar si un valor es un arreglo. No obstante, el problema descrito arriba en el ejemplo de los frames, existe para todos los tipos cuando se utiliza en conjunto con instanceof.

Objetos prototipo incorporados

Los objetos prototipo del tipo incorporado son valores extraños: se comportan como instancias de los tipos, pero cuando son examinados a través de instanceof, no son instancias. Algunos resultados de categorización para objetos prototipo también son inesperados. Para intentar comprender lo que sucede, puedes profundizar tu comprendimiento de categorización.

Object.prototype

Es un objeto vacío. Es impreso como uno y no tiene propiedades propias:

> Object.prototype
  {}
  > Object.keys(Object.prototype)
  []

Unexpected. Object.prototype es un objeto, pero no es una instancia de Object. Por un lado, ambos typeof y [[Class]] lo reconocen como un objeto:

> getClass(Object.prototype)
  'Object'
  > typeof Object.prototype
  'object'

Por otra parte, instanceof no lo considera una instancia de Object.

> Object.prototype instanceof Object
  false

Para que el resultado de arriba sea true, Object.prototype tendría que estar en su propia cadena prototipo, provocando un ciclo que empiece y termine con Object.prototype.La cadena prototipo ya no sería linear, lo cual no es algo que queramos para una estructura de datos que tiene que ser fácil de atravesar, Por lo tanto, Object.prototype no tiene un prototipo. Es el único objeto incorporado que no tiene uno.

> Object.getPrototypeOf(Object.prototype)
  null

Este tipo de paradoja mantiene true para todos los objetos incorporados: ya que son considerados instancias de sus tipos por todos los mecanismos, excepto instanceof.

Expected. [[Class]], typeof e instanceof coinciden en la mayoría de los demás objetos:

> getClass({})
  'Object'
  > typeof {}
  'object'
  > {} instanceof Object
  true

Function.prototype

En sí misma es una función. Acepta cualquier argumento y retorna indefinido:

> Function.prototype("a", "b", 1, 2)
  undefined

Unexpected. Function.prototype es una función, pero no una instancia de Function: Por un lado, typeof, el cual revisa si un método [[Call]] interno está presente, dice que Function.prototype es una función:

> typeof Function.prototype
  'function'

La propiedad [[Class]] dice lo mismo:

> getClass(Function.prototype)
  'Function'

Por otra parte, instanceof dice que Function.prototype no es una instancia de Function:

> Function.prototype instanceof Function
  false

Esto debido a que no tiene a Function.prototype en su cadena prototipo. En su lugar, su prototipo es Object.prototype:

> Object.getPrototypeOf(Function.prototype) === Object.prototype
  true

Expected. Con todas las demás funciones, no hay sorpresas:

> typeof function () {}
  'function'
  > getClass(function () {})
  'Function'
  > function () {} instanceof Function
  true

Function siempre es considerado una función en cada caso:

> typeof Function
  'function'
  > getClass(Function)
  'Function'
  > Function instanceof Function
  true

Array.prototype

Es un arreglo vacío. Es visualizado de forma que tiene una longitud de 0.

> Array.prototype
  []
  > Array.prototype.length
  0

[[Class]] también lo considera un arreglo:

> getClass(Array.prototype)
  'Array'

También lo hace Array.isArray(), el cual está basado en [[Class]]:

> Array.isArray(Array.prototype)
  true

Naturalmente, instanceof no lo hace:

> Array.prototype instanceof Array
  false

Así que para no ser redundante, no mencionare que los objetos prototipo no son instancias de su tipo.

RegExp.prototype

Es una expresión regular que iguala todo:

> RegExp.prototype.test("abc")
  true
  > RegExp.prototype.test("")
  true

RegExp.prototype también es aceptada para String.prototype.match, el cual revisa si su argumento es una expresión regular a través de [[Class]]. Que revisa si es positivo para ambos, expresiones regulares y objetos prototipo.

> getClass(/abc/)
  'RegExp'
  > getClass(RegExp.prototype)
  'RegExp'

Excursion: la expresión regular vacía. RegExp.prototype es equivalente para la “expresión regular vacía”. Esa expresión es creada en cualquiera de las dos formas:

<p>new RegExp("")  // constructor
  /(?:)/          // literal

No deberías usar el constructor de RegExp si estas creando una expresión regular de manera dinámica. Expresar una expresión regular vacía literalmente es complicado por el hecho de que no puedes utilizar / /, lo cual comenzaría un comentario. El grupo vacío no capturado (?:) se comporta igual que la expresión regular vacía: iguala todo y no crea capturas en una igualdad:

> new RegExp("").exec("abc")
  [ '', index: 0, input: 'abc' ]
  > /(?:)/.exec("abc")
  [ '', index: 0, input: 'abc' ]

Un grupo vacío que no mantiene una igualdad completa en el índice 0, pero también captura (primero) ese grupo en índice 1:

> /()/.exec("abc")
  [ '',  // indice 0
  '',  // indice 1
  index: 0,
  input: 'abc' ]

Curiosamente, ambos una expresión regular vacía creada a través del constructor y RegExp.prototype son visualizadas como el vacío literal:

> new RegExp("")
  /(?:)/
  > RegExp.prototype
  /(?:)/
Date.prototype

También es una fecha:

> getClass(new Date())
  'Date'
  > getClass(Date.prototype)
  'Date'

Las fechas contienen números. Citando a la especificación de ECMAScript 5.1:

Un objeto Date contiene un número que indica un instante de tiempo (en milisegundos) en particular. Como un número es llamado un valor de tiempo. Un valor de tiempo también puede ser un NaN, que indique que el objeto Date no representa un instante de tiempo específico.

En ECMAScript el tiempo se mide en milisegundos desde 01 Enero, 1970 UTC.

Hay dos maneras de acceder al valor de tiempo al llamar valueOf, o al convertir una fecha a un número:

> var d = new Date(); // ahora
  > d.valueOf()
  1347035199049
  > Number(d)
  1347035199049

El valor de tiempo de Date.prototype es NaN:

> Date.prototype.valueOf()
  NaN
  > Number(Date.prototype)
  NaN

Date.prototype es visualizado como una fecha inválida, al igual que las fechas que han sido creadas a través de NaN:

> Date.prototype
  Invalid Date
  > new Date(NaN)
  Invalid Date</p>

Number.prototype

Es muy parecido a new Number (0):

> Number.prototype.valueOf()
  0

La conversión a número retorna el valor primitivo envuelto:

> +Number.prototype
  0

Comparado a:

> +new Number(0)
  0

String.prototype

Es muy parecida a new String(“”):

> String.prototype.valueOf()
  ''

La conversión a cadena retorna el valor primitivo envuelto:

> "" + String.prototype
  ''

Comparado a:

> "" + new String("")
  ''

Boolean.prototype

Es muy parecido a new Boolean(false):

> Boolean.prototype.valueOf()
  false

Los objetos booleanos pueden ser convertidos a valores booleanos primitivos, pero el resultado de esa conversión siempre es true, debido a que convertir cualquier objeto a boolean siempre será true:

> !!Boolean.prototype
  true
  > !!new Boolean(false)
  true
  > !!new Boolean(true)
  true

Eso es diferente dado que los objetos son convertidos a números o cadenas. Si un objeto contiene estos primitivos, el resultado de una conversión es el primitivo envuelto.

Recomendaciones

Estas son recomendaciones para categorizar mejor los valores en JavaScript.

Tratar los objetos prototipo como miembros principales de sus tipos

Un objeto primitivo siempre será un miembro principal de un tipo? No, eso solo es válido para los tipos incorporados. En general, el comportamiento de los objetos prototipos es meramente una curiosidad. Es mejor pensar en ellos como análogos a clases: contienen propiedades compartidas por todas las instancias  (usualmente métodos).

Que mecanismo de categorización usar

Cuando se decide qué mecanismo de categorización usar, se tiene que distinguir entre código normal y código que podría trabajar con valores de otros frames.

Código normal. Para código normal, usa typeof e instanceof (olvídate de [[Class]] y Array.isArray()). Se debe ser consciente de las peculiaridades de typeof: null es considerado un “object” y tiene dos categorías no primitivas, “object” y “function”. Por ejemplo, una función que determine si un valor es un objeto podría implementarse de esta forma:

function isObject(v) {
  return (typeof v === "object" && v !== null)
  || typeof v === "function";
  }

Implementar este método luciria asi:

> isObject({})
  true
  > isObject([])
  true
  > isObject("")
  false
  > isObject(undefined)
  false

Código que funciona con valores de otros frames. Si se espera recibir valores de otros frames, instanceof no es confiable. Se debe considerar [[Class]] y Array.isArray(). Una alternativa es trabajar con el nombre del constructor del objeto, pero esa es una solución frágil ya que no todos los objetos registran su constructor, no todos los constructores tienen nombre, y hay riesgo de “choques” de nombres. La siguiente función muestra cómo recibir el nombre del constructor de un objeto.

function getConstructorName(obj) {
  if (obj.constructor && obj.constructor.name) {
  return obj.constructor.name;
  } else {
  return "";
  }
  }

Otra cosa que vale la pena destacar es que la propiedad nombre de funciones (como obj.constructor) no es estándar y, por ejemplo, no son soportados por Internet Explorer. Intenta:

> getConstructorName({})
  'Object'
  > getConstructorName([])
  'Array'
  > getConstructorName(/abc/)
  'RegExp'
  > function Foo() {}
  > getConstructorName(new Foo())
  'Foo'

Si se aplica getConstructorName() a un valor primitivo, se obtendrá el nombre asociado al tipo de contenedor:

> getConstructorName("")
  'String'

Esto es debido a que el valor primitivo obtiene la propiedad constructor del tipo de contenedor:

> "".constructor === String.prototype.constructor
  true

A donde ir desde aquí

En este artículo, has aprendido cómo categorizar valores en JavaScript. Desafortunadamente se necesita conocimiento detallado para realizar esta tarea apropiadamente, como las primeras dos categorizaciones: typeof e insteadof (cada uno con sus particularidades). El artículo incluye recomendaciones para trabajar con estas.

Como siguiente paso, puedes aprender más acerca de herencia en JavaScript. Los siguientes blogs te ayudarán a comenzar:

Prototipos como clases -una introducción a la herencia en JavaScript

Herencia en JavaScript por ejemplo

Patrones ejemplares en JavaScript

Datos privados para objetos en JavaScript

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Macedo.

En este tutorial aprenderás algunos conceptos básicos de JavaScript, incluyendo dos conceptos de programación básica -cálculos y variables-. Si quieres aprender a hacer sitios web interactivos. Usando JavaScript, necesitas aprender los conceptos centrales de la programación. Usando HTML y JavaScript, puedes cambiar el contenido de elementos HTML en respuesta a eventos del usuario, como hacer clic en un botón.

Escribir un simple programa de Hola Mundo con JavaScript

Los programas con JavaScript son una secuencia de declaraciones o comandos que son ejecutados por un navegador en el orden que fueron escritos. El programa más simple de JavaScript puede ser de una sola línea, mientras que los grandes programas pueden ser de miles de líneas. La tradición de la programación es que el primer programa que aprendes es uno que muestra el mensaje: Hello World. El código siguiente es un ejemplo de un programa JavaScript de Hello World envuelto en unas pocas líneas de código HTML, que permiten que funcione en un navegador web como una página web válida:

<!doctype html>
 
<title>JavaScript Test</title>
 
<script>
 
alert('Hello World!');
 
</script>

En el ejemplo de arriba, el código JavaScript es el que está entre el <script> y </script>. Esta línea contiene un comando alert de JavaScript que indica al navegador web que muestre un mensaje que contiene el texto entre las comillas. Observa que en JavaScript, las comillas alrededor del mensaje pueden ser simples o dobles, ambas son igual.

Si estás familiarizado con HTML, puedes estar preguntándote por qué el ejemplo no contiene etiquetas <html>, <head> y <body>. En realidad, estas etiquetas son opcionales en HTML4 y HTML5. Los ejemplos de este tutorial siguen la Guía de estilo de Google, que recomienda dejar fuera las etiquetas opcionales.

Para ejecutar este programa, sigue estos pasos:

1. Copia las cinco líneas de código y pégalas en un editor de texto (como Dreamweaver o  Notepad)
2. Guarda el archivo como test.html
3. Abre el archivo usando tu navegador favorito
4. Un mensaje que dice Hello World! aparece en cuanto se carga la página
5. Si lo deseas, puedes editar test.html para cambiar el mensaje que aparece en la caja de mensaje, luego guarda el código y haz clic en F5 mientras tu navegador está activo para actualizar la página.

Observa que la declaración de alert se termina con un punto y coma. En JavaScript, el punto y coma es opcional -a diferencia de lenguajes de programación como C y Java-. Sin embargo, ya que hay pocos casos donde no poner punto y coma causa problemas, se recomienda ponerlo después de cada comando.

Otra forma de escribir el programa Hello World es mostrar texto directamente en nuestra página web. Puedes hacerlo utilizando el siguiente código:

<!doctype html>
 
<title>JavaScript Test</title>
 
<script>
 
document.body.innerHTML = 'Hello World';
 
</script>

Cuando esta página web cargue, el navegador primero mostrará el texto: Hello Activ. Después, el navegador instantáneamente ejecutará la línea de JavaScript entre las etiquetas script, que reemplazan el texto con la frase: Hello World. Esto sucede rápidamente, el cambio no es aún visible para el usuario. Esto funciona por qué document.body.innerHTML es un poco de código especial de JavaScript que accede a los contenidos de la página web entera. Utilizando document.body.innerHTML = ‘Hello World’ se establece el contenido de la página web para Hello World. Esto puede parecer confuso al principio, pero una vez que comprendas los conceptos básicos de JavaScript comenzará a tomar sentido.

Realización de cálculos

Calcular valores en JavaScript es similar a calcular sumas en una aplicación de hoja de cálculo como Microsoft Excel. Por ejemplo, el símbolo * representa la multiplicación como en JavaScript y Excel. Sin embargo, hay algunas diferencias. Por ejemplo, en Excel 2^4 significa 2 a la potencia de 4, lo que equivale a 16. En JavaScript, ^ significa exclusivamente OR, pero eso es un tema para un tutorial más avanzado.

Todas las reglas de matemáticas regulares sobre orden de funcionamiento y uso de paréntesis también se aplican en JavaScript. Así, por ejemplo, cálculos de multiplicación (*) o división (/) ocurren antes de la suma (+) y resta (-). El siguiente ejemplo de código JavaScript muestra el resultado de un cálculo simple en una caja de alerta:

alert(32 + 9 * 1.8);

El cálculo de arriba convierte la temperatura actual en Nueva Zelanda de Celsius a Fahrenheit  y muestra la respuesta en una caja de alerta. Si quieres más detalles de cálculos en JavaScript, revisa las lecciones 2-5 de Los Vengadores del Código.

En común práctica, es inusual realizar cálculos JavaScript con números fijos. Generalmente hablando, es más probable que uses cálculos JavaScript basado en valores ingresados por el visitante del sitio web. En la siguiente sección se mostrará cómo hacerlo.

Trabajando con variables

Una forma para que puedas obtener la entrada de datos de un visitante en el sitio implica el uso del comando prompt de JavaScript. Por ejemplo, podrías utilizar esta línea de código:

prompt('What is the temperature in Celcius?');

El código anterior muestra una caja de diálogo, que visualiza una pregunta. La caja de diálogo contiene un campo de texto para que el visitante ingrese su respuesta, junto con un botón de aceptar y cancelar. Para ver lo que aparece en la caja de diálogo, pega el código dentro de las etiquetas de script de la página HTML de la sección anterior y ejecuta el código en tu navegador.

Las cajas se muestran con los comandos prompt y alert. Estas se muestran de forma diferente en cada navegador. Como resultado, generalmente sólo sirven al probar programas JavaScript. Mostrar cajas alert estilizadas requiere mucho código HTML, CSS y JavaScript. Afortunadamente, los desarrolladores web ya han creado cajas alert y han publicado en línea su código para que puedas utilizarlo gratis! Si quieres ver algunos ejemplos, consulta la página Interfaz de Usuario en el sitio de JQuery UI. Usar esta herramienta requiere un poco de conocimiento de JavaScript para implementar las cajas de diálogo en tus propios proyectos, pero es un gran recurso.

Creando variables

En la sección anterior aprendiste como hacer una pregunta a un usuario, pero ¿cómo vas a almacenar y a usar su respuesta? Es donde entran las variables. Las variables son marcadores de posición utilizadas para almacenar información que se recibe y después se modifica en un programa. Por ejemplo, en las siguientes líneas de código se crea una variable llamada temperatura y se le asigna un valor numérico 12:

var temperature = 12;

La línea de código para crear una variable comienza con var (que es la abreviatura de variable). Esto es seguido por el nombre de la variable, a continuación el símbolo =, seguido por el valor a almacenar. En matemáticas = significa que dos cosas tienen el mismo valor, como 4*3=2*6=12. En programación JavaScript, el signo igual significa que el valor es asignado. Si lees la línea de código anterior en Español regular, dirías: Crea una variable denominada temperatura y asígnale el valor de 12.

Para almacenar una respuesta que un visitante ingresa en una caja de diálogo, puedes usar el siguiente código:

var temperature = prompt('What is the temperature in celcius?');
 
alert(32 + temperature * 27);

Este código muestra una caja de diálogo con la pregunta. Donde el visitante ingresa una respuesta y da clic en OK, la respuesta es almacenada en la variable de temperatura Fahrenheit. La siguiente línea de código utiliza la variable para calcular el equivalente de la temperatura y mostrar el valor en una caja alert.

Nota: Si el visitante da clic en el botón de Cancel, un valor especial llamado null es almacenado en la variable. Para saber más acerca de valores null, revisa la lección 17 de Vengadores del Código.

Variables Constantes

JavaScript no solo utiliza variables para almacenar un dato ingresado por el usuario. También emplea variables para almacenar valores constantes que nunca cambian. El siguiente código de ejemplo utiliza una variable constante (nombrada en mayúsculas):

var KILOS_TO_POUNDS = 2.2;
 
var weight = prompt('What is your weight in kilos?');
 
alert(POUNDS_TO_KILOS * weight);

En el ejemplo de arriba, la primera línea crea una variable constante que almacena el número de libras en un kilogramo. La siguiente línea solicita al usuario que ingrese su peso y almacena el valor en la variable nombrada weight. La línea final calcula el peso en libras, y entonces muestra el resultado del cálculo en una caja alert.

Observa que la variable que almacena el número de libras en un kilogramo utiliza letras mayúsculas. Cuando escribes JavaScript, no es necesario que nombres las variables con letras mayúsculas, pero la recomendación. Cuando veas variables nombradas todas en mayúsculas, puedes decir a simple vista que el valor almacenado en la variable es constante y no va a cambiar.

Las variables constantes hacen el código JavaScript más fácil de leer. Mientras que solamente podrías escribir 2.2, lo cual requiere que escribas menos, los nombres que asignes a las variables constantes harán que tu código sea más fácil de entender. Por ejemplo, si lees el código alert(4+12*27); es improbable saber que se está calculando. Sin embargo, el siguiente código hace la función más obvia:

var MONTHS_IN_YEAR = 12;
 
var myAgeInYears = 27;
 
var monthsSinceMyLastBirthday = 4;
 
alert(monthsSinceBirthday + myAgeInYears * MONTHS_IN_YEAR);

El código del ejemplo de arriba calcula el número de meses desde tu nacimiento.

Nota: Aprender acerca de otras razones para usar variables, consulta la lección 5 de Vengadores del Código.

Variables String

Las variables no solo están diseñadas para almacenar números. Las variables también pueden almacenar secuencia de caracteres, que en la programación son llamadas string. Una variable que almacena texto es llamada variable string. En código JavaScript, una secuencia de caracteres dentro de comillas se nombra string.

La siguiente línea de código crea una variable string llamada name y se le asigna el texto Mike.

var name = 'Mike';

El siguiente código solicita al visitante ingresar su nombre y entonces muestra un mensaje que lo saluda por su nombre:

var name = prompt('What is your name?');
 
alert('Hello ' + name + ', nice to meet you');

En JavaScript el símbolo de mas (+) tiene dos usos. Cuando se utiliza con números literales y variables numéricas se agregan los números, así 2+4 es 6. Pero cuando el símbolo mas (+) se utiliza con strings, se unen entre sí, como este: ‘Code’ + ‘Avengers’ es ‘CodeAvengers’.

Combinando cálculos con strings

Simplemente mostrando la respuesta a un cálculo en una caja alert no es muy útil. Es más útil mostrar también el texto que explica el número al visitante. En el siguiente código de ejemplo se entiende mejor como mostrar una cadena de texto:

var KILOS_TO_POUNDS = 2.2;
 
var weight = prompt('What is your weight in kilos?');
 
alert('Your weight in pounds is ' + POUNDS_TO_KILOS * weight);

Las primeras dos líneas en este código son igual a las anteriores. En esta versión, se incluye un string antes del cálculo en la tercera línea. Cuando ejecutas este código e ingresas el peso (73) aparecerá la caja alert y mostrará la declaración: Su peso en libras es 160.6.

Cuando revisas la tercera línea, recuerda que la multiplicación (*) siempre se calcula antes de la suma (+) en JavaScript. En este ejemplo, el navegador primero calcula POUNDS_TO_KILOS*weight, que en mi caso es 160.6. Luego se une la respuesta con el string para crear la frase ‘Your weight in pounds is 160.6’ y muestras el texto en una caja alert.

Otro punto importante a considerar es que la variable weight en la segunda línea realmente almacena un string y no un número. El dato ingresado por el usuario en la caja de diálogo siempre será almacenado como un string. En este ejemplo, el cálculo funciona de todas maneras, porque cuando el símbolo de multiplicación (*) es usado entre un string y un número (u otro string), automáticamente el string se convierte en un número. Así que ’12′ * 5 ó ’12′ * ’5′ ó 12 * 5 evaluará al número 60. Si ejecutas la línea: ‘blah’ * 5 y ‘Five’ * 5, ambos cálculos fallan y el resultado sería un valor especial JavaScript llamado NaN, que significa: no es un número.

Las cosas funcionan un poco diferente con el símbolo de suma (+). Si un signo de mas (+) es usado con un número y un string, ellos se unen entre sí, independientemente de si o no se puede convertir el string en un número. Así que ’12′ + 5 ó ’12′ + ’5′ ó ’12′ + 5 proporcionará todo el resultado del string ’125′. Cuando escribes código JavaScript, asegurate de tener en cuenta este comportamiento.

Nota: Para obtener una mejor comprensión de agregar strings y números,  sigue el código de la lección 9 de los Vengadores del Código.

Cambiando el color de fondo basado en el dato que ingresa el usuario

En esta sección, aprenderás cómo usar mensajes y variables para cambiar el color de fondo de una página web. El siguiente código de ejemplo crea una página web con dos botones. Si el visitante da clic en el botón Change Color, aparece una caja de diálogo que solicita al visitante ingresar un color de fondo. Después de que el visitante ingresa un color da clic en OK, el color de fondo de la página web es actualizado. Si el visitante da clic en el botón Undo Color, el color de fondo de la página cambia al color anterior. Intenta ejecutar el código siguiente en un navegador para probar los botones.

<!doctype>
 
<script>
 
var oldColor = 'black';
 
function changeColor() {
 
oldColor = document.body.style.backgroundColor;
 
var newColor = prompt('Enter a color:');
 
document.body.style.backgroundColor = newColor;
 
}
 
function undoColor() {
 
var newColor = oldColor;
 
oldColor = document.body.style.backgroundColor;
 
document.body.style.backgroundColor = newColor;
 
}
 
</script>
 
<button onclick='changeColor()'>Change color</button>
 
<button onclick='undoColor()'>Undo color</button>

Si eres nuevo en JavaScript, puede que no estés familiarizado con la palabra función. En JavaScript, una función es una palabra clave del inicio de una sección de código que se ejecuta cuando se produce un evento, como dar clic en un botón. El código debajo de la función changeColor(){ almacena el color de fondo actual en la variable oldColor, y entonces solicita al visitante que ingrese un nuevo color de fondo, que es utilizado para  establecer el nuevo color de fondo. El código document.body.style.backgroundColor puede acceder al color de fondo actual de la página.

A donde ir desde aquí

Los ejemplos de código en este tutorial muestra cómo ejecutar un programa básico de JavaScript en un navegador usando una plantilla mínima de HTML. También aprendiste a realizar cálculos y trabajar con variables. Observamos cómo utilizar variables para almacenar los datos ingresados por los visitantes en cajas de diálogo, y luego utilizar el valor en el cálculo. Si te gustaría practicar estos conceptos, revisa las lecciones de la 1 a la 10 de los Vengadores del Código.

Si prefieres, empezar a aprender cómo utilizar las declaraciones if y bucles siguiendo con el resto de lecciones en el curso de JavaScript Nivel 1 de los Vengadores del Código. Visita el sitio de los Vengadores del Código y conviértete en un superhéroe de codificación!

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Margarita García.

Utilizar Modernizr es sencillo, aunque no es una varita mágica. El éxito al trabajar con él dependerá mayormente de tus habilidades con CSS y JavaScript. En este tutorial, aprenderás cómo aplicar estilos alternativos en exploradores que no soportan múltiples columnas o sombras. Tambien aprenderas como lograr que navegadores antiguos puedan validar formularios que hacen uso del nuevo atributo de HTML5 required, así como cargar scripts condicionalmente dependiendo de las capacidades del navegador.

¿Que es Modernizr?

Modernizr es una librería de JavaScript que detecta cuáles características soporta un explorador. Actualmente revisa 18 características de CSS3 y más de 40 relacionadas con HTML5, examinando cómo responde el explorador a una serie de pruebas. El conjunto completo de pruebas toma solo microsegundos en realizarse. Y para obtener todavía un mejor desempeño, el sitio web de Modernizr maximiza su eficiencia automatizando la creación de un script personalizado para probar solo aquellos elementos en los que estás interesado.

Cuando se utiliza para detectar el soporte de CSS3, Modernizr no requiere conocimientos de JavaScript. Simplemente adjunta el archivo a tu página web, y dinámicamente agregará el conjunto de clases al elemento html dependiendo de las capacidades del navegador. Los nombres de las clases están estandarizados y son autoexplicativos. Por ejemplo, la clase boxshadow se agrega si el navegador soporta la propiedad box-shadow; de lo contrario no-boxshadow se agrega en su lugar. Todo lo que necesitas es crear una hoja de estilos que use estas clases para brindar los estilos apropiados al explorador.

Modernizr hace fácil la implementación de soluciones JavaScript conocidas como polyfills que emulan características relacionadas a HTML5 y tecnologías asociadas, como la geolocalización. Sin embargo, necesitas al menos un entendimiento básico de de JavaScript para usarlas. Por cierto, el término polyfill viene de Polyfilla, el nombre de la marca inglesa de una pasta para reparar grietas. La idea es que un polyfill tape un agujero en la capacidad del navegador. A veces, realiza la tarea sin problemas pero es básicamente un trabajo de reparación, así que no se puede confiar en que produzca exactamente siempre los mismos resultados.

Descargando Modernizr

En común con otras librerías de JavaScript, Modernizr esta disponible en versiones de desarrollo y producción. Con la mayoría de las librerías la única diferencia es que los espacios en blanco y los comentarios han sido removidos de la versión de producción para reducir el peso de la descarga, Modernizr toma un enfoque diferente. La versión de desarrollo contiene casi todo, mientras que la versión de producción contiene únicamente aquellos elementos de tu elección, resultando en una descarga considerablemente más pequeña.

Cuando experimentes con Modernizr, recomendamos que descargues la versión de desarrollo. Una vez que sepas como funciona y de lo que es capaz, puedes descargar una version de produccion personalizada para implementarla en tu sitio web.

Los archivos de ejemplo de este tutorial contienen la versión 2.0.6 de la versión de desarrollo de Modernizr, pero te recomiendo reemplazarla con la versión más actualizada del sitio de Modernizr.

1. Descarga los archivos de ejemplo que acompañan este articulo (using_modernizr.zip) y descomprimelos en un lugar conveniente dentro de un sitio de Dreamweaver, o crea un nuevo sitio para este tutorial.
2. Ve al sitio de Modernizr en http://www.modernizr.com
3. En la sección de descarga de Modernizr 2, da clic en el boton Desarrollo (ver imagen). La versión de desarrollo de Modernizr se abre directamente en la ventana de tu explorador.
4. En el menú principal de tu explorador, selecciona Save Page As, y guardala como modernizr.js en el folder js de los archivos de ejemplo, reemplazando el archivo actual si es necesario.

Uso de Modernizr para detectar características CSS

Como se mencionó anteriormente, Modernizr no intenta agregar nuevas características a los exploradores antiguos, pero permite compensar la falta de características con tus estilos. Para demostrar cómo trabaja, los archivos de ejemplo contienen una pagina llamada css_support_begin.html. Si cargas la página en un explorador moderno, debería verse como a continuación:

Los estilos en la pagina usan las propiedades column-count y box-shadow de CSS3 para visualizar el texto en múltiples columnas y agrega una sombra a la imagen. Los exploradores antiguos no soportan ninguna de estas propiedades, así que la misma página se ve asi en Internet Explorer 7:

En IE 9, la misma página se visualiza con la sombra en la imagen, pero el texto está posicionado de la misma forma que en la imagen anterior.

Hasta donde llegar intentando compensar por la falta de características disponibles depende de los requerimientos de tu diseño. Intentar lograr que la página luzca igual en todos los navegadores involucra mucho trabajo, pero puedes hacer algunas mejoras sencillas, como envolver el texto alrededor de la imagen, alineando la imagen con el margen izquierdo del texto, y agregando un borde sutil a las esquinas derecha e inferior para darle un look más tridimensional.

Detectando el soporte de las características de CSS3

Modernizr usa JavaScript para detectar cuáles características soporta el explorador, pero antes de usar JavaScript para cargar diferentes hojas de estilo dinámicamente, usa la técnica extraordinariamente simple de agregar clases a las etiquetas html de las páginas. Es entonces cuando depende de ti como diseñador el usar la hoja de estilos CSS para servir apropiadamente los estilos a los elementos. Por ejemplo, si se soporta la propiedad box-shadow, Modernizr agrega la clase boxshadow. Si no es soportada esta propiedad, agrega la clase no-boxshadow en su lugar.

Ya que los exploradores ignoran las propiedades CSS que no reconocen, puedes utilizar con seguridad la propiedad box-shadow en tu regla de estilos básica, pero agregar un selector descendiente separado para exploradores antiguos como este:

.no-boxshadow img {
    	/* estilos para exploradores que no soportan box-shadow */
}

Solo los exploradores que no soportan box-shadow tendrán la clase no-boxshadow, asi que ningun otro explorador aplicará esta regla.

Agreguemos Modernizr a la página de ejemplo e inspeccionemos las clases que agrega a la etiqueta html

1. Haz una copia de css_support_begin.html y guardarlo como css_support.html
2. Abre la copia que acabas de crear, y cambia a vista de código o a la vista dividida.
3. Las primeras dos líneas del formato HTML lucen así:

<!DOCTYPE HTML> <html>

4. Agrega class=”no-js” a la etiqueta de esta manera:

   <!DOCTYPE HTML> <html class="no-js">

   Modernizr depende de que JavaScript esté habilitado en el explorador. Cuando así es, esta clase es removida dinámicamente. Sin embargo, en los raros casos en que JavaScript está deshabilitado, permanece en el formato HTML, permitiendote crear reglas de estilo especiales para los visitantes si es necesario.

5. Los estilos en css_support.html son embebidos en un bloque style. La librería de Modernizr necesita ser agregada a la etiqueta de la página después de que se han cargado los estilos. Agrega una nueva línea entre las etiquetas style y head de cierre y agrega modernizr.js usando una etiqueta script. La forma más sencilla es escribir el codigo por ti mismo, pero también puedes usar el boton Script en el panel de inserción o seleccionar Insert > HTML > Script Objects > Script. Las últimas tres líneas del head debería verse así:

   </style> <script src="js/modernizr.js"></script> </head>

   Nota: Si usas el panel de inserción o el menú de inserción, Dreamweaver agrega type=”text/javascript” a la etiqueta de apertura script. Esto ya no es requerido en HTML5, pero no hace daño dejarlo.

6. Guarda support_css.html y da clic al boton Live Code en la barra del documento. La etiqueta html ahora está poblada con más de 40 nombres de clases indicando las capacidades de la versión del motor de búsqueda WebKit que esta construido dentro de Dreamweaver.

Nota: Si tu versión de Dreamweaver no tiene Live Code (o si estas usando un editor de HTML diferente), puedes inspeccionar el código generado usando las herramientas de desarrollador en muchos exploradores modernos o con Firebug en Firefox.

Como muestra la imagen anterior, la clase no-js ha sido reemplazada por js, indicando que JavaScript está habilitado. La siguiente tabla lista los nombres de las clases utilizados por Modernizr para indicar el soporte para CSS3. Si la característica no está soportada el nombre de la clase tiene el prefijo no-.

Características de CSS3 detectadas por Modernizr

Donde se prueba una propiedad específica de CSS, el nombre de la clase es el mismo de la propiedad, solo se le remueve cualquier guión o paréntesis que contenga el nombre de la propiedad. Otras clases son nombradas después del módulo CSS3 al que se refieren.

Creando una regla de estilos para exploradores antiguos

Mira la tabla de arriba, puedes ver que Modernizr usa boxshadow y csscolumns para indicar el soporte para la propiedad box-shadow y el layout de multiples columnas respectivamente. Así que puedes crear reglas de estilo especiales usando las clases no-boxshadow y no-csscolumns para exploradores que no soportan estas características.

Para mantener sencillas las instrucciones, te mostrare solo las declaraciones de CSS. También puedes escribirlas directamente en la vista de código o usar la caja de diálogo para una nueva regla de CSS.

1. Crea un nuevo selector descendiente (compuesto) para .no-boxshadow img
2. Coloca los bordes derecho e inferior a 2 pixeles y de color gris sólido (yo escogí #8A8A8A). La regla de estilos resultante debería verse así:

   .no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }

   Esto no es tan atractivo como una sombra traslúcida, pero sin embargo ayuda a que la imagen se destaque ligeramente del fondo.

3. En los exploradores que no soportan el layout multi-columnas, necesitaras alinear la imagen y ajustar sus márgenes. Crea un nuevo selector descendiente para .no-csscolumns img
4. Coloca la imagen hacia la izquierda (float left), y dale márgenes superior e inferior de 3px, un margen derecho de 8px, y un margen izquierdo de cero. La declaración del estilo debería verse así:

   .no-csscolumns img margin: 3px 8px 3px 0; float: left; }

5. Asegúrate de que esta regla de estilos va después de la regla .columns img. Ambas reglas tienen la misma especificidad, así que el margen izquierdo de 10 pixeles en .columns img deberia sobreescribir la regla que acabas de crear si se encuentran en orden opuesto. Podrías renombrar .no-csscolumns img a .no-csscolumns .columns img para darle una especificidad mayor, pero es mejor mantener los selectores lo más simples posible. (Por cierto, si no estás seguro acerca de lo que es la especificidad, revisa el artículo Comprendiendo la Especificidad de Adrian Senior. Es viejo, pero muy útil.)
6. Guarda css_support.html, y pruebalo en un explorador moderno. Debería verse exactamente como antes.
7. Prueba la página en un antiguo explorador ya sea de manera local en tu sistema o conectandote a BrowserLab. No hay sombras o columnas, pero la pagina ahora esta aceptablemente estilizada.

En este ejemplo, únicamente he utilizado las clases con el prefijo no- para crear estilos especiales para exploradores antiguos. Sin embargo, no hay razón en absoluto por la cual no deberías usar ambas clases (con y sin prefijo) para servir diferentes prefijos a los exploradores de acuerdo a sus capacidades. Por ejemplo:

.csscolumns {
    /* reglas para exploradores que soportan el layout multi-columnas */
}
.no-csscolumns {
    /* reglas para exploradores que no soportan el layout multi-columnas */
}

A veces este enfoque está justificado, por ejemplo, si quieres crear un layout completamente diferente para cada nivel de soporte. Pero si se trata simplemente de una cuestión de ofrecer estilos alternativos para exploradores antiguos, no olvides que los exploradores ignoran las propiedades que no reconocen. Si usas las clases de Modernizr para todos los estilos, tu página se verá totalmente sin estilos en los exploradores que tengan JavaScript deshabilitado.

Usando Modernizr para detectar el soporte de HTML5

Los nombres de las clases que Modernizr agrega a la etiqueta de apertura de sirven para un doble propósito. También son los nombres de las propiedades de JavaScript que el objeto Modernizr crea cuando se carga la página. La siguiente tabla lista las clases y propiedades relacionadas a HTML5 y tecnologías relacionadas, como la geolocalización.

Características relacionadas con HTML5 detectadas por Modernizr

En muchos casos, todas las propiedades en las tablas (de características CSS y HTML5) retornan un true o false. Así que puedes probar el almacenamiento local con JavaScript de esta manera:

if (Modernizr.localstorage) {
    // script para ejecutar si se soporta el almacenamiento local
} else {
    // script para ejecutar si no se soporta el almacenamiento local
}

Sin embargo, en el caso de audio y video, el valor de retorno es una cadena que indica el nivel de confianza de que el explorador pueda ejecutar el tipo especificado. De acuerdo a la especificación de HTML5, una cadena vacía significa que no se soporta el tipo. Si se soporta el tipo, el valor es “maybe” o “probably”. Por ejemplo:

if (Modernizr.video.h264 == "") {
    // no se soporta h264
}

Usando Modernizr para validar los campos HTML5 form requeridos

HTMl5 agrega muchos atributos nuevos a los forms, como un autofocus, el cual automáticamente pone en foco el campo especificado cuando se carga la página. Otro atributo útil es required, el cual previene que los exploradores compatibles con HTML5 envíen los datos de un form cuando un campo requerido esta en blanco.

Esto es genial, pero te deja con el problema de que hacer respecto a los exploradores antiguos. Una solución es ignorarlos, y dejar al final la validación del lado del servidor. Una forma más amigable al usuario de manejar la situación es crear un pequeño script para revisar los campos requeridos si el explorador no reconoce el atributo required.

1. Haz una copia de required_start.html en los archivos de ejemplo, y guardalo como required.html
2. Adjunta modernizr.js a la página utilizando un bloque de script justo antes del cierre head como se hizo anteriormente.
3. Crea un bloque script separado inmediatamente después del cierre de la etiqueta que enlaza la librería de Modernizr a la página, y crea un event handler para ejecutar el código tan pronto se termina de cargar la página:

   <script src="js/modernizr.js"></script> <script> window.onload = function() { //codigo para ejecutar cuando se carga la pagina }; </script> </head>

4. El event handler necesita obtener una referencia de los elementos form y emular los atributos autofocus y required en exploradores que no los reconocen. Lidiar con autofocus es fácil:

   window.onload = function() { // obtiene el form y sus elementos input var form = document.forms[0], inputs = form.elements; // Si no soporta autofocus, pone el foco en el primer campo if (!Modernizr.input.autofocus) { inputs[0].focus(); } // Si no soporta required, lo emula }

   La condición prueba Modernizr.input.autofocus, el cual retorna false si no se soporta autofocus. Sin embargo, el operador lógico NO (el signo de exclamación) revierte el significado, así que si no se soporta autofocus, la condición evalúa a true, y con input[0].focus() coloca el foco en el primer campo input.

5. Ahora agrega el código para revisar si no se soporta required. El código completo para el event handler se ve así:

   window.onload = function() { // obtiene el form y sus elementos input var form = document.forms[0], inputs = form.elements; // Si no soporta autofocus, pone el foco en el primer campo if (!Modernizr.input.autofocus) { inputs[0].focus(); } // Si no soporta required, lo emula if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // ciclo con el cual se busca la propiedad required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // si se encuentra required, obtiene el valor del campo y elimina los espacios en blanco if (att != null) { val = inputs[i].value; // Si el campo esta vacio, lo agrega al arreglo required if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // muestra una alerta si el arreglo required contiene algun elemento if (required.length > 0) { alert('Los siguientes campos son requeridos: ' + required.join(', ')); // previene que se envie el form return false; } }; } }

   El nuevo código crea una función que usa un ciclo con todos los elementos input del form cuando se intenta enviar los datos, busca los campos con el atributo required. Cuando encuentra una, retira los espacios al principio y al final del valor, si el resultado es una cadena vacía, agrega el campo al arreglo required. Si el arreglo contiene algún elemento después de que se revisaron todos los campos, el explorador mostrará una alerta con los nombres de los campos faltantes, y previene que se envíen los datos del form.

6. Guarda required.html y cargalo en un explorador, como IE del 6 al 9, que no tiene soporte para forms de HTML5. Notaras como automáticamente se coloca el foco en el primer campo.
7. Da clic al boton submit sin haber completado ninguno de los campos. Deberías ver una alerta avisando que los campos name y email son requeridos.

   

8. Prueba la página de nuevo pero completando un campo requerido. Cuando des clic a OK para cerrar la alerta, el campo que completaste aun tiene su contenido, indicando que el form no ha sido enviado.
9. Completa ambos campos requeridos, y da clic al boton submit. Esta ocasión, los campos se limpian, y deberías poder ver los datos adjuntos a la URL como una cadena de búsqueda en la barra de dirección del explorador.
10. Prueba la página en un explorador compatible con HTML5, como la última versión de Firefox, Chrome u Opera. En vez de mostrar la alerta, el explorador muestra sus propios mensajes de error.

Creando una versión de producción

Cuando estás listo para desplegar tu sitio, se recomienda crear una versión de producción personalizada de Modernizr, que contenga sólo aquellos elementos que realmente necesitas. Esto puede reducir el peso de la librería de Modernizr desde 44KB a algo tan poco como 2KB, dependiendo de cuáles características elijas.

Las opciones se agrupan convenientemente en categorías: CSS3, HTML5, Misceláneos y Extras. Dando click puedes seleccionar o deseleccionar las características.
Por defecto, los siguientes elementos se encuentran seleccionados en la categoría de Extras:

• HTML5 Shim/IEPP: Agrega dos scripts que fuerzan a IE del 6 al 8 a estilizar y mostrar los elementos HTML5 correctamente. Solo la necesitaras si tu plan es usar las nuevas etiquetas semánticas de HTML5, como header, footer, nav, y las demás.
• Modernizr.load(yepnope.js): Agrega un script cargador opcional, el cual no esta incluido en la versión de desarrollo. Agrega 3KB al peso de la descarga, asi que debes deseleccionarlo si no lo necesitas. Más adelante describiré su uso.
• Agregar clases CSS: Incluye las clases de Modernizr para la etiqueta de apertura . Debes seleccionar esta opción si quieres detectar el soporte de las características de CSS3.

Si seleccionas cualquier opción en la categoría de CSS3, también se seleccionarán las siguientes opciones en la categoría de extras:

• Modernizr.testProp()
• Modernizr.testAllProps()
• Modernizr._domPrefixes()

No deselecciones estas opciones. Al hacerlo, automáticamente deseleccionaras cualquier opción que hayas seleccionado de la categoría de CSS3.

MQ Polyfill(respond.js) en la categoría de Extras, agrega un script que te permite soporte limitado para media queries en IE del 6 al 8. Cuando lo seleccionas, automáticamente se seleccionan Media Queries y Modernizr.testStyles(). Para aprender más acerca del polyfill(respond.js) de media queries, visita https://github.com/scottjehl/Respond Las opciones restantes en la categoría Extras son únicamente para usuarios avanzados. Para más detalles de qué son y cómo usarlas, revisa la sección de Extensibilidad en la documentación de Modernizr.

Usando Modernizr para cargar scripts externos

Cuando se crea una versión de producción personalizada de Modernizr, la opción Modernizr.load() esta seleccionada por default. Modernizr.load() es un alias para yepnope(), un script independiente para cargar que fue desarrollado con Modernizr en mente. Para mostrar un ejemplo sencillo de como usarlo, movi el script de required.html a check_required.js e hice tres pequeños cambios para remover las pruebas Modernize y asignarlo a una variable llamada init. El script es este:

var init = function() {
    // obtiene el form y sus elementos input
    var form = document.forms[0],
        inputs = form.elements;
    // pone el foco en el primer campo
    inputs[0].focus();
    // revisa los campos requeridos cuando se envia el form
    form.onsubmit = function() {
        var required = [], att, val;
        // el ciclo busca la propiedad required en los elementos input
        for (var i = 0; i  0) {
            alert('Los siguientes campos son requeridos: ' + required.join(', '));
            // previene que se envie el form
            return false;
        }
    };
};

Una gran ventaja de Modernizr.load() es que carga condicionalmente los script dependiendo del resultado de la prueba de las capacidades del explorador, por lo cual se llama originalmente yepnope.js. Carga los scripts externos de forma asíncrona; en otras palabras, después de que el Document Object Model (DOM) ha cargado en el explorador;asi que puede ayudar a acelerar el rendimiento de tu sitio.

La sintaxis básica de Modernizr.load() es pasarle un objeto con las siguientes propiedades:

• test: La propiedad que quieres que Modernizr pruebe.
• yep: La locación del script que quieres cargar si la prueba es exitosa. Usa un arreglo para varios scripts.
• nope: La locación del script que quieres cargar si la prueba falla. Usa un arreglo para varios scripts.
  complete: Una función a ser ejecutada tan pronto como se ha cargado el script externo (es opcional).

Ambas yep y nope son opcionales, siempre que proporciones una de ellas.

Para cargar y ejecutar el script check_required.js, agrega el siguiente bloque script despues de donde se agregó modernizr.adc.js (el codigo esta en required_load.html):

Modernizr.load({
    test: Modernizr.input.required,
    nope: 'js/check_required.js',
    complete: function() {
        init();
    }
});

Trabaja exactamente como antes, pero reduce la carga de descarga en los exploradores que soportan el atributo required.
Para probar múltiples condiciones, le puedes pasar un arreglo de objetos a Modernizr.load(). Para más detalles ve el tutorial de Modernizr.load() en la documentación de Modernizr.

Precaución

Modernizr es una herramienta muy poderosa y útil, pero eso no significa necesariamente que deberías usarla. No siempre es necesario usar Modernizr para brindar estilos alternativos a los exploradores. Si tu principal preocupación es Internet Explorer, considera utilizar comentarios condicionales para IE. También puedes usar la CSS para sobreescribir algunos estilos. Por ejemplo, usar primero un color hexadecimal y entonces con sobreescribirlo con un rgba() o hsla(). Los exploradores antiguos aun usar el primer valor e ignoran el segundo.

Modernizr realmente entra en el juego cuando se combina con polyfills y otro JavaScript. Pero recuerda que a menudo es muy sencillo crear tu propia prueba para las características soportadas. Por ejemplo, el siguiente código es lo único que requieres para probar si un explorador soporta el atributo required (el codigo esta en required_nomodernizr.html):

var elem = document.createElement('input');
if (typeof elem.required != 'boolean') {
    // no se soporta required 
}

A donde ir desde aquí

Este tutorial ha cubierto todas las principales características de Modernizr. Para aprender mas acerca de estas caracteristicas, estudia la documentacion oficial en http://www.modernizr.com/docs/. Además puedes encontrar útiles los siguientes recursos:

yepnopejs.com brinda una covertura profunda de yepnope(), la cual esta incorporada en Modernizr como Modernizr.load().
Tomando Ventaja de HTML5 y CSS3 con Modernizr, de Faruk Ate? (Líder del Proyecto Modernizr). Aunque esta basado en una versión anterior de Modernizr, este artículo contiene un ejemplo detallado de la mejora progresiva a través de Modernizr y CSS3.

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Pablo Macedo.

En esta nueva versión Edge introduce varias nuevas características enfocadas a mejorar la animación y optimización de recursos. La línea de tiempo ha recibido un comportamiento más natural así mismo que ya podemos encontrar herramientas de clipping y transformación tipo on-stage, y algunas opciones de publicación que para incluir soporte a navegadores web antiguos así como código optimizado.

Así que no esperes más para descargar esta última versión y comenzar a experimentar con una herramienta que promete bastante.