Activ - Centro de Capacitación Autorizado por Adobe enfocado a Cursos de HTML5, jQuery, Javascript, CSS, Usabilidad, SEO, Mobile, Flex, Flash, ActionScript y demás tecnologías. » articulos

Uso de Particulas con Away3D

jesus_macedo — Wed, 01 May 2013 18:59:53 +0000

La versión alfa de Away3D 4.1 incluye soporte para la creación de sistemas de partículas de alto rendimiento basados en GPU con un API poderoso y configurable. Se puede usar esta habilidad para implementar efectos increíbles en tus proyectos 3D.

Este tutorial introduce las bases del API, incluyendo la clase de partículas geométricas y la función de inicialización de la animación para controlar la vida y comportamiento de las partículas.

Partículas Geométricas

Lo primero que se necesita para las partículas, es un conjunto de geometría. Cada elemento es un conjunto que representara un tipo de partícula. Se puede usar cualquier figura geométrica, incluyendo figuras geométricas primitivas proporcionadas por Away3D o figuras geométricas cargadas desde un archivo externo. Sin embargo, no se recomiendan las figuras con muchos vértices, ya que afectaran el rendimiento de la animación.

Puedes estar preguntándote porque las figuras están predefinidas en lugar de ser creadas al vuelo como otros sistemas de partículas. Esto es debido a las limitaciones impuestas al búfer de carga de vértices, en el cual si se agregan las figuras de las partículas de forma dinámica, necesitara ocurrir mucho más frecuentemente. Cargar un búfer de vértices conlleva a un costo de rendimiento, así que es una buena idea el reducir dichas cargas si es posible. Además, las figuras geométricas dinámicas tienen restricciones al compartir el búfer de vértices a través de diferentes instancias de la animación.

La demostración incluye archivos de ejemplo (que puedes descargar aquí) para este tutorial que usan CubeGeometry como el conjunto de elementos geométricos. Puedes encontrar este código de ejemplo en el archivo TheBasicTutorial.as:

var cube:Geometry = new CubeGeometry(10, 10, 10);
var geometrySet:Vector. = new Vector.;
for (var i:int = 0; i < 1000; i++){
    geometrySet.push(cube);
}

El código anterior agrega 1000 cubos al conjunto geométrico. Si se requiere, se pueden mezclar diferentes tipos de figuras geométricas en el mismo conjunto geométrico.

Una vez que el conjunto está listo, se puede usar el API para convertir el conjunto en la partícula geométrica final.

var particleGeometry:ParticleGeometry = ParticleGeometryHelper.generateGeometry(geometrySet);

Ahora se tiene la instancia final de la partícula geométrica, lista para su animación.

Tiempo de vida de la Partícula

El siguiente paso es crear un conjunto de partículas de animación. Puede que ya estés familiarizado con el concepto del ciclo de vida del tiempo de vida de las partículas. En un sistema de partículas tradicional, una partícula tiene un tiempo de vida definido, a través del cual otras propiedades (color, posición, etc.) son controladas.

En Away3D, una partícula tiene una propiedad startFrame relacionada al tiempo del sistema, y una propiedad opcional de duración. (Si no se especifica la duración, entonces la partícula tendrá una duración infinita). La propiedad de retraso (también opcional) representa el tiempo de retraso entre el fin de la duración de una partícula y el inicio de la duración de otra. Cuando se usan estas propiedades, una partícula aparecerá en su tiempo de inicio, se mantendrá “viva” durante su tiempo de duración, y entonces desaparecerá en su tiempo de retraso.

Debido a que estas propiedades son fundamentales para los cálculos de tiempo dentro del código del GPU, se tiene que predefinir cuales serán utilizadas. El primer parámetro del constructor ParticleAnimationSet indica si se estarán utilizando la propiedad duration de la partícula. El segundo parámetro indica si se usara una línea de tiempo cíclica (de modo que una vez una partícula ha completado su ciclo, automáticamente lo comenzara una nueva). EL tercero indica si las partículas desaparecerán en el tiempo de retraso antes del reinicio de sus ciclos.

En este ejemplo, las tres propiedades han sido establecidas en true:

var animationSet:ParticleAnimationSet = new ParticleAnimationSet(true, true, true);

Es importante notar que no hay propiedades en el conjunto de animación. Si las hubiera, todas las partículas tendrían las mismas propiedades y aparecerían y desaparecerían al mismo tiempo. En vez de ello, se usa una función que establece cada propiedad en las partículas de manera separada. debido a que son locales para cada partícula y se establecen una sola vez, startTime, duration, y delay son conocidas como propiedades estáticas locales. La función que establece estas propiedades será invocada para cada partícula. Se puede identificar el índice de la partícula usando el valor ParticleProperties::index, y entonces se establecen los valores ParticleProperties::startTime, ParticleProperties::duration y ParticleProperties::delay para la partícula, por ejemplo:

animationSet.initParticleFunc = initParticleParam;
private function initParticleParam(prop:ParticleProperties):void {
    prop.startTime = prop.index * 0.005;
    prop.duration = 10;
    prop.delay = 5;
}

El código anterior crear un conjunto de propiedades estáticas locales que harán que las partículas inicien su ciclo cada 5 milisegundos de diferencia, las mantendrá “vivas” por 10 segundos, y entonces las enviara a “dormir” por 5 segundos.

Posición de la Partícula

Otros sistemas de partículas tienen un emisor que se usa para controlar la posición de origen de cada partícula. El sistema de partículas de Away3D implementa la misma funcionalidad de una forma más efectiva a través de comportamientos (uno de los conceptos más importantes en el API de partículas).

La clase ParticlePositionNode puede controlar la posición para cada partícula en la instancia de ParticleGeometry. La naturaleza de su control está determinada a través de una propiedad en constructor de la clase. Esto toma tres valores diferentes:

ParticlePropertiesMode.LOCAL_STATIC (las partículas pueden tener diferentes propiedades iniciales para el comportamiento).
ParticlePropertiesMode.GLOBAL (todas las partículas tienen las mismas propiedades iniciales).
ParticlePropertiesMode.LOCAL_DYNAMIC (las partículas pueden tener diferentes propiedades que son controladas al vuelo).

Los modos LOCAL_STATIC y GLOBAL pueden compartir recursos de GPU a través de instancias de la animación, resultando en alto rendimiento. Así que, es una buena idea usar estos dos modos tanto como sea posible.

Este ejemplo usa ParticlePropertiesMode.LOCAL_STATIC:

animationSet.addAnimation(new ParticlePositionNode(ParticlePropertiesMode.LOCAL_STATIC));

Esto controla el valor de posición a través de la función initParticleFunc:

private function initParticleFunc(prop:ParticleProperties):void {
    prop.startTime = prop.index * 0.005;
    prop.duration = 10;
    prop.delay = 5;
    //calculate the original position of every particle.
    var percent:Number = prop.index / prop.total;
    var r:Number = percent * 1000;
    var x:Number = r*Math.cos(percent * Math.PI * 2 * 20);
    var z:Number = r*Math.sin(percent * Math.PI * 2 * 20);
    param[ParticlePositionNode.POSITION_VECTOR3D] = new Vector3D(x, 0, z);
}

Antes de poder visualizar el efecto, se tiene que crear el material, mesh, y el objeto animador para las partículas. Esto toma el mismo enfoque que otras formas de animar en Away3D.

//create material, mesh and animator
var material:ColorMaterial = new ColorMaterial(0xff0000);
var particleMesh:Mesh = new Mesh(particleGeometry, material);
var animator:ParticleAnimator = new ParticleAnimator(animationSet);
particleMesh.animator = animator;
animator.start();
_view.scene.addChild(particleMesh);

(click en la imagen para lanzar ejemplo)

Velocidad de la Partícula

Ahora ya se está listo para hacer que las partículas se muevan. Para esto, se necesitara utilizar otro comportamiento, el ParticleVelocityNode, el cual es un nodo de la animación de la partícula usado para establecer la velocidad inicial de la partícula.

Ya sabes que se debería estar usando ambos modos LOCAL_STATIC o GLOBAL tanto como sea posible. Pero, ¿cuál es mejor para esta aplicación? Internamente, el modo LOCAL_STATIC usa una corriente de registros para pasar los datos al GPU, de modo que los datos pueden ser representados por partícula. Sin embargo, GLOBAL usa registros constantes para pasar los datos por comportamiento. El número de corrientes de registros disponibles es más bajo que el número de registros constantes, y las corrientes de registros requieren más datos y más tiempo de inicialización. Así que como regla, deberías optar por el modo GLOBAL cuando sea posible.

En este caso, el objetivo es tener todas las partículas moviéndose con la misma velocidad, así que se puede usar el modo ParticlePropertiesMode.GLOBAL:

animationSet.addAnimation(new ParticleVelocityNode(ParticlePropertiesMode.GLOBAL, new Vector3D(0, 50, 0)));

Así luce el resultado:

(click en la imagen para lanzar ejemplo)

A dónde ir desde aquí

Has visto como crear una partícula geométrica, como establecer el tiempo de inicio y las propiedades de posición en partículas individuales, y cómo hacer que se muevan. Por supuesto, el API tiene muchas más características que las que se cubrieron aquí, pero ahora tienes un buen punto de partida desde el cual se pueden crear efectos impresionantes! Solo como un ejemplo, puedes crear el siguiente efecto usando las únicas características descritas en este tutorial:

(click en la imagen para lanzar ejemplo)

Aquí hay algunos recursos que puedes usar para continuar aprendiendo acerca de Away3dD:

Recuerda que en Activ tenemos un curso de ActionScript que te ayudará a sacarle más aprovecho a Away3D

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.

Diseño de Aplicaciones Móviles MultiScreen

jesus_macedo — Thu, 07 Feb 2013 16:00:03 +0000

Se han ido los días en que se debía asegurar que los gráficos fueran de 72dpi. Con una afluencia de dispositivos y tabletas listos para la web con nuevos tamaños de pantalla, resoluciones, y pixeles por pulgada. Debes asegurarte que los gráficos de tu aplicación móvil estén en el tamaño correcto a pesar del dispositivo.

Empezando con el iPad de Apple, las tabletas han sido el dispositivo del año. Pero la gran pregunta fue si es una novedad o si tiene un valor duradero. Business Insider reporto que, entre los 500 dueños de un iPad a los cuales encuestaron, su uso se ha incrementado casi un 80% desde la primera compra. Por experiencia personal, puedo decirte que uso la mía cerca de una hora todos los días, tanto para leer como para jugar.

Especificaciones de la pantalla

Sabiendo que las tabletas han llegado para quedarse, como diseñas para estas así como para computadoras de escritorio y otros dispositivos móviles? La tabla 1 muestra las especificaciones de pantalla de las tabletas mas populares.

	PC	Dispositivos Móviles	Tabletas
Tamaño de Pantalla	15" laptops 17" – 24" pc	4.3" Droid X 3.7" Droid 2 3.5" Apple iPhone 4	7" Samsung Galaxy Tab 7" BlackBerry PlayBook 9.7" Apple iPad
Resolución	1024 × 768 (20%) 1280 × 800 (higher 76%)	480 × 854 Droid 2 480 × 854 Droid X 640 × 960 iPhone 4	1024 × 600 Samsung Galaxy Tab 1024 × 600 BlackBerry PlayBook 1024 × 768 Apple iPad
Pixeles por pulgada	72	264 Droid 2 227 Droid X 326 ppi iPhone 4G	170 Samsung Galaxy Tab 170 BlackBerry PlayBook 133 Apple iPad
Platforma	Windows Mac	Android 2.2 iOS	Android 2.2 BlackBerry Tablet OS iOS

Dimensionando gráficos apropiadamente

Cuando se llega a la PC, se podría hacer fácilmente un botón de 100 pixeles de ancho por 30 pixeles de alto y confiar en que el usuario podrá seleccionarlo con el cursor de su mouse, ya que los pixeles por pulgada (o puntos por pulgada) era 72. Cuando se llega a tabletas y dispositivos móviles, sin embargo, el cursor el reemplazado por un dedo y la resolución ya no es 72dpi. Ambos de estos factores hacen el tamaño del boton algo muy importante.

Nota: Asi como se trabaja con gráficos bitmap, se debe tener en cuenta que mientras sea mayor el DPI, el tamaño del archivo sera mayor.

Tamaño del dedo

Si tomas la medida del tamaño promedio de la huella dactilar de un adulto, es al menos un cuadrado de media pulgada. Ese es el porque los iconos de los dispositivos iOS son de este tamaño. Por lo tanto, ese es el tamaño del que quieres tu botón. Pero como te aseguras de que el botón sera de este tamaño en todos los dispositivos?

Pixeles por pulgada

Antes de comenzar a dimensionar el contenido, necesitas asegurarte de que nada se escale automáticamente:

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;

Un vistazo rápido a estas especificaciones revela que los pixeles por pulgada (ppi) varían. Para asegurarse de que un botón sera siempre de 0.5", solo multiplica el ppi (también conocido como dpi) por 0.5. En ActionScript 3 esto seria de esta forma:

next_btn.width = 133 * .5;

next_btn.height = 133 *.5;

Pero realmente no quieres hacer este calculo para cada dispositivo. Por suerte, en Adobe Flash Professional puedes usar la propiedad Capabilities.screenDPI para determinar el DPI de la pantalla de cada dispositivo. Entonces solo multiplica eso por 0.5:

next_btn.width = Capabilities.screenDPI * .5;

next_btn.height = Capabilities.screenDPI * .5;

Aquí hay una versión del código para determinar el tamaño en pixeles de tu botón si conoces su tamaño en milímetros en vez de pulgadas:

next_btn.width = Capabilities.screenDPI * (mm / 25.4);

next_btn.height = Capabilities.screenDPI * (mm / 25.4);

Siempre prueba

Debido a que Android 2.2 no esta construido para tabletas –incluso aunque hay tabletas en el mercado (como la Samsung Galaxy Tab)– la propiedad Capabilities.screenDPI dará una resolución errónea de 240 cuando la resolución real es 170. Tendrás que realizar una revisión extra y cambiarla apropiadamente:

if(Capabilities.screenDPI.manufacturer == "Android Linux" && Capabilities.screenResolitionY == 1024)

{

	next_btn.width = 85;

	next_btn.height = 85;

}

La siguiente figura muestra el botón dimensionado correctamente a través de tres dispositivos: Droid 2, iPad y Samsung Galaxy Tab.

A donde ir desde aquí

Para encontrar más acerca de la propiedad Capabilities.screenDPI, revisa los siguientes artículos y referencias:

Autoría de contenido Flash móvil para múltiples tamaños de pantalla
La clase flash.systemCapabilities (Referencia de ActionScript 3 para la Plataforma Flash)
La clase mx.core.RuntimeDPIProvider (Referencia de ActionScript 3 para la Plataforma Flash)

Así como se trabaja con gráficos bitmap, se debe tener en cuenta que mientras sea mayor el DPI, el tamaño del archivo sera mayor. Revisa estos vídeos para aprender más acerca de la optimización de gráficos:

Densidad de pantalla (Adobe TV)
Optimizando graficos con ActionScript (Adobe TV)
Optimizando gráficos en el escenario en Flash Professional (Adobe TV)

También puedes aprender acerca de la optimización de gráficos utilizando una herramienta como Adobe Fireworks CS5:

Guía de aprendizaje de diseño en Fireworks: Optimizando archivos para múltiples exportaciones
Optimizando y exportando gráficos (Documentación de Fireworks)

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.

Usar extensiones nativas en Adobe Flash Professional CS6

jesus_macedo — Thu, 07 Feb 2013 14:34:13 +0000

Con la introducción del SDK de AIR 3, Adobe permite a los desarrolladores externos extender la plataforma AIR con código nativo. Esta característica hace a las aplicaciones de AIR más competitivas que nunca antes, debido a que les permite tomar ventaja de grandes características de la plataforma, incluyendo las compras In-App, Facebook, iAd, GameCenter y AdMob. Con el reciente lanzamiento de CS6, se pueden integrar extensiones nativas de AIR a las aplicaciones con unos cuantos clicks.

Adquiriendo las extensiones nativas (ANE)

Las extensiones nativas para AIR están empaquetadas como archivos con la extensión .ane. Milkman Games proporciona extensiones comerciales para iOS, Android, y Amazon incluyendo Ratings, Facebook, Twitter, compras In-App, Game Center, AdMob, y otras extensiones. Adobe mantiene una gran lista de extensiones de la comunidad para móviles, Windows y Mac que puedes explorar en el Centro de Desarrollo de Adobe AIR, en la pagina de Extensiones Nativas para Adobe AIR.

Una vez que has descargado la extensión nativa, necesitaras agregarla a tu proyecto en Flash Professional CS6.

Agregar extensiones nativas a un proyecto de Flash Professional CS6

Las extensiones nativas de Adobe AIR pueden trabajar con proyectos de AIR para Windows, Mac y Android. Puedes integrar una extensión nativa dentro de tu proyecto en Flash Professional CS6 en unos pasos sencillos:

Abre Flash Professional CS6, y crea un nuevo proyecto de AIR, AIR para Android, o AIR para iOS.

Elige File > Publish Settings.
Da clic en el icono de la llave junto a la configuración de Script para ActionScript.

Da clic en la pestaña de Library Path.
Da clic en el botón Browse to a Native Extension (ANE) file.

Navega al directorio que contiene la extensión nativa y selecciónala.
Da clic en OK

Implementar código ActionScript

Las extensiones nativas incluyen APIs de ActionScript para interactuar con código nativo. Una vez se ha incluido un archivo ANE, estas APIs estarán disponibles para completar el código dentro de Flash Professional. Puedes encontrar tutoriales paso a paso para implementar las extensiones de iAd, GameCenter, y AdMob, en el Centro de Desarrollo de Adobe AIR.

Cuando termines selecciona File > Publish, e implementa tu aplicación en tu plataforma de desarrollo!

A donde ir desde aquí

Ahora que te es familiar lo básico acerca del uso de extensiones nativas en Flash Professional CS6, puedes usar los siguientes enlaces para explorar la creciente lista de extensiones nativas disponibles para la plataforma AIR o aprender como empezar a crear tus propias extensiones:

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.

Introducción a jQuery Mobile

gr_maggi — Thu, 17 Jan 2013 17:16:55 +0000

Probablemente tienes uno en tu bolsa, o puedes estar hablándole, o puedes estar jugando en el, es un Smartphone. La categoría de Smartphone parece ser bastante amplia -es un teléfono Android, un dispositivo iOS de Apple, un teléfono BlackBerry o algo más? Para darte una prueba, aquí hay una lista de algunos dispositivos móviles que están en la categoría de Smartphone:

Apple iPhone/iPod Touch
Google Android
RIM BlackBerry/Playbook OS
Nokia Symbian (retirado, pero aún tiene casi 1 billón de usuarios en el mundo)
HP/Palm WebOS
Microsoft Window Phone 7

El reto que tienes es un vasto número de diferentes sistemas y soporte fragmentado de los estándares. Por ejemplo, el último iPhone de Apple tiene un soporte impresionante para estándares de HTML5, mientras que Symbian y la Microsoft Phone actualmente tienen poco o nada. Para permitirte crear sitios web para dispositivos móviles, la comunidad jQuery ha estado trabajando en un framework que puedes aprovechar, se llama jQuery Mobile. Este artículo te proporciona una introducción a este nuevo framework, el cual aun esta en versión alfa; y te ayudará a iniciar tus habilidades de desarrollo con jQuery Mobile.

Desarrollando sitios web con jQuery Mobile

Desarrollar sitios web ya no es un elemento en la lista de deseos para el equipo de diseño web -es una realidad-. La adopción de dispositivos móviles está creciendo rápidamente. De acuerdo al estudio reciente de Gartner dentro de los siguientes dos años tú podrás ver más personas visitando tu sitio web en un teléfono o tableta en vez de utilizar una computadora tradicional, con un potencial de 1.82 millones de dispositivos móviles en uso para el 2013.

La meta de jQuery Mobile es permitir ejecutar el framework en tantos dispositivos móviles como sea posible. En los Estados Unidos tenemos la atención en Smartphones iOS y Android. Sin embargo, fuera de los Estados Unidos, otros proveedores, como Nokia, son dominantes. Para este fin, jQuery Mobile trabajara en un amplio conjunto de dispositivos. En el lanzamiento de jQuery Mobile, en Septiembre de 2010, John Resig, el autor de jQuery, reveló una gráfica que listaba los sistemas operativos móviles más populares (Ver Figura 1). Para cada sistema asignó una letra A, B o C determinando si la importancia de soportar el SO fue Alta (A), Media (B) o Baja (C).

Una indicación de cómo esta cambiando el mundo móvil, está tabla, probablemente sea elaborada nuevamente debido al cambio radical: Nokia esta matando a la Plataforma Symbian y reemplazándolo con Windows Mobile Phone 7. En un solo movimiento, Windows Mobile Phone 7 ha pasado de ser irrelevante a un estatus alto (A).

Para apoyar tus necesidades de desarrollo móvil, jQuery Mobile emplea una filosofía llamada mejora progresiva. En sus raíces, la mejora progresiva significa: Empieza con un marcado HTML semántico estático, que deberá funcionar en todos los navegadores. Agrega sus comportamientos y mejoras. Esto asegura que el contenido de la página y la funcionalidad básica de HTML es todavía accesible a navegadores menos capaces.

El desafío con los navegadores móviles es un verdadero problema. Por un lado tienes navegadores con fantásticas características (como navegadores web de Android, BlackBerry 6 y iOS Mobile Safari) que son todas las variaciones de WebKit -un motor de renderizado que impulsa a muchos navegadores como Google Chrome y la versión de Apple Safari-. (WebKit no conoce nada sobre la carga de las cosas fuera de la red. No conoce nada acerca de eventos de sistemas operativo nativo. No conoce nada acerca del desplazamiento. Cada sistema operativo, navegador o proveedor de dispositivo, necesita construir un navegador sobre ese motor para proporcionar estas cosas.) Entonces tienes millones de teléfonos Nokia Symbian o Windows Mobile 6 y anteriores que han fragmentado los estándares de soporte web. Para agregar al reto, hay diferentes versiones de WebKit usando en los diferentes sistemas operativos móviles. La conclusión es que, la mejora progresiva es un modelo que permite mostrar tu contenido en cualquiera de los dispositivos móviles soportados.

Introducción

El primer paso para empezar a utilizar jQuery Mobile es configurar una página web. Dentro del elemento HEAD debes referenciar los archivos de CSS jQuery Mobile y JavaScript:

Como puedes ver en los archivos de script, jQuery Mobile se está extendiendo la biblioteca principal de jQuery. Para los observadores de los recursos, el actual tamaño del archivo minimizado de jQuery Mobile es de 12kb.

El enlace de arriba apunta directamente a las versiones de CDM alojadas en los servidores de jQuery. El vínculo CSS también contiene referencias a los archivos gráficos que se necesitan. Si quieres descargar y almacenar los archivos de manera local yo necesitaras ir a la siguiente dirección Web:

http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.zip

Descarga y extrae el archivo ZIP. Dentro de la carpeta encontrarás versiones comprimidas y sin comprimir de los archivos CSS y JavaScript, junto con una subcarpeta que contiene diez imágenes que se utilizan en el documento CSS.

Necesitarás utilizar tres áreas básicas de contenido en la página web donde vas a crear tu primer sitio con jQuery Mobile. La siguiente es una sugerencia de plantilla que puedes utilizar para futuros proyectos.

 
   
  
     
     Page Title 
     
     
     
   
 

  
     Page Title
  

  
     Page content goes here.
  

  
     Page Footer

Hay un par de cosas que vale la pena destacar en esta plantilla. La primera es el uso del elemento DIV. Con HTML5 son tan comunes en los dispositivos móviles ¿Por qué no utilizar los nuevos elementos HEADER, ARTICLE,SECTION o FOOTER? Los antiguos navegadores no entienden los nuevos elementos HTML5. En algunos casos, como en las anteriores versiones de Internet Explorer en Windows Phone, hay un bug que primero requiere crear, mediante la programación un elemento (que no es HTML) en la etiqueta antes de que pueda ser estilizado. La etiqueta DIV es, sin embargo, soportada universalmente.

Puedes guardar la página web y probar en tu navegador. El código es HTML y trabaja en tu computadora de escritorio. Recomiendo usar Chrome para ejecutar las pruebas locales cuando quieras validar que el código HTML/JavaScript funcione correctamente. Para las pruebas de calidad necesitaras ejecutar las páginas web en diferentes dispositivos móviles.

Crear páginas en un sitio móvil usando enlaces

Una diferencia entre el estándar de las páginas web y páginas web móviles es la cantidad de contenido que se puede colocar en la pantalla. Sí, se puede cargar el sitio del New York Time en tu iPhone, pero necesitas hacer zoom para leer el contenido. Una buena solución es reducir el desorden de la página, hacia abajo del contenido que deseas presentar.

Para un sitio web tradicional se tendrían que crear muchas páginas web diferentes con un pequeña carga de contenido en cada una. Pero cuando estas utilizando jQuery, se puede resolver el problema de micro-contenido.

Arriba se muestra como crear una página repetitiva con jQuery Mobile. Llevaremos esto, un paso más allá y crearemos “páginas” de contenido. Una página puede estar estructurada como un bloque DIV en jQuery Mobile. Reemplaza el contenido dentro del elemento BODY utilizando la plantilla de abajo. Se agregara un menú que enlaza a cuatro páginas diferentes. La primer página contiene un menú con enlaces (Ver Figura 3):



  
     Menu
  

     
     What vehicles do you like?      
     Cars
     Trains
     Planes      
  

  
     Page Footer

Figura 3

La parte importante de este bloque HTML es el primer DIV. Dentro del elemento hay una propiedad de ID y DATA-ROLE:

data-role="page" id="menu"

El data-role define el contenido dentro del elemento DIV como una “página”. El término es un poco engañoso ya que “página” es un panel o pantalla en el código HTML y no una página separada. La instrucción data-role=”page” construye el contenido visible en la pantalla alrededor de los elementos DIV. El ID permite enlazar las secciones utilizando enlaces HREF.

El menú es la primer página por lo cual será la primera página en mostrarse en el navegador. Hay tres páginas adicionales que puedes agregar. Cada una tiene un ID diferente: Cars, Planes, Trains.



  
     Cars
  

     
     We can add a list of cars
  

  
     Page Footer
  




  
     Trains
  

     
     We can add a list of trains
  

  
     Page Footer
  




  
     Planes

     
     We can add a list of planes
  

  
  Page Footer

Prueba la página en tu dispositivo Android o iOS. Cuando cargue la página Web obtendrás tres cosas:

El menú carga como si fuera una página propia (puedes intentar desplazarla pero no observarás algo más).
Cuando seleccionas un enlace, la página cambia con una animación que te lleva la nueva sección.
Cuando te mueves fuera de la página del menú automáticamente aparecerá un botón de retroceso en la cabecera del DIV.

Cada uno de estos elementos DIV se cargaran dentro del navegador y parecerán páginas web separadas. El movimiento entre las pantallas es fluido.

La recomendación de crear múltiples pantallas de contenido en una página te permitirá reducir el tiempo de carga de la página. Puedes enlazar páginas web externas, sin embargo, con la siguiente advertencia: Los enlaces en jQuery Mobile son tratados como llamadas a AJAX. Los enlaces de una página de jQuery Mobile toman ventaja de las transiciones de CSS al cambiar las pantallas. Cuando quieres enlazar una página que está fuera de la aplicación necesitaras forzar la creación de un nuevo documento y reemplazar los archivos actuales de jQuery Mobile. Esto se muestra en el siguiente ejemplo:

madinc.co

Necesitas incluir la propiedad y el valor rel=”external”. Esto te permite enlazar una página web fuera de los enlaces locales que se están utilizando. Sin embargo, jQuery Mobile tiene un paso extra. En lugar de sólo tratar a los enlaces externos como un enlace fuera de tu sitio, jQuery Mobile aplicará una animación en la transición de página. En lugar de tener todo tu contenido en una sola página, puedes dividir el contenido en muchas páginas para construir mejores soluciones.

Trabajar con componentes

Por supuesto, enlaces y paginas son solo un aparte del diseño web móvil. Un segundo reto que muchos desarrolladores de web móvil encaran, es la explosión de aplicaciones. A diferencia de las páginas web, las aplicaciones para Android, iOS y otros sistemas son construidos con tecnologías complejas como Objective-C, Java y C#. Estas tecnologías permiten a los desarrolladores añadir menús de herramientas, listas y otros controles, y componentes que no se encuentran en HTML.

Actualmente jQuery Mobile está disponible con una selección de componentes. Los siguientes componentes están incluidos en la versión alfa:

Páginas.
Cajas de Diálogo.
Barras de Herramientas
Botones.
Formato de Contenido.
Elementos de Formulario.
Listas.

Agregar y cambiar un componente no es muy difícil. Si sabes un poco de HTML, entonces vas por buen camino. Revisemos los componentes de una página.

Agregar cabeceras y pies de página

El ejemplo anterior demuestra cómo puedes agregar barras de herramientas como cabeceras y pies de página. Las barras de herramientas a menudo son las más difícil de controlar cuando se crea contenido para diferentes pantallas. El reto llega al colocar contenido que se escale dinámicamente para diferentes tamaños de pantalla por ejemplo, una barra de herramientas en el HEADER puede contener un botón (botón de retroceso). Utilizando jQuery Mobile el HEADER te permitirá agregar un título que permanezca en el centro con un botón a la izquierda o a la derecha sin importar que tan grande sea la pantalla.

El siguiente código crea un header con dos botones (Figura 4):


  Cancel
  Edit Contact
  Save

Figura 4

La posición de los botones esta definida por el orden del contenido. El resultado es una página web móvil con un título centrado con botones a la izquierda y a la derecha que lucen y funcionan consistentemente en diferentes dispositivos.

Las cabeceras y los pies de página también pueden ser personalizados como herramientas de navegación. Se pueden agregar botones interactivos al pie de página que te llevaran a las secciones de la pantalla. Esto se logra con un data-role=”navbar”:


  
     One
     Two

De nuevo, puedes ver que con la mayoría del código jQuery Mobile, el navbar es construido con una simple lista HTML envuelto en una etiqueta DIV. Las propiedades, como ui-btn-active pueden ser establecidas para identificar a un botón que debería ser seleccionado.

Cuando seleccionas un botón y cambias a una segunda pantalla dentro de la misma página, jQuery Mobile es lo suficientemente listo para agregar automáticamente un botón de retroceso en el header. Por ejemplo, el siguiente código HTML agrega tres pantallas en una página de HTML. Esta la pantalla principal y dos pantallas de ejemplo a las que se pueden enlazar desde la navbar. Agrega el código y ve como se agregan los botones de retroceso automáticamente.


  
     Navigation
  

   
Navigation page   

  
  
     
        One
        Two
     
  




  
     Nav Screen 1
  

     
Screen for Navigation One   

  
Additional Footer information
  



  
     Nav Screen 2
  

     
Screen for Navigation Two
  


Additional Footer information

Recuerda agregar las referencias a jQuery Mobile.

Hacer encabezados y pie de página persistentes

Una técnica común de diseño de interfaces de usuario es mantener el header hasta arriba de la pantalla y el footer hasta abajo. Puedes utilizar jQuery Mobile para lograrlo, agregando data-position=”fixed” a el header o al footer. Esto forzará a que el header se mantenga hasta arriba el footer hasta abajo, como en el siguiente ejemplo (Figura 5):


  
     Navigation
  

  
     
        Royal Family
        Henry VIII
        George V
        Prince of Wales
        Elizabeth I
        Elizabeth II
        Prime Miniseters
        Winston Churchill
        Tony Blare
        David Cameron
     
  


  
     
        Royals
        Leaders
     
  




  
     Royal Family
  


Members and relatives of the British Royal Family historically represented the monarch in various places throughout the British Empire, sometimes for extended periods as viceroys, or for specific ceremonies or events. Today, they often perform ceremonial and social duties throughout the United Kingdom and abroad on behalf of the UK, but, aside from the monarch, have no constitutional role in the affairs of government. This is the same for the other realms of the Commonwealth though the family there acts on behalf of, is funded by, and represents the sovereign of that particular state, and not the United Kingdom.

  
     Royal Family
  



  
     Prime Ministers
  


The Prime Minister of the United Kingdom of Great Britain and Northern Ireland is the Head of Her Majesty's Government in the United Kingdom. The Prime Minister and Cabinet (consisting of all the most senior ministers, who are government department heads) are collectively accountable for their policies and actions to the Sovereign, to Parliament, to their political party and ultimately to the electorate. The current Prime Minister, David Cameron, was appointed on 11 May 2010.


  Prime Minister

Figura 5

Ahora, sin utilizar Objective-C puedes agregar header y footers fijos.

Trabajar con cajas de diálogo

El componente page también permite agregar cajas de diálogo personalizadas utilizando la propiedad data-rel. Por ejemplo, el siguiente código cargará un página web dentro de una caja de diálogo:

Open dialog

Utilizar este método te permite cargar cualquier mensaje personalizado dentro de la caja de diálogo.

Se necesitan dos secciones para una caja de diálogo cuando se posiciona cuna caja de diálogo en la misma página. Curiosamente, una caja de diálogo no es diferente de una pantalla. Con este conocimiento, puedes agregar puede agregar cualquier tipo de HTML dentro de una caja de diálogo. esta primera sección muestra un enlace a la caja de diálogo como se muestra:


  
     Dialog Box
  

   
  Open dialog 


  Page Footer

Puedes ver en el HREF del botón que hay un enlace o una sección local. La siguiente página aparecerá en la caja de diálogo:


  
     Dialog Title
  

     
     This is a dialog box      
  


Additional Footer information

La inclusión del footer en la página es opcional, pero debe incluir el header. Sin el header, no aparecerá automáticamente un botón de cerrar.

Listas

Hay muchos datos en la Web. Las listas son eficaces herramientas que puedes utilizar para administrar grandes cantidades de datos. Ya habíamos utilizado las listas en ejemplos anteriores, pero ahora es el momento de empaparse de ellas:
Aquí está una lista simple utilizando el estándar HTML:


  Henry VIII
  George V
  Prince of Wales
  Elizabeth I
  Elizabeth II

En jQuery Mobile puedes convertir esta lista simple en una magnífica. El atributo data-role le dirá a jQuery Mobile que redibuje la lista con una mejor vista y rendimiento como si se tratara de una aplicación nativa:


  Henry VIII
  George V
Prince of Wales
  Elizabeth I
  Elizabeth II

Figura 6

Eso es todo, solo 20 caracteres y tienes una lista con formato.

Fuera de la lista básica, jQuery te da la opción de extender la lista básica. Por ejemplo, el siguiente será añadir divisores a las listas (Figura 7):


  Royal Family
  Henry VIII
  George V
  Prince of Wales
  Elizabeth I
  Elizabeth II
  Prime Ministers
Winston Churchill
  Tony Blare
  David Cameron

Figura 7

Puedes agregar separadores(divider) incluyendo el atributo data-divider al inicio del elemento li e incluyendo un elemento especial de la lista donde quieras que aparezca el separador.

(Royal Family 
)

Las burbujas de datos también pueden agregarse a casa elemento de la lista. En el ejemplo siguiente el reinado de cada miembro de la Familia Real Británica es agregado a una burbuja (Ver Figura 8).


  Henry VIII Reign 37 Years
  George V Reign 25 Years
  Prince of Wales N/A
Elizabeth I Reign 44 Years
  Elizabeth IIReign since 1952

Figura 8

Un tipo de lista adicional es una lista compleja donde puedes agregar enlaces, imágenes, y texto dentro de un elemento lista(li). Aquí hay un ejemplo:


  
     
     Henry VIII
     Reign 37 Years
     Details
  
  
     
     George V
Reign 25 Years
     Details
  
  
     
     Prince of Wales
     Reign N/A
     Details
  
  
  
     Elizabeth I
     Reign 44 Years
     Details
  
  
     
     Elizabeth II
     Reign Since 1952
     Details

Este tipo de lista es útil cuando necesitas comunicar muchos datos. Por ejemplo, podrías querer una lista de los estudiantes en clase, con su nombre, fotografía y GPA. El resultado final es que tienes una lista de desplazamiento que luce complicada crear solo con HTML.

Publicar tu sitio web con jQuery Mobile

Cuando has completado el desarrollo de tu sitio jQuery Mobile te queda una tarea final: Implementar los archivos que el mundo podrá ver.

Al final del día, jQuery Mobile es una colección de archivos HTML, CSS y JavaScript. La implementación no es diferente de cuando se implementa un sitio estándar de HTML/CSS. Usando FTP o el administrador de sitios web de tu preferencia (como Dreamweaver) registrar los archivos al el servidor web. Asegúrate de que registrar todos los archivos JavaScript, CSS, y archivos de imagen.

Cuando los archivos están en el servidor puedes visitar el sitio utilizando un dispositivo móvil como BlackBerry, iPhone, Android o Windows Phone.

Al utilizar el enfoque de jQuery Mobile se hace la afirmación de que el sitio se centrará en los teléfonos inteligentes. Es posible que quieras considerar la creación de una identidad móvil completamente separada de tu sitio jQuery Mobile, si se trata de un sitio secundario a tu sitio web principal. Por ejemplo, tu sitio principal podría ser www.companyname.com mientras tu sitio jQuery Mobile puede ser m.companyname.com.

No hay manera correcta o incorrecta de cómo diferencia un sitio web dirigido a equipos de escritorio contra un sitio móvil. La única decisión correcta es asegurarte de que tienes un sitio web móvil para apoyar a tus clientes en la experiencia visual.

A donde ir desde aquí

La versión alfa actual de jQuery Mobile claramente ha necesitado mucho trabajo. Si has estado esperando a lanzarte al mundo de diseño web móvil entonces su espera ha terminado. jQuery Mobile te brinda un framework que que hace el desarrollo web móvil más fácil.

Para más información acerca de jQuery Mobile, revisa las siguientes referencias:

Explora cómo usar jQuery para hacer diseño para móviles más eficiente

Usando y personalizando temas de jQuery Mobile

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.

Tips para Proyectos Extensos de iOS con Flash

jesus_macedo — Wed, 16 Jan 2013 15:19:14 +0000

Cuando se está haciendo desarrollo de juegos con Adobe AIR para Android o la tableta de BlackBerry, se pueden cargar archivos SWF al vuelo en tiempo de ejecución; con AIR para iOS, no hay tal opción. En Android o la tableta de BlackBerry el código es interpretado desde el bytecode de ActionScript, mientras que en iOS todo el código debe ser compilado desde el bytecode de ActionScript a bytecode nativo como un solo archivo IPA, el cual solo se puede crear desde un solo SWF.

Si el juego tiene docenas de niveles y cada nivel es un SWF, compilar para iOS puede ser un reto. Cuando se está en la programación de juegos y la fase de pruebas de desarrollo, se puede usar ipa-test-interpreter para cambiar la configuración del compilador, y tu juego se ejecutara como si lo hiciera en Android o en la tableta de BlackBerry. Sin embargo, Apple no aceptara juegos construidos utilizando este enfoque, así que se necesitara otro enfoque para la versión final.

Una solución es compilar cada nivel como una librería SWC, y entonces enlazar todos los SWC dentro de un solo archivo SWF.

Crear un solo archivo SWF de SWCs

Si estas usando Flash Builder, necesitaras usar un Flex Library Project, el cual generara un archivo SWC, en vez de un proyecto de ActionScript, cuyo archivo generado es un SWF.

En Flash Professional CS5.5, puedes usar una opción en la caja de dialogo de la Configuración de Publicación, para generar un SWC en lugar de un SWF.

A donde ir desde aquí

Cuando se usa la técnica descrita en este artículo para el desarrollo de un juego para iOS, se necesitara instanciar los nuevos niveles en tiempo de ejecución en lugar de cargarlos dinámicamente. Recuerda, es posible cargar archivos SWF en iOS, pero el código dentro de estos no será interpretado. Cargar un SWF de esta forma es útil para los recursos gráficos como animaciones o gráficos vectoriales. Puedes crear una librería completa de símbolos y simplemente seleccionar el símbolo que quieras utilizar.

Por último, nota que esta técnica funciona para ActionScript 3.0, pero no para ActionScript 2.0.

Para información acerca de combinar muchos SWFs dentro de un solo SWF, lee mi artículo Uniendo múltiples archivos SWF dentro de un SWF para su implementación en iOS.

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.

Fundamentos de OOP en JavaScript

jesus_macedo — Thu, 13 Dec 2012 19:24:36 +0000

En este artículo, se discutirá la creación de objetos en JavaScript utilizando la herencia de prototipos como una alternativa al operador new.

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 v1title>
  <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 v3title>
  <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.

Detrás de la Arquitectura del Código de Brackets

gr_maggi — Wed, 12 Dec 2012 07:51:34 +0000

Brackets, el nuevo editor de código para la web, es un proyecto bastante ambicioso en muchos niveles, es una herramienta que está escrita utilizando HTML, CSS y JavaScript; los desarrolladores están utilizando al mismo Brackets en la gran mayoría.

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.

Un vistazo a LocalStorage en HTML5

jesus_macedo — Tue, 11 Dec 2012 17:36:35 +0000

Una de las características más interesantes en HTML5 es la posibilidad de almacenar datos localmente y permitir que la aplicación se ejecute offline. Hay tres APIs diferentes que tratan con esas características y elegir una depende de que quieres hacer exactamente con los datos que estas planeando almacenar localmente:

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 Logostitle><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

  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 + '
 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.

Experimentos de CSS3 con Adobe FilterLab

gr_maggi — Mon, 10 Dec 2012 19:33:06 +0000

En Octubre del 2011, Adobe propuso CSS Shaders como una forma de traer efectos cinematográficos a la web. Efectos como saturation, gamma, burn, fold, curl e incluso dissolve y explode podrían aplicarse con CSS a los elementos HTML normales. Esa propuesta ha evolucionado. Se ha debatido abiertamente, actualizado y finalmente se fusionó con la especificación de Efectos de Filtro CSS. Ahora está en camino a un navegador para estar cerca de ti. CSS Shaders ahora lleva el nombre de Filtros Personalizados CSS, que son igual de expresivos.

CSS FilterLab

CSS FilterLab es una herramienta basada en el navegador que te permite jugar con los filtros CSS, modificarlos, y ver los efectos en tiempo real (Ver figura 1). Puedes usar la herramienta para combinar múltiples filtros y animarlos para crear efectos cinematográficos.

Figura 1

En el momento de escribir, esto es realmente de última tecnología, así que solo unos pocos navegadores lo soportan. Así cuando abres CSS FilterLab en tu navegador, se mostrará un mensaje con las instrucciones sobre qué hacer para obtener la mejor experiencia. Tuvimos mucho cuidado para hacer que las instrucciones sean simples y fáciles de seguir.

Para empezar

Es fácil empezar a experimentar con CSS FilterLab. Una vez que abras el navegador, puedes empezar a añadir filtros desde el menú Añadir Filtro.

Puedes elegir aplicar filtros integrados o filtros personalizados:

Filtros Integrados son los que vienen por defecto en el navegador. Contienen efectos de color básico como escala en grises, sepia, saturación o contraste.
Filtros Personalizados toman efectos a un nivel completamente nuevo. Algunos ejemplos que se han construido incluyen efectos como burn, curl, fold, dissolve, explode, y muchos más. Los filtros personalizados no vienen con los navegadores, sino que están escritos por los desarrolladores mismos. Ellos hacen uso de Shaders, que son pequeños programas que permiten un control preciso sobre el color y la geometría. Shaders toma ventaja de la aceleración de hardware y son comúnmente utilizados en los efectos visuales para juegos. Pueden parecer ajenos a los desarrolladores de CSS, y por lo general requieren un buen conocimiento de las matemáticas.

Afortunadamente, CSS FilterLab viene con excelentes ejemplos de filtros personalizados con Shaders subyacentes. Un ejemplo es el doblez, que da a un elemento HTML el aspecto 3D de un pedazo de papel doblado (Ver Figura 2).

Figura 2

Los filtros que se han aplicado exponen sus controles de parámetros. Esto hace que sea muy fácil que puedas ajustarlas para conseguir el efecto que buscas. Además, múltiples filtros integrados o personalizados se pueden aplicar en conjunto para obtener resultados impresionantes.

Una vez que estés feliz con el resultado, guarda los cambios, como un cambio preestablecido. Esto te permite utilizar la configuración en otra ocasión.

Efectos de Animación

Los efectos no sólo pasan y ya. Vienen a ser, la transición de un estado a otro. Esto es lo que los hace expresivos.

CSS FilterLab viene con un conjunto básico de controles de animación que te ayudan a crear transiciones fluidas entre los valores de los parámetros del filtro.

Observa la línea de tiempo y controles en la parte inferior de la pantalla. Da clic en cualquier punto de la línea de tiempo, y entonces cambia los parámetros de los filtros activos. Esto crea un nuevo keyframe en la línea de tiempo. Pulsa el botón de play para ver ejecutarse la animación (Ver Figura 3).

Los keyframes pueden agregarse, arrastrándolos a lo largo de la línea de tiempo o eliminados para modificar la animación y obtener lo que deseas.

La duración de la animación puede ser cambiada desde el inicio, a la derecha de la línea de tiempo. Se mide en segundos.

Un tutorial breve para crear una animación fold con CSS FilterLab (0:19)

Sintaxis de código

CSS FilterLab permite crear diversos efectos visuales. Es importante saber que esto se hace con CSS plano, aunque CSS de vanguardia.

En Adobe, hemos trabajado duro, junto con nuestros socios, para llevar esta tecnología a la web abierta. No vamos a ocultarla detrás de una herramienta.

CSS FilterLab muestra el código exacto que se está utilizando para conseguir un efecto una animación. Los paneles de sintaxis CSS y sintaxis de animación CSS, justo encima de la línea de tiempo, muestran justo lo que se espera, Puedes copiar este código en tus proyectos para hacer uso de los efectos. Debes tener en cuenta que los filtros CSS están empezando a estar disponibles en los navegadores.

Creando nuevos filtros personalizados

Aquí es donde las cosas pueden convertirse en un reto. Sin embargo, si tu encuentras a las matemáticas complejas y escribes shaders particularmente atractivos, te alegrará saber que CSS FilterLab incluye un editor de shader.

Para crear un nuevo filtro personalizado, empieza por separar un filtro personalizado de los ya existentes en el menú Agregar Filtro. Te darás cuenta que tu filtro separado aparece en la segunda pestaña del menú. Da clic en el icono de “customize” (personalizar) y obtendrás el núcleo de un filtro personalizado.

Desde este punto, tú tienes el completo control sobre los parámetros utilizados, sus tipos, así como el fragmento de código. Tus cambios son automáticamente guardados y almacenados localmente, en el navegador.

Los shaders están escritos en OpenGL Shading Languaje(GLSL). El tema de escribir shaders está fuera del alcance de esta introducción, pero puedes aprender más de la documentación de GLSL. Asegúrate de leer acerca de los tipos, métodos y características del lenguaje para sacar lo mejor de tus shaders.

Figura 3

El panel de error destaca los problemas con tu código de shaders, en tiempo real. Esto es realmente útil porque te mantiene en el mismo contexto, mientras que desarrollas y previsualizas. También puedes ver los resultados de tu código de shaders en tiempo real.

Compartiendo e importando filtros personalizados

Comparte tus filtros personalizados mediante su publicación a partir de CSS FilterLab como un resumen en GitHub. Los controles para hacer esto se encuentran en el panel de control de shader.

Una vez publicado, comparte el enlace con los demás. Ellos van a poder importar el filtro personalizado en CSS FilterLab y utilizarlo en su propio contenido. Para importar un filtro personalizado ve al menú Agregar Filtro, elige Importar y utiliza la URL.

Código Abierto

Todo el código CSS FilterLab está disponible gratuitamente en GitHub bajo la licencia Apache v2. Estamos esperando tus comentarios y contribuciones al proyecto.

Si escribes shaders que te gustaría distribuir con CSS FilterLab, por favor, contribuye con el proyecto. Antes de revisar cualquier código, tomate un momento para familiarizarte con los lineamientos de contribución descritos en GitHub.

A dónde ir desde aquí

Los Filtros de CSS y los filtros personalizados, abren una gran cantidad de efectos creativos para contenido web. CSS FilterLab da solo una pista sobre lo que se está convirtiendo en posible. Pero el verdadero valor está en sus manos y en lo que se crea con esta tecnología.

Piensa un poco en las nuevas oportunidades para la interacción y expresiones de los filtros, manipulación de geometría y efectos cinematográficos pueden aportar a su trabajo. Piensa acerca de lo que esto significa para tu contenido en una gran pantalla, en un dispositivo móvil, y en muchos contextos nuevos.

Usa CSS FilterLab para aprender las capacidades de la web gráfica moderna y comparte tus pensamientos con nosotros. Nos gustaría saber que creas con ellos.

Alan Greenblatt de Adobe, ha creado un pequeño video tutorial de CSS FilterLab. Si estas interesado en aprender más, ese es un buen lugar para empezar.

También puedes encontrar más acerca de las contribuciones de Adobe para hacer mejor la web, para esto visita html.adobe.com.

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

Categorías de Valores en JavaScript

jesus_macedo — Wed, 28 Nov 2012 07:49:35 +0000

En este artículo, explicaré qué tipos de valores tiene JavaScript y como se puede categorizarlos. Eso te ayudará a comprender mejor cómo funciona el lenguaje. Además te ayudará con tareas de programación avanzadas, como crear una librería, donde a veces tienes que tratar con todo tipo de valores siendo recibidos. Con el conocimiento obtenido aquí, serás capaz de evitar errores provocados por diferencias sutiles entre los valores.

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"

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:

Operando	Resultado
undefined	“undefined”
null	“object”
Boolean value	“boolean”
Number value	“number”
String value	“string”
Function	“function”
Todos los demás valores	“object”

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(
  '