Diseño web: los fundamentos de la detección del navegador y la ubicación

Cuando se navega por Internet en su teléfono móvil, muchos sitios web se muestran automáticamente su versión para dispositivos móviles. Detrás de las escenas, los desarrolladores colocan una secuencia de comandos en el sitio que se ejecuta para determinar qué tipo de navegador que está utilizando - iPhone, iPad, Android, Blackberry, o incluso navegadores de escritorio como Firefox e Internet Explorer. Dependiendo del resultado consultada, la secuencia de comandos a continuación, redirige al usuario a la página web adecuada para garantizar una experiencia óptima. Por ejemplo, no es raro tener varias versiones de una página web. Además de un sitio específico para móviles, es posible que tenga un sitio optimizado para navegadores de escritorio más recientes, el apoyo a muchas de las últimas características de HTML y CSS - y uno simplificado para navegadores antiguos.

detección de IP y GPS

Dependiendo de la naturaleza de sus productos y servicios, un detalle es útil para detectar la ubicación general del usuario en el mundo. Muchos sitios, por ejemplo, son sitios globales que atienden a una gran cantidad de diferentes países e idiomas. Es posible crear un único sitio web que muestra contenido totalmente diferente - en el idioma nativo del usuario - simplemente utilizando un script de detección de IP (Protocolo de Internet), que da cuenta de la ubicación del usuario. La forma en que funciona es que cuando alguien recibe servicios de Internet, él o ella se le asigna una dirección IP. Hay bases de datos de ubicaciones de direcciones IP que el guión puede comprobar en contra como un medio para determinar la ubicación general del usuario.

La página web MonsterEnergy, por ejemplo, funciona de esta manera. Si está en España y el tipo MonsterEnergy.com en el navegador, se obtiene noticias locales español, eventos, y las imágenes con subtítulos en español. El script de detección de IP indica el sitio en qué país y el contenido de lenguaje para extraerá de su sistema de gestión de contenidos (CMS).

Mientras que el método de detección de IP le dará una región general asociada con la dirección IP, también es posible obtener la ubicación GPS específica de un usuario mediante el uso de una combinación de javascript y HTML5. El método de javascript, sin embargo, requiere que primero consulte el permiso del usuario. Si bien este método requiere el paso adicional de pedir permiso al usuario, se da a identificar-resultados precisos de localización, mientras que el método de detección de IP es precisa sólo a nivel regional general. Aunque la mayoría de nosotros estamos familiarizados con la capacidad de un teléfono celular para obtener datos de localización GPS de forma rápida mediante el uso de hotspot y célula-torre de datos Wi-Fi, puede que se pregunte cómo su computadora de escritorio puede obtener dichos datos. La respuesta es que su Internet conecta el hogar y la computadora de la oficina comparte sus datos IP con las redes inalámbricas cercanas. Además de las redes Wi-Fi cercanas, la API de geolocalización hace uso de varias fuentes de información de ubicación, dependiendo del dispositivo (teléfono inteligente o de escritorio) - incluyendo los datos de satélite, dispositivos de localización por radio, y el hardware de Internet. ¿Puede usted decir “Gran Hermano está mirando?”

Diseño web adaptable

Una tendencia más reciente es el concepto de diseño de respuesta en el que una página web puede percibir el tamaño del navegador y resolución de pantalla - incluso a medida que cambia cuando un usuario cambia el tamaño de la ventana del navegador - y dinámicamente reconfigurar su diseño para adaptarse al nuevo tamaño. La magia que hace esto posible es la parte de los medios de comunicación de consultas de la especificación CSS3. Una consulta de los medios de comunicación es un código CSS que detecta el tamaño del navegador y, en función del resultado, dice que la página cargue la hoja de estilo apropiado, tal como widescreen.css en contraposición a mobilescreen.css. Estas hojas de estilo en diferentes contienen diferentes sistemas de diseño, tamaños de fuente y los ajustes de optimización de imagen. Por lo tanto, en teoría, no importa cuántos se introducen diferentes dispositivos en el mercado, cada uno con un espacio en la pantalla única, es posible crear simplemente un nuevo documento CSS que optimiza su sitio web para acomodarlo.