unijimpe » iPhone

HTTP Redirect Viewer

unijimpe — Sun, 23 May 2010 20:50:29 +0000

HTTP Redirect Viewer es un herramienta que te permitirá visualizar todas las redirecciones que se hacen en una determinada URL dependiendo del User Agent que se puede seleccionar. Esto es útil para verificar el tipo de redirección que estamos aplicando a nuestros proyectos y probar el funcionamiento dependiendo del navegador con que se accede.

Características

Entre las principales características de esta herramienta podemos mencionar:

Visualizar la cantidad y tipos de redirecciones (301 y 302).
Verificar el tipo de canonicalización de un dominio.
Verificar si el cambio de dominio se hace correctamente (Redirección 301).
Verificar el tipo de respuesta por navegador (Se puede seleccionar el User Agent).
Revisar que contenido se envía a los usuarios que acceden desde iPhone/iPad.
Se puede determinar que URL pueden ver el robot de Google.
Permite visualizar los headers de respuesta de un URL.
Permite visualizar el contenido de respuesta de un URL.

Ejemplos de Uso

Analizamos la dirección http://gmail.com tendremos un total de 4 redirecciones (Tres del tipo 301 y una del tipo 302). Obviamente esto no es optimo por la cantidad de redirecciones lo cual incrementa el tiempo de carga para el usuario.

Analizando la dirección http://www.bajar-youtube.com se tiene una sola redirección y del tipo 301 a la ruta final http://bajar-youtube.com lo cual indica que hay canonicalización (En este caso para no utilizar WWW en el dominio).

Esta herramienta fue escrita como complemento al artículo Como hacer redireccionamiento 301 y 302, si tienen sugerencias u observaciones pueden dejarnos un comentario para tomarlo en cuenta para futuras versiones.

© 2006 – 2011 unijimpe – Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

Ajuste de Texto en iPhone

unijimpe — Mon, 22 Dec 2008 03:16:47 +0000

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.

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.

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

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.

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

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

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

MoFuse Versión movil de tu Web

unijimpe — Tue, 04 Nov 2008 02:46:20 +0000

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.

Massive News iPhone Theme

unijimpe — Mon, 22 Sep 2008 13:31:11 +0000

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:

function is_iphone($user_agent) {
return (bool)eregi('(iPhone|iPod)', $user_agent);
}
function theme_for_iphone($tpl) {
if (!is_iphone($_SERVER['HTTP_USER_AGENT'])) return $tpl;
else return "massive-mobile";
}
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.

Detectar Browser iPhone

unijimpe — Thu, 04 Sep 2008 06:30:58 +0000

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:

HTTP_USER_AGENT=Mozilla/4.0
(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:

HTTP_USER_AGENT=Mozilla/5.0
(iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+
(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:

function iPhoneCheck() {
$browser = strpos($_SERVER['HTTP_USER_AGENT'], "iPhone");
if ($browser === false) {
return false;
} else {
return true;
}
}

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.

function iPhoneCheck() {
var agent = navigator.userAgent.toLowerCase();
var iphone = (agent.indexOf('iphone')!=-1);
if (iphone) {
return true;
} else {
return false;
}
}

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.

media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />

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

Integrando WordPress y iPhone

unijimpe — Thu, 28 Aug 2008 03:58:15 +0000

Hoy en día iPhone es uno de los dispositivos que se ha masificado de manera veloz por sus características de interactividad y tecnología, en esta ocasión veremos que formas tenemos de optimizar nuestro blog hecho con WordPress para visualizarlo y administrarlo con iPhone.

iWPhone
Este es un theme que mostrará el contenido de tu blog formateado para las dimensiones de la pantalla de un iPhone, es muy fácil de instalar y poner en funcionamiento. Para instalarlo, descargas los archivos fuente en iWPhone WordPress Plugin and Theme en donde encontrarás el archivo iwphone.php el cual debes colocar en el directorio de plugins, además una carpeta llamada iwphone-by-contentrobot el cual debes colocar en la carpeta de themes. Luego de ello activas el plugin iWPhone y listo ya tienes optimizado tu blog para iPhone.

Si prefieres le puedes hacer algunas modificaciones al template, como en nuestro caso en el cual hemos modificado los colores de los textos y del header para personalizarlo de acuerdo al estilo de tu diseño.

WPtouch
Se trata de un plugin para adaptar el contenido de tu blog para ser compatible con iPhone, este tema a diferencia del anterior viene con un panel de administración muy completo en el cual puedes configurar una gran variedad de parámetros del diseño de tu blog, es muy fácil de administrar y configurar. Puedes descargar este theme en WPtouch: WordPress On iPhone.

WordPress for iPhone
WordPress for iPhone es el app oficial para iPhone y iPod Touch que te permitirá administrar tu blog de manera sencilla, rápido y desde una interfaz muy cómoda. Puedes administrar blogs alojados en WordPress.com o instalaciones propias para versiones superiores a 2.5.1. Para utilizarlo puedes descargar el app en AppStore, luego de instalado puedes configurar tu cuenta de WordPress con la dirección de tu blog, el usuario y clave de acceso y podrás administrar tu blog. El único inconveniente a mi parecer es que no se puede moderar los comentarios, con este añadido este app sería mucho mas productivo.

Después de ver estas aplicaciones podemos concluir que es muy fácil adaptar nuestro blog para que sea visualizado y administrado de un iPhone. Este blog ya se ha optimizado para nuestros visitantes desde iPhone y iPod Touch así que bienvenidos a nuevamente.