TEMAS INTERESANTES

Olvídate de los problemas para crear tu web, y déjalo en manos de un diseñador

BLOG

Cambiar color de navegador en Android, Ios Y Windows Phone.

Con todo esto de la optimización para dispositivos móviles te habrás dado cuenta de que algunas webs muestran la barra de Chrome de colorines. Si tienes una web querrás saber cómo cambiar el color de la barra de direcciones en cualquier dispositivo. Hasta hace algunas versiones, todos éramos iguales. Es decir, tú navegabas con tu Chrome en el móvil y todas laspáginas tenían el mismo navegador. Igual pasaba en iOS o en Windows Phone. Te habrás fijado en que a veces, cuando entras en algunas webs con el móvil, la barra de direcciones se adapta al color de las páginas. Esto no lo hace el navegador de forma automática, sino que el propietario de la página lo ha tenido que configura.

Precisamente para eso estamos aquí, y es bastante sencillo. Pasará simplemente por utilizar una etiqueta meta en el cabecero de la página. Esta etiqueta le indicará al navegador el color con el que queremos que se muestre. De esta manera el navegador de cualquier móvil lo interpretará (si es compatible claro), y cambiará el color de la parte visible de su interfaz. Los menús de los navegadores y demás seguirán siendo los predeterminados, pero igual no es algo que se muestre al usar tu web.


Configurar el color del navegador en Android


En el caso de android tendremos que utilizar la siguiente etiqueta:

meta name="theme-color" content="#ff0202" Esta es interpretada por Chrome y otros navegadores compatibles, haciendo que cambie de color nada mas carga el cabecero de la página.

Configurar el color del navegador en IOS


En el caso de iOS tendremos que utilizar esta otra meta:

meta name="apple-mobile-web-app-status-bar-style" content="#ff0202" Es un poco más compleja pero el funcionamiento es el mismo. Verás que el efecto es un poco más inmersivo que en android.

Configurar el color del navegador en Windows Phone


Por último tenemos este pequeño olvidado para muchos, que aun con una tasa de usuarios inferior sigue siendo bastante usado. La etiqueta en Windows Phone será:

meta name="msapplication-navbutton-color" content="#ff0202"

CONCLUSIONES

Cada navegador dependiendo del sistema operativo interpreta las etiquetas de una forma diferente. Esto hará que sea necesario colocar las 3 si quieres abarcar a todos los usuarios. Recuerda que aquellos que tengan un navegador no compatible con el coloreado no verán estos cambios. Revísalo en tu terminal por si acaso.

Una pregunta sencilla. ¿Sabes que significa PC?

Puede que te parezca una pregunta muy simple, pero muchas veces cuando hablamos con otras personas éstas no saben que significa PC, o ni siquiera qué es pc. Por si acaso eres uno de los que tiene la duda o curiosidad te lo explico a fondo.

Cuando hablamos de Pc lo hacemos siempre refiriéndonos al mundo de la informática. PC es la abreviatura de Personal Computer (en inglés por supuesto), que significa ordenador personal. Esto sitnifica que cuando vemos escrito PC en una frase se está refiriendo a nuestro ordenador, pero no solo a la torre, sino al conjunto completo que se compone de la torre o CPU, altavoces, monitores, teclado, ratón, etc. Todo lo que forma el equipo que utilizamos se conoce como PC.

¿Qué tipo de PCs existen?

Lo más normal es que nos encontremos con dos tipos de equipos, los PC de sobremesa (o PC de escritorio, desktop, etc), que son los que podríamos llamar fijos, es decir, tienes todos los componentes en una CPU, y aparte el resto de periféricos conectados como monitores, altavoces, teclado, raton, componentes por usb… A este conjunto se le suele llamar de escritorio por que no es fácil transportarlos y una vez instalados no los solemos mover del sitio, además de que ocupan todo el escritorio o mesa que tengamos.

Por otro lado tenemos los PCs portátiles, que son compactos y tienen todo lo necesario para funcionar integrado, desde los componentes (hdd, gráfica, procesador, etc), hasta lo que serían los periféricos de un ordenador de sobremesa como el monitor, teclado, trackpad (ratón o mouse). Estos últimos sí que están diseñados para llevarlos encima (unos más que otros por que los hay de más de 5kg), y basta con cerrar la pantalla sobre el teclado y llevarnos el pc y cargador para poder usarlo donde queramos, a diferencia de la locura que es trasladar un equipo de sobremesa.

PCs de sobremesa compactos o barebones. Este otro tipo de pc de sobremesa está pensado para ocupar poco espacio, pero seguir siendo fijo por las dimensiones y peso. Suele tener todo el hardware integrado en el monitor (altavoces incluídos), y solo necesitamos un teclado y ratón para hacerlos funcionar, a no ser que tengan pantalla táctil, en cuyo caso no necesitamos periféricos. También los hay que son muy pequeños, del tamaño de un router, pero que necesitan periféricos adicionales.

Hay un cuarto tipo. Últimamente han aparecido lo que son Portablets (que les llamo yo), que no son otra cosa que tablets realmente potentes, capaces de trabajar como portátiles, si comparamos el rendimiento. Además suelen tener pantallas de entre 11 y 14 pulgadas y también encontramos teclados a los que se pueden acoplar y coger el aspecto de un portátil. Son táctiles y no necesitamos teclado ni ratón para que funcionen, además todo su hardware está pensado desde el punto de vista de la mobilidad, potencia y duración de batería, por lo que es muy normal encontrar Portablets con 8 horas de autonomía y procesadores i3, i5 o i7 sin sacrificar el tamaño, como por ejemplo la Surface de Microsoft. Luego y como propina te comentaré que hay otra clase de equipos, que no se usan de forma doméstica (a no ser que te de por ponerte uno). Estos son los Servidores, que es un PC con una torre pensada para ocupar el mínimo posible, y solo con el hardware necesario para desempeñar ciertas funciones. Normalmente no necesitan monitor, teclado, ratón, etc ya que se controlan de forma remota. Podríamos clasificarlo más como CPU que como PC, pero tiene funcionalidad completa a pesar de no tener conectados los periféricos.

Como eliminar la barra de direcciones de Chrome en Android

Estás desarrollando alguna aplicación web pensada para android? y quieres que en tu dispositivo sea utilizada como si fuese una aplicación nativa no desesperes, por que hay una forma de conseguirlo. Veamos como abrir una web como si fuera una aplicación nativa en android. Lo primero que te diré es que tras muchas, pero que muchas vueltas, al final la única forma que realmente me ha funcionado sin tener que hacer una aplicación en android específica es la que expongo a continuación. Esta forma es oficial y la puedes encontrar junto a otras en la web oficial de google, pero mi intención es explicarlo de forma que no te quede ninguna duda y no tengas que andar probando para que te salga todo a la primera. Esta manera de abrir chrome a pantalla completa sin barra de direcciones te servirá en el caso de que tanto tú como quien vaya a usar tu aplicación siga un simple, pero que muy simple paso en su dispositivo, ya que hay que anclar la página a la pantalla de inicio (es decir, crear un acceso directo con una funcionalidad del menú de chrome).

Como abrir una web en android como si fuera una aplicación nativa a pantalla completa

Al abrir una web con el acceso directo anclado en la pantalla de inicio van a desaparecer todas las funciones de navegador habituales, esto significa que no tendrás:

  • barra de direcciones
  • menú al mantener botón (mejor por que podrás usar jquery mobile)
  • gestos
  • botón de menú (tendrás que tener ojo con esto, no podrás refrescar la página)

La sensación al usar la página será de que funciona más deprisa en general, tanto la navegación como el java que tengas en ella, puesto que parece que el navegador está capado simplemente para la navegación y deja aparte todas las demas funcionalidades, cosa que es bueno.

Ahora sí, vamos a ver finalmente como abrir una web en pantalla completa con android chrome:

  • Cabeceros meta

    En nuestra página, en el header (preferiblemente de todas las páginas) vamos a poner estas líneas en la zona de las metas, justo despues de donde pone :HTML

  • meta name="viewport" content="width=device-width"

    meta name="mobile-web-app-capable" content="yes"

    link rel="icon" sizes="192x192" href="/icon.png"

  • Las dos primeras indican a chrome que tiene que abrir esta aplicación en modo ventana completa y la tercera línea es la del icono que le dará al acceso directo de la pantalla de inicio, puedes poner la url que quieras en el href para que coincida con la ubicación de tu imágen, pero recuerda que el tamaño sea 192×192 píxeles.

Ahora abrimos chrome de forma normal, y nos vamos a la url que queramos que sea la página de inicio de nuestra aplicación, por ejemplo www.vichaunter.org (jeje), y le daremos al botón menú > añadir a pantalla inicio. Una vez le demos a esta opción del menú podemos salir de chrome y deberíamos ver en la pantalla de inicio la imágen que hemos creado como icono de la aplicación en la primera página con espacio libre de esta. Con estos dos simples pasos tendremos tendremos una web como aplicación nativa de android, donde si te das cuenta ya no aparece ni barra de inicio ni el resto de funciones, excepto la de navegación.

El único inconveniente de este modo es que tienens que crear de forma manual el acceso directo a la página, por lo que o bien necesitas acceso físico a los terminales o que los dueños realizen el segundo paso cada uno. Esto va bien para cuando creas una aplicación para un entorno cerrado o una funcionalidad que a tus usuarios les interesa tener como aplicación nativa sin instalar nada (ya que no ocupa memoria interna ni nada por el estilo).