Javascript Framework Matrix, nos proporciona una visión general de los populares frameworks JavaScript y sus funciones. Hay varios ejemplos de los frameworks y cada fragmento contiene enlaces a la documentación oficial correspondiente. La elección de un framework depende de muchos factores y no puede hacerse tan solo con este artículo. La tabla únicamente muestra los diferentes estilos de la API y las funciones de las bibliotecas JavaScript.

Como hemos comentado otras veces, cada vez se usan más los frameworks para facilitar el trabajo a los desarrolladores y maquetadores Web. A parte de facilitarnos el trabajo, mejora visualmente el contenido de nuestra Web, ya que nos permite añadir nuevas funcionalidades en muchos casos dinámicas y que mejoran visualmente nuestros proyectos Web.

Javascript Framework Matrix lo podemos usar como guía de referencia para diferentes frameworks, y conocer un poquito más su uso, funcionalidades, estados, efectos, clases, etc.

Google Docs ofrece una nueva característica que te permite incrustar archivos PDF y presentaciones de PowerPoint en una página Web. Tan solo tienes que tener disponibles los archivos en línea, no es necesario subirlos a Google Docs.

El código para mostrar el archivo PDF dentro de tu página Web es el siguiente:

Tan solo usando el código que hemos puesto arriba y modificando la ruta del archivo, ya podemos visualizar documentos PDF y documentos Powerpoint en línea. Una forma muy útil de mostrar a los usuarios de forma directa nuestras presentaciones.

jPlayer es un plugin para jQuery que te permite:

• El juego y el control de archivos de audio en su página web
• Crear y modificar estilo de un reproductor de audio utilizando sólo HTML y CSS
• Añadir efectos de sonido a nuestros proyectos de jQuery
• Flujo más rápido usando HTML5 y alternativas de apoyo en formato ogg

Todo ello con HTML5 usando la etiqueta audio soportado en navegadores compatibles que permitan formato mp3 u ogg, mientras que soporta a otros navegadores utilizando formato mp3 con Flash no visible.

Ya podemos olvidarnos de insertar reproductor de otro tipo que sobrecargan nuestra página Web, con este plugin podremosimplementarlo en nuestra Web de forma sencilla, y modificarlo a nuestro gusto mediante HTML y CSS

Descargar jPlayer

Útil chuleta con un listado de funciones, selectores, efectos y utilidades de una de las mejores librerías javascript.

Descargar chuleta en formato PDF (34.1kb)

fuente: acodingfool.com

La sencillez, características avanzadas y un fuerte apoyo, son los argumentos más comunes para los desarrolladores que prefieren jQuery contra otros frameworks de JavaScript. Definiendo jQuery podemos decir, que consiste en un único fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX.

De hecho, jQuery es uno de los frameworks de JavaScript más populares, con potentes herramientas que pueden mejorar significativamente la interacción del usuario con las aplicaciones Web. jQuery tiene una ventaja adicional, ya que permite a los desarrolladores seleccionar elementos en una página usando CSS como sintaxis.

Características de jQuery

• Selección de elementos DOM.
• Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath.
• Eventos.
• Manipulación de la hoja de estilos CSS.
• Efectos y animaciones.
• AJAX.
• Soporta extensiones.
• Utilidades varias como obtener información del navegador, operar con Objetos y Arrays, (elimina los espacios en blanco del principio y final de una cadena de caracteres), etc.
• Compatible con los navegadores Firefox 2.0+, Internet Explorer 6+, Safari 2.0.2+ y Opera 9+.

Para ayudarte a mejorar tus habilidades, en este artículo podras acceder a 50 nuevas técnicas útiles de jQuery y tutoriales que se han creado recientemente y que podría hacer que el desarrollo de tu sitio web sea una experiencia más fácil y más interesante que la anterior.

Ver 50 técnicas útiles con jQuery

Fuente: SmashingMagazine

Los no iniciados a la usabilidad se habrán preguntado como funciona esto de la Usabilidad, que pautas o reglas sigue, en que se basan para saber si es una web Usable o no. Esta fase cada vez se usa más en los grandes proyectos Web orientados mayormente a los usuarios.

La usabilidad mide qué tan intuitiva y fácil de usar es una página web para el usuario común. Mide los siguientes 3 aspectos más relevantes:

Y para ello principalmente sigue unos principios básicos de usabilidad:

Principios de la usabilidad

• Visibilidad del estado del sistema
• Concordancia entre el sistema y el mundo real
• Control y libertad del usuario
• Consistencia y estándares
• Prevención de errores
• Reconocimiento antes que llamadas
• Flexibilidad y eficiencia de uso
• Diseño estético y minimalista
• Ayude a los usuarios a reconocer, diagnosticar y recuperarse de los errores
• Ayuda y documentación

Pero luego hay que realizar unos Test de Usabilidad de nuestra Web. Para ello cuando se crean los proyectos y se considera el apartado de la Usabilidad Web, se usa un checklist o unas pautas para evaluar la Usabilidad del sitio con los usuarios. También siguiendo unas directrices para evaluar la usabilidad de un sitio web, separadas en diversas categorías; Navegabilidad y Arquitectura de la Información, Formularios y entradas de datos, Confianza y Credibilidad.

Herramientas para la Usabilidad Web

Test de Usabilidad (plantilla)

Os dejamos con una plantilla de un Test de Usabilidad en formato excel, desarrollado por UserFocus y la traducción de mano de InterGraphics Designs. Con estas pautas podemos empezar a evaluar nuestros sitios Webs con un grupo de usuarios:

Descargar Test de Usabilidad

DejaClick y ClickHeat

También podemos usar de forma complementaria una extensión de Firefox conocida como DejaClick para realizar test de uso de nuestra web. Permite grabar las actividades de los usuarios de un sitio Web y generar informes de esas actividades.

Y una segunda herramienta llamada ClickHeat, con ella obtenemos un “mapa de calor” de las zonas donde hacen clic los usuarios de un sitio Web.

MORAE

Por último les hablaré de una aplicación llamada MORAE: es un paquete de software compuesto por 4 herramientas, destinadas a analizar y compartir la experiencia de uso de una web, estas herramientas son: Morae Manager, Morae Observer, Morae Recorder y Morae Player. Es una herramienta muy recomendable para quienes se encargar de realizar test de usabilidad Web con usuarios.

Bueno, espero que todas estas herramientas relacionadas con la usabilidad web nos sirvan de ayuda para nuestros proyectos Web.

Chris Hanscom ha desarrollado una nueva guía rápida de referencia CSS3 con las últimas especificaciones.

La guía de referencia CSS 3 dispone de una de las más completas y actualizadas hojas de cheats con la nueva especificación de CSS 3. Veremos las nuevas propiedades, selectores y que valores se pueden introducir según el estándar CSS3.

Descargar Guía de Referencia CSS3

El mayor problema que nos encontramos al cargar Javascript es que el navegador deja de renderizar la página mientras carga el fichero Javascript.

En cambio, si cargamos los ficheros dinámicamente mediante Javascript, evitamos el problema y podemos cargar ficheros Javascript de forma asíncrona sin afectar al renderizado de la página.

Nicholas C. Zakas ha desarrollado 3 principales puntos para optimizar la carga de JavaScript para nuesra Web:

• Creamos dos ficheros Javascript. En el primero poner lo necesario para cargar dinámicamente otro ficheros javascript y el segundo con el código necesario para nuestra aplicación.
• Introducimos el primer Javascript el final de la página, justo antes de cerrar la etiqueta <body>.
• Justo después creamos un segundo tag <script> en donde llamaremos al/los fichero/s necesarios.

HTML

loadScript

loadScript() es la función encargada de cargar el fichero Javascript de forma dinámica y encargada de ejecutar el código que indiquemos como segundo parámetro en cuando este esté cargado correctamente.

function loadScript(url, callback){

 var script = document.createElement("script")
 script.type = "text/javascript";

 if (script.readyState){  //IE
    script.onreadystatechange = function(){
     if (script.readyState == "loaded" ||
         script.readyState == "complete"){
           script.onreadystatechange = null;
           callback();
        }
     };
 } else {  //Others
   script.onload = function(){
     callback();
   };
 }

 script.src = url;
 document.getElementsByTagName("head")[0].appendChild(script);
}

Con esta optimización mejoramos la carga de las Webs con Javascript. Ya no solo sirve para una carga más rapida de la página ,sino para realizar algunas funciones en el cuerpo de la página una vez cargada dicha página.

Fuente: anieto2k