Para aquellos a los que les gusta personalizar hasta el más mínimo detalle en sus creaciones web, siempre ha sido una piedra en el zapato el hecho de no poder aplicar un estilo a los campos de tipo “file” en los formularios.

Hace tiempo que ya algunos han dado con soluciones parciales al problema, como por ejemplo:

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs...

Pero desde ayer, tenemos la que a mi juicio es la más completa y sencilla de ellas. Filament Group, comparte el código de uno de los ejemplos de su libro en:

http://filamentgroup.com/lab/jquery_custom_file_input_...

El sistema te permite personalizar usando CSS el aspecto completo del campo.

Y el código para hacerlo es realmente simple:

HTML:
<input id="file" name="file" type="file" />

JavaScript (jQuery):
$('#file').customFileInput();

Lo malo será que ahora ya no tendré excusas cuando los diseñadores me pidan que aplique un estilo distinto al estándar a este tipo de controles ;)
Espero que os sirva.

Desde hace ya bastantes años, en el terreno del comercio electrónico y las tiendas online, hay un vencedor indiscutible: oscommerce. Durante todo este tiempo ha sido la alternativa más usada para la creación de las tiendas virtuales de pequeños y grandes negocios.

Aunque han aparecido otras alternativas, no han logrado hacerle sombra.

De la mano de los chicos de Varien y basada en el Zend Framework aparece ahora un sistema de última generación al que han llamado Magento.

Magento viene de serie con interesantes características:

• Flexibilidad sin limitaciones
• Arquitectura escalable
• Soporte de la comunidad y soporte de pago.
• Integración sencilla con aplicaciones de terceros.
• Funcionalidades de última generación (URLs amigables para buscadores, Ajax y javascript para la interfaz, tags para los productos, comentarios de los consumidores, sistema de valoración de los productos, wishlist, etc.).

Es posible ver una tienda de demostración y varios videos explicativos.

Aunque todavía está en fase de pruebas, Magento ya parece ser una seria alternativa al omnipresente oscommerce. Sin duda su aspecto gráfico es mucho más profesional y detalles como el alta rápida de clientes (nada que ver con el tocho-formulario de oscommerce), la modularidad de su código y la integración de facilidades Javascript y web 2.0 (p.ej. la nube de tags) en su interfaz la convierten en un serio rival.

Yo de momento ya me la he descargado y estoy echándole un vistazo a su código que tiene muy buena pinta.

Hace poco hablaba con un colega de lo satisfactorio que suele ser para un programador web como yo, el poder tener al lado a un diseñador web experto en usabilidad y formar equipo con él. Evidentemente, el trabajo final es de muchísima mayor calidad y es mucho más satisfactorio que si tengo yo que encargarme de todo el proceso (diseño, maquetación y programación).

Sin embargo el disponer del boceto hecho por el diseñador, a veces no es coser y cantar… sobre todo cuando debes aplicar ese diseño a una aplicación un tanto antigua… por ejemplo oscommerce , hecha a base de tablas y recursos que hoy en día ya no se usan en los desarrollos web profesionales. El ejemplo más claro, lo tuve con la tienda de padel Special padel. El diseño venía de mi buena amiga Lourdes, como siempre, cuidado y espectacular, pero sin pensar en el pobre que lo iba a tener que montar usando CSS ;).
Al final, terminas modificando decenas de archivos usando el “buscar y reemplazar” para poder añadir una clase o un id allí donde lo necesitas o para poder añadir etiquetas html más productivas (en términos SEO) a los distintos elementos de una página.

Aún así, salvadas las dificultades de algunos diseños más pensados para papel que para web, el equipo perfecto para el desarrollo de una web de calidad, sin duda debe estar compuesto por más de 1 persona y al menos debe haber un diseñador de interfaces web y un programador web. O eso me dice mi experiencia.

Cada vez que doy clase, intento explicar a mis alumnos lo importante que es realizar diseños que se adapten a la pantalla ( o al área visible ) de los visitantes. Hasta hace poco, todo el mundo diseñaba para pantallas con una resolución de 800×600, ahora mucha gente dice que hay que diseñar para pantallas de 1024×768. Pero todo ello está siempre basado más bien en conocimiento personal que en pruebas y estadísticas medibles.

En el articulo “el tamaño importa“, se nos analizan los datos que nos pueden guiar para elegir correctamente el ancho de nuestro diseño web.

Por si lo quereis saber, yo siempre uso 770px para mis diseños fijos.

• Combina – Siempre que sea posible agrupa los ficheros de imagenes, css y javascript. Cuando se trabaja con AJAX, mientras menos peticiones al servidor, mejor. El resultado es que puedes obtener imagenes agrupadas como esta de la pagina home de Yahoo!, que usa CSS para mostrar la seccion apropiada de la imagen.
• Comprime – Usa la compresion para ahorrar ancho de banda y reducir el tiempo de las descargas. Se pueden usar las herramientas JSMin o ShrinkSafe junto con el mod_gzip de Apache.
• Cache – ¿por que recargar contenido estatico si el navegador puede tenerlo en cache? Se pueden usar plugins de FireFox como el TamperData para asegurarnos de que el cacheado se esta haciendo como deberia.

La novedades y mejoras incluidas en el nuevo motor de Mozilla (Gecko 1.9) permiten finalmente al conocido navegador pasar el famoso test “Acid 2“. Este test fue desarrolado por el Proyecto de estándares web para mostrar las carencias de los navegadores en la visualización de páginas HTML/CSS.
Para poder pasar este test, los navegadores deben cumplir los estándares del W3C y disponer de una amplia variedad de funcionalidades consideradas relevantes por los desarrolladores web.
El test Acid 2 ha sido pasado por varios navegadores como Safari (Mac), Konqueror (Linux) y Opera, pero nunca por Internet Explorer (qué raro).

El hecho de que Firefox pase este test, es considerado un gran paso por sus desarrolladores (y como no, por nosotros sus usuarios). Aunque no se espera que estas mejoras se incluyan en la rama 2.0, por lo que tendremos que esperar a Firefox 4.0 para disponer de ellas.

Más info en “first look at Firefox 3.0“.