Share
Dieser letzte Teil der Google Maps-API für Designer-Serie rundet das Thema ab, indem er auf reaktionsfähiges Design, Retina-Bilder und eine Reihe von Test- und Debugging-Tools achtet, die das Leben erheblich erleichtern. Es gibt eine Whistle-Stop-Tour durch eine ganze Reihe von Bereichen, die Sie in Ihren eigenen Projekten weiter erkunden können.
Responsive Startseite. Links - mobiler Stil. Rechts - Laptop- / Desktop- / Tablet-Stil. Wenn Sie in den letzten Jahren nicht unter einem Busch verbracht haben, wissen Sie, dass es beim responsive Design darauf ankommt, dass sich eine Website ändert und sich an das Gerät anpasst, auf dem sie angesehen wird.
Die Homepage dieser Demo (oben) verwendet auch ein responsives Design, um Personen eine geänderte Version der Karte abhängig vom Gerät oder genauer der Bildschirmbreite, die sie verwenden, zu präsentieren.
Der erste Schritt, bevor wir etwas anderes tun, ist sicherzustellen, dass das Viewport-Meta-Tag im festgelegt ist Kopf Ihrer Seite.
Hinweis: Welches Viewport-Attribut Sie zum Einrichten verwenden, liegt ganz bei Ihnen. Lesen Sie unseren Leitfaden für weitere Details.
Der beliebte Ansatz für den Umgang mit responsivem Design, den wir hier verwenden, ist die Anwendung Medien-Anfragen innerhalb der CSS. Medienabfragen stellen eine Möglichkeit dar, das CSS zu segmentieren und unterschiedliche Stile anzuwenden, beispielsweise abhängig von der Breite des Ansichtsfensters, auf dem die Website angezeigt wird.
Die folgende Codeauflistung ist ziemlich lang, aber es ist nützlich zu sehen, was los ist. Um diesen Code in Aktion zu sehen, werfen Sie einen Blick auf die Homepage. Wenn Sie es auf einem größeren Bildschirm anzeigen, ziehen Sie die Seite des Browsers, um sie schmaler zu machen. Wenn die Breite Ihres Browsers unter 640 Pixel liegt, sollte sich das Design ändern.
Die Medienabfrage ist in diesem Fall die @media (min-width: 641px) Code in Zeile 101 und das nachfolgende CSS in den geschweiften Klammern. Diese Medienabfrage prüft die Gerätebreite.
Es ist gut, einen mobilen ersten Ansatz zu verwenden. Dies ist die Idee, dass der Standardstil für mobile Geräte gedacht ist. Dann werden mithilfe von Medienabfragen zunehmend Ausnahmen hinzugefügt, da die Ansichtsfenster größer werden. Durch diesen Ansatz können Websites auf mobilen Geräten schneller geladen werden. Zum Beispiel werden Dinge wie das große Hintergrundbild, das wir verwendet haben, nur für Geräte mit größerem Bildschirm geladen.
Im obigen Code also der erste Teil des Codes (d. H. Oberhalb der Medienabfrage) - @media (min-width: 641px) ) wird standardmäßig auf jedem Gerät geladen. Dann ist die @media (min-width: 641px) Die Medienabfrage lädt die Stile in die geschweiften Klammern für Geräte, deren Breite über 641px liegt.
Eine häufig gestellte Frage ist:
"Wo sollen die Haltepunkte im Design sein?"
Der Haltepunkt in diesem Beispiel ist 641px. Diese Demo verwendet nur einen Haltepunkt, aber häufig möchten Sie mehr als einen. Dies kann sehr stark von Ihren Inhalten abhängen und auch von der Anzahl der Geräte, auf die Sie abzielen, und den gängigen Bildschirmauflösungen auf dem Markt.
In diesem Beispiel zeigt das iPhone (Breite 640 Pixel) den Standardstil für mobile Geräte an, während das iPad2 (Breite 768) die Desktopversion anzeigt. Unser gewählter Haltepunkt ist für diese Karte geeignet, da die Grafik für das Telefon zu groß ist. Auf anderen, eher auf Text basierenden Websites kann es jedoch vorkommen, dass der Stil nur dann geändert werden muss, wenn Sie auf viel kleinere Bildschirmgrößen zurückgreifen, sodass die Haltepunkte niedriger sein können.
Hinweis: Bei der Auswahl von Haltepunkten ist es oft am klügsten, das Design zu betrachten und zu beobachten, wo es liegt geht kaputt, anstatt spezifische Geräteauflösungen anzustreben. Die Bildschirmgrößen sind so groß und vielfältig und ändern sich mit der Zeit, dass es einfach unmöglich ist, sie genau zu verfolgen.
Es ist manchmal angebracht, den Benutzern je nach Ansichtsbedingungen völlig unterschiedliche Versionen des Inhalts zu präsentieren.
In unserem Fall erfolgt dies mit zwei div Tags (d. h. button_to_map_mobile und button_to_map_standard), die jeweils einen anderen Link und eine etwas andere grüne Schaltfläche "Karte besuchen" enthalten. Wenn Sie sich auf einem Laptop oder Desktop-Computer befinden, zeigen Sie die Homepage an und ziehen Sie die Seite Ihres Browsers hinein, bis das Design in das mobile Layout geändert wird. Sie sollten feststellen, dass sich die grüne Schaltfläche "Karte besuchen" leicht ändert und das Wort "Handy" enthält. Wenn Sie jetzt auf diese Schaltfläche klicken, erhalten Sie eine mobile Version der Karte.
Die Medienabfrage wird verwendet, um zu wechseln div ist derzeit sichtbar. Das heißt Wenn Sie sich die Codeliste oben ansehen, können Sie sehen, dass die button_to_map_standard hat die Anzeige: keine; Wird angewendet, wenn der standardmäßige mobile Stil verwendet wird, aber wenn die Medienabfrage feststellt, dass der Bildschirm über 641 Pixel breit ist, wird das angewendet Bildschirmsperre; zu button_to_map_standard. (Die Medienabfrage führt den umgekehrten Vorgang aus button_to_map_mobile div).
Wenn Sie diesem Tutorial bei der Erstellung Ihrer eigenen Webseite folgen, werfen Sie einen Blick auf den Quellcode, der über den Link oben auf dieser Seite verfügbar ist. Ich persönlich fand es einfacher, etwas zuerst mit dem "Mobile First" -Ansatz und einem Haltepunkt zum Laufen zu bringen, bevor er auf ein komplexeres Design ausgeweitet wurde.
Es ist erwähnenswert, dass die Wahl zwischen Alternative Inhalt und ansprechbar Inhalt ist etwas, das Sie bei der Entwicklung von Websites für mehrere Geräte berücksichtigen sollten.
Hoffentlich haben Sie gerade einen Blick auf die neue mobile Version der Karte geworfen. Wir werden in einer Minute darauf zurückkommen. Zunächst sollten Sie jedoch einen Blick darauf werfen, wie auf der Startseite Bilder für Retina-Bildschirme verwendet werden.
Retina-Bildschirme (und andere Bildpunkte mit hoher Pixeldichte) haben so viele Pixel, die so nahe beieinander liegen, dass es für die Retina in einem menschlichen Auge nahezu unmöglich ist, einzelne Pixel zu unterscheiden. Retina-Bildschirme gelten als die nächste Generation von Bildschirmen, und eine wachsende Anzahl von Geräten hat sie bereits, wie beispielsweise die iPhones 4 und 5 und einige hochkarätige MacBook Pros. Der Nachteil ist jedoch, dass Grafiken, die nicht für diese Bildschirme erstellt wurden, tatsächlich etwas verschwommen wirken.
Zum Glück gibt es einige Möglichkeiten. Der Ansatz, für den Sie sich entscheiden, hängt von der Art des Bildes selbst ab. Diese Demo verwendet zwei Ansätze. retina.js-Bibliothek und SVG-Grafiken.
Retina.js ist eine leichtgewichtige JavaScript-Bibliothek, die kostenlos heruntergeladen werden kann. Sie müssen nur die JavaScript-Datei neben Ihrer Website auf Ihrem Server speichern und unmittelbar vor dem Schließen die folgende Codezeile hinzufügen Karosserie Etikett.
Sie speichern dann zwei Versionen von jedem Bild. eine doppelt so groß wie das Bild auf einem Standardbildschirm und die andere in normaler Größe. Der Trick für das Funktionieren dieser Bibliothek besteht darin, dass Sie Ihre Bilder in demselben Ordner auf Ihrem Server speichern müssen und die strikte Namenskonvention einhalten müssen -
Sie fügen dann wie üblich Ihr Bild zu Ihrer Seitenmarkierung hinzu, indem Sie einfach die Standardauflösungsversion hinzufügen -
Wenn jemand Ihre Website auf einem Retina-Display anzeigt, teilt das Vorhandensein des Skripts "retina.js" Ihrer Website mit, ob eine hochauflösende Version verfügbar ist.
Obwohl für retina.js die Zeit begrenzt ist, die zum Speichern von zwei Versionen für jedes Bild erforderlich ist, kann es für fotografische Bilder oder Bilder ohne Vektortyp sehr nützlich sein.
Die grüne Schaltfläche "Karte besuchen" auf der Startseite verwendet das Plugin retina.js. Um dies in Aktion zu sehen, versuchen Sie, die Website auf einem Retina-Gerät anzuzeigen, z. iPhone 4 oder 5, und sehen Sie sich an, wie scharf der Text auf der grünen Taste ist. Wenn Sie eine eigene Kopie des Codes heruntergeladen haben, entfernen Sie das Plugin retina.js und zeigen Sie die Website erneut auf dem Retina-Gerät an. Sie sollten feststellen, dass die Qualität der Schaltfläche (z. B. die weißen Linien im Text) schlechter ist.
Ich würde empfehlen, retina.js für Schlüsselfotos oder Bilder ohne Vektortyp zu verwenden, die sich nicht oft auf Ihrer Homepage oder in Ihrer Vorlage ändern. Wenn Sie beispielsweise ein Blog mit mehreren Autoren betreiben, ist es wahrscheinlich unrealistisch zu erwarten, dass zwei Versionen für jedes Bild erstellt werden.
Ein weiterer Ansatz für die Erstellung gestochen scharfer Grafiken für Retina-Bildschirme besteht in der Verwendung von SVG-Bildern. SVG steht eigentlich für Scalable Vector Graphics. Wie der Name vermuten lässt, eignen sich SVG-Bilder für Vektorbilder (d. H. Keine Fotos!).
Wenn Vektorgrafiken vergrößert werden, behalten sie ihre Schärfe. Um ein Beispiel zu sehen, werfen Sie einen Blick auf die Homepage. Das Zahnrad- und Schraubenschlüsselsymbol ist eine SVG-Grafik. Seine Breite ist auf 50% eingestellt. Wenn Sie die Größe Ihres Browsers ändern, sollten Sie feststellen können, dass er immer perfekt scharf bleibt. Es bleibt auch perfekt scharf, wenn Sie Ihren Browser zoomen (z. B. auf einem Telefon)..
SVG-Grafiken sind eigentlich ein XML-basiertes Vektorformat. Das bedeutet, dass Sie sie, wenn Sie möchten, direkt mit einem einfachen Texteditor bearbeiten können. Der obige Code erstellt ein Bild des gelben Kreises darunter.
Einfache SVG-Demo (Screenshot). Sie können SVG-Bilder auf dieselbe Weise in Ihre Webseiten einfügen, wie Sie ein JPG oder ein anderes Bild einfügen.
SVG wird von allen modernen Browsern unterstützt, einschließlich derjenigen, die auf Retina-Geräten wie den iPhones 4 und 5 verwendet werden. Es ist jedoch immer noch wichtig, ältere Browser, die diese nicht unterstützen, z. B. IE 8, zu unterstützen. Wenn Sie dies tun Wenn Sie Modernizr (siehe unten) bereits für den Rest Ihrer Site verwenden, ist dies ein vernünftiger Ansatz. Es gibt jedoch auch ein spezielles JavaScript-Plugin, SVGeezy, das sich damit befassen wird.
Laden Sie das Skript herunter und speichern Sie es neben Ihrer Website auf Ihrem Server. Fügen Sie dann die folgende Codezeile vor dem close body-Tag hinzu.
Ähnlich wie das oben beschriebene Retina-Plugin stellen Sie tatsächlich jedes Mal zwei Bilder zur Verfügung. die SVG-Datei und die Fall-Back-JPEG- oder PNG-Datei. Beide müssen am selben Ort auf Ihrem Server gespeichert werden. Wenn das SVGeezy-Plugin feststellt, dass Ihr Browser keine SVG-Dateien unterstützt, wird die alternative Version des Images verwendet.
Wenn Sie die Quelldateien für die Demo von dem Link oben auf dieser Seite heruntergeladen haben, sehen Sie sich die SVG-Datei an refresh.svg und wie das tutorial4_index.html Datei verwendet dieses Bild.
Beim Erstellen der SVG-Dateien genügt die Idee, eine Bilddatei manuell zu codieren, damit selbst der Geekest-Geek eine Meile laufen kann! Glücklicherweise können Sie Bilder als SVG-Dateien von Adobe Illustrator speichern (Klicken Sie auf Datei> Speichern> SVG) oder die Open-Source-Software zur Bearbeitung von Vektorbildern, Inkscape. Wenn ich das sage, würde ich empfehlen, einige Testläufe durchzuführen, um sicherzustellen, dass Ihre Designs im Browser wie erwartet angezeigt werden.
Es gibt auch viele Websites, auf denen kostenlose SVG-Symbole zum Download angeboten werden. Das in dieser Demo verwendete Zahnrad-Symbol stammt von Game Icons. Eine weitere gute Website ist der Icon Finder, der neben allen Suchergebnissen die verfügbaren Formate auflistet. Icon Finder ist auch sehr nützlich, um ein Gefühl dafür zu bekommen, welche Art von Bildern als SVG-Dateien erzeugt werden können.
Obwohl SVG-Dateien nur für bestimmte Bildtypen geeignet sind, können sie bei sorgfältiger Ausnutzung eine leistungsstarke Möglichkeit bieten, gestochen scharfe Grafiken für alle Geräte bereitzustellen. Bevor Sie fortfahren, ist es erwähnenswert, dass es andere Möglichkeiten gibt, Retina-Bilder zu implementieren, die nicht in dieser Demo implementiert sind, z. B. eine serverseitige PHP-Lösung, die Cookies und geänderte .htacces-Dateien verwendet, oder Symbolzeichensätze.
Diese Demo hat zwei Versionen der Karte; eine Laptop- / Desktop- / Tablet-Version und eine mobile Version.
Sowohl die mobile als auch die Desktop-Karte verwenden dieselben Daten (d. H. Fotos), die auf Flickr gespeichert sind. Das Erstellen von zwei Versionen kann etwas schummeln. Für die große Mehrheit der Websites würde ich aufgrund des offensichtlichen Wartungsaufwands keine separaten Versionen für Mobil- und Desktopgeräte empfehlen. Der neuartige Google-Kartentyp, den wir erstellt haben, ist jedoch der Fall, wenn zwei Versionen sinnvoll sind.
Entscheidend ist jedoch, dass wir die Daten nicht duplizieren werden. Stattdessen, Beide Versionen der Karte basieren auf denselben Daten auf Flickr. Dies bedeutet, dass der Aufwand für zwei Versionen minimal ist und wir die Flexibilität haben, das Erscheinungsbild der Karte je nach Gerät anzupassen.
Ich habe das Beispiel aus dem letzten Tutorial erweitert. Das Lernprogramm bezieht Daten aus diesem neuen Flickr-Konto (Benutzer-ID: 99915664 @ N08). (Erinnerung - Jeder Flickr hat in diesem Fall einen einfachen (ish) Benutzernamen bennett1671, und eine Benutzer-ID-Nummer, in diesem Fall 99915664 @ N08.) Wenn Sie also daran arbeiten, was Sie im letzten Tutorial gemacht haben, müssen Sie Ihre Karte auf dieses neue Flickr-Konto verweisen.
Dieser neue Flickr-Account enthält Fotos für alle Festivals, einschließlich der kleineren und der wichtigsten Veranstaltungen. Der Flickr-Account des vorherigen Tutorials enthielt nur Fotos für kleinere Festivals. Die Fotos für die Hauptveranstaltungen wurden nicht auf Flickr gespeichert.
Das Markieren Ihrer Fotos in Flickr ist der Schlüssel, damit dies funktioniert. Jedes Foto in Flickr wird mit einem Tag versehen, um anzuzeigen, ob es sich um ein Foto handelt Hauptveranstaltung oder ein smallevent (Diese Tags sind für die Laptop- / Desktop- / Tablet-Version erforderlich) und ob sie eine sind englandevent, Schottlandevent, walesevent oder irelandevent (diese Tags sind für die mobile Version erforderlich).
Wenn Sie in der Laptop- / Desktop- / Tablet-Version auf die orangefarbene Smaller Events-Schaltfläche klicken, wird der folgende Flickr-API-Aufruf ausgeführt. Dies ruft den 99915664 @ N08 Flickr-Account auf und filtert die Ergebnisse nach dem Tag smallevent.
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=smallevent&has_geo=1&extras=geo&format=json&jsoninfo?
Bei der mobilen Version habe ich die Marker nach Ländern gruppiert und die Symbole entsprechend farbig dargestellt. Wenn Sie beispielsweise auf die weiße England-Markierung klicken, wird der folgende Flickr-API-Aufruf ausgeführt. Dieser API-Aufruf ist derselbe wie der vorherige, jedoch werden die Ergebnisse anhand des Tags gefiltert englandevent.
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=englandevent&has_geo=1&extras=geo&format=joura_Jaa06?
Eine vollständige Beschreibung der Verarbeitung der Ergebnisse dieser Flickr-API-Aufrufe finden Sie im vorherigen Tutorial. Beide verwenden die flickr.photos.search-Methode der Flickr-API.
Alle Kartenmarkierungen in der mobilen Version sind SVG-Dateien (siehe oben). Obwohl sie etwas einfacher sind als die Symbole in der Laptop- / Desktop- / Tablet-Version, bleiben sie auf Retina-Bildschirmen wie dem iPhone 4 oder 5 immer scharf.
Um diese Tutorial-Serie zu beenden, möchte ich nur einige Werkzeuge hervorheben, die ich für die Entwicklung von Karten oder sonstiges online für nützlich halte. Ich weiß, dass es unzählige, vielleicht tausende von Werkzeugen in der Nähe gibt, und daher ist dies keinesfalls eine erschöpfende Liste. Stattdessen ist es das "Werkzeug", mit dem ich Dinge teste und herausfinde, warum etwas nicht nach Plan verlief.
Diese Tools sind nützlich und möglicherweise unerlässlich, um den Albtraum zu vermeiden, dass eine Website auf Ihrem eigenen Computer einwandfrei funktioniert. Sie muss nur feststellen, dass auf dem Computer eines Kunden oder Kunden etwas Unerwartetes passiert.
Öffnen Sie Chrome und klicken Sie auf, um auf die Tools des Chrome-Entwicklers zuzugreifen Menütaste oben rechts und dann Werkzeuge, dann Entwicklerwerkzeuge.
Auf der Registerkarte Elemente der Tools von Google Chrome Developers können Sie auf Teile Ihrer Webseite klicken, um Informationen darüber anzuzeigen, wie sie vom Browser gerendert wurden. Dies bewirkt eine enorme Menge an Dingen. genug, um ein ganzes Tutorial alleine zu füllen! Ein paar Bits, die ich oft benutze, sind:-
Die Registerkarte "Netzwerk" zeigt an, wie lange es dauert, bis ein Teil einer Webseite geladen ist. Nicht alle Browser unterstützen alle HTML- und CSS-Funktionen. Dies kann problematisch sein, wenn Sie die interessanteren Funktionen von HTML5 und CSS3 nutzen möchten und gleichzeitig sicherstellen möchten, dass Personen mit der ältesten Version des IE auch auf Ihre Website zugreifen können.
Aber wenn Sie nicht über ein außergewöhnliches Gedächtnis verfügen (habe ich nicht!), Ist es fast unmöglich, sich zu merken, welche Browser welche Funktionen ablehnen. Hier ist die caniuse-Website sehr nützlich. Diese Website gibt einen Überblick darüber, welche Funktionen von HTML, CSS, SVG usw. mit welchen Versionen von welchen Browsern kompatibel sind.
Wenn Sie eine neue Funktion verwenden möchten, aber ältere Browser dies nicht unterstützen, können Sie die JavaScript-Bibliothek von Modernizr verwenden. Wie sie auf ihrer Website erklären:
„Die Nutzung cooler neuer Webtechnologien macht großen Spaß, bis Sie Browser unterstützen müssen, die im Rückstand sind. Mit Modernizr können Sie einfach bedingtes JavaScript und CSS schreiben, um jede Situation zu handhaben, unabhängig davon, ob ein Browser eine Funktion unterstützt oder nicht. “
Wenn der Browser eines Benutzers eine bestimmte Funktion nicht unterstützt, können Sie in Modernizr auch eine Fallback-Funktion angeben. Dies ist dem oben beschriebenen SVGeezy-Plugin sehr ähnlich.
Neben der Planung von Browserunterstützung und Rückschlägen beim Erstellen Ihrer Website ist es auch wichtig, diese in verschiedenen Browsern zu testen. Browserstack ist ein effizienter Weg, dies zu tun. Hier können Sie eine URL übermitteln und sich dann ansehen, wie die Site in verschiedenen Browsern funktioniert. Der einzige Nachteil ist, dass eine Abonnementgebühr anfällt. Dies ist zwar günstiger als eine Bank mit realen Maschinen und Geräten, die zum Testen zur Verfügung stehen. Eine kostenlose Testversion ist ebenfalls verfügbar, damit Sie sehen können, was Sie denken.
Ein weiteres nützliches Tool zum Testen von Browsern, wenn es um die Geheimnisse geht, wenn Dinge im IE zum Laufen gebracht werden, ist die Website Modern.IE. Wie der Name vermuten lässt, handelt es sich nur um IE. Aber es ist kostenlos und immer noch eine sehr nützliche Ressource.
Bevor Sie einen Blick auf Ihre Website in Browserstack oder ModernIE werfen, müssen Sie Ihren Code überprüfen, um etwaige Syntaxfehler zu beheben.
Ein Validator ist eine kostenlose Web-App, die Ihren Code anhand der aktuellen Standards überprüft. Standards sind wichtig, um sicherzustellen, dass Ihre Website auf verschiedenen Browsern und Geräten vorhersehbar funktioniert.
Es gibt auch eine Reihe von Tools, mit denen Sie Ihre JavaScript-Syntax überprüfen können. Closure Compiler ist eigentlich ein Tool zum Komprimieren von JavaScript (was Sie möglicherweise auch tun möchten, wenn Ihre Dateigröße sehr groß ist), es ist jedoch auch nützlich, um Syntaxfehler zu überprüfen. z.B. lästige fehlende Semikolons, die uns alle fangen! Wenn Sie den Code kopieren und in Ihren Code einfügen und auf Kompilieren klicken, werden alle Fehler auf der Registerkarte Fehler hervorgehoben. Eine weitere nützliche Site zum Überprüfen von Code ist JSHint.
Die Seitengeschwindigkeit ist wichtig, da Besucher nicht nur vertrieben werden, wenn das Laden Ihrer Website lange dauert, sondern Google kann dies bei der Bestellung von Suchergebnissen berücksichtigen.
Es gibt eine Reihe von Tools, mit denen Sie dies testen können, einschließlich -
Diese Tools bieten auch Vorschläge für Leistungsverbesserungen, die Sie vornehmen können. Eine häufige Verbesserung besteht beispielsweise darin, die Bilder weiter zu komprimieren. Sie können diese Tools in Verbindung mit der Registerkarte "Netzwerk" in den Google Chrome Developers Tools (oben) verwenden, um mögliche Probleme zu untersuchen.
Gut das war's! Wie ich zu Beginn dieses Tutorials sagte, wäre es eine Whistle-Stop-Tour! Hoffentlich sind Sie nach dieser Tutorial-Reihe jetzt in der Lage, Ihre eigenen Google Maps-Kreationen zu erstellen. Habe Spaß!
Die Credits für die meisten Bilder (z. B. die Festivalfotos) finden Sie am Ende der vorherigen Tutorials 1 und 3. Dies sind die neuen Bits für dieses Tutorial:
Accentsconagua