Opciones del lado del servidor para entregar diferentes estructuras de página (HTML) a diferentes dispositivos móviles

Question

Estoy investigando las mejores prácticas para desarrollar sitios móviles de estilo "clásico", es decir, sitios móviles entregados y experimentados como páginas HTML móviles vs. JavaScript pequeño aplicaciones (jQuery Mobile, Sencha, etc.).

Hay dos enfoques predominantes:

1. entregar la misma estructura de la página (HTML) para todos los dispositivos móviles, a continuación, utilizar las consultas de medios CSS o JavaScript para mejorar la experiencia de los dispositivos más capaces.
2. Entregar estructura de página diferente (y posiblemente contenido) a dispositivos con capacidades mejoradas.

estoy especialmente interesado en las mejores prácticas para el segundo enfoque . Dos buenos ejemplos son: sitio móvil

1. del MIT: diferente para Blackberry y teléfonos con funciones (inferior) que para iOS & dispositivos Android, pero está disponible en las mismas direcciones URL - http://m.mit.edu/

2. de CNN Mobile Site: ídem - http://m.cnn.com/

me gustaría saber de la gente aquí en lo que en realidad han trabajado en algo como esto, y puedo explicar lo que son las mejores prácticas para la entrega de este tipo de dispositivo que dependen de la estructura/contenido/experiencia.

No necesito una guía sobre detección de agente de usuario móvil, o WURFL, o cualquiera de los conceptos cubiertos en otros (grandes) hilos SO como this one. He usado jQuery Mobile y Sencha Touch y estoy familiarizado con la mayoría de los enfoques para la entrega de la experiencia móvil final, por lo que no se requieren punteros tampoco gracias.

Lo que realmente me gustaría entender es: cómo se entregan estos tipos específicos de experiencias en términos de detección y entrega en el lado del servidor en grupos de usuarios y agentes, donde hay una estructura de página simplificada (HTML diferente) entregado a un grupo de dispositivos y otro tipo de documento HTML más rico entregado a dispositivos más nuevos, pero ambos en el mismo subdominio/URL.

Espero que todo tenga sentido. Muchas gracias de antemano.

Answer 1

En NPR, se utiliza un servidor 'aplicación' para servir el HTML correcto/css/etc dependiendo de si el usuario está en un dispositivo de gama alta o un teléfono de nivel inferior.

Así, cuando un pings de dispositivos móviles una página npr.org, nuestros servidores utilizan un método de detección de agente de usuario para que apunte a la correspondiente m.npr.org. Una vez dirigido a la URL m.npr.org, la aplicación web, que está escrita en groovy, pero creo que podría ser una cantidad de cosas, devuelve la versión táctil del sitio o el contenido más simple y simplificado. La elección de la aplicación web se basa, al menos en cierta medida, en los datos de WURFL.

no tengo puntos suficientes repeticiones para publicar una comparación con capturas de pantalla, así que voy a tener que apuntar a los mismos sitios.

Esto se puede ver en su navegador de escritorio escribiendo en m.npr.org para ver el sitio simplificada. Y puede anular la detección predeterminada del dispositivo agregando el parámetro? Devicegate.client = iPhone_3_0 para ver la versión táctil que vería si acaba de ingresar a npr.org en su teléfono inteligente. Si ve la fuente, puede ver cómo se está sirviendo html & css en el mismo subdominio.

creo que sirve de ver algo como esto en la naturaleza. ¿Tiene sentido?

Answer 2

Una forma común de detectar qué formato necesita un dispositivo móvil es la cabecera accept:

application/xhtml + xml> XHTML texto/vnd.wap.wml> páginas WML WAP viejos . . .

En los dispositivos más nuevos que pueden manejar todos los formatos html de escritorio, puede usar el agente de usuario.

entonces usted tiene que preguntarse lo que usted quiere hacer:

Cambiar a otra hoja de estilo (sólo funciona con los dispositivos más nuevos). Cambiar a otra lógica de vista, como crear plantillas de página wml. Cambiar a otra página completa.

creo que el segundo enfoque es el mejor. Muchos frameworks web facilitan cambiar a otra lógica de vista sin reescribir el resto (el patrón mvc en su gloria).

Answer 3

Tengo dos ejemplos para usted.

1. leer sobre cómo Facebook logra esto utilizando XHP para dar salida abstracta diferente para diferentes marcas: One Mobile Site to Serve Thousands of Phones

   Habrá un montón de cosas buenas en su aplicación real que deseo estaba disponible.

2. Utilizo un framework llamado HawHaw, que le permite escribir su aplicación una vez (en objetos PHP o archivos XML) y genera el marcado correcto en el dispositivo basado en unos pocos controles (aceptar encabezado, cadena de agente, etc.).