var zip = new JSZip();
zip.add("Hello.txt", "Hello World\n");
img = zip.folder("images");
img.add("smile.gif", imgData, {base64: true});
content = zip.generate();
location.href="data:application/zip;base64,"+content;

El único problema que hay es a la hora de generar el nombre del fichero: Firefox crea un fichero con un nombre extraño y acabado en .part, Safari lo nombra “Unknown” sin extensión, Chrome “download.zip” e IE directamente ni funciona la librería.

Nuestra fuente: SentidoWeb

La idea de Adobe es que Edge coexista con la plataforma Flash, pero algunos ya lo están viendo como una solución alternativa para que todo el contenido web sea más estándar y se pueda ver desde cualquier gadget. Con Edge se pueden crear animaciones web, y en el futuro podremos crear incluso juegos. Suena mucho a una evolución de Flash a largo plazo más que a su compañero.

Adobe Edge puede descargarse de forma gratuita al estar en una fase de pruebas preliminar, aunque pasará a tener un precio en cuanto sea lanzado definitivamente el año que viene. Hay versiones para Windows y Mac OS X. Si habéis hecho algunos pinitos con animaciones en Flash, quizás tengáis curiosidad para ver cómo se puede hacer lo mismo con Edge.

Vía | ReadWriteWeb
Más información | Adobe Edge
En Genbeta | Hablamos con Anup Murarka, director de márketing de Adobe Flash

Nuestra fuente: Genbeta

• encontrar todos los estilos que aplican a un elemento
• indica qué estilo es propio y cuál heredado
• soporta el estándar de la W3C y las propias de Internet Explorer
• admite CSS1, CSS2 y CSS3

Algo muy parecido a lo que nos ofrece Firebug

CSSUtilities

Nuestra fuente: Sentidoweb

function detectBrowserCapabilities(){
  var res = new Array();
  res["userAgent"] = navigator.userAgent;
  var hasWebWorkers = !!window.Worker;
  res["workersFlag"] = "" + hasWebWorkers;
  var hasGeolocation = !!navigator.geolocation;
  res["geoFlag"] = "" + hasGeolocation;
  if (hasGeolocation) {
    document.styleSheets[0].cssRules[1].style.display = "block";
    navigator.geolocation.getCurrentPosition(function(location) {
      res["geoLat"] = location.coords.latitude;
      res["geoLong"] = location.coords.longitude;
    });
  }
  var hasDb = !!window.openDatabase;
  res["dbFlag"] = "" + hasDb;
  var videoElement = document.createElement("video");
  var hasVideo = !!videoElement["canPlayType"];
  var ogg = false;
  var h264 = false;
  if (hasVideo) {
    ogg = videoElement.canPlayType('video/ogg; codecs="theora, vorbis"') || "no";
    h264 = videoElement.canPlayType('video/mp4;
    codecs="avc1.42E01E, mp4a.40.2"') || "no";
  }
  res["videoFlag"] = "" + hasVideo;
  if (hasVideo){
    var vStyle = document.styleSheets[0].cssRules[0].style;
    vStyle.display = "block";
  }
  res["h264Flag"] = "" + h264;
  res["oggFlag"] = "" + ogg;
  return res;
}

Nuestra fuente: Sentidoweb

Videotutoriales de programación para diseñadores:

Encuentras enlaces a los más recientes en el más avanzado o en los tutoriales de programación:

1. Introducción a la programación para diseñadores
2. Programación para diseñadores 2: Javascript y comentarios
3. Programación para diseñadores 3: Algoritmos
4. Programación para diseñadores 4: Programación estructurada
5. Programación para diseñadores 5: Condicionales
6. Programación para diseñadores 6: Condiciones switch
7. Programación para diseñadores 7: Ciclos while
8. Programación para diseñadores 8: Scripts en Photoshop
   
9. Programación para diseñadores 9: Ciclos for
   

Nuestra fuente: Cristalab

RightJS: El Framework JavaScript correcto

RightJS está dirigido al público de los lenguajes dinámicos, intenta posicionarse dentro del grupo de los Frameworks Javascript más populares. Sus creadores le adjudican una sintaxis agradable, simple, fácil de leer y escribir que lo hacen sencillo de usar y extender, incluso para novatos.

Su instalación es prácticamente igual que todos los demás Frameworks, simplemente incluyes el archivo del núcleo en la página, de la siguiente manera:

<script src="/javascript/right.js"></script>

La librería viene con dos archivos, uno es el código actualizado y el otro contiene código soportado por navegadores viejos. No tienes que preocuparte por el otro archivo (right-olds.js), porque es cargado automáticamente cuando sea necesario.

Fue probado y funciona en los siguientes navegadores:

• Firefox >= 1.5
• Safari >= 3
• Todas las versiones de Google Chrome
• Internet Explorer >=6
• Opera >= 9.25
• Konqueror >= 3.10

En su sitio web puedes encontrar una interesante comparación con el resto de los Frameworks más populares. Su filosofía tiene 3 enunciados: “Causal, but Well Organized”, “Designed, not Evolved”, “Don’t Learn, Have Fun!” y “It’s Highly Hackable!”; estos describen la idea detrás del mismo. Para los más incrédulos, también han publicado los resultados de un test de velocidad realizado en diferentes navegadores. Entre los ejemplos están un calendario, un autocompletado, un LightBox, Tabs, Tooltips y más.

SproutCore: Un Framework para aplicaciones en HTML5

SproutCore se distingue por su énfasis en el uso de funcionalidades para llevar aplicaciones de escritorio a la web. Cuenta con guías para empezar de manera rápida y un grupo de Google para quienes desean utilizar esta herramienta. Es una plataforma de código abierto para construir rápidamente “rich cloud applications”. Publican en su wiki un About muy completo, exponiendo las metas y las “no-metas”.

Con la frase: “Produzca impresionantes aplicaciones web en cualquier navegador moderno sin la necesidad de plugins”, SproutCore logra inspirar a los visitantes de su sitio web a conocer más sobre este Framework que actualmente se encuentra en versión Beta; aunque ya es utilizado en el sitio iWork y cuenta con el apoyo de Apple Inc., lo cual hace sospechar que los creadores del iPhone puede que utilicen Ruby en algunos de sus sitios

SproutCore, está diseñado para ser utilizando con Ruby, lo cual limita su público y puede ser instalado como una gema, usando el siguiente comando:

sudo gem install sproutcore

Entre los ejemplos están un Reloj, un Reproductor de Video, Controles y otros.

Adobe Spry: la propuesta de Adobe Labs

Patrocinado por Adobe y mantenido por Adobe Labs un Framework muy útil liberado por este gigante del software. Spry, esta altamente integrado en las recientes versiones de Dreamweaver. Desde la versión 1.6.1 es compatible con Adobe Air en su totalidad y se implementa como un conjunto de bibliotecas JavaScript.

Para utilizar Spry en una página, basta con incluir la biblioteca Javascript que contiene las características que necesitas. Tiene tres partes: Spry Data, Spry Widgets y Spry Effects. Se pueden utilizar juntas o por separado una de la otra. Los Spry Widgets son avanzados componentes en HTML, CSS y Javascript que pueden ser personalizados para diversos fines. Responden a la navegación por teclado y se desactivan correctamente cuando Javascript no es soportado por el navegador.

Spry Effects, como su nombre lo dice, es una colección de efectos que pueden ser incluidos en cualquier sitio. Algo muy interesante de este framework es la facilidad con que se puede trabajar con datos, soporta XML, JSON y HTML, propiamente. Cuenta con una extensa documentación y una lista muy completa de ejemplos.

JavaScriptMVC: Desarrolla con dirección

JavaScriptMVC es un completo y robusto framework para crear aplicaciones en Javascript. Utiliza JQuery para las funcionalidades en Ajax y el manejo del DOM. Más que una simple librería, es un conjuto de scripts en donde está contemplado el Testing y la documentación de la aplicación. Su última versión pesa 6.2 MB (incluye tests y ejemplos) y puede ser descargado desde su sitio web.

Este framework es algo ya más bien parecido a una plataforma para desarrollar y utiliza el patrón Model-View-Controller, lo que explica el nombre. Entre las razones de por qué usarlo, destacan: Refuerza las “Buenas Prácticas”, aumenta la mantenibilidad y reduce el tiempo de desarrollo. JavaScriptMVC suple las siguientes herramientas:

• Generador de Código.
• Manejador de Actualización y Dependencias.
• Suite de Pruebas.
• Comprensión.
• Documentación.

Podemos ver un video donde se muestran las características de este framework. No parece ser tan simple, pero es indiscutible que es un framework muy completo.

Qooxdoo: creación RIA

Es un Framework compresivo e intuitivo, orientado a objetos, que facilita la creación de Aplicaciones Ricas de Internet (RIA). Es soportado por lo siguientes navegadores:

• Internet Explorer 6+
• Firefox 2+
• Opera 9+
• Safari 3.0+
• Chrome 2+

Está basado completamente en clases, 350 clases para ser exacto; implementa constructores y destructores. Soporta Internacionalización, es decir que soporta todos los lenguajes del mundo, utilizando herramientas internamente de gettext. También integra un UnitTesting para depurar las aplicaciones.

Está bien documentado y consta con una buena cantidad de Ejemplos, entre los que se destacan está un DataGrid, Fromularios, Árboles, Data Binding, entre otros. Algo que queda por destacar que este framework es auspiciado por 1&1 la empresa de hosting.

SimpleJS: Un Framework simple

Este Framework intenta ser, como su nombre lo dice, simple. Realmente ligero, proporciona un conjunto de librerías para la implementación de Ajax. Desarrollado para principiantes y para proyectos pequeños. Las funciones son extremadamente simples y ha sido probado en IE6, IE7 (beta), Firefox 2.0 y Opera 9.02.

Para utilizarlo solo tienes que escribir la siguiente linea:

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

Luego de descargarlo, podemos ver un carpeta con ejemplos de Efectos, de cómo funciona el acordeón y un SlideShow sencillo.

UIZE: Una opción Open Source

Es un Framework Javascript Open Source, orientado a objetos, soporta Efectos, Widgets, AJAX, DOM, plantillas y más. Luce ser muy completo, pero no tan simple de implementar. En su sitio podemos encontrar la documentación del mismo y una amplia gama de ejemplos. La mejor opción para aprender a utilizar este Framework es descargarlo y estudiar la lista de implementaciones.

Midori: opción ligera

Es un framework ultra-ligero muy completo. Permite Selectores CSS, Ajax, Tabs, Drag & Drop, Efectos, Pop-up Menú, Autocompletado, Editor “Inline”, Selectores en Tablas y más. Está bien documentado, pesa 47.5 KB y puede ser descargado desde su sitio web. Es fácil de implementar y soporta los navegadores más utilizados.

Extraido de: Maestros del web

• Redimensionar filas y columnas
• Funciones
• Editar el contenido de las celdas
• Permite temas/css

jQuery.sheet

Vía / WebAppers

Nuestra Fuente: SentidoWeb.com

iJab es una librería javascript que nos permite añadir chat en nuestras aplicaciones web, con la característica que usa XMPP/Jabber para realizar las comunicaciones.

Entre las características encontramos:

• Basado en el protocolo XMPP: lo cual permite usar servidores basados en ese protocolo
• Soporte para MSN y AIM, añadiendo transports al servidor XMPP
• Totalmente Javascript
• Compatible con Firefox, IE, Chrome y Safari
• Themes
• Modos de aplicación: stant-alone, web chat y live
• Sin pop-ups
• Notificaciones de nuevos mensajes
• Sonido
• Múltiples usuarios en el chat (MUC)
• Búsqueda de usuarios
• Administración: permite añadir y borrar usuarios y administrar grupos
• Smileys

iJab

Nuestra fuente: SentidoWeb