Archive

Archive for the ‘Web 2.0’ 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

http://getfirebug.com/

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

http://getfirebug.com/firebuglite

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

http://developer.yahoo.com/yslow/

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages (http://developer.yahoo.com/performance/rules.html).  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 Smush.it™ and JSLint.

Smush.it

http://www.smushit.com/ysmush.it/

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 Smush.it.

Smush.it 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 Smush.it 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.

Smush.it is included with YSlow and is no longer available as a separate download. Download YSlow now to get Smush.it and start saving bytes on image files.

Page speed

http://code.google.com/speed/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 Webpagetest.org, 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

http://code.google.com/webtoolkit/speedtracer/

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

http://www.chromium.org/chrome-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 (http://www.chromium.org/spdy)  and HTTP

Internet Explorer Developer Toolbar

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535

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

http://msdn.microsoft.com/en-gb/library/dd565628%28VS.85%29.aspx

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

http://www.opera.com/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 http://my.opera.com/ODIN/blog/opera-mobile-10-and-its-remote-debugging-party-trick.

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

http://ajax.dynatrace.com/ajax/en/Default.aspx

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

Showslow

http://www.showslow.com/

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

http://www.httpwatch.com/

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

http://www.fiddler2.com/fiddler2/

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: http://conceptdev.blogspot.com/2009/01/monitoring-iphone-web-traffic-with.html

Mite

http://mite.keynote.com/

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

http://www.charlesproxy.com/

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: http://blog.mediarain.com/2009/08/iphone-http-connection-debugging/

JSDoc toolkit

http://code.google.com/p/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.

YUIDoc

http://yuilibrary.com/projects/yuidoc

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

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=119F3477-DCED-41E3-A0E7-D8B5CAE893A3&displaylang=en

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://www.tuffcode.com/index.html

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

http://yahoo.github.com/boomerang/doc/

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

http://developer.yahoo.com/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.

Perfectomobile

http://www.perfectomobile.com

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.
http://www.perfectomobile.com/portal/cms/opera.xhtml?key=OP631R89YL2

Web Page Test

http://www.webpagetest.org/

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

JSLint

http://www.jslint.com/

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

http://yuilibrary.com/projects/yuicompressor/

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

http://code.google.com/intl/es-AR/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.

Conclusion

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.

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:

http://es.wikipedia.org/wiki/WebGL, https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html

La lista de contextos soportados están en la página de contextos de canvas en http://wiki.whatwg.org/wiki/CanvasContexts

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: http://www.juan-anzaldo.com/2010/HTML5canvasG/tutorialCanvas.html

HTML

Código HTML

La parte del código html anterior:

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

</canvas>

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.

CSS

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

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).

Seguimos:

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
donde:
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.

http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element

Interface 2d  : http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#canvasrenderingcontext2d

Interfaces de Usuario.

Las interfaces de usuario son muy importantes porque es el medio por el cual se comunican el usuario y la aplicación o dispositivo Jef Raskin comenta “Respecto a lo que concierne al cliente, la interface es el producto”, El usuario ve e interactúa con la interfaz de usuario.

Pero, ¿Que propiedades o características debe de tener una interfaz de usuario?, según [the smashing book] toda interfaz de usuario debe de tener 8 características:

1. Ser Clara. La interfaz evita la ambigüedad haciendo todo claro a través de lenguaje, flujo, jerarquía y metáforas para elementos visuales, las interfaces claras no necesitan manuales y además ayudan a los usuarios a que tengan menos errores mientras las usan.

2. Ser Concisa. Es fácil hacer una interfaz clara etiquetando todo, pero se corre el peligro de poner muchos elementos en la pantalla al mismo tiempo, si hay muchas cosas en la pantalla, es difícil encontrar lo que se busca y la interfaz se vuelve tediosa de usar, el reto real en hacer una gran interfaz es hacerla clara y concisa al mismo tiempo.

3. Ser Familiar. Aunque alguien use una interfaz por primera vez, ciertos elementos pueden ser familiares, se pueden usar metáforas de la vida real para comunicar un significado, por ejemplo, los tabs son comúnmente usados para navegación en los sitios web y en las aplicaciones. Las personas los reconocen como elementos de navegación porque la metáfora del folder es familiar a ellos.

4. Tener buen grado de reacción. Esto significa dos cosas: primero velocidad de respuesta, una buena interfaz no se debe de sentir lenta o pausada, segundo la interfaz debe proporcionar buen nivel de retroalimentación al usuario respecto a lo que está pasando y si el input del usuario ha sido procesado exitosamente.

5. Ser Consistente. Mantener la interfaz consistente a través de las aplicaciones es importante porque permite a los usuarios reconocer patrones. Una vez que los usuarios aprenden como trabajan algunas partes de la interfaz, ellos pueden usar este conocimiento en nuevas áreas porque ellos ya conocen el funcionamiento.

6. Ser Estética. No se necesita hacer una interfaz atractiva para que realice su trabajo, pero haciendo algo que se vea bien, hará que el tiempo que los usuarios gastan usando la aplicación sea más placentero, es bueno tener usuarios felices.

7. Ser Eficiente. Tiempo es dinero y una gran interfaz debe hacer al usuario más productivo por medio de atajos y buen diseño, después de todo este es uno de los principales beneficios de la tecnología, permitir desarrollar tareas con menos tiempo y esfuerzo haciendo gran parte del trabajo por el usuario.

8. Ser Tolerante a fallas. Todos cometemos errores, y él como la interfaz los maneja será un test para la calidad. ¿Es fácil deshacer acciones?, ¿es fácil recuperar archivos borrados? una buena interfaz no debe castigar a los usuarios por sus errores, debe proveer formas para remediarlos.

Diseñar una interfaz que incorpore todas estas características es complicado ya que trabajar en una característica a veces afecta a otra, entre más elementos se agreguen a la interfaz, mas cosas los usuarios tendrán que procesar,  por otro lado no proveer suficiente ayuda y soporte puede hacer que ciertas funciones sean ambiguas, crear algo que sea simple, elegante y al mismo tiempo claro y consistente es la principal  meta para el diseñador de interfaz de usuario.

Existen muchos recursos en línea a continuación listo herramientas, videos y plantillas que pueden ayudar a realizar los prototipos de las interfaces.

Fuentes:

the smashing book

http://speckyboy.com/

Sobreviviendo (y prosperando) en la guerra de identidades en línea

abril 14, 2009 Deja un comentario

Surviving (and thriving in) the online identity wars fué otra conferencia que asisti en el marco del  Web2.0 expo en esta platica de Joseph Smarr de Plaxo da algunos puntos para lograr un mejor desarrollo de sitios sociales como  por ejemplo:

  • Personalizar la experiencia de usuario para cada proveedor que mejor se adapte al target de usuarios de nuestros sitios  (FB, MySpace,Twitter, linkedin…) dentro de el sitio (como ejemplo plaxo).
  • Utilizar openid para enlazarse con esos proveedores.
  • Implementar FB Connect y Open Stack o utilizar terceros ( RPX, Google Friend Connect)
  • Enfocarse en generar flujos de actividad para correr el virtuoso ciclo de que están haciendo los usuarios en mi sitio.
  • Utilizar todos los medios de distribución posibles, trabajar con la mayoria de los lectores de feed del web.
  • Construir API’s alrededor del contenido único del sitio y servicios y hacerlo con los estandares comunes.
  • Utilizar OAUTH.
  • Poner mucha atención en el Web  que rapidamente evoluciona.

La platica como todas fué  muy interesante, dejo en claro algunos conceptos  y reafirmo como se estan construyendo muchos sitios sociales proveiendo API´s para que los usuarios o desarrolladores puedan utilizar sus objetos sociales en otros sitios web,  Flash lanzo hace poco un API  que se llama AS3 Facebook API para poder construir aplicaciones Flash-Flex-AIR utilizando llamadas directas a Facebook,  soporta 3 API’s (Canvas, Connect, y Desktop). Para mas información pueden ir directo al sitio de adobe donde esta mas detallada la información

http://www.adobe.com/devnet/facebook/

o para  empezar a desarrollar ir a

http://code.google.com/p/facebook-actionscript-api/

La presentación.

Diseñando sitos web sociales. (Designing social web sites)

abril 13, 2009 Deja un comentario

Otro taller del que tuve la oportunidad de asistir en el marco del web 2.0 expo  fue el de “Designing Social Web Sites” impartido por Christina Wodtke autora del libro Information Architecture el cual me regaló  una  copia  por una participación que tuve en el taller :),  Christina definió web social como un espacio digital en donde los datos acerca de las interacciones humanas son tan importantes como otros tipos de datos.

Mostro una ecuación (Lewin’s Equation)que dice que el comportamiento es una función de una persona y su ambiente (Behavior is a function of a person and his enviroments), el ambiente es la parte que nosotros diseñamos.

B = f(P+E)

Hablando de comportamiento menciono un post de thor muller en donde comenta 13 razones de mal comportamiento según el equipo de facebook y que deshabilita la cuenta.

Recomendo también dos libros:  Made to stick de Chip Heath y Dan Heath y A pattern language de Christopher Alexander los cuales son de gran ayuda para tener un mejor entendimiento y poder conceptualizar mejores sitios web sociales de acuerdo a comportamientos de personas.

Comento que los espacios sociales estan relacionados con tres factores importantes: Identidad, Relaciones y Actividades.

  • Con la identidad estan relacionados tres temas: Perfil, Presencia y Reputación y recomendo leer acerca de Clay Shirky y su plática: A group is its own worst enemy, la dinámica en esta sección fué la de formar un grupo de 3 personas y responder cada uno: que elementos necesito para creare o mejorar la identidad, perfil, presencia y reputación dentro de los sitios en los cuales trabajamos.
  • Con la sección de  relaciones estan agrupados otros tres temas: Atención, Grupos y Contactos. En esta sección la dinámica fué responder dentro del mismo equipo de 3 personas que tipos de relaciones soportan o soportaran los sitios en los que trabajamos. Habló sobre diferentes sitios como  43things o dogster,  en los cuales la gente se relaciona con diferentes temas y se crean grupos relacionados a un mismo interés.
  • Y con la sección de Actividad agrupa otros tres que son compartir, colaborar y comunicar, hablo sobre la identificación de los objetos sociales y actividades que se realizan dentro de un sitio web, la pregunta de la dinámica fué la de identificar quienes eran los usuarios de los sitios que desarrollamos, que es lo que hacen esos usuarios dentro del sitio y definir cuales eran las actividades de estos sitios.

Putualizo que lo mas importante que debemos hacer a la hora de diseñar sitios web sociales es basicamente:

  • Identificar los objetos sociales que van a interactuar con los usuarios del sitio.
  • Seleccionar las caracteristicas del sitio.
  • Crear conexiones emocionales con los usuarios. (tomando en cuenta normas y administración comunitaria)

Un enlace que recomendó y que en lo personal me gustó mucho es el de bokardo.

Christina Wodtke Firmando el libro que me regalo :)

Christina Wodtke Firmando el libro que me regalo 🙂

Celebrando el regalo con una cervecita en la cantina mas cercana al Moscone West Center

Celebrando el regalo con una cervecita en la cantina mas cercana al Moscone West Center

Presentacion

Acerca de redes sociales y solo por diversión… http://www.youtube.com/watch?v=nrlSkU0TFLs

Diseño de interfaces sociales, Principios, mejores prácticas y patrones para el diseño de web social.

abril 13, 2009 1 comentario

Dentro del marco del Web2.oExpo, tuve la oportunidad de asistir a el taller de Erin Malone y christian Crumlish que se llamó:

Designing Social Interfaces: Principles, Best Practices and Patterns for Designing the Social Web.

comentaron primeramente las 4 partes para diseñar un patron:

  • Que : Definir el problema, que es lo que el usuario quiere hacer, ejemplos visuales.
  • Cuando: Cuando el usuario  usará la solución, esto es el contexto.
  • Cómo: es la solución detallada que decisiones en la interfaz necesitan hacerse, que elementos necesitan existir, que comportamientos necesitan ser soportados.
  • Porqué: el porque es importante el uso de la solución ó porque es la solución correcta

Un patrón describe una solución optima para un problema común dentro de un contexto específico, un tema bastante importante en estos tiempos de Web 2.0 es el diseño social, ellos hablaron de patrones de diseño social como colaboración, identidad, participacion, reputación, presencia, marketing, social networking por mencionar algunos.

A continuación muestro dos diagramas que mostraron en la presentación que me parecen muy importantes para ejemplificar mas a detalle,  el primero es un ecosistema de media social y el segundo como implementar lo social en las empresas.

 Ecosistema de media social

 

Patrones sociales para las empresas.

Patrones sociales para las empresas.

Ellos estan desarrollando una wiki de patrones para desarrollo social (ir ahora) los cuales estan en un libro que proximamente saldrá a la venta, hablaron de los principios, representaciones del ser (self), actividades que involucran a objetos sociales y dinamicas de grupo.

Dentro de los principios hablaron sobre:

  • Diseñar para todos.
  • Hablar como persona.
  • Ser abierto.
  • Ser un juego.
  • Etica.
  • Email.
  • Cargo Cult antipattern (ver definición)

Dentro de la representación del ser hablaron sobre:

Algunos de los patrones de los que mencionaron en esta parte fueron: Signup, sign in, invitaciónes, profiles, avatar, etiquetas, disponibilidad)

Dentro del tema de  Actividades con objetos sociales hablaron sobre:

  • Colecciones.
  • Publicación y transmición.
  • Comunicación.
  • Retroalimentación.
  • Compartir (sharing).
  • Colaboración.
  • Media Social.

Y sobre dinámicas grupales hablaron sobre:

  • Relaciones.
  • Grupos.
  • Moderadores de comunidades.
  • Lugares, geo-locaciones.

Y finalmente explicaron posibles escenarios y que patrones utilizar en cada caso, un taller bastante interesante muy entretenido y  con mucha nformación útil por parte de los autores, en lo personal creo que es muy importante a los que desempeñan cualquier tipo de actividad para Web, conocer estos patrones ya que nos ayudan bastante para conceptualizar nuevos proyectos orientados a web 2.0.

Ligas:

Sobre los Patrones y los autores. http://www.designingsocialinterfaces.com/patterns.wiki

Presentación: http://www.slideshare.net/emalone/social-patterns-talk-web-20-version

 Ver mas presentaciones de Erin Malone.

A %d blogueros les gusta esto: