Ahora como preparación al mundo movil, les mostrare un truco simple para poder poner un juego o aplicación desde una pagina web a manera de App dentro de tu iphone, esto es simple ya que lo que haremos es buscar la potencia del Safari, pero poner un acceso directo desde nuestro pantalla de inicio para que el jugador no tenga que entrara a safari cada vez que quiere jugar.
Continuamos con nuesto desarrollo del reto coatl
Para empezar se puede determinar si una página web se muestra en modo de pantalla completa utilizando el window.navigator.standalone propiedad de sólo lectura de JavaScript .
Agragamos
<meta name="apple-mobile-web-app-capable" content="yes" />
Si el contenido se establece en sí , la aplicación web se ejecuta en modo de pantalla completa ; de lo contrario , no lo hace. El comportamiento por defecto es utilizar Safari para mostrar contenido web.
Una motivación importante para que el juego se coloca en la pantalla principal es que se mantiene fresco en la memoria de usuario. Si el juego sólo existe a través de Safari o a lo sumo con un marcador, los usuarios probablemente lo olvidaran la próxima vez que quieran matar un poco de tiempo . Si lo pones en la pantalla de inicio , los usuarios ven un recordatorio constante de que el juego está ahí, a la espera de ser jugado
probar si es una aplicación StandAlone
La nueva prueba determina si el modo autónomo está activado. Porque la pregunta no tiene sentido en dispositivos que no sean iOS , tratamos una propiedad independiente inexistente como si se está ejecutando en modo autónomo . Además, ¿lo que realmente nos interezaes ser capaz de decir cuando el usuario tiene la opción de instalar la aplicación, pero no ha utilizado esa opción aún
Asi que modificamos el Loader para realizar esta deteccion. en loader.js
Modernizr.addTest(“standalone”, function() {
return (window.navigator.standalone != false);
});
Modernizr.load([
...
]);
Esta etiqueta meta no tiene ningún efecto a menos que primero se especifica el modo de pantalla completa como se describe en manzana- móvil- web-app – capaz.
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Si el contenido está definido como predeterminado , la barra de estado aparece normal. Si se establece en negro , la barra de estado tiene un fondo negro . Si se establece en negro -transparente , la barra de estado es de color negro y translúcido. Si se establece por defecto o negro , se muestra el contenido de la web por debajo de la barra de estado. Si se establece en negro -transparente , el contenido de la web se visualiza en la pantalla entera, parcialmente oscurecido por la barra de estado . El valor por defecto es default .
Agregar el icono de la aplicación
De forma predeterminada , IOS utiliza una pequeña captura de pantalla de la aplicación cuando se genera un icono. Naturalmente , eso no siempre producen buenos resultados. Con un elemento de enlace especial, se puede especificar un archivo de icono a utilizar en lugar de la pantalla
<link rel=”apple-touch-icon” href=”icon.png”/>
ya que los dispositivos de Appel tienen diferentes resoluciones , iOS también soporta iconos de las aplicaciones de diferentes tamaños. Las viejas generaciones de iPod touch y dispositivos iPhone tienen una resolución relativamente baja y utilizan 57×57 iconos en la pantalla principal . La pantalla del iPhone 4 tiene dos veces la resolución de sus predecesores y por lo tanto puede tomar ventaja de los iconos más detalladas 114×114 . Tanto las tabletas iPad de primera y segunda generación utilizan una resolución en algún punto intermedio – necesitan 72×72 iconos. Si crea iconos en estas diferentes tamaños , puede apuntar a ellos en el HTML , añadiendo un parámetro tamaños para el elemento de enlace y la adición de elementos de enlace adicionales para cada resolución que desea apoyar.
<head> ... <link rel=”apple-touch-icon-precomposed” href=”images/ios-icon.png”/> <link rel=”apple-touch-icon-precomposed” sizes=”72x72” href=”images/ios-icon-ipad.png”/> <link rel=”apple-touch-icon-precomposed” sizes=”114x114” href=”images/ios-icon-iphone4.png”/> ... </head>
El dispositivo selecciona automáticamente el icono con el tamaño más apropiado . Si el tamaño exacto necesario para su resolución no está disponible, que recoge el icono más pequeño que es mayor que el tamaño ideal o el icono más grande con un tamaño más pequeño. Si no encuentra un icono adecuado, se vuelve a utilizar el icono predeterminado con el tamaño especificado.
Desactivar el Scrolling
Se puede desactivar esta función Permitir desplazamiento simplemente deshabilitar toque desplazamiento completo. Para ello, detecta el toque en el elemento y llamar al método event.preventDefault ().
function setup() {
// desactivar el comportamiento touchmove nativa
// no ejecutar el scrollbar
dom.bind(document, "touchmove", function(event) {
event.preventDefault();
});
// hesconder barra de direccion en Android.
if (/Android/.test(navigator.userAgent)) {
$("html")[0].style.height = "200%";
setTimeout(function() {
window.scrollTo(0, 1);
}, 0);
}
}
Ahora les pido que entren aqui, y hagan la prueba de instalarlo.. si ya se que no hace nada es solo una prueba de como puede ser el acceso directo desde la pantalla de inicio de su dispositivo.
[button link=”https://www.fmoreno.com.mx/code/COATL/”] Entre Aqui[/button]
Recomendación: