Versio n del sitio para clientes mo viles.

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Versio n del sitio para clientes mo viles."

Manuel Rico Rivas
hace 8 años
Vistas:

1 Versio n del sitio para clientes mo viles. Este documento contiene un reporte sobre las opciones que tenemos para construir la versión del sitio para dispositivos móviles. Actualmente, no tenemos un sitio listo para móviles según los validadores de la W3C: Fuente: W3C Mobile Web Best Practices Lo que está permitido y lo que no en CSS para móviles: CSS Mobile Profile Qué podemos hacer para tener una versión para móviles? Cuáles son las alternativas?

2 HTML Con puro o contenido estático HTML, tienes que redirigir a tus visitantes a otra página. Digamos, pues tu página necesita directivas especiales. Siguiendo los estándares W3C aquí un ejemplo del encabezado de la página: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" " <html xmlns=" <head profile=" Cambiar la pura hoja de estilos no es una opción, pues el atributo: <link rel="stylesheet" media= handheld No es reconocido por todos los móviles. Además que cómo preguntas que el cliente es móvil con HTML? Es un problema, pues sólo puedes con JavaScript, pero muchos de los móviles lo desactivan. La única solución es con una redirección usando algún módulo de reescritura de URLs. En ese módulo tienes que preguntar que dispositivo móvil es, algo así: # Add re-direct for mobile devices RewriteEngine On RewriteCond %{REQUEST_URI!^/m/.*$ RewriteCond %{HTTP_ACCEPT "text/vnd.wap.wml application/vnd.wap.xhtml+xml" [NC,OR] RewriteCond %{HTTP_USER_AGENT "acs alav alca amoi audi aste avan benq bird blac blaz brew cell cldc cmd-" [NC,OR] RewriteCond %{HTTP_USER_AGENT "dang doco erics hipt inno ipaq java jigs kddi keji leno lgc lg-d lg-g lge-" [NC,OR] RewriteCond %{HTTP_USER_AGENT "maui maxo midp mits mmef mobi mot- moto mwbp nec- newt noki opwv" [NC,OR] RewriteCond %{HTTP_USER_AGENT "palm pana pant pdxg phil play pluc port prox qtek qwap sage sams sany" [NC,OR] RewriteCond %{HTTP_USER_AGENT "sch- sec- send seri sgh- shar sie- siem smal smar sony sph- symb t-mo" [NC,OR] RewriteCond %{HTTP_USER_AGENT "teli tim- tosh tsm- upg1 upsi vk-v voda w3cs wap- wapa wapi" [NC,OR] RewriteCond %{HTTP_USER_AGENT "wapp wapr webc winw winw xda xda-" [NC,OR] RewriteCond %{HTTP_USER_AGENT "up.browser up.link windowssce iemobile mini mmp" [NC,OR] RewriteCond %{HTTP_USER_AGENT "symbian midp wap phone pocket mobile pda psp" [NC] RewriteCond %{HTTP_USER_AGENT!macintosh [NC] RewriteRule ^(.*)$ /m/ [L,R=302] Lo que estamos haciendo con este módulo, es redirecciones 302 por cada página requerida. Quizá no lo mejor del mundo, no crees? De igual forma, cómo controlas la descarga de imágenes con HTML? Y el CSS para móviles no acepta todas las reglas que usamos normalmente, así que también desecha todo el CSS no aceptado. En resumen, necesitas hacer otra versión del sitio; es decir; una versión distinta para cada página. Que dolor de cabeza.

3 WORDPRESS A pesar de que no es tan sencillo convertir tu sitio Web a una versión móvil al vuelo, es decir; sin tener que construir una versión alternativa, la buena noticia es que muchas personas han trabajado en ello y ya tenemos soluciones bastante decentes. Usando el trabajo previo de otros developers, en concreto de la gente de Forum Nokia, usamos un desarrollo especial para WordPress con resultados bastante alentadores. Con un poco de trabajo para la adecuación a nuestro sitio, podemos tener una versión de nuestras plantillas actuales. Por ejemplo, la más común, la de facultades. Versión original para Web:

4 Versión al usar un dispositivo móvil. Windows Phone:

5 Incluso podemos tener el sitio de administración y administrarlo desde nuestro móvil. Es decir, podemos editar nuestra información desde el celular con un look & feel agradable y sin una descarga de bits fuerte.

6 La misma vista pero para iphone usando Safari:

7 La validación de si estamos en un móvil o en un navegador estándar, lo hacemos con PHP: function lite_detection() { if (isset($_server['http_x_wap_profile']) isset($_server['http_profile'])) { return true; $user_agent = strtolower($_server['http_user_agent']); if (in_array(substr($user_agent, 0, 4), lite_detection_ua_prefixes())) { return true; $accept = strtolower($_server['http_accept']); if (strpos($accept, 'wap')!== false) { return true; if (preg_match("/(". lite_detection_ua_contains(). ")/i", $user_agent)) { return true; if (isset($_server['all_http']) && strpos(strtolower($_server['all_http']), 'operamini')!== false) { return true; return false; function lite_detection_ua_prefixes() { return array( 'w3c ','w3c-','acs-','alav', 'alca', 'amoi', 'audi', 'avan', 'benq', 'bird', 'blac', 'blaz', 'brew', 'cell', 'cldc', 'cmd-', 'dang', 'doco', 'eric', 'hipt', 'htc_', 'inno', 'ipaq', 'ipod', 'jigs', 'kddi', 'keji', 'leno', 'lg-c', 'lg-d', 'lg-g', 'lge-', 'lg/u', 'maui', 'maxo', 'midp', 'mits', 'mmef', 'mobi', 'mot-', 'moto', 'mwbp', 'nec-', 'newt', 'noki', 'palm', 'pana', 'pant', 'phil', 'play', 'port', 'prox',

8 'qwap', 'sage', 'sams', 'sany', 'sch-', 'sec-', 'send', 'seri', 'sgh-', 'shar', 'sie-', 'siem', 'smal', 'smar', 'sony', 'sph-', 'symb', 't-mo', 'teli', 'tim-', 'tosh', 'tsm-', 'upg1', 'upsi', 'vk-v', 'voda', 'wap-', 'wapa', 'wapi', 'wapp', 'wapr', 'webc', 'winw', 'winw', 'xda ', 'xda-', ); function lite_detection_ua_contains() { return implode(" ", array( 'android', 'blackberry', 'hiptop', 'ipod', 'lge vx', 'midp', 'maemo', 'mmp', 'netfront', 'nintendo DS', 'novarra', 'openweb', 'opera mobi', 'opera mini', 'palm', 'psp', 'phone', 'smartphone', 'symbian', 'up.browser', 'up.link', 'wap', 'windows ce', ));

9 EJEMPLO PRÁCTICO Por ejemplo, mi sitio en que cuenta con varias imágenes:

10 La calificación que le otorga W3C, es bastante buena si tomamos en cuenta de que no he movido un dedo del tema para Web.

11 COMPARACIÓN VS SHAREPOINT Si estos resultados los comparamos con lo que arroja Windows SharePoint Services en colaboración, la diferencia es muy importante: La verdad se ve bastante pobre y ni así saca 100% en el validador de la W3C.

12 TRABAJO FUTURO No todo es color de rosa. Claro que hay que personalizar el tema o temas móviles. Pero hey! Eso está increíble. Sin redirección, sin trabajo extra para el IIS. Yo elijo el tema móvil que quiero poner en mi sitio o carpeta Web y lo puedo personalizar. Muy, muy padre. También hay que revisar con calma, que esta versión móvil no le peque a otros plugins cómo por ejemplo, el de traducción de contenidos o publicación de videos. Lo inmediato es trabajar en la traducción de las cadenas al español, pues el desarrollo no cuenta con una localización para el lenguaje Español. Espero que este documento les haya servido de ayuda para comprender un poco mejor como se monta un sitio móvil en la Web. Pueden entrar al sitio de ejemplo usando un móvil, en la siguiente dirección: Memo

Documentos relacionados

Capítulo 4. Pruebas e implantación

Capítulo 4. Pruebas e implantación Las pruebas del sistema se dividían en pruebas unitarias y pruebas integrales. Las pruebas unitarias fueron realizadas por el grupo de desarrollo y las pruebas integrales