Facturas en CSS

Vía css-tricks veo un sencillo método para crear facturas sólo con CSS. ¿Y por qué usar este método en lugar de un software específico? Bueno, gracias a esto sólo necesitas el navegador para poder crear tus facturas. Y qué demonios, es muy ilustrativo el ejemplo. ¡Qué de cosas se pueden hacer con textarea! Además, es fácil de imprimir, y pasarlo a PDF es algo trivial.

Ver demo

Botones súper increíbles con CSS3 y RGBA

CSS3 ya está aquí, y ha llegado para quedarse. Gracias a él, podemos crear increíbles efectos en navegadores modernos (Teniendo en cuenta un enfoque de graceful degradation). En éste artículo voy a mostrar cómo, desde ZURB, han creado unos botones CSS que realmente son súper increíbles. Accede a la página del artículo para ver demostraciones en vivo.

Botón en ancla »

Botón en ancla 2 »

La magia está en el CSS:

.button{
   background:#222 url(/wp-content/uploads/2009/12/alert-overlay.png) repeat-x 0 0;
   display:inline-block;
   padding:5px 15px 6px;
   color:#fff !important;
   font-size:13px;
   font-weight:bold;
   line-height:1;
   text-decoration:none;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   -moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);
   -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);
   text-shadow:0 -1px 1px rgba(0,0,0,0.25);
   border-bottom:1px solid rgba(0,0,0,0.25);
   position:relative;
   cursor:pointer;
   overflow:visible;
   width:auto
}

button::-moz-focus-inner{
   border:0;
   padding:0
}

.button:hover{
   background-color: #111111;
   color: white
}

.button:active{
   top:1px
}

Una sombra a la caja, otra al texto, un borde redondeado, y de fondo una imagen png que realiza el degradado (Se puede realizar también con CSS en Webkit). Una pasada hacer todo esto sólo con CSS, ¿no?

¡Pero espera! ¡Ahí no queda la cosa! ¿Qué ocurriría si cambiásemos el color de fondo sobre el que está el botón? La sombra se vería “rara”, al igual que el color del borde.

Y lo mismo ocurriría con la sombra del texto si cambiásemos el color de relleno del propio botón. ¿Cómo se soluciona? Ahora es cuando llega al rescate la A de RGBA Por ejemplo, en la sombra de la caja, lo hemos definido como:

rgba(0,0,0,0.25)

Es decir, color negro al 25% de transparencia. De ese modo, la sombra siempre “lucirá” del mismo modo usemos el color que usemos.

Espero que os haya gustado tanto como a mí.

Vía Smashin Magazine,

Una semana en Mac

Hace 3 semanas encargué un MacBook Pro de 13″. Lo cierto es que por poco no lo hago, ya que no aceptaban mi tarjeta ¿? y tuve que hacerles una transferencia. Hace ya siete días que me llegó. Algunos me dijeron que “Es una semana de dolor”, como Álex, mientras que otros dijeron que “Es una tarde de dolor”, como Jaime. En mi caso creo que se ha tratado de una semana.

La curva de aprendizaje es más bien rápida, y se respira mucho aquello de que en Unix todo son ficheros Por ejemplo, los “accesos directos” a las aplicaciones son realmente directorios dentro del directorio /Applications. ¡Qué elegante! Sin embargo, ha habido muchas cositas a las que no me hacía en un primer momento.

Ratón

El touchpad es una verdadera pasada. No tiene botones, pues puedes pulsar en (casi) todo el Touchad, y por defecto está desactivado el clic sencillo tocándolo. Pero la verdadera pasada es lo grande que es, y la cantidad de cosas que se pueden hacer con él. Por ejemplo, un toque con dos dedos despliega el menú contextual (Como el clic derecho). Arrastrando dos dedos puedes moverte de arriba a abajo o de izquierda a derecha. Acercando o alejando los dedos puedes hacer zoom in o zoom out respectivamente. Hay acciones también para 3 y para 4 dedos. Realmente útil.

Teclado

Ésto es lo que más me está costando. En concreto:

• La tecla Alt derecha no está inmediatamente después del espacio, sino que hay una tecla Cmd entre medias. A veces me pierdo.
• No existen teclas de “Av Pag”, “Reg Pag”, “Inicio”, “Fin”, “Ins” o “Supr”. ¿Cómo lo hacemos entonces?
  • Av Pag – “fn + flecha_abajo”
  • Ret Pag – “fn + flecha_arriba”
  • Ins – Jamás la he usado, no sé cómo emularlo.
  • Supr – “fn + retroceso”
  • Inicio – “ctrl + a”
  • Fin – ¿?
• Navegación por formularios y diálogos. Simplemente la tecla Tab no funciona. No accede a los botones, ni a los checkbox, ni a los radios… Afortundamente desde las preferencias del teclado se puede “corregir” este comportamiento.
• Acceso a la barra de menú. En Linux si pulsas la tecla Alt, accedes al menú, y dispones de atajos con Alt + <letra subrayada> de cada item del menú. En OSX esta opción estaba “escondida”: Para acceder a la barra de menú con el teclado se debe pulsar ctrl+F2, y después movernos bien con las flechas, bien mediante autocompletado. Curioso.

Navegador de ficheros

El Finder… Bueno, no está mal. Pero se me hacen raras bastantes cosas, como por ejemplo que no se pueda navegar por el disco duro real (Te muestra sólo algunas carpetas amablemente renombradas al castellano), o como su manejo (Para acceder a una carpeta no funciona “Intro”. Debes usar Alt+Flecha_Abajo.

Echo de menos también una barra de direcciones multiprotocolo, así como soporte para SFTP por defecto. Por lo pronto he recurrido a macfuse. Evidentemente noslomismo… Lo suyo es desde el propio navegador de ficheros poder acceder por defecto a servidores SFTP almacenando la contraseña en el llavero.

En general, una pasada

Es una pasada de ordenador por muchas razones:

1. Tienes shell Bash
2. La instalación de aplicaciones se sencillísima.
3. En términos generales creo que la curva de aprendizaje es más baja que en otros SO.
4. Por supuesto, que es un UNIX.
5. La pantalla se ve nítida desde casi cualquier ángulo.
6. El touchpad es una pasada.
7. Es tremendamente intuitivo. Haciendo “lo que te pide el cuerpo” llegas a las soluciones.
8. Y por supuesto, va de tiro.

En defensa de los derechos fundamentales en Internet

Ante la inclusión en el Anteproyecto de Ley de Economía sostenible de modificaciones legislativas que afectan al libre ejercicio de las libertades de expresión, información y el derecho de acceso a la cultura a través de Internet, los periodistas, bloggers, usuarios, profesionales y creadores de internet manifestamos nuestra firme oposición al proyecto, y declaramos que:

1. Los derechos de autor no pueden situarse por encima de los derechos fundamentales de los ciudadanos, como el derecho a la privacidad, a la seguridad, a la presunción de inocencia, a la tutela judicial efectiva y a la libertad de expresión.
2. La suspensión de derechos fundamentales es y debe seguir siendo competencia exclusiva del poder judicial. Ni un cierre sin sentencia. Este anteproyecto, en contra de lo establecido en el artículo 20.5 de la Constitución, pone en manos de un órgano no judicial -un organismo dependiente del ministerio de Cultura-, la potestad de impedir a los ciudadanos españoles el acceso a cualquier página web.
3. La nueva legislación creará inseguridad jurídica en todo el sector tecnológico español, perjudicando uno de los pocos campos de desarrollo y futuro de nuestra economía, entorpeciendo la creación de empresas, introduciendo trabas a la libre competencia y ralentizando su proyección internacional.
4. La nueva legislación propuesta amenaza a los nuevos creadores y entorpece la creación cultural. Con Internet y los sucesivos avances tecnológicos se ha democratizado extraordinariamente la creación y emisión de contenidos de todo tipo, que ya no provienen prevalentemente de las industrias culturales tradicionales, sino de multitud de fuentes diferentes.
5. Los autores, como todos los trabajadores, tienen derecho a vivir de su trabajo con nuevas ideas creativas, modelos de negocio y actividades asociadas a sus creaciones. Intentar sostener con cambios legislativos a una industria obsoleta que no sabe adaptarse a este nuevo entorno no es ni justo ni realista. Si su modelo de negocio se basaba en el control de las copias de las obras y en Internet no es posible sin vulnerar derechos fundamentales, deberían buscar otro modelo.
6. Consideramos que las industrias culturales necesitan para sobrevivir alternativas modernas, eficaces, creíbles y asequibles y que se adecuen a los nuevos usos sociales, en lugar de limitaciones tan desproporcionadas como ineficaces para el fin que dicen perseguir.
7. Internet debe funcionar de forma libre y sin interferencias políticas auspiciadas por sectores que pretenden perpetuar obsoletos modelos de negocio e imposibilitar que el saber humano siga siendo libre.
8. Exigimos que el Gobierno garantice por ley la neutralidad de la Red, en España ante cualquier presión que pueda producirse, como marco para el desarrollo de una economía sostenible y realista de cara al futuro.
9. Proponemos una verdadera reforma del derecho de propiedad intelectual orientada a su fin: devolver a la sociedad el conocimiento, promover el dominio público y limitar los abusos de las entidades gestoras.
10. En democracia las leyes y sus modificaciones deben aprobarse tras el oportuno debate público y habiendo consultado previamente a todas las partes implicadas. No es de recibo que se realicen cambios legislativos que afectan a derechos fundamentales en una ley no orgánica y que versa sobre otra materia.

Este manifiesto, elaborado de forma conjunta por varios autores, es de todos y de ninguno. Se ha publicado en multitud de sitios web. Si estás de acuerdo y quieres sumarte a él, difúndelo por Internet.

El test de Joel adaptado al desarrollo web

Leyendo blogs, me encuentro con este artículo que trata sobre una revisión del sencillo test de Joel Spolsky sobre la calidad del software. Esta nueva revisión, de la mano de Brandon Savage, propone 12 pasos adaptados al desarrollo web hoy día. Los pasos se responden con un sí o un no. Estos son los posibles resultados:

• 12 síes. Perfecto.
• 11 síes. Aceptable.
• 10 o menos síes. Tienes un serio problema.

Ahora veamos las preguntas:

1. ¿Usas algún sistema de control de versiones?
2. ¿Puedes generar fichero para distribuir tu software en sólo un paso?
3. ¿Usas integración continua?
4. ¿Guardas un registro de bugs?
5. ¿Corriges los bugs tras escribir nuevo código?
6. ¿Cumples los hitos a tiempo?
7. ¿Documentas las especificaciones?
8. ¿Disfrutan tus programadores de un entorno de trabajo tranquilo?
9. ¿Usas las mejores herramientas, y gastas dinero en aquéllas que son necesarias y caras?
10. ¿Escribes test unitarios?
11. ¿Tus nuevos candidatos demuestran sus conocimientos de programación con alguna prueba tangible durante la entrevista?
12. ¿Tienes testers?

En mayor o menor medida, todas me parecen propuestas muy acertadas. No deja de ser una curiosidad más, pero posiblemente este “juego” sea una métrica de calidad de software equiparable a otros sistmas varios órdenes de magnitud más complejos.

Por cierto, yo obtengo un 6 sobre 11 (La pregunta número 11 no se aplica en mi caso).

Mejora progresiva

De un tiempo a ahora, cada vez leo con más frecuencia el término progressive enhancement, o en catellano, mejora progresiva. ¿Qué es exactamente? Como desarrolladores web, debemos lidiar con numerosos navegadores, cada uno con una serie de prestaciones y recursos. Como veremos a continuación, normalmente hay 4 formas de abordar esta situación:

1. Impedir el acceso a determinados navegadores. Creedme, existen páginas a las que no se puede acceder con según qué navegadores. No me refiero a que se muestren defectuosas, es que directamente te muestran un mensaje de error. Tratad de acceder a una página de El Plural cambiando el user-agent de vuestro navegador y sabréis a qué me refiero. Ésta es una pésima solución.
2. Quedarnos en el mínimo común denominador. Esto es, diseñar la página de modo que sólo contenga recursos disponibles por todos los navegadores. No es una solución muy escalable, puesto que se está limitando a las funcionalidades mínimas (Funcionalidades que, por otro lado, normalmente se corresponden con las de nuestro querido IE6). Visto con un enfoque más visual, esto significa que la manada debe ir a la velocidad del más lento. Por ejemplo, querémos posicionar un <div> de forma ‘fixed’. IE6 no lo permite, de modo que, o no lo hacemos, o dedicamos esfuerzos en buscar retorcidos hacks para lograrlo en este navegador. Mmmm no me gusta. ¿Qué más hay?
3. Graceful degradation. Durante mucho tiempo ésta ha sido la tendencia reinante, y seguramente seguirá siéndolo. Consiste en partir del máximo de prestaciones de forma que, a medida que se usen navegadores menos avanzados, la página se mantenga usable con pequeños defectos. Un ejemplo perfecto es el uso de imágenes PNG con semitransparencias: Mientras que los usuarios de Firefox o Safari las verán sin problemas, los de IE6 se encontrarán con imágenes corruptas. En estos casos es frecuente dividir la página en dos niveles: El nivel 1 corresponde a una buena experiencia para el usuario, el nivel 2 con una versión degradada de la página. Encontramos un ejemplo en el servicio de correo de Google Gmail, con su versión avanzada (Por defecto) y una versión básica.
4. Mejora progresiva. Y al fin llegamos a la mejora progresiva. ¿En qué consiste? Es exactamente igual que graceful degradation pero al revés. En lugar de partir de una versión avanzada, se parte de la versión mínima, de forma que, a medida que un navegador ofrece mejores recursos, la página también se ve mejorada. En este caso, se parte de un mínimo razonable, por ejemplo, que sea compatible con HTML 4. Podría, por ejemplo, usarse transparencias en GIF, y sin embargo, en aquéllos navegadores que sí lo soporten, semitransparencias en PNG.

Lógicamente las dos mejores soluciones son las dos últimas. ¿Cuál es mejor? Realmente depende del caso. Pero como método general yo prefiero la mejora progresiva, pues a diferencia de graceful degradation parte de una experiencia de usuario razonablemente buena. Además, con esto siempre ganaremos en accesibilidad.

Si bien cada día existen más navegadores con sus respectivas versiones, también es cierto que disponemos cada vez más de recursos que nos permiten abstraernos de ellos, como los numerosos frameworks javascript como jquery o mootools, además de brillantes soluciones como Google Chrome Frame.

Más información:

• Sitepoint – Progressive Enhancement and Graceful Degradation: an Overview – Introducción didáctica para conocer los principios de la mejora progresiva.
• Sitepoint – Progressive Enhancement and Graceful Degradation: Making a Choice – Aporta pautas para saber qué elegir.
• A List Apart – Understanding Progressive Enhancement – Posiblemente la mejor introducción a la mejor progresiva que he leído.
• Smashing Magazine – Progressive Enhancement: What It Is, And How To Use It? – Con un útil ejemplo de uso.