Web – Indalcasa

Forzar la descarga de archivos en Apache con .htaccess e IIS con web.config

Cuando tenemos una página web, hay ocasiones en la que queremos que un fichero se descargue, por ejemplo si queremos hacer un sistema de almacenamiento tipo dropbox o simplemente unos pdf que tenemos en nuestra web. Normalmente cuando tenemos un archivo como un pdf, tradicionalmente este siempre se descargaba al abrirlo, pero con los avances en los navegadores, cada día mas potentes, nos dan previsualizadores de pdf, por lo que ya por defecto no se descarga porque los vemos online.

En este ejemplo hablo de pdf, pero se puede llevar a cualquier tipo de archivo, incluso un .html. Un archivo pdf tiene como MIME application/pdf, pero ¿Qué es un MIME? Un MIME es un estándar que define tipos de ficheros en base a una categoría y una subcategoría, por ejemplo, un pdf de tipo application/pdf quiere decir que es un archivo de aplicación del tipo pdf. Otros ejemplos de MIME son de imágenes como el image/jpeg o de texto en html text/html. Cuando un navegador abre un pdf, el servidor tiene por defecto configurado indicar que el archivo es de tipo application/pdf que se indica en la cabecera de http Content-Type.

Tras esta breve explicación, a veces pasa, que no todos los navegadores tienen visores de pdf, por los que algunos como pasa con algunas versiones de Firefox o Internet Explorer se descarguen los archivos, mientras que Safari o Chrome los visualicen online. Pero claro, este comportamiento no es muy elegante ya que quizás sea necesario que se comporte igual en todos los navegadores y tengamos que hacer que siempre se descargue el archivo y esto ya depende del servidor.

Para forzar la descarga de archivos, como el ejemplo que tratamos, un .pdf, tendremos que redefinir un MIME asociado a una extensión, es este caso diremos que es un octet-stream o un stream de bytes (un archivo binario). Al entender el navegador, que el archivo se trata de un archivo binario, no intentara leerlo sino que lo descargará independientemente de la extensión que tenga.

Forzar la descarga de archivos en Apache con .htaccess

Tan solo tenemos que añadir una nueva entrada AddType donde definiremos que los archivos .pdf son binarios y por tanto el navegador los descargará:

AddType application/octet-stream .pdf

Forzar la descarga de archivos en IIS con web.config

Al igual que con apache, deberemos indicar al servidor que el tipo de archivo .pdf es un binario:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".pdf" mimeType="application/octet-stream" />
    </staticContent>
  </system.webServer>
</configuration>

Forzar la descarga de archivos en Apache con .htaccess e IIS con web.config Leer más »

Placeholder en los input con HTML5 y como darles estilo a los placeholder de los input desde css3

Una gran mejora enfocada a formularios que trae de la mano HTML5 y CSS3 es el uso de placeholder. Para quien no lo conozca, un placeholder es ese texto que aparece por defecto en un campo de texto y que en el momento que empezamos a escribir desaparece. Se suelen utilizar en formularios con un texto «escriba aquí su nombre» o «su búsqueda», etc. y con el uso de javascript, se ocultaba el texto al empezar a escribir. Con la aparición de HTML5, los navegadores empezaron a implementar esta nueva funcionalidad.

Utilizar un placeholder no tiene misterios ni secretos y se pueden utilizar tanto para las cajas de texto como las contraseñas, es decir, en input type text e input type password. Para implementar esta nueva mejora, es tan sencillo como añadir un nuevo atributo placeholder al elemento input con el texto que queramos que muestre en pantalla. A continuación os muestro un formulario de login como ejemplo de como se utilizarían estos nuevos atributos:

<form>
  <input class="user" type="text" placeholder="Usuario" />
  <input class="pass" type="password" placeholder="Contraseña" />
  <input type="submit" />
</form>

¿Es sencillo verdad? Ahora vamos a complicarlo un poco, vamos a darle estilos. Todo el mundo sabe como darles estilos a un elemento, en este caso a un input, pero…. ¿Cómo dar estilos a un placeholder? Tan solo hay que utilizar unos selectores de css especiales porque aún no estan soportados oficialmente por los navegadores, así que funcionan a modo de extensiones experimentales, como el moz-border-radius que lleva unos 7 años en modo experimental. En este caso utilizaremos 2 extensiones, una para webkit (chrome, safari, etc) y otra para mozilla (firefox). Las extensiones son: -webkit-input-placeholder y -moz-placeholder. Os pongo un ejemplo:

.user::-webkit-input-placeholder, .user::-moz-placeholder {
  color: blue;
}

.pass::-webkit-input-placeholder, .pass::-moz-placeholder {
  color: red;
}

Ahora tenéis un formulario de login la mar de mono, con los placeholder azules para el usuario y rojo para la contraseña. Espero que os sirva de ayuda para hacer formularios mas bonitos con HTML5.