Kirjanmerkit ovat erityisiä linkkejä, joita käyttäjät voivat lisätä selaimen suosikkeihin.

Nämä erityiset linkit sisältävät koodin (eli ei pelkästään kohde-URL-osoitteen), ja ne aiheuttavat erilaisia ​​hyödyllisiä toimintoja, joiden avulla voit muokata ja laajentaa minkä tahansa verkkosivun.

Kun alat käyttää ja rakentaa omia, et enää näe verkkosivuja staattisina elementteinä, joita sinulla ei ole.

Kanssa kirjanmerkkejä, sinulla on valta taivuttaa minkä tahansa verkkosivun tarpeisiisi.

Miten kirjanmerkit toimivat

Kirjanmerkit ovat enemmän kuin staattisia URL-osoitteita. Ne ovat lyhyt bittejä JavaScript-tiedostoa, ladattu linkillä, jotka toimivat tällä hetkellä avoimella sivulla. Siten koodi muuttuu nykyisen sivun laajennukseksi ja voi olla vuorovaikutuksessa minkä tahansa elementin kanssa.

Sivun muutokset ovat tilapäisiä eikä niitä säilytetä. Kun käyttäjä päivittää sivun tai seuraa linkkiä, JavaScript katoaa.

Kun palaat sivulle, käyttäjän on napsautettava pikakuvaketta uudelleen, jotta kirjanmerkki otetaan käyttöön.

Näyte kirjanmerkki

Ehkä paras tapa selittää kirjanmerkkejä on osoittaa yksi toiminnassa. Bit.ly on tehokas URL-lyhentämispalvelu, joka sattuu tarjoamaan kätevä kirjanmerkkiominaisuus . Vedä linkki työkalupalkkiisi ja aloita fancy-linkin käyttäminen millä tahansa web-sivulla.

Kun napsautat Bit.ly-kirjanmerkkiä, paneeli latautuu nykyiselle sivulle. Huomaa, että tämä ei ole uusi selainikkuna vaan pikemminkin koodi, joka on liitetty nykyiselle sivulle. Tällaisten kirjanmerkkien avulla kehittäjät voivat tuoda toiminnot verkkosivustostaan ​​mihin tahansa verkkosivuun.

5 kätevää kirjanmerkkiä pääset alkuun

Bit.ly

Harvat asiat ovat yhtä käteviä kuin työkalu, jonka avulla voit nopeasti lyhentää ja jakaa URL-osoitteita. Kanssa Bit.ly-kirjanmerkki , sen sijaan, että kopioit täydellisen URL-polun ja jaat sen, voit napsauttaa linkkiä ja luoda sen lyhyt versio. Sinulla on myös mahdollisuus seurata, kuinka usein kyseistä linkkiä käytetään. Ei vain, mutta linkin puutteet varmistavat, että linkki ei mureta sähköpostissa, koska usein monimutkaiset URL-osoitteet tekevät usein.

shortwave

Kehittäjät menevät usein ulos ja pakkaavat monta toimintoa yhdeksi kirjanmerkiksi. Näin on shortwave Shaun Inman. Tämä tehokas pikavalinta pakkaa useita hakuominaisuuksia yhdeksi paikaksi. Voit etsiä Google, Amazon, Netflix ja muita tärkeitä lähteitä. Ainoa sana on, että sinun täytyy muistaa komentoja työskennellä sen kanssa. Tämä estää syrjään, kun olet tottunut siihen, tulet nopeasti hyvin riippuvaiseksi siitä.


ReCSS

ReCSS on yksinkertainen komentosarja, joka päivittää sivun CSS-sivun mutta ei koko sivun itse. Pinnalla tämä saattaa tuntua oudolta mitä haluat tehdä. Mutta harkitse, jos rakennat sovellusta tai prosessia, joka on rikkoutunut päivityksen avulla. Jos esimerkiksi määrittelet virheilmoituksen, sen sijaan, että toistuvasti suorittaisit virheen aiheuttavan toiminnon, päivitä CSS testaten erilaisia ​​tyylejä. Kun aika tulee, rakastat tätä.


täyttyä automaattisesti

Jos sinun on täytynyt rakentaa monia pitkiä muotoja, varmasti sympatiaa ihmisten kanssa, jotka ovat turhautuneita täyttämään lomakkeet uudestaan ​​ja uudestaan. Tässä on täyttyä automaattisesti Tulee sisään. Toiminto on melko yksinkertainen: kirjanmerkki, joka automaatti- sesti populoi lomakenttiä toistuvilla tiedoilla. Voit myös rakentaa mukautetun version omilla arvoillaan tarvittaessa.


instapaper

instapaper on koko palvelu, joka on rakennettu kirjanmerkin ympärille. Kätevä työkalu säästää sivuja, jotka haluat lukea myöhemmin. Se sopii kätevästi iPhonen, iPadin ja Kindle-laitteen kanssa, joten voit helposti noutaa lukemasi luukun.

Ihanteellinen rakenne kirjanmerkkeihin

On olemassa keino arkkitehdin kirjanmerkkeihin, jotka takaavat niiden ylläpidon. Periaate on yksinkertainen: käytä kirjanmerkkiä kuorina lataamaan lähdetiedostot sivulle. Tämä tarkoittaa, että koodin lihaa ei todellisuudessa sisällytetä kirjanmerkkiin. Tämä poistaa ongelman siitä, miten käyttäjät voivat päivittää kirjanmerkin koodin muuttamisen jälkeen.

Voit päivittää päivitykset kirjanmerkkiisi yksinkertaisesti rakentaa linkin niin, että se lataa kaikki resurssit palvelimestasi sivulle. Tyypillisesti tämä edellyttää JavaScript- ja CSS-tiedostojen lisäämistä sivulle ja käynnistää sen jälkeen ensisijaisen JavaScriptin käynnistääksesi toiminnot.

Seuraava JavaScript lisää sivulle määritetyn JavaScript-tiedoston:

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);

Mallia kirjanmerkkien luomiseen

Tämän yksinkertaisen käsitteen pohjalta alla on kaksi perusmuotoa omien kirjanmerkkien luomiseen. Päävalinta, jonka sinun on tehtävä, on poistaa JavaScript-tiedoston välimuisti.

Malline 1: välimuisti

Malli ei estä välimuistia. Tämä tarkoittaa, että skripti tallennetaan käyttäjän tietokoneelle jonkin aikaa. Se lopulta ladataan uudelleen, mutta et voi mitenkään tietää kuinka pian. Tässä on malli:

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);})();

Malline 2: välimuisti poistettu käytöstä

Tämä vaihtoehto sisältää kätevän parametrin komentosarjasi välimuistin välttämiseksi. Tämä on ihanteellinen kehitystyölle, koska aina kun käytät linkkiä, se ajaa uusimman version palvelimella.

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);})();

Välimuisti on poistettu käytöstä lisäämällä satunnaisen kyselyjono merkkijonoosan loppuun. Tämä selaimen lataa komentosarjan aina, kun sitä käytetään.

Huomaa myös, että nämä toiminnot ovat JavaScript-kääreessä, joka tunnistaa ne JavaScript-koodina.

Mallien käyttäminen

Näiden kahden mallin käyttäminen on tässä tapana, jolla ne laitettaisiin toimimaan. Korvaa ensin URL-osoite koodilla täydellä polulla palvelimen JavaScript-tiedostoon. Toiseksi, aseta koodi yllä linkin tunnisteeseen, joka voidaan lisätä sivulle. Se on tämä linkki, jonka käyttäjät vetävät ja pudottavat kirjanmerkkeihinsä.

Jotain tällaista pitäisi tehdä temppu:

http://ted.mielczarek.org/code/mozilla/bookmarklet.html" class=external rel=nofollow>  kirjanmerkkien generaattori  . 

Kun sinulla on peruskehys, voit lisätä JavaScript-pohjaisen toiminnon kirjoitustiedostoon. Käytä selaimessa olevaa uutta linkkiä testataksesi mennessasi!

Älä unohda välimuistia!

Yksi kirjanmerkkien kehittävimmistä näkökulmista on selaimen välimuisti. Tiedostoa ei voi pakottaa muuten kuin lataamalla lähdekoodin JavaScript-tiedostoa ja napsauttamalla sitten "Päivitä". Edellä olevan mallin kahden kyselyn merkkijonoparametrin läpikäyminen on paljon helpompaa.

Varoitus "Näytä lähde"

Toinen kohta, joka tuottaa paljon turhautumista, on verkkosivun lähdekuva. Kun avaat kirjanmerkin ja avautuu tavallinen "Näytä lähde" ​​-vaihtoehto, saatat olla hämmentynyt.

Kun kirjanmerkki lisää sivun koodin dynaamisesti, vakiolähdekuvasta ei näytetä päivitettyä HTML-koodia. Sen sijaan sinun on käytettävä plug-in kuten pyromaani tai katsele tuotettua lähdettä käyttäen Web-kehittäjä toolbar.

Lisää resursseja kirjanmerkkien luomiseen


Kirjoittanut yksinomaan WDD Patrick McNeil. Hän on freelance-kirjailija, kehittäjä ja suunnittelija. Erityisesti hän rakastaa kirjoittaa web-suunnittelusta, kouluttaa ihmisiä web-kehitykseen ja rakentaa verkkosivustoja. Patrickin intohimo web design -suuntauksiin ja -malleihin löytyy hänen kirjastaan TheWebDesignersIdeaBook.com . Seuraa Patrickia Twitterissä @designmeltdown .

Voitko ajatella tapa laajentaa hakemuksesi kirjanmerkillä? Miten olet käyttänyt mielikuvituksellisia kirjanmerkkejä?