Planificación y creación de un sitio habilitado para dispositivos móviles para su sitio principal [cerrado]

StackOverflow https://stackoverflow.com/questions/9435

Pregunta

Estamos en las etapas iniciales de planificación de la construcción de un sitio móvil para uno de nuestros clientes.Este sitio móvil se sumará al sitio principal que ya hemos creado para ellos.Hemos determinado que el contenido será una pequeña subsección del sitio principal y estará dirigido a la audiencia principal que se espera que utilice el sitio.

Al revisar algunos sitios móviles de muestra, notamos que muchos de los sitios que tienen WAP en la URL en realidad son solo archivos HTML simplificados. http://wap.mlb.com En realidad no está habilitado para WAP sino para HTML simple.

Mi pregunta: ¿WAP es una idea del pasado?Dado que los teléfonos inteligentes y el iPhone tienen la capacidad de representar sitios tal como están, ¿debemos preocuparnos por WML y WAP o será suficiente una versión HTML simplificada?

¿También puede recomendar un blog o tutorial o responder a continuación cuál es la mejor manera de buscar dispositivos móviles?¿Necesitamos nosotros, como programadores, conocer cada variación del agente de usuario para poder redirigirlos a nuestro sitio móvil?

Finalmente, ¿programaría un sitio móvil para el navegador iPhone/Touch Safari o simplemente dejaría el sitio como está?

¿Fue útil?

Solución

Los teléfonos más nuevos vienen con WAP2, que utiliza HTML Mobile Profile (XHTML MP), que es bastante similar al HTML normal.Los teléfonos más antiguos utilizan lenguaje de marcado inalámbrico (WML).

Dependiendo de su audiencia, consideraría crear una versión del sitio compatible con teléfonos móviles usando XHTML MP y eliminar WML por completo.Por compatible con teléfonos móviles me refiero a gráficos ligeros, poco JavaScript y navegación sencilla.

Para comprobar las capacidades de diferentes teléfonos móviles, consulte WURFL.

Además, es posible que desee echar un vistazo a Mejores prácticas de web móvil del w3c.

Otros consejos

Aquí hay dos cosas que puedes hacer para mejorar la compatibilidad con iPhone sin tener que trabajar mucho:

Haga que la página se desplace hacia arriba para ocultar la barra de URL:

<script type="application/x-javascript">

  if (navigator.userAgent.indexOf('iPhone') != -1) {
    addEventListener("load", function() {
      setTimeout(hideURLbar, 0);
    }, false);
  }

  function hideURLbar() {
    window.scrollTo(0, 1);
  }

</script>

Y establezca la escala para el ancho de la página (es mejor hacer algunas pruebas y jugar con esto, también busque otros ejemplos que puedan usar user-scalable=true):

<meta name="viewport" content="width=320; user-scalable=false" />

Te recomiendo que eches un vistazo Cameron Molls libro Diseño web móvil.No es tanto un manual técnico para crear sitios optimizados para dispositivos móviles, sino que te hace pensar en las diversas opciones disponibles y resume los pros y los contras de cada una.Definitivamente te hará pensar qué enfoque estás adoptando y si es el correcto.Creo que también tiene algunas indicaciones sobre recursos que ayudan a detectar solicitudes de dispositivos móviles a su sitio; existen varias opciones.

A partir de ahora (2014)

Es posible que no necesitemos un sitio separado para dispositivos móviles; en su lugar, podemos optar por bibliotecas front-end como Arranque de Twitter que utiliza renderizado responsivopara que el sitio se adapte al tamaño de la pantalla ya sea Tableta o Dispositivo móvil o Escritorio

Una de las principales ventajas es que se necesita menos mantenimiento en comparación con tener sitios web separados para dispositivos móviles y de escritorio.

Para saber más sobre Arranque de Twitter hacer clic aquí

Creo que la principal diferencia entre los teléfonos 2.5G y los nuevos teléfonos 3G es que mientras los teléfonos 2.5G usaban sus propios navegadores, los navegadores de los teléfonos 3G se han vuelto mucho más similares y precisos en sus capacidades de renderizado.

Por otro lado, puedes usar CSS para representar el mismo HTML en un formato de pantalla grande o en uno pequeño optimizado para dispositivos móviles, así que supongo que lo que sucedió es que el enfoque de "HTML simple" parecía ser el camino menos difícil. tomar.Además, los diseños sin tablas permiten que los sitios web se escalen mejor, lo que facilita la presentación de un sitio tanto en formatos de pantalla grande como pequeña.

Entonces la pregunta final será la de un mercado objetivo.¿Se dirige a un público conocedor de la tecnología que tenderá a tener teléfonos totalmente compatibles con 3G?¿Está dirigido a personas que podrían tener 2,5G como máximo?

Mi experiencia es que realmente depende de lo que intentas hacer y de quiénes o dónde están los usuarios.

Si bien WAP tuvo mucha mala prensa, su punto fuerte es cuando tienes conexiones de alta latencia y bajo ancho de banda.El contenido WML se optimiza mediante la puerta de enlace del operador para reducir en gran medida la cantidad de datos transmitidos por aire.Si tiene iPhones y similares, en áreas con una sólida cobertura 3G puede darse el lujo de buscar contenido más rico, pero si desea que una aplicación funcione bien en áreas más apartadas, WAP tiene una gran ventaja.

Una cosa a tener en cuenta con WAP es que la calidad del soporte WAP en los teléfonos varía mucho (supongo que también diría lo mismo de los navegadores web de los teléfonos inteligentes).La mayoría de ellos muestran las páginas correctamente, pero el manejo de formularios es realmente terrible en algunos navegadores.

Si varía el contenido según el agente de usuario, también debe proporcionar una forma explícita de acceder a un tipo específico de contenido (p. ej.URI separados): la elección automatizada no siempre es correcta y desea que el cliente pueda anularla.

Si opta por el desarrollo WAP, consulte WinWAP, un navegador WAP basado en Windows.

Si quieres gastar una cantidad muy pequeña de dinero, puedes encontrar una copia usada de mi libro. "Guía para desarrolladores de aplicaciones web Palm OS" en Amazon por menos de $1.Si bien los consejos específicos sobre los antiguos dispositivos Palm VII ya no se aplican, hay algunas secciones sobre cómo crear sitios web móviles que aún podrían aplicarse.Mi consejo básico es este:haga las páginas pequeñas con información relevante primero, luego enlaces de navegación;enviar contenido genérico/repetitivo a otras páginas;intente optimizar para reducir la cantidad de tiempo que un usuario pasa en una sola página;y evite descargar muchos objetos (imágenes, archivos JavaScript) para una página para reducir la latencia.

El código:Hace que el validador w3 devuelva 11 errores cuando lo uso.Aquí está la página de índice en la que se probó:No utilizará algunas líneas múltiples.Son líneas de plantilla.

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Photography Aerial Commercial Portrait Underwater Wedding Tom Szabo</title>
<meta name="description" content="A Thomas Image professional photography serving Cleveland
Northeast Ohio Chagrin Falls Chardon Kirtland Madison Mentor Painesville Perry and Willoughby">
<meta name="keywords" content="A Thomas Image, professional, photography, cleveland, northeast ohio, chagrin falls, chardon, concord, kirtland, madison, mentor, painesville, perry, willoughby,commercial, marketing, advertising, executive, head shot, portrait, baby, children, family, high school senior, family reunion, underwater, scuba diving, pool party, wedding, bride, groom,">
<meta name="y_key" content="7b00158550200c1c">
<meta name="y_key" content="b5a3e0c1d778ff8a">
<meta name="msvalidate.01" content="7C6C4CEC2EB84051B1DCFEC558B77724" />
<meta name="verify-v1" content="G4nmk0aesZsCjneBo0W6kVlv5NpImVnTfsQ+fXEk1fA=" />
<meta name="viewport" content=”width=320,user-scalable=false”>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top