Ponerse en el lugar del usuario; es un principio básico que deberíamos adquirir si queremos que nuestro proyecto web tenga éxito no sólo para nuestros bolsillos, sino que perdure y tenga pregnancia en la [experiencia del usuario][1]. ¿Qué marcaría una diferencia? El diseño, obviamente es lo primero que encanta; contenido bien estructurado y ordenado, pensado hacia una mejor buscabilidad y encontrabilidad; funcionalidades útiles y no sólo efectistas, también. Pero insisto, ¿cómo lo llevamos aún más allá?

#30 – 01 Junio 2009

Una nueva manera de mostrar más información / A new way to show more info Selecciona tu idioma / Select your language: Español English

Como muchos deben ya saber, es un tremendo lío alinear verticalmente un elemento HTML mediante CSS estándar; de hecho una de las razones de que aún personas siguen utilizando tablas para estructurar sitios: precisamente porque las celdas hacen este alineado horizontal y vertical tan fácil, mediante los atributos align="" y valign="". Pero utilizando web standards es otra cosa, una dimensión aún perturbante y siendo franco, algo complicada de entender y llevar a la práctica.

Entender nuestros actuales usuarios -y los potenciales que pretendemos tener- es básico para una buena planificación de un proyecto web. Ir más alla, conocer cómo se comporta la mente de una persona ante el diseño y funcionamiento del sitio web es importante para el éxito de ese proyecto. La psicología cognitiva hace precisamente eso: estudia los diversos procesos cognitivos como la resolución de problemas, el razonamiento, la percepción y toma de desiciones, entre otras cosas.

Título del Sitio – Subsección

Si desayunas [jQuery][1], almuerzas [Mootools][2] y cenas Spry entonces seguro te gusta manipular eventos utilizando elementos del [DOM][3] ya generados. Deben saber que la etiqueta correcta para click (y doubleclick) es y solamente ; todas las demás tienen otros muchos usos pero la única que semánticamente está habilitada para desencadenar una acción mediante un click es… ¡! Bien eso era lo primero que quería dejar claro; he visto demasiados , , incluso clickeables. Ahora, a lo que va este artículo es cómo la semántica se está dejando atrás por la comodidad de escribir eventos mediante JS. Me culpo también por caer en lo mismo, pero me interesa ahora mostrarles la mejor solución que he encontrado al respecto.

Está en todas partes. Se lee hasta en el diario y se escucha en las noticias. Pero nadie sabe realmente de que se trata, sólo saben que se vende bien. Sí, hablo de la Web 2.0 que en el hemisferio norte va en decaída, pero como siempre aquí lejos en el sur la está reventando. Hace mucho que debería haber escrito algo sobre este tema, pero esta espera ha sido mejor ya que he podido profundizar mi opinión al respecto. La última vez que recuerdo que un término inventado se haya tergiversado tanto y aún así puesto tan de moda fue comenzando el milenio, con [AJAX][1] que aún vende como pan caliente. Pero ahora me he llegado a asustar del mal entendido que abunda en el sector, y cómo gente relacionada con el marketing venden productos y aplicaciones como 2.0 y que no tienen nada que ver con el concepto original del mismo. Mucha de la culpa la tenemos nosotros quienes nunca definimos bien su significado ó los alcances del concepto.

Este tip es bastante específico para usuarios del browser Safari; desde su versión 2, Apple incorporó un ‘envoltorio’ que reemplaza los que tengan como atributo type=“search”, cambiando el campo de normal que conocemos, cuadrado con una sombra interior, por el elegante que tiene Apple dentro de su interfaz Mac OSX. Funciona en Safari tanto para Mac como para Windows; en otros browsers degrada graciosamente con el input normal que esperamos:

Como debes saber, existe más de una manera de declarar colores en CSS: Nombres (websafe): por 17 colores en inglés : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white y yellow (actualmente los browsers modernos soportan muchos más). Sistema (no lo recomiendo): por colores del sistema operativo que esté utilizando el usuario del sitio: ActiveBorder, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, HighlightText, InactiveBorder, InfoBackground, InfoText, Menu, MenuText, Scrollbar, Window, WindowFrame y WindowText. RGB Hexadecimal: quizás el más utilizado, en el cual cada color se mezcla según 16 símbolos (de 0 a 9 y de la A a la F); por ejemplo el rojo es: #FF0000. RGB Decimal: se indica qué cantidad de Rojo, Verde y Azul se debe mezclar en una escala de 0 a 256 tonos cada uno; en este caso el rojo seria rgb(255,0,0). RGB Porcentual (poco preciso): otra forma de expresar colores en RGB pero en forma porcentual; rojo es rgb(100%,0%,0%). Pero con CSS3 existe una nueva e interesante manera: