Den hemmelige magt af bogmærker
Bogmærker er specielle links, som brugere kan tilføje til deres browsers favoritter.
Disse specielle links omfatter kode (dvs. ikke blot en målwebadresse), og de udløser forskellige former for nyttig funktionalitet, så du kan ændre og udvide enhver webside.
Når du først begynder at bruge og opbygge din egen, vil du ikke længere se websider som statiske elementer, som du ikke har kontrol over.
Med bogmærker har du evnen til at bøje enhver webside til dine behov.
Hvordan bookmarklets fungerer
Bogmærker er mere end statiske webadresser. De er korte bits af JavaScript, der er indlæst af et link, der opererer på den aktuelt åbne side. Koden bliver således en udvidelse af den aktuelle side og kan interagere med ethvert element på det.
Ændringerne på siden er midlertidige og bevares ikke. Når brugeren opdaterer siden eller følger et link, går JavaScript væk.
Når du vender tilbage til siden, skal brugeren klikke på genvej igen for at aktivere bogmærket.
En prøvebogmærke
Måske er den bedste måde at forklare bookmarklets på at demonstrere en handling. Bit.ly er en kraftfuld URL-afkortningstjeneste, der sker for at give en praktisk bookmarklet-funktion . Du skal blot trække linket til din værktøjslinje og begynde at bruge dit flotte nye link på en hvilken som helst side på nettet.
Når du klikker på Bit.ly bookmarklet, lægges et panel på den aktuelle side. Bemærk, at dette ikke er et nyt browservindue, men snarere kode, der er blevet tilføjet til den aktuelle side. Sådanne bogmærker gør det muligt for udviklere at bringe funktionalitet fra deres hjemmeside til enhver side på internettet.
5 handy bookmarklets at komme i gang
Bit.ly
Få ting er lige så praktiske som et værktøj, der giver dig mulighed for hurtigt at forkorte og dele webadresser. Med Bit.ly bookmarklet , i stedet for at kopiere en fuld URL-sti og dele den, kan du klikke på et link for at generere en kort version af den. Du får også mulighed for at spore, hvor ofte dette link bruges. Ikke kun det, men linkets shortness sikrer, at linket ikke brydes i en email, da længere komplekse webadresser ofte gør.
kortbølge
Udviklere går ofte ud og pakker masser af funktionalitet i en enkelt bogmærke. Sådan er tilfældet med kortbølge af Shaun Inman. Denne kraftige genvej pakker masser af søgefunktionalitet til et enkelt sted. Du kan søge i Google, Amazon, Netflix og masser af andre vigtige kilder. Den eneste gotcha er at du skal huske kommandoer for at arbejde med det. Denne forhindring til side, når du er vant til det, bliver du hurtigt afhængig af det.
ReCSS
ReCSS er et simpelt script, der opdaterer CSS til en side, men ikke hele siden selv. På overfladen kan det virke som en mærkelig ting at ønske at gøre. Men overveje, om du bygger en applikation eller proces, der er brudt af en opdatering. Hvis du for eksempel styler en fejlmeddelelse i stedet for gentagne gange at udføre en handling, der genererer en fejl, skal du blot opdatere CSS til at teste forskellige stilarter. Når tiden kommer, vil du elske denne.
udfyldes automatisk
Hvis du er nødt til at bygge mange lange former, så er du sikker på at du sympatiserer med folk, der er frustreret over at skulle udfylde formularer igen og igen. Det er her udfyldes automatisk kommer ind. Funktionen her er ret simpel: en bogmærke, der automatisk fylder formularfelter med tilbagevendende data. Du kan også opbygge en brugerdefineret version med dine egne værdier, hvis det er nødvendigt.
Instapaper
Instapaper er en hel tjeneste bygget op omkring en bogmærke. Det praktiske værktøj gemmer sider, som du gerne vil læse senere. Det synkroniseres bekvemt med din iPhone, iPad og Kindle, så du nemt kan hente dit sted, hvor du ikke har læst.
Den ideelle struktur for bogmærker
Der er en måde at arkivere bookmarklets på, der sikrer, at de er lette at vedligeholde. Princippet er simpelt: Brug bogmærket som en skal til at indlæse kildefiler på siden. Dette betyder, at kødets kød ikke er indeholdt i bogmærket. Dette eliminerer problemet med, hvordan man får brugere til at opdatere bogmærket, efter at du har ændret koden.
For at forberede opdateringer til dit bogmærke skal du blot oprette linket, så det indlæser alle ressourcer fra din server til siden. Dette indebærer typisk at tilføje en JavaScript- og CSS-fil til siden og derefter udløse den primære JavaScript for at starte funktionaliteten.
Følgende JavaScript tilføjer en bestemt JavaScript-fil til siden:
new_script=document.createElement('SCRIPT');new_script.type='text/javascript';new_script.src="'https://www.your-site.com/script.js?';document.getElementsByTagName('head')[0].appendChild(new_script);
En skabelon til oprettelse af bogmærker
Baseret på dette simple koncept er nedenstående to grundlæggende skitser for at oprette din egen bookmarklet. Det vigtigste valg, du skal lave, er, om du vil deaktivere caching for din JavaScript-fil.
Skabelon 1: caching
Skabelon 1 forhindrer ikke cachelagring. Dette betyder, at dit script vil blive gemt på brugerens computer i en vis periode. Det vil efterhånden blive genindlæst, men du har ingen måde at vide, hvor hurtigt. Her er skabelonen:
javascript:(function(){new_script=document.createElement('SCRIPT');new_script.type='text/javascript';new_script.src='https://www.your-site.com/script.js?';document.getElementsByTagName('head')[0].appendChild(new_script);})();
Skabelon 2: caching deaktiveret
Dette alternativ indeholder en praktisk parameter for at forhindre caching af dit script. Dette er ideelt til udvikling, fordi hver gang du bruger linket, kører den nyeste version på serveren.
javascript:(function(){new_script=document.createElement('SCRIPT');new_script.type='text/javascript';new_script.src='https://www.your-site.com/script.js?x=' +(Math.random());document.getElementsByTagName('head')[0].appendChild(new_script);})();
Cachen er deaktiveret ved blot at tilføje en tilfældig forespørgselsstreng til slutningen af scriptetiketten. Dette gør det muligt for browseren at indlæse scriptet hver gang det bruges.
Bemærk også, at disse funktioner findes i en JavaScript-wrapper, der identificerer dem som JavaScript-kode.
Sådan bruger du skabelonerne
Brug disse to skabeloner, her er hvordan du vil sætte dem i gang. Først skal du erstatte webadressen i koden med den fulde sti til JavaScript-filen på din server. For det andet skal du placere koden ovenfor i et linkmærke, som kan tilføjes til en side. Det er dette link, som brugerne vil trække og slippe ind i deres bogmærker.
Noget som dette burde gøre det trick:
http://ted.mielczarek.org/code/mozilla/bookmarklet.html" class=external rel=nofollow> bookmarklet generator .Når du har den grundlæggende ramme på plads, kan du begynde at tilføje nogen JavaScript-baseret funktionalitet til scripts-filen til bookmarklet. Brug det nye link i din browser til at teste, når du går!
Glem ikke cachen!
Et af de mest frustrerende aspekter ved at udvikle bookmarklets er browser caching. Du kan ikke tvinge en opdatering af filen ud, end ved at indlæse kilde JavaScript-filen direkte og derefter trykke på "Opdater." Det er meget lettere at sende en forespørgselsstrengeparameter som vist i skabelon 2 ovenfor.
En advarsel om "View source"
Et andet punkt, der genererer meget frustration, er kildevisningen af en webside. Når du kører en bookmarklet og rammer den normale "View source" -indstilling, kan du blive forvirret.
Når en bogmærke dynamisk føjer kode til siden, viser standardkildevisningen ikke den opdaterede HTML. I stedet skal du bruge en plug-in som Firebug eller se den genererede kilde ved hjælp af Web-udvikler værktøjslinje.
Yderligere ressourcer til bygning af bogmærker
- Skabelonerne ovenfor er baseret på vejledningen på BetterExplained .
- Marklets er et fantastisk bibliotek af bookmarklets.
- Her er en oversigt over bygningen jQuery-baserede bogmærker .
Skrevet udelukkende til WDD af Patrick McNeil. Han er freelance skribent, udvikler og designer. Han elsker især at skrive om webdesign, uddanne folk i webudvikling og opbygge hjemmesider. Patrick's passion for webdesigntendenser og mønstre findes i hans bøger på TheWebDesignersIdeaBook.com . Følg Patrick på Twitter @designmeltdown .
Kan du tænke på en måde at udvide din ansøgning med en bookmarklet? Hvordan har du kreativt brugt bogmærker?
