Web design: o básico de detecção de navegador e localização

Ao navegar na Internet em seu telefone móvel, muitos sites exibir automaticamente a sua versão para celular. Nos bastidores, os desenvolvedores colocado um script no site que é executado para determinar que tipo de navegador que você está usando - iPhone, iPad, Android, Blackberry, ou navegadores mesmo desktop, como o Firefox e Internet Explorer. Dependendo do resultado consultado, o script, em seguida, redireciona o usuário para o site adequado para garantir uma experiência ideal. Por exemplo, não é incomum ter várias versões de um website. Além de um site específico para celular, você pode ter um site otimizado para navegadores desktop mais recentes, suportando muitos dos mais recentes recursos de HTML e CSS - e um simplificado para navegadores mais antigos.

detecção de IP e GPS

Dependendo da natureza de seus produtos e serviços, um detalhe útil para detectar é a localização geral do usuário no mundo. Muitos sites, por exemplo, são sites globais que servem um monte de diferentes países e idiomas. É possível criar um único site que exibe o conteúdo totalmente diferente - na língua nativa do usuário - simplesmente usando um IP script de detecção (Internet Protocol) que descobre a localização do usuário. O modo como funciona é que quando alguém recebe serviços de Internet, ele ou ela é atribuído um endereço IP. Existem bases de dados de localizações de endereço de IP que o script pode verificar contra como um meio de determinar a localização geral do usuário.

Video: Interview métier : Web Designer



O site Monster Energy, por exemplo, funciona dessa maneira. Se você estiver na Espanha e tipo MonsterEnergy.com em seu navegador, você tem notícias locais espanhol, eventos e imagens legendadas em espanhol. O script de detecção de IP diz o site que país e conteúdo de linguagem para puxar a partir de seu sistema de gerenciamento de conteúdo (CMS).

[© Monstro Beverage Company]

Video: Website Design: Browser Compatibility - Internet Explorer Bandages

Enquanto o método de detecção IP lhe dará uma região geral associada ao endereço IP, também é possível obter localização GPS específicas de um usuário usando uma combinação de javascript e HTML5. O método javascript, no entanto, exige que você primeiro pedir permissão do usuário. Enquanto este método requer a etapa extra de pedir a permissão do usuário, dá-lo a identificar com precisão de localização resultados, enquanto o método de detecção de IP são precisas apenas a nível regional em geral. Embora a maioria de nós estão familiarizados com a capacidade de um telefone celular para obter os dados de localização GPS rapidamente, usando dados de hotspots e célula-torre Wi-Fi, você pode estar se perguntando como o seu computador desktop pode obter esses dados. A resposta é que o Internet-conectado casa e computador do escritório compartilha seus dados de IP com as redes sem fio próximas. Além de redes Wi-Fi próximas, a API do Geolocation faz uso de várias fontes de informação local, dependendo do dispositivo (smartphone ou desktop) - incluindo dados de satélite, dispositivos de rastreamento de rádio e hardware Internet. Você pode dizer “Big Brother está vigiando?”

Web design responsivo

Uma tendência mais recente é a noção de design responsivo em que uma página web pode sentir a resolução tamanho do navegador e tela - mesmo como ela muda quando um usuário redimensiona a janela do navegador - e dinamicamente reconfigurar seu layout para acomodar o novo tamanho. A magia que torna isso possível é a porção consultas de mídia da especificação CSS3. A consulta de mídia é um código CSS que detecta o tamanho do navegador e, com base no resultado, diz a página carregar a folha de estilo apropriado, como widescreen.css em oposição a mobilescreen.css. Estas folhas de estilo diferentes contêm diferentes sistemas de layout, tamanhos de fonte e configurações de otimização de imagem. Portanto, em teoria, não importa quantas diferentes dispositivos são introduzidos no mercado, cada um com um espaço de tela única, é possível simplesmente criar um novo documento CSS que otimiza seu site para acomodá-lo.

O site Andersson Sábio é um exemplo elegante de design responsivo. O site exibe em dois col
O site Andersson Sábio é um exemplo elegante de design responsivo. O site exibe em duas colunas dentro de grandes janelas do navegador.
O mesmo site Andersson Sábio se reconfigura em tempo real para uma visualização de coluna única quando a b
O mesmo site Andersson Sábio se reconfigura em tempo real para uma visualização de coluna única quando a janela do navegador fica menor.
Quando visualizado em um iPhone, o site Andersson-wise é exibido em um layout de coluna única. [& Amp;
Quando visualizado em um iPhone, o site Andersson-wise é exibido em um layout de coluna única.

Publicações relacionadas