2 Cosas que no me gustan de Twitter Bootstrap

Vaya por delante que me parece que los chicos de Twitter han hecho, en líneas generales, un gran trabajo. Sobre todo me gusta su carrusel responsive, aunque no sea la opción más completa sí que es más que digna.
Sin embargo, no sé si es que no esperaban su propio éxito o si era desde el principio lo que pretendían, pero  están consiguiendo marcar un estándar de diseño, con sus cosas buenas (alguien que no tenga ni idea de diseño puede hacer una página resultona de manera bastante fácil) y sus cosas malas (si bien no se resta margen a la creatividad, han marcado una pauta de la que pocos se atreven a salirse, si no me crees, fíjate en los botones de las aplicaciones web, cuesta encontrar unos distintos a los de Bootstrap).
Por otro lado, otra cosa que tampoco impone Bootstrap es la utilización de marcado presentacional. ¿O sí? O, al menos, ¿hasta qué punto? No lo impone, pero lo promueve. Hoy por hoy, mediante los preprocesadores (Sass y Less, por ejemplo) es completamente prescindible (en realidad siempre lo ha sido) al poder reutilizar partes con marcado semántico. Pero es que, a pesar de la "amistad" que une a Bootstrap y Less, en su propia página utilizan classes como los que siguen para la barra superior:

• navbar-inverse: Para que el color de fondo sea oscuro

• navbar-fixed-top: Para fijarlos a la parte superior de la página y que no se mueva de ahí aunque se haga scroll

Nein, nein, nein. ¿Qué cojones hacemos a estas alturas del partido mezclando responsabilidades? HTML para contenidos, CSS para presentación y Javascript para comportamiento. ¿Es que no hemos aprendido nada? ¿A nadie le suena ya eso de hacer un HTML lo más semántico posible? ¿Damos la batalla por perdida? 

Y no me vale que me vengan ahora con que CSS3 y sus transition y animations se inmiscuyen en el comportamiento, y por muchos motivos, entre ellos:

• Es importante partir de una materia prima buena y ésta la compone el HTML
• Las animaciones realizables mediante CSS3 son sólo las más sencillas (¡¡¡no tenemos callbacks, por ejemplo!!!)
• Pero sobre todo: el acoplamiento entre CSS y Js es de por sí alto y esto no es algo fácilmente soslayable, porque las animaciones no son otra cosa que presentación dinámica de un elemento, por definición. Por el contrario, es posible (y deseable) dejar el HTML limpio de elementos presentacionales, al menos en la mayor parte de casos.

¿Quiero decir con esto que  Bootstrap es una mierda? ¡No! Pero hay que utilizarlo con cuidado: por ejemplo, en Sass sería suficiente con utilizar @extend para reutilizar el código y no incurrir en todos los problemas que conlleva lo anteriormente explicado. Less tiene su propia sintaxis, pero la idea es la misma: no utilizar marcado presentacional. Al menos cuando no sea imprescindible.

O si no, acabaremos con botones rojos que tendrán un class "azul", barras superiores con su class "fixed-bottom", etc. Pero estamos en 2012, eso ya es agua pasada... ¿o no?

Cómo elegir mi primera guitarra eléctrica

La elección de la primera guitarra eléctrica suele resultar complicada, por desconocimiento, por
falta de experiencia... Así que vamos intentar arrojar un poco de luz sobre la decisión desde nuestra experiencia.

En primer lugar, siempre que se elige algo, es importante tener claro cuál será el uso de ese algo: no es lo mismo
comprar un coche para moverse por ciudad que para hacerlo por pistas. Puede que los dos tengan calidades equivalentes,
pero cada uno está especializado en un tipo de terreno. Con las guitarras y sobre todo con las eléctricas, ocurre exactamente
lo mismo: cada una, por sus características, irá más orientada a un estilo u otro, siendo nuestro objetivo encontrar aquella
que mejor se adapte a nuestras necesidades.

Por otro lado, para entender de antemano las carácterísticas de una guitarra es necesario conocer las características de sus partes.
Entre las partes de las guitarras destacan:

• Madera: según el tipo de madera el sonido será más oscuro (propicio para acompañamientos o estilos pesados como el rock duro o el metal) o más claro (propicio para tocar solos y estilos como el blues o un rock más light).
  Las guitarras de caoba (como la Les Paul o la SG) suelen tener un sonido más oscuro, mientras que las de aliso (como la Stratocaster) suelen sonar más "cristalinas".
• Unión mástil-cuerpo: puede ser de más "oscuro" a menos y de más sustain a menos: atornillada, encolada o neck-through
• Electrónica (principalmente las pastillas): puede propiciar sonidos más de un estilo u otro. Por ejemplo, las pastillas simples suelen ser más útiles en blues o rock ligero, mientras que las dobes (o humbucker) suelen ser más útiles nuevamente para estilos más pesados.
  Existen guitarras que las combinan. Tampoco pueden obviarse las pastillas activas, que necesitan de una alimentación propia y están más pensadas para estilos pesados.
• Tipo de puente: básicamente puede ser fijo o flotante, cada uno con sus variantes. El puente flotante permite obtener sonidos imposibles de obtener de otro modo, pero si tu presupuesto es ajustado suele ser buena
  idea prescindir de él (el ahorro hará que el resto de componentes sean de mayor calidad y, además, los puentes flotantes baratos suelen producir problemas de afinación constantes).

Teniendo todo lo anterior en cuenta, veamos algunos consejos que pueden facilitar la elección de nuestra primera guitarra:

• Piensa qué sueles o te gustaría tocar y qué guitarras utilizan tus artistas favoritos.
• No te precipites si aún estás empezando, puede que Petrucci necesite 17 cuerdas, 500 trastes y un puente flotante de kriptonita, pero si tu presupuesto es ajustado
  vale más gozar de menor abanico de opciones y que éstas sean de mayor calidad.
• Invertir en una guitarra versátil te permitirá probar más variedad de sonidos y amplía las posibilidades de acertar con la compra, aunque no tenga tanta personalidad como una más específica.
• Los puentes flotantes de guitarras de bajo coste suelen dar muchos problemas, haciendo a la guitarra perder su afinación cada poquísimo tiempo. Mejor no invertir en uno de esos.
• No te dejes llevar por la estética.Sí, esa guitarra es muy tentadora visualmente, pero seguramente esa otra no tan guapa suene bastante mejor o tenga un sonido más parecido a lo que buscas.

Todo eso está muy bien, pero, seguramente, me pediréis ser más concreto, así que me voy a mojar:

1. Si no lo tienes claro vete a por un clásico: una tipo strato, una tipo teleca o una tipo Les Paul (o su hermana "pequeña" la SG). Las dos primeras son más para solos y estilos más ligeros y la última idónea para acompañamientos y estilos más pesados (esto no lo tomes al pie de la letra, Slash toca solos con una Les Paul y Ritchie Blackmore saca un sonido "gordísimo" de una strato...).
2. No sabría poner un límite claro, pero seguramente hasta 500€ tirando por lo bajo no encuentres un puente flotante decente, así que la cosa quedaría reducida a Telecaster o Les Paul (o una SG).

Espero haber ayudado un poco a aclarar alguna mente ;)

Prueba de Less CSS

Estos días he estado probando en un pequeño proyecto el lenguaje dinámico para hojas de estilo en cascada Less. Tal y como explican en el sitio web, Less es una opción más para optimizar el trabajo con CSS, que añade a las posibilidades de éste que añade variables, mixins, operaciones y funciones. Existen también otras alternativas como SASS, Blueprint, 960 grid, Compass, así como Less portado a otros lenguajes, como .Less para .NET Framework, aunque no todas sirven para lo mismo ni tienen el mismo nivel de implementación.
En cuanto a la experiencia, tengo que decir que no ha sido del todo satisfactoria. Me explico: la idea tiene un gran potencial, pero su aplicación no es tan buena como debería para utilizar un proyecto real a mediana o gran escala. Paso a contar mi experiencia.
Lo primero que hice, tras leer un poco sobre el tema fue instalar la gema de Ruby que permitía compilar hojas de estilo less, pero, tras comprobar que era una versión obsoleta y no mantenida, decidí decantarme por la versión en Javascript. Lo bueno de esta versión es que no hace necesario el tedioso paso de la compilación. Lo malo es que no conseguí hacerla funcionar ni en IE7, ni en IE8, ni en Ópera, ni en Chrome. Sorprendentemente sí funcionaba en Safari y en IE6 :S Pero bueno, como se trataba de un proyecto sencillo esto no me echó para atrás. Continué con el tema y al terminar y ponerme a preparar la versión de producción intenté compilarla a CSS con .Less (la versión para .NET) encontrándome con que no implementaba algunas funciones. Bueno, me bastó con copiar los estilos de la opción CSS > Ver código CSS de la Web Developer Toolbar del Firefox. Una vez en este punto, un reemplazo de las URL's de los recursos (te aparecen en términos absolutos, en plan file:///C:/....) me dejó la CSS limpia, lista y válida para entregar.

Conclusiones

Como ya he dicho, se trata de una implementación interesantísima y cuyo uso, probablemente se convierta en generalizado. Uno de los usos más interesantes sería la generación de plantillas, pues con unos pequeños cambios podría obtenerse una apariencia bastante diferente. Además, en combinación con otros proyectos, como 960 Grid System la potencia aumenta enormemente, solucionando algunos de los inconvenientes originales de éste (el hecho de tener que usar marcado no semántico en el HTML). En resumen, resulta un proyecto interesante para empezar a trastear un poco, incluso para algún uso medianamente serio por parte de algún osado/a :D, pero que necesita aún algo de madurez para poder aspirar a un uso serio y extensivo.

Edito: .LESS sí implementa las funciones de color, pero reciben otros nombres, por lo que el código less deja de ser compatible.

Libro: "Sangre y champán. La vida y época de Robert Capa"

No voy a descubrir a nadie en este momento que Capa es uno de los grandes fotógrafos de lo que va de Historia (sí, con mayúscula). Es, además, y para quien aún no lo sepa, uno de los mejores fotógrafos de guerra, habiendo cubierto algunas de las más sangrientas del siglo XX, como la II Guerra Mundial o la Guerra Civil Española. Pues bien, interesado como suelo estar en el tema de la historia del siglo XX y en la fotografía y particularmente en la obra de Capa, me decidí a leer esta biografía sobre el mismo.
En primer lugar, me gustaría resaltar que se trata de un libro que engancha prácticamente desde la primera página. Realmente hacía tiempo que no leía un libro tan rápido y con tantas ganas. El autor, Alex Kershaw, consigue un ritmo trepidante, primero a ritmo de las balas y más tarde hablando sobre la bohemia vida de Capa. Sin embargo, tengo que reconocer que tiene también algunos defectos, como por ejemplo que no incluye ninguna fotografía hecha por el propio Capa. También existen algunas anécdotas difíciles de creer y que no resulta difícil encontrar por Internet. Otras anotaciones no quedan muy claras, o su sentido concreto al sacarlas de contexto... Y sin embargo, es un libro que tengo que decir que me alegro de haber leído.
En resumen, se trata de un libro muy entretenido y fácil de leer, que engancha, aunque algunos aspectos muy puntuales confundan un poco. Me parece especialmente recomendable para personas interesadas en la fotografía y la historia del siglo XX.

Séneca: sobre la brevedad de la vida (on the shortness of life)

Lee los clásicos. Es un consejo universal y cada día más manido en los inciertos tiempos que corren. Y no es un consejo vano. En cualquier tiempo. Lo cierto es que cuando vi este libro en una estantería me llamó la atención por el subtítulo. Una sencilla frase que hacía las veces de presentación y que ya era una perla en sí misma: Life is so long if you know how to use it. Tengo que reconocer que la lectura es algo lenta, debido tanto a la temática (filosofía) como al hecho de estar leyendo en inglés, pero con un pequeño esfuerzo fui acostumbrándome y fui entresacando varias ideas interesantes. Sorprendentemente, muchos de los temas que trata tienen completa vigencia actualmente y, en particular, la idea más interesante fue la siguiente: de la persona que ha vivido más tiempo se puede decir que ha existido más pero no que ha vivido más. Hace unos pocos años, recuerdo en un foro que se debatía este mismo tema y cual fue mi sorpresa al ver que unos 2000 años antes ya se había encontrado una respuesta tan precisa. En realidad, no es tan sorprendente cuando se trata de un tema tan universal a los seres humanos de todos los tiempos como la vida y la muerte.
En resumen, me parece una lectura muy recomendable y bastante distinta a las más populares hoy día, especialmente porque invita a reflexionar sobre temas importantes y materializa muchos pensamientos que probablemente ya sean nuestros aunque todavía no les hayamos dado forma. Una invitación a disfrutar de la vida lejos de entretenimientos banales que en su día sería el circo y hoy, probablemente, la televisión, lejos de modas, de convenciones sociales y de todo tipo de ataduras.

Cómo validar el NIF mediante los controles de validación de ASP.NET

Ayer publiqué una entrada con un script que servía para validar el NIF de una persona mediante un javascript genérico. Veamos hoy cómo hacerlo utilizando controles de validación específicos de .NET.
En primer lugar, se crea un web site y dentro de éste un archivo aspx, por ejemplo, Default.aspx. Dentro de Default.aspx se inserta un formulario (lo normal es que venga por defecto) y en él se incluye una etiqueta (label) y un campo de texto (edit), por ejemplo como sigue:

<asp:Label ID="etiquetaNIF" runat="server" Text="NIF:"
AssociatedControlID="textoNIF"></asp:Label>
<asp:TextBox ID="textoNIF" runat="server" />

A continuación se añade un control de validación. Dado que el DNI es un tipo de validación muy específica que no puede validarse mediante expresiones regulares (recuerdo que la letra se calcula a partir de dividir el número en 23) debemos utilizar un Custom Validator, que añadiremos a continuación de lo anterior:

<asp:CustomValidator ID="CustomValidatorNIF"
runat="server" ErrorMessage="NIF incorrecto"
ControlToValidate="textoNIF" 
ClientValidationFunction="validanif" />

Como puede verse, los aspectos fundamentales son:

• El ID: debe asignarse un id también al control de validación
• Runat: debe asignarse al servidor
• ErrorMessage: es el mensaje que aparecerá cuando la validación falle
• ControlToValidate: el control a validar, en este caso textoNIF
• ClientValidationFunction: validanif
• OnServerValidate: En este caso no se ha utilizado un manejador de evento del lado del servidor porque el ejemplo está centrado en la parte del cliente, pero por motivos de seguridad se recomienda validar SIEMPRE en el lado del servidor las entradas de los usuarios

A continuación sólo nos falta añadir la función validanif al javascript de la página. Se recomienda que en un fichero externo y por los métodos habituales a tal efecto. El resultado sería:

///Calcula la letra del nif a partir del número
 function letranif(numero)
 {
  aLetras = new Array();
  aLetras[0] = "T" ;aLetras[1] = "R" ;aLetras[2] = "W" ;
  aLetras[3] = "A" ;aLetras[4] = "G" ;aLetras[5] = "M" ;
  aLetras[6] = "Y" ;aLetras[7] = "F" ;aLetras[8] = "P" ;
  aLetras[9] = "D" ;aLetras[10] = "X" ;aLetras[11] = "B" ;
  aLetras[12] = "N" ;aLetras[13] = "J" ;aLetras[14] = "Z" ;
  aLetras[15] = "S" ;aLetras[16] = "Q" ;aLetras[17] = "V" ;
  aLetras[18] = "H" ;aLetras[19] = "L" ;aLetras[20] = "C" ;
  aLetras[21] = "K" ;aLetras[22] = "E" ;   
  return aLetras[numero%23];
 }
 
 ///Lleva a cabo la validación del nif
 function validanif(source, args)
 {
  //Validación básica de formato
  var validformat = /^\d{8}([A-Z]|[a-z])$/;
  var numero;
  
  if (!validformat.test(args.Value))
  {
   args.IsValid = false;
   return;
  } 
   
  //Entrando en detalle
  numero = parseInt(args.Value.substring(0,8));
  
  //Si no es un número dar error
  if (isNaN(numero))
  {
   args.IsValid = false;
   return;
  }
   
  //Se comparan ambos resultados para validarlos
  if (letranif(numero)==args.Value.substring(8,9).toUpperCase())
   args.IsValid = true;
  else
   args.IsValid = false;
 } 

Como puede verse prácticamente planchado al método de ayer. La única peculiaridad a comentar es que se valida la letra tanto si es minúscula como si es mayúscula, aspecto a considerar según la aplicación.

Validar el NIF

Son múltiples los ejemplos existentes por internet de scripts que calculan la letra del DNI a partir del número. No así los scripts que realizan la validación. Así pues comparto mi encomiable esfuerzo :D por si a alguien le ahorra los 5 minutos que lleva hacerlo.

///Lleva a cabo la validación del nif
   function validanif(nif)
   {
    //Validación básica de formato
    var validformat = /^\d{8}([A-Z]|[a-z])$/;
    var numero;
    
    if (!validformat.test(nif))
     return false;

    //Entrando en detalle
    numero = parseInt(nif.substring(0,8));
    
    //Si no es un número dar error
    if (isNaN(numero))
     return false;
     
    //Se comparan ambos resultados y se devuelve
    return (letranif(numero)==nif.substring(8,9).toUpperCase());
   }
   
   ///Calcula la letra del nif a partir del número
   function letranif(numero)
   {
    aLetras = new Array();
    aLetras[0] = "T" ;aLetras[1] = "R" ;aLetras[2] = "W" ;
    aLetras[3] = "A" ;aLetras[4] = "G" ;aLetras[5] = "M" ;
    aLetras[6] = "Y" ;aLetras[7] = "F" ;aLetras[8] = "P" ;
    aLetras[9] = "D" ;aLetras[10] = "X" ;aLetras[11] = "B" ;
    aLetras[12] = "N" ;aLetras[13] = "J" ;aLetras[14] = "Z" ;
    aLetras[15] = "S" ;aLetras[16] = "Q" ;aLetras[17] = "V" ;
    aLetras[18] = "H" ;aLetras[19] = "L" ;aLetras[20] = "C" ;
    aLetras[21] = "K" ;aLetras[22] = "E" ;   
    
    return aLetras[numero%23];
   }