Accueil Médias sociaux Web Design: Principes de base de la détection de navigateurs et de lieux -

Web Design: Principes de base de la détection de navigateurs et de lieux -

Table des matières:

Vidéo: Live MOOC Accessibilité numérique 2025

Vidéo: Live MOOC Accessibilité numérique 2025
Anonim

Lorsque vous naviguez sur Internet sur votre téléphone mobile, de nombreux sites Web affichent automatiquement leur version adaptée aux mobiles. Dans les coulisses, les développeurs ont placé un script dans le site qui fonctionne pour déterminer le type de navigateur que vous utilisez (iPhone, iPad, Android, Blackberry, ou même les navigateurs de bureau tels que Firefox et Internet Explorer). En fonction du résultat demandé, le script redirige l'utilisateur vers le site Web approprié pour garantir une expérience optimale. Par exemple, il n'est pas rare d'avoir plusieurs versions d'un site Web. En plus d'un site spécifique au mobile, vous pouvez avoir un site optimisé pour les nouveaux navigateurs de bureau, prenant en charge de nombreuses fonctions HTML et CSS, et un site simplifié pour les anciens navigateurs.

Détection IP et GPS

Selon la nature de vos produits et services, un détail utile à détecter est l'emplacement général de l'utilisateur dans le monde. De nombreux sites, par exemple, sont des sites mondiaux qui desservent de nombreux pays et langues. Il est possible de créer un site Web unique qui affiche un contenu entièrement différent - dans la langue maternelle de l'utilisateur - simplement en utilisant un script de détection IP (Internet Protocol) qui détermine l'emplacement de l'utilisateur. La façon dont cela fonctionne est que quand quelqu'un obtient le service Internet, on lui attribue une adresse IP. Il existe des bases de données d'emplacements d'adresses IP que le script peut vérifier afin de déterminer l'emplacement général de l'utilisateur.

Le site Web de MonsterEnergy, par exemple, fonctionne de cette façon. Si vous êtes en Espagne et tapez MonsterEnergy. com dans votre navigateur, vous obtenez des nouvelles locales espagnoles, des événements et des images sous-titrées en espagnol. Le script de détection IP indique au site le contenu du pays et de la langue à extraire de son système de gestion de contenu (CMS).

crédit: © Monster Beverage Company

Alors que la méthode de détection IP vous donnera une région générale associée à l'adresse IP, il est également possible d'obtenir l'emplacement GPS spécifique d'un utilisateur en utilisant une combinaison de JavaScript et HTML5 La méthode JavaScript, cependant, exige que vous demandiez d'abord l'autorisation de l'utilisateur. Bien que cette méthode nécessite une étape supplémentaire de demande d'autorisation de la part de l'utilisateur, elle vous fournit des résultats de localisation précis, tandis que la méthode de détection IP n'est précise qu'à un niveau régional général. Bien que la plupart d'entre nous connaissent la capacité d'un téléphone portable à obtenir rapidement des données de localisation GPS en utilisant les données hotspot Wi-Fi et la tour cellulaire, vous vous demandez peut-être comment votre ordinateur de bureau peut obtenir ces données.La réponse est que votre ordinateur domestique et de bureau connecté à Internet partage ses données IP avec des réseaux sans fil à proximité. En plus des réseaux Wi-Fi à proximité, l'API Geolocation utilise plusieurs sources d'informations de localisation, en fonction de l'appareil (smartphone ou bureau), y compris les données satellitaires, les dispositifs de repérage radio et le matériel Internet. Pouvez-vous dire "Big Brother regarde? "

Web responsive

Une tendance plus récente est la notion de design responsive dans laquelle une page Web peut détecter la taille du navigateur et la résolution de l'écran - même si elle change lorsqu'un utilisateur redimensionne la fenêtre du navigateur - et reconfigurer dynamiquement disposition pour accueillir la nouvelle taille. La magie qui rend cela possible est la partie Media Queries de la spécification CSS3. Une requête multimédia est un code CSS qui détecte la taille du navigateur et, en fonction du résultat, indique à la page de charger la feuille de style appropriée, telle qu'un écran large. css par opposition à l'écran mobile. css. Ces différentes feuilles de style contiennent différents systèmes de mise en page, tailles de police et paramètres d'optimisation de l'image. Par conséquent, en théorie, quel que soit le nombre de dispositifs différents introduits sur le marché, chacun avec un espace d'écran unique, il est possible de créer simplement un nouveau document CSS qui optimise votre site Web pour l'adapter.

Crédit: © Andersson-Wise ArchitectsLe site web d'Andersson-Wise est un exemple élégant de design réactif. Le site s'affiche dans deux colonnes dans les grandes fenêtres de navigateur.

Crédit: © Andersson-Wise ArchitectsLe même site Web Andersson-Wise se reconfigure en temps réel en une seule colonne lorsque la fenêtre du navigateur devient plus petite.

Crédit: © Andersson-Wise ArchitectsPrésenté sur un iPhone, le site web d'Andersson-Wise s'affiche en une seule colonne.

Web Design: Principes de base de la détection de navigateurs et de lieux -

Le choix des éditeurs

Valide Versus un document XML bien formé - mannequins

Valide Versus un document XML bien formé - mannequins

En XML, un document valide doit se conformer aux règles de sa définition DTD (Document Type Definition) ou schéma, qui définit quels éléments peuvent apparaître dans le document et comment les éléments peuvent s'imbriquer les uns dans les autres. Si un document n'est pas bien formé, il ne va pas très loin dans le monde XML, donc vous avez besoin de ...

Validation de votre page Web HTML5 - mannequins

Validation de votre page Web HTML5 - mannequins

Peu importe votre précaution, vous faites parfois des bêtises lorsque coder vos pages Web HTML5. Un outil comme un correcteur orthographique pour le code serait génial. Et voilà, il existe un tel outil de vérification de code. Le W3C Markup Validation Service, présenté par les mêmes personnes qui ont élaboré les normes ...

Espacement vertical en HTML - nuls

Espacement vertical en HTML - nuls

Pour le codage du contenu de la page en HTML pour vos pages Web, vous pourriez demander: «Comment puis-je me débarrasser de cet espacement (vertical)? "Entre les paragraphes. Ou, "Comment ajouter un espacement (vertical) entre les éléments de la liste? "D'abord, il sera utile de comprendre d'où vient cet espacement vertical. Espacement vertical en HTML ...

Le choix des éditeurs

Héberger des vidéos Mobile sur YouTube - des nuls

Héberger des vidéos Mobile sur YouTube - des nuls

Pour les webmestres mobiles qui ne veulent pas se démener Sur de nouveaux lexiques de spécifications techniques, l'option la plus simple est de laisser YouTube, représenté sur la figure, faire tout le travail d'hébergement et de diffusion de la vidéo. YouTube rend toutes ses vidéos mobiles conviviales, offrant la meilleure version pour chaque appareil. Lorsque vous téléchargez ...

Sites Web QuarkXPress utiles - mannequins

Sites Web QuarkXPress utiles - mannequins

Les utilisateurs de quarkXPress ont accès à une foule d'informations et de cadeaux liés à QuarkXPress. La prochaine fois que vous êtes en ligne, consultez certains de ces sites QuarkXPress et de publication assistée par ordinateur. Sites XTensions Des centaines de XTensions commerciales pour QuarkXPress sont disponibles pour Mac et Windows; ces XTensions gèrent un large éventail de tâches que QuarkXPress ne peut pas faire. Beaucoup d'informations ...

Activation de User Agent Switcher dans Safari - Témoins

Activation de User Agent Switcher dans Safari - Témoins

Lorsque vous testez un site Web Destiné à l'iPhone et l'iPad sur un ordinateur de bureau, si le script de détection de périphérique sur un serveur reconnaît que vous utilisez un navigateur sur un ordinateur, il ne vous montre pas la version du téléphone. C'est là que l'agent utilisateur entre dans l'image. Safari inclut des fonctionnalités spéciales qui permettent ...

Le choix des éditeurs

Raccourcis vers les centres de commande dans MYOB - mannequins

Raccourcis vers les centres de commande dans MYOB - mannequins

Vous pouvez vous rendre directement au centre de commande de votre choix MYOB. Appuyez sur la touche Ctrl de votre PC tout en appuyant sur l'un de ces chiffres - et vous allez au centre de commande de votre désir! Combinaison de touches Raccourci Résultat Ctrl-1 Centre de commande des comptes Ctrl-2 Centre de commande bancaire Ctrl-3 Centre de commande des ventes Ctrl-4 ...

Rapprochement de votre compte bancaire dans Sage 50 - variables nominales

Rapprochement de votre compte bancaire dans Sage 50 - variables nominales

Avant de commencer un rapprochement bancaire dans Sage 50, vous devez pour vous assurer que vous avez saisi la majorité de vos transactions financières pendant la période de réconciliation. Traditionnellement, les comptables réconcilient le compte bancaire à la fin de chaque mois, une fois qu'ils ont reçu leurs relevés bancaires. Cependant, l'avènement de la banque en ligne ...

Solutions et Knowledge in Salesforce. com Service Cloud - les nuls

Solutions et Knowledge in Salesforce. com Service Cloud - les nuls

En tant qu'agent, vous devez savoir quels outils sont à votre disposition dans Service Cloud pour faciliter votre travail. Plus spécifiquement, Salesforce propose deux outils majeurs de résolution de problèmes pour les clients et les agents de support, Solutions et Knowledge. Quelle est la différence, demandez-vous? Avant de regarder les différences, voici ce qu'elles contiennent ...