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:

PHP:
  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

Detectar Browser iPhone

  • 04/09/2008
  • 1:30 am
  • unijimpe

Actualmente hay muchos usuarios que acceden desde dispositivos mobiles a nuestras web, entre ellos iPhone el mas popular y mas avanzado. En esta ocasión veremos algunas formas de detectar que el usuario esta accediendo desde un iPhone o iPod Touch para posteriormente redireccionarlo a una versión optimizada de nuestro web.

HTTP_USER_AGENT
El HTTP_USER_AGENT es header enviado que indica las características del navegador utilizado. Si por ejemplo accedemos utilizando Firefox, esta propiedad sería de la forma:

CODE:
  1. HTTP_USER_AGENT=Mozilla/4.0
  2. (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

A diferencia de ello si accedemos utilizando Safari de iPhone o iPod Touch este sería de la forma:

CODE:
  1. HTTP_USER_AGENT=Mozilla/5.0
  2. (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+
  3. (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3

Entonces utilizando esta propiedad vamos a detectar cuando un usuario accede desde un iPhone.

Utilizando PHP
Si utilizamos PHP, podemos hacer uso de la variable global $_SERVER en donde buscamos la palabra iPhone, para ello creamos la siguiente función:

PHP:
  1. function iPhoneCheck() {
  2.     $browser = strpos($_SERVER['HTTP_USER_AGENT'], "iPhone");
  3.     if ($browser === false) {
  4.         return false;
  5.     } else {
  6.         return true;
  7.     }
  8. }

Luego para utilizamos esta función y podemos ver el ejemplo funcionando en iphone/detect.php.

Utilizando Javascript
En el caso no tengamos acceso a un lenguaje de servidor, podemos utilizar Javascript para detectar si el usuario esta accediendo desde un iPhone.

JavaScript:
  1. function iPhoneCheck() {
  2.     var agent = navigator.userAgent.toLowerCase();
  3.     var iphone = (agent.indexOf('iphone')!=-1);
  4.     if (iphone) {
  5.         return true;
  6.     } else {
  7.         return false;
  8.     }
  9. }

Luego podemos ver un ejemplo del empleo de esta función en iphone/detect.html.

Utilizando CSS
Otra posibilidad es entregar hojas de estilo de acuerdo al browser utilizado por el cliente, para ello utilizaremos la propiedad only de CSS para aplicar el estilo unicamente cuando se cumpla las condiciones de ser la pantalla de un iPhone.

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

Finalmente les dejo los archivos fuente de este ejemplo para que lo descarguen un puedan realizar sus pruebas y experimentos.

Posts Relacionados