iPhone Transit Planner por illustir (cc-by)

Esta semana pude leer un artículo en el blog de Pablasso llamado ¿Cómo debe ser el Internet para móviles? que es acerca de cómo WAP y WAP2 han quedado obsoletos con la llegada del iPhone de parte de Apple, y como él acertadamente menciona, ahora no hay tantas limitaciones de memoria o software como antes. Hasta aquí puedo darle la razón, con Apple y Android soportando HTML5 ¿quién quiere usar WAP?

Por otro lado termina el artículo con un par de comentarios en los que no estoy de acuerdo, vamos por partes:

Pablasso: En mi mundo ideal los móviles deberían de adaptarse a mostrar los contenidos lo más fielmente posible, y si no tienen la pantalla adecuada, entonces proveer aplicaciones para obtener esos contenidos por otros medios, como puede ser RSS

Es un error grave pensar que la web debe ser igual todo el tiempo y en todo lugar, especialmente  en el campo de los móviles.

Web móvil va más allá de adaptar al navegador, importan las capacidades del dispositivo así como también importa el contexto (lugar, hora, tarea, etc) en donde recibe la información, y para apoyar esto citó a la guía breve de web móvil de la W3C:

W3C: Es importante tener en cuenta que existen grandes diferencias entre usuarios móviles y usuarios fijos, como son los diferentes tipos de contenido que manejan, las capacidades de los dispositivos que utilizan (pantallas pequeñas) y el contexto en el cual el usuario recibe el contenido (por ejemplo, en el autobús).

Mostrar en el móvil exactamente lo mismo que en la PC no es siempre lo mejor, aunque también es cierto que un buen navegador, como Safari Mobile, puede ayudar mucho a navegar sobre esas webs no optimizadas para móviles y crear una mejor experiencia web que WAP o WAP2.

iPhone junto al iPod Touch son buenos dispositivos con un excelente navegador pero están muy lejos de competir contra una PC. En un día normal de navegación he llegado a bloquear Safari Mobile hasta 3 veces, no puedo cargar más de 2 webs “normales” (no adaptadas a móviles) y menos usar Flash.

De nuevo, la web móvil no es acerca de un navegador, hay que considera rendimiento (hardware), compatibilidad (software), velocidad de transferencia (conexión) y costo (de conexión, del móvil, etc.).

Pablasso: A menos que sea punto clave para tu negocio, yo no me preocuparía en ofrecer una versión web para móviles con navegadores inferiores al iPhone.

Tengo que aceptar estoy de acuerdo, si no es clave para tu negocio no debes preocuparte por desarrollarlo, porque para todo hay mercado y es bueno enfocarte en el tuyo. Por ejemplo, si el 90% de las visitas desde móviles provienen de iPhone ¿qué sentido tendría invertir tiempo y dinero en desarrollar una web WAP?

Sin embargo, no hay que olvidar que el enfoque de la web es lograr el mayor alcance posible, independientemente del medio, el dispositivo e incluso de limitaciones físicas. De allí la importancia de apegarse a estándares y no desarrollar solo para uno.

Más información sobre la web móvil

• Introducción a la web móvil.
• One web. Un artículo explicando cómo funciona el concepto de web única.
• Alzado escribe un buen artículo sobre Cómo diseñar para la web móvil. Una aproximación práctica. Nada complicado, solo un buen acercamiento a lo que la web móvil involucra.

Temas relacionados

• Usar twitter en el teléfono
• Disfraza Firefox de móvil con User Agent Switcher
• Cómo crear un campo de texto con botón de borrar integrado

Comenta | Enviar a Twitter

CC 2009 ivanmendoza para webdebolsillo (@webdebolsillo)

Escuchar acerca de estadísticas en la web móvil es algo extraño, es una herramienta necesaria pero pocas veces mencionada.

Unas semanas atrás conocí Percent Mobile qué apareció precisamente como una herramienta de estadísticas web enfocada en móviles. La herramienta es gratuita pero esta bajo beta privada (necesitas invitación), por suerte llegue rápido y conseguí uno de los 500 códigos que regalo Percent Mobile para los lectores de TechCrunch.

El proceso para instalarlo es simple, te registras, agregas el código de Percent Mobile en tu sitio web, si usas versión móvil (o plugins para WordPress como Mobile Pack) también lo incluyes en el tema para que funcione.

Percent Mobile en detalle

Percent Mobile es un servicio bastante sencillo, una sola página con información muy visual (iconos, gráficas y demás).

Información general

Es el núcleo de Percent Mobile es la primera fila de información, las información básica: Tráfico desde móviles (porcentaje %), número de dispositivos diferentes, redes (telefónicas), países y acceso por WiFi

Ecosistema de móviles

Un listado de los móviles que más visitan tu sitio web dividos por porcentaje.

Marcas de móviles

Es un top 5 de las marcas de móviles que visitan tu web

Dimensiones de pantalla

Proveedores de servicio (telefónicas)

Países

¿Es útil Percent Mobile?

Como sistema de estadísticas para manejar una campaña de marketing no es la mejor opción, es limitado y muy básico en general. Olvida reportes personalizados, detalles como “tiempo promedio en la página” o referrers por ejemplo, datos esenciales en este caso.

Desde otro punto de vista Percent Mobile es una herramienta bastante amigable, muestra la información necesaria para que un blogger conozca a sus “visitantes móviles” sin complicarse en reportes o información innecesaria. Y precisamente pienso que este público al que esta enfocado Percent Mobile, para lo cuál es un servicio útil.

Quizás lo único que se extraña en Percent Mobile es la división por tiempo, en otras palabras un historial. Es imposible creer que no lo incluyan siendo tan necesario, porque luego de un tiempo sabes que tienes 32% (ejemplo) de visitas desde móvil, pero no sabes cuantas fueron recientes, o de hace 4 meses. Una falta casi imperdonable

Por si te interesa, la empresa que creo Percent Mobile, TipTags, también ofrece otro servicio de métricas para web móvil que por lo visto es mucho más completo y profesional, aunque un poco “caro”.

¿Sabes cuantas visitas tienes desde moviles?

Temas relacionados

• Disfraza Firefox de móvil con User Agent Switcher
• Cambiar el user agent en Safari
• WordPress Mobile Pack podría convertir a WordPress en protagonista de la web móvil

2 comentarios | Enviar a Twitter

CC 2009 ivanmendoza para webdebolsillo (@webdebolsillo)

WordPress Mobile Pack se instala fácil  y los resultados son impresionantemente buenos, de un blog normal no apto para móviles puedes llegar a una puntuación de 5/5 en ready.mobi, de 97/100 en el validador de la W3C para móviles (resultados de webdebolsillo.com) y sin necesidad de enredarte en problemas técnicos. Esto es mucho decir porque no es tan sencillo de lograr.

Por otro lado WordPress Mobile Pack no es un plugin atractivo para cualquier bloggero, porque desde el punto de vista de resultados y estándares esta muy bien pero del lado del visitante suele ser un desastre. Un diseño desordenado, confuso y feo que no mejora la experiencia desde el punto de vista visual. Claro, lo importante del blog es el contenido pero como visitante y bloggero también se agradece un diseño agradable y fácil de usar.

Otro punto en contra, al menos para blogs en español, es el idioma. El tema por defecto esta en inglés y aunque no sea complicado no se ve bien mezclar ambos idiomas. Más adelante trabajaré en una traducción así que esperen noticias.

Rendimiento de WordPress Mobile Pack

Por curiosidad se me ocurrió hacer pruebas para conocer la diferencia de peso entre la versión estándar de WordPress, la versión de WordPress Mobile Pack y la de MobilePress.

El peso lo medí usando Firebug (net) en Firefox junto a la extensión User-Agent Switcher para simular la visita desde un móvil. Use 4 tipos de páginas diferentes: portada, un tema con imagen grande, un tema corto y un tema extenso.

La mejora de peso con WordPress Mobile Pack (WMP) es bastante notable, con ahorro de más de la mitad en la mayoría de páginas, seguido de MobilePress sin javascript, siempre y cuando no se incluyan imágenes. En este aspecto el acierto de WMP es el redimensionamiento de imágenes, que por defecto reduce las imágenes a 124x124px, o en caso de integrarse con DeviceAtlas las ajusta al dispositivo.

El mayor fallo de MobilePress es el javascript, que a pesar de ser una versión reducida de jQuery, sigue agregando 55 kb a cada página.

Fallas

Como toda aplicación recién lanzada WordPress Mobile Pack aún tiene fallas, que aunque son pocas y no criticas me parece importante mencionarlas. También me parece justo mencionar que el equipo de desarrollo sigue mejorando el plugin y han estado actualizando (la última actualización fue hace 6 días aproximadamente).

• [Error] Al utilizar la opción Remove Media las imágenes pueden fallar porque el plugin elimina el atributo src de la etiqueta img (imagen). Desactivando la opción se soluciona.
• [Usabilidad] Los enlaces en menús o listas son pequeños y están muy cerca, lo que aumenta los fallos al presionar un enlace desde una pantalla táctil.
• [Apariencia] La apariencia es muy desordenada y demasiado genérica. Como una primera versión esta bien pero a largo plazo es buena idea mejorarla. Incluso MobilePress cuenta con un diseño más ordenado, sin mencionar a WPTouch que tiene un diseño muy bueno para iPhone.
• [Compatibilidad] Como mencione en el tema anterior, WordPress Mobile Pack no es compatible con MobilePress porque fallan ambos, ni con WPhone porque WMP reemplaza la funcionalidad de WPhone. Con WPTouch es compatible pero este reemplaza el diseño de WMP, y al desactivar la versión móvil WMP se activa, en otras palabras siempre estará una versión móvil.

En resumen

Wordpres Mobile Pack es la mejor opción actualmente si buscas un blog compatible con cualquier móvil, evitándole cargos altos y esperas largas a tus visitantes, por otro lado sacrificas el diseño y la personalidad de tu blog. No se compara con WPTouch en diseño para iPhone por ejemplo, sin embargo, no tienen el mismo enfoque, Wordpres Mobile Pack intenta cumplir todos los estándares posibles y adaptar la experiencia para muchos móviles, mientras que WPTouch se enfoca en mejorar la experiencia solo para iPhone/iPod Touch aprovechando todas las características que estos ofrecen.

Temas relacionados

• Disfraza Firefox de móvil con User Agent Switcher
• Cambiar el user agent en Safari
• WordPress Mobile Pack podría convertir a WordPress en protagonista de la web móvil

Comenta | Enviar a Twitter

CC 2009 ivanmendoza para webdebolsillo (@webdebolsillo)

La  noticia del lanzamiento paso casi desapercibida en la comunidad móvil pero yo no podía ignorarla por la importancia que tiene ¿te imaginas cada blog de WordPress con versión móvil? (si, serían muchos blogs )

Si me sigues en Twitter seguro pudiste ver que estuve trabajando con la extensión, y luego de realizar algunas pruebas ya la he instalado en webdebolsillo.

Para no extender demasiado el tema he decidido dividirlo en dos partes, en la primera parte voy a hacer un rápido repaso por las características de WordPress Mobile Pack y su funcionamiento en general. En la segunda parte, que publicaré más adelante, daré mis comentarios sobre la extensión y resultados de algunas de las pruebas.

Vamos con la primera parte.

¿Qué incluye el Mobile Pack para tu blog?

• Cambiador de temas o Mobile switcher, es la funcionalidad base del Mobile pack y realiza la detección del móvil, a través de user-agent, del dominio móvil o de ambas.
• Tema base para móvil, es una adaptación de tema para WordPress que cumple con los estándares XHTML-MP (Mobile Profile).
• Temas adicionales, en resumen son los temas que mejoran la apariencia del tema base con colores y puedes utilizarlos para crear tu diseño.
• Adaptación al dispositivo móvil. Consiste en una serie de modificaciones para ajustan aún más el blog para mejorar la experiencia desde el móvil. Dentro de las modificaciones se encuentran
  • Remove media para eliminar objetos embedidos (Flash por ejemplo). Durante las pruebas tuve conflicto con esta opción, revisa más adelante para más información.
  • Ajuste de imágenes (Shrink images) para adaptarlas al móvil, si usas DeviceAtlas junto al Mobile Pack hace el ajuste al tamaño del dispositivo, de lo contrario redimensiona las imágenes por defecto a 124px.
  • Paginación de artículos extensos. Simple como eso, crea varias páginas para ver un gran artículo sin extender el scroll.
  • Simplificación de estilos, que consiste en eliminar cualquier estilo “especial” usado en línea (al escribir un tema por ejemplo).
• Integración con DeviceAtlas. DeviceAtlas es una herramienta en línea que proporciona información sobre dispositivos móviles, el WordPress Mobile Pack se integra con ella para realizar mejores adaptaciones del blog. Además permite a los desarrolladores de temas acceder a esa información a través de WordPress. Requiere tener una cuenta en DeviceAtlas para poder usarla.
• Ajuste del panel de administración para móviles. Convierte y limita el panel de administración para hacerlo compatible desde el móvil. Desde el móvil puedes crear un nuevo tema, editarlo, ver los comentarios y cambiar algunas opciones.
• Publicidad móvil. WordPress Mobile Pack permite incluir publicidad para la versión móvil usando AdMob o Google Mobile ads. Nada realmente nuevo aunque si facilita el proceso si planes rentabilizar tu sitio web con tráfico desde móviles.
• Barcode widget es una idea genial, aunque quizás no tan útil en este lado del mundo, consiste en mostrar un código de barras (QR-Code en realidad) en tu blog para que con solo tomar una foto desde el móvil pueda capturar la dirección de la versión móvil. Además incluye una lista de enlaces hacía lectores para este tipo de código.

Cómo instalar WordPress Mobile Pack

Todas las características se obtienen instalando una sola extensión, para hacerlo en WordPress 2.7 sigue estos pasos:

1. Ingresa al panel de administración de tu blog en WordPress y ve a la sección de Plugins.
2. Luego en el menú selecciona Add new y en el buscador escribe WordPress Mobile Pack. También puedes descargar la extensión, en ZIP, desde la página oficial.
3. Una vez la instalas debes activarla desde el área de Plugins –> Activate (Activar).
4. Luego en la sección de Apariencia (Appearance) vas a encontrar tres nuevos enlaces: Mobile Theme, Mobile Widgets y Mobile Switcher.
5. Mobile Theme te permite configurar todas las opciones para adaptar mejor tu blog a los dispositivos móviles. En esta sección te recomiendo desactivar la opción “Remove media”, que es la encargada de deshabilitar los objetos flash u otro tipo de objetos embedidos porque tuve problemas con las imágenes, esta opción elimina el atributo img que contiene la dirección de la imagen y no muestra las imágenes.
6. Mobile Widgets es para seleccionar que widgets quieres usar en la versión móvil. Te muestra únicamente los que estén activados en la versión normal.
7. Mobile Switcher muestra las opciones para detectar los dispositivos móviles, como comente antes puedes hacerlo a través del user-agent o del dominio. En esta sección también puedes elegir el tema para móvil que deseas utilizar.
8. Listo, ya tienes configurado tu wordpress para móviles

Actualización importante:

Lesther hizo bien al recordarme que WordPress Mobile Pack falla al usarse al mismo tiempo que  MobilePress. Con el plugin WPhone funciona bien pero deshabilita las mejoras de WPhone. Con el plugin WP Touch sucede algo curioso, WP Touch funciona perfectamente pero al desactivar la versión móvil (al final de la página) se activa la versión de WordPress Mobile Pack, esto significa que siempre veras una versión móvil del blog, aún cuando el visitante no lo desee. Más información sobre estas extensiones en Plugins para presumir tu blog desde el teléfono.

Temas relacionados

• Disfraza Firefox de móvil con User Agent Switcher
• Cambiar el user agent en Safari
• Introducción a la web móvil

2 comentarios | Enviar a Twitter

CC 2009 ivanmendoza para webdebolsillo (@webdebolsillo)

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

<!--[if !IE]>
–>
<link media="only screen and (max-device-width: 480px)" type="text/css" rel="stylesheet" href="iphone.css" />
<!–<![endif]–>

Only screen es detectado por la mayoría de navegadores mientras que (max-device-width: 480px) solo por el iPhone y iPod Touch. De esta forma la hoja de estilo solo es cargada por el iPhone/iPod Touch. Se añaden los comentarios condicionales para Internet Explorer, porque según comentan en el blog original, algunas versiones de Internet explorer cargan la el estilo para iphone.

Con un hack en la etiqueta <style>

De la misma forma anterior se puede aplicar el estilo necesario en la etiqueta Style directamente, de esta forma

 
<style media="only screen and (max-device-width: 480px)" type="text/css">
  .texto{color:blue;}
</style>
 

Detectar iPhone y aplicar estilos usando Javascript

La forma de detectar el iPhone con Javascript la utilice en el ejemplo anterior del campo de texto, y aunque es funcional es un poco más complicada que la anterior y requiere de Javascript.

if(navigator.platform=="iPhone"||navigator.platform=="iPod"){
 document.write('
<style> texto{color:blue;};</style>
 
’);
}

En este caso use la variable platform del objeto navigator de Javascript, que en el caso del iPhone devuelve “iPhone” y en del iPod Touch “ipod”.

Demo

Los dejo con algunas capturas del resultado del segundo método en diferentes navegadores, para el ejemplo: Safari Mobile, Firefox, IE y Safari.

Safari Mobile (iPod Touch)

Firefox

Internet Explorer

Safari (Windows)

El ejemplo lo encuentras en http://webdebolsillo.com//sandbox/hacks-safari-mobile/

Temas relacionados

• Usar twitter en el teléfono
• Cómo crear un campo de texto con botón de borrar integrado
• Controlar windows desde tu iPhone/ipod Touch

Comenta | Enviar a Twitter

CC 2009 ivanmendoza para webdebolsillo (@webdebolsillo)

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

• All webs in one, One Web for all (inglés, artículo original).
• One web por W3C (PDF, 4.9MB, español)
• Mobile Best Practice (Inglés, artículo principal)
  • One Web (Sección 3.1)
  • Thematic Consistency of Resource Identified by a URI (Sección 5.5.1)

Un comentario | Enviar a Twitter

CC 2009 ivanmendoza para webdebolsillo (@webdebolsillo)

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

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).

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:

<label for="txtNombre" class="ts-txtReset ts-label">Nombre:</label>
<input id="txtNombre" class="ts-txtReset ts-txt"type="text" />
<input id="btnNombre" class="ts-txtReset ts-btn" type="button" value="txtNombre" />

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.

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

• Ejemplo: http://webdebolsillo.com/sandbox/touchscript/txtreset/
• Archivos del ejemplo: txtreset.zip (18.9kb)
  • index.html
  • icono-reset.png
  • icono-reset.psd
  • txtreset.txt (código fuente, lo mismo que index.html)

Temas relacionados

• Usar twitter en el teléfono
• Cambiar el user agent en Safari
• Controlar windows desde tu iPhone/ipod Touch

2 comentarios | Enviar a Twitter

CC 2009 ivanmendoza para webdebolsillo (@webdebolsillo)

Si vamos a enlazar el mundo,
el móvil será nuestro mouse.

frase vista en una muy buena presentación de John Pettengill acerca de la web móvil llamada An Internet Watered Down or, hot to save the mobile web. Si estas diseñando para la web móvil, o piensas hacerlo, debes ver esta presentación.

Temas relacionados

• Disfraza Firefox de móvil con User Agent Switcher
• Cambiar el user agent en Safari
• WordPress Mobile Pack podría convertir a WordPress en protagonista de la web móvil

Comenta | Enviar a Twitter

CC 2009 ivanmendoza para webdebolsillo (@webdebolsillo)

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.

Temas relacionados

• Disfraza Firefox de móvil con User Agent Switcher
• Cambiar el user agent en Safari
• WordPress Mobile Pack podría convertir a WordPress en protagonista de la web móvil

Comenta | Enviar a Twitter

CC 2009 ivanmendoza para webdebolsillo (@webdebolsillo)

La forma de cambiar el User Agent en Safari es distinta, básicamente porque Safari ya incluye una lista de user agents configurados que hace más fácil todo, aunque por otro lado es más limitado porque solo permite tener un user agent personalizado, y no muchos como User Agent Switcher.

Para cambiar el user agent en Safari primero tienes que activar el menú de desarrollo:

1. Edición –> Preferencias…

1. Ve a la pestaña Avanzado –> Activa la opción “Mostrar el menú de Desarrollo en la barra de menús”

Listo, ya tienes el menú de desarrollo con la lista de User agent que puedes usar, incluyendo el user agent del iPhone y iPod Touch

Para agregar un user agent extra usa la opción “Otra…” al final del menú

y luego escribe el user agent que deseas usar

Recuerda que Safari solo te deja utilizar un user agent personalizado a la vez, así que elige sabiamente cual vas a usar o usa Firefox

En el tema anterior, acerca de User Agent Switcher, encuentras una lista de user agents de móviles.

Temas relacionados

• Disfraza Firefox de móvil con User Agent Switcher
• Cómo crear un campo de texto con botón de borrar integrado
• WordPress Mobile Pack podría convertir a WordPress en protagonista de la web móvil

3 comentarios | Enviar a Twitter

CC 2009 ivanmendoza para webdebolsillo (@webdebolsillo)