Share
Den här sista delen av Google Maps API for Designers-serien runda upp saker genom att titta på lyhörda design, näthinnans bilder och ett antal test- och felsökningsverktyg som gör livet enklare. Det ger en whistle-stop turné genom en mängd olika områden, som du kan utforska vidare i dina egna projekt.
Responsiv hemsida. Vänster - mobil stil. Höger - laptop / skrivbord / tablett stil. Om du inte har snöat under en busk under de senaste åren vet du att den lyhörda designen handlar om att göra en webbplatsändring och anpassa sig enligt den enhet som den ses på.
Hemsidan för denna demo (ovan) använder också en lyhörd design för att presentera personer med en ändrad version av kartan beroende på enheten, eller mer specifikt skärmbredd, de använder.
Det första steget innan vi gör någonting annat är att se till att metadaggen för viewport är inställd i huvud av din sida.
Notera: Exakt vilka visningsattribut du använder för att ställa upp saker är upp till dig. Läs vår guide för mer information.
Det populära sättet att hantera responsiv design som vi kommer att använda här är att tillämpa mediafrågor inom CSS. Mediafrågor är ett sätt att segmentera upp CSS och tillämpa olika stilar beroende på till exempel bredden på visningsporten som webbplatsen ses på.
Koden nedan är ganska lång, men det är användbart att se vad som händer. För att se denna kod i åtgärd, ta en titt på hemsidan. Om du tittar på den på en större skärm dra du sidan av webbläsaren för att göra den smalare. När din webbläsares bredd når under 640px, bör designen ändras.
Mediasökningen i detta fall är @media (min bredd: 641px) kod vid linje 101, och efterföljande CSS inom de krökta parenteserna. Denna mediefråga kontrollerar enhetens bredd.
Det är bra att använda ett mobilt första tillvägagångssätt; Det här är tanken att standardstilen riktar sig till mobila enheter, och då läggs undantag gradvis med mediefrågor, eftersom synpunkter blir större. Detta tillvägagångssätt hjälper webbplatser att ladda snabbare på mobila enheter. Till exempel, saker som den stora bakgrundsbilden vi har använt laddas bara för större skärmsenheter.
Så i koden ovan är den första delen av koden (dvs ovanför mediefrågan - @media (min bredd: 641px) ) laddas som standard på varje enhet. Sedan @media (min bredd: 641px) mediafråga laddar in stilarna i de krökta parenteserna för enheter vars bredd är över 641px bred.
En vanlig fråga är:
"Var ska brytpunkterna i designen vara?"
Brytpunkten i detta exempel är 641px. Denna demo använder bara en brytpunkt, men ofta vill du ha mer än en. Detta kan mycket bero på ditt innehåll, och även på det antal enheter du riktar in och de populära skärmupplösningarna på marknaden.
I det här exemplet kommer iPhone (bredd 640px) att visa standard mobilstil, medan iPad2 (bredd är 768) visar skrivbordsversionen. Vår utvalda brytpunkt är lämplig för den här kartan, eftersom grafiken är för stor för telefonen. Men andra mer textbaserade webbplatser kan tycka att det bara är när du kommer ner till mycket mindre skärmstorlekar att stilen behöver ändras avsevärt och så kan brytpunkterna vara lägre.
Notera: Vid val av brytpunkter är det ofta klokt att helt enkelt överväga designen och observera var den är raster, snarare än att rikta sig till specifika enhetsupplösningar. Skärmstorlekarna är så breda och varierade, och de ändras när tiden går, att det bara finns inget sätt att noggrant hålla reda på dem.
Det är ibland lämpligt att presentera användare med helt olika versioner av innehåll, beroende på deras visningsförhållanden.
I vårt fall görs detta med två div taggar (dvs.. button_to_map_mobile och button_to_map_standard), som varje innehåller en annan länk och en lite annan grön "visit map" -knapp. Om du är på en bärbar dator eller en stationär dator, se hemsidan och dra in sidan av din webbläsare tills designen ändras till mobillayouten. Du bör märka att den gröna "visit map" -knappen ändras något för att inkludera ordet "mobil". Om du klickar på den här knappen får du en mobilversion av kartan.
Mediasökningen används för att alternera som div är för närvarande synlig. Dvs. Om du tittar på kodlistan ovan kan du se att button_to_map_standard har display: none; appliceras på det när standardmobilstilen används, men när mediafrågan upptäcker skärmen över 641 pixlar bred tillämpas den display: block; att button_to_map_standard. (Mediasökningen gör det omvända till button_to_map_mobile div).
Om du följer denna handledning gör din egen webbsida, ta en titt på källkoden som finns tillgänglig från länken längst upp på den här sidan. Jag har personligen funnit det lättare att få någonting att arbeta i första hand med "mobila först" -metoden och en brytpunkt, innan den utvidgas till en mer komplex design.
Det är värt att notera att valet mellan alternativ innehåll och mottaglig Innehållet är något som du bör ge riktigt hänsyn till när du utvecklar webbplatser för flera enheter.
Förhoppningsvis har du just tagit en glimt på den nya mobilversionen av kartan. Vi kommer tillbaka till det på bara en minut. Men först är det värt att ta en titt på hur hemsidan använder bilder som är utformade för näthinneskärmar.
Näthinnor (och andra höjd pixeldensitet) skärmar har så många pixlar, så nära varandra att det är nästan omöjligt för näthinnan i ett mänskligt öga för att skilja enskilda pixlar. Retina-skärmar anses vara nästa generations skärmar, och allt fler enheter har dem redan, till exempel iPhones 4 och 5 och vissa high-spec MacBook Pros. Dock är nackdelen att grafik som inte är förberedda med dessa skärmar i åtanke faktiskt kommer att se lite suddig ut.
Lyckligtvis finns det några sätt runt detta. Tillvägagångssättet du går för beror på bildens natur. Denna demo använder två metoder: retina.js-bibliotek och SVG-grafik.
Retina.js är ett lättviktigt JavaScript-bibliotek, vilket är gratis att ladda ner. Du behöver bara spara JavaScript-filen i anslutning till din webbplats på din server och lägg till följande kodlinje precis före stängningen kropp märka.
Du sparar sedan två versioner av varje bild. en dubbelt så stor som du skulle se bilden på på en vanlig skärm och den andra i normal storlek. Tricket att få det här biblioteket är att du måste spara dina bilder i samma mapp på din server och följa strikta namngivningskonventionen -
Du lägger sedan till din bild till din sidmarkering som vanligt, bara lägger till standardupplösningsversionen -
När någon tittar på din webbplats på en näthinnan, visar närvaron av retina.js-skriptet din webbplats för att kontrollera om det finns en högupplösningsversion tillgänglig.
Även om retina.js har begränsningen av den tid det tar att spara två versioner för varje bild, kan den vara mycket användbar för fotografiska eller ingen vektor-typbilder.
Den gröna "visit map" -knappen på hemsidan använder plugin retina.js. För att se detta i åtgärd, försök att visa webbplatsen på en näthinnanhet, t.ex. iPhone 4 eller 5, och titta på hur skarpa texten på den gröna knappen är. Om du har laddat ner din egen kopia av koden, ta bort retina.js-plugin och se webbplatsen på näthinnan igen. Du bör märka att knappens kvalitet (t ex de vita linjerna i texten) är sämre.
Jag rekommenderar att du använder retina.js för nyckelfotografiska eller ingen vektor-typbilder som inte ändras ofta, på din hemsida eller inbyggd i din mall. Om du till exempel kör en blogg med flera författare är det förmodligen orealistiskt att förvänta dem att skapa två versioner för varje bild.
Ett annat tillvägagångssätt för att skapa skarp grafik för näthinnesskärmar är att använda SVG-bilder. SVG står faktiskt för skalbar vektorgrafik. Som namnet antyder är SVG-bilder lämpliga för vektortypbilder (det vill säga inte foton!)
Som vektorgrafik förstoras behåller de sin skarpa. För att se ett exempel, ta en titt på hemsidan. Gears och spanner ikonen är en SVG-grafik. Dess bredd är inställd på 50%. När du ändrar din webbläsare bör du kunna se att den alltid stannar perfekt. Den håller sig också perfekt skarp om du zoomar din webbläsare (t.ex. på en telefon).
SVG-grafik är faktiskt ett XML-baserat vektorformat. Det betyder att du kan redigera dem direkt, om du vill, med en grundläggande textredigerare. Koden ovan skapar en bild av den gula cirkeln nedan.
Enkel SVG-demo (skärmdump). Du kan infoga SVG-bilder i dina webbsidor på samma sätt som du skulle infoga en jpg eller någon annan bild.
SVG stöds av alla moderna webbläsare, inklusive de som används på näthinnanheter som iPhones 4 och 5. Det är dock fortfarande viktigt att ge en återgång till äldre webbläsare som inte stöder dem, till exempel IE 8. Om du är använder Modernizr (se nedan) redan för resten av din webbplats, då är detta en förnuftig inställning. Det finns dock också ett dedikerat JavaScript-plugin, SVGeezy, som hanterar detta.
För att använda det här pluginet, ladda ner skriptet och lagra det intill din webbplats på din server. Lägg sedan till följande kodlinje före den närmaste kroppstaggen.
På samma sätt som näthinnans plugin som diskuterats ovan kommer du faktiskt att ge två bilder varje gång; SVG-filen och back-up-jpeg- eller png-filen. Dessa båda måste lagras på samma plats på din server. När SVGeezy-plugin meddelar att din webbläsare inte stöder SVG-filer, kommer den att använda den alternativa versionen av bilden.
Om du har laddat ner källfilerna för demo från länken högst upp på denna sida, ta en titt på SVG-filen refresh.svg och hur tutorial4_index.html filen använder den här bilden.
När det gäller att skapa SVG-filerna är tanken att man manuellt kodar en bildfil tillräcklig för att göra även den geekaste geeken kör en mil! Lyckligtvis kan du spara bilder som SVG-filer från Adobe Illustrator (Klicka på Arkiv> Spara> SVG) eller open source vektor bildredigeringsprogram, Inkscape. Säger att jag skulle rekommendera att göra några försök med detta för att se till att dina mönster visas som förväntat i webbläsaren.
Det finns också många webbplatser runt som erbjuder gratis SVG ikoner att ladda ner. Gears-ikonen som används i denna demo är från spelikoner. En annan bra webbplats är Icon Finder, som listar tillgängliga format tillsammans med alla sökresultat. Icon Finder är också ganska användbar för att få en känsla för vilken typ av bilder som kan produceras som SVG-filer.
Även om SVG-filer bara fungerar för vissa typer av bilder, kan de, om de utnyttjas noggrant, ge ett kraftfullt sätt att leverera skarp grafik till alla enheter. Innan du går vidare är det värt att nämna att det finns andra sätt att implementera näthinnans bilder som inte implementerats i denna demo, till exempel genom att använda en PHP-lösning på serversidan som använder cookies och modifierad .htacces-fil eller använder ikonens teckensnitt.
Denna demo har två versioner av kartan; en bärbar dator / skrivbord / tablettversion och en mobilversion.
Både mobil och skrivbordskarta använder samma data (dvs bilder) som är lagrade på Flickr. Att skapa två versioner kan tyckas att fuska något. Och för de allra flesta webbplatser skulle jag inte rekommendera separata mobila och stationära versioner på grund av de uppenbara underhållskostnaderna. Den nya typen av Google-karta som vi har byggt är dock ett fall när två versioner är förnuftiga.
Avgörande är dock att vi inte kommer att duplicera data. Istället, båda versionerna av kartan ritar från samma uppsättning data på Flickr. Det betyder att det är minimalt att ha två versioner, och vi har flexibilitet att anpassa utseendet på kartan beroende på enheten.
Jag har utökat exemplet från den senaste handledningen. Handledningen drar data från det här nya Flickr-kontot (användar-id: 99915664 @ N08). (Påminnelse - varje Flickr har en enkel (ish) att komma ihåg användarnamnet, i det här fallet bennett1671, och ett användarnummer, i det här fallet 99915664 @ N08.) Så om du följer med att bygga på vad du gjorde i den senaste handledningen måste du peka din karta till det här nya Flickr-kontot.
Det här nya Flickr-kontot innehåller bilder för alla festivaler, inklusive både de mindre och viktigaste händelserna. Flickr-kontot som användes i den tidigare handledningen inkluderade bara foton för de mindre festivalerna. Bilderna för huvudhändelserna lagrades inte på Flickr.
Att märka dina foton i Flickr är nyckeln till att få detta till jobbet. Varje foto i Flickr är taggad för att ange om de är a huvud händelse eller a smallevent (dessa taggar är nödvändiga för den bärbara datorn / skrivbordet / tablettversionen) och om de är en englandevent, scotlandevent, walesevent eller irelandevent (dessa taggar är nödvändiga för mobilversionen).
När knappen orange orange mindre är klickad på den bärbara datorn / skrivbordet / tablettversionen, görs följande Flickr API-samtal. Detta kallar 99915664 @ N08 Flickr-kontot och filtrerar resultaten med taggen 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&jsoncallback=?
På mobilversionen har jag klustrat markörerna enligt land och färgat ikonerna i enlighet med detta. Så, till exempel när du klickar på den vita Englandmarkören, görs följande Flickr API-samtal. Detta API-samtal är detsamma som det föregående, förutom att det filtrerar resultaten baserat på taggen 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=json&json&jsoncallback=?
Se den tidigare handledningen för en fullständig beskrivning av hur resultaten av dessa Flickr API-samtal behandlas. De använder båda flickr.photos.search-metoden från Flickr API.
Alla kartmarkörer i mobilversionen är SVG-filer (se ovan). Även om de är lite enklare än ikonerna på den bärbara datorn / skrivbordet / tablettversionen, är de därför alltid skarpa när de ses på näthinnan, till exempel iPhone 4 eller 5.
För att avsluta denna tutorial-serie vill jag bara markera några verktyg som jag tycker är användbara när du utvecklar kartor eller något annat online för den delen. Jag vet att det finns hemligheter, kanske tusentals verktyg, och så är det inte meningen att det är en uttömmande lista på något sätt. I stället är det "verktygssatsen" som jag använder för att testa saker och utarbeta varför något inte har gått till plan.
Dessa verktyg är användbara, kanske nödvändiga, för att undvika mardrömmen för att få en webbplats att fungera perfekt på din egen maskin, bara för att upptäcka det gör någonting oväntat på en klient eller kunds maskin.
För att komma åt verktygen för Chrome-utvecklaren öppnar du Chrome och klickar på Menyknapp längst upp till höger och sedan Verktyg, sedan Utvecklarverktyg.
Fliken Elements i verktygen för Google Chrome utvecklare låter dig klicka på delar av din webbsida för att avslöja information om hur den har gjorts av webbläsaren. Detta gör en enorm mängd saker; tillräckligt för att fylla en hel handledning på egen hand! Några bitar som jag använder ofta är:-
Nätverksfliken berättar hur lång tid varje sida av en webbsida tar för att ladda. Alla webbläsare stöder inte alla HTML- och CSS-funktioner. Detta kan vara problematiskt när du vill utnyttja de mer intressanta egenskaperna i HTML5 och CSS3, samtidigt som du ser till att personer med den äldsta kopian av IE också kan komma åt din webbplats.
Men om du inte har ett extra minne (jag har inte!) Är det nästan omöjligt att komma ihåg vilka webbläsare som motsätter sig vilka funktioner. Det här är där kaniuse-webbplatsen är väldigt praktisk. Denna webbplats ger en sammanfattning av vilka HTML, CSS, SVG etc. funktioner är kompatibla med vilka versioner av vilka webbläsare.
Om du vill använda en ny funktion, men äldre webbläsare inte stöder det, kan du också använda Modernizr JavaScript-biblioteket. Som de förklarar på deras hemsida:
"Att dra nytta av cool ny webbteknologi är jättekul tills du måste stödja webbläsare som släpar efter. Modernizr gör det enkelt för dig att skriva villkorligt JavaScript och CSS för att hantera varje situation, oavsett om en webbläsare stöder en funktion eller ej. "
Om en användares webbläsare inte stöder en viss funktion kan Modernizr du också ange en återgångsfunktion. Det här ligner mycket på SVGeezy-pluginet som beskrivs ovan.
Förutom att du planerar webbläsarsupport och nedgångar när du bygger din webbplats är det också viktigt att testa det på olika webbläsare. Browserstack är ett effektivt sätt att göra detta. Det låter dig skicka in en webbadress och sedan titta på hur webbplatsen fungerar i olika webbläsare. Den enda nackdelen är att det innebär en prenumerationsavgift. Även om det här är förmodligen billigare än att ha en bank med riktiga maskiner och apparater som är tillgängliga för testning. En gratis prov är också tillgänglig så att du kan ta en titt och se vad du tycker.
Ett annat användbart webbläsningsverktyg när det gäller mysterierna för att få saker att fungera i IE, är Modern.IE-webbplatsen. Som namnet antyder är det bara för IE. Men det är gratis och är fortfarande en väldigt användbar resurs.
Innan du tittar på din webbplats i Browserstack eller ModernIE, är det viktigt att validera din kod för att stryka ut några syntaxfel.
En validator är en gratis webbapp som kontrollerar din kod mot nuvarande standarder. Standarder är viktiga för att säkerställa att din webbplats fungerar på ett förutsägbart sätt över olika webbläsare och enheter.
Det finns också ett antal verktyg runt som hjälper dig att kontrollera din JavaScript-syntax. Closure Compiler är faktiskt ett verktyg för att komprimera JavaScript (vilket du kanske också vill göra om din filstorlek är enorm), men det är också användbart för att kontrollera syntaxfel. t.ex. pesky saknar halvkolonner som fångar oss alla! Om du kopierar och klistrar in i din kod och trycker på Kompilera, kommer eventuella fel att markeras under fliken Fel. En annan användbar webbplats för kontrollkoden är JSHint.
Sidhastighet är viktig eftersom inte bara besökare kommer att drivas bort om det tar lång tid för din webbplats att ladda, kan Google ta hänsyn till detta vid beställning av sökresultat.
Det finns ett antal verktyg som låter dig testa detta, inklusive -
Dessa verktyg ger också förslag på prestandaförbättringar du kan göra. En vanlig förbättring du kan göra är att komprimera dina bilder vidare. Du kan använda dessa verktyg i samband med fliken Nätverk i verktygen för Google Chrome Developers (ovan) för att undersöka eventuella problem.
OK - det är det! Som jag sa i början av denna handledning, skulle det vara en whistle-stop tour! Förhoppningsvis efter denna tutorial-serie är du nu utrustad för att skapa egna Google Maps-skapelser. Ha så kul!
Krediterna för de flesta av bilderna (t ex festivalfoton) finns i slutet av de tidigare handledningarna 1 och 3. Det här är de nya bitarna för denna handledning:
Accentsconagua