Blog sobre tecnología, diseño y comunicación

Esta sección no tiene mucho que ver con el contenido del sitio, pero me decidí a crearla. Como voy a estar de vacaciones y no pensaba escribir nada durante Enero, se me ocurrió que cuando tuviera alguna máquina cerca podría escribir baja la condición que no tuviese nada que ver con el diseño o la informática.

Así se me ocurrió crear una especie de diario de viaje donde ir poniendo anotaciones, impresiones y experiencias. Los interesados en temas de diseño web, tecnología y esas cosas pueden regresar tranquilamente en febrero que no se perderán de nada. Curiosos, entrometidos, visitantes ocasionales… ¡Bienvenidos a Diario de Viaje!

Saludos y felicidades a todos.

Introducir fechas en los formularios vía web suele ser una tarea tediosa: el HTML no provee de un componente específico para ello. Sin embargo, mediante la combinación de JavaScript y Hojas de Estilo (CSS), es posible crear ventanas desplegables que permitan seleccionar una fecha de un modo mucho más intuitivo y natural.

Buscando algún script que me permitiera realizar esto me topé con el sitio DHTML Gooodies. Allí encontré JS Calendar, que cumple con esta función a la perfección. Permite introducir una fecha seleccionando día, mes y año, además de mostrar el número de la semana y la fecha actual.

Basta simplemente con colocar un botón al lado de el o los campos destinado a introducir la fecha, para que al hacer clic se muestre la venta. Cuando el usuario selecciona una fecha, automáticamente los campos se llenan con el valor elegido.

Se puede emplear un único campo texto separado con números separados por barras (ej: 01/01/2006) o puntos (ej: 01.01.2006). Otra opción es usar las listas desplegables estilo combo box que permiten elegir días del 1 al 31, meses de Enero a Diciembre y el año. Puede verse en la web un ejemplo de cómo funciona.

Su uso es muy sencillo, la ventana que muestra práctica y estéticamente cuidada. La única desventaja que tenía es que entre los posibles idiomas no estaba el español.

Decidí, entonces, hacer la traducción –que no era gran tarea, por otra parte- y enviársela al autor, Alf Magne Kalleland, para que estuviese disponible a todos los usuarios. Amablemente acaba de actualizar el script, que ahora incorpora la lengua de Cervantes.

• JS Calendar: http://www.dhtmlgoodies.com/index.html?page=calendarScripts

Acaba de liberarse la versión beta del sitio que realicé para G-byte, una empresa de Río Cuarto dedicada a la venta de equipamiento informático. No se trata del clásico sitio con información sobre la empresa, sino que cuenta con un carrito de compras para seleccionar el producto y hacer el pedido directamente desde la web.

La tecnología es QuickCart de Open Solution –como indica el nombre, una solución de código abierto– que brinda la posibilidad de realizar todo el proceso de compra on-line, con la opción de que el acuerdo sobre el pago se haga directamente entre comprador y vendedor.

Dado que el énfasis está puesto en la región sur de Córdoba y San Luis, el trato personal entre comprador y vendedor parece ser la forma más adecuada de realizar las ventas. De esta forma se evita uno de los principales temores de los usuarios para hacer compras por Internet que consiste en la posibilidad de que información sensible –como números de tarjeta de crédito- pueda ser interceptada y empleada con terceros.

QuickCart brinda la posibilidad de personalizar el diseño del sitio únicamente en la parte del encabezado, pero cuenta con sistema de plantillas o templates que pueden implementarse para trabajar más en detalle el diseño de la web. Esta fue la opción que elegí, aunque debo decir que para hacer algunas modificaciones que me solicitaron tuve que trabajar sobre el núcleo del sistema.

No es demasiado complejo, salvo que los desarrolladores son polacos y parte del código (no demasiado, por suerte) está en este idioma. En definitiva, una opción muy recomendable para quienes quieran implementar un sitio de ventas sin pago on-line.

• Sitio web G-byte: www.g-byte.com.ar
• Sitio web QuickCart: http://qc.opensolution.org

Dentro de la parafernalia de barras de herramientas (toolbar) disponibles para los navegadores son pocas las que realmente son útiles: Web Developer Toolbar de Chris Pederick es una de ellas.

Se trata de una extensión para los navegadores Firefox / Mozilla y Flock que pone al alcance de la mano una serie de herramientas y funciones que al poco tiempo se convierten prácticamente en imprescindibles.

Como su nombre lo indica, está orientada a desarrolladores y diseñadores web y tiene algunas utilidades que detallamos a continuación:

• Analizar la estructura de la página. Podemos ver los bordes de tablas y celdas, capas (layers), clases y el ID de cada uno de los elementos. De esta forma ya no es necesario andar «probando» a ver cuál es el parámetro de la hoja de estilos o del HTML que hay que modificar: lo vemos todo en pantalla marcado con prácticas líneas de colores.
• Ver los archivos JavaScript y CSS adjuntos. Con un simple clic podemos visualizar en una nueva pestaña del navegador el contenidos de los archivos de script y las hojas de estilo que estén vinculadas por la página. Ya no es necesario guardar la página en el disco rígido para verlos.
• Utilidades para formularios. Permite enviar un formulario de una página cargada por GET o POST sin modificar el HTML, fuerza el autocompletar aunque la opción este deshabilitada en el código, remueve la limitación de caracteres por cada campo, muestra el contenido de un campo definido como password, entre otras funciones. Muy útil para evitar volver al código cuado estamos programado y cambiar estas configuraciones al vuelo.
• Control total sobre las imágenes. Ya no es necesario ir a la configuración del navegador: con un simple clic ocultamos y mostramos las imágenes de una página, reemplazamos los gráficos por el valor de la etiqueta ALT u ocultamos el fondo. Además, podemos visualizar etiquetas con el tamaño de las imágenes, su ruta y más

Existen muchas más posibilidades como cambiar el tamaño de la ventana a una resolución definida, ver el código fuente haciendo sólo un clic y más. Lo mejor es bajarla y comenzar a probarla.

Página para descargar Web Developer Toolbar

Agregado el 09/12/2005

En www.desarrolloweb.com han publicado un interesante artículo sobre extensiones de Firefox para desarrolladores web. Entre ellas se incluyen:

Curiosamente no han incluido Web Develooper Toolbar 🙁

Igual el aporte es muy bueno.