Hacer drag & drop de ficheros fuera del navegador con Chrome

ByLuis

Hace tiempo comenté cómo hacer drag & drop directamente sobre el navegador, lo cual nos venía muy bien para subir ficheros (por ejemplo para un correo, galería de fotos, …). Esta vez se trata de descargar ficheros directamente desde el navegador, algo que permite GMail desde Chrome.

El autor de este post lo ha tenido difícil para poder ver cómo lo hace Google, pero al final el código es bastante sencillo:

var file = document.getElementById("dragout");
 
file.addEventListener("dragstart",function(evt){
    evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);

Sólo disponible en Chrome

Drag out files like Gmail

Modernizr: librería Javascript para detectar HTML5, CSS3 y más

ByLuis

Modernizr es una librería que permite detectar las nuevas características de HTML5, CSS3, Canvas, … que admite el navegador. Tan sólo habrá que acceder a propiedades para saber si admite o no una característica en particular:

if (Modernizr.geolocation) {
  // Admite geolocalización
}
if (Modernizr.csstransitions) {
  // Transacciones CSS
}
if (Modernizr.rgba) {
  // RGBA
}

Las características que detecta son:

  • @font-face
  • Canvas
  • Canvas Text
  • HTML5 Audio
  • HTML5 Audio formats
  • HTML5 Video
  • HTML5 Video formats
  • rgba()
  • hsla()
  • border-image
  • border-radius
  • box-shadow
  • Multiple backgrounds
  • opacity
  • CSS Animations
  • CSS Columns
  • CSS Gradients
  • CSS Reflections
  • CSS 2D Transforms
  • CSS 3D Transforms
  • CSS Transitions
  • Geolocation API
  • Input Types
  • Input Attributes
  • localStorage
  • sessionStorage
  • Web Workers
  • applicationCache
  • SVG
  • SVG Clip paths
  • SMIL
  • Web SQL Database
  • IndexedDB
  • Web Sockets
  • hashchange Event
  • History Management
  • Drag and Drop
  • Cross-window Messaging

Modernizr

Tutorial básico de HTML storage

ByLuis

Una de las características más interesantes de HTML5 es el browser storage, el cual nos permite almacenar datos en el navegador del cliente.

A parte de su uso básico:

localStorage.setItem('name', 'arman');  
var value = localStorage.getItem('name');  
localStorage.removeItem('name');

Me gustaría destacar dos puntos importantes: detectar si el navegador lo soporta y añadir eventos:

var webStorageSupported = ('localStorage' in window) && window['localStorage'] !== null; 
if (window.addEventListener) {  
  window.addEventListener("storage", handleStorageChange, false);  
} else {  
  window.attachEvent("onstorage", handleStorageChange);  
}  

function handleStorageChange(event) {  
  alert("Algo esta cambiando en el almacenamiento");  
}

El resto del tutorial explica todo paso a paso

Browser Storage for HTML5 Apps

|

Quick Tip: An Introduction to Sammy.js

ByLuis

You’ve been seeing it for a while now with Google’s Reader, Gmail, and most recently, on Facebook. Probably, you, too, would like to write RESTful evented JavaScript applications. Well, fellow developers, meet Sammy.js, a tiny JavaScript framework built on top of jQuery. Sammy utilizes the URL hash (#) to allow you to create single page AJAX applic …

Post original

|

Optimizing Search Functionality with Large JavaScript Arrays

ByLuis

Processing arrays can take quite a few bit of time, this is something that can directly impacts the loading speed of your page and depend of the computer and the browser your users use. When you think that a typical users can load your website with a netbook , or an iphone for that matter, speeding up search in large arrays can be a good way to optimize your code …

Post original

| |

HTML5 Boilerplate

ByLuis

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site. After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, perfo …

Post original

Trabaja con datos mediante SQL con Javascript

ByLuis

Me han pasado una librería con la que podemos trabajar con datos en Javascript usando sentencias SQL, aunque los datos hay que recuperarlos de ficheros mediante Ajax y deben estar en un formato específico. La librería no admite inserts aún y los datos no se almacenan en el cliente, sino en el servidor, pero puede ser una interesante alternativa hasta que las bases de datos de HTML5 estén plenamente disponibles en todos los navegadores.

var sql="select NombreCompania, NombreContacto, CargoContacto from clientes order by 3, 2 desc" ;
var res=myJSSQL.Query(sql);

Dispone de una librería PHP que convierte una BD de MySQL o Postgres en el formato específico de la librería javascript.

JavascriptSQL