El cursor del mouse es un elemento muy poco considerado en el momento del diseño ó al aplicar estilos CSS. Pero la verdad es que es un complemento importantísimo de la accesibilidad y usabilidad, y por esa razón fue considerado en el momento de crearse tantos valores para esta propiedad.
Su uso es muy fácil y es aplicable no sólo a la pseudo-class :hover, sino que a cualquier etiqueta HTML:
<strong style="cursor: help;">¡Ayuda!</strong>
Lamentablemente la visualización de cada tipo de cursor depende del sistema operativo del usuario, y la capacidad de visualizarlo depende del browser que esté utilizando.
A continuación nombro todas las variedades y al final una página de ejemplo con todos ellos aplicados para que tengan al cursor considerado en su próximo proyecto:
CSS2:
cursor: auto; cursor: inherit; cursor: crosshair; cursor: default; cursor: help; cursor: move; cursor: pointer; cursor: progress; cursor: text; cursor: wait; cursor: e-resize; cursor: ne-resize; cursor: nw-resize; cursor: n-resize; cursor: se-resize; cursor: sw-resize; cursor: s-resize; cursor: w-resize;
CSS3 (funcionan en los browsers modernos (IE9+, FF 3.5+, Chrome, Safari, Opera 9+):
cursor: none; cursor: context-menu; cursor: cell; cursor: vertical-text; cursor: alias; cursor: copy; cursor: no-drop; cursor: not-allowed; cursor: ew-resize; cursor: ns-resize; cursor: nesw-resize; cursor: nwse-resize; cursor: col-resize; cursor: row-resize; cursor: all-scroll;
Propietarios (Firefox y Chrome/Safari):
cursor: -webkit-grab; cursor: -moz-grab; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: -webkit-zoom-out; cursor: -moz-zoom-out;
Tu propio cursor:
cursor: url(images/cursor.cur); cursor: url(images/cursor.png), default;
* para mejor fallback después del url() utiliza algunos de los cursores CSS2
* Para Firefox y Chrome/Safari utiliza un PNG transparente.
* IE require que sea un archive .cur
* Opera no lo soporta
Link:
]]>
Desde la salida del Retina Display, se duplicó la densidad de pixeles que utilizábamos para diseñar y construir sitios webs para iPhone. Aunque si seguías utilizando los acostumbrados 480x320px de las pantallas anteriores, se nota bastante el pixel en estos nuevos teléfonos. Pero si trabajas para la nueva resolución de 960x640px, ¿qué haces con los modelos anteriores?
Suele ser común el pensamiento que 1 pixel en CSS es 1 pixel en la pantalla del dispositivo. Cuando entramos al nuevo mundo de la alta definición un pixel en CSS termina siendo múltiples en la pantalla. Un ejemplo es si defino un zoom de 2x, entonces 1 pixel de CSS termina siendo 2×2 cuadrados de pixel en el dispositivo. Y eso es lo que está sucediendo desde el iPhone 4.
Entonces, la pregunta es sencilla: ¿Cómo trabajamos con Retina sin dejar de lado las resoluciones anteriores?
La respuesta viene de la mano del potente Mobile Safari y su capacidad de responder mediante CSS3 media queries. Podemos detectar si el dispositivo duplica la densidad del pixel, y si es así modificar el estilo reemplazando las imágenes por una de doble resolución:
<link rel="stylesheet" type="text/css" href="css/normal.css"> <link rel="stylesheet" type="text/css" href="css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" >
El secreto está en que definas las imágenes que querrás se vean de mejor calidad en un iPhone 4+ mediante background-image de CSS, por ejemplo:
normal.css
#logo {
background-image: url('images/logo.png');
background-size: 100px 100px;
background-repeat: no-repeat;
}
retina.css
#logo {
background-image: url('images/logo_hi.png');
}
Te recomiendo apreciar el ejemplo desde tu teléfono móvil, para que realmente veas los resultados:
Como el navegador va a leer sí o sí normal.css, y por gracia del media="only screen and (-webkit-min-device-pixel-ratio: 2) sólo los dispositivos que tengan duplicados su resolución leerán retina.css y sobreescribirán los estilos definidos en esta hoja de estilos por sobre la anterior. La idea es que sólo definas las propiedades que cambien, no es necesario que reescribas todo el código.
Mediante JS
Otra manera es hacerlo mediante JavaScript, la cual encuentro innecesaria pero de todas maneras dejo la opción:
<script type="text/javascript">
if (window.devicePixelRatio >= 2) {
document.write("<link href='css/retina.css' rel='stylesheet' type='text/css' media='screen' />");
} else {
document.write("<link href='normal.css' rel='stylesheet' type='text/css' media='screen' />");
</script>
Links:
]]>
¿Porqué utilizar gradientes en CSS en vez de imágenes?
- Es más flexible y mantenible
- Menos dependendias de programas y editores gráficos
- Menos consultas al servidor
- Es escalable
En este artículo abordaremos las maneras de escribir gradientes (lineales y radiales) para los principales navegadores modernos.
Según los estándares W3C, crear gradientes se compone de:
linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* ) radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )
Para browsers Mozilla, se mantiene pero se agrega el prefijo -moz:
-moz-linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* ) -moz-radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )
Y para Webkit, es bastante diferente:
-webkit-gradient(<tipo>, <punto> [, <radio>]?, <punto> [, <radio>]? [, <stop>]*)
Una lástima que tengamos que reescribir para cada uno diferentes propiedades para lograr el mismo efecto. Mejor veamos los ejemplos:
Gradiente Lineal
body{
background-color:#ccc;
background-image: -moz-linear-gradient(top, #333, #ccc);
background-image: -webkit-gradient(linear, left top,left bottom, from(#333), to(#ccc));
background-image: linear-gradient(top, #333, #ccc);
}
Gradiente Radial
body{
background-color:#ccc;
background-image: -moz-radial-gradient(center 45deg,circle cover, #ccc, #333);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#ccc), to(#333));
background-image: radial-gradient(center 45deg,circle cover, #ccc, #333);
}
¿Y con Internet Explorer?
Ni lo pienses, siquiera en IE9 están soportados. Podrías lograrlo en esta última versión através de SVG, el cual es basado en vectores. SVG es un lenguaje de marcado basado en XML que descibre vectores, y el motor de HTML5 permite que SVG sea incrustado directamente en HTML. Definiendo el alto del documento SVG al 100%, tendremos una imagen que se escala cualquiera sea el alto del elemento, tal como lo haría una caja con gradientes en CSS3.
¿Muy complicado? También lo creo. Mejor prueba algún script como Modernizr ó CSS3 Pie, los que hacen que IE soporte CSS3 como deberían haberlo hecho con los estándares hace mucho tiempo ya.
El diseño web no debe ser tratado como el diseño gráfico; es una disciplina tan específica que debe ser separada definitivamente como una rama independiente. Implica conocimientos de áreas propias que son disciplinas en sí. Por nombrar algunas:
- Diseño gráfico
- Psicología
- Sociología
- Marketing
- Historia
- Comunicación Social
- Arquitectura de información
- Usabilidad
- Programación
He visto muchos diseños que merecen más ser impresos que aplicados en una pantalla; comenzando por que van a pesar bastante y pasando por formas imposibles de ser realizadas mediante codigo HTML y CSS. En mi humilde opinión, un diseñador web para ser efectivo en su trabajo debe considerar por lo menos alguno de los siguiente puntos:
Tareas
Siempre recuerda: el ser humano basa su comportamiento en tareas y objetivos, y por lo tanto el lograr realizarlas. Un sitio web no es sólo una vitrina, también es una vía para lograr un potencial cliente. Nadie llega a un sitio por azar; el usuario eligió llegar a él a través de un click en un enlace, una búsqueda orgánica o por vía directa. Por lo tanto, se debe tratar de encantarlo y extender su estadía en él, y el diseño es el medio más directo para ello.
Usuario
Estudiar al usuario no es fácil y se necesita tiempo y estudio para lograr algo fidedigno. Lamentablemente, sabemos que para un proyecto web se trabaja muy rápido y con deadlines muy ajustados. Ante ello, estudios y conocimientos previos son imprecindibles.
Soporte
Siento que es muy importante conocer (pero no necesariamente dominar) cuál será el soporte final del sitio, antes de siquiera comenzar el diseño. ¿Estará alimentado por un CMS? ¿Qué posibilidades me ofrece? ¿Podré usar Flash parcialmente? ¿Qué versión? Con algunas pocas respuestas se podrá exigir más a la herramienta y no esperar tanto al aprendizaje del usuario.
Performance
No existen usuarios expertos, y todos estamos constantemente aprendiendo a través de constantes innovaciones de gente muy creativa. Pero es importante considerar que el tiempo que el usuario gasta en un sitio web es tan valioso como nuestro tiempo como profesionales creándolo, por lo tanto se debe diseñar estructuras que sean además de fácil de entender, rápido de recorrer, de cargar y de encontrar lo que se busca.
Diseño Centrado en el Usuario
En el mundo para el cual trabajamos existe un concepto muy conocido pero poco aplicado, por lo que he observado navegando. El Diseño Centrado en el Usuario es una filosofía y un proceso con el cual se busca mediante el diseño necesidades, deseos y limitaciones de una interfaz que satisfacen al usuario final del sitio web. Esto puede ser considerado como un proceso múltiple, donde no sólo se requiere que el diseñador resuelva la estética (como comúnmente sucede), sino cómo los usuarios interpretan una interfaz y su comportamiento utilizándola. Con esto, se hace imperativo una etapa de pruebas con usuarios reales (sin miedo a redefiniciones) y una etapa inicial de análisis tanto de target como de arquitectura de información.
Pienso que debemos diseñar experiencias, no productos. Si haces un producto bonito, puede que quien lo utiliza le agrade la estética y lo tenga en un lugar destacado. Pero si el usuario tiene una experiencia diferente, satisfactoria navegando, es muy probable que vuelva y que lo recomiende a otros usuarios, todos potenciales clientes.
Y ¿qué implica este diseño de experiencias?
- Pensar global: desde que el usuario carga el sitio, hasta que lo deja. Cada paso, cada elemento debe ser cuidadosamente pensado y aplicado.
- Considerar tanto la presentación del contenido para todos (accesibilidad), como la facilidad del uso de cada elemento del sitio (usabilidad).
- Desarrollar hacia el usuario, desde lo complejo del proceso a la simplicidad de la tarea.
- Diseñar mensajes, ayudas, errores y guías de navegación que apoyen y orienten al usuario, y que lo haga sentirse bien y no fracasado por no haber logrado algo.
- El contenido es el rey, por lo tanto debe ser tratado como tal y el diseño es el soporte para el mensaje que se quiera entregar al usuario a través del sitio web. Pero el diseñador debe ser hábil: puedes persuadir al usuario tanto con buenos textos como con buen diseño.
Como ven, esto es sólo un esbozo de lo que pienso debería ser un diseñador web integral, que cumpla con efectividad su tarea comunicadora y persuasiva y que finalmente pueda ser valorado como tal. Este tema queda abierto a sus comentarios, los que pueden nutrir y complementar este tema.
]]>
