En Manos de Nadie » diseño web

sobre campos obligatorios en formularios

Diego — Thu, 04 Aug 2011 20:00:53 +0000

Hoy, trabajando con formularios, se me presentó la siguiente duda:

¿Qué será mejor para el usuario a la hora de avisar que determinador campos de un formulario son obligatorios?

¿ un asterisco al lado de cada campo, y luego una leyenda? ¿aclarar diréctamente que el campo es obligatorio?

Investigando sobre usabilidad de formularios, encontré esto:

“Diferenciar, en los formularios, los campos opcionales de los obligatorios, sin hacer pensar al usuario.”

Digo, no está mal el asterisco, es una solución bien formal al problema de los campos requeridos. Pero decirle directamente al usuario “este campo es requerido, llenalo.” sea aún más usable, amable y claro.
Lo sé, la diferencia es mínima.

y los sitios grandes que usan? veamos:

Facebook: Nada. Avisa al enviar el formulario.
Google: Lo mismo. Avisa solo al enviar el formulario.
Twitter: nada. acompaña al usuario en cada paso del formulario usando foco. avisa si algo anda mal al enviar.
Taringa: igual que Twitter.

Sorprendente hallazgo. Ninguno de estos cuatro gigantes de la web avisa, ni con asteriscos ni con palabras, qué campos son obligatorios. Imagino que por una simple razón: TODOS los campos que obligan a llenar son obligatorios, porque no tiene sentido ofrecer campos no obligatorios. Llenar formularios es fastidioso, cuanto menos molestar al usuario, mejor.

Google Web Fonts

Diego — Wed, 06 Jul 2011 16:28:23 +0000

Google pone a disposición un muy selecto y completo repositorio de fuentes con licencias libres: Google Web Fonts, listo para ser utilizado por desarrolladores web.

+1 para Google.

http://www.google.com/webfonts

Gimp 2.8

Diego — Fri, 01 Apr 2011 21:00:32 +0000

La nueva versión de GIMP, la 2.8, estará disponible a fin de año.

Peeero mientras, podemos instalar la 2.7.2 que trae tres de las mejoras más esperadas:

- Carpetas para agrupar capas. SI !!!! por fin.
- Todo en una sola ventana!!! siiiiiiiiiiiiiiiiiii por fin.
- Cuando insertamos texto, lo hacemos sobre la imágen, ya no se abre un pop-up aparte. Un golazo.

Cómo instalarlo ?

sudo add-apt-repository ppa:matthaeus123/mrw-gimp-svn

sudo apt-get update && sudo apt-get install gimp

Si al iniciar tira error, ejecutar:

sudo apt-get install libgegl-0.0-0

Para pasarlo al modo “mono ventana”, abris el GIMP y vas a Ventanas > Single Window-Mode

Aprobada la ley de accesibilidad en Argentina

Diego — Thu, 04 Nov 2010 17:00:36 +0000

Se aprobó la ley de accesibilidad de la información en las páginas web.

“ARTÍCULO 1º.- El Estado nacional, entiéndanse los tres poderes que
lo constituyen, sus organismos descentralizados o autárquicos, los entes
públicos no estatales, las empresas del Estado y las empresas privadas
concesionarias de servicios públicos, empresas prestadoras o contratistas de
bienes y servicios, deberán respetar en los diseños de sus páginas Web las
normas y requisitos sobre accesibilidad de la información que faciliten el
acceso a sus contenidos, a todas las personas con discapacidad con el objeto
de garantizarles la igualdad real de oportunidades y trato, evitando así
todo tipo de discriminación.”

La ley en PDF

CSS esquinas redondeadas

Diego — Fri, 23 Jul 2010 16:34:52 +0000

Después de un tiempito sin postear, les traigo algo muy útil (para el bolsillo del diseñador y la cartera de la diseñadora), se trata de un sitio que nos genera código CSS para darle esquinas redondeadas a DIVs y formularios.

http://a.deveria.com/roundgen/

Para los que quieren una solución más rápida, simplemente agreguen estos estilos al elemento a redondear:

background-color: #AAF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(data:image/svg+xml;charset=utf-8;
base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My
5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkY
iIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48c
mVjdCBmaWxsPSIjQUFGIiByeD0iMTAiIHdpZHRoPSI
xMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=);

El acordeón no acordeona

Diego — Thu, 13 May 2010 19:30:24 +0000

Terminé de diseñar un sitio, en el cual una de las secciones, más precisamente la de enlaces, posee un hermoso acordeón que permite dividir los mismos en categorías. Como desarrollo basándome en Firefox, ya sabía que en ese navegador funcionaba. Decidí probar el sitio en Chrome, y descubrí que el sitio se veía como corresponde.

Luego, y para finalizar el trabajo, le pedí a un amigo una amiga que probara el sitio en Internet Explorer. Obviamente, y como te estás imaginando, el sitio explotaba completamente, todo se veía corrido y fuera de lugar y las tipografías horribles.

Comencé el proceso de hack de la hoja de estilos CSS. Luego de media hora, el sitio se veía bien en todos los navegadores. Hasta que descubrí una falla, que se producía solo en IE y no en los demás. El acordeón, (realizado en JavaScript mediante Mootools) no funcionaba.

Luego de revisar varias veces el código buscando algún conflicto con otro JS, probar una docena de modificaciones, volver a bajar el framework, etc, etc ,etc pude dar con la falla que provocaba el error: el Document Type. Alcanzó con cambiar el mismo por el que pongo a continuación para que todo funcionara a la perfección.

Datagrid plugins para Jquery

Diego — Thu, 14 Jan 2010 23:00:51 +0000

Mostrar datos de una manera cómoda para el usuario suele ser un dolor de cabeza para los programadores. Una gran solución es utilizar uno de estos plugins para el framework Jquery de JavaScript.

códigos / entidades HTML

Diego — Mon, 28 Dec 2009 22:41:28 +0000

Muchas veces al crear o editar sitios nos encontramos con que ciertos caracteres no se representan como deberían, sobre todo vocales tildadas, la eñe, etc. Esto se debe a problemas con la codificación de los caracteres.

Una forma de solucionar esto es utilizar entidades html para representar los caracteres que traen problemas.
Veamos: Si tengo que mostrar la palabra esdrújula en vez de escribir dentro del código la letra con tilde como haríamos en un procesador de texto, vamos a reemplazar esa letra por un código que la represente. Con esto no se dejan dudas sobre cuál es el carácter que se debe mostrar al usuario en su navegador.

Ejemplo: Esdrújula -> Esdrújula

Luego, necesitamos saber cuales son los códigos de cada letra o caracter. Aquí dejo los más usados.

Netbeans + PHP + Smarty

Diego — Thu, 19 Nov 2009 11:00:56 +0000

En mi trabajo me asignaron a un proyecto nuevo para mi, donde tendré que realizar mejoras y correcciones a un sistema de e-learning el cual está programado en PHP orientado a objetos y utiliza Smarty como motor de templates.

El tema fue que al revisar mi IDE preferida Netbeans me dí cuenta que no tenía soporte para Smarty, osea, que no entendía las etiquetas ni resaltaba la sintaxis de los archivos propios del motor.

Busqué alguna otra IDE que soportara Smarty, supuestamente Aptana lo hacía pero no logré hacer funcionar ese plugin.

EDIT 22/11/2009 : APTANA deja de soportar Smarty si instalas los plugins de PHP. Si dejas la ide tal cual la instalas, soporta Smarty. Y además podés trabajar en un servidor remoto a través de SFTP. Actualmente estoy usando APTANA.

Otra IDE que cumplia con todo lo que necesitaba es Komodo, pero no es libre y la licencia sale u$s295. así que decidí ver que podía hacer para “acomodarme”, bien a la argentina, con Netbeans. Les cuento como me fué:

En el menú superior encontramos “Tools” -> “options” . Dentro del cuadro de diálogo, abajo a la izquierda encontramos un botón “Advanced options“.

Dentro de opciones avanzadas vamos a “Ide configuration” -> “System” -> “File tipes“.

Buscamos “PHP.xml ” y hacemos botón derecho -> abrir. Vamos a ver que en el editor se abre este archivo, en donde se indican que extensiones deben ser tratadas como archivos PHP.

Lo que vamos a hacer es agregar las extensiones que usamos con Smarty para que al menos nos resalte la sintaxis básica, aunque no reconozca las etiquetas propias del motor.

Agregamos al archivo estas dos líneas (las del recuadro rojo):

Grabamos el archivo, cerramos Netbeans y al volver a abrirlo ya nos reconoce los archivos de Smarty como si fueran PHP.

Luego, todas las etiquetas de Smarty son entre llaves, por ejemplo:

{#pagename#} {$smarty.now}

Entonces se me ocurrió agregar un atajo para facilitar la escritura de las etiquetas. Hice así:

Desde el menú principal vamos nuevamente a “Tools” -> “Options“. Vamos al segundo ícono -> “Editor” y luego a la solapa “Code templates“. Luego “new” para agregar un nuevo atajo. Hay que definirle un nombre, yo le puse “sm” por Smarty, aparte es muy cómodo.
Luego en “Expanded text” agregamos lo siguiente:

{{$cursor} }

y damos “ok“. Ahora cada vez que escribamos “sm” y presionemos la tecla “tab” apareceran las dos llaves { } con el cursor titilando dentro, listo para escribir la etiqueta de Smarty.

Si bien no es la solución definitiva, digamos que con estas ayudas se puede trabajar con Smarty sin sangrado de retinas xD.

usando Tablas

Diego — Fri, 06 Nov 2009 22:30:17 +0000

Las tablas son una herramienta muy eficaz para presentar datos tabulados ( NO para maquetar, para eso existen las etiquetas DIV y SPAN). Una tabla consta de una o varias filas, cada una de las cuales consta, a su vez, de una o más celdas de datos.
Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a continuación en las columnas.
Creando una tabla

La etiqueta

encierra todas las filas y columnas de la tabla. Las etiquetas (del inglés “table row”) definen cada fila de la tabla y encierran todas las columnas. Por último, la etiqueta

(del inglés “table data cell”) define cada una de las columnas de las filas.Normalmente, algunas de las celdas de la tabla se utilizan como
cabecera de las demás celdas de la fila o de la columna.
En este caso, HTML define la etiqueta

(en inglés “table header cell”) para indicar que una celda es cabecera de otras celdas.

El atributo SUMMARY nos sirve para definir una descripción del contenido de la tabla.

Cabecera de la tabla
Producto 1	Descripción 1	Precio 1
Producto 2	Descripción 2	Precio 2

Unión de Celdas

Con el atributo COLSPAN definimos el número de columnas que ocupa una celda.
Por ejemplo:

A
B	C

Con el atributo ROWSPAN definimos el número de filas que ocupa una celda.
Por ejemplo:













A
B


C

Una vez creada la estructura semántica de la tabla, podemos darle el estilo que queramos mediante CSS.
Nos alcanzará con definir tres estilos, todos para selectores etiqueta, más o menos así:

table { font:normal 76%/150% "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; border-collapse:separate; border-spacing:0; border-width:1px 0; margin:0 0 1em; color:#000; } td { padding:0.25em 0.5em; text-align:left; vertical-align:top; padding:10px; } th { font-weight:bold; line-height:normal; adding:0.25em 0.5em; text-align:center; background-color:#bbb; border-width:0px; padding:8px; }
Luego, un último detalle, si queremos que al pasar el mouse sobre una celda esta cambie su color de fondo, podemos agregar este estilo:

td:HOVER { background-color:#f00; }
Si querés probar si entendiste qué es una tabla y como hacerla, intentá crear el HTML para la siguiente tabla:

Queda pendiente la parte de DISEÑO CSS para las tablas. Completo el post hoy a la noche o mañana :D