Share
Dit laatste deel van de Google Maps API For Designers-reeks rondt af door te kijken naar responsief ontwerp, netvliesafbeeldingen en een reeks test- en foutopsporingshulpprogramma's die het leven een stuk eenvoudiger maken. Het geeft een fluit-stop tour door een hele reeks van gebieden, die je verder kunt verkennen in je eigen projecten.
Responsieve startpagina. Links - mobiele stijl. Rechts - stijl van laptop / desktop / tablet. Tenzij u de afgelopen jaren onder een struik hebt geslapen, weet u dat bij responsief ontwerp alles draait om het veranderen van een website en aanpassen aan het apparaat dat wordt bekeken op.
De startpagina van deze demo (hierboven) maakt ook gebruik van responsief ontwerp om mensen een gewijzigde versie van de kaart te laten zien, afhankelijk van het apparaat, of meer specifiek de schermbreedte, die ze gebruiken.
De eerste stap voordat we iets anders doen, is ervoor zorgen dat de viewport-metatag wordt ingesteld in de hoofd van uw pagina.
Notitie: Precies welke viewport-attributen u gebruikt om dingen in te stellen, is aan u. Lees onze gids voor meer details.
De populaire benadering van het omgaan met responsief ontwerp dat we hier zullen gebruiken, is toepassen mediaquery's binnen de CSS. Mediaquery's zijn een manier om de CSS te segmenteren en verschillende stijlen toe te passen, afhankelijk van bijvoorbeeld de breedte van het kijkvenster waarop de website wordt bekeken op.
De onderstaande codelijst is vrij lang, maar het is handig om te zien wat er aan de hand is. Als u deze code in actie wilt zien, bekijkt u de startpagina. Als u het op een groter scherm bekijkt, sleept u de zijkant van de browser om deze smaller te maken. Wanneer de breedte van uw browser onder de 640px komt, zou het ontwerp moeten veranderen.
De mediaquery in dit geval is de @media (min-width: 641px) code op regel 101 en de volgende CSS binnen de accolades. Deze mediaquery controleert de apparaatbreedte.
Het is goed om een eerste mobiele benadering te gebruiken; dit is het idee dat de standaardstijl is gericht op mobiele apparaten en dat vervolgens uitzonderingen progressief worden toegevoegd met behulp van mediaquery's, omdat de viewports groter worden. Deze aanpak helpt websites sneller te laden op mobiele apparaten. Dingen zoals de grote achtergrondafbeelding die we hebben gebruikt, worden bijvoorbeeld alleen geladen voor grotere schermapparaten.
Dus in de bovenstaande code, het eerste deel van de code (dus boven de mediaquery - @media (min-width: 641px) ) wordt standaard geladen op elk apparaat. Dan de @media (min-width: 641px) media query laadt de stijlen binnen de accolades voor apparaten waarvan de breedte meer dan 641px breed is.
Een veel voorkomende vraag is:
"Waar moeten de breekpunten in het ontwerp zijn?"
Het breekpunt in dit voorbeeld is 641px. Deze demo gebruikt slechts één breekpunt, maar vaak wilt u er meer dan één. Dit kan erg afhankelijk zijn van uw inhoud, en ook van het bereik van apparaten die u target en de populaire schermresoluties op de markt.
In dit voorbeeld geeft de iPhone (breedte is 640 px) de standaard mobiele stijl weer, terwijl de iPad2 (breedte is 768) de desktopversie zal weergeven. Het door ons gekozen breekpunt is geschikt voor deze kaart, omdat de afbeeldingen te groot zijn voor de telefoon. Andere meer op tekst gebaseerde websites kunnen echter tot de conclusie komen dat de stijl alleen aanzienlijk moet worden gewijzigd als de schermafmetingen te laag zijn en de breekpunten mogelijk lager zijn.
Notitie: Bij het kiezen van breekpunten is het vaak het verstandigst om het ontwerp gewoon in overweging te nemen en te observeren waar het zich bevindt breaks, in plaats van te streven naar specifieke apparaatresoluties. Schermafmetingen zijn zo breed en gevarieerd, en ze veranderen naarmate de tijd verstrijkt, dat er gewoon geen manier is om ze nauwkeurig bij te houden.
Het is soms gepast om gebruikers een geheel andere versie van de inhoud te laten zien, afhankelijk van hun kijkomstandigheden.
In ons geval gebeurt dit met twee div tags (d.w.z.. button_to_map_mobile en button_to_map_standard), elk met een andere link en een iets andere groene 'bezoekkaart' knop. Als u op een laptop of desktopcomputer werkt, bekijkt u de startpagina en sleept u de zijkant van uw browser tot het ontwerp verandert in de mobiele lay-out. U zou moeten opmerken dat de groene 'bezoekkaart'-knop enigszins verandert om het woord' mobiel 'op te nemen. Als u nu op deze knop klikt, krijgt u een mobiele versie van de kaart.
De mediaquery wordt gebruikt om af te wisselen div is momenteel zichtbaar. D.w.z. als je de bovenstaande codelijst bekijkt, kun je zien dat de button_to_map_standard heeft de Geen weergeven; toegepast op het wanneer de standaard mobiele stijl in gebruik is, maar wanneer de mediaquery detecteert dat het scherm meer dan 641 pixels breed is, past het de display: block; naar button_to_map_standard. (De media-query doet het omgekeerde van de button_to_map_mobile div).
Als je deze tutorial volgt en je eigen webpagina maakt, bekijk dan de broncode die beschikbaar is via de link bovenaan deze pagina. Persoonlijk vond ik het gemakkelijker om iets te krijgen dat in eerste instantie werkte met de 'mobile first'-benadering en één breekpunt, voordat ik het uitbreidde naar een complexer ontwerp.
Het is vermeldenswaard dat de keuze tussen alternatief inhoud en sympathiek inhoud is iets waar u echt rekening mee moet houden bij het ontwikkelen van websites voor meerdere apparaten.
Hopelijk heb je net een glimp opgevangen van de nieuwe mobiele versie van de kaart. Binnen een minuut zullen we hierop terugkomen. Maar eerst is het de moeite waard om eens te kijken hoe de startpagina afbeeldingen gebruikt die zijn ontworpen voor netvliesschermen.
Retina (en andere hi-pixel dichtheid) schermen hebben zoveel pixels, zo dicht bij elkaar, dat het bijna onmogelijk is voor het netvlies in een menselijk oog om individuele pixels te onderscheiden. Retina-schermen worden beschouwd als de volgende generatie schermen, en een toenemend aantal apparaten heeft ze al, zoals de iPhones 4 en 5 en enkele high-spec MacBook Pro's. Het nadeel is echter dat afbeeldingen die niet zijn voorbereid met deze schermen in werkelijkheid een beetje wazig lijken.
Gelukkig zijn er een paar manieren om dit heen. De aanpak waarvoor u kiest, is afhankelijk van de aard van het beeld zelf. Deze demo gebruikt twee benaderingen; bibliotheek retina.js en SVG-afbeeldingen.
Retina.js is een lichtgewicht JavaScript-bibliotheek die gratis te downloaden is. U hoeft alleen het JavaScript-bestand naast uw website op uw server op te slaan en de volgende coderegel net voor de afsluiting toe te voegen lichaam label.
Je slaat dan twee versies van elke afbeelding op; twee keer zo groot als de afbeelding op een standaardscherm en de andere op de normale grootte. De truc om deze bibliotheek aan het werk te krijgen, is dat je je afbeeldingen in dezelfde map op je server moet opslaan en de strikte naamgevingsconventie moet volgen -
Vervolgens voegt u zoals gewoonlijk uw afbeelding toe aan uw paginamarkering en voegt u gewoon de standaardresolutieversie toe -
Wanneer iemand uw website bekijkt op een retina-display, vertelt de aanwezigheid van het script retina.js aan uw website of er een versie met een hoge resolutie beschikbaar is.
Hoewel retina.js de beperking heeft van de tijd die nodig is om twee versies voor elke afbeelding op te slaan, kan het erg handig zijn voor afbeeldingen van fotografische of geen-vector-type.
De groene knop 'bezoekkaart' op de startpagina maakt gebruik van de plug-in retina.js. Om dit in actie te zien, probeer de site te bekijken op een netvliesapparaat, bijvoorbeeld iPhone 4 of 5 en kijk hoe scherp de tekst op de groene knop is. Als u uw eigen exemplaar van de code hebt gedownload, verwijdert u de plug-in retina.js en bekijkt u de website opnieuw op het netvliesapparaat. U moet opmerken dat de kwaliteit van de knop (bijvoorbeeld de witte lijnen in de tekst) slechter is.
Ik raad aan om retina.js te gebruiken voor afbeeldingen van belangrijke of niet-vectortypen die niet vaak veranderen, op uw startpagina of ingebouwd in uw sjabloon. Als u, bijvoorbeeld, een blog met meerdere auteurs hebt, is het waarschijnlijk niet realistisch om te verwachten dat ze voor elke afbeelding twee versies maken..
Een andere benadering voor het maken van heldere afbeeldingen voor retinaschermen is het gebruik van SVG-afbeeldingen. SVG staat in feite voor Scalable Vector Graphics. Zoals hun naam doet vermoeden, zijn SVG-afbeeldingen geschikt voor vectorafbeeldingen (dus geen foto's!)
Naarmate vectorafbeeldingen worden vergroot, behouden ze hun knapperigheid. Om een voorbeeld te zien, kijk eens naar de startpagina. Het tandwielpictogram en het sleutelpictogram is een SVG-afbeelding. De breedte is ingesteld op 50%. Terwijl je de grootte van je browser aanpast, zou je in staat moeten zijn om te zien dat deze altijd perfect knapperig blijft. Het blijft ook perfect scherp als u op uw browser inzoomt (bijvoorbeeld op een telefoon).
SVG-afbeeldingen zijn eigenlijk een op XML gebaseerd vectorformaat. Dit betekent dat u ze rechtstreeks kunt bewerken, als u dat wilt, met behulp van een eenvoudige teksteditor. De bovenstaande code creëert een afbeelding van de gele cirkel hieronder.
Simpele SVG-demo (screenshot). U kunt SVG-afbeeldingen invoegen in uw webpagina's op dezelfde manier waarop u een jpg of een andere afbeelding invoegt.
SVG worden ondersteund door alle moderne browsers, inclusief browsers die worden gebruikt op netvliesapparaten zoals de iPhones 4 en 5. Het is echter nog steeds belangrijk om fall-back te bieden voor oudere browsers die deze niet ondersteunen, bijvoorbeeld IE 8. Als u Gebruik Modernizr (zie hieronder) al voor de rest van uw site, dan is dit een verstandige aanpak. Er is echter ook een speciale JavaScript-plug-in beschikbaar, SVGeezy, die hiermee zal werken.
Om deze plug-in te gebruiken, downloadt u het script en slaat u het op naast uw website op uw server. Voeg vervolgens de volgende regel code toe vóór de tag close body.
Net als bij de hierboven besproken retina-plug-in, zult u feitelijk elke keer twee afbeeldingen leveren; het SVG-bestand en het fall-back jpeg- of png-bestand. Deze moeten allebei op dezelfde plek op uw server worden opgeslagen. Wanneer de SVGeezy-plug-in wordt opgemerkt, ondersteunt uw browser geen SVG-bestanden, maar wordt de alternatieve versie van de afbeelding gebruikt.
Als je de bronbestanden voor de demo hebt gedownload via de link bovenaan deze pagina, bekijk dan het SVG-bestand refresh.svg en hoe het tutorial4_index.html bestand gebruikt deze afbeelding.
Als het aankomt op het maken van de SVG-bestanden, is het idee om een afbeeldingsbestand handmatig te coderen voldoende om zelfs de geekste geek een mijl te laten lopen! Gelukkig kunt u afbeeldingen opslaan als SVG-bestanden vanuit Adobe Illustrator (klik Bestand> Opslaan> SVG) of de open source vectorbewerkingssoftware voor afbeeldingen, Inkscape. Als ik dat zeg, raad ik u aan een paar proefdraaien uit te voeren om ervoor te zorgen dat uw ontwerpen verschijnen zoals verwacht in de browser.
Er zijn ook veel websites in de buurt die gratis SVG-pictogrammen aanbieden om te downloaden. Het tandwielpictogram dat in deze demo wordt gebruikt, is van gamepictogrammen. Een andere goede website is Icon Finder, die naast alle zoekresultaten een opsomming geeft van de beschikbare formaten. Icon Finder is ook erg handig om een idee te krijgen van wat voor soort afbeeldingen als SVG-bestanden kunnen worden geproduceerd.
Hoewel SVG-bestanden alleen voor sommige typen afbeeldingen kunnen worden gebruikt, kan zorgvuldige uitwerking een krachtige manier bieden om haarscherpe afbeeldingen naar alle apparaten te verzenden. Voordat we verder gaan, is het de moeite waard om te vermelden dat er andere manieren zijn om retina-afbeeldingen te implementeren die niet in deze demo zijn geïmplementeerd, zoals het gebruik van een PHP-server aan de server die cookies en aangepast .htacces-bestand gebruikt of pictogramfonts gebruikt..
Deze demo heeft twee versies van de kaart; een laptop / desktop / tablet-versie en een mobiele versie.
Zowel mobiele als desktop-kaarten gebruiken dezelfde gegevens (dat wil zeggen foto's) die zijn opgeslagen op Flickr. Het creëren van twee versies lijkt misschien een beetje vreemd te gaan. En voor de overgrote meerderheid van websites zou ik afzonderlijke mobiele en desktopversies niet aanbevelen vanwege de overduidelijke overheadkosten voor onderhoud. Het nieuwe type Google-kaart dat we hebben gemaakt, is echter een gegeven wanneer twee versies verstandig zijn.
Cruciaal is echter dat we de gegevens niet dupliceren. In plaats daarvan, beide versies van de kaart tekenen uit dezelfde set gegevens op Flickr. Dit betekent dat de overhead van twee versies minimaal is en we hebben de flexibiliteit om het uiterlijk van de kaart aan te passen, afhankelijk van het apparaat.
Ik heb het voorbeeld uit de laatste zelfstudie uitgebreid. De tutorial trekt gegevens van dit nieuwe Flickr-account (gebruikers-ID: 99915664 @ N08). (Herinnering - elke Flickr heeft een eenvoudige (ish) om gebruikersnaam te onthouden, in dit geval bennett1671, en een gebruikers-ID-nummer, in dit geval 99915664 @ N08.) Dus als u meegaat met wat u in de vorige zelfstudie hebt gedaan, moet u uw kaart naar dit nieuwe Flickr-account wijzen.
Dit nieuwe Flickr-account bevat foto's voor alle festivals, inclusief de kleinere en belangrijkste evenementen. Het Flickr-account dat in de vorige zelfstudie werd gebruikt, bevatte alleen foto's voor de kleinere festivals. De foto's voor de hoofdgebeurtenissen werden niet opgeslagen op Flickr.
Het labelen van je foto's op Flickr is de sleutel om dit te laten werken. Elke foto in Flickr is gelabeld om aan te geven of ze een zijn MainEvent of a smallevent (deze tags zijn nodig voor de versie voor laptop / desktop / tablet) en of ze een zijn englandevent, scotlandevent, walesevent of irelandevent (deze tags zijn nodig voor de mobiele versie).
Wanneer op de oranje knop Kleine gebeurtenissen wordt geklikt op de laptop- / desktop- / tabletversie, wordt de volgende Flickr API-aanroep gedaan. Dit roept het 99915664 @ N08 Flickr-account op en filtert de resultaten met de 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&jsoncallback=?
Op de mobiele versie heb ik de markeringen geclusterd naar land en de pictogrammen overeenkomstig gekleurd. Als u bijvoorbeeld op de witte markering England klikt, wordt de volgende Flickr API-aanroep gedaan. Deze API-aanroep is hetzelfde als de vorige, behalve dat het de resultaten filtert op basis van de tag 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=?
Raadpleeg de vorige zelfstudie voor een volledige beschrijving van hoe de resultaten van deze Flickr API-aanroepen worden verwerkt. Ze gebruiken beide de methode flickr.photos.search van de Flickr API.
Alle kaartmarkeringen op de mobiele versie zijn SVG-bestanden (zie hierboven). Hoewel ze iets eenvoudiger zijn dan de pictogrammen op de laptop- / desktop- / tabletversie, blijven ze altijd helder wanneer ze worden bekeken op netvliesschermen, zoals de iPhone 4 of 5.
Om deze tutorialserie te beëindigen, wil ik alleen een paar tools benadrukken die ik handig vind bij het ontwikkelen van kaarten, of iets anders online. Ik weet dat er honderden, misschien duizenden tools rondlopen, en daarom is dit op geen enkele manier een exhaustieve lijst. In plaats daarvan is het de 'toolkit' die ik gebruik om dingen te testen en uit te zoeken waarom iets niet is gebeurd.
Deze tools zijn nuttig, misschien wel essentieel, om te voorkomen dat een website perfect functioneert op uw eigen computer, om te ontdekken dat het iets onverwachts doet op een klant of een machine van een klant.
Voor toegang tot de hulpprogramma's van de Chrome-ontwikkelaar opent u Chrome en klikt u op de Menuknop in de rechterbovenhoek en dan Hulpmiddelen, dan Ontwikkelaarstools.
Op het tabblad Elementen in de hulpprogramma's van Google Chrome-ontwikkelaars kunt u op delen van uw webpagina klikken om informatie te onthullen over de manier waarop deze door de browser is weergegeven.. Dit doet een enorme hoeveelheid dingen; genoeg om een volledige zelfstudie te vullen! Een paar dingen die ik vaak gebruik zijn:-
Het tabblad Netwerk geeft aan hoe lang het duurt om elk deel van een webpagina te laden. Niet alle browsers ondersteunen alle HTML- en CSS-functies. Dit kan problematisch zijn als u wilt profiteren van de interessantere functies van HTML5 en CSS3, terwijl u er ook voor zorgt dat mensen met het oudste exemplaar van IE ook toegang hebben tot uw website.
Maar tenzij je een buitengewone herinnering hebt (ik niet!), Is het bijna onmogelijk om te onthouden welke browsers tegen welke functies bezwaar maken. Dit is waar de caniuse-website erg handig is. Deze website geeft een samenvatting van welke functies HTML, CSS, SVG enz. Compatibel zijn met welke versies van welke browsers.
Als u een nieuwe functie wilt gebruiken, maar oudere browsers ondersteunen dit niet, dan kunt u de Modernizr JavaScript-bibliotheek gebruiken. Zoals ze uitleggen op hun website:
"Het gebruik van coole nieuwe webtechnologieën is heel leuk, totdat je browsers moet ondersteunen die achterblijven. Modernizr maakt het gemakkelijk voor u om voorwaardelijke JavaScript en CSS te schrijven voor elke situatie, ongeacht of een browser een functie ondersteunt of niet. "
Als de browser van een gebruiker een bepaalde functie niet ondersteunt, kunt u met Modernizr ook een fall-back-functie opgeven. Dit lijkt erg op de SVGeezy-plug-in die hierboven is beschreven.
Naast het plannen van browserondersteuning en terugval tijdens het bouwen van uw site, is het ook belangrijk om deze in verschillende browsers te testen. Browserstack is een efficiënte manier om dit te doen. Hiermee kunt u een URL verzenden en vervolgens bekijken hoe de site in verschillende browsers werkt. Het enige nadeel is dat het gaat om een abonnementsprijs. Hoewel dit aantoonbaar goedkoper is dan het hebben van een hele reeks echte machines en apparaten om te testen. Er is ook een gratis proefversie beschikbaar, zodat u een kijkje kunt nemen en kunt zien wat u denkt.
Een andere handige tool voor het testen van browsers als het gaat om de mysteries om dingen in IE te laten werken, is de Modern.IE-website. Zoals de naam al doet vermoeden, is het alleen voor IE. Maar het is gratis en is nog steeds een zeer nuttige bron.
Voordat u een kijkje neemt op uw website in Browserstack of ModernIE, is het belangrijk om uw code te valideren om eventuele syntaxisfouten te elimineren.
Een validator is een gratis webapp die uw code controleert volgens de huidige normen. Normen zijn belangrijk om ervoor te zorgen dat uw website op een voorspelbare manier functioneert in verschillende browsers en apparaten.
Er zijn ook een aantal hulpprogramma's waarmee u uw JavaScript-syntaxis kunt controleren. Closure Compiler is eigenlijk een hulpmiddel voor het comprimeren van uw JavaScript (wat u misschien ook wilt doen als uw bestandsgrootte groot is), maar het is ook handig voor het controleren van syntaxisfouten. bijv. vervelende ontbrekende puntkomma's die ons allemaal vangen! Als u kopieert en in uw code plakt en op Compile klikt, worden eventuele fouten gemarkeerd onder het tabblad Fouten. Een andere nuttige site voor het controleren van code is JSHint.
Paginasnelheid is belangrijk omdat niet alleen bezoekers worden weggereden als het lang duurt voordat uw site is geladen, Google kan hier ook rekening mee houden bij het bestellen van zoekresultaten.
Er zijn een aantal tools waarmee je dit kunt testen, inclusief -
Deze tools komen ook met suggesties voor prestatieverbeteringen die u kunt maken. Een veelvoorkomende verbetering die u kunt maken, is bijvoorbeeld om uw afbeeldingen verder te comprimeren. U kunt deze hulpprogramma's gebruiken in combinatie met het tabblad Netwerk in Google Chrome Developers Tools (hierboven) om mogelijke problemen te onderzoeken.
Oke dat is het! Zoals ik aan het begin van deze tutorial al zei, zou het een fluit-stop tour zijn! Hopelijk ben je na deze tutorialserie nu uitgerust om je eigen Google maps-creaties te maken. Veel plezier!
De credits voor de meeste afbeeldingen (bijvoorbeeld de festivalfoto's) zijn te vinden aan het einde van de vorige tutorials 1 en 3. Dit zijn de nieuwe stukjes voor deze tutorial:
Accentsconagua