Psicología Cognitiva
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.
Enlaces vacíos y semánticos
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.
Esa maldita Web 2.0
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.
Tip Precoz 4: input type=»search»
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:
Tip Precoz 3: RGBa
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:
Mis bookmarklets
Los bookmarklets son pequeñas aplicaciones Javascript contenidas dentro de una URL en una página web, de la siguiente forma:
<a href="javascript:function(laQueSea){};">Bookmarklet La Que Sea</a> La idea es que sean ejecutada mediante el click del enlace, y lo que usualmente se usa es guardarlos mediante bookmarks en tu browser; así puedes tenerlos a mano siempre que los necesites.
Como están escritas en Javascript, puedes hacer modificaciones a cualquier elemento de DOM dentro de la página: cambiar tamaño de fuentes, colores, extraer datos de la página (links, imágenes, texto), enviar datos para validación o traducción entre muchas otras cosas.
Las 10 leyes de Jorge para el diseño y desarrollo web
No desarrolles para la mayoría; no siempre tienen la razón y usualmente no saben lo que quieren. <p> Aunque 60% de los usuarios utilicen<strong> Internet Explorer 6</strong>, eso no indica que debemos desarrollar aplicaciones que funcionen s&oacute;lo en <strong>IE6</strong>; si todos saltan a un pozo &iquest;t&uacute; te lanzar&iacute;as tambi&eacute;n? </p> Usa siempre un reseter CSS. <p> Si tienes de 1 a 5 p&aacute;ginas simples y con formularios simples, basta con el reseter universal: </p> <pre><code class="language-css">* {&lt;br /> margin: 0;&lt;br /> padding: 0;&lt;br /> }
Videocast 3: creando un plugin para jQuery
Ayer se me acerca un colega de trabajo con algunas preguntas relativas a un proyecto de cómo encontrar una solución a una funcionalidad utilizando jQuery. Papel y lápiz en mano, me puse a explicarle cómo imaginaba que sería, pero después pensé en cómo hacerlo mejor aún, con menos líneas de código y en los posible extensible, vale decir, que su mantención o posterior actualización implique poca o nula modificación.
Luego del trabajo salí a trotar y ¡ZAZ! La solución viene a mi cabeza. De vuelta la puse en práctica y decidí grabarla en un videocast, pero además de esa sencilla solución creí pertinente mostrar cómo a partir de una simple funcionalidad (o compleja, dependiendo de lo que hagan) pueden transformarla en un plugin configurable a partir de opciones, para jQuery.