studio son samsung programacion programa predeterminado predeterminadas para móviles las desarrollo curso cuales como cambiar archivos aplicaciones abrir html android bookmarks

html - son - Configurar aplicaciones web Android



curso android desarrollo de aplicaciones móviles pdf (5)

Cuando crea un acceso directo en la pantalla de inicio a un marcador, Android usará un apple-touch-icon-precomposed si está presente (pero no apple-touch-icon ) como un ícono de alta resolución:

<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>

En cuanto al resto de las características, no creo que haya ninguna forma de hacerlo en este momento sin publicar una aplicación de Android que actúe como un contenedor para su sitio web.

Las aplicaciones web de iPhone tienen cuatro funciones de configuración disponibles (sin incluir la memoria caché de aplicaciones HTML5) para configurar cómo se comportan las páginas web cuando guarda la página web en la pantalla de inicio como un marcador.

  1. Puede especificar el ícono de la página de inicio.
  2. Puede especificar una imagen de inicio que se muestra mientras se carga la página web.
  3. Puede ocultar la interfaz de usuario del navegador.
  4. Puede cambiar el color de la barra de estado.

Las cuatro características funcionan al agregar etiquetas al <head> de esta manera:

<link rel="apple-touch-icon" href="/custom_icon.png"/> <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />

Naturalmente, ninguna de estas etiquetas específicas de "apple" hace nada en Android. Pero, ¿hay alguna forma de hacer algo equivalente? [Como mínimo, quiero que los usuarios puedan agregar mi página web a su pantalla de inicio de Android (por ejemplo, en Android 2.0) y tener un bonito icono de alta resolución].

Esta es una pregunta anticuada, como tal, la respuesta ha cambiado. Chrome en androides más nuevos tiene sus propias etiquetas meta para esto. Asegúrese de Agregar a la pantalla de inicio y ejecute desde la pantalla de inicio. Un marcador normal no es suficiente. Actualmente, Chrome usa algunas de las directivas de Apple, pero las tres en la parte inferior son la magia de Android.

<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-startup-image" href="startup.png"> <link rel="apple-touch-icon" href="youricon.png"/> <link rel="apple-touch-icon-precomposed" sizes="128x128" href="youricon.png"> <meta name="mobile-web-app-capable" content="yes"> <link rel="shortcut icon" sizes="196x196" href="youriconhighres.png"> <link rel="shortcut icon" sizes="128x128" href="youricon.png">

Esto puede ser de interés para los lectores:

http://code.google.com/p/android/issues/detail?id=7657

En 2.1-actualización1, en el Droid, y presumo otros 2. * teléfonos con sistema operativo, al agregar un marcador a la pantalla de inicio, la pantalla de inicio solo muestra un icono personalizado si el enlace rel = "apple-touch-icon" o apple-touch -icon-precomposed tiene un camino de URL COMPLETO.

Existen diferentes metaelementos que podemos usar para lograr los mejores resultados posibles:

1a) En primer lugar, debemos configurar la ventana gráfica de nuestra aplicación de la siguiente manera:
<meta name="viewport" content="width=device-width, initial-scale=1">

1b) Hay un pequeño truco aquí, para dispositivos con pantallas más altas (iPhone 5 por ejemplo):
<meta name="viewport" content="initial-scale=1.0">
Solo ponlo debajo del otro meta y hará toda la magia.

2) Ahora que tenemos lo básico, le diremos a los navegadores móviles que "lean" nuestro sitio web como si fuera una aplicación. Hay dos meta elementos principales:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Esto hará que nuestro sitio web se abra en modo de pantalla completa y estilo la barra de estado predeterminada.

3) Hemos terminado con los meta elementos de "comportamiento", ahora comencemos con nuestros íconos. La cantidad de iconos y líneas de código dependerá totalmente de ti. Para la imagen de inicio prefiero crear un icono para cada resolución, de modo que mi "cargador" actúe igual en todos los dispositivos (principalmente dispositivos Apple). Así es como lo hice:

*<!--iPhone 3GS, 2011 iPod Touc-->* <br> `<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-320-460.png" media="screen and (max-device-width : 320px)">` <br> *<!--iPhone 4, 4S and 2011 iPod Touch-->* <br> `<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x920.png" media="(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 2)">` <br> *<!--iPhone 5 and 2012 iPod Touch-->* <br> `<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x1096.png" media="(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)">` <br> *<!--iPad landscape-->* <br> <link rel="apple-touch-startup-image" sizes="1024x748" href="../images/mobile-icon-startup-1024x768.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)"> <br> *<!--iPad Portrait-->* <br> `<link rel="apple-touch-startup-image" sizes="768x1004" href="../images/startup-768x1004.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)">` <br> <br>

NOTA: El formato debe ser PNG y se deben respetar todos los tamaños; de lo contrario, no funcionará.

4) Para finalizar, también necesitaremos algunos íconos para nuestra aplicación. Este icono se mostrará en el menú de dispositivos. Así es como lo hice:

*<!--iPhone 3GS, 2011 iPod Touch and older Android devices-->* <br> `<link rel="apple-touch-icon" href="../images/mobile-icon-57.png">` <br> *<!--1st generation iPad, iPad 2 and iPad mini-->* <br> `<link rel="apple-touch-icon" sizes="72x72" href="../images/mobile-icon-72.png">` <br> *<!--iPhone 4, 4S, 5 and 2012 iPod Touch-->* <br> `<link rel="apple-touch-icon" sizes="114x114" href="../images/mobile-icon-114.png">` <br> *<!--iPad 3rd and 4th generation-->* <br> `<link rel="apple-touch-icon" sizes="144x144" href="../images/mobile-icon-144.png">` <br>

NOTA: También puede usar "precompuesto" para que su icono no se muestre con el brillo reflexivo de iOS. Simplemente agregue esta palabra donde defina rel como sigue:
<link rel="apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">

Como se dijo, esto funciona mejor en dispositivos Apple. Pero el icono de la aplicación ha sido probado en dispositivos Android y funciona para.

Probé lo de arriba desde mi Samsung Galaxy S1

No funcionó para mí ... pero lo que sí funcionó fue primero crear un marcador y luego agregar ese marcador como un acceso directo a mi casa. Hacer esto provocó que se utilizara el ícono correcto.