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

HTML5 Reset

ByLuis

Like a lot of developers, we start every HTML project with the same set of HTML and CSS templates. We’ve been using these files for a long time and we’ve progressively added bits and pieces to them as our own personal best practices have evolved. …

Post original

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

Crear aplicaciones offline con HTML5

ByLuis

Cuando cada día la gente está más online, no está de mal del todo permitir que nuestras aplicaciones web se vean de modo offline, o crear una versión offline de nuestra web. Podemos preguntarnos para qué pensar en lo offline cuando todo el mundo está conectado a todas horas, pues por ejemplo para versiones para móviles, que no siempre se está 100% conectado.

HTML5 permite indicar qué elementos de nuestra web se pueden ver offline o mostrar una página offline en caso de que se acceda a ella. Su uso es bastante sencillo y no nos llevará mucho tiempo.

Lo primero es indicar el manifiesto:

El manifiesto será un fichero que contendrá la información sobre los ficheros cacheables, la página a mostrar offline o contenidos no cacheables. Para que el navegador lo entienda habrá que indicar su MIME type:

AddType text/cache-manifest manifest

Luego habrá que indicar en el fichero que es un manifiesto añadiendo CACHE MANIFEST a la primera línea y luego indicando los ficheros cacheables, la página offline o los contenidos no cacheables:

CACHE MANIFEST
# v1
# Contenido cacheable
pagina.html
pagina.css
pagina.js
pagina.png
# Pagina offline
FALLBACK: / /estoy-desconectado.html
# Paginas dinamicas no cacheables
NETWORK: /path/*

Si la aplicación ha cambiado y necesitamos que el navegador lo refresque, deberemos modificar el fichero, por ejemplo cambiando el número de versión. El fichero .manifiest también puede ser cacheable (mediante htaccess, por ejemplo), ya que el navegador intentará acceder a él siempre que se acceda a la página.

No hay que olvidarse de la API del cache, el cual nos puede aportar mucho en nuestro desarrollo, sobre todo para detectar si el navegador está online u offline:

window.navigator.onLine

Offline Apps with Application Cache: Quickstart, Tips, and Deep Dive

|

Scaling an AWS infrastructure – Tools and Patterns

ByLuis

This is a guest post by Frédéric Faure (architect at Ysance), you can follow him on twitter. How do you scale an AWS (Amazon Web Services) infrastructure? This article will give you a detailed reply in two parts: the tools you can use to make the most of Amazon’s dynamic approach, and the architectural model you should adopt for a scalable infrastr …

Post original

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

| |

Frame: Modular CSS Framework

ByLuis

Frame is a modular CSS framework that supports: Layout, Typography, Forms, Code, Table, Reset, and Print styling. It is HTML5 compatible, and provides default styles and support for HTML5 elements. Frame is accompanied by an online tool that allows you to easily generate your own build (in case you don’t need to use all the features). …

Post original

|

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

|

Designing Web Applications for Scalability

ByLuis

I can’t even count the number of times that I’ve heard this phrase: “don’t worry about scaling your web application, worry about visitor (or customer) acquisition.” My response to this is always that you don’t need to choose one or the other, you can do both! In this post, I’m going to go over some of the strategies I’ve used to architect web appli …

Post original