Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. HTML5
Webdesign

Consejo rápido: usando el atributo “download” (descarga) de HTML 5

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Don’t Forget the “optgroup” Element
All You Need to Know About the HTML5 Data Attribute

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Crear un enlace de descarga en HTML es sencillo; agrega una etiqueta anchor y apunta al archivo en el atributo href. Algunos tipos de archivo, sin embargo, (tales como imágenes, .pdf, .txt, y .doc por ejemplo) no serán descargados. En cambio, se abrirán en el navegador.

Si tienes acceso del lado del servidor para tu sitio web hay algunas soluciones temporales que puedes usar, como configurar el .htacces, para descargar éstos archivos directamente. Si tu sitio está alojado con un servicio gratuito como  WordPress.com, Blogspot, o tal vez Github que no te permiten hacer eso, considera usar el atributo download.

Usando el Atributo "Download"

El atributo download es parte de la especificación HTML 5 y expresa un enlace como enlace de descarga más bien que un enlace de navegación.

El atributo download también te permite renombrar el archivo al descargarlo. Cuando el archivo reside en el servidor, especialmente si ha sido generado automáticamente, puede ser nombrado sistemáticamente con números y guiones, por ejemplo acme-doc-2.0.1.txt. Sería mejor para los usuarios recibir el archivo con un nombre más sensible cuando se descarga, quizá algo como: AcmeDocumentation (ver. 2.0.1).txt (no olvides la extensión del archivo).

Así es como ser vería en la práctica:

Inténtalo en la página de demostración, y deberías encontrar el archivo descargado con el nombre especificado en el atributo download.

Un Par de Notas:

  • Firefox sólo permite a los usuarios descargar archivos del mismo origen por seguridad. El archivo debe proceder de tu propio servidor o nombre de dominio, de otra manera será abierto en el navegador.
  • Mientras la descarga de archivos de distinto origen es permitido en Chrome y la versión más reciente de Opera (con Chromium/Blink), ambos ignorarán el valor del atributo. En otras palabras, el nombre del archivo continuará sin cambio.

Proporcionando una Alternativa

Al momento de escribir éste articulo, el atributo download aún no se implementa en Safari y (como podrías esperar) tampoco en Internet Explorer. Diciendo ésto, de acuerdo al sitio status.modern.ie, actualmente encabeza la lista de desarrollo de nuevas funcionalidades  y recibiendo una gran cantidad de votos.

Por el momento, podemos añadir una alternativa decente, como proporcionar instrucciones extra debajo del enlace de descarga para navegadores que no lo soportan. Para hacer eso, necesitarás descargar Modernizr con la prueba de la funcionalidad  download incluída.

Configura la compilación de Modernizr.

Luego podemos agregar el siguiente script.

El script probará si el navegador soporta el atributo download; si no agregará un nuevo <div> con la clase para propósitos de estilo así como el texto instructivo, y lo insertará inmediatamente debajo de cualquier enlace que tenga incluído el atributo download.

El texto instructivo aparece en Safari

Finalizando

El atributo download hace el manejo de enlaces de descarga muy conveniente para todo el que no tenga acceso a la configuración del lado del servidor. ¡Estoy ansioso de que Internet Explorer y Safari implementen pronto al atributo download!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.