webdebolsillo ahora en Facebook

Página de webdebolsillo

Siempre he pensado que es mejor cuando las cosas son fáciles 😀 Por eso he decidido crear un espacio en Facebook en el que puedas participar en webdebolsillo sin salir de Facebook, es la nueva página de webdebolsillo.

  • Es más fácil porque sin salir de Facebook puedes preguntar, como Pablo que preguntó sobre un cliente de Twitter para su teléfono y ya tiene su respuesta.
  • Muro, noticias, Twitter, encuestas y discusiones

    Todo junto. Imagino que te ha sucedido, a veces es muy dificil estar pendiente de un blog, hay tantos blogs o noticias por leer que es dificil seguir la pista a cada uno. Ahora con la página en Facebook puedes enterarte de todo en un solo lugar, los últimos artículos del blog o de los últimos tweets de @webdebolsillo.

  • Para compartir. ¿Tu blog ahora tiene versión móvil? Comparte las capturas de pantalla, dejanos tu dirección, queremos visitarlo 🙂 ¿Encontraste un nuevo programa para iPhone? avisanos porque nos puede servir.
  • Ideas. Son totalmente bienvenidas, puedes dar ideas para artículos o para mejorar la página.
  • Sin Spam. La idea es que estes enterado de todo lo que pasa con la web móvil, que preguntes, que participes y por eso sentiría mucho molestarte. Prometo nada de spam, solo información útil.

Visita la página de webdebolsillo en Facebook

Usar twitter en el teléfono

Usar Twitter puede crear adicción, ellos no lo dicen pero suele pasar, y por eso te dejo tres formas de twitter desde tu teléfono no importa en donde estes

TinyTwitter

Para twittear desde teléfonos Sony Ericsson, Nokia, Blackberry o cualquier otro con Java incluido

TinyTwitter en Blackberry

TinyTwitter es una aplicación hecha en Java (J2ME) que significa que funciona en muchos teléfonos,  incluyendo Sony Ericsson, Nokia, además de Blackberry y Windows Mobile.

TinyTwitter es bastante completo, además de tener las opciones básicas para twittear también incluye algunas que todavia lo hacen mejor, como por ejemplo:

  • Actualización automática para recibir nuevos tweets. Si mezclas esto con la opción de minimizar y de alerta (sonido o vibración si esta disponible) seguro no te pierdes ningún tweet.
  • Responder un tweet rápidamente (incluye automáticamente el nombre de la otra persona).
  • Es bastante configurable, desde la interfaz hasta la sincronización. Puedes elegir mostrar la imagen de los twitteros, activar las alertas de sonido, programar las actualizaciones automáticas o cambiar el tamaño de letra.
  • Access links, es una opción que busca enlaces en los últimos tweets y los muestra en una lista, solo para seleccionar y visitar.
  • Incluye mensajes directos, una opción que se agradece teniendo en cuenta que Twitter no ofrece esto en su versión móvil.
  • Además de las opciones anteriores incluye las vistas básicas para ver el timeline (últimos tweets de tus amigos), inbox (mensajes directos), user timeline (para ver a una solo contacto)

I love TinyTwitterLos contras de TinyTwitter son pocos comparados con las características, pero igual no esta demás mencionarlos:

  • Es feo, nada para presumir.
  • A veces es lento, tarda en reaccionar al cambiar de pantalla aunque si avisa que esta «haciendo algo» que no es mucho pero ayuda. Generalmente esto ocurre cuando lleva mucho tiempo ejecutandose, 30 mins o más.

Alternativas a TinyTwitter solo conozco JibJib, otro cliente de twitter en Java, aunque por supuesto no tan completo como TinyTwitter. He probado los dos y me quedo con TinyTwitter.

Descarga TinyTwitter desde la web oficial o ingresa desde tu teléfono a http://m.ttwt.at.

TwitterFon

Para twittear desde iPhone o iPod Touch.

Búsqueda de TwitterFonTwitterFon es bastante famoso entre los twitteros con iPhone, y la razón es que es muy bueno, incluso me atrevo a decir que es de los mejores, además de ser gratis.

De TwitterFon obtienes todas las opciones de Twitter: timeline(amigos), mentions (respuestas), mensajes directos, favoritos y búsqueda; pero además tiene otras opciones bastante útiles como

  • Cache, de tweets y de imágenes, que lo hace increíblemente rápido comparado con otros clientes similares.
  • Tendencias, búsqueda de tendencias y búsquedas almacenadas para guardar tus búsquedas favoritas.
  • Opciones de usuario: ver perfil, ver últimos tweets, opción de seguir (follow),  dejar de seguir (unfollow) o bloqueo de un usuario.
  • Respuesta rápida con un tap sobre la imagen de otro usuario.
  • Tweet en TwitterFonBuen sistema de respuestas con memoria, que recuerda lo que estabas escribiendo aunque cierres la app., opción de adjuntar imagen (con Twitpic), localización, borrado rápido y puedes elegir a tus amigos desde un menú para no escribir su nombre.
  • Actualización automática y Auto-scroll para ir a los tweets más recientes.
  • Navegador integrado, basado en Safari.

TwitterFon no tiene contras, cumple con todo lo necesario para twittear, sin embargo, si hay otras aplicaciones con más opciones, por ejemplo Tweetie.

Tweetie

Para twittear desde iPhone o iPod Touch.

Voy a escribir poco de Tweetie porque básicamente hace lo mismo que TwitterFon con la diferencia de que incluye algunas caracteristicas dignas de mención como:

  • Soporte de cuentas multiples. La razón por la que todavia lo uso en lugar de TwitterFon.
  • Mejor interfaz que TwiterFon. Más agradable y simple de usar.
  • Temas visuales (3).
  • Integración con Instapaper, un servicio web para guardar páginas para leerlas más tarde.
  • Buena integración con Twitpic, incluyendo vista en pantalla completa y configuración de la calidad de las fotos.

Tweetie tiene en contra el precio (no es gratis), no tiene cache por lo que es más lento y tampoco sincronización automática.

Twitter + Opera Mini

Para twittear desde Opera Mini en teléfonos donde este disponible.

Twitter en Opera MiniLa última opción de la lista es la versión móvil de Twitter junto a Opera Mini. Las ventajas de hacerlo desde Opera Mini frente a otros navegadores es que Opera Mini puede recordar nuestra sesión durante más tiempo, es más simple de usar y lo podemos configurar en la pantalla de favoritos (speed dial).

Las contras son las mismas que la versión móvil de Twitter, no hay mensajes directos, no resaltan las respuestas y carece de una forma de responder rápido un tweet. Por supuesto, esta es la última alternativa.


Este tema es una respuesta a la pregunta de Pablo en la nueva página de webdebolsillo en Facebook:

¿Que aplicación para twitter me recomiendan, tengo un sony ericsson w980, seria una aplicación java?

Detectar iPhone y aplicar estilos usando HTML o Javascript

Hace dos días les mostraba cómo crear un campo de texto con botón de borrar incluido, en ese ejemplo tuve que distinguir entre Safari de Safari Mobile (iPhone/iPod Touch) porque aunque ambos usan webkit aún muestran pequeñas diferencias en la forma de mostrar el HTML y CSS.

Detectar iPhone y aplicar estilos usando HTML

La forma de detectar el iPhone usando HTML y aplicar los estilos adecuados la descubrí en “CSS, JavaScript and XHTML Explained” .

Con un hack en la etiqueta <Link>

El hack consiste en agregar un estilo a través de la etiqueta link con un media type especial



	  
	  
		

One web

One web, una web, la web única, es un concepto que usa el W3C para describir a recursos en Internet ubicados bajo una misma dirección (URI: Unique Resource Identifier). Eso por supuesto es una definición un poco tosca de lo que es One Web.

One world One web! por PSD (CC)
One World – One Web por PSD

¿Qué significa una web única?

Una web única significa que todo el contenido que publiques debe estar alojado bajo una misma ubicación (URI), sin importar la herramienta de acceso (navegadores por ejemplo). Un contenido, una ubicación, en eso se resume la web única.

Usemos webdebolsillo como ejemplo:

webdebolsillo es un blog de desarrollo web móvil.
Si lo visitas desde tu PC ¿en donde lo encuentras? En http://webdebolsillo.com
¿y desde un iPhone? En http://webdebolsillo.com
¿y desde cualquier otro móvil? En http://webdebolsillo.com

Una misma úbicación (http://webdebolsillo.com) para un mismo recurso (blog de desarrollo de web móvil) sin importar la herramienta que uses para acceder a él (PC, iPhone o cualquier otro móvil).

Un mal ejemplo es Facebook:
Facebook es una red social para comunicarte con tus amigos.
Si visitas desde tu PC lo encuentras en http://www.facebook.com
desde un iPhone en http://iphone.facebook.com
y desde cualquier otro móvil en http://m.facebook.com

Un mismo recurso bajo tres ubicaciones diferentes.

Una web para todo

One web, o web única, es concepto fácil de entender, pero no lo es tanto conocer los beneficios que aporta o lo que involucra desarrollar bajo ese concepto.

Por esa razón el MWI Team publicó una serie de 3 artículos acerca de One Web: All webs in one, One Web for all, una serie de artículos tan interesante como útil. De la serie he tomado las ideas más importantes y las he intentado resumir aquí

Problemas de no tener una web única

  • Perdida de información. Un ejemplo conocido es el de la web móvil, en donde muchas veces se recorta el contenido solo para adaptarlo al móvil. Las personas estan en movimiento, quieren webs fáciles de navegar desde su móvil no necesariamente menos información. Ya lo mencione antes pero lo repito, acceder a la web desde el móvil no es algo que las personas hagan porque pueden, lo hacen porque quieren. Recuerda que el concepto de one web involucra ofrecer el mismo recurso, el mismo contenido.
  • Problemas con buscadores. Tener dos o más ubicaciones diferentes afectan al posicionamiento. Para un buscador la versión de escritorio es una página web diferente a la versión móvil, lo que afecta a esta última porque no va a recibir la misma cantidad de enlaces y por tanto no va a posicionar mejor (la cantidad de enlaces recibidos es utilizado por algunos buscadores para posicionar una página web).
  • Confusión con marcadores sociales. Los marcadores sociales no sirven únicamente para guardar también se usan para compartir páginas web. Imagina a una persona guardando y compartiendo la versión móvil de una web que no es única, dejando por un lado la confusión que puede causarle a esa persona, imagina a sus amigos teniendo una mala experiencia porque a pesar de navegar desde su PC recibieron la versión móvil de la web.
  • Branding (posicionamiento de marca). Posicionar una dirección de internet en la mente de las personas es mejor y más fácil. Tener múltiples direcciones genera confusión y disuelve el valor de tu marca/web.

Buenas practicas

  • Una ubicación (URI) para cada recurso.
  • Usa diferentes ubicaciones para distintos recursos.
  • La ubicación debe ser persistente.
  • Los recursos deben mostrar información previsible.
  • No uses diferentes URIs para un mismo recurso.

Una web no es una versión

Un error bastante común es pensar que One web es una sola versión. One web es la misma ubicación para un mismo recurso. No necesariamente la misma versión.

Puedes tener miles de versiones diferentes, para dispositivos y navegadores diferentes y aún así usar una misma ubicación con la misma información. Si quieres, y es recomendado, adaptada a cada dispositivo o navegador pero el mismo contenido. ¿Recuerdas el ejemplo de http://webdebolsillo.com? Encuentras la misma información en la misma dirección pero son versiones diferentes.

Consistencia temática

En el artículo original hay una frase que me gusto y traduzco libremente:

«Consistencia temática no significa que el contenido deba ser exactamente igual. Significa que sea lo más parecido posible»

  • La información debe ser la misma.
  • El color, logotipos y la plantilla en general deben de ser lo más parecido posibles.
  • La funcionalidad a través los dispositivos debe ser similar.

En otras palabras

  • Enfócate en el contenido o funcionalidad que estas ofreciendo
  • Asegúrate que el contenido principal de la página sea fácil de encontrar y que los elementos «secundarios» no capten la atención del usuario, incluso eliminándolos u ofreciendo versiones más «ligeras».
  • Prepara contenido alternativo en caso de no estar accesible desde algunos dispositivos
  • Desarrolla por defecto en una «base mínima» (compatible con la mayoría de dispositivos) y luego mejor la experiencia par cada dispositivo. Para lograr mejorar la experiencia entre dispositivos puedes usar
    • Estilos CSS. En el artículo original recomiendan los por medio (CSS Media Types) pero actualmente en la web móvil esto no es aplicable. La mayoría de navegadores móviles ignoran el media type.
    • Uso de scripts que degraden (benignamente) la experiencia dependiendo las características del dispositivo.

Piensa en los usuarios en movimiento

Para cerrar la serie de artículos de One Web y orientado a la web móvil, el MWI Team recomienda pensar en los usuarios en movimiento.

  • Piensa en la red a la que esta conectado el dispositivo (wifi, banda ancha, 3G, etc)
  • Piensa en el contexto social del usuario. ¿En donde esta? ¿qué esta haciendo?

El usuario puede cambiar de contexto y por tanto necesitas una web que también permita cambiar de contexto, incluso puede hacerlo a través de diferentes direcciones.

Como mencionan en el artículo esto no «rompe» con el concepto de una web única,  one web, si:

  • Mantienes y anuncias una ubicación única (canonical URI) para la página web. Esa ubicación debe ser usada como marcador y a partir de ella ofrecer las diferentes versiones del contenido.
  • Te aseguras que la página web enlace a las otras versiones, usando un enlace en la página web que los usuarios puedan seguir o con la etiqueta link dentro HTML (Más información en el artículo original).

En resumen

  • La web única sigue la arquitectura de la web.
  • One web no es una versión.
  • Una sola dirección debe ser usada cuando sea posible.
  • Las diferentes versiones de una web deben de ser temáticamente consistentes.
  • El contexto del usuario debe ir acorde más allá del dispositivo que usa.
  • Mantén la ubicuidad en mente cuando produzcas contenido para reducir el número de versiones necesarias para las adaptaciones.
  • Diferentes contextos pueden ir más allá de diferentes versiones.

Más información sobre One web

Cómo crear un campo de texto con botón de borrar integrado

El titulo parece confuso pero el tema es bastante sencillo, es acerca de cómo crear un campo de texto con un botón incluido para borrar el campo, como el que usan las aplicaciones nativas de iPhone o Google, te muestro una imagen para que se entienda mejor:

Google y su campo de texto con botón para limpiar

En este tutorial voy a explicar cómo conseguir el efecto en webkit, específicamente para iPhone/iPod Touch, aunque con algunos cambios se puede llevar a muchos otros navegadores.

Para empezar

Crear el campo es bastante sencillo, básicamente es el HTML de toda la vida, el efecto se logra con CSS y un poco de Javascript. Para hacerlo solo necesitas un editor de texto o HTML y un navegador que utilice webkit, de preferencia Safari.

El resultado final es un «campo de texto» como este

Campo de texto con botón de borrado

Escribo «campo de texto» entre comillas porque en realidad son tres elementos, una etiqueta (label), un campo de texto (input text) y un boton (input button).

Campo de texto sin estilo

Integrar los 3 elementos y conseguir un super campo de texto

HTML

Como ya lo dije mencione antes, el efecto esta en CSS, aunque vamos a empezar con el HTML:



Si te puedes dar cuenta no hay nada extraordinario, quizás solo el nombre de las clases y el valor del botón que es el mismo que id del campo de texto, de momento no nos sirve y lo veremos más adelante, en el código javascript.

Las clases no tienen nada especial, excepto que todas comienzan con ts-, esto es porque el ejemplo es parte de un framework en el que estoy trabajando, Touchscript, y nada más que eso.

Estilo CSS

Ahora vamos con el estilo del campo de texto. La idea es engañar al ojo haciendolo creer que es un solo campo de texto, cuando en realidad son tres.

Etiqueta (ts-txtReset ts-label)

Cree el estilo la etiqueta con bordes redondeados, excepto del lado derecho que es donde se une con el campo de texto, también especifique el padding y el tamaño de letra, ambos para ajustarlo al campo de texto (con el padding por defecto no encajan y la fuente varia). Además cambie el color de la fuente a gris (#555) para resaltar la diferencia.

.ts-txtReset.ts-label{
 border:solid 1px #aaa;
 border-width:1px 0 1px 1px;
 padding:2px 0px 3px 4px;
 background:#fff;
 color:#555;
 margin:0;
 font-size:1em;
 /* WEBKIT */
 -webkit-appearance: none;
 -webkit-border-top-left-radius:4px;
 -webkit-border-bottom-left-radius:4px;
}

Campo de texto (ts-txtReset ts-txt)

Con el campo de texto es prácticamente lo mismo, añadir bordes excepto de los lados para ajustar a la etiqueta y el botón. Además añadí una regla exclusiva de webkit y que pudieron ver arriba, es -webkit-appearance: none;. Esta sirve para eliminar la sombra que Safari añade al campo de texto, de no quitar la sombra se perdería el efecto porque la etiqueta y el botón no tienen esa sombra y se nota «el salto». También puedes ver que quite los bordes redondeados con -webkit-border-radius:0;

.ts-txtReset.ts-txt{
 border:solid 1px #aaa;
 border-width:1px 0 1px;
 padding:3px 2px 2px 0;
 font-size:1em;
 background:#fff;
 margin:0;
 /* WEBKIT */
 -webkit-appearance: none;
 -webkit-border-radius:0;
}

Botón (ts-txtReset ts-btn)

Casi para cerrar los estilos añade el del botón, de nuevo la misma que los anteriores pero con dos cambios notables. El primero es la imagen de fondo y el segundo es que no muestra texto (aunque si tiene value).

El fondo lo incluyo con background y con bastante padding lateral(10px) para hacer el botón más grande.

El texto se oculta con text-indent:-500em (lo envía muy lejos 😉 ) y por si acaso agrego overflow:hidden (para ocultar lo que este muy lejos).

.ts-txtReset.ts-btn{
 border:solid 1px #aaa;
 border-width:1px 1px 1px 0;
 padding:2px 7px 3px;
 font-size:1em;
 margin:0;
 background:#fff url(icono-reset.png) no-repeat center center;
 text-indent:-500em;
 overflow:hidden;
 /* WEBKIT */
 -webkit-appearance: none;
 -webkit-border-radius:0;
 -webkit-border-top-right-radius:4px;
 -webkit-border-bottom-right-radius:4px;
}

Termino el estilo agregando un estilo «base» al body:

body{font-family:helvetica, arial, sans-serif;}

Hasta aquí conseguiste el efecto visual del cuadro de texto, ahora hay que agregar la funcionalidad con javascript,

Hacer que el botón de borrar borre

La funcionalidad del botón de borrar igual es sencilla y se logra con javascript.

Lo primero es crear la función de borrar, o limpiar como le digo yo.

// TouchScript txtReset Limpia
function tsTxtResetLimpia(ev){
 txtVictima=document.getElementById(ev["target"].value);
 if(txtVictima){
  txtVictima.value="";
  txtVictima.focus();
 }
}

El parámetro ev es un objeto de evento, el «lanzador» del evento lo envía automáticamente, y de él lo único que importa es el campo target, que es lo mismo que el botón que disparo el evento (en nuestro ejemplo btnNombre). Del botón (target) tomamos el campo value que contiene el id del campo de texto que debe borrar (esa era la idea de usar el id del campo de texto en el value del botón). Luego compruebo si ese id existe, si existe borro el contenido y lanzo la función focus para el campo de texto.

La función de limpiar esta lista, ahora hay que asignársela al botón (btnNombre) usando addEventListener y el evento click.

// Inicializa las acciones al cargar la pagina
addEventListener('load',function(){
 // Asigna el evento click al boton btnNombre
 document.getElementById('btnNombre').addEventListener('click',tsTxtResetLimpia,false);
},false);

Safari en PC muestra una diferencia en el padding respecto a la de Safari mobile (iPhone/iPod) y para que se vea bien en ambos agregue un «mini hack».

//Mini hack para corregir padding superior en Safari para PC
if(navigator.platform!="iPhone"&&navigator.platform!="iPod"){
 document.write('<style>.ts-txtReset.ts-label{padding-top:3px;}</style>');
}

Listo, con eso tienes un campo de texto con etiqueta y botón de borrar integrados. El código completo del ejemplo lo puedes ver en txtreset.txt, te recomiendo revisarlo para no olvidar cosas como la etiqueta meta viewport.

Ejemplo final

Notas

  • El ejemplo es una muestra de lo simple que es mejorar un control para formulario y mejorar la usabilidad de una página web.
  • Por la misma razón que solo es un ejemplo, aún se puede mejorar en muchos sentidos. Especialmente hacerlo con código no intrusivo, para no interferir si javascript esta desactivado, y poderlo hacer compatible con más navegadores además de Safari, o webkit en general.
  • Más adelante incluiré este campo de texto en Touchscript para que sea más fácil usarlo.

Material

Tips de desarrollo de widgets para móviles

Mobile Widgets por Dan Taylor (CC)

Mobile Widgets por Dan Taylor (CC)

Hoy en el blog de Betavine, Mobile Web Widgets, encontré una lista de consejos al desarrollar widgets para móviles. Me gusta la lista, especialmente porque aplica en el desarrollo web móvil.

Los dejo con una traducción un poco libre de Technical tips for mobile widget development:

  • Automaticamente selecciona el campo principal cuando sea posible, es más fácil que usar el joystick del teléfono para llegar a él.
  • Los efectos al colocarte encima de un elemento (Hover) son importantes para la usabilidad. Haz evidentes los botones porque a veces es difici llegar a ellos.
  • Asegurate que el móvil tenga la fuente que tu usas y especialmente que se vea bien. las fuentes cursivas pueden no verse bien.
  • No redimensiones imágenes usando HTML, los teléfonos lo hacen mal y se ve mal.
  • Asegurate de tener un buen icono que se vea genial en el «Administrador de Widgets».
  • Usa CSS Sprites porque es más fácil migrar tu widget a la web..
  • No hay un manejador de evento keypress, tenlo presente si planeas crear un juego.
  • Recuerda, el teléfono es rápido, pero no tan rápido como tu computadora. Tampoco la conexión a Internet, optimiza lo más que puedas.

Como pueden ver, no son consejos fuera de este mundo, son consejos muy básicos pero siempre debemos tener en cuenta al desarrollar para la web móvil, o los widgets para móviles.