100% autoestimulante. 0% de popularidad.
Diablos, no me gusta que el blog se convierta en uno de esos en los que copiar y pegar es todo lo que ofrecen. Pero Mobile design web resources incluye una buena recopilación de recursos relacionados con la web móvil, y puede que te interese.
Mobile presents an opportunity to invent new ways for users to interact with information.
Rachel Hinman: Mobile User Experience: What Web Designers Need to Know.
Para probar nuestras páginas en Opera Mini, ya no es imprescindible instalarlo en un teléfono y conectarse mediante GPRS ó 3G.
Tal y como lo cuenta Chaals en Opera Mini on Mac OS, podemos instalar Opera Mini en Mac OS X (él lo explica) y también en Linux y Windows (incluye un par de vínculos).
Yo lo estoy probando ahora mismo en el MacBook, y funciona perfectamente. No os perdáis los comentarios, “alguien” encontró la forma de tenerlo todo empaquetado en una aplicación de Mac OS X.
Aunque me gusta el título del artículo al que haré referencia – habla de tendencias como si la web móvil fuese una moda, y del año 2009 como si después fuese todo diferente – creo que es bastante recomendable su lectura. Se trata de un largo artículo con buenos consejos, reflexiones, recursos y ejemplos centrándose en el diseño de sitios web para dispositivos móviles.
Lo puedes leer en Mobile Web Design Trends For 2009.
Artículo “descubierto” gracias a Jorge L. Arienza, que escribió diversidad, diversidad, diversidad.
Hace unos días Palm ha presentado un nuevo teminal (Palm Pre) y su próximo sistema operativo (Palm Web OS). Los anuncios han tenido una repercusión muy positiva: han conseguido atraer la atención a Palm y también ilusionar a los usuarios y seguidores de la marca, tras unos últimos años, digamos, no muy brillantes.
Pero no es momento ni lugar para hacer valoraciones, hablemos de Palm Web OS. Entre las características del sistema operativo, están:
Promete.
Como ya sabemos todos, los contactos, junto con eventos (o citas), tareas y notas, son las clásicas utilidades de las conocidas PIM, acrónimo de Personal Information Management (o Gestión de Información Personal). Aparece de forma directa en aplicaciones de escritorio, teléfonos móviles, PDAs,… en ocasiones hablamos de estándares (vCard, iCalendar,…) y permite, entre otras cosas poder intercambiar esa información entre diferentes dispositivos, aplicaciones y canales. Por ejemplo: transmitir un contacto desde un teléfono móvil a una PDA mediante bluetooth, o incluso incorporar la información contenida en un microformato de un evento (hCalendar) de una página web a aplicaciones de escritorio, mediante la extensión de Firefox Operator. Esto es interoperabilidad.
La información típica de un contacto está compuesta por su nombre, apellidos, dirección de su domicilio, del trabajo, teléfonos, correos electrónicos, usuario de mensajería instantánea, fecha de cumpleaños,… La de un evento: fecha y hora de inicio y fin, lugar, asunto, notas adicionales,… y bueno el resto lo sabéis o lo imagináis.
Dependiendo de los dispositivos, aplicaciones y sistemas operativos, existe cierta integración con esa información personal, por ejemplo, podemos ver en el calendario un recordatorio del cumpleaños que aparece en un contacto. También la fecha de finalización de una tarea. Y poco más. ¿Es suficiente esa integración? En mi opinión, no. Y debería mejorar.
Añadamos al conjunto de utilidades clásicas de Personal Information Management (contactos, agenda, tareas, notas), otras bastante habituales, como las fotografías, los correos electrónicos, las llamadas de teléfonos, los SMS,… Y otras un poco más “raras” como conversaciones de mensajería instantánea, blogs, microblogging, …
El enfoque de Palm, con su Web OS, es el de integrar la gestión de información personal con sitios webs populares, además de que el sistema operativo, por lo que parece, tiene una interfaz web -de ahí el nombre-. Pero creo que infravalora uno de los pilares fundamentales de la web: los vínculos. Y ojo, porque esa infravaloración se le puede achacar a muchas aplicaciones y sistemas operativos que le han precedido.
Tras esta larga introducción, por fin empezamos a hablar del asunto principal del artículo: Gestión de Información Personal Vinculada (o Linked Personal Information Management). Aquí está mi wishlist.
Linked Personal Information Management (Linked-PIM, para abreviar), es sólo una idea.
¿Dónde se podría aplicar Linked-PIM? En cualquier dispositivo-sistema operativo-aplicación que utilice la ya mencionada PIM, en su variante clásica (contactos, calendario, notas, tareas,…) o las otras más avanzadas (correo, mensajería instantánea, fotos, correos, llamadas, blogs,…). Hablamos de teléfonos móviles, ordenadores portátiles o de sobremesa; sistemas operativos o aplicaciones, y por supuesto, sitios web. Obviamente en algunos sitios será más fácil de implementar y podrá relacionar directamente mucha información: por ejemplo, Google, con una gran variedad de servicios. En otros casos habrá limitaciones. Pero es posible.
Los vínculos a los que antes se hacía referencia podrían – y deberían – enriquecerse incluyendo el tipo de relación que hay entre el elemento (por ejemplo, foto) y el destino del vínculo (por ejemplo, persona). Porque en el fondo, y en la forma, estamos hablando de los triples de la web semántica: sujeto-predicado-objeto ó recurso-propiedad-valor.
Aquí tenemos un ejemplo de código ficticio de Linked-PIM en RDF con la sintaxis de XML, donde todas las URLs son de ejemplo (incluido el espacio de nombres).
<?xml version="1.0" encoding="utf-8"?>
<rdf:RDF
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:lpim="http://purl.org/lpim/0.1/">
<rdf:Description rdf:about="http://example.org/dude/">
<lpim:isInPhoto>
http://example.org/photo.jpg
</lpim:isInPhoto>
</rdf:Description>
</rdf:RDF>
Y aquí mostramos esa misma información expresada en un grafo:
La descripción de este código e imagen, expresada en palabras humanas es muy sencilla: Dude (http://example.org/dude/
) aparece en (http://purl.org/lpim/0.1/isInPhoto
) la foto (http://example.org/photo.jpg
). Utilizando la nomenclatura sujeto-predicado-objeto, sería Dude (sujeto) aparece en (predicado) la foto (objeto). La nomenclatura recurso-propieda-valor te la imaginas, ¿no?
Hablamos de Web Semántica, pero no hay que olvidar la privacidad y la veracidad de la información. Información Personal, sí, pero información.
Aquí hemos hablado de RDF, pero perfectamente se puede usar HTML… con el viejo truco de los vínculos relacionales (ya sabes <a rel=”…”
), indicando por supuesto el profile
ó scheme
. Si me permitís una autocita, dar un vistazo a Metadatos geográficos (2): Empleándolos en ficheros HTML, XHTML y RDF (publicado en Web Semántica Hoy) para refrescar la memoria. Y sí, también se podría expresar en microformatos. De hecho, si hablamos de vínculos relacionales, estamos hablando de microformatos.
Pero hablemos de Google. Estoy en Gmail y tengo a la vista mi lista de contactos. Ahora mismo puedo ver las conversaciones que hemos mantenido en gtalk. Pero teniendo un contacto delante, podría crear o ver una una cita mediante un menú contextual. O ver-añadir a ese contacto en las fotos que tengo en Picassa. O consultar sus últimos post publicados en blogger, o icluso los post publicados en un día o intervalo concreto. La información está ahí.
Linked-PIM podría ser intercambianda entre diferentes sitios webs, pero… habrá que preguntarse hasta que punto quires perder tu privacidad ¿Has leído El phishing que viene? Tal vez el navegador podría funcionar como repositorio de contraseñas.
Hasta aquí hemos hablado de Linked-PIM desde un punto de vista “web”, ya sea en un sitio web o en un sistema operativo con una interfaz web. Pero igualmente se podría mostrar el ejemplo anterior para una aplicación de escritorio. En Mac OS X, siguiendo con el ejemplo de la foto, podríamos estar viendo una fotografía en iPhoto, donde aparece una persona – incluída entre nuestros contactos -, y al aparecer identificada esa persona, podríamos ir a la Agenda. Y de ahí, ir directamente a los correos intercambiados en la aplicación Mail, o ver nuestras conversaciones en iChat, o los eventos y citas que hemos compartido ese contacto y yo en iCal. Obviamente las aplicaciones deberían de estar preparadas para poder tener asociada o vinculada esa información (y de momento, no es así).
Linked-PIM es sólo una idea. Sólo una idea. Pero creo sinceramente que puede ser bastante útil. ¿Alguien tomará el testigo? Palm, GNOME, KDE, Mac OS X, Microsoft, Google, Yahoo, Firefox, Opera,…¿Por qué no?
Uno de los elementos imprescindibles para cualquier sitio web al estilo 2.0 (junto con los degradados, reflejos y colores pastel) son las esquinas redondeadas (nótese la ironía).
Sabemos que hay técnicas para hacerlo mediante CSS e imágenes de fondo (¿quién no se acuerda de Redondeando esquinas (I) y Redondeando esquinas (II) ?).
En la especificación de CSS 3 podemos encontrar una forma más sencilla de hacerlo, mediante el atributo border-radius (especificación CSS 3 del W3C ) (recordemos, de momento es un borrador y pueden pasar años hasta que sea una recomendación). Pero hasta que llegue ese momento, y mientras se concretan los atributos y valores, cada motor de navegador que se precie (excepto Opera y Explorer ) tiene su propia implementación de esta propiedad, con sutiles diferencias. Hay que tener en cuenta que estas implementaciones de CSS se pueden cosiderar como una especie de versión beta , y que todavía no está claro que la especificación del W3C cambie más adelante (como lo ha hecho recientemente).
Aquí se recopilan las propiedades definidas por el W3C , mozilla, khtml y webkit . Empezando por el borde redondeado para toda la caja, y después para las esquinas individuales (esquinas superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda, como las agujas del reloj).
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-khtml-border-radius
-khtml-border-top-left-radius
-khtml-border-top-right-radius
-khtml-border-bottom-right-radius
-khtml-border-bottom-left-radius-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radiusDel Explorer se ha hablado en algunos sitios de una propiedad -ms-border-radius , pero no existe (¿todavía?). Y en Opera,… tampoco existe, pero, hay una forma de crear esas esquinas redondeadas usando como imágenes de fondo ficheros svg : puedes verlo en la sección Rounded corners del artículo New development techniques using Opera Kestrel (9.5) .
Existe otra forma de lograr tener esquinas redondeadas en navegadores de versiones antiguas mediante javascript, como podemos ver en Nifty Corners Cube , jQuery Corners y probablemente unos cuantos cientos de sitios más.
Designing for Mobiles: Users & Context, un video de animación corto – 3,43 minutos – que han creado con motivos didácticos para un curso de User Experience Design.
El video, alojado en vimeo, termina así:
When design for Mobile, remember: you’re disigning for context. You can’t control how the phone will be use or the enviroments the phone is use in.
En la sección Best Practices de mobithinking.com (de la gente de mtld.mobi, antiguo dot.mobi) podemos encontrar algunos documentos de interés – en formatos HTML y PDF – en el mundillo de la web móvil:
Es de esperar que con el paso del tiempo vayan publicando más documentos. Algunas citas de interés de las muchas que se podrían extraer:
Five rules for designing usable mobile web sites
- The mobile web is mobile
- Context is king
- The devices are (very) different
- Forget your dotcom thinking. You need unique content and design.
- Never forget rules one to four.
A Three Step Guide to Usability on the Mobile Web
Mobile lets you reach people all across the world, many of whom may never own a PC. It’s not just a western phenomenon, it’s global.
Beyond the numbers, the vast potential of the mobile web is also due to the way people think about and use their mobile devices:
- They’re always on.
- They’re always at hand.
- They’re always personal, rarely shared.
No other marketing medium can say any of these things, much less all three.
10 Mistakes in Mobile Marketing
Mobile is not a niche – but it’s still seen as a niche play by too many brands. With anywhere from 3.5 to 4 billion mobile phone users, you’re missing a prime opportunity if you’re not using the mobile web to strengthen relationships with your present and prospective customers when they’re on the move.
[...]
Any site that doesn’t have handset detection, dynamic content formatting and URL redirects is missing out on giving the best user experience.
The design was centred on habitual use, not on ease of discovery or ease of learning. “When you adopt it, it is so efficient to use that you don’t want to change”.
[...]
The Swiss army knife approach was rejected. All features were removed by default and every 16feature was interviewed again for inclusion.
Morten Hjerde , en el artículo Designing the Sprint Instinct , hablando sobre el proceso de diseño de la interfaz táctil Sprint Instinct tal y como lo explicó Mike Lundy en la Design for Mobile conference.
La foto de la navaja suiza es de herzogbr, publicada bajo licencia Creative Commons.