Archive for the ‘javascript’ Category

Toolkit for web developers.

noviembre 17, 2010 16 comentarios

When develop a website or web app, it is not easy make a great experience for each browser or device that uses it.  It is important to have in mind some general topics like response time, availability and consistency

As Gomez define in their Best of the Web Report (2009):

Response time measures the end-to-end time elapsed while downloading each Web page or the entire multistep transaction process. This includes the base HTML page and any referenced objects, third-party content, JavaScript and Cascading Style Sheets and other Web content. The reported metric represents the average time required to download the homepage or execute the multistep transaction without factoring in user latency.

Availability measures the percentage of successfully completed tests out of total test attempts for the period. Availability rates are dependent upon a number of variables including the ability of our testing agent to access the Website, its ability to process a transaction without error, and its ability to download each step of the transaction within a reasonable 60-second time frame. Reported availability rates do not include errors related to the Gomez measurement system or scripting problems.

Consistency measures the standard deviation of the response times of successful tests. The goal is to have a low number (in seconds), which indicates how consistent the response time is each time a user visits a Website. Highly variable response times (in seconds) indicate inconsistent performance that may be caused by poor Website performance as measured across diverse geographies, issues with Internet peering or an under-powered technical architecture which leads to slowdowns during periods of peak traffic.

In this post I show some tools that help us to improve our work as developers, it covers tools for debug, analyze, document, minify, monitor and test the apps.

Browser Tools

The browser tools are plug-ins or tools that are directly embedded in the browsers, the list with the original description as it appears on the website of each tool.


Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

  • Inspect and edit HTML
  • Tweak CSS to perfection
  • Visualize CSS metrics
  • Monitor network activity
  • Debug and profile JavaScript
  • Quickly find errors
  • Explore the DOM
  • Execute JavaScript on the fly
  • Console logging for JavaScript

Firebug Lite

Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome, You can extend it and add features to make it even more powerful.


YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages (  YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined rule set or a user-defined rule set. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including™ and JSLint.

Image optimization is an art few have mastered. Useful image editing tools exist that allow images to be edited to reduce their file size while retaining image quality. Using these tools is a good start for optimizing images, but more can be done using advanced tools like uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality. After runs on a web page it reports how many bytes would be saved by optimizing the page’s images and provides a downloadable zip file with the minimized image files. is included with YSlow and is no longer available as a separate download. Download YSlow now to get and start saving bytes on image files.

Page speed

Page Speed is an open-source project started at Google to help developers optimize their web pages by applying web performance best practices. Page Speed started as an open-source Firefox/Firebug add-on and is now deployed in third-party products such as, Show Slow and Google Webmaster Tools.

Page Speed is a family of tools for optimizing the performance of web pages.

  • The Page Speed Firefox/Firebug add-on allows you to evaluate the performance of your web pages and to get suggestions on how to improve them.
  • The mod_pagespeed Apache module automatically rewrites pages and resources to improve their performance.

Web Inspector

The Web Inspector from safari, gives you quick and easy access to the richest set of development tools ever included in a browser. From viewing the structure of a page to debugging JavaScript to optimizing performance, the Web Inspector presents its tools in a clean window designed to make developing web applications more efficient. To activate it, choose Show Web Inspector from the Develop menu.

  • Choosing Safari Menu Option
  • Choosing Preferences…
  • Choosing the Advanced Tab
  • Enabling “Show Develop menu in menu bar“

Speed tracer

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by JavaScript parsing and execution, layout, CSS style recalculation and selector matching, DOM event handling, network resource loading, timer fires, XMLHttpRequest callbacks, painting, and more.

Chromium Benchmarking Extension

The Chromium Benchmarking Extension is a quick-and-dirty way to test page load time performance within Chrome.

  • Can clear the cache between each page load
  • Can clear existing connections between each page load
  • Works with both SPDY and HTTP
  • Measures time-to-first-paint, overall page load time KB read/written, and several other metrics
  • Can compare performance between SPDY (  and HTTP

Internet Explorer Developer Toolbar

The Internet Explorer Developer Toolbar provides several features for exploring and understanding Web pages, is not compatible with Internet Explorer 8. These features enable you to:

  • Explore and modify the document object model (DOM) of a Web page.
  • Locate and select specific elements on a Web page through a variety of techniques.
  • Selectively disable Internet Explorer settings.
  • View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
  • Outline tables, table cells, images, or selected tags.
  • Validate HTML, CSS, WAI, and RSS web feed links.
  • Display image dimensions, file sizes, path information, and alternate (ALT) text.
  • Immediately resize the browser window to a new resolution.
  • Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
  • Display a fully featured design ruler to help accurately align and measure objects on your pages.
  • Find the style rules used to set specific style values on an element.
  • View the formatted and syntax colored source of HTML and CSS.

IE Developer Tools

Every installation of Internet Explorer 8 comes with the Developer Tools. This tool enables Web site developers to quickly debug Microsoft JScript, investigate a behavior specific to Internet Explorer, or iterates rapidly to prototype a new design or tries solutions to a problem on-the-fly.

Getting started with the tools is simple: press F12 or click Developer Tools from the Tools menu.

Opera Dragonfly

Opera Dragonfly allows you to develop more quickly and easily by providing tools to debug your JavaScript and to inspect the DOM, CSS, network traffic and data stores. Developing for mobile has never been easier with Opera Dragonfly’s built-in remote debugging. Opera Dragonfly can be activated from the Developer Tools menu or by right-clicking and selecting Inspect Element. Opera Dragonfly’s source is available to view,  it is released on a Apache 2.0 license.

  • Debug JavaScript
  • Inspect the DOM
  • Redefine your style
  • Monitor the Network
  • Dig through your storage
  • Spot your errors
  • Design Utilities
  • The Opera debug menu
  • Debug your phone or TV

Opera Dragonfly allows you to debug web pages from your desktop, that are being displayed on your mobile phone remotely (with opera mobile), to see how go to this article

Standalone tools

These tools go beyond of the browser tools and give you insights more professionals about what is happening in your web apps.

Dynatrace AJAX Edition

dynaTrace AJAX Edition is the most powerful tool for optimizing your Web 2.0 applications. With so much code executing in the browser, it’s getting more and more difficult to keep your apps light and responsive. AJAX Edition v2.0 is a community-driven release that goes beyond debugging and diagnostics.

  • Analyzes your code and tells you were your hotspots are
  • Recommends proven solutions to common Web 2.0 problems
  • Compares your site’s performance to your competitors’
  • Provides deep insight across AJAX, Javascript, rendering, caching, & more
  • Supports Internet Explorer 6, 7, and 8


Show Slow is an open source tool that helps monitor various website performance metrics over time. It captures the results of YSlow, Page Speed and dynaTrace AJAX Edition rankings and graphs them, to help you understand how various changes to your site affect its performance.

HTTP Watch

HttpWatch is an integrated HTTP sniffer for IE and Firefox that provides new insights into how your website loads and performs, has a comprehensive  automation interface that can be used by most programming languages (e.g. C#, Javascript & Ruby). The interface can be used to control the HttpWatch plug-in for IE or Firefox and to access data in HttpWatch log files.

  • HttpWatch captures a wide range of HTTP related data including:
    • Headers and Cookies
    • URLs and method (e.g. GET, POST, etc)
    • Parameters sent in a query strings and POST requests
    • HTTP status codes and errors
    • Redirections
    • The network size of the HTTP response including headers
    • Chunked encoding
  • Integrates With Internet Explorer and Mozilla Firefox
  • Compact & Comprehensive Log Files
  • Includes a Standalone Log File Viewer
  • Summary of Recorded Traffic
    • Performance
    • Page Events
    • Timings
    • Status Codes
    • Errors
    • Warnings
  • Grouping Of Requests By Page
  • Real-Time Page Level Time Charts
  • Request Level Time Charts
  • Page Level Events
    • DOM Load
    • Page Load
    • Render Start
    • HTTP Load
  • Detects Potential Problems


Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language. Fiddler is freeware and can debug traffic from virtually any application, including Internet Explorer, Mozilla Firefox, Opera, and thousands more.

Monitoring iPhone web traffic (with Fiddler)
You can ‘sniff’ the web traffic coming from an iPhone, to see how go to this link:


Mite is a powerful, desktop-based tool for testing and validating mobile Web content. Mite will reduce your time to market and help you deliver a better end-user experience. With a customizable library of over 1,800 devices and 11,000 device profiles, Mite gives you unequalled access to screen compatibility and application support information.

Keynote Mite lives on your desktop giving you instantaneous feedback. Navigate a site and validate that content appears as you’ve intended while checking that links are functioning properly. Mite also provides a download summary, a performance summary, re-directs, headers, cookies and detailed waterfall graph for further investigation.

Charles Debugger

Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).

Charles makes debugging quick, reliable and advanced; saving you time and frustration

  • Records all traffic between your browser and the Internet
  • Reveals the contents of all requests, responses, cookies and headers
  • Supports SSL and HTTPS
  • Saves valuable time
  • Simulates slower internet connections
  • Download statistics
  • Configurable
  • Quickly find and eliminate bugs

With Charles Debugger You can debug iphone web apps, to know how, see:

JSDoc toolkit

JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.


YUI Doc is a tool written in Python that generates beautiful, organized, searchable API documentation for your JavaScript code. You will typically use YUI Doc as part of your build process. YUI Doc is comment-driven and is compatible with a variety of coding styles. You do not need to be using YUI Library JavaScript in order to use YUI Doc.

MS Visual Round Trip Analyzer

The Visual Round Trip Analyzer tool helps web developers and testers visualize the download of their page, identify best practices and changes that improve web performance. The network Round-Trip between the client and server(s) is the single biggest impact to web page performance – much greater than server response time. VRTA examines the communications protocol, identifying the causes of excessive round-trips, and recommending solutions. Performance engineers, testers, developers, operations personnel should use VRTA to conduct their web performance analysis.

HTTP Scoop

HTTP Scoop passively listens for HTTP requests from any browser (or other application for that matter) running on your Mac.

There’s no special configuration needed, no cumbersome proxies required. You just hit the Scoop button and off you go.

  • Capture HTTP conversations
  • View headers, parameters & more
  • View & save responses
  • Any browser/client or server
  • No proxy or browser plug-in
  • Great for AJAX and Web Services

Web tools

These are tools that you use directly on the code or an URL to test your web sites /apps.


Boomerang is a piece of javascript that you add to your web pages, where it measures the performance of your website from your end user’s point of view. It has the ability to send this data back to your server for further analysis. With boomerang, you find out exactly how fast your users think your site is. All you have to do is stick it into the bottom of your web pages and call the init() method.

Boomerang is opensource and released under the BSD license.

YUI Profiler

The YUI Profiler is a simple, non-visual code profiler for JavaScript. Unlike most code profilers, this one allows you to specify exactly what parts of your application to profile. You can also programmatically retrieve profiling information as the application is running, allowing you to create performance tests YUI Test or other unit testing frameworks.


Test Mobile Applications on Real Devices.

The Perfecto Mobile Handset Cloud system enables you to access and control real mobile devices via the web. Using the system you can quickly and easily operate the phone keys, touch-screen, or QWERTY keyboard to control the device, install applications on the device and verify that your application or service works properly and displays correctly on the phone’s screen.

The Perfecto Mobile system is a hardware and software solution. The mobile handset is mounted on a cradle that holds it in a specific location. A video camera, located in front of the handset’s screen, captures the real user experience as it is displayed on the handset’s screen.

  • Controlling a remote device
  • Typing Text.
  • Installing an application on the handset
  • Keep a record of your actions and collaborate
  • Screen Shots.
  • Video Clips.
  • On-Line.
  • Testing interruptions.
  • Sending SMS.
  • Web-based UI.

The members of the Opera Developer Network get 7 hours of remote access, free of charge.

Web Page Test

WebPagetest is a tool that was orginially developed by AOL for use internally and was open-sourced in 2008. The online version at is an industry collaboration with various companies providing the testing infrastructure for testing your site from across the globe.


JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool.

Minification is the process of eliminating white space, comments, and other nonessential parts of the javascript code to decrease the size of the JS files that need to be transfered from the server to the browser.

YUI Compressor

YUI Compressor is an open source tool that supports the compression of both JavaScript and CSS files. The JavaScript compression removes comments and white-spaces as well as obfuscates local variables using the smallest possible variable name. CSS compression is done using a regular-expression-based CSS minifier.

Google Closure Compiler

The Closure Compiler reduces the size of your JavaScript files and makes them more efficient, helping your application to load faster and reducing your bandwidth needs.

The Closure Compiler provides warnings for illegal JavaScript and warnings for potentially dangerous operations, helping you to produce JavaScript that is less buggy and and easier to maintain.

The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

To help you work with your transformed code, you can also install the Closure Inspector, a tool that makes it easy to use the Firebug JavaScript debugger with the Compiler’s output.

The Closure Compiler has also been integrated with Page Speed, which makes it easier to evaluate the performance gains you can get by using the compiler.


Web performance monitoring and analysis tools can provide a lot of knowledge about how your end-users uses the website or web app from different perspectives, so it is very important to know the tools that we have to measure different parts of the applications.


JavaScript Patterns by Stoyan Stefanov

noviembre 3, 2010 13 comentarios

JavaScript Patterns by Stoyan Stefanov

This book is really awesome, from the beginning to the end, the author shows useful tools to improve the javascript programming.

With more than 30 patterns the author goes from basic concepts, such as avoiding globals, using single var declarations, precaching length in loops, following coding conventions, running JSLint, etc., to advanced ones like variable hoisting, select algorithms at runtime, proxy objects, loading strategies, javascript optimization and a lot of more.

What I liked about the book was the way in which the author explains and illustrates the patterns and how well organized the book is written, this book helped me to understand in a better way some javascript techniques with several solutions to a common scenarios.

I recommend this book if you want to write better code, if you want to understand how the libraries are written or if you want to write your own javascript library. It helps a lot to understand the javascript core and the fundamentals and helps also to be more productive taking care of performance and maintenance of javascript code.

You can buy from O’Reilly

or from amazon

I review for the O'Reilly Blogger Review Program

Categorías:AJAX, javascript Etiquetas:

Rápida Introducción a threeJS

septiembre 28, 2010 Deja un comentario

threeJS es una libreria javascript creada por mrdoob con la que se puede  crear contenido 3D directo en el navegador, sin necesidad de un plugin adicional.


threeJS está en  github, para descargarlo hay que visitar esta dirección

Antes de comenzar.

Para ver los ejemplos de este post, es necesario tener un navegador compatible con canvas, y tomar en cuenta que algunos de estos pueden tardar  tiempo en cargar.

Conceptos básicos de 3d.

Para comenzar vamos a definir algunos conceptos básicos para la programación 3d:

Escena.-Es la composición entera de objetos 3d en un espacio 3d, es como el stage en flash con 3 ejes, cualquier objeto que se necesite ver en la escena debe ser agregado, si no son agregados, no se ven.

Sistema de coordenadas.

Código para crear y agregar elementos a una escena 3d.
escena = new THREE.Scene();
escena.addObject( objeto3D);

Camara.- La camara define el punto de visión del cual se esta viendo la escena, la camara no es un objeto visible por lo tanto no se necesita agregar a la escena.

Código para  crear una cámara
camara = new THREE.Camera( fov, aspect, near, far );

Viewport.- Es como el lente de la camara, muestra la salida de lo que la camara ve, es la ventana de una escena 3d. Funciona como una ventana del mundo real, haciendola grande no afecta como se ve el mundo de fuera, pero si afecta que tanto podemos ver.

Objeto 3D.- Es una forma en un espacio 3d, tiene 3 ejes y lo podemos colocar en cualquier parte del escenario 3d.

Con threeJS vienen algunos objetos como el plano, el cubo, el cilindro, la esphera

Material.- El material es la textura que es impresa en un objeto, si un objeto no tiene un material aplicado entonces será invisible.

Con threeJS podemos aplicar colores, imagenes  ó videos como materiales.

Motor de render.- Es como la película de la camara, cuando se ejecuta el render, mostrará información de la escena grabada por la camara al viewport, cuando se para el render el viewport solo muestra la última imagen captada.

Con threeJS podemos renderizar usando <canvas>, <svg> y WebGL, el código para crear un render y renderizar una escena es:
renderer = new THREE.CanvasRenderer(); // se crea el render de tipo canvas
renderer.setSize( 500, 500); // se especifica su tamaño
document.body.appendChild( renderer.domElement );// se agrega al documento
renderer.render( escena, camara );//Se renderea la escena con la camara asignada.

Composición de objetos 3d.- Los objetos 3d están compuestos de  Vertices y triangulos.

Vertices (Vertex, verts).- Un vertice es un punto 3d en el espacio y tiene 3 puntos cardinales (X,Y,Z) el orden siempre es ese.

Triángulos.- Los triangulos son formados por vertices, los triangulos también son conocidos como caras (faces) o caras de triangulo (triangle faces). Cada triangulo es compuesto de 3 vertices, los vértices definen la forma del triangulo y como tienen coordenadas XYZ es posible hacer la cara del triangulo en cualquier dirección.

Triangulos y Vertices

El objeto geometry es el que tiene el arreglo de todos los vertices de un objeto 3d.

Proceso general para creación de escenarios 3d.

La secuencia de procesos que suceden al mostrar algo en 3d es la siguiente:

Inizialización.- Es el proceso donde se crea la escena, la camara, los objetos 3d con sus materiales y  el tipo de render.

Proyección.- Convierte las coordenadas 3d en 2d para la pantalla. La proyección solo es en los vertices no con los triangulos o los materiales.

Renderizado.- Es el proceso de dibujar una imagen que se verá en la pantalla combinando los datos de la proyección 2d con la información acerca del material que esta siendo utilizado. Es la tarea mas intensiva del procesador.

Primer ejemplo creación de tres planos.

Este ejemplo muestra como crear planos en una escena 3d. Una vez cargado el ejemplo, se puede mover la cámara con los botones,  para ver la escena  de diferentes ángulos.
Para ver la explicación de la programación,  ver el código fuente del ejemplo.

Ejercicio 1, Creación de planos en 3 ejes

Segundo Ejemplo creación de un Objeto 3d (cubo)

Este ejemplo muestra como crear un objeto 3d (cubo), además muestra  como asignar colores a cada una de las caras del cubo, una vez cargado el ejemplo, se puede rotar el cubo con los botones, para verlo de diferentes ángulos.
Para ver la explicación,  ver el código fuente del ejemplo.

Ejercicio 2 creación de un cubo

Tercer ejemplo esfera de esferas.

Este ejemplo muestra como crear una esfera de esferas, utilizando el arreglo de vertices de la esfera para posicionar esferas mas pequeñas en cada uno de los vertices, una vez cargado el ejemplo, se puede mover la camara con los botones, para ver la escena de diferentes ángulos

Para ver la explicación,  ver el código fuente del ejemplo.

Creación de esfera de esferas


Un material es como la textura de un objeto, sin material los objetos son invisibles. La diferencia entre material y textura es que la textura es la fuente (la imagen) que se va a usar por el material, el material es usado para definir propiedades que afectan como es usada la textura en el objeto.

Los archivos de los materiales se encuentran en la carpeta “materials” y constan de LineColorMaterial, MeshBitmapUVMappingMaterial, MeshColorFillMaterial, MeshColorStrokeMaterial, MeshFaceColorFillMaterial, MeshFaceColorStrokeMaterial, ParticleBirmapMaterial, ParticleCircleMaterial, ParticleDomMaterial.

Hay de varios tipos como de malla, de partícula, de imagen, de elementos dom.

Cuarto Ejemplo Aplicación de una imagen como material a una esfera.

Este ejemplo muestra como crear una esfera y aplicar una imagen como material, utilizando MeshBitmapUVMappingMaterial y usando canvas. Una vez cargado el ejemplo, se puede rotar la esfera con los botones.

Para ver la explicación,  ver el código fuente del ejemplo.

Aplicar materiales a una esfera


Una camara representa un punto virtual del cual nosotros vemos una escena y los objetos presentes en esta. En la carpeta cameras se encuentra el archivo camara.js. Una camara se puede rotar y mover en X,Y y Z. Aunque no tiene una representasión visual en la pantalla.

Parámetros para instancear una cámara..

Field of View (FoV), aspect, near, far.

Field of view.- Campo vertical de visión. Se expresa en ángulos.

Aspect.- La proporción entre el ancho y el alto.

Near.- Es la distancia del ojo al  plano cercano, qué es un plano imaginario perpendicular a la camara, cuando los objetos se acercan mas que el plano cercano, desaparecen.

Far.- Es la distancia del ojo al plano lejano, cuando un objeto pasa más lejos que el plano lejano, el objeto desaparece.


La animación es la ilusión de movimiento, threeJS permite al usuario interactuar libremente con objetos en la escena. Básicamente existen 3 tipos de objetos que podemos mover, Objetos 3d que tienen representación visual en la escena, Camaras  y Luces.

Para animar objetos tenemos estas tres propiedades del objeto Object3D

  • Posición ( position.x, position.y, position.z )
  • Rotación ( rotation.x, rotation.y, rotation.z )
  • Tamaño (scale.x, scale.y, scale.z )

La velocidad de animación con javascript depende  del tiempo, se anima usando un temporizador como el setInterval(), la animación corre a una velocidad constante y es relativamente independiente a la capacidad de cómputo del usuario.

Quinto ejemplo animación de camara.

Este ejemplo muestra como crear un temporizador  y aplicar una animación en los ejes Y y Z de la camara, una vez cargado el ejemplo, se puede tocar la animación presionando el botón. Para ver la explicación del ejemplo,  ver el código fuente del ejemplo.Animación de camara

Estos son solo los primeros pasos para trabajar con esta librería, en la dirección de github o en el sitio de mrdoob se pueden ver ejemplos mas avanzados de lo que se puede lograr con esta librería.

Todos los ejercicios se pueden descargar de

Que es HTML5 Canvas, tutorial de animación básica.

septiembre 22, 2010 9 comentarios

Hasta hace poco, dibujar con javascript en el navegador no era nada fácil y la interactividad era muy limitada, para hacer estas funciones usábamos extensiones como flash o silverlight, que si bien son herramientas fantásticas para solventar las muchas limitantes de los navegadores, están atrapadas en una caja y no se integran muy bien con el resto de las tecnologías web (HTML, DOM, CSS).  Pero ahora con canvas de html5, al menos en la parte de dibujo, la extensión ya no es necesaria.

“Flash es una extensión de la Web, si la Web tiene las características que la extensión ofrece, la extensión ya no es necesaria”,  mrdoob.

El elemento <canvas> de HTML5 es la solución de la web para dibujar o trabajar con imágenes pixel por pixel y se integra perfectamente en el documento, se le puede dar estilo por medio de CSS y se puede programar por medio de javascript. No es una extensión es parte de la web.

Se puede pensar en el <canvas> como una etiqueta <image> programable, en lugar de dar la ruta de donde se encuentra el archivo fuente de la imagen, se puede dibujar la imagen directamente por medio del API de javascript. Es un elemento de mapa de bits que se puede usar para renderizar gráficos, juegos u otras imágenes visuales sobre la marcha.

El elemento canvas tiene dos atributos que controlan el tamaño, al igual que algunos elementos html, estos atributos son el ancho (width) y el alto (height). Cuando son especificados, deben tener valores enteros positivos. Si un atributo falta, se usan los valores por defecto, para el ancho es de 300 y para el alto es de 150, los valores son especificados en pixeles, sin embargo se puede dimensionar arbitrariamente usando una hoja de estilo CSS.

El proceso general para trabajar con canvas, es poner la etiqueta <canvas> dentro del <body> del documento, especificar un id, el ancho y el alto como atributos de la etiqueta, después, por medio de javascript se crea un manejador para el canvas y se obtiene lo que se llama un contexto (context). El contexto es el objeto que tiene el API para dibujar sobre el canvas.

El primer argumento al obtener el contexto especifica el tipo de API con el que se desea programar, los demás argumentos son manejados por esa API.

Hasta el momento la especificación de canvas soporta 2 contextos “2d” y “webgl”  (que es soportada por webkit y firefox), lo que abre la posibilidad de dibujo 3d en el futuro, para mas información sobre webgl:,

La lista de contextos soportados están en la página de contextos de canvas en

El contexto 2d representa una superficie de dibujo que es un plano cartesiano. El origen (0,0) esta en la esquina superior izquierda, los valores en X se incrementan a la derecha, y los valores en Y se incrementan hacia abajo en el espacio de coordenadas.

Creamos la superficie de dibujo con el método getContext(“2d”).

Sistema de coordenadas

Lo que haremos en este tutorial es al dar clic sobre un elemento, mover tres círculos de la orilla izquierda al centro uno por uno, con un efecto de desaceleración cada una.

El ejemplo esta en:


Código HTML

La parte del código html anterior:

<canvas id=”Stage” width=”800″ height=”460″>


crea un elemento tipo canvas y se especifican los atributos id, ancho y alto, así como se le asigna una clase para darle estilo. Se debe de tener cuidado de siempre establecer el ancho y el alto para evitar errores.


Código CSS

stage, es la clase que se aplica al elemento canvas, especificando el ancho, alto, color de fondo y color de borde.


Javascript parte 1

De inicio creamos una variable que hace referencia al elemento canvas :
var stage = document.getElementById(“Stage”);

Despues verificamos si existe soporte para canvas en el navegador

if (stage.getContext)

Si existe el soporte entonces empezamos creando una función para crear los círculos, los parámetros de la función son: la posición x, la posición y, el radio y el color.

En la imágen se resalta el método dibuja que es el que sirve para dibujar el círculo en el canvas por medio de instrucciones del contexto 2d. El contexto 2d funciona por medio de “trazados” (paths). Un trazado es una lista de cero o mas subtrazados. Un subtrazado consiste de una lista de uno o mas puntos conectados directamente por medio de líneas o curvas, y una bandera que indica si el subtrazado es cerrado o no. Un subtrazado cerrado es uno en donde el último punto del subtrazado está conectado al primer punto del subtrazado por una línea (o curva) directa. Los subtrazados con menos de 2 puntos son ignorados cuando se pinta el trazado.

Para dibujar el circulo se usan los siguientes métodos del contexto 2d:

beginPath.- Método que Restablece el trazado actual, este método vacía la lista de subtrazados, por lo tanto el contexto se restablece a cero subtrazados.
fillStyle.- Atributo que representa el color o el estilo que se usa para el rellenado de las formas, se usa para cambiar el estilo de relleno. contexto.fillStyle [ = valor ] el valor puede ser un color CSS, un gradiente (CanvasGradient) o un patrón (CanvasPattern), los valores inválidos son ignorados.
strokeStyle.- Representa el color o el estilo que se usa para las lineas alrededor de las formas. contexto.strokeStyle [ = valor ]
arc(x, y, radio, ángulo inicial, ángulo final, contrario de las manecillas del reloj).- Este método dibuja un arco. Los puntos de inicio y de final del arco se definen cconsiderando que un circulo tiene su origen (x,y) y que tiene un radio (radio). Ángulo inicial y  ángulo final se encuentran a lo largo de la circunferencia del círculo, medidos en radianes, en dirección a las manecillas del reloj, son los puntos de inicio y fin respectivamente. Sí el parámetro “contrario de las manecillas del reloj” es falso y el ángulo final menos el ángulo inicial es igual o mayor a 2π, o, si el argumento “contrario de las manecillas del reloj” es verdadero y el ángulo inicial menos el ángulo final es igual o mayor a 2π, entonces el arco es toda la circunferencia de el circulo. De otra manera, el arco es una trayectoria a lo largo de la circunferencia del circulo, desde el punto de inicio hasta el punto final. Valores negativos para el radio causan una excepción INDEX_SIZE_ERR.
closePath.- Este método marca al último subtrazado del trazado como cerrado,crea un nuevo subtrazado especificando como primer punto,  el primer punto del subtrazado anterior, y finalmente agrega a este nuevo subtrazado al trazado, si el contexto no tiene subtrazados no hace nada.
fill.- Método que se usa para llenar todos los subtrazados del trazado actual, usando fillStyle, los subtrazados abiertos, son implícitamente cerrados cuando se llenan (sin afectar a los actuales subtrazados).


Javascript Parte 2

Cada vez que dibujamos sobre el canvas debemos “limpiarlo” o borrar todo lo que este dibujado, una manera de borrar es dibujando un rectangulo con las mismas dimensiones que el canvas y especificar el color de relleno el mismo que el color de fondo del canvas, la función limpiarStage es lo que hace.

La función dibuja sirve para que cuando esté corriendo la animación, se mande llamar y vaya dibujando cada circulo esto quedara claro mas adelante.

Javascript Parte 3

En el código anterior definimos las variables para la animación y en la siguiente imagen la función para ejecutar la animación.

Javascript Parte 4

La función animaC sirve para mover los círculos de la orilla izquierda hacia el centro por el eje de las X, cuando el primer circulo llega al centro, entonces empieza el segundo y cuando llega el segundo al centro entonces empieza el tercero.

Para la desaceleración o easing se usa una formula que lo que hace es pasar de un valor a otro, disminuyendo la velocidad al acercarse al valor final.

p += ( pf – pa ) / v
p = posición
pf = posición final
pa = posoción actual
v = velocidad

Si el simbolo actual llega a 400 (ó se pasa) entonces se termina el temporizador que hace la animación, se incrementa en 1 la variable que guarda el indice del arreglo de animaciónes y se comprueba si hay un simbolo en el arreglo con el indice nuevo, si lo hay entonces se actualiza el simbolo actual y se vuelve a generar otro temporizador.

Por último:

Javascript Parte 5

Para finalizar,  la función comenzar, es la  que empieza la animación y es ejecutada del elemento <a> que esta en el html.

Canvas es muy bueno para aplicaciones donde se tenga mucha animación, o para juegos basados especialmente si no se necesita mantener el rastro de todos los objetos que se encuentran en el. Al no mantener el rastro de donde se encuentran todos los objetos, no se sobre carga la memoria.

Interface 2d  :

Descripción de la Plataforma Blackberry para el desarrollo de aplicaciones Web

septiembre 8, 2010 4 comentarios

El navegador de BlackBerry.

BlackBerry es una plataforma basada en estándares, por lo que la mayoría de las tecnologías Web estándares son soportadas en el navegador de BlackBerry, existen limitantes por lo que hay que tomar en cuenta algunas consideraciones especiales cuando se construye un sitio orientado a BB, pero en general, el navegador BB trabaja casi como la mayoría de los navegadores.

Tipos de conexiones o Medios de transporte.

Un dispositivo BlackBerry cuenta con varias rutas de conexión (medios de transporte) para hacer una petición a un servidor web  y obtener datos. Una ruta, es el camino que utiliza una petición que realiza un dispositivo hacia un servidor y de regreso.
El navegador Web de un dispositivo BlackBerry puede acceder a un servidor por medio de una de estas conexiones:

  • Wireless Application Protocol (WAP).- Antes de los Smartphones, los dispositivos móviles contaban con limitaciones como poco poder de procesamiento, capacidades de navegación limitadas y poco ancho de banda, el protocolo de aplicaciones inalámbricas (WAP) es usado por las compañías de teléfonos para proveer servicio de Internet compatible con estas limitaciones. Este protocolo provee un subconjunto de capacidades típicas en los navegadores de escritorio, y necesita de puertas de enlace especiales que tienen los proveedores de servicios inalámbricos. WAP utiliza un reducido lenguaje de marcado llamado WML y un lenguaje script llamado WMLScript.
  • Direct TCP.- La conexión directa TCP toma una ruta desde el dispositivo BlackBerry al servidor por medio de una salida a Internet, que da el proveedor del servicio, la conexión usa un APN (Nombre de punto de acceso) para GPRS configurado en el teléfono móvil por la compañía que presta el servicio de conexión inalámbrica.
  • BlackBerry Internet Service (BIS).- Es un servicio especial para los usuarios de BlackBerry, que se usa para acceder a un sitio Web, el dispositivo va a la red del proveedor del servicio, después a la infraestructura de red de BlackBerry y por ultimo al servidor donde esta hospedado el sitio.
    Cuando se utiliza esta conexión se debe tener cuidado en cuanto a la cantidad de datos que se envían a través de BIS, porque como la conexión es por medio de la infraestructura de BlackBerry, es posible que RIM tenga restricciones en cuando a cuantos datos se puedan enviar.
  • Blackberry Mobile Data System (MDS). – Es un componente del servidor empresarial de BlackBerry (BES, BlackBerry Enterprise Server) y es una conexión extra que permite acceder de manera segura recursos internos de la red corporativa donde este el BES. La ruta que toma el dispositivo va por medio de la red del proveedor del servicio, después a la infraestructura de BlackBerry, después al BES y después al servidor destino.
  • Wi-Fi.- Cuando un punto de acceso Wi-Fi esta al alcance, un dispositivo puede hacer uso de la red Wi-Fi para la transmisión de datos en lugar de la red del proveedor del servicio, esta conexión es la más rápida para el usuario.

Para conocer más acerca de esto:

Medios de transporte en plataforma BB (video):


Configuración de las conexiones del navegador Blackberry.

Tipos de navegadores BlackBerry.

En la pantalla inicial de algunos dispositivos, hay varios iconos de navegador, la diferencia que existe entre los navegadores que ejecutan esos iconos, es la ruta que toma la petición para llegar al servidor, esto, es regularmente confuso para los usuarios porque no saben cual es el que se debe de utilizar. Los iconos disponibles dependiendo del dispositivo y conexión son: Navegador de Internet, navegador Wap y Navegador BlackBerry, qué en realidad, son el mismo navegador, la diferencia entre los iconos es el medio de transporte que utilizan para acceder a un sitio Web.

  • Navegador de Internet: Usa un proveedor de servicios inalámbrico para acceder a los sitios Web usando http. dentro de las opciones de este navegador se puede utilizar uno adicional que es el Navegador Hot spot, que usa la conexión Wi-Fi del dispositivo para conectarse a una red local y tener conexión a Internet, este navegador agrega una interfaz adicional para administrar la autentificación segura a la conexión Wi-Fi.
  • Navegador WAP: Usa un proveedor de servicios WAP inalámbrico para acceder a los sitios usando WAP, este proveedor convierte páginas HTML en WML.
  • Navegador BlackBerry: Usa el servicio de conexión MDS (MDS-CS, Mobile data system connection service) para acceder a los servidores dentro de un cortafuegos corporativo. Esta opción es solo disponible cuando el dispositivo tiene activo el BES.

A partir de la versión 4.2, RIM reduce el numero de iconos en el dispositivo, el navegador BlackBerry y el navegador de Internet, se consolidan en un solo icono llamado Navegador.
En muchos dispositivos, el navegador WAP, es un icono separado, debido a los servicios que presta la compañía móvil, el icono y el nombre asociado con el navegador es definido por el proveedor del servició y el tema actual en el dispositivo, por ejemplo, el icono del navegador wap en la red de telcel se llama “ideas telcel”.

Iconos de navegador
Navegador wap llamado Ideas Telcel en los dispositivos de la red Telcel.

A partir de la versión 4.2, un usuario puede determinar la conexión para hacer las peticiones Web especificando un navegador por defecto para todas las peticiones. Si posteriormente quiere acceder un sitio usando otro medio de transporte (por ejemplo, cambiando de el Navegador de Internet al navegador Wap), debe cambiar el tipo de navegador antes de solicitar la página nueva. Para especificar un navegador por defecto, se debe abrir el navegador, presionar el botón de menú y seleccionar opciones, después seleccionar propiedades generales y ahí especificar el tipo por defecto, en caso de que el usuario no quiera tener un navegador por defecto, y solo desea usar un tipo de navegador para un sitio, entonces puede especificarlo en la opción configuración del navegador, visitar el sitio y guardarlo en favoritos, de esta manera, se guarda la dirección y el tipo de navegador para ese sitio solamente.

Para las aplicaciones Web empresariales que necesiten de un navegador en específico, una opción para asegurarse que utilice la conexión apropiada es construir un incono Web para la aplicación. Un icono Web es una aplicación Java sencilla que lanza un navegador específico para acceder a una URL específica. Muchas compañías usan este método para poner un icono de acceso rápido a su portal en la pantalla de inicio de los dispositivos.

Capacidades del Navegador BlackBerry.

En cuanto a capacidades del navegador, BlackBerry adopta muchos de los estándares del mercado, pero implementa en algunos casos solamente un subconjunto de características porque algunas no aplican al dispositivo móvil ó debido a las limitaciones en cuanto al poder del procesador y capacidad de memoria ó debido a el impacto potencial al rendimiento y/o a la vida de la batería (RIM pone especial atención al rendimiento y vida de la batería de los dispositivos).
En muchos casos RIM implementa solo una parte del estándar para un dispositivo específico y en las subsecuentes versiones van agregando más características hasta implementar completamente el estándar.

Lenguajes de marcado.

El navegador soporta los siguientes lenguajes de marcado.

  • HTML versión 4.01
  • Compact HTML (cHTML).
  • XHTML Mobile Profile (XHTML-MP) (subconjunto de XHTML 1.1).
  • WML.

Las versiones y opciones dependen de versión del software del dispositivo BlackBerry.

Si el objetivo de la aplicación Web es que corra en teléfonos móviles y en smartphones, entonces se debe usar HTML para construirla, con esto, el desarrollador solo codifica una sola vez y corre en plataformas de escritorio y móviles usando solo un lenguaje de marcado.

Framesets HTML

En las versiones de software anteriores a la 4.2, solo se puede ver un frame ala vez, cuando un usuario visita el sitio el navegador despliega un mensaje que la página contiene frames, y pregunta cual se desea ver.
En la versión 4.2 se pueden ver todos al mismo tiempo, pero no de la manera en la cual el diseño fue planeado, los frames se despliegan uno después de otro en el orden de izquierda a derecha y de arriba hacia abajo.
En la versión 4.6 funciona correctamente como un navegador de escritorio, interpreta los frames en la disposición que fue creada por el desarrollador.

Tablas HTML

Las tablas son soportadas en el navegador desde la versión 3.8, algo que se debe de tomar en cuenta al desarrollar aplicaciones con tablas para dispositivos con versiones de software anteriores de la 4.6, es que en estas versiones se permite al usuario (de echo en algunas viene por defecto) deshabilitar las tablas en las opciones del navegador.

Hojas de estilo en cascada (CSS)

Los dispositivos BlackBerry soportan el estándar de la W3C y el estándar del protocolo WAP respecto a las CSS, al igual que sucede con las tablas, en algunas versiones anteriores a la 4.6 puede ser deshabilitado el soporte de las CSS.


Para versiones antiguas a la versión 4.6 se soporta Javascript 1.3 y parcialmente Javascript 1.4 y 1.5 dependiendo el modelo. Con la versión 4.6 se soporta completamente Javascript 1.5.
Antes de la versión 4.6 el acceso al DOM por Javascript es solo de lectura, se pueden leer los objetos del DOM pero no puede hacer ningún cambio aparte que no es soportado el objeto XMLHttpRequest.
A partir de la Versión 4.6, RIM implemento el acceso de lectura y escritura al DOM, lo que significa que se puede usar JavaScript para manipular el contenido de la página en tiempo real, como sucede con las tablas y las CSS, aunque el navegador soporte javascript, el usuario puede deshabilitar el soporte de javascript por medio de las opciones del navegador.

Una buena práctica es solo usar javascript cuando realmente agregue un valor a la aplicación, hay que tomar en cuenta que es mejor mandar tan pocos datos a través de la red como sea posible, claro que en redes de alta velocidad de tercera generación (3G) y con procesadores mas rápidos en los dispositivos más nuevos, no se pone mucha atención a los efectos de descarga e interpretación de una página, pero, un sitio ligero siempre cargara mas rápido que uno pesado sin importar la velocidad de la red.

Java Applets, Controles Active X y Adobe Flash.

Estas tres tecnologías no son soportadas por los navegadores BlackBerry, pero en el caso particular de Adobe Flash, RIM ofrece una alternativa que es el “Plazmic Content Development Kit” que permite a los desarrolladores crear experiencias mas ricas en el navegador por medio de “Plazmic composer” que convierte SVG a archivos PME y PMB que son SVG en representación binaria, lo mas interesante es que incluye una herramienta de Flash-Plazmic que convierte contenido Flash compatible a Dispositivos BlackBerry.

Para más información acerca de Plazmic composer visitar

Audio y video.

El navegador de BlackBerry puede reproducir audio y video, los formatos que son soportados depende de la versión del software del dispositivo BlackBerry y el proveedor de Internet o BES que se este utilizando. El proveedor de Internet o BES procesa los archivos y los convierte u optimiza para tocarlos en el dispositivo. En general los dispositivos pueden tocar los formatos más populares, pero es mejor revisar antes de elegir un formato en particular para la aplicación.

Para una lista completa del soporte de audio y video visitar este link:

KB05482 :

Para conocer mas acerca de las tecnologías que se puede utilizar con el navegador de BB visitar

Se selecciona la versión del software del dispositivo y después clic en la guía que se desea consultar.

Identificación del Navegador.

Se puede configurar la Identificación de navegador (o Emulación de navegador en dispositivos antiguos) por medio de las opciones de configuración del navegador.
No se debe pensar que al cambiar la identificación del navegador se va a emular a dicho navegador, esto es incorrecto, lo que realmente se hace es cambiar la manera que el navegador se identifica a sí mismo en un servidor Web, los valores posibles para esta opción son: BlackBerry, Firefox e Internet Explorer.

Cuando cualquier navegador hace una petición a un servidor Web, se envían (junto con la petición) una serie de valores por medio de las cabeceras de petición, el servidor las puede usar para determinar cosas acerca del cliente que realiza la petición, existe una cabecera llamada USER-AGENT que identifica el agente de la aplicación (el navegador) que hace la petición.

Por defecto el navegador BlackBerry envía este valor:

BlackBerry[Numero de Modelo]/[Versión del Software del dispositivo BlackBerry]/Profile/[Perfil MIDP] Configuration/[Versión CLDC ] VendorID/[Identificador del provedor]

Numero de modelo: El numero del modelo (sólo numerico, no nombres de producto como “Bold” o “Storm”) del dispositivo.
Version del SW BlackBerry del dispositivo: La versión del software que tiene el dispositivo.
Perfil MIDP:
La versipin de MIDP (Información del perfil del dispositivo movil), la especificación MIDP fué publicada por SUN para el uso de java en dispositivos moviles y pda’s, la versión de MIDP indica que característicvas soporta el dispositivo.
Identificador del provedor: Este valor sirve para indicar la diferencia entre un dispositivo manufacturado por RIM (cuyo valor generalmente es 1) y otro fabricande bajo el programa Built In de Blackberry.

Por ejemplo el dispositivo Blackberry Bold se identifica de esta manera en una red de:

BlackBerry9700/ Profile/MIDP-2.1 Configuration/CLDC-1.1 VendorID/121

Al cambiar el agente de usuario se identifica así:
Mozilla/5.0 (Windows; U; Windows NT 5.1; rv: Gecko/2009032609 Firefox/3.0.8
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

Estas cadenas se dividen en tres partes:
1. La bandera de compatibilidad que es usada por los browsers modernos para indicar que es compatible con un conjunto de características comunes.
2. La version del agente de usuario  (MSIE 7.0 que identifica Microsoft Internet Explorer).
3. La plataforma que identifica el sistema operativo y la versión en este caso Windows NT 5.1 indica windows XP

Algo que podría parecer raro es que Internet explorer se identifique como Mozilla, esto es por razones históricas, Netscape usaba Mozilla como su identificador y en los años 90 otros navegadores empezaron a “mentir” sobre su identificador y agregaron en su agente de usuario Mozilla para poder pasar sobre sitios en donde solo podian verse en Netscape (con Mozilla)

Muchos sitios Web usan el valor de la cabecera USER-AGENT para determinar qué contenido debe ser entregado al navegador, un sitio optimizado para un navegador móvil no se verá bien si se apaga el mecanismo para que el servidor Web pueda determinar si el agente es un dispositivo móvil, ya que cuando se detecta que es un dispositivo móvil se sabe de antemano que el dispositivo es limitado por el tamaño de pantalla, reducido en capacidades y ancho de banda. Cuando es correctamente detectado, se reducen las imágenes, se organiza el contenido de manera vertical en lugar de horizontal y se simplifica el sitio lo más posible, cuando se cambia la identificación del navegador se hace corto circuito ya que el servidor sirve el contenido para un navegador de escritorio y no se va a ver bien.

Existe una manera de saber si el agente de usuario es BlackBerry en caso de que la identificación del navegador se haya cambiado por el usuario, hay otra cabecera HTTP que se llama PROFILE el cual tiene un valor que es una URL que apunta al archivo del marco de descripción de recurso (RDF Resource Description Framework) que esta hospedado en el sitio de En general, es suficiente analizar la URL para determinar el modelo y la versión del dispositivo. Si se requiere de información más detallada, la aplicación puede consultar el archivo RDF para conocer la información de configuración del dispositivo, el archivo RDF es un documento XML que describe las capacidades de software y hardware de un dispositivo móvil. RIM proporciona una liga a este archivo en las cabeceras HTTP para hacer más fácil a una aplicación Web determinar un conjunto completo de capacidades del dispositivo que hace la petición a la página. de BlackBerry]/[Version de Software]

Por ejemplo el dispositivo Blackberry Bold manda el siguiente valor para Profile:

La alianza abierta de móviles (OMA Open Mobile Alliance) ha definido estándares para el perfil de usuario de agente (UAPROF).

Si una aplicación busca el valor de la cabecera USER-AGENT y dice que es un agente corriendo Firefox o Internet Explorer, puede buscar en la cabecera PROFILE para determinar si es realmente un BlackBerry haciéndose pasar por otro navegador.

Optimización y mejores prácticas.

Para cualquier aplicación Web orientada a móviles, un desarrollador debe optimizar todo lo que se pueda dependiendo del dispositivo y el tipo de usuario que va a utilizar la aplicación, las aplicaciones diseñadas para dispositivos BlackBerry deben tener un balance entre la mejor experiencia de usuario posible y una larga duración de la batería, cuando se diseña para un dispositivo BlackBerry, se debe considerar las diferencias entre dispositivos móviles y las computadoras, los dispositivos móviles tienen las siguientes características:

  • Una pantalla más pequeña que puede desplegar un limitado numero de caracteres.
  • Menor velocidad del procesador.
  • Conexiones de red wireless con un periodo mayor de latencia (el intervalo de tiempo entre cuando una estación de red busca acceso para un canal de transmisión y cuando el acceso es autorizado o recibido, equivalente a tiempo de espera) que las LAN tradicionales.
  • Menos memoria disponible.
  • Menor periodo de vida de la batería.

La interfaz de usuario para un BlackBerry debe de ser diseñada para que los usuarios puedan desarrollar tareas fácilmente y acceder a la información de manera más rápida, antes de diseñar una aplicación, se puede analizar otras aplicaciones para aprender más acerca del modelo de navegación y las mejores prácticas para el diseño de interfaces de usuario.

Es importante poner atención en el diseño del contenido para que el usuario pueda obtener la información que está buscando de manera rápida, se debe tener el contenido breve y directo al grano, para el usuario móvil menos es más. Es preferible diseñar el contenido de manera que el usuario no tenga que usar el scroll y de alguna manera mantener la navegación, búsqueda y otros componentes auxiliares siempre a la vista.

Para dispositivos móviles la recomendación es construir las páginas en un diseño vertical en lugar de horizontal, el usuario tiene que desplazar hacia abajo para ver el contenido en la pantalla limitada que tienen estos dispositivos, una buena práctica, es no tener mas de 2 columnas para la pagina, adicionalmente una página demasiado larga puede ser incomodo para los usuarios, las páginas largas deben de separarse en múltiples páginas , se puede usar un campo de selección (<select>) para permitir al usuario escoger una porción de la página que desee ver.

En cuanto a las imágenes, es preferible usarlas lo menos que sea posible en las páginas, se deben usar solamente cuando se necesite mostrar información ó destacar información que pueda ser solo mostrada por medio de una imagen, ya que toman tiempo extra por el servidor para optimizar y transferir aparte que ocupan espacio adicional que es fundamental para pantallas pequeñas.

Las conexiones MDS y BIS automáticamente optimizan imágenes antes de mandarlas al navegador, las imágenes son convertidas a un limitado conjunto de formatos de imagen, y cambian el tamaño para ajustarlas a la resolución de la pantalla de los navegadores y optimizadas para transmitirlas lo mas rápido posible. Aún con estas optimizaciones toma tiempo el interpretado de las páginas.
Se debe evitar imágenes que contengan texto ya que cuando se usa una conexión MDS el servidor toma como parámetro el atributo width de la etiqueta img ignorando el alto de la imagen y escala la imagen a un ancho especifico manteniendo la misma relación de aspecto, por lo que el texto se arruga y puede convertirse en ilegible.

Respecto a las tablas, las tablas en los navegadores BB pueden ser problemáticas, en dispositivos anteriores a la versión 4.5 son deshabilitadas por defecto en el navegador, otro problema es que no se interpretan correctamente, cuando se usa una tabla amplia en una pantalla pequeña, el navegador ajusta el contenido cuando llega al lado derecho de la pantalla, por lo que en una configuración por columna, cada celda de renglón en lugar de acomodarse horizontal se acomoda vertical por lo que se pierde el contexto y no se puede apreciar cuales celdas son de cada columna, para solucionar esto se puede usar una técnica que utiliza la regla horizontal (<HR/>) como separador para minimizar el uso de tablas. Para versiones anteriores a la 4.6 no hay problema con las tablas estas se interpretan correctamente en el navegador.

En cuanto a las hojas de estilo, para versiones anteriores a la 4.5 incluyéndola, las CSS están deshabilitadas por defecto en las posteriores no hay problema. Aunque hay que tener cuidado en su uso por agrega trafico de red y consume vida de batería, y toma tiempo adicional para cargarse e interpretarse en el navegador, hay que tener cuidado que la hoja de estilos se usen completamente y no tener hojas de estilo asociadas a navegadores de escritorio.

En cuanto a javascript, el soporte viene desde la versión 3.8, pero de nuevo hay que tener cuidado, porque puede estar deshabilitado. Para conocer si javascript esta habilitado en el dispositivo se puede buscar en la cabecera HTTP_ACCEPT la cadena “application/x-javascript” en su contenido, si la cadena existe, entonces javascript está disponible en el navegador.
A partir de la versión 4.2.1, en las opciones de configuración del navegador existe una que permite al navegador preguntar cuando desee habilitar javascript. Y funciona cuando la aplicación va a ejecutar alguna función, por ejemplo:

<script type="text/javascript">
document.write ("JavaScript está disponible");
JavaScript está deshabilitado
<a href="javascript:void()">habilitarlo</a>

Cuando el usuario no tiene habilitado javascript al hacer clic en la liga aparecerá una caja de dialogo preguntando al usuario si quiere habilitar el uso de javascript, si el usuario acepta entonces la pagina se recarga con la opción habilitada (solo esa sesión). AJAX es soportado a partir de la versión 4.6

Para conocer mas acerca de las tecnologías que se puede utilizar con el navegador de BB visitar

Se selecciona la versión del software del dispositivo y después clic en la guía que se desea consultar.

Detección del navegador de BB

La detección del navegador debe hacerse del lado del servidor nunca en el dispositivo una razón es que cuando se hace la detección del lado del cliente se realiza por medio de javascript, si el usuario tiene deshabilitado el js entonces no podrá detectarse, otra razón es que cuando se hace del lado del dispositivo, mucho contenido extra es enviado al navegador pero nunca usado, por lo que ese código nunca debió de haber sido transmitido al dispositivo.

Probar y Depurar Aplicaciones Web.

Después de codificar una aplicación Web, se debe de probar en cada uno de los navegadores que van a acceder a la aplicación. Una de las formas mas fáciles de probar y depurar una aplicación móvil es viéndola directamente de los dispositivos, usando este método los desarrolladores pueden validar fácilmente el diseño y formato de la aplicación directamente de los dispositivos, también es fácil de determinar si el rendimiento de la aplicación es adecuado para los usuarios, se conoce si las páginas cargan rápido y cuales páginas tardan toman un tiempo para bajarse e interpretarse además de que se puede entender cual es la experiencia de usuario. El problema de este enfoque es que se debe tener acceso a cada dispositivo que se tiene pensado van a utilizar los usuarios del sitio y cada dispositivo debe tener un plan de datos así el navegador va a poder acceder al sitio.

Otra forma de probar la aplicación es por medio de compañías que proveen acceso a dispositivos reales para pruebas en caso de que no se tenga acceso a algún dispositivo en específico en donde se necesite probar la aplicación algunos ejemplos de estas compañías son:

En estos sitios se pueden seleccionar cientos de dispositivos móviles que tienen disponibles en línea, con estos sitios no se tiene que tener el dispositivo físico para probar porque se accede a el por medio de una interfaz Web.

Simuladores BlackBerry

Otra manera de probar aplicaciones es por medio de simuladores BlackBerry, que son una representación casi exacta de los dispositivos. Los simuladores BlackBerry son gratis para descargar desde el sitio de desarrolladores de RIM y se pueden conseguir de todos los modelos, además que de pueden instalar diferentes versiones del software de los dispositivos con los que se pueden probar un solo dispositivo con diferentes versiones de SW. Los simuladores se descargan de la sección de herramientas del sitio de BB:

Una ventaja de los simuladores de BB es que no necesitan un plan de datos ya que usan la conexión de la computadora en donde están instalados para acceder a las aplicaciones, pero esto también es una limitación, porque el simulador no puede realizar conexiones directas a los recursos de la red; BlackBerry también ofrece un simulador MDS independiente para instalar junto con el simulador del dispositivo (The BB Mobile Data System). Cuando se utilizan los simuladores en conjunto con el simulador MDS se debe tomar en cuenta que:

  • El simulador MDS debe de correr en la misma computadora donde se corre el simulador del dispositivo.
  • El simulador MDS debe arrancar antes que el simulador del dispositivo.
  • Solo un simulador de dispositivo se puede correr en una PC a la vez, los simuladores usan el mismo puerto para comunicarse con el simulador MDS por lo que se recibe un error cuando un segundo simulador se corre.
  • El servidor Web de la aplicación debe de ser accesible por la red por el sistema que corre el simulador MDS.

Después de considerar estos pasos solo se debe de:

  • Correr el simulador MDS
  • Correr el simulador del dispositivo en el que se quiere probar
  • Abrir el navegador en el simulador del dispositivo
  • Escribir la URL donde se encuentra la aplicación
  • Probar, hacer los cambios que correspondan y volver a probar

RIM también ofrece herramientas para poder probar aplicaciones por medio de ambientes de desarrollo, Hay un plugin para Microsoft Visual Studio y un plugin para Eclipse. Estas herramientas, permiten construir aplicaciones Web, probarlas y depurarlas, rápidamente con un simulador integrado del dispositivo BlackBerry. Con estas herramientas es posible:

  • Correr el simulador del dispositivo y el simulador MDS directamente del ambiente de desarrollo.
  • Poner, quitar y deshabilitar puntos de interrupción en el código javascript que se ejecute en el navegador de BlackBerry.
  • Agregar visores de variables para conocer su valor mientras corre la aplicación.
  • Ver las peticiones y respuestas del objeto XMLHttpRequest y ver la información de las cabeceras.

Se pueden descargar los plugin de las siguientes ligas.

BlackBerry 6.

El navegador de la nueva plataforma soporta webkit y html5 por lo que es más fácil desarrollar mejores experiencias de usuario, el nuevo navegador soporta geolocalización, almacenamiento y workers además de css3 y otras características.
Para conocer más información sobre esto visitar:

Tips de accesos directos en el navegador muy útiles a la hora de probar aplicaciones web.

  • Para cambiar el tipo de vista (por columna o por página) presionar la tecla Z.
  • Para hacer acercamiento, presionar la tecla I.
  • Para alejar, presionar la tecla O.
  • Para ir a una página específica, presionar la tecla G.
  • Para ir a la página de inicio, presionar la tecla H.
  • Para cambiar el soporte de Javascript, presionar la tecla J.
  • Para mostrar la lista de favoritos, presionar la tecla K.
  • Para agregar un favorito, presionar la tecla A.
  • Para ver el historial, presionar la tecla Y.
  • Para refrescar la página, presionar la tecla R.
  • Para ver o enviar un link posicionarse en el link y presionar la tecla L.
  • Para ver la dirección de la página Web, presionar la tecla P.
  • Para esconder y mostrar el banner superior, presionar la tecla U.
  • Para abrir las opciones del navegador, presionar la tecla S.
  • Para mover hacia el principio una pantalla, presionar la tecla Shift y la tecla espacio.
  • Para mover hacia abajo una pantalla, presionar la tecla espacio.
  • Para moverse hasta el principio de una página, presionar la tecla T.
  • Para moverse hasta el final de una página, presionar la tecla B.
  • Y por último el mejor , para ver el código fuente de una página presionar alt y después en secuencia rbvs (rim blacberry view source).

Recursos adicionales:

Principios de diseño para dispositivos Blackberry

Documento para diseñar interfaces de usuario.

Sitio para desarrolladores

Mejores prácticas para aplicaciones Web móviles

Mejores prácticas para Web móviles 1.0

WURFL (Wireless Universal Resource FiLe) y Tera-WURFL para detección de capacidades de dispositivos móviles

Eventos de javascript

agosto 30, 2010 Deja un comentario

Mientras que antes los sitios web solo usaban javascript para desempeñar tareas simples, las aplicaciones Web de hoy en día usan una gran cantidad de código Javascript, para programar interfaces de usuario complejas, ejecutando muchas líneas de código cada vez que el usuario interactúa con la aplicación.

Conocer acerca de los eventos de javascript es de gran ayuda para un desarrollador Web que tiene como objetivo crear aplicaciones que respondan a las acciones que realice el usuario de manera eficiente y tan rápido como sea posible.

Cuando un usuario interactúa con el navegador, el sistema operativo recibe entradas desde varios dispositivos como el teclado o el mouse y es tarea del navegador procesar los eventos individuales que se van generando y decidir qué hacer con cada evento, por ejemplo desplegar un menú ó ejecutar javascript cuando el usuario da un clic a un elemento.

Sin eventos no hay aplicaciones que reaccionen a las necesidades del usuario, todos los navegadores proveen API’s sencillas para su manejo (aunque con diferentes implementaciones).

Existen 3 API´s para controlar eventos:
La original de Netscape que soportan todos los navegadores,  la cual es la que se agrega como atributo de un elemento (como el onclick)  y solo se le asigna una función.
La  de Microsoft la cual tiene un método llamado attachEvent.
La del W3C que es la que se usa el método addEventListener y agrega un parámetro extra el cual generalmente se especifica como falso (false).

El modelo de evento de los navegadores, permite que un evento se vaya “pasando” a través de elementos.

El evento empieza en el nodo donde es generado, si el nodo no tiene un manejador del evento, entonces se pasa a su ancestro y si el ancestro tampoco tiene manejador del evento, se pasa de nuevo al ancestro siguiente y así sucesivamente hasta el nodo raíz.

A esto se le conoce como “event bubbling” (IE) o “event capturing” (otros navegadores), y significa que más de un elemento puede responder a la misma acción. La diferencia de event bubbling y event capturing radica en el orden,  “event bubbling” va del nodo hacia sus ancestros y el orden de “event capturing” va del nodo raiz hacia el último hijo que contiene.
Por ejemplo supongamos que tenemos un div (div2) que tiene asignado un evento click, este div tiene como ancestro otro div (div1) que también tiene asignado un evento click, cuando se le da click al div2, se dispara el evento y ejecuta la función asignada, sin embargo el evento no se detiene ahí después de ejecutar la función, dispara también el evento click del div1.

<div id="div1" onclick="alert('Click en div uno');">
<div id="div2" onclick="alert(''Click en div dos');"></div>

“Event bubbling” y “Event capturing” se pueden evitar  con los métodos: event.cancelBubble = trueevent.stopPropagation (), event.preventDefault (), dependiendo del navegador, ó cancelando el evento por medio de la instrucción return false.

Vale la pena leer el artículo de @ppk con una explicación más detallada acerca de este concepto, en la siguiente liga:

Cuando un navegador dispara un evento, genera un parámetro extra de tipo evento, el cual describe que es el evento y todo lo relacionado a él,  se llama “Event Object“, este objeto es el que mantiene el rastro de los eventos que ocurren en la página y guarda información relacionada al evento, por ejemplo las coordenadas de “x” y “y” de el mouse, el elemento en el cual ocurrió el evento o cual tecla se presionó. Generalmente el manejador de evento necesita esa información para saber cómo procesar el evento.

Se puede acceder a esta información directamente del Objeto Event, pero desafortunadamente la lista de propiedades varía de navegador en navegador, algunas propiedades son:

  • pageX, pageY ó screenX, screenY: la distancia en píxeles de X y Y de la esquina superior izquierda a el puntero del mouse.
  • wich : que se usa con el evento keypress para determinar el código numérico de la tecla que se presionó.
  • target ó srcElement:que es el elemento de donde se originó el evento por ejemplo el elemento al que se le dio click cuando se usa el evento click.

Para conocer más a detalle las propiedades del objeto Event desde diferentes perspectivas visitar las siguientes ligas:

De Mozilla :
De MS:
De Opera:
Eventos de IPhone
API de eventos de Blackberry:

En IE se puede acceder al objeto Event por medio del objeto explicito window.event, mientras que en los otros navegadores, se accede pasando un parámetro a la función del controlador del evento, por ejemplo:

var e = window.event || e;

En el código anterior se pasa un parámetro (e) en la función, el cual será un objeto de tipo evento en la mayoría de los navegadores (pero no en IE),   el parámetro  se reemplaza con el mismo en caso de que exista ó  con el objeto global en caso de que no (IE). Después necesitaríamos saber cuál es el objeto que está llamando el evento, esta información se guarda en el evento pero de distinta manera target o srcElement.
Aun cuando se detecte el objeto Event entre los navegadores (con el script anterior), existen diferencias porque cada navegador soporta diferentes propiedades y métodos, existen varias tablas de compatibilidad que pueden ver en las siguientes direcciones:

Comúnmente varios elementos en una página requieren del mismo controlador de evento, por ejemplo en un catalogo de productos cada elemento requiere de un controlador para el evento onclick, para que despliegue información del producto y guarde un historial de los productos visitados cuando el usuario realice el click.

<a href=""
onclick="return despliegaProducto(this, event, function()
guardaHistorial("prod_id",1); return false;
});"> Producto 1

Si tuviéramos 50 productos   tendríamos que repetir el mismo código en cada elemento lo que incrementaría algunos KB de basura transferida a los usuarios, la información que es distinta es la clave del producto y en caso de que tuviéramos diferentes plantillas para el despliegue del producto seria la liga.

Delegación de eventos (Event delegation), es el nombre que se le da comúnmente a la técnica de enlazar (bind) un solo controlador de evento a un elemento raiz que contiene todos los elementos que necesitan responder a ese evento, cuando el evento es disparado en un elemento hijo, este se va al elemento raíz donde es controlado.

Se agrega  un conjunto de controladores a un elemento que sea el ancestro de varios elementos, cuando se ejecute el evento en alguno de sus “hijos” el elemento raíz pregunta cuál de ellos  es el que disparo el evento y después ejecuta el código, después cancela el paso del evento a su ancestro por medio de los eventos para cancelar el event bubbling.

El controlador distingue cual elemento hijo es el que ejecuto el evento y recibe parámetros adicionales por medio de algún atributo en ese elemento, por ejemplo para aplicar la delegación de eventos en el ejemplo anterior:

onclick=”return despliegaProducto(event);”>>
<a href="" id="1" >
Producto 25

El nuevo controlador de evento obtiene el id del producto, el cual, es previamente pasado como un parámetro del atributo id del elemento (el <a> al que se le dio click):

function despliegaProducto(evt)
evt = evt || window.event; //Obtenemos el objeto event
var elemento = || e.srcElement; //Obtenemos el elemento que se le dio el click
var idProducto =; // se obtiene el id del producto
se procesa para el despliegue del producto y se guarda el historial
return false; // se cancela la acción del href de la liga.

La poca cantidad de código adicional que se agrega para que funcione la delegación es insignificante, además, que puede guardarse en un archivo js que se guarde en el cache, y nó  en el documento principal, por lo cual no se tiene que descargar cada vez que el usuario visita la página.

Otro concepto importante acerca de los eventos son los contextos de ejecución, los navegadores tienen un manejo de eventos de un solo hilo, con un modelo de programación asíncrono, está dirigido a un elemento  específico y generan  la ejecución de una función que controle el evento.

Esta función se ejecutará en un contexto de ejecución, cuando se termine, empieza a ejecutarse el siguiente evento creando otro contexto de ejecución, cuando se carga una página se crea un contexto global de ejecución, cuando se ejecutan funciones se van creando contextos adicionales de ejecución y se crea además una pila de contextos de ejecución donde el ultimo contexto creado es el activo.

Cuando se enlazan (binding) y desenlazan (unbinding) controladores de eventos, se usan las formas nativas de los navegadores: attachEvent y detachEvent en Internet Explorer, addEventListener y removeEventListener para los demás.
Las dos técnicas funcionan de manera muy similar, por ejemplo el siguiente código agrega un manejador de evento genérico:

function agregaManejador(elemento, tipo, manejador)
if (elemento.addEventListener) // todos los navegadores excepto IE
elemento.addEventListener(tipo, manejador, false);
else //Internet Explorer
elemento.attachEvent(“on”+tipo, manejador); // se le agrega el prefijo on para IE
}// agrega manejador
function quitaManejador(elemento, tipo, manejador)
if (elemento.removeEventListener) //todos los navegadores excepto IE
elemento.removeEventListener(tipo, manejador, false);
else if (elemento.detachEvent)
elemento.detachEvent(“on”+tipo, manejador);
}//quita manejador

//elemento = document.getElementById(“Id_del_elemento”);
//agregaManejador(elemento,”click”, funciondeClick);

El código anterior revisa si existe soporte para los eventos addEventListener () y removeEventListener (), los cuales son soportados por todos los navegadores excepto IE, si estos métodos no existen en el objeto, entonces se asume que el navegador es IE y se utilizan los métodos específicos para IE (attachEvent () y detachEvent ()).

El código funciona bien pero se puede optimizar, cada vez que se ejecutan las funciones agregaManejador () y quitaManejador () se realiza la misma comprobación para ver si un determinado método esta presente, entonces estas comprobaciones se repiten cada vez que se ejecutan las funciones. Tomando en cuenta que si addEventListener () estuvo presente en la primer ejecución, entonces estará presente en las consecuentes llamadas.
Repetir el mismo trabajo cada vez que se llama a una función afecta al rendimiento de las aplicaciones.

Una manera para eliminar el  trabajo repetitivo en funciones es por medio de un concepto que se llama “lazy loading“, que significa que no se hace trabajo hasta que la información es necesaria, en este ejemplo no hay necesidad para determinar la manera para crear controladores de evento hasta que alguien realiza una llamada a la función, la versión de “lazy loading” para la función anterior es:

function agregaManejador(elemento, tipo, manejador)
if (elemento.addEventListener) // todos los navegadores excepto IE
agregaManejador = function (elemento, tipo, manejador)
elemento.addEventListener(tipo, manejador, false);
else //Internet Explorer
agregaManejador = function (elemento, tipo, manejador)
elemento.attachEvent(“on”+tipo, manejador); // se le agrega el prefijo on para IE

agregaManejador(elemento, tipo, manejador);

function quitaManejador(elemento, tipo, manejador)
if (elemento.removeEventListener) //todos los navegadores excepto IE
quitaManejador = function (elemento, tipo, manejador)
elemento.removeEventListener(tipo, manejador, false);
else if (elemento.detachEvent)
quitaManejador = function (elemento, tipo, manejador)
elemento.detachEvent(“on”+tipo, manejador);
quitaManejador(elemento, tipo, manejador)

La primera vez que cualquiera de los dos métodos es ejecutado, se hace una revisión para determinar la manera correcta de hacer el trabajo, luego la función original es reescrita como una nueva función que contiene solo la manera correcta y el último paso en la primer llamada de la función es ejecutar de nuevo la función con los argumentos originales, cada llamada posterior a las funciones evitan la detección porque el código de detección fue sobrescrito por una nueva función.

La primer llamada a las funciones será siempre la que dure mas tiempo porque tiene que ejecutar el código de detección y después hacer la llamada a la nueva función para completar la tarea, las llamadas posteriores a la misma función son mas rápidas porque no tienen la lógica de ejecución.

Lazy loading” se utiliza cuando la función no se ejecuta inmediatamente en la página.

La segunda alternativa para mejorar el rendimiento de la función es por medio del patrón “Conditional Advance Loading” (carga condicional anticipada), que realiza la detección por anticipado o sea mientras se esta cargando el script, en lugar de esperar a que se llame la función, la detección se sigue haciendo solo una vez pero se hace anticipadamente:

var agregaManejador = document.body.addEventListener ?

function (elemento, tipo, manejador)
elemento.addEventListener(tipo, manejador, false);
} :
function (elemento, tipo, manejador)
elemento.attachEvent(“on”+tipo, manejador);

var quitaManejador = document.body.removeEventListener ?
function (elemento, tipo, manejador)
elemento.removeEventListener(tipo, manejador, false);
} :
function (elemento, tipo, manejador)
elemento.detachEvent(“on”+tipo, manejador);

En el código anterior se revisa si addEventListener () y removeEventListener () están presentes y usa la información para asignar la función mas apropiada, el resultado es que todas las llamadas a las funciones serán igualmente rápidas porque la detección se hace desde antes de la llamada.

Este patrón asegura que todas las llamadas a la función tomen la misma cantidad de tiempo, y se debe de usar cuando una función va a ser llamada inmediatamente y muy frecuente a través del tiempo de vida de la página.

Debemos ser cuidadosos en probar las aplicaciones en los diferentes navegadores, hay situaciones en que los eventos se comportan muy diferentes aún y cuando realicemos las detecciones del navegador.

A continuación listo los eventos que incluyen ya los navegadores mas modernos.

Eventos de mouse:

onClick ondragleave onmousemove onscroll
ondblClick ondragover onmouseout
ondrag ondragstart onmouseover
ondragend ondrop onmouseup
ondragenter onmousedown onmousewheel

Eventos de la ventana

onafterprint onfocus ononline onresize
onbeforeprint onhaschange onpagehide onstorage
onbeforeonload onload onpageshow onundo
onblur onmessage onpopstate onunload
onerror onoffline onredo

Eventos del teclado

onkeydown onkeypress onkeyup

Eventos de media

onabort onended onloadstart onwaiting
oncanplay onreadystatechange onpause onratechange
oncanplaythrough onvolumechange onplay onerror
ondurationchange onloadesdata onplaying onseeked
onemptied onloadedmetadata onprogress onseeking
onstalled onsuspend ontimeupdate


Eventos del dom
Podcast Javascript Events:
Manual de ecmascript:
Libro: Even Faster Web Sites Capítulo 7.
Libro: JavaScript The Good Parts Capítulo 4
Libro: High Performance JavaScript Capítulo 8
Libro: JavaScript the Missing Manual Capítulo Capitulo 6.

A %d blogueros les gusta esto: