Bookmarklet

co to je a jak to pou╛φvat

Bookmarklet je kousek javascriptovΘho k≤du ulo╛en² v oblφbenΘ polo╛ce. Dovoluje u╛ivateli provΘst na strßnce n∞jak² javascript, kter² autor strßnky nezam²╣lel. Jß si t°eba takhle zv∞t╣uji pφsmo, podtrhßvßm nepodtrhanΘ odkazy nebo na jedno kliknutφ m∞nφm rozm∞ry okna. V tomto nßvodu se pokusφm vysv∞tlit, jak bookmarklety fungujφ a jak si je tvo°it.

Bookmarklet∙m se takΘ °φkß favelety. Nenφ v tom rozdφl, jde pouze o zastra╣ovßnφ normßlnφch lidφ. Bookmarklet se odvozuje od slova bookmark = zßlo╛ka (p°φpona let znamenß, ╛e to n∞co d∞lß, srovnej applet, servlet, ·let), favelet je asi od slova favorite = oblφben².

Javascript do °ßdku adresy

Zkuste si otev°φt okno prohlφ╛eΦe a napi╣te do adresnφho °ßdku:

javascript:document.write("ahoj")

na prßzdnΘ strßnce se potom objevφ slovo ahoj. Prohlφ╛eΦ podle zaΦßtku adresy javascript: poznal, ╛e nemß p°ejφt na jinou strßnku, ale ╛e mß spustit nßsledn² skript. A ten nßsledn² skript document.write("ahoj") prost∞ jenom vypφ╣e slovo.

Psßt ahoj je na nic. U╛iteΦn∞j╣φ je p°epnutφ velikosti okna. ╚ast²m u╛ivatelsk²m rozli╣enφm obrazovky je rozli╣enφ 800 na 600 (v lΘt∞ 2003 asi 28% u╛ivatel∙). P°i lad∞nφ strßnek je pot°eba vid∞t strßnku tak, jako u╛ivatel s tφmto rozli╣enφm. Do °ßdku adresy si napi╣te k≤d

javascript:resizeTo(800,600)

a okno se zv∞t╣φ nebo zmen╣φ na tuto velikost (nefunguje v Ope°e). TakovΘhle p°izp∙sobenφ velikosti okna je pro webdesignΘra skv∞lß v∞c. Ten zßpis je ale moc zdlouhav² a je nuda ho ╗ukat ruΦn∞, tak╛e se vyplatφ ud∞lat z n∞j bookmarklet.

Jak funguje bookmarklet

Nap°ed jak funguje oblφbenß polo╛ka (Φasto se tomu °φkß zßlo╛ka, bookmark, favorite link, prost∞ to, co mß prohlφ╛eΦ v menu "oblφbenΘ"). Oblφbenß polo╛ka obsahuje adresu, v∞t╣inou http://n∞co (plus popisek apod., to nynφ nenφ d∙le╛itΘ). Kdy╛ u╛ivatel ╗ukne na oblφbenou polo╛ku, tak si prohlφ╛eΦ vezme adresu tΘ oblφbenΘ polo╛ky a p°ejde na ni. Zatφm v╣echno jasnΘ.

Co se ale stane, kdy╛ oblφbenß polo╛ka nebude mφt v adrese http://n∞co, ale javascript:n∞co? Prohlφ╛eΦ si tu adresu vezme a zkusφ na nφ p°ejφt. Jen╛e jak na nφ m∙╛e p°ejφt, kdy╛ to nenφ adresa? No vlastn∞ tomu teoreticky nerozumim, ale prost∞ ten javascript se vykonß. P°itom ale u╛ivatel fakticky z∙stane na prßv∞ prohlφ╛enΘ strßnce.

P°φklad: jsem na strßnce www.seznam.cz a chci v∞d∞t, jestli se vejde do okna velikosti 800x600. Zvolφm z menu oblφbenou polo╛ku jmΘnem 800x600, v nφ╛ mßm ulo╛en² javascript, konkrΘtn∞ javascript:resizeTo(800,600). Co se stane? Z∙stanu na strßnce www.seznam.cz, ale velikost okna se p°izp∙sobφ. Vidφm, ╛e Seznam se do toho okna na ╣φ°ku vejde.

Jak vytvo°it bookmarklet

V ka╛dΘm prohlφ╛eΦi se to d∞lß trochu jinak. Proberu to pro Mrkvosoft Exploder. ZaΦßtek je dost nelogick² (pokud znßte lep╣φ zp∙sob, sd∞lte mi ho): vlezu na libovolnou strßnku a p°idßm si ji do oblφben²ch. Potom si u tΘ novΘ oblφbenΘ polo╛ky nakliknu vlastnosti a

• zm∞nφm jmΘno oblφbenΘ polo╛ky (podle sebe)
• zm∞nφm adresu -- tam p°ijde klφΦovΘ slovo javascript: nßsledovan² javascriptov²m k≤dem

P°φklad: budu chtφt ud∞lat v Exploreru ten bookmarklet pro simulaci rozli╣enφ 800 na 600

1. vlezu si t°eba na strßnku www.seznam.cz a p°idßm si jφ do oblφben²ch. (Nebojte, jenom na chvilku.)
2. dßm oblφbenΘ, najdu tu novou polo╛ku, kliknu na nφ prav²m tlaΦφtkem a zvolφm vlastnosti
3. na kart∞ ObecnΘ zm∞nφm jmΘno podle sebe, t°eba tam dßm "800x600", abych to pak poznal
4. na zßlo╛ce Webov² dokument zm∞nφm adresu URL na "javascript:resizeTo(800,600)" (bez uvozovek) Prohlφ╛eΦ se chvφli cukß ╛e to jako nenφ bezpeΦnΘ. Nebojte se, je to asi tak nebezpeΦnΘ jako zapnut² javascript.

Potom, kdy╛ budu chtφt nasimulovat to rozli╣enφ, zvolφm prost∞ z nabφdky oblφbenΘ tu polo╛ku jmΘnem 800x600. Nikam m∞ to nep°epne, ale provede skript.

Jednodu╣╣φ postup vytvo°enφ bookmarkletu

Poradil mi to Jarek: Pokud vφte, do kterΘho adresß°e si prohlφ╛eΦ uklßdß oblφbenΘ polo╛ky, staΦφ vytvo°it v libovolnΘm textovΘm editoru, kter² uklßdß Φist² text (notepad,textpad,...) soubor s nßzvem nazev.url s obsahem:

[InternetShortcut]
URL=javascript:resizeTo(1024,768)

P°ipravenΘ bookmarklety

Vym²╣let vlastnφ skripty a pak z nich va°it bookmarklety je otrava. ObΦas se proto na netu dajφ najφt strßnky obsahujφcφ p°ipravenΘ bookmarklety. V∞t╣inou majφ formu odkazu, na kter² staΦφ kliknout prav²m tlaΦφtkem a zvolit "p°idat do oblφben²ch". Je to tedy jednodu╣╣φ ne╛ tvo°it vlastnφ bookmarklet.

Osobn∞ pou╛φvßm zatφm pouze 4 bookmarklety. Zkuste si nßsledujφcφ odkazy p°idat do oblφben²ch:

Odstran∞nφ styl∙ (tenhle bookmarklet mßm od Marka Prokopa)

800x600 popsßno v²╣e

Zv∞t╣enφ strßnky (lupa 150%) v Internet Exploreru

P°idßnφ vlastnφho stylu ke strßnce - je pot°eba vytvo°it si css soubor s vlastnφmi styly a dßt si ho n∞kam na disk. Jß ten soubor mßm v adresß°i c:\pokusy. (Funguje to jenom v Exploreru, ale mn∞ to staΦφ.) V souboru se sv²mi styly mßm t°eba povinnΘ podtrhßvßnφ v╣ech odkaz∙, v∞t╣φ pφsmo odstavc∙ apod. Dß se tam napsat jak²koliv styl.

Dal╣φ bookmarklety

Napi╣te mi, prosφm odkazy na strßnky s bookmarklety (i kdy╛ se tam t°eba jmenujφ favelety). Dφky.

Pixy mß na strßnkßch perfektnφ p°ehled bookmarklet∙, spoustu sv²ch originßlnφch. To u╛ nejsou takovΘ prkotiny, jako ukazuju tady, to u╛ umφ ledascos. ⌐koda, ╛e je to anglicky.

Garcon∙v bookmarklet na m∞°enφ textovΘho podφlu strßnky (to je taky ╚echa).

Jesse's bookmarklets - to u╛ nenφ ╚ech.

P°ehled bookmarklet∙ na serveru, kter² se podle toho jmenuje.

Vizte tΘ╛: Efektivn∞j╣φ prochßzenφ webu