html - tipos - Planificación y creación de un sitio móvil habilitado para su sitio principal
tipos de aplicaciones moviles (8)
Estamos en las etapas iniciales de planificación para construir un sitio móvil para uno de nuestros clientes. Este sitio móvil se agregará al sitio principal que ya hemos creado para ellos. Determinamos que el contenido va a ser una pequeña subsección del sitio principal y se dirigirá a la audiencia principal que se espera que use el sitio.
Al mirar a través de algunos sitios móviles de muestra notamos que muchos sitios que tienen WAP en la url son en realidad solo archivos HTML simplificados. http://wap.mlb.com no está realmente habilitado para WAP, sino HTML simple.
Mi pregunta es ¿WAP una idea del pasado? Dado que los teléfonos inteligentes y el iPhone tienen la capacidad de representar sitios como lo hacen, debemos preocuparnos por WML y WAP, ¿o será suficiente con una versión html reducida?
¿También puede recomendar un blog o tutorial o responder a continuación la mejor forma de verificar si hay dispositivos móviles? ¿Es necesario que el programador conozca cada variación del agente de usuario para redirigirlo a nuestro sitio móvil?
Finalmente, ¿podría programar un sitio móvil para el navegador iPhone / Touch Safari o simplemente abandonar el sitio como está?
Creo que la principal diferencia con los teléfonos 2.5G y los nuevos teléfonos 3G es que, si bien los teléfonos 2.5G usan sus propios navegadores, los navegadores en teléfonos 3G se han vuelto mucho más similares / precisos en sus capacidades de renderizado.
Por otro lado, puede usar CSS para representar el mismo HTML en 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 mesa permiten que los sitios web escalen mejor, lo que facilita la visualización de un sitio en formatos de pantalla grandes y pequeños.
Entonces, la pregunta final será la de un mercado objetivo. ¿Está apuntando a un público experto en tecnología que tenderá a tener teléfonos con capacidad 3G? ¿Está apuntando a personas que podrían tener 2.5G como máximo?
Mi experiencia es que realmente depende de lo que estás tratando de hacer y de quiénes son los usuarios.
Si bien WAP recibió muchas malas críticas, su punto fuerte es que tiene conexiones de baja latencia de ancho de banda bajo. El contenido WML se optimiza mediante la puerta de enlace del proveedor para reducir en gran medida la cantidad de datos transmitidos por el aire. Si tiene iPhones y similares, en áreas con una sólida cobertura 3G, puede darse el lujo de obtener contenido más completo, pero si desea que una aplicación siga funcionando bien en áreas más alejadas, WAP tiene una gran ventaja.
Una cosa a tener en cuenta con WAP es que la calidad de la compatibilidad WAP en los teléfonos varía mucho (supongo que también diría lo mismo para los navegadores web de teléfonos inteligentes). La mayoría de ellas muestran las páginas correctamente, pero el manejo de formularios es realmente horrible 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., URL separados): la opción automática 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.
Recomiendo encarecidamente que consultes el libro de Mobile de Cameron Molls . No se trata tanto de un procedimiento técnico para construir sitios optimizados para dispositivos móviles, sino que le hace pensar en las diversas opciones disponibles y resume las ventajas y desventajas de cada uno. Definitivamente te hará pensar en qué enfoque estás tomando y si es el correcto. Creo que también tiene algunos consejos sobre los recursos que ayudan a detectar las solicitudes de dispositivos móviles a su sitio, existen varias opciones.
Si desea gastar una cantidad muy pequeña de dinero, puede encontrar una copia usada de mi libro "Guía del desarrollador de aplicaciones web Palm OS" en Amazon por menos de $ 1. Si bien los consejos específicos sobre los viejos dispositivos Palm VII ya no se aplican, hay algunas secciones sobre cómo hacer que los sitios web móviles aún se apliquen. Mi consejo básico es este: hacer páginas pequeñas con información relevante primero, luego enlaces de navegación; empujar 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 la descarga de muchos objetos (imágenes, archivos JavaScript) de una página para reducir la latencia.
Los teléfonos más nuevos vienen con WAP2 que usa HTML Mobile Profile (XHTML MP), que es bastante similar al HTML normal. Los teléfonos más antiguos usan Wireless Markup Language (WML).
Dependiendo de su audiencia, consideraría hacer una versión amigable para teléfonos móviles del sitio usando XHTML MP y soltar WML por completo. Por teléfono amigable quiero decir gráficos claros, poco JavaScript y navegación simple.
Para verificar las capacidades de diferentes teléfonos móviles, observe WURFL .
Además, es posible que desee echar un vistazo a las mejores prácticas de Mobile Web de w3c.
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 intentó: No usará varias líneas, no se usarán. 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”>
A partir de ahora (2014)
Es posible que no necesitemos un sitio separado para dispositivos móviles, sino que podemos utilizar libarios como Twitter Bootstrap, que usa una representación receptiva para que el sitio se adapte al tamaño de la pantalla, ya sea tableta o dispositivo móvil o computadora de escritorio.
Una de las principales ventajas es que requiere menos mantenimiento en comparación con tener sitios web separados para dispositivos móviles y de escritorio.
Para saber más sobre Twitter Bootstrap, haga clic aquí
Aquí hay dos cosas que puede hacer para mejorar la compatibilidad con iPhones sin hacer mucho trabajo:
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 (lo mejor es 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" />