Web Design: Die Grundlagen des Browser und Standorterkennung

Wenn Sie das Internet auf Ihrem Mobiltelefon zu finden, ihre Handy-freundliche vielen Websites automatisch Version anzeigen. Hinter den Kulissen platziert Entwickler ein Skript in die Website, um zu bestimmen, läuft, welche Art von Browser Sie verwenden - iPhone, iPad, Android, Blackberry oder sogar Desktop-Browser wie Firefox und Internet Explorer. Je nach abgefragten Ergebnis, leitet das Skript dann den Benutzer auf die entsprechende Webseite ein optimales Benutzererlebnis zu garantieren. Zum Beispiel ist es nicht ungewöhnlich, mehrere Versionen einer Website haben. Neben einem mobilen spezifische Website, können Sie eine Website für neuere Desktop-Browser optimiert haben, viele der neuesten HTML und CSS-Funktionen unterstützen - und eine für ältere Browser vereinfacht.

Menu

IP und GPS-Erkennung

Je nach Art Ihrer Produkte und Dienstleistungen, ein nützliches Detail zu erkennen ist die allgemeine Lage des Benutzers in der Welt. Viele Websites, zum Beispiel, sind globale Websites, die viele verschiedene Länder und Sprachen dienen. Es ist möglich, eine einzige Website zu erstellen, die ganz unterschiedliche Inhalte angezeigt - in der Muttersprache des Benutzers - einfach durch eine IP (Internet Protocol) Erkennungsskript verwenden, die den Standort des Nutzers herausfindet. Das System funktioniert so, dass, wenn jemand Internet Service bekommt, kann er oder sie eine IP-Adresse zugewiesen. Es gibt Datenbanken von IP-Adressorte, die das Skript als Mittel zur Bestimmung des allgemeinen Standort des Nutzers zu überprüfen.

Die Monster Energy Website, zum Beispiel arbeitet auf diese Weise. Wenn Sie in Spanien und Typ MonsterEnergy.com in Ihrem Browser, erhalten Sie lokale spanische Nachrichten, Ereignisse und Bilder auf Spanisch beschriftet. Die IP-Erkennungsskript erzählt die Website, die Land und Sprache Inhalt von ihrem Content Management System (CMS) zu ziehen in.

Während die IP-Detektionsverfahren einen allgemeinen Bereich mit der IP-Adresse zugeordnet geben wird, ist es auch möglich, ein Benutzer bestimmten GPS-Position zu erhalten, indem eine Kombination von javascript und HTML5. Die javascript-Methode ist jedoch nicht erforderlich, dass Sie zuerst die Zustimmung des Benutzers zu fragen. Während diese Methode von der Benutzerberechtigung zu fragen, den zusätzlichen Schritt erfordert, ist es Ihnen Standort Ergebnisse genau lokalisieren-, während die IP-Detektionsverfahren nur auf einer allgemeinen regionaler Ebene genau ist. Obwohl die meisten von uns mit einem Handy in der Lage ist, indem Sie Daten Wi-Fi schnell zu bekommen Daten GPS-Position vertraut sind Hotspot und Zell-Turm, fragen Sie sich vielleicht, wie Sie Ihren Desktop-Computer diese Daten erhalten können. Die Antwort ist, dass Ihr Internet-verbundenen Heim und Büro-Computer teilt seine IP-Daten mit dem nahe gelegenen drahtlosen Netzwerken. Neben der Nähe Wi-Fi-Netzwerken macht die Geolocation API Verwendung mehrerer Standortinformationen Quellen, je nach Gerät (Smartphone oder Desktop) - einschließlich Satellitendaten, Radio-Tracking-Geräte und Internet-Hardware. Kannst du sagen # 147-Big Brother ist watching # 148?;

Sich anpassendes Webdesign

Eine neuere Entwicklung ist der Begriff der ansprechenden Design, bei dem eine Web-Seite, die Browsergröße und Bildschirmauflösung erfassen kann - auch wenn sie sich ändert, wenn ein Benutzer das Browserfenster ändert die Größe - und dynamisch sein Layout neu konfigurieren, um die neue Größe anzupassen. Die Magie, die dies möglich macht, ist die Media Queries Teil der CSS3-Spezifikation. Eine Medienabfrage ist ein CSS-Code, der den Browser-Größe und basierend auf dem Ergebnis erfasst, erzählt die Seite mit dem entsprechenden Stylesheet so zu laden, wie im Gegensatz zu mobilescreen.css widescreen.css. Diese unterschiedlichen Stylesheets enthalten verschiedene Layout-Systeme, Schriftgrößen und Bildoptimierungseinstellungen. Daher ist in der Theorie, egal, wie viele verschiedene Geräte auf dem Markt eingeführt werden, jedes mit einem einzigartigen Platz auf dem Bildschirm, dann ist es möglich, einfach ein neues CSS-Dokument erstellen, die Ihre Website, um es aufzunehmen optimiert.

Der Andersson-Wise-Website ist ein elegantes Beispiel für Responsive Design. Die Website zeigt in zwei col
Der Andersson-Wise-Website ist ein elegantes Beispiel für Responsive Design. Die Website zeigt in zwei Spalten innerhalb der großen Browser-Fenster.
Das gleiche Andersson-Wise Website rekonfiguriert sich in Echtzeit auf einer einzigen Spalte Ansicht, wenn die b
Das gleiche Andersson-Wise Website rekonfiguriert sich in Echtzeit auf einer einzigen-Spalten-Ansicht, wenn das Browserfenster kleiner wird.
Wenn auf einem iPhone gesehen, die Andersson-Wise Website zeigt in einer einzigen-Spalten-Layout. [Credit: &
Wenn auf einem iPhone gesehen, die Andersson-Wise Website zeigt in einer einzigen-Spalten-Layout.

Menü