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>

Ordenar los bundles de ASP.Net MVC

Si alguna vez habeis intentado hacer un gran proyecto con ASP.Net MVC, vereis que utilizar los bundles para incluir el código tanto javascript (ScriptBundle) como css (StyleBundle) en nuestra página es muy útil ya que nos ofrece diferentes formas de tratar los archivos a incluir, uno de mis favoritos es unificar todo el bundle compilado y minimizado. Todo parece un camino de rosas, poder agrupar todos nuestros css y javascript en una sola linea incluyendo archivos o directorios.

No todo es maravilloso y aunque Microsoft suele hacer las cosas bastante bien, siempre se deja algún extraño por el camino. En este caso el extraño es el orden en que se cargan los archivos en la página usando Bundles. Cuando tenemos multitud de archivos javascript o css por ejemplo, se da el caso en que no todos los archivos se cargan en el orden en que lo incluimos. No se si tiene algo que ver mezclar inclusiones por archivos y directorios a la vez, pero no mantiene el orden igual. Es una locura, puesto que aparentemente todo sigue un orden, pero cuando tenemos una docena de archivos javascript o css, a veces hay alguno que se descoloca. A mi me pasó con backbone y underscore, que como sabreis quien haya trabajado con estas librerias, backbone requiere de underscore y si no esta incluido previamente provoca un error.

Lo primero que tenemos que hacer es crear una nueva clase para hacer el IBundleOrderer.OrderFiles que ordene los bundles, en nuestro caso, realmente no queremos que ordene sino que los muestre en el orden en que los escribimos. La clase en cuestión sería:

public class UserDefinedBundleOrderer : IBundleOrderer {
    public virtual IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files) {
        return files;
    }
}

Una vez tengamos nuestra clase IBundleOrderer, solo deberemos indicar a nuestro bundle, bien sea un ScriptBundle, un StyleBundle o un Bundle genérico, que utilice como Orderer nuestra clase que se encarga de la "ordenación" o en este caso, dejar las cosas como están. Lo haremos con el Bundle.Orderer como se muestra en el ejemplo:

myBundle.Orderer = new UserDefinedBundleOrderer();

Y ahora os dejo un ejemplo real sacado directamente de un proyecto propio. Así quedaría todo el archivo completo. Podemos ver como el BundleConfig donde definimos la carga de Bundles, tenemos un StyleBundle que cargará nuestros css, mientras que el ScriptBundle cargará nuestras librerías javascript y es a esta clase donde aplicamos nuestra clase para la ordenación de Bundles.

using System.Collections.Generic;
using System.IO;
using System.Web;
using System.Web.Optimization;

namespace MyWeb {
  public class BundleConfig {
    public static void RegisterBundles(BundleCollection bundles) {
      BundleTable.EnableOptimizations = true;

      bundles.Add(new StyleBundle("~/assets/css").Include(
        "~/Content/css/dark-hive/jquery-ui.css",
        "~/Content/css/bootstrap.css",
        "~/Content/css/site.css"
      ));

      ScriptBundle libs = new ScriptBundle("~/assets/libs");
      libs.Orderer = new UserDefinedBundleOrderer();
      libs.Include(
        "~/Scripts/libs/jquery-1.8.2.js",
        "~/Scripts/libs/jquery-ui-1.8.24.js",
        "~/Scripts/libs/jquery-ui.datepicker.es.js", 
        "~/Scripts/libs/underscore-1.4.1.js",
        "~/Scripts/libs/backbone-0.9.2.js",

      bundles.Add(libs);
    }
  }

  public class UserDefinedBundleOrderer : IBundleOrderer {
    public virtual IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files) {
      return files;
    }
  }
}

Espero que os sirva de ayuda.

Overflow scroll fluido para safari mobile

Algunos desarrolladores que hacemos webs para dispositivos móviles como puede ser un iPhone o un iPad, a veces nos encontramos con un gran problema y es que si queremos hacer un scroll horizontal funciona pero no queda muy fluido. Supongamos que tenemos una pequeña página y a modo de appstore, queremos tener un cuadro que tenga varias capturas de pantalla o imágenes y que entre las imágenes, hemos hecho un scroll. Si probamos esto en un iPad o un iPhone, veremos como el scroll no es muy fluido, va como a tropezones, pero la solución es bien fácil, solo hay que cambiar un pequeño estilo de CSS.

Para solucionar esto podemos utilizar -webkit-overflow-scrolling: touch; para indicarle a safari mobile que queremos hacer un scroll con el dedo y de esta forma, el scroll ira fluido y no se trabará.

Os dejo un ejemplo de como quedaría:

Mobile test

Cambiar los saltos de linea rn de Windows a n de Linux, Unix, Mac OSX

Quienes tenemos que trabajar con código fuente entre varios sistemas operativos, a veces nos encontramos con un mas que desagradable problema, y es que los saltos de linea se desvirtuan. Al trabajar desde un sistema operativo nix, como pueden ser: Linux, Unix, Mac OSX (si ya se que es un Unix pero es por dejarlo claro) y mover esos ficheros a un Windows, salvo que editemos los ficheros con el avanzadísimo sistema del notepad, no tendremos mayores complicaciones. Realmente, si editamos a la inversa, es decir, llevando el archivo desde Windows a Mac OSX o a Linux, no tendremos tampoco muchos problemas, ya que los sistemas están preparados para soportar los saltos de linea. El problema real radica en los sistemas de control de versiones.

Pongo en situación para quien no lo conozca. En los sistemas operativos hay un caracter especial que determina el salto de linea, lo que ocurre cuando pulsamos la tecla intro en un editor de texto, como si de una maquina de escribir, baja un nivel, hasta la siguiente linea. El caracter de salto de linea se representa con n. Ahora vayamos a Windows y su similitud con las máquinas de escribir. En Windows no basta con hacer un salto de linea n, sino que ademas hay que hacer un retorno de carro. Probablemente muchos no sepan que significa un retorno de carro representado con r pero viene de cuando en las máquinas de escribir antiguas llegabas al final de la linea, con una palanca que había en el extremo, el carro (donde se posiciona para escribir en el papel) se desplazaba hasta el principio de la linea. Por tanto en Windows, el salto de linea se representa con rn es decir, retorno de carro (volver el cursor al principio de la linea) y un salto de linea.

Es por esto, que cuando tenemos un sistema de control de versiones como puede ser GIT o SVN y archivos de diferentes sistemas nos podemos encontrar con el problema de que nos dice que el 100% del archivo ha cambiado, solo porque ha cambiado el salto de linea y entiende que es una linea nueva. Esto por ejemplo pasa con el cliente de consola de GIT por poner un caso, pero ocurre en mas lugares. La solución es muy fácil, solo tenemos que ejecutar un script que nos corrija los molestos saltos de linea de Windows de la siguiente manera:

perl -i -pne "s/rn/n/g" archivo-a-corregir.html

Donde le decimos a perl que recorra cada linea del archivo en modo sed y que nos sustituya los rn de Windows por los n de Linux/Mac OSX. También podemos utilizar el comando sed tal que:

sed -i "s/rn/n/g" archivo-a-corregir.html

Cual utiliceis es a gusto de cada uno. Quizas el sed sea mejor, puesto que al ser un comando del sistema operativo y no perl directamente a alguno le gusta mas.

Desactivar el scroll vertical en apps de phonegap

Al hacer una app con phonegap, nos encontramos con que el scroll horizontal se desactiva fácilmente, ya que phonegap, al tener un webview, este se adapta a nuestro html y si ademas eliminamos la opción de zoom con los scale

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimun-scale=1, user-scale=no" />

Resultará curioso como al probar nuestra aplicación, horizontalmente es estática, pero cuando deslizamos el dedo de arriba hacia abaja, vemos un efecto cuanto menos curioso y es que se desliza como si fuera una página web normal y corriente, es decir, nos aplica un scroll vertical como el navegador. Os pongo una imagen para que veáis lo que digo:

Esto es muy fácil de arreglar. Tan solo tenemos que irnos a nuestro proyecto de phonegap, concretamente al archivo Cordova.plist, que lo podemos encontrar de 2 formas:

  • Xcode: raíz del proyecto > Resources > Cordova.plist
  • Finder: raíz del proyecto > [Nombre del proyecto] > Cordova.plist

Ahora, dependiendo de si lo editamos desde Xcode o con otro editor veremos algo como lo siguiente:

Tan solo deberemos poner el valor del UIWebViewBounce a NO en Xcode o a false en el xml del plist y asunto arreglado, al intentar hacer scroll vertical, ya no se deslizará fuera de la pantalla.

El porque del estilo Metro y Windows 8, cuando debemos de actualizar nuestro navegador

De casualidad y haciendo unas pruebas para una web, di con la clave del por que del diseño que se utiliza en Windows Mobile y en las futuras versiones a partir de Windows 8 en escritorio. Los diseñadores de Redmon, se les ocurrió la idea de copiar un framework de fronted como puede ser bootstrap de twitter, tras pensarlo deliveradamente, decidieron entrar en la web de bootstrap con la versión en ese momento de Internet Explorer.

Aunque en el momento ya estaba Internet Explorer 9, como iba a ser utilizado para Windows 8, decidieron entrar con la versión de Internet Explorer 8 (por eso de hacer el honor al 8) y se encontraron una agradable sorpresa y es que el diseño les encanto. Pero ojo, no penséis si vais corriendo a la web de bootstrap vais a ver lo mismo que ellos vieron, nada mas lejos de la realidad. Lo que verían estos diseñadores eran cajas cuadradas, de colores claros, elegantes y lisos. Nada de degradados, brillos y efectos. Os dejo una captura de como se ve la web en Internet Explorer 8 y os animo a entrar con vuestro navegador favorito, ya sea Chrome, Firefox, Safari, etc.

Ni que decir tiene que es una chorrada de las típicas que se le ocurren a uno cuando lleva demasiadas horas trabajadas y que la interfaz Metro, Windows 8 o ModernUI como la llaman (ya que con Metro tienen un pleito de marcas registradas), es una interfaz que aunque para mi gusto tengo otras preferencias con mas curvas, no es desagradable a la vista (aunque si algo extraña). Por supuesto todo tiene su por que y esta interfaz no es menos.

Espero que por lo hemos os haya sacado una sonrisa.

Video sobre el jQueryIO acerca de buenas practicas con jQuery

El otro día tuve la suerte de estar en el jQueryIO junto a Miguel Angel Alvarez de desarrolloweb.com y Quique Fernández. Hicimos una pequeña charla hablando un poco sobre buenas practicas a la hora de trabajar con jQuery y como mejorar el rendimiento de nuestras aplicaciones web.

Una parte de lo que se habló, esta publicada en la web en algunos artículos como: Guía de buenas prácticas para aumentar el rendimiento de jQuery o Selectores dobles con JQuery, aumentando el rendimiento de JQuery

Os dejo el video de la charla para quien quiera echarle un vistazo y deje sus opiniones:

Introducción a RaphaelJS

RaphaelJS es una librería de javascript para desarrollar gráficos y animaciones vectoriales en SVG y VML. ¿Qué es SVG? ¿Por qué vamos a utilizar gráficos vectoriales? ¿Para qué utilizar una librería para trabajar con SVG? Todas estas preguntas son las que debemos comprender antes de empezar a trabajar.

Gráficos Vectoriales Escalables o abreviado del ingles SVG (Scalable Vector Graphics) es un estandar propuesto en el año 2001 por el W3C para estandarizar los gráficos vectoriales. Allá por el año 1998, se presentaron 2 propuestas de gráficos vectoriales, por un lado se presento PGML por parte de Adobe, IBM, Netscape (Mozilla y Firefox) y Sun (Java, ahora parte de Oracle). Por otra parte se presento VML que tuvo más éxito por parte de Autodesk (creadores de Autocad), Macromedia (creadores de flash y posteriormente comprado por Adobe) y Microsoft. Normalmente cuando se hacen varias propuestas de este estilo al W3C, se acaba decantando por una en particular, pero en este caso, se optó por el camino del medio y el W3C propuso SVG que no es mas que la mezcla de VML + PGML.

Con SVG se crea un documento XML que puede ser utilizado tanto en un archivo independiente con extension *.SVG como embebido dentro de una página web al ser un XML y puede ser manipulado con javascriptSVG tiene su propio árbol DOM similar al HTML por lo que fácilmente desde javascript podremos capturar eventos, cambiar sus caracteristicas, así como dar estilos desde CSS.

Una vez tenemos la base, podemos entender mejor el papel de RaphaelJS en todo esto. RaphaelJS es una librería que nos promueve de una gran cantidad de objetos y métodos para encapsular los documentos SVG. Esta necesidad vino dada en su dia por los navegadores antiguos que interpretaban VML y los mas modernos que fueron interpretando SVGRaphaelJS genera los documentos dinámicamente en uno u otro lenguaje, dependiendo de lo que soporte el navegador, siempre dando prioridad al estandar SVG.

Si todos los navegadores actuales soportan SVG ¿Por qué utilizar una librería como RaphaelJS y no SVG nativo? Muy sencillo y es que cuando queremos generar unos gráficos en SVG dinámicamente, con animaciones y demás, necesitamos de un respaldo de utilidades que nos faciliten en todo lo posible el trabajo, ya que el objetivo es ser productivos. Por ejemplo, para quienes conozcan jQuery, todo el mundo sabe hacer un document.getElementById, pero siempre acabamos haciendo $("#id") porque es más cómodo, ademas de ofrecernos herramientas muy útiles. Con RaphaelJS pasa lo mismo, si queremos generar una animación en SVG, nos ofrece funciones con calbacks para generar animaciones dinámicamente con varias funciones easing o podemos guardar los objetos de SVG según los vayamos creando para reutilizarlos mas adelante, ademas de ser un poco mas sencillo de utilizar que SVG a pelo.

Este contenido y mas ira apareciendo en el curso de Raphael JS - Gráficos vectoriales con javascript y mas en concreto en el primer capítuo: Introducción a RaphaelJS.

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.

Twitter Bootstrap el framework frontend the twitter

Hoy os quiero hablar de una herramienta web muy útil. Todos conocemos los framework de programación en distintos lenguajes, que si pylons, django, aspnet mvc, etc. Pero ¿Qué pasa con los framework de diseño? En internet podemos encontrar miles de themes gratuitos para utilizar en nuestra página, pero pocos son los que podemos utilizar como base genérica y aquí es donde aparece bootstrap.

Bootstrap es un framework de maquetación web desarrollado por Twitter y que de hecho se utiliza en este servicio, así como en otros muchos como ohloh o masterbranch por poner un par de ejemplos. Desde hace bastante tiempo lo utilizo en mis proyectos personales ya que provee de una buena base de estilos y estructura genéricos.

Bootstrap incorpora:

  • Scaffolding: estilos globales que resetean el tipo de body, enlaces, sistema de grids y layouts.
  • Base CSS: estilos para elementos comunes de html como tipografía, tablas, formularios y botones. Incluye Glyphicons, una librería de iconos libre.
  • Componentes: estilos comunes como tabs, barras de navegación, breadcrumbs, encabezados, etc.
  • Plugins de javascript: componentes comunes de javascript como tooltips, modals, etc.

Lista de componentes:

  • Grupo de botones
  • Botones desplegables
  • Tabs y listas de navegación
  • Barras de navegación
  • Etiquetas
  • Encabezados y destacados
  • Thumbnails
  • Alertas
  • Barras de progreso
  • Modals
  • Desplegables
  • Tooltips
  • Accordion
  • Sliders

Tenéis mas información en la web de Twitter Bootstrap.

Indalcasa iLearning, cursos de formación online de tecnología

Entre tantas cosas que me rondan siempre por la cabeza hay una que siempre me ha rondado y es la formación. En indalcasa, intento escribir artículos interesantes, algunos polémicos, otros normalitos, pero intento que todos sean productivos. Siempre he visto un gran problema y es que si escribo un post demasiado largo, es aburrido para leerlo y se hace pesado escribirlo, si es demasiado corto, no tiene tanta productividad para los lectores. Por otro lado un blog es eso, un log de lo que escribes, por lo que salvo que entres desde google, vas a encontrar un popurri de cosas que pueden interesarte o no y aquí es donde surge iLearning.

Me he sacado de la manga Indalcasa iLearning, iLearning es un servicio para dar cobertura al blog, básicamente es una página donde crear cursos online de tecnología actualizados con los contenidos que van surgiendo del blog. ¿Por que crear un centro de contenidos si ya esta el blog? Pues bien fácil, porque si escribimos por ejemplo como hacer templates con wordpress, se va a separar en varios artículos, que si se escriben seguidos a la gente les será de utilidad, pero aún así, tienes que ir escribiendo enlaces al pie del artículo indicando cuales son los otros artículos. También si vienes de fuera, al ser artículos sueltos, es mas difícil de un vistazo rápido, ver todo el contenido de los diferentes "cursos".

De momento, Indalcasa iLearning será una versión estática en HTML hasta que vaya teniendo tiempo de dinamizar el contenido. Espero que os guste el resultado, mientras tanto podéis ir viendo las actualizaciones en la web de iLearning.

Organización de trabajo, técnicas pomodoro e indalo

Hace unas semanas estuve en Italia y buscando por internet que significaba pomodoro (tomate), me encontré de casualidad con la técnica pomodoro, que me pareció suficientemente curiosa y que sin saber ya utilizaba. Mirando en la wikipedia, la técnica pomodoro es una técnica en la que nos organizamos el trabajo en pequeñas tareas y nos tomamos descansos entre tareas. Por ejemplo, pongamos una tarea que nos intentamos dividir en tareas menores y nos ponemos unos tiempos para realizar cada tarea de 25 minutos. Con un temporizador, contamos el tiempo y cada 25 minutos, nos tomamos un descanso de 5 o 10 minutos y tras realizar 4 descansos podemos tomarnos un descanso mas largo de 15 o 20 minutos. La verdad es que es una buena técnica para los que vamos  trabajar durante muchas horas seguidas y no queremos morir en el intento.

La variante que yo utilizo es lo que voy a llamar la técnica indalo y es parecida a la técnica pomodoro. En la técnica indalo se intenta defragmentar las tareas en tareas muy pequeñas y relativamente rápidas, cada 4 o 5 tareas, que nos llevaran una media hora, tomamos un descanso de 10 minutos, al ser posible levantarnos del sitio y si queremos mirar algo por internet que sea en otro ordenador. Cuando hacemos 3 o 4 ciclos, según lo cansados que estemos, tomamos una larga pausa de 20 o 30 minutos. Las idea es ser lo mas productivo posible por lo que si una tarea se nos complica y no es bloqueante para hacer otras tareas, pasaremos de largo y continuaremos con la siguiente tarea, de esta forma optimizamos el tiempo en hacer la mayor cantidad de tareas posibles en el menor tiempo.

La técnica indalo (así la he bautizado en honor al blog) la utilizo cuando voy a trabajar durante mucha cantidad de horas seguidas, por ejemplo un sábado que trabaje en casa 15 o 18 horas seguidas, por ello los prolongados descansos. El pasar de una tarea si se complica mucho, es por perspectiva y motivación; si no damos con una solución, al ser tareas muy atomizadas, quizás en un rato tengamos un punto de vista diferente y podamos resolver rápidamente la tarea y si no hay solución fácil, siempre tendremos tiempo para darle vueltas. Atomizar las tareas es muy importante ya que nos dará mucha motivación, si tenemos una larga tarea que nunca termina, nuestra moral estará por los suelos, pero si tenemos esa gran tarea dividida en 10 tareas mucho mas pequeñas, según vamos avanzando y completando tareas, al hacer un análisis nos levantara la moral y nos dará fuerzas para seguir a pesar de llevar muchas horas seguidas.