Ajuste de Texto en iPhone

  • 21/12/2008
  • 10:16 pm
  • unijimpe

iPhone trae Safari como browser predeterminado el cual interpreta a la perfección las paginas HTML, además para facilitar la lectura tiene la propiedad de ajustar el tamaño del texto, es decir los textos son re-escalados y mostrados mas grandes mejorando la legibilidad pero en ocasiones alterando la distribución que habíamos planeado.

iphone-noresize

CSS para iPhone
Hay varias formas de detectar el browser para iPhone y aplicar CSS especificos pero uno de los mas sencillos es un selector especial que nos permitirá aplicar reglas solo aplicables al iPhone.

  1. @media screen and (max-device-width: 480px) {
  2.    /* iPhone CSS */
  3. }

Esto lo podemos incluir en nuestra hoja de estilos, con lo cual agregamos funcionalida para iPhone.

Ajustando el texto en iPhone
Para controlar el tamaño de los textos se puede hacer uso de la propiedad -webkit-text-size-adjust con el cual podemos indicar como interpretar el tamaño de las tipografías. Esta propiedas puede tener los siguientes valores:

  • none: el texto no será escalado y se mostrará en su tamaño original.
  • auto: propiedad por defecto y redimensiona los textos para mejorar la legibilidad.
  • nn%: porcentaje que indica con que factor de zoom se mostrarán los textos.

En mi caso prefiero que el texto no se re-escale para mantener el aspecto que tiene el diseño en los browser normales, entonces la hoja de estilos sería.

  1. @media screen and (max-device-width: 480px) {
  2.     html { -webkit-text-size-adjust: none; }
  3. }

Pueden encontrar mas información acerca de como preparar contenido para iPhone en Designing Content for iPhone.

Posts Relacionados

MoFuse Versión movil de tu Web

  • 03/11/2008
  • 9:46 pm
  • unijimpe

MoFuse es un servicio que te permitirá tener rápidamente una versión para dispositivos móviles de tu Blog o Website (Siempre y cuando tenga Feed), además de ello te da una serie de opciones para personalizar la versión para móviles e incluso monetizar con AdSense.

El registro es muy sencillo, para ello necesitas primero ingresar el URL de tu web, te mostrará una preview de la versión para dispositivos móviles (Celulares, iPhone, iPod Touch), luego te permitirá seleccionar un subdominio, un nombre de usuario y clave y listo ya tienes la versión móvil de tu web. Nosotros hemos creado una versión móvil de este blog de prueba en: http://unijimpe.mofuse.mobi/.

Entre los puntos mas interesantes de este servicio es que podemos configurar un subdominio personalizado, para ello es necesario hacer una modificaciones en nuestro administrador de dominio, también se puede personalizar los colores de la versión para móviles, incluso se puede configurar el favicon para iPhone, todo ello con una interfaz muy sencilla de utilizar.

Adicionalmente el servicio permite monetizar esta versión, para ello agregar tu identificador de AdSense y automáticamente se mostrarán los anuncios AdSense, aunque con este punto hay un detalle y es que las ganancias por publicidad son 50/50 es decir la mitad es para el MoFuse. Finalmente te brindan un panel de reportes de visitas muy detallado, con esta información puedes orientar adecuadamente el contenido de tu web.

Posts Relacionados

Massive News iPhone Theme

  • 22/09/2008
  • 8:31 am
  • unijimpe

Massive News Mobile Edition es un Theme para Wordpress adaptado especialmente para iPhone. Con un excelente diseño y distribución muy cuidada puedes crear una versión para iPhone de tu web de forma rápida.

Pueden ver una versión demo de este Theme en Massive News Demo. Este Theme tiene la opción para colocar Featured Post acompañados de una imagen de 90x90 pixels lo cual lo hace mucho mas vistoso.

Instalación
Pueden descargar el Theme en MassiveMobile.zip, el cual contiene dos carpetas: massive-mobile el cual debes colocar el el directorio de Themes (wp-content/themes) y la carpeta pagenavi el cual es un plugin para tener paginación de resultados avanzada el cual debes colocar el directorio de plugins (wp-content/plugins).

Ahora si deseas que tu blog se vea con este Theme sólo para los usuarios que accedes desde iPhone o iPod Touch, debes verificar que browser utiliza el usuario antes de acceder. Si no sabes como hacerlo aNieto2K ha escrito una explicación muy detallada de como hacerlo en aNieto2k ahora personalizada para iPhone e iTouch, para ello debés crear un archivo llamado my-hacks.php y colocarlo en directorio principal de tu blog con el siguiente código:

  1. function is_iphone($user_agent) {
  2.     return (bool)eregi('(iPhone|iPod)', $user_agent);
  3. }
  4. function theme_for_iphone($tpl) {
  5.     if (!is_iphone($_SERVER['HTTP_USER_AGENT'])) return $tpl;
  6.     else return "massive-mobile";
  7. }
  8. add_filter('template', 'theme_for_iphone');

Como pueden ver, con unos pasos sencillos pueden tener una versión optimizada para dispositivos mobiles con un agradable diseño.

Posts Relacionados